john-okeefe/Anitrack
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 5 Wiki Activity

reverted back to svelte-headless-table

Browse Source
This commit is contained in:
John O'Keefe 2025-02-15 21:12:36 -05:00
parent 61f8f5dd84
commit 1a083deb54
3 changed files with 851 additions and 865 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/package.json
View File

@ -16,8 +16,7 @@
"postcss": "^8.4.45", "postcss": "^8.4.45",
"svelte": "^4.0.0", "svelte": "^4.0.0",
"svelte-check": "^3.4.3", "svelte-check": "^3.4.3",
"svelte-headless-table": "^0.18.2", "svelte-headless-table": "^0.18.3",
"@tanstack/svelte-table": "^8.20.5",
"svelte-preprocess": "^5.0.3", "svelte-preprocess": "^5.0.3",
"svelte-spa-router": "^4.0.1", "svelte-spa-router": "^4.0.1",
"tailwind-merge": "^2.5.2", "tailwind-merge": "^2.5.2",

112
frontend/src/helperComponents/Anime.svelte
View File

@ -23,9 +23,15 @@
} from "../mal/types/MALTypes"; } from "../mal/types/MALTypes";
import type { SimklAnime } from "../simkl/types/simklTypes"; import type { SimklAnime } from "../simkl/types/simklTypes";
import { writable } from "svelte/store"; import { writable } from "svelte/store";
import type { StatusOption, StatusOptions } from "../helperTypes/StatusTypes"; import type {
StatusOption,
StatusOptions,
} from "../helperTypes/StatusTypes";
import type { AniListUpdateVariables } from "../anilist/types/AniListTypes"; import type { AniListUpdateVariables } from "../anilist/types/AniListTypes";
import { convertDateToAniList } from "../helperFunctions/convertDateToAniList"; import {
convertDateStringToAniList,
convertDateToAniList,
} from "../helperFunctions/convertDateToAniList";
import { import {
AniListDeleteEntry, AniListDeleteEntry,
AniListUpdateEntry, AniListUpdateEntry,
@ -77,7 +83,8 @@
{ id: 5, aniList: "REPEATING", mal: "rewatching", simkl: "watching" }, { id: 5, aniList: "REPEATING", mal: "rewatching", simkl: "watching" },
]; ];
let startingAnilistStatusOption: StatusOption = statusOptions.filter( let startingAnilistStatusOption: StatusOption = statusOptions.filter(
(option) => currentAniListAnime.data.MediaList.status === option.aniList, (option) =>
currentAniListAnime.data.MediaList.status === option.aniList,
)[0]; )[0];
let startedAtDate: Date | null = convertAniListDateToDate( let startedAtDate: Date | null = convertAniListDateToDate(
currentAniListAnime.data.MediaList.startedAt, currentAniListAnime.data.MediaList.startedAt,
@ -108,11 +115,15 @@
let startDate = ""; let startDate = "";
let finishDate = ""; let finishDate = "";
if (currentMalAnime.my_list_status.start_date !== "") { if (currentMalAnime.my_list_status.start_date !== "") {
const startArray = re.exec(currentMalAnime.my_list_status.start_date); const startArray = re.exec(
currentMalAnime.my_list_status.start_date,
);
startDate = `${startArray[2]}-${startArray[3]}-${startArray[1]}`; startDate = `${startArray[2]}-${startArray[3]}-${startArray[1]}`;
} }
if (currentMalAnime.my_list_status.finish_date !== "") { if (currentMalAnime.my_list_status.finish_date !== "") {
const finishArray = re.exec(currentMalAnime.my_list_status.finish_date); const finishArray = re.exec(
currentMalAnime.my_list_status.finish_date,
);
finishDate = `${finishArray[2]}-${finishArray[3]}-${finishArray[1]}`; finishDate = `${finishArray[2]}-${finishArray[3]}-${finishArray[1]}`;
} }
AddAnimeServiceToTable({ AddAnimeServiceToTable({
@ -189,7 +200,10 @@
submitData[key] = value; submitData[key] = value;
} }
if (isAniListLoggedIn && currentAniListAnime.data.MediaList.mediaId !== 0) { if (
isAniListLoggedIn &&
currentAniListAnime.data.MediaList.mediaId !== 0
) {
let body: AniListUpdateVariables = { let body: AniListUpdateVariables = {
mediaId: currentAniListAnime.data.MediaList.mediaId, mediaId: currentAniListAnime.data.MediaList.mediaId,
progress: submitData.episodes, progress: submitData.episodes,
@ -200,7 +214,8 @@
startedAt: convertDateToAniList(startedAtDate), startedAt: convertDateToAniList(startedAtDate),
completedAt: convertDateToAniList(completedAtDate), completedAt: convertDateToAniList(completedAtDate),
}; };
await AniListUpdateEntry(body).then((value: AniListGetSingleAnime) => { await AniListUpdateEntry(body).then(
(value: AniListGetSingleAnime) => {
/* TODO in future when you inevitably add tags to typescript, until Anilist fixes the api bug /* TODO in future when you inevitably add tags to typescript, until Anilist fixes the api bug
where tags break the SaveMediaListEntry return, you'll want to use this delete line where tags break the SaveMediaListEntry return, you'll want to use this delete line
delete value.data.MediaList.media.tags */ delete value.data.MediaList.media.tags */
@ -224,7 +239,8 @@
repeat: currentAniListAnime.data.MediaList.repeat, repeat: currentAniListAnime.data.MediaList.repeat,
notes: currentAniListAnime.data.MediaList.notes, notes: currentAniListAnime.data.MediaList.notes,
}); });
}); },
);
} }
if (malLoggedIn && currentMalAnime.id !== 0) { if (malLoggedIn && currentMalAnime.id !== 0) {
@ -241,7 +257,8 @@
(malAnimeReturn: MalListStatus) => { (malAnimeReturn: MalListStatus) => {
malAnime.update((value) => { malAnime.update((value) => {
value.my_list_status.status = malAnimeReturn.status; value.my_list_status.status = malAnimeReturn.status;
value.my_list_status.is_rewatching = malAnimeReturn.is_rewatching; value.my_list_status.is_rewatching =
malAnimeReturn.is_rewatching;
value.my_list_status.score = malAnimeReturn.score; value.my_list_status.score = malAnimeReturn.score;
value.my_list_status.num_episodes_watched = value.my_list_status.num_episodes_watched =
malAnimeReturn.num_episodes_watched; malAnimeReturn.num_episodes_watched;
@ -268,12 +285,14 @@
id: `m-${currentMalAnime.id}`, id: `m-${currentMalAnime.id}`,
title: currentMalAnime.title, title: currentMalAnime.title,
service: "MyAnimeList", service: "MyAnimeList",
progress: currentMalAnime.my_list_status.num_episodes_watched, progress:
currentMalAnime.my_list_status.num_episodes_watched,
status: currentMalAnime.my_list_status.status, status: currentMalAnime.my_list_status.status,
startedAt: startDate, startedAt: startDate,
completedAt: finishDate, completedAt: finishDate,
score: currentMalAnime.my_list_status.score, score: currentMalAnime.my_list_status.score,
repeat: currentMalAnime.my_list_status.num_times_rewatched, repeat: currentMalAnime.my_list_status
.num_times_rewatched,
notes: currentMalAnime.my_list_status.comments, notes: currentMalAnime.my_list_status.comments,
}); });
}, },
@ -281,9 +300,13 @@
} }
if (simklLoggedIn && currentSimklAnime.show.ids.simkl !== 0) { if (simklLoggedIn && currentSimklAnime.show.ids.simkl !== 0) {
if (currentSimklAnime.watched_episodes_count !== submitData.episodes) { if (
await SimklSyncEpisodes(currentSimklAnime, submitData.episodes).then( currentSimklAnime.watched_episodes_count !== submitData.episodes
(value: SimklAnime) => { ) {
await SimklSyncEpisodes(
currentSimklAnime,
submitData.episodes,
).then((value: SimklAnime) => {
AddAnimeServiceToTable({ AddAnimeServiceToTable({
id: `s-${value.show.ids.simkl}`, id: `s-${value.show.ids.simkl}`,
title: value.show.title, title: value.show.title,
@ -300,13 +323,14 @@
newValue = value; newValue = value;
return newValue; return newValue;
}); });
}, });
);
} }
if (currentSimklAnime.user_rating !== submitData.rating) { if (currentSimklAnime.user_rating !== submitData.rating) {
await SimklSyncRating(currentSimklAnime, submitData.rating).then( await SimklSyncRating(
(value) => { currentSimklAnime,
submitData.rating,
).then((value) => {
AddAnimeServiceToTable({ AddAnimeServiceToTable({
id: `s-${value.show.ids.simkl}`, id: `s-${value.show.ids.simkl}`,
title: value.show.title, title: value.show.title,
@ -323,13 +347,14 @@
newValue = value; newValue = value;
return newValue; return newValue;
}); });
}, });
);
} }
if (currentSimklAnime.status !== submitData.status.simkl) { if (currentSimklAnime.status !== submitData.status.simkl) {
await SimklSyncStatus(currentSimklAnime, submitData.status.simkl).then( await SimklSyncStatus(
(value) => { currentSimklAnime,
submitData.status.simkl,
).then((value) => {
AddAnimeServiceToTable({ AddAnimeServiceToTable({
id: `s-${value.show.ids.simkl}`, id: `s-${value.show.ids.simkl}`,
title: value.show.title, title: value.show.title,
@ -346,8 +371,7 @@
newValue = value; newValue = value;
return newValue; return newValue;
}); });
}, });
);
} }
} }
@ -358,7 +382,10 @@
const deleteEntries = async () => { const deleteEntries = async () => {
submitting.set(true); submitting.set(true);
if (isAniListLoggedIn && currentAniListAnime.data.MediaList.mediaId !== 0) { if (
isAniListLoggedIn &&
currentAniListAnime.data.MediaList.mediaId !== 0
) {
await AniListDeleteEntry(currentAniListAnime.data.MediaList.id); await AniListDeleteEntry(currentAniListAnime.data.MediaList.id);
AddAnimeServiceToTable({ AddAnimeServiceToTable({
id: `a-${currentAniListAnime.data.MediaList.mediaId}`, id: `a-${currentAniListAnime.data.MediaList.mediaId}`,
@ -418,7 +445,8 @@
currentAniListAnime.data.MediaList.media.nextAiringEpisode.episode !== 0 currentAniListAnime.data.MediaList.media.nextAiringEpisode.episode !== 0
) { ) {
max = max =
currentAniListAnime.data.MediaList.media.nextAiringEpisode.episode - 1; currentAniListAnime.data.MediaList.media.nextAiringEpisode.episode -
1;
} }
</script> </script>
@ -479,18 +507,22 @@
id="episodes" id="episodes"
class="border border-x-0 p-2.5 h-11 text-center text-sm block w-full placeholder-gray-400 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none class="border border-x-0 p-2.5 h-11 text-center text-sm block w-full placeholder-gray-400 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none
{currentAniListAnime.data.MediaList.progress < 0 || {currentAniListAnime.data.MediaList.progress < 0 ||
(currentAniListAnime.data.MediaList.media.episodes > 0 && (currentAniListAnime.data.MediaList.media.episodes >
0 &&
currentAniListAnime.data.MediaList.progress > currentAniListAnime.data.MediaList.progress >
currentAniListAnime.data.MediaList.media.episodes) || currentAniListAnime.data.MediaList.media
(currentAniListAnime.data.MediaList.media.nextAiringEpisode .episodes) ||
.episode > 0 && (currentAniListAnime.data.MediaList.media
.nextAiringEpisode.episode > 0 &&
currentAniListAnime.data.MediaList.progress > currentAniListAnime.data.MediaList.progress >
currentAniListAnime.data.MediaList.media.nextAiringEpisode currentAniListAnime.data.MediaList.media
.episode - .nextAiringEpisode.episode -
1) 1)
? 'border-red-500 border-[2px] text-rose-300 focus:ring-red-500 focus:border-red-500' ? 'border-red-500 border-[2px] text-rose-300 focus:ring-red-500 focus:border-red-500'
: 'bg-gray-700 hover:bg-gray-600 border-gray-600 text-white focus:ring-blue-500 focus:border-blue-500'} w-24" : 'bg-gray-700 hover:bg-gray-600 border-gray-600 text-white focus:ring-blue-500 focus:border-blue-500'} w-24"
bind:value={currentAniListAnime.data.MediaList.progress} bind:value={
currentAniListAnime.data.MediaList.progress
}
required required
/> />
<button <button
@ -519,15 +551,16 @@
</button> </button>
</div> </div>
<div> <div>
/ {currentAniListAnime.data.MediaList.media.nextAiringEpisode / {currentAniListAnime.data.MediaList.media
.episode !== 0 .nextAiringEpisode.episode !== 0
? currentAniListAnime.data.MediaList.media.nextAiringEpisode ? currentAniListAnime.data.MediaList.media
.episode - 1 .nextAiringEpisode.episode - 1
: currentAniListAnime.data.MediaList.media.episodes} : currentAniListAnime.data.MediaList.media.episodes}
</div> </div>
{#if currentAniListAnime.data.MediaList.media.nextAiringEpisode.episode !== 0} {#if currentAniListAnime.data.MediaList.media.nextAiringEpisode.episode !== 0}
<div> <div>
of {currentAniListAnime.data.MediaList.media.episodes} of {currentAniListAnime.data.MediaList.media
.episodes}
</div> </div>
{/if} {/if}
</div> </div>
@ -600,7 +633,8 @@
name="repeat" name="repeat"
min="0" min="0"
id="repeat" id="repeat"
class="border {currentAniListAnime.data.MediaList.repeat < 0 class="border {currentAniListAnime.data.MediaList
.repeat < 0
? 'border-red-500 border-[2px] text-rose-300 focus:ring-red-500 focus:border-red-500' ? 'border-red-500 border-[2px] text-rose-300 focus:ring-red-500 focus:border-red-500'
: 'border-gray-500 text-white focus:ring-blue-500 focus:border-blue-500'} text-sm rounded-lg block w-24 p-2.5 bg-gray-600 placeholder-gray-400 text-white" : 'border-gray-500 text-white focus:ring-blue-500 focus:border-blue-500'} text-sm rounded-lg block w-24 p-2.5 bg-gray-600 placeholder-gray-400 text-white"
bind:value={currentAniListAnime.data.MediaList.repeat} bind:value={currentAniListAnime.data.MediaList.repeat}

223
frontend/src/helperComponents/AnimeTable.svelte
View File

@ -1,166 +1,119 @@
<script lang="ts"> <script lang="ts">
import { writable } from "svelte/store";
import { import {
createSvelteTable, createRender,
flexRender, createTable,
getCoreRowModel, Render,
getSortedRowModel, Subscribe,
type OnChangeFn, } from "svelte-headless-table";
renderComponent, // @ts-ignore
} from "@tanstack/svelte-table"; import { addSortBy } from "svelte-headless-table/plugins";
import type {
ColumnDef,
SortingState,
TableOptions,
Updater,
} from "@tanstack/svelte-table";
import { tableItems } from "../helperModules/GlobalVariablesAndHelperFunctions.svelte"; import { tableItems } from "../helperModules/GlobalVariablesAndHelperFunctions.svelte";
import type { TableItem, TableItems } from "../helperTypes/TableTypes";
import WebsiteLink from "./WebsiteLink.svelte"; import WebsiteLink from "./WebsiteLink.svelte";
let currentTableItems: TableItems; //when adding sort here is code { sort: addSortBy() }
const table = createTable(tableItems, { sort: addSortBy() });
tableItems.subscribe((value: TableItems) => (currentTableItems = value)); const columns = table.createColumns([
table.column({
const defaultColumns: ColumnDef<TableItem>[] = [ header: "Service Id",
{ cell: ({ value }) => createRender(WebsiteLink, { id: value }),
accessorKey: "id", accessor: "id",
cell: (cell) => { }),
return renderComponent(WebsiteLink, { id: cell.renderValue() }); table.column({
}, header: "Anime Title",
header: () => "Service ID", accessor: "title",
}, }),
{ table.column({
accessorKey: "title", header: "Service",
header: () => "Anime Title", accessor: "service",
}, }),
{ table.column({
accessorKey: "service", header: "Episode Progress",
header: () => "Service", accessor: "progress",
}, }),
{ table.column({
accessorKey: "progress",
header: () => "Episode Progress",
},
{
accessorKey: "status",
header: "Status", header: "Status",
}, accessor: "status",
{ }),
accessorKey: "startedAt", table.column({
header: "Started At", header: "Started At",
}, accessor: "startedAt",
{ }),
accessorKey: "completedAt", table.column({
header: "Completed At", header: "Completed At",
}, accessor: "completedAt",
{ }),
accessorKey: "score", table.column({
header: "Rating", header: "Rating",
}, accessor: "score",
{ }),
accessorKey: "repeat", table.column({
header: "Repeat", header: "Repeat",
}, accessor: "repeat",
{ }),
accessorKey: "notes", table.column({
header: "Notes", header: "Notes",
}, accessor: "notes",
]; }),
]);
//sorting info //add pluginStates when add sort back
let sorting: SortingState[] = []; const { headerRows, rows, tableAttrs, tableBodyAttrs } =
table.createViewModel(columns);
const setSorting: OnChangeFn<SortingState> = (updater) => {
if (updater instanceof Function) {
sorting = updater(sorting);
} else {
sorting = updater;
}
options.update((old) => ({
...old,
state: {
...old.state,
sorting,
},
}));
};
const options = writable<TableOptions<TableItem>>({
data: currentTableItems,
columns: defaultColumns,
state: {
sorting,
},
onSortingChange: setSorting,
getCoreRowModel: getCoreRowModel(),
getSortedRowModel: getSortedRowModel(),
});
const rerender = () => {
options.update((options) => ({
...options,
data: currentTableItems,
}));
};
const table = createSvelteTable(options);
</script> </script>
<div> <div class="relative overflow-x-auto rounded-lg mb-5">
<div class="relative overflow-x-auto rounded-lg mb-5"> <table
<table class="w-full text-sm text-left rtl:text-right text-gray-400"> class="w-full text-sm text-left rtl:text-right text-gray-400"
<thead class="text-xs uppercase bg-gray-700 text-gray-400"> {...$tableAttrs}
{#each $table.getHeaderGroups() as headerGroup}
<tr>
{#each headerGroup.headers as header}
<th colSpan={header.colSpan} class="px-6 py-3">
{#if !header.isPlaceholder}
<div
class:cursor-pointer={header.column.getCanSort()}
class:select-none={header.column.getCanSort()}
on:click={header.column.getToggleSortingHandler()}
> >
<svelte:component <thead class="text-xs uppercase bg-gray-700 text-gray-400">
this={flexRender( {#each $headerRows as headerRow (headerRow.id)}
header.column.columnDef.header, <Subscribe attrs={headerRow.attrs()} let:attrs>
header.getContext(), <tr {...attrs}>
)} {#each headerRow.cells as cell (cell.id)}
/> <Subscribe
{#if header.column.getIsSorted().toString() === "asc"} attrs={cell.attrs()}
⬆️ let:attrs
{:else if header.column.getIsSorted().toString() === "desc"} props={cell.props()}
let:props
>
<th
{...attrs}
on:click={props.sort.toggle}
class:sorted={props.sort.order !==
undefined}
class="px-6 py-3"
>
<div>
<Render of={cell.render()} />
{#if props.sort.order === "asc"}
⬇️ ⬇️
{:else if props.sort.order === "desc"}
⬆️
{/if} {/if}
</div> </div>
{/if}
</th> </th>
</Subscribe>
{/each} {/each}
</tr> </tr>
</Subscribe>
{/each} {/each}
</thead> </thead>
<tbody class="bg-gray-800 border-gray-700"> <tbody {...$tableBodyAttrs}>
{#each $table.getRowModel().rows as row} {#each $rows as row (row.id)}
<tr> <Subscribe attrs={row.attrs()} let:attrs>
{#each row.getVisibleCells() as cell} <tr {...attrs} class="bg-gray-800 border-gray-700">
<td class="px-6 py-4"> {#each row.cells as cell (cell.id)}
<svelte:component <Subscribe attrs={cell.attrs()} let:attrs>
this={flexRender( <td {...attrs} class="px-6 py-4">
cell.column.columnDef.cell, <Render of={cell.render()} />
cell.getContext(),
)}
/>
</td> </td>
</Subscribe>
{/each} {/each}
</tr> </tr>
</Subscribe>
{/each} {/each}
</tbody> </tbody>
</table> </table>
</div>
<!-- <button -->
<!-- class="text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:ring-4 focus:ring-blue-800 dark:focus:ring-blue-800 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 focus:outline-none" -->
<!-- on:click={() => rerender()} -->
<!-- > -->
<!-- Rerender -->
<!-- </button> -->
</div> </div>