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

switched tanstack query

Browse Source
This commit is contained in:
John O'Keefe 2024-09-05 20:42:20 -04:00
parent d611ed8b3a
commit cbcb07d2f1
4 changed files with 215 additions and 131 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
frontend/src/helperComponents/AddAnimeServiceToTable.svelte
View File

@ -2,32 +2,20 @@
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
})
export function AddAnimeServiceToTable(animeItem: TableItem) {
tableItems.update((table) => {
if (table.length === 0) {
table.push(animeItem)
} else {
tableItems.update(table => {
table.push(tableItem)
return table
})
for (const [index, tableItem] of table.entries()) {
if(tableItem.service === animeItem.service) {
table[index] = animeItem
return table
}
}
table.push(animeItem)
}
}
return
return table
})
}
</script>

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

@ -1,68 +1,151 @@
<script lang="ts">
import {Table, TableBody, TableBodyCell, TableBodyRow, TableHead, TableHeadCell} from "flowbite-svelte";
import {writable} from "svelte/store";
import type {TableItems} from "../helperTypes/TableTypes";
import {writable} from 'svelte/store'
import type {ColumnDef, TableOptions} from '@tanstack/svelte-table'
import {
createSvelteTable,
flexRender,
getCoreRowModel,
getSortedRowModel,
type OnChangeFn,
type SortingState,
} from '@tanstack/svelte-table'
import {tableItems} from "./GlobalVariablesAndHelperFunctions.svelte"
import type {TableItem, TableItems} from "../helperTypes/TableTypes";
export let items: TableItems
// tableItems.subscribe(value => items = value)
let tableItemsView: TableItems
tableItems.subscribe(value => tableItemsView = 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
const defaultColumns: ColumnDef<TableItem>[] = [
{
accessorKey: 'id',
header: () => "Service Id",
cell: info => info.getValue(),
},
{
accessorKey: 'service',
header: () => 'Service',
cell: info => info.getValue(),
},
{
accessorKey: 'progress',
header: () => 'Episode Progress',
cell: info => info.getValue(),
},
{
accessorKey: 'status',
header: () => 'Status',
cell: info => info.getValue(),
},
{
accessorKey: 'startedAt',
header: () => 'Started At',
cell: info => info.getValue(),
},
{
accessorKey: 'completedAt',
header: () => 'Completed At',
cell: info => info.getValue(),
},
{
accessorKey: 'score',
header: () => 'Rating',
cell: info => info.getValue(),
},
{
accessorKey: 'repeat',
header: () => 'Repeat',
cell: info => info.getValue(),
},
{
accessorKey: 'notes',
header: () => 'Notes',
cell: info => info.getValue(),
},
]
// 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);
let sorting: SortingState = []
const setSorting: OnChangeFn<SortingState> = updater => {
if (updater instanceof Function) {
sorting = updater(sorting)
} else {
sortKey.set(key);
sortDirection.set(1);
sorting = updater
}
};
$: {
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);
options.update(old => ({
...old,
state: {
...old.state,
sorting,
},
}))
}
const options = writable<TableOptions<TableItem>>({
data: tableItemsView,
columns: defaultColumns,
state: {
sorting,
},
onSortingChange: setSorting,
getCoreRowModel: getCoreRowModel(),
getSortedRowModel: getSortedRowModel(),
})
const rerender = () => {
console.log(tableItemsView)
options.update(options => ({
...options,
data: tableItemsView,
}))
}
const table = createSvelteTable(options)
</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>
<div class="relative overflow-x-auto rounded-lg mb-5">
<table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
<thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
{#each $table.getHeaderGroups() as headerGroup}
<tr>
{#each headerGroup.headers as header}
<th class="px-6 py-3">
{#if !header.isPlaceholder}
<button
class:cursor-pointer={header.column.getCanSort()}
class:select-none={header.column.getCanSort()}
on:click={header.column.getToggleSortingHandler()}
>
<svelte:component
this={flexRender(
header.column.columnDef.header,
header.getContext()
)}
/>
{#if header.column.getIsSorted().toString() === 'asc'}
🔼
{:else if header.column.getIsSorted().toString() === 'desc'}
🔽
{/if}
</button>
{/if}
</th>
{/each}
</tr>
{/each}
</TableBody>
</Table>
</thead>
<tbody>
{#each $table.getRowModel().rows as row}
<tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
{#each row.getVisibleCells() as cell}
<td class="px-6 py-4">
<svelte:component
this={flexRender(cell.column.columnDef.cell, cell.getContext())}
/>
</td>
{/each}
</tr>
{/each}
</tbody>
</table>
<button on:click={() => rerender()} class="border p-2 mb-3"> Rerender</button>
</div>

1
frontend/src/helperComponents/Header.svelte
View File

@ -34,7 +34,6 @@
let currentLocation: any
location.subscribe(value => currentLocation = value)
console.log(currentLocation)
</script>
<nav class="bg-white border-gray-200 dark:bg-gray-900">

108
frontend/src/routes/Anime.svelte
View File

@ -26,7 +26,7 @@
SimklSyncRating,
SimklSyncStatus
} from "../../wailsjs/go/main/App";
import type {TableItems} from "../helperTypes/TableTypes";
import {AddAnimeServiceToTable} from "../helperComponents/AddAnimeServiceToTable.svelte";
let isAniListLoggedIn: boolean
let isMalLoggedIn: boolean
@ -60,9 +60,8 @@
let startingAnilistStatusOption: StatusOption = statusOptions.filter(option => currentAniListAnime.data.MediaList.status === option.aniList)[0]
const startedAtDate = convertAniListDateToString(currentAniListAnime.data.MediaList.startedAt)
const completedAtDate = convertAniListDateToString(currentAniListAnime.data.MediaList.completedAt)
let tableItems: TableItems = []
if (isAniListLoggedIn) tableItems.push({
if (isAniListLoggedIn) AddAnimeServiceToTable({
id: currentAniListAnime.data.MediaList.id,
service: "AniList",
progress: currentAniListAnime.data.MediaList.progress,
@ -75,7 +74,7 @@
})
if (isMalLoggedIn) tableItems.push({
if (isMalLoggedIn) AddAnimeServiceToTable({
id: currentMalAnime.id,
service: "MyAnimeList",
progress: currentMalAnime.my_list_status.num_episodes_watched,
@ -87,7 +86,7 @@
notes: currentMalAnime.my_list_status.comments
})
if (isSimklLoggedIn && Object.keys(currentSimklAnime).length > 0) tableItems.push({
if (isSimklLoggedIn && Object.keys(currentSimklAnime).length > 0) AddAnimeServiceToTable({
id: currentSimklAnime.show.ids.simkl,
service: "Simkl",
progress: currentSimklAnime.watched_episodes_count,
@ -99,7 +98,6 @@
notes: ""
})
const handleSubmit = async (e: any) => {
submitting.set(true)
let submitData: {
@ -165,19 +163,17 @@
newValue = value
return newValue
})
for (const [index, tableItem] of tableItems.entries()) {
if (tableItem.service === "AniList") {
tableItems[index].id = currentAniListAnime.data.MediaList.id
tableItems[index].service = "AniList"
tableItems[index].progress = currentAniListAnime.data.MediaList.progress
tableItems[index].status = currentAniListAnime.data.MediaList.status
tableItems[index].startedAt = convertAniListDateToString(currentAniListAnime.data.MediaList.startedAt)
tableItems[index].completedAt = convertAniListDateToString(currentAniListAnime.data.MediaList.completedAt)
tableItems[index].score = currentAniListAnime.data.MediaList.score
tableItems[index].repeat = currentAniListAnime.data.MediaList.repeat
tableItems[index].notes = currentAniListAnime.data.MediaList.notes
}
}
AddAnimeServiceToTable({
id: currentAniListAnime.data.MediaList.id,
service: "AniList",
progress: currentAniListAnime.data.MediaList.progress,
status: currentAniListAnime.data.MediaList.status,
startedAt: convertAniListDateToString(currentAniListAnime.data.MediaList.startedAt),
completedAt: convertAniListDateToString(currentAniListAnime.data.MediaList.completedAt),
score: currentAniListAnime.data.MediaList.score,
repeat: currentAniListAnime.data.MediaList.repeat,
notes: currentAniListAnime.data.MediaList.notes,
})
})
}
@ -201,47 +197,54 @@
value.my_list_status.comments = malAnimeReturn.comments
return value
})
for (const [index, tableItem] of tableItems.entries()) {
if (tableItem.service === "MyAnimeList") {
tableItems[index].id = currentMalAnime.id
tableItems[index].service = "MyAnimeList"
tableItems[index].progress = currentMalAnime.my_list_status.num_episodes_watched
tableItems[index].status = currentMalAnime.my_list_status.status
tableItems[index].startedAt = currentMalAnime.my_list_status.start_date
tableItems[index].completedAt = currentMalAnime.my_list_status.finish_date
tableItems[index].score = currentMalAnime.my_list_status.score
tableItems[index].repeat = currentMalAnime.my_list_status.num_times_rewatched
tableItems[index].notes = currentMalAnime.my_list_status.comments
}
}
AddAnimeServiceToTable({
id: currentMalAnime.id,
service: "MyAnimeList",
progress: currentMalAnime.my_list_status.num_episodes_watched,
status: currentMalAnime.my_list_status.status,
startedAt: currentMalAnime.my_list_status.start_date,
completedAt: currentMalAnime.my_list_status.finish_date,
score: currentMalAnime.my_list_status.score,
repeat: currentMalAnime.my_list_status.num_times_rewatched,
notes: currentMalAnime.my_list_status.comments,
})
})
}
if (simklLoggedIn) {
if (currentSimklAnime.watched_episodes_count !== submitData.episodes) {
await SimklSyncEpisodes(currentSimklAnime, submitData.episodes).then(value => {
await SimklSyncEpisodes(currentSimklAnime, submitData.episodes).then((value: SimklAnime) => {
AddAnimeServiceToTable({
id: value.show.ids.simkl,
service: "Simkl",
progress: value.watched_episodes_count,
status: value.status,
startedAt: "",
completedAt: "",
score: value.user_rating,
repeat: 0,
notes: ""
})
simklAnime.update(newValue => {
newValue = value
return newValue
})
for (const [index, tableItem] of tableItems.entries()) {
if (tableItem.service === "MyAnimeList") {
tableItems[index].id = currentSimklAnime.show.ids.simkl
tableItems[index].service = "Simkl"
tableItems[index].progress = currentSimklAnime.watched_episodes_count
tableItems[index].status = currentSimklAnime.status
tableItems[index].startedAt = ""
tableItems[index].completedAt = ""
tableItems[index].score = currentSimklAnime.user_rating
tableItems[index].repeat = 0
tableItems[index].notes = ""
}
}
})
}
if (currentSimklAnime.user_rating !== submitData.rating) {
await SimklSyncRating(currentSimklAnime, submitData.rating).then(value => {
AddAnimeServiceToTable({
id: value.show.ids.simkl,
service: "Simkl",
progress: value.watched_episodes_count,
status: value.status,
startedAt: "",
completedAt: "",
score: value.user_rating,
repeat: 0,
notes: ""
})
simklAnime.update(newValue => {
newValue = value
return newValue
@ -251,6 +254,17 @@
if (currentSimklAnime.status !== submitData.status.simkl) {
await SimklSyncStatus(currentSimklAnime, submitData.status.simkl).then(value => {
AddAnimeServiceToTable({
id: value.show.ids.simkl,
service: "Simkl",
progress: value.watched_episodes_count,
status: value.status,
startedAt: "",
completedAt: "",
score: value.user_rating,
repeat: 0,
notes: ""
})
simklAnime.update(newValue => {
newValue = value
return newValue
@ -394,7 +408,7 @@
</div>
</div>
<AnimeTable items={tableItems}/>
<AnimeTable/>
<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">