added functions for submitting and created table of services
This commit is contained in:
parent
6c4fdabb79
commit
49e461d0ff
@ -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>
|
||||
Loading…
Reference in New Issue
Block a user