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

Compare commits

base: john-okeefe:cbcb07d2f1cfb5331c528f5db02fb125bba12c97
Branches Tags
john-okeefe:main
john-okeefe:0.1.5
john-okeefe:0.1.4
john-okeefe:0.1.3
john-okeefe:0.1.2
..
compare: john-okeefe:77e361b5b2fbe2a272308c0917a3f725074f0e56
Branches Tags
john-okeefe:main
john-okeefe:0.1.5
john-okeefe:0.1.4
john-okeefe:0.1.3
john-okeefe:0.1.2

No commits in common. "cbcb07d2f1cfb5331c528f5db02fb125bba12c97" and "77e361b5b2fbe2a272308c0917a3f725074f0e56" have entirely different histories.
cbcb07d2f1 ... 77e361b5b2

5 changed files with 146 additions and 230 deletions
Show Stats Expand all files Collapse all files

30
frontend/package.json
View File

@ -10,25 +10,25 @@
"check": "svelte-check --tsconfig ./tsconfig.json" "check": "svelte-check --tsconfig ./tsconfig.json"
}, },
"devDependencies": { "devDependencies": {
"@sveltejs/vite-plugin-svelte": "^2.4.1", "@sveltejs/vite-plugin-svelte": "^1.0.1",
"@tsconfig/svelte": "^4.0.1", "@tsconfig/svelte": "^3.0.0",
"autoprefixer": "^10.4.20", "autoprefixer": "^10.4.19",
"postcss": "^8.4.45", "postcss": "^8.4.39",
"svelte": "^4.0.0", "svelte": "^3.49.0",
"svelte-check": "^3.4.3", "svelte-check": "^2.8.0",
"svelte-preprocess": "^5.0.3", "svelte-preprocess": "^4.10.7",
"svelte-spa-router": "^4.0.1", "svelte-spa-router": "^4.0.1",
"tailwind-merge": "^2.5.2", "tailwind-merge": "^2.4.0",
"tailwindcss": "^3.4.10", "tailwindcss": "^3.4.6",
"tslib": "^2.7.0", "tslib": "^2.4.0",
"typescript": "^5.0.0", "typescript": "^4.6.4",
"vite": "^4.5.3" "vite": "^3.0.7"
}, },
"dependencies": { "dependencies": {
"@popperjs/core": "^2.11.8", "@popperjs/core": "^2.11.8",
"@tanstack/svelte-table": "^8.20.5", "@tanstack/svelte-table": "^8.20.5",
"flowbite": "^2.5.1", "flowbite": "^2.4.1",
"flowbite-svelte": "^0.46.16", "flowbite-svelte": "^0.46.15",
"moment": "^2.30.1" "moment": "^2.30.1"
} }
} }

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

@ -2,20 +2,32 @@
import type {TableItem} from "../helperTypes/TableTypes"; import type {TableItem} from "../helperTypes/TableTypes";
import { tableItems } from "./GlobalVariablesAndHelperFunctions.svelte" import { tableItems } from "./GlobalVariablesAndHelperFunctions.svelte"
export function AddAnimeServiceToTable(animeItem: TableItem) { export function AddAnimeServiceToTable(tableItem: TableItem) {
tableItems.update((table) => { let tableLoaded: TableItem[]
if (table.length === 0) { tableItems.subscribe(value => tableLoaded = value)
table.push(animeItem) 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
})
} else { } else {
for (const [index, tableItem] of table.entries()) { tableItems.update(table => {
if(tableItem.service === animeItem.service) { table.push(tableItem)
table[index] = animeItem return table
return table })
}
}
table.push(animeItem)
} }
return table }
}) return
} }
</script> </script>

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

@ -1,151 +1,68 @@
<script lang="ts"> <script lang="ts">
import {writable} from 'svelte/store' import {Table, TableBody, TableBodyCell, TableBodyRow, TableHead, TableHeadCell} from "flowbite-svelte";
import type {ColumnDef, TableOptions} from '@tanstack/svelte-table' import {writable} from "svelte/store";
import { import type {TableItems} from "../helperTypes/TableTypes";
createSvelteTable,
flexRender,
getCoreRowModel,
getSortedRowModel,
type OnChangeFn,
type SortingState,
} from '@tanstack/svelte-table'
import {tableItems} from "./GlobalVariablesAndHelperFunctions.svelte"
import type {TableItem, TableItems} from "../helperTypes/TableTypes";
let tableItemsView: TableItems export let items: TableItems
tableItems.subscribe(value => tableItemsView = value) // tableItems.subscribe(value => items = value)
const defaultColumns: ColumnDef<TableItem>[] = [ const sortKey = writable('service'); // default sort key
{ const sortDirection = writable(1); // default sort direction (ascending)
accessorKey: 'id', const sortItems = writable(items.slice()); // make a copy of the items array
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(),
},
]
let sorting: SortingState = [] // Define a function to sort the items
const sortTable = (key: any) => {
const setSorting: OnChangeFn<SortingState> = updater => { // If the same key is clicked, reverse the sort direction
if (updater instanceof Function) { if ($sortKey === key) {
sorting = updater(sorting) sortDirection.update((val) => -val);
} else { } else {
sorting = updater sortKey.set(key);
sortDirection.set(1);
} }
options.update(old => ({ };
...old,
state: { $: {
...old.state, const key = $sortKey;
sorting, 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 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> </script>
<div class="relative overflow-x-auto rounded-lg mb-5"> <Table hoverable={true}>
<table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400"> <TableHead>
<thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400"> <TableHeadCell class="cursor-pointer" on:click={() => sortTable('id')}>ID</TableHeadCell>
{#each $table.getHeaderGroups() as headerGroup} <TableHeadCell class="cursor-pointer" on:click={() => sortTable('service')}>Service</TableHeadCell>
<tr> <TableHeadCell class="cursor-pointer" on:click={() => sortTable('progress')}>Episode Progress</TableHeadCell>
{#each headerGroup.headers as header} <TableHeadCell class="cursor-pointer" on:click={() => sortTable('status')}>Status</TableHeadCell>
<th class="px-6 py-3"> <TableHeadCell class="cursor-pointer" on:click={() => sortTable('startedAt')}>Date Started</TableHeadCell>
{#if !header.isPlaceholder} <TableHeadCell class="cursor-pointer" on:click={() => sortTable('completedAt')}>Date Completed</TableHeadCell>
<button <TableHeadCell class="cursor-pointer" on:click={() => sortTable('score')}>Rating</TableHeadCell>
class:cursor-pointer={header.column.getCanSort()} <TableHeadCell class="cursor-pointer" on:click={() => sortTable('repeat')}>Rewatches</TableHeadCell>
class:select-none={header.column.getCanSort()} <TableHeadCell>Notes</TableHeadCell>
on:click={header.column.getToggleSortingHandler()} </TableHead>
> <TableBody tableBodyClass="divide-y">
<svelte:component {#each $sortItems as item}
this={flexRender( <TableBodyRow>
header.column.columnDef.header, <TableBodyCell class="overflow-x-auto">{item.id}</TableBodyCell>
header.getContext() <TableBodyCell class="overflow-x-auto">{item.service}</TableBodyCell>
)} <TableBodyCell class="overflow-x-auto">{item.progress}</TableBodyCell>
/> <TableBodyCell class="overflow-x-auto">{item.status}</TableBodyCell>
{#if header.column.getIsSorted().toString() === 'asc'} <TableBodyCell class="overflow-x-auto">{item.startedAt}</TableBodyCell>
🔼 <TableBodyCell class="overflow-x-auto">{item.completedAt}</TableBodyCell>
{:else if header.column.getIsSorted().toString() === 'desc'} <TableBodyCell class="overflow-x-auto">{item.score}</TableBodyCell>
🔽 <TableBodyCell class="overflow-x-auto">{item.repeat}</TableBodyCell>
{/if} <TableBodyCell class="overflow-x-auto">{item.notes}</TableBodyCell>
</button> </TableBodyRow>
{/if}
</th>
{/each}
</tr>
{/each} {/each}
</thead> </TableBody>
<tbody> </Table>
{#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,6 +34,7 @@
let currentLocation: any let currentLocation: any
location.subscribe(value => currentLocation = value) location.subscribe(value => currentLocation = value)
console.log(currentLocation)
</script> </script>
<nav class="bg-white border-gray-200 dark:bg-gray-900"> <nav class="bg-white border-gray-200 dark:bg-gray-900">

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

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