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

made anime Id in table a link to their respective sites

Browse Source
This commit is contained in:
John O'Keefe 2024-10-02 19:26:52 -04:00
parent 7e3369d0f0
commit 2cffd54c4d
4 changed files with 173 additions and 138 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,26 +6,26 @@
malLoggedIn, malLoggedIn,
simklAnime, simklAnime,
simklLoggedIn, simklLoggedIn,
} from "../helperModules/GlobalVariablesAndHelperFunctions.svelte"; } from "../helperModules/GlobalVariablesAndHelperFunctions.svelte"
import { push } from "svelte-spa-router"; import { push } from "svelte-spa-router"
import { Button } from "flowbite-svelte"; import { Button } from "flowbite-svelte"
import type { AniListGetSingleAnime } from "../anilist/types/AniListCurrentUserWatchListType"; import type { AniListGetSingleAnime } from "../anilist/types/AniListCurrentUserWatchListType"
import Rating from "./Rating.svelte"; import Rating from "./Rating.svelte"
import convertAniListDateToString from "../helperFunctions/convertAniListDateToString"; import convertAniListDateToString from "../helperFunctions/convertAniListDateToString"
import AnimeTable from "./AnimeTable.svelte"; import AnimeTable from "./AnimeTable.svelte"
import type { import type {
MALAnime, MALAnime,
MalListStatus, MalListStatus,
MALUploadStatus, MALUploadStatus,
} 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 { import type {
StatusOption, StatusOption,
StatusOptions, StatusOptions,
} from "../helperTypes/StatusTypes"; } from "../helperTypes/StatusTypes"
import type { AniListUpdateVariables } from "../anilist/types/AniListTypes"; import type { AniListUpdateVariables } from "../anilist/types/AniListTypes"
import convertDateStringToAniList from "../helperFunctions/convertDateStringToAniList"; import convertDateStringToAniList from "../helperFunctions/convertDateStringToAniList"
import { import {
AniListDeleteEntry, AniListDeleteEntry,
AniListUpdateEntry, AniListUpdateEntry,
@ -35,32 +35,32 @@
SimklSyncRating, SimklSyncRating,
SimklSyncRemove, SimklSyncRemove,
SimklSyncStatus, SimklSyncStatus,
} from "../../wailsjs/go/main/App"; } from "../../wailsjs/go/main/App"
import { AddAnimeServiceToTable } from "../helperModules/AddAnimeServiceToTable.svelte"; import { AddAnimeServiceToTable } from "../helperModules/AddAnimeServiceToTable.svelte"
import { CheckIfAniListLoggedInAndLoadWatchList } from "../helperModules/CheckIfAniListLoggedInAndLoadWatchList.svelte"; import { CheckIfAniListLoggedInAndLoadWatchList } from "../helperModules/CheckIfAniListLoggedInAndLoadWatchList.svelte"
let isAniListLoggedIn: boolean; let isAniListLoggedIn: boolean
let isMalLoggedIn: boolean; let isMalLoggedIn: boolean
let isSimklLoggedIn: boolean; let isSimklLoggedIn: boolean
let currentAniListAnime: AniListGetSingleAnime; let currentAniListAnime: AniListGetSingleAnime
let currentMalAnime: MALAnime; let currentMalAnime: MALAnime
let currentSimklAnime: SimklAnime; let currentSimklAnime: SimklAnime
let submitting = writable(false); let submitting = writable(false)
let isSubmitting: boolean; let isSubmitting: boolean
let submitSuccess = writable(false); let submitSuccess = writable(false)
aniListLoggedIn.subscribe((value) => (isAniListLoggedIn = value)); aniListLoggedIn.subscribe((value) => (isAniListLoggedIn = value))
malLoggedIn.subscribe((value) => (isMalLoggedIn = value)); malLoggedIn.subscribe((value) => (isMalLoggedIn = value))
simklLoggedIn.subscribe((value) => (isSimklLoggedIn = value)); simklLoggedIn.subscribe((value) => (isSimklLoggedIn = value))
aniListAnime.subscribe((value) => (currentAniListAnime = value)); aniListAnime.subscribe((value) => (currentAniListAnime = value))
malAnime.subscribe((value) => (currentMalAnime = value)); malAnime.subscribe((value) => (currentMalAnime = value))
simklAnime.subscribe((value) => (currentSimklAnime = value)); simklAnime.subscribe((value) => (currentSimklAnime = value))
submitting.subscribe((value) => (isSubmitting = value)); submitting.subscribe((value) => (isSubmitting = value))
const title = const title =
currentAniListAnime.data.MediaList.media.title.english !== "" currentAniListAnime.data.MediaList.media.title.english !== ""
? currentAniListAnime.data.MediaList.media.title.english ? currentAniListAnime.data.MediaList.media.title.english
: currentAniListAnime.data.MediaList.media.title.romaji; : currentAniListAnime.data.MediaList.media.title.romaji
const statusOptions: StatusOptions = [ const statusOptions: StatusOptions = [
{ id: 0, aniList: "CURRENT", mal: "watching", simkl: "watching" }, { id: 0, aniList: "CURRENT", mal: "watching", simkl: "watching" },
{ {
@ -73,21 +73,21 @@
{ id: 3, aniList: "DROPPED", mal: "dropped", simkl: "dropped" }, { id: 3, aniList: "DROPPED", mal: "dropped", simkl: "dropped" },
{ id: 4, aniList: "PAUSED", mal: "on_hold", simkl: "hold" }, { id: 4, aniList: "PAUSED", mal: "on_hold", simkl: "hold" },
{ 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) => (option) =>
currentAniListAnime.data.MediaList.status === option.aniList, currentAniListAnime.data.MediaList.status === option.aniList,
)[0]; )[0]
const startedAtDate = convertAniListDateToString( const startedAtDate = convertAniListDateToString(
currentAniListAnime.data.MediaList.startedAt, currentAniListAnime.data.MediaList.startedAt,
); )
const completedAtDate = convertAniListDateToString( const completedAtDate = convertAniListDateToString(
currentAniListAnime.data.MediaList.completedAt, currentAniListAnime.data.MediaList.completedAt,
); )
if (isAniListLoggedIn) if (isAniListLoggedIn)
AddAnimeServiceToTable({ AddAnimeServiceToTable({
id: currentAniListAnime.data.MediaList.mediaId, id: `a-${currentAniListAnime.data.MediaList.mediaId}`,
title, title,
service: "AniList", service: "AniList",
progress: currentAniListAnime.data.MediaList.progress, progress: currentAniListAnime.data.MediaList.progress,
@ -101,11 +101,11 @@
score: currentAniListAnime.data.MediaList.score, score: currentAniListAnime.data.MediaList.score,
repeat: currentAniListAnime.data.MediaList.repeat, repeat: currentAniListAnime.data.MediaList.repeat,
notes: currentAniListAnime.data.MediaList.notes, notes: currentAniListAnime.data.MediaList.notes,
}); })
if (isMalLoggedIn) if (isMalLoggedIn)
AddAnimeServiceToTable({ AddAnimeServiceToTable({
id: 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,
@ -115,11 +115,11 @@
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,
}); })
if (isSimklLoggedIn && Object.keys(currentSimklAnime).length > 0) if (isSimklLoggedIn && Object.keys(currentSimklAnime).length > 0)
AddAnimeServiceToTable({ AddAnimeServiceToTable({
id: currentSimklAnime.show.ids.simkl, id: `s-${currentSimklAnime.show.ids.simkl}`,
title: currentSimklAnime.show.title, title: currentSimklAnime.show.title,
service: "Simkl", service: "Simkl",
progress: currentSimklAnime.watched_episodes_count, progress: currentSimklAnime.watched_episodes_count,
@ -129,18 +129,18 @@
score: currentSimklAnime.user_rating, score: currentSimklAnime.user_rating,
repeat: 0, repeat: 0,
notes: "", notes: "",
}); })
const handleSubmit = async (e: any) => { const handleSubmit = async (e: any) => {
submitting.set(true); submitting.set(true)
let submitData: { let submitData: {
rating: number; rating: number
episodes: number; episodes: number
status: StatusOption; status: StatusOption
startedAt: string; startedAt: string
completedAt: string; completedAt: string
repeat: number; repeat: number
notes: string; notes: string
} = { } = {
rating: 0, rating: 0,
episodes: 0, episodes: 0,
@ -154,27 +154,27 @@
completedAt: "", completedAt: "",
repeat: 0, repeat: 0,
notes: "", notes: "",
}; }
const formData = new FormData(e.target); const formData = new FormData(e.target)
for (let field of formData) { for (let field of formData) {
const [key, value] = field; const [key, value] = field
if (key === "rating") { if (key === "rating") {
submitData.rating = Number(value) * 2; submitData.rating = Number(value) * 2
continue; continue
} }
if (key === "episodes") { if (key === "episodes") {
submitData.episodes = Number(value); submitData.episodes = Number(value)
continue; continue
} }
if (key === "repeat") { if (key === "repeat") {
submitData.repeat = Number(value); submitData.repeat = Number(value)
continue; continue
} }
if (key === "status") { if (key === "status") {
submitData.status = startingAnilistStatusOption; submitData.status = startingAnilistStatusOption
continue; continue
} }
submitData[key] = value; submitData[key] = value
} }
if ( if (
@ -190,18 +190,18 @@
notes: submitData.notes, notes: submitData.notes,
startedAt: convertDateStringToAniList(submitData.startedAt), startedAt: convertDateStringToAniList(submitData.startedAt),
completedAt: convertDateStringToAniList(submitData.completedAt), completedAt: convertDateStringToAniList(submitData.completedAt),
}; }
await AniListUpdateEntry(body).then( await AniListUpdateEntry(body).then(
(value: AniListGetSingleAnime) => { (value: AniListGetSingleAnime) => {
// in future when you inevitably add tags to typescript, until Anilist fixes the api bug // 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
aniListAnime.update((newValue) => { aniListAnime.update((newValue) => {
newValue = value; newValue = value
return newValue; return newValue
}); })
AddAnimeServiceToTable({ AddAnimeServiceToTable({
id: currentAniListAnime.data.MediaList.mediaId, id: `a-${currentAniListAnime.data.MediaList.mediaId}`,
title, title,
service: "AniList", service: "AniList",
progress: currentAniListAnime.data.MediaList.progress, progress: currentAniListAnime.data.MediaList.progress,
@ -215,9 +215,9 @@
score: currentAniListAnime.data.MediaList.score, score: currentAniListAnime.data.MediaList.score,
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) {
@ -228,24 +228,24 @@
num_watched_episodes: submitData.episodes, num_watched_episodes: submitData.episodes,
num_times_rewatched: submitData.repeat, num_times_rewatched: submitData.repeat,
comments: submitData.notes, comments: submitData.notes,
}; }
await MyAnimeListUpdate(currentMalAnime, body).then( await MyAnimeListUpdate(currentMalAnime, body).then(
(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 = value.my_list_status.is_rewatching =
malAnimeReturn.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
value.my_list_status.num_times_rewatched = value.my_list_status.num_times_rewatched =
malAnimeReturn.num_times_rewatched; malAnimeReturn.num_times_rewatched
value.my_list_status.comments = malAnimeReturn.comments; value.my_list_status.comments = malAnimeReturn.comments
return value; return value
}); })
AddAnimeServiceToTable({ AddAnimeServiceToTable({
id: currentMalAnime.id, id: `m-${currentMalAnime.id}`,
title: currentMalAnime.title, title: currentMalAnime.title,
service: "MyAnimeList", service: "MyAnimeList",
progress: progress:
@ -257,9 +257,9 @@
repeat: currentMalAnime.my_list_status repeat: currentMalAnime.my_list_status
.num_times_rewatched, .num_times_rewatched,
notes: currentMalAnime.my_list_status.comments, notes: currentMalAnime.my_list_status.comments,
}); })
}, },
); )
} }
if (simklLoggedIn && currentSimklAnime.show.ids.simkl !== 0) { if (simklLoggedIn && currentSimklAnime.show.ids.simkl !== 0) {
@ -271,7 +271,7 @@
submitData.episodes, submitData.episodes,
).then((value: SimklAnime) => { ).then((value: SimklAnime) => {
AddAnimeServiceToTable({ AddAnimeServiceToTable({
id: value.show.ids.simkl, id: `s-${value.show.ids.simkl}`,
title: value.show.title, title: value.show.title,
service: "Simkl", service: "Simkl",
progress: value.watched_episodes_count, progress: value.watched_episodes_count,
@ -281,12 +281,12 @@
score: value.user_rating, score: value.user_rating,
repeat: 0, repeat: 0,
notes: "", notes: "",
}); })
simklAnime.update((newValue) => { simklAnime.update((newValue) => {
newValue = value; newValue = value
return newValue; return newValue
}); })
}); })
} }
if (currentSimklAnime.user_rating !== submitData.rating) { if (currentSimklAnime.user_rating !== submitData.rating) {
@ -295,7 +295,7 @@
submitData.rating, submitData.rating,
).then((value) => { ).then((value) => {
AddAnimeServiceToTable({ AddAnimeServiceToTable({
id: value.show.ids.simkl, id: `s-${value.show.ids.simkl}`,
title: value.show.title, title: value.show.title,
service: "Simkl", service: "Simkl",
progress: value.watched_episodes_count, progress: value.watched_episodes_count,
@ -305,12 +305,12 @@
score: value.user_rating, score: value.user_rating,
repeat: 0, repeat: 0,
notes: "", notes: "",
}); })
simklAnime.update((newValue) => { simklAnime.update((newValue) => {
newValue = value; newValue = value
return newValue; return newValue
}); })
}); })
} }
if (currentSimklAnime.status !== submitData.status.simkl) { if (currentSimklAnime.status !== submitData.status.simkl) {
@ -319,7 +319,7 @@
submitData.status.simkl, submitData.status.simkl,
).then((value) => { ).then((value) => {
AddAnimeServiceToTable({ AddAnimeServiceToTable({
id: value.show.ids.simkl, id: `s-${value.show.ids.simkl}`,
title: value.show.title, title: value.show.title,
service: "Simkl", service: "Simkl",
progress: value.watched_episodes_count, progress: value.watched_episodes_count,
@ -329,29 +329,29 @@
score: value.user_rating, score: value.user_rating,
repeat: 0, repeat: 0,
notes: "", notes: "",
}); })
simklAnime.update((newValue) => { simklAnime.update((newValue) => {
newValue = value; newValue = value
return newValue; return newValue
}); })
}); })
} }
} }
submitting.set(false); submitting.set(false)
submitSuccess.set(true); submitSuccess.set(true)
setTimeout(() => submitSuccess.set(false), 2000); setTimeout(() => submitSuccess.set(false), 2000)
}; }
const deleteEntries = async () => { const deleteEntries = async () => {
submitting.set(true); submitting.set(true)
if ( if (
isAniListLoggedIn && isAniListLoggedIn &&
currentAniListAnime.data.MediaList.mediaId !== 0 currentAniListAnime.data.MediaList.mediaId !== 0
) { ) {
await AniListDeleteEntry(currentAniListAnime.data.MediaList.id); await AniListDeleteEntry(currentAniListAnime.data.MediaList.id)
AddAnimeServiceToTable({ AddAnimeServiceToTable({
id: currentAniListAnime.data.MediaList.mediaId, id: `a-${currentAniListAnime.data.MediaList.mediaId}`,
title, title,
service: "AniList", service: "AniList",
progress: 0, progress: 0,
@ -361,12 +361,12 @@
score: 0, score: 0,
repeat: 0, repeat: 0,
notes: "", notes: "",
}); })
} }
if (malLoggedIn && currentMalAnime.id !== 0) { if (malLoggedIn && currentMalAnime.id !== 0) {
await DeleteMyAnimeListEntry(currentMalAnime.id); await DeleteMyAnimeListEntry(currentMalAnime.id)
AddAnimeServiceToTable({ AddAnimeServiceToTable({
id: currentMalAnime.id, id: `m-${currentMalAnime.id}`,
title: currentMalAnime.title, title: currentMalAnime.title,
service: "MyAnimeList", service: "MyAnimeList",
progress: 0, progress: 0,
@ -376,12 +376,12 @@
score: 0, score: 0,
repeat: 0, repeat: 0,
notes: "", notes: "",
}); })
} }
if (simklLoggedIn && currentSimklAnime.show.ids.simkl !== 0) { if (simklLoggedIn && currentSimklAnime.show.ids.simkl !== 0) {
await SimklSyncRemove(currentSimklAnime); await SimklSyncRemove(currentSimklAnime)
AddAnimeServiceToTable({ AddAnimeServiceToTable({
id: currentSimklAnime.show.ids.simkl, id: `s-${currentSimklAnime.show.ids.simkl}`,
title: currentSimklAnime.show.title, title: currentSimklAnime.show.title,
service: "Simkl", service: "Simkl",
progress: 0, progress: 0,
@ -391,15 +391,18 @@
score: 0, score: 0,
repeat: 0, repeat: 0,
notes: "", notes: "",
}); })
} }
submitting.set(false); submitting.set(false)
submitSuccess.set(true); submitSuccess.set(true)
setTimeout(() => submitSuccess.set(false), 2000); setTimeout(() => submitSuccess.set(false), 2000)
}; }
</script> </script>
<form on:submit|preventDefault={handleSubmit} class="container py-10"> <form on:submit|preventDefault={handleSubmit} class="container pt-3 pb-10">
<h1 class="text-white font-bold text-left text-xl pb-3">
{title}
</h1>
<div class="grid grid-cols-1 md:grid-cols-10 grid-flow-col gap-4"> <div class="grid grid-cols-1 md:grid-cols-10 grid-flow-col gap-4">
<div class="md:col-span-2 space-y-3"> <div class="md:col-span-2 space-y-3">
<img <img
@ -592,10 +595,9 @@
<Button <Button
disabled={isSubmitting} disabled={isSubmitting}
id="delete-button" id="delete-button"
class="text-white bg-red-700 {$submitSuccess ? class="text-white bg-red-700 {$submitSuccess
'bg-green-600 dark:bg-green-600 hover:bg-green-700 dark:hover:bg-green-700 focus:ring-4 focus:ring-green-800 dark:focus:ring-green-800' : ? 'bg-green-600 dark:bg-green-600 hover:bg-green-700 dark:hover:bg-green-700 focus:ring-4 focus:ring-green-800 dark:focus:ring-green-800'
'bg-red-600 dark:bg-red-600 hover:bg-red-700 dark:hover:bg-red-700 focus:ring-4 focus:ring-red-800 dark:focus:ring-red-800' : 'bg-red-600 dark:bg-red-600 hover:bg-red-700 dark:hover:bg-red-700 focus:ring-4 focus:ring-red-800 dark:focus:ring-red-800'} font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 focus:outline-none"
} font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 focus:outline-none"
on:click={deleteEntries} on:click={deleteEntries}
> >
<svg <svg
@ -627,10 +629,9 @@
<Button <Button
disabled={isSubmitting} disabled={isSubmitting}
id="sync-button" id="sync-button"
class="text-white {$submitSuccess ? class="text-white {$submitSuccess
'bg-green-600 dark:bg-green-600 hover:bg-green-700 dark:hover:bg-green-700 focus:ring-4 focus:ring-green-800 dark:focus:ring-green-800' : ? 'bg-green-600 dark:bg-green-600 hover:bg-green-700 dark:hover:bg-green-700 focus:ring-4 focus:ring-green-800 dark:focus:ring-green-800'
'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' : '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"
} font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 focus:outline-none"
type="submit" type="submit"
> >
<svg <svg
@ -660,8 +661,8 @@
focus:ring-gray-700 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-gray-800 dark:text-white focus:ring-gray-700 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" dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700"
on:click={async () => { on:click={async () => {
await CheckIfAniListLoggedInAndLoadWatchList(); await CheckIfAniListLoggedInAndLoadWatchList()
return push("/"); return push("/")
}} }}
> >
Go Home Go Home
@ -674,4 +675,3 @@
<p>{@html currentAniListAnime.data.MediaList.media.description}</p> <p>{@html currentAniListAnime.data.MediaList.media.description}</p>
</div> </div>
</form> </form>

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

@ -1,15 +1,22 @@
<script lang="ts"> <script lang="ts">
import { createTable, Render, Subscribe } from "svelte-headless-table"; import {
createRender,
createTable,
Render,
Subscribe,
} from "svelte-headless-table"
// @ts-ignore // @ts-ignore
import { addSortBy } from "svelte-headless-table/plugins"; import { addSortBy } from "svelte-headless-table/plugins"
import { tableItems } from "../helperModules/GlobalVariablesAndHelperFunctions.svelte"; import { tableItems } from "../helperModules/GlobalVariablesAndHelperFunctions.svelte"
import WebsiteLink from "./WebsiteLink.svelte"
//when adding sort here is code { sort: addSortBy() } //when adding sort here is code { sort: addSortBy() }
const table = createTable(tableItems, { sort: addSortBy() }); const table = createTable(tableItems, { sort: addSortBy() })
const columns = table.createColumns([ const columns = table.createColumns([
table.column({ table.column({
header: "Service Id", header: "Service Id",
cell: ({ value }) => createRender(WebsiteLink, {id: value}),
accessor: "id", accessor: "id",
}), }),
table.column({ table.column({
@ -48,11 +55,11 @@
header: "Notes", header: "Notes",
accessor: "notes", accessor: "notes",
}), }),
]); ])
//add pluginStates when add sort back //add pluginStates when add sort back
const { headerRows, rows, tableAttrs, tableBodyAttrs } = const { headerRows, rows, tableAttrs, tableBodyAttrs } =
table.createViewModel(columns); table.createViewModel(columns)
</script> </script>
<div class="relative overflow-x-auto rounded-lg mb-5"> <div class="relative overflow-x-auto rounded-lg mb-5">

28
frontend/src/helperComponents/WebsiteLink.svelte Normal file
View File

@ -0,0 +1,28 @@
<script lang="ts">
import {BrowserOpenURL} from "../../wailsjs/runtime"
export let id: string
let url = ""
let isAniList = false
let isMAL = false
let isSimkl = false
let newId = id
let re = /[ams]?-?(.*)/
if (id !== undefined && id.length > 0) {
isAniList = id.includes("a-")
isMAL = id.includes("m-")
isSimkl = id.includes("s-")
newId = id.match(re)[1]
}
if (isAniList) url = `https://anilist.co/anime/${newId}`
if (isMAL) url = `https://myanimelist.net/anime/${newId}`
if (isSimkl) url = `https://simkl.com/anime/${newId}`
</script>
{#if url.length > 0}
<button class="underline underline-offset-2 px-4 py-1" on:click={() => BrowserOpenURL(url)}>{newId}</button>
{:else}
{id}
{/if}

4
frontend/src/helperTypes/TableTypes.ts
View File

@ -1,7 +1,7 @@
export type TableItems = TableItem[] export type TableItems = TableItem[]
export type TableItem = { export type TableItem = {
id: number id: string
title: string title: string
service: string service: string
progress: number progress: number
@ -11,4 +11,4 @@ export type TableItem = {
score: number score: number
repeat: number repeat: number
notes: string notes: string
} }