added functions for submitting and created table of services

frontend/src/ChangeDataDialogue.svelte

@@ -1,9 +1,90 @@
 <script lang="ts">
-    import {anilistModal} from "./GetAniListSingleItemAndOpenModal.svelte";
+    import {
-    import {anime} from "./GetAniListSingleItemAndOpenModal.svelte";
+        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} from "../wailsjs/go/main/App";
+
+    const simklWatch = get(simklWatchList);
+    let isAniListLoggedIn: boolean
+    let isSimklLoggedIn: boolean
+
+    aniListLoggedIn.subscribe((value) => isAniListLoggedIn = value)
+    simklLoggedIn.subscribe((value) => isSimklLoggedIn = value)
+
+    const simklAnime: SimklAnime | undefined = simklWatch.anime.filter((x) => Number(x.show.ids.mal) === aniListAnime.data.MediaList.media.idMal)[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",
@@ -24,9 +105,9 @@
         anilistModal.set(false)
     };
 
-    const title = anime.data.MediaList.media.title.english !== "" ?
+    const title = aniListAnime.data.MediaList.media.title.english !== "" ?
-        anime.data.MediaList.media.title.english :
+        aniListAnime.data.MediaList.media.title.english :
-        anime.data.MediaList.media.title.romaji
+        aniListAnime.data.MediaList.media.title.romaji
 
     let config = {
         readOnly: false,
@@ -36,7 +117,7 @@
             max: 5,
             step: 0.5
         },
-        score: anime.data.MediaList.score / 2,
+        score: aniListAnime.data.MediaList.score / 2,
         showScore: false,
         scoreFormat: function () {
             return `(${this.score.toFixed(1)}/${this.countStars})`
@@ -52,21 +133,21 @@
     }
 
     let values = {
-        progress: anime.data.MediaList.progress,
+        progress: aniListAnime.data.MediaList.progress,
-        status: anime.data.MediaList.status,
+        status: aniListAnime.data.MediaList.status,
         startedAt: {
-            year: anime.data.MediaList.startedAt.year,
+            year: aniListAnime.data.MediaList.startedAt.year,
-            month: anime.data.MediaList.startedAt.month,
+            month: aniListAnime.data.MediaList.startedAt.month,
-            day: anime.data.MediaList.startedAt.day
+            day: aniListAnime.data.MediaList.startedAt.day
         },
         completedAt: {
-            year: anime.data.MediaList.completedAt.year,
+            year: aniListAnime.data.MediaList.completedAt.year,
-            month: anime.data.MediaList.completedAt.month,
+            month: aniListAnime.data.MediaList.completedAt.month,
-            day: anime.data.MediaList.completedAt.day
+            day: aniListAnime.data.MediaList.completedAt.day
         },
-        repeat: anime.data.MediaList.repeat,
+        repeat: aniListAnime.data.MediaList.repeat,
-        score: anime.data.MediaList.score,
+        score: aniListAnime.data.MediaList.score,
-        notes: anime.data.MediaList.notes
+        notes: aniListAnime.data.MediaList.notes
     }
     let startedAtDate: string
     let completedAtDate: string
@@ -76,17 +157,6 @@
         values.score = e.target.valueAsNumber * 2
     }
 
-    let count = 1;
-
-    const decrement = () => {
-        if (count > 0) {
-            count--
-        }
-    }
-
-    const increment = () => {
-        count++
-    }
 
     if (values.startedAt.year > 0) {
         let startedAtISODate = new Date(values.startedAt.year, values.startedAt.month - 1, values.startedAt.day)
@@ -115,12 +185,32 @@
         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,
+            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)
+       })
+
+    }
 </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={anime.data.MediaList.media.coverImage.large} alt="{title} Cover Image">
+            <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>
@@ -245,13 +335,44 @@
             <h2 class="text-left mb-1 text-base font-semibold text-gray-900 dark:text-white">AniList</h2>
         </div>
     </div>
-    <footer class="bg-white rounded-lg shadow max-w-4-4 dark:bg-gray-800">
+
+    <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={() => alert('Handle "success"')}>Sync Changes
+                    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
@@ -261,5 +382,12 @@
                 Cancel
             </Button>
         </div>
-    </footer>
+    </div>
+
+    <div>
+        <h3 class="text-2xl">
+            Summary
+        </h3>
+        <p>{@html aniListAnime.data.MediaList.media.description}</p>
+    </div>
 </div>