added functions for submitting and created table of services

This commit is contained in:
John O'Keefe 2024-08-09 15:13:44 -04:00
parent 6c4fdabb79
commit 49e461d0ff

View File

@ -1,9 +1,90 @@
<script lang="ts">
import {anilistModal} from "./GetAniListSingleItemAndOpenModal.svelte";
import {anime} from "./GetAniListSingleItemAndOpenModal.svelte";
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} 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 !== "" ?
anime.data.MediaList.media.title.english :
anime.data.MediaList.media.title.romaji
const title = aniListAnime.data.MediaList.media.title.english !== "" ?
aniListAnime.data.MediaList.media.title.english :
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,
status: anime.data.MediaList.status,
progress: aniListAnime.data.MediaList.progress,
status: aniListAnime.data.MediaList.status,
startedAt: {
year: anime.data.MediaList.startedAt.year,
month: anime.data.MediaList.startedAt.month,
day: anime.data.MediaList.startedAt.day
year: aniListAnime.data.MediaList.startedAt.year,
month: aniListAnime.data.MediaList.startedAt.month,
day: aniListAnime.data.MediaList.startedAt.day
},
completedAt: {
year: anime.data.MediaList.completedAt.year,
month: anime.data.MediaList.completedAt.month,
day: anime.data.MediaList.completedAt.day
year: aniListAnime.data.MediaList.completedAt.year,
month: aniListAnime.data.MediaList.completedAt.month,
day: aniListAnime.data.MediaList.completedAt.day
},
repeat: anime.data.MediaList.repeat,
score: anime.data.MediaList.score,
notes: anime.data.MediaList.notes
repeat: aniListAnime.data.MediaList.repeat,
score: aniListAnime.data.MediaList.score,
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>