anitrack/frontend/src/ChangeDataDialogue.svelte

<script lang="ts">
    import {
        anilistModal,
        simklWatchList,
        aniListLoggedIn,
        simklLoggedIn
    } from "./GlobalVariablesAndHelperFunctions.svelte";
    import {aniListAnime} from "./GlobalVariablesAndHelperFunctions.svelte";
    import {Button} from "flowbite-svelte";
    // @ts-ignore
    import StarRatting from "@ernane/svelte-star-rating"
    import moment from 'moment'
    import { Table, TableBody, TableBodyCell, TableBodyRow, TableHead, TableHeadCell } from 'flowbite-svelte';
    import { writable } from 'svelte/store';
    import type {SimklAnime} from "./simkl/types/simklTypes";
    import { get } from 'svelte/store';
    import {AniListUpdateEntry, SimklSyncEpisodes, SimklSyncRating, SimklSyncStatus} from "../wailsjs/go/main/App";

    const simklWatch = get(simklWatchList);
    let isAniListLoggedIn: boolean
    let isSimklLoggedIn: boolean
    let simklAnimeIndex: number
    let simklAnime: SimklAnime | undefined = undefined

    aniListLoggedIn.subscribe((value) => isAniListLoggedIn = value)
    simklLoggedIn.subscribe((value) => isSimklLoggedIn = value)

    for (let i = 0; i < simklWatch.anime.length; i++) {
        if (Number(simklWatch.anime[i].show.ids.mal) === aniListAnime.data.MediaList.media.idMal) {
            simklAnimeIndex = i
            simklAnime = simklWatch.anime[i]
        }
    }

    type statusOption = {
        id: number,
        aniList: string,
        simkl: string,
    }

    const statusOptions: statusOption[] = [
        { id: 0, aniList: "CURRENT", simkl: "watching"},
        { id: 1, aniList: "PLANNING", simkl: "plantowatch"},
        { id: 2, aniList: "COMPLETED", simkl: "completed"},
        { id: 3, aniList: "DROPPED", simkl: "dropped"},
        { id: 4, aniList: "PAUSED", simkl: "hold"},
        { id: 5, aniList: "REPEATING", simkl: "watching"}
    ]

    let startingAnilistStatusOption: statusOption

    startingAnilistStatusOption = statusOptions.filter(option => aniListAnime.data.MediaList.status === option.aniList)[0]

    let items = [];

    if(isAniListLoggedIn) {
        items.push({
            id: aniListAnime.data.MediaList.id,
            service: "AniList",
            progress: aniListAnime.data.MediaList.progress,
            status: aniListAnime.data.MediaList.status,
            startedAt: `${aniListAnime.data.MediaList.startedAt.month}-${aniListAnime.data.MediaList.startedAt.day}-${aniListAnime.data.MediaList.startedAt.year}`,
            completedAt: `${aniListAnime.data.MediaList.completedAt.month}-${aniListAnime.data.MediaList.completedAt.day}-${aniListAnime.data.MediaList.completedAt.year}`,
            score: aniListAnime.data.MediaList.score,
            repeat: aniListAnime.data.MediaList.repeat,
            notes: aniListAnime.data.MediaList.notes
        })
    }

    if(isSimklLoggedIn && simklAnime !== undefined) {
        items.push({
            id: simklAnime.show.ids.simkl,
            service: "Simkl",
            progress: simklAnime.watched_episodes_count,
            status: simklAnime.status,
            startedAt: "",
            completedAt: "",
            score: simklAnime.user_rating,
            repeat: 0,
            notes: ""
        })
    }

    const sortKey = writable('service'); // default sort key
    const sortDirection = writable(1); // default sort direction (ascending)
    const sortItems = writable(items.slice()); // make a copy of the items array

    // Define a function to sort the items
    const sortTable = (key: any) => {
        // If the same key is clicked, reverse the sort direction
        if ($sortKey === key) {
            sortDirection.update((val) => -val);
        } else {
            sortKey.set(key);
            sortDirection.set(1);
        }
    };

    $: {
        const key = $sortKey;
        const direction = $sortDirection;
        const sorted = [...$sortItems].sort((a, b) => {
            const aVal = a[key];
            const bVal = b[key];
            if (aVal < bVal) {
                return -direction;
            } else if (aVal > bVal) {
                return direction;
            }
            return 0;
        });
        sortItems.set(sorted);
    }

    const ratingInWords = {
        0: "Not Reviewed",
        1: "Apalling",
        2: "Horrible",
        3: "Very Bad",
        4: "Bad",
        5: "Average",
        6: "Fine",
        7: "Good",
        8: "Very Good",
        9: "Great",
        10: "Masterpiece",
    }

    const hide = (e) => {
        e.preventDefault();
        anilistModal.set(false)
    };

    const title = aniListAnime.data.MediaList.media.title.english !== "" ?
        aniListAnime.data.MediaList.media.title.english :
        aniListAnime.data.MediaList.media.title.romaji

    let config = {
        readOnly: false,
        countStars: 5,
        range: {
            min: 0,
            max: 5,
            step: 0.5
        },
        score: aniListAnime.data.MediaList.score / 2,
        showScore: false,
        scoreFormat: function () {
            return `(${this.score.toFixed(1)}/${this.countStars})`
        },
        name: "",
        starConfig: {
            size: 32,
            fillColor: '#F9ED4F',
            strokeColor: "#e2c714",
            unfilledColor: '#FFF',
            strokeUnfilledColor: '#000'
        }
    }

    let values = {
        progress: aniListAnime.data.MediaList.progress,
        status: startingAnilistStatusOption,
        startedAt: {
            year: aniListAnime.data.MediaList.startedAt.year,
            month: aniListAnime.data.MediaList.startedAt.month,
            day: aniListAnime.data.MediaList.startedAt.day
        },
        completedAt: {
            year: aniListAnime.data.MediaList.completedAt.year,
            month: aniListAnime.data.MediaList.completedAt.month,
            day: aniListAnime.data.MediaList.completedAt.day
        },
        repeat: aniListAnime.data.MediaList.repeat,
        score: aniListAnime.data.MediaList.score,
        notes: aniListAnime.data.MediaList.notes
    }
    let startedAtDate: string
    let completedAtDate: string

    const changeRating = (e) => {
        config.score = e.target.valueAsNumber
        values.score = e.target.valueAsNumber * 2
    }


    if (values.startedAt.year > 0) {
        let startedAtISODate = new Date(values.startedAt.year, values.startedAt.month - 1, values.startedAt.day)
        let startedAtMoment = moment(startedAtISODate)
        startedAtDate = startedAtMoment.format('YYYY-MM-DD')
    }

    const transformStartedAtDate = (e) => {
        const re = /^([0-9]{4})-([0-9]{2})-([0-9]{2})/
        const date = re.exec(e.target.value)
        values.startedAt.year = Number(date[1])
        values.startedAt.month = Number(date[2])
        values.startedAt.day = Number(date[3])
    }

    if (values.completedAt.year > 0) {
        let completedAtISODate = new Date(values.completedAt.year, values.completedAt.month - 1, values.completedAt.day)
        let completedAtMoment = moment(completedAtISODate)
        completedAtDate = completedAtMoment.format('YYYY-MM-DD')
    }

    const transformCompletedAtDate = (e) => {
        const re = /^([0-9]{4})-([0-9]{2})-([0-9]{2})/
        const date = re.exec(e.target.value)
        values.completedAt.year = Number(date[1])
        values.completedAt.month = Number(date[2])
        values.completedAt.day = Number(date[3])
    }

    const submitData = async () => {
       await AniListUpdateEntry(
            aniListAnime.data.MediaList.mediaId,
            values.progress,
            values.status.aniList,
            values.score,
            values.repeat,
            values.notes,
            values.startedAt.year,
            values.startedAt.month,
            values.startedAt.day,
            values.completedAt.year,
            values.completedAt.month,
            values.completedAt.day
        ).then((value) => {
           console.log(value)
       })

        if (simklLoggedIn) {
            if (simklAnime.watched_episodes_count !== values.progress) {
                await SimklSyncEpisodes(simklAnime, values.progress).then(value => {
                    console.log(value)
                    simklAnime.watched_episodes_count = values.progress
                    simklWatch.anime[simklAnimeIndex].watched_episodes_count = values.progress
                })
            }

            if (simklAnime.user_rating !== values.score) {
                await SimklSyncRating(simklAnime, values.score).then(value => {
                    console.log(value)
                    simklAnime.user_rating = values.score
                    simklWatch.anime[simklAnimeIndex].user_rating = values.score
                })
            }

            if (simklAnime.status !== values.status.simkl) {
                SimklSyncStatus(simklAnime, values.status.simkl).then(value => {
                    console.log(value)
                    simklAnime.status = values.status.simkl
                    simklWatch.anime[simklAnimeIndex].status = values.status.simkl
                })
            }
        }
    }
</script>

<div id="inapp-data">
    <div class="grid grid-cols-1 md:grid-cols-10 grid-flow-col gap-4">
        <div class="md:col-span-2 space-y-3">
            <img class="rounded-lg" src={aniListAnime.data.MediaList.media.coverImage.large} alt="{title} Cover Image">
            <StarRatting bind:config on:change={changeRating}/>
            <p>Rating:  {config.score * 2}</p>
            <p>{ratingInWords[config.score * 2]}</p>
        </div>

        <div class="md:col-span-8 ">
            <div class="flex flex-col md:flex-row md:pl-10 md:pr-10 pt-5 pb-5 justify-center md:gap-x-24 lg:gap-x-56">
                <div>
                    <label for="episodes" class="text-left block mb-2 text-sm font-medium text-gray-900 dark:text-white">Episode
                        Progress</label>
                    <input
                            type="number"
                            name="episodes"
                            min="0"
                            id="episodes"
                            class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600
                            focus:border-primary-600 block w-24 p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400
                            dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
                            bind:value={values.progress}
                            required>
                </div>


                <div>
                    <label for="status"
                           class="text-left block mb-2 text-sm font-medium text-gray-900 dark:text-white">Status</label>
                    <select id="status"
                            class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500
                            focus:border-blue-500 block p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400
                            dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                            bind:value={values.status}
                    >
                        {#each statusOptions as option}
                            <option value={option}>{option.aniList}</option>
                        {/each}
                    </select>
                </div>
            </div>
            <div class="flex flex-col md:flex-row md:pl-10 md:pr-10 pt-5 pb-5 justify-center md:gap-x-16 lg:gap-x-36">

                <div>

                    <label for="startedAt" class="text-left block mb-2 text-sm font-medium text-gray-900 dark:text-white">Date
                        Started</label>
                    <div class="relative max-w-sm">
                        <div class="absolute inset-y-0 start-0 flex items-center ps-3.5 pointer-events-none">
                            <svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true"
                                 xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
                                <path d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z"/>
                            </svg>
                        </div>
                        <input
                                id="startedAt"
                                type="date"
                                name="startedAt"
                                class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500
                            focus:border-blue-500 block w-full ps-10 p-2.5 dark:bg-gray-700 dark:border-gray-600
                            dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                                value={startedAtDate}
                                placeholder="Date Started"
                                on:change={transformStartedAtDate}
                        >
                    </div>
                </div>
                <div>

                    <label for="completedAt" class="text-left block mb-2 text-sm font-medium text-gray-900 dark:text-white">Date
                        Completed</label>
                    <div class="relative max-w-sm">
                        <div class="absolute inset-y-0 start-0 flex items-center ps-3.5 pointer-events-none">
                            <svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true"
                                 xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
                                <path d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z"/>
                            </svg>
                        </div>
                        <input
                                id="completedAt"
                                type="date"
                                name="completedAt"
                                class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500
                            focus:border-blue-500 block w-full ps-10 p-2.5 dark:bg-gray-700 dark:border-gray-600
                            dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                                value={completedAtDate}
                                placeholder="Date Completed"
                                on:change={transformCompletedAtDate}
                        >
                    </div>
                </div>
                <div>
                    <label for="repeat"
                           class="text-left block mb-2 text-sm font-medium text-gray-900 dark:text-white">Rewatched</label>
                    <input
                            type="number"
                            name="repeat"
                            min="0"
                            id="repeat"
                            class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600
                            focus:border-primary-600 block w-24 p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400
                            dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
                            bind:value={values.repeat}
                            required>
                </div>
            </div>
            <div class="flex flex-col md:flex-row md:pl-10 md:pr-10 pt-5 pb-5 justify-center">
                <div class="w-full">
                    <label for="notes" class="text-left block mb-2 text-sm font-medium text-gray-900 dark:text-white">Your
                        notes</label>
                    <textarea id="notes" rows="3"
                              class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                              placeholder="Write your thoughts here..."
                              bind:value={values.notes}></textarea>
                </div>
            </div>
        </div>
    </div>
    <div id="external-data">
        <div id="anilist-data" class="flex flex-col md:flex-row md:pl-10 md:pr-10 pt-5 pb-5 justify-center md:gap-x-16 lg:gap-x-36 group">
            <h2 class="text-left mb-1 text-base font-semibold text-gray-900 dark:text-white">AniList</h2>
        </div>
    </div>

    <Table hoverable={true}>
        <TableHead>
            <TableHeadCell class="cursor-pointer" on:click={() => sortTable('id')}>ID</TableHeadCell>
            <TableHeadCell class="cursor-pointer" on:click={() => sortTable('service')}>Service</TableHeadCell>
            <TableHeadCell class="cursor-pointer" on:click={() => sortTable('progress')}>Episode Progress</TableHeadCell>
            <TableHeadCell class="cursor-pointer" on:click={() => sortTable('status')}>Status</TableHeadCell>
            <TableHeadCell class="cursor-pointer" on:click={() => sortTable('startedAt')}>Date Started</TableHeadCell>
            <TableHeadCell class="cursor-pointer" on:click={() => sortTable('completedAt')}>Date Completed</TableHeadCell>
            <TableHeadCell class="cursor-pointer" on:click={() => sortTable('score')}>Rating</TableHeadCell>
            <TableHeadCell class="cursor-pointer" on:click={() => sortTable('repeat')}>Rewatches</TableHeadCell>
            <TableHeadCell>Notes</TableHeadCell>
        </TableHead>
        <TableBody tableBodyClass="divide-y">
            {#each $sortItems as item}
                <TableBodyRow>
                    <TableBodyCell class="overflow-x-auto">{item.id}</TableBodyCell>
                    <TableBodyCell class="overflow-x-auto">{item.service}</TableBodyCell>
                    <TableBodyCell class="overflow-x-auto">{item.progress}</TableBodyCell>
                    <TableBodyCell class="overflow-x-auto">{item.status}</TableBodyCell>
                    <TableBodyCell class="overflow-x-auto">{item.startedAt}</TableBodyCell>
                    <TableBodyCell class="overflow-x-auto">{item.completedAt}</TableBodyCell>
                    <TableBodyCell class="overflow-x-auto">{item.score}</TableBodyCell>
                    <TableBodyCell class="overflow-x-auto">{item.repeat}</TableBodyCell>
                    <TableBodyCell class="overflow-x-auto">{item.notes}</TableBodyCell>
                </TableBodyRow>
            {/each}
        </TableBody>
    </Table>


    <div class="bg-white rounded-lg shadow max-w-4-4 dark:bg-gray-800">
        <div class="w-full mx-auto max-w-screen-xl p-4 md:flex md:items-center md:justify-end">
            <Button
                    class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium
                    rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none
                    dark:focus:ring-blue-800"
                    on:click={submitData}>Sync Changes
            </Button>
            <Button
                    class="text-gray-900 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4
                    focus:ring-gray-100 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-gray-800 dark:text-white
                    dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700"
                    on:click={hide}>
                Cancel
            </Button>
        </div>
    </div>

    <div>
        <h3 class="text-2xl">
            Summary
        </h3>
        <p>{@html aniListAnime.data.MediaList.media.description}</p>
    </div>
</div>