anitrack/frontend/src/ChangeDataDialogue.svelte

440 lines
20 KiB
Svelte
Raw Normal View History

<script lang="ts">
import {
anilistModal,
simklWatchList,
aniListLoggedIn,
simklLoggedIn
} from "./GlobalVariablesAndHelperFunctions.svelte";
import {aniListAnime} from "./GlobalVariablesAndHelperFunctions.svelte";
import {Button} from "flowbite-svelte";
// @ts-ignore
2024-07-27 12:59:31 -04:00
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';
2024-08-11 19:42:52 -04:00
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]
}
}
2024-08-11 19:42:52 -04:00
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);
}
2024-07-27 12:59:31 -04:00
const ratingInWords = {
0: "Not Reviewed",
2024-07-27 12:59:31 -04:00
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
2024-07-27 12:59:31 -04:00
let config = {
readOnly: false,
countStars: 5,
range: {
min: 0,
max: 5,
step: 0.5
},
score: aniListAnime.data.MediaList.score / 2,
2024-07-27 12:59:31 -04:00
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,
2024-08-11 19:42:52 -04:00
status: startingAnilistStatusOption,
2024-07-27 12:59:31 -04:00
startedAt: {
year: aniListAnime.data.MediaList.startedAt.year,
month: aniListAnime.data.MediaList.startedAt.month,
day: aniListAnime.data.MediaList.startedAt.day
2024-07-27 12:59:31 -04:00
},
completedAt: {
year: aniListAnime.data.MediaList.completedAt.year,
month: aniListAnime.data.MediaList.completedAt.month,
day: aniListAnime.data.MediaList.completedAt.day
2024-07-27 12:59:31 -04:00
},
repeat: aniListAnime.data.MediaList.repeat,
score: aniListAnime.data.MediaList.score,
notes: aniListAnime.data.MediaList.notes
2024-07-27 12:59:31 -04:00
}
let startedAtDate: string
let completedAtDate: string
2024-07-27 12:59:31 -04:00
const changeRating = (e) => {
config.score = e.target.valueAsNumber
values.score = e.target.valueAsNumber * 2
}
2024-07-29 16:54:05 -04:00
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')
}
2024-07-29 16:54:05 -04:00
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,
2024-08-11 19:42:52 -04:00
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)
})
2024-08-11 18:32:44 -04:00
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
})
}
2024-08-11 19:42:52 -04:00
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">
2024-07-27 12:59:31 -04:00
<StarRatting bind:config on:change={changeRating}/>
2024-07-29 16:54:05 -04:00
<p>Rating: {config.score * 2}</p>
2024-07-27 12:59:31 -04:00
<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>
2024-07-29 16:54:05 -04:00
<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
2024-07-29 16:54:05 -04:00
dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
bind:value={values.progress}
required>
</div>
2024-07-27 12:59:31 -04:00
2024-07-29 16:54:05 -04:00
<div>
<label for="status"
class="text-left block mb-2 text-sm font-medium text-gray-900 dark:text-white">Status</label>
2024-07-29 16:54:05 -04:00
<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}
2024-07-29 16:54:05 -04:00
>
2024-08-11 19:42:52 -04:00
{#each statusOptions as option}
<option value={option}>{option.aniList}</option>
{/each}
2024-07-29 16:54:05 -04:00
</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">
2024-07-27 12:59:31 -04:00
<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
2024-07-29 16:54:05 -04:00
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>
2024-07-29 16:54:05 -04:00
</div>
<div>
2024-07-29 16:54:05 -04:00
<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>
2024-07-29 16:54:05 -04:00
</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">
2024-07-29 16:54:05 -04:00
<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
2024-07-27 12:59:31 -04:00
</Button>
2024-07-29 16:54:05 -04:00
<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}>
2024-07-27 12:59:31 -04:00
Cancel
</Button>
</div>
</div>
<div>
<h3 class="text-2xl">
Summary
</h3>
<p>{@html aniListAnime.data.MediaList.media.description}</p>
</div>
2024-07-27 12:59:31 -04:00
</div>