rewrote the Anime.svelte to move out helper functions and clean up code

frontend/src/helperComponents/AddAnimeServiceToTable.svelte

@@ -0,0 +1,33 @@
+<script lang="ts" context="module">
+    import type {TableItem} from "../helperTypes/TableTypes";
+    import { tableItems } from "./GlobalVariablesAndHelperFunctions.svelte"
+
+    export function AddAnimeServiceToTable(tableItem: TableItem) {
+        let tableLoaded: TableItem[]
+        tableItems.subscribe(value => tableLoaded = value)
+        console.log(tableLoaded.length)
+        if(tableLoaded.length === 0) {
+            tableItems.update(table => {
+                table.push(tableItem)
+                return table
+            })
+            return
+        }
+
+        for (const [index, entry] of tableLoaded.entries()) {
+            console.log(entry)
+            if (entry.service === tableItem.service) {
+                tableItems.update(value => {
+                    value[index] = tableItem
+                    return value
+                })
+            } else {
+                tableItems.update(table => {
+                    table.push(tableItem)
+                    return table
+                })
+            }
+        }
+        return
+    }
+</script>

frontend/src/helperComponents/AnimeTable.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+    import {Table, TableBody, TableBodyCell, TableBodyRow, TableHead, TableHeadCell} from "flowbite-svelte";
+    import {writable} from "svelte/store";
+    import type {TableItems} from "../helperTypes/TableTypes";
+
+    export let items: TableItems
+    // tableItems.subscribe(value => items = value)
+
+    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);
+    }
+</script>
+
+<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>

frontend/src/helperComponents/GlobalVariablesAndHelperFunctions.svelte

@@ -20,6 +20,7 @@
     import type {SimklAnime, SimklUser, SimklWatchList} from "../simkl/types/simklTypes";
     import {type AniListUser, MediaListSort} from "../anilist/types/AniListTypes";
     import type {MALAnime, MALWatchlist, MyAnimeListUser} from "../mal/types/MALTypes";
+    import type {TableItems} from "../helperTypes/TableTypes";
 
     export let aniListAnime = writable({} as AniListGetSingleAnime)
     export let title = writable("")
@@ -38,6 +39,7 @@
     export let malAnime = writable({} as MALAnime)
     export let simklAnime = writable({} as SimklAnime)
     export let loading = writable(false)
+    export let tableItems = writable([] as TableItems)
 
     export let watchListPage = writable(1)
     export let animePerPage = writable(20)

frontend/src/helperComponents/Rating.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+    import StarRatting from "../star-rating/Stars.svelte";
+
+    export let score
+
+    let config = {
+        readOnly: false,
+        countStars: 5,
+        range: {
+            min: 0,
+            max: 5,
+            step: 0.5
+        },
+        score: score / 2,
+        showScore: false,
+        name: "rating",
+        scoreFormat: function(){ return `(${this.score.toFixed(0)}/${this.countStars})` },
+        starConfig: {
+            size: 32,
+            fillColor: '#F9ED4F',
+            strokeColor: "#e2c714",
+            unfilledColor: '#FFF',
+            strokeUnfilledColor: '#000'
+        }
+    }
+
+    const ratingInWords = {
+        0: "Not Reviewed",
+        1: "Appalling",
+        2: "Horrible",
+        3: "Very Bad",
+        4: "Bad",
+        5: "Average",
+        6: "Fine",
+        7: "Good",
+        8: "Very Good",
+        9: "Great",
+        10: "Masterpiece",
+    }
+
+    const changeRating = (e: any) => {
+        score = e.target.valueAsNumber * 2
+    }
+</script>
+
+<div>
+    <StarRatting bind:config on:change={changeRating}/>
+    <p>Rating:  {config.score * 2}</p>
+    <p>{ratingInWords[config.score * 2]}</p>
+</div>