john-okeefe/anitrack
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 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,
simklAnime,
simklLoggedIn,
} from "../helperModules/GlobalVariablesAndHelperFunctions.svelte";
import { push } from "svelte-spa-router";
import { Button } from "flowbite-svelte";
import type { AniListGetSingleAnime } from "../anilist/types/AniListCurrentUserWatchListType";
import Rating from "./Rating.svelte";
import convertAniListDateToString from "../helperFunctions/convertAniListDateToString";
import AnimeTable from "./AnimeTable.svelte";
} from "../helperModules/GlobalVariablesAndHelperFunctions.svelte"
import { push } from "svelte-spa-router"
import { Button } from "flowbite-svelte"
import type { AniListGetSingleAnime } from "../anilist/types/AniListCurrentUserWatchListType"
import Rating from "./Rating.svelte"
import convertAniListDateToString from "../helperFunctions/convertAniListDateToString"
import AnimeTable from "./AnimeTable.svelte"
import type {
MALAnime,
MalListStatus,
MALUploadStatus,
} from "../mal/types/MALTypes";
import type { SimklAnime } from "../simkl/types/simklTypes";
import { writable } from "svelte/store";
} from "../mal/types/MALTypes"
import type { SimklAnime } from "../simkl/types/simklTypes"
import { writable } from "svelte/store"
import type {
StatusOption,
StatusOptions,
} from "../helperTypes/StatusTypes";
import type { AniListUpdateVariables } from "../anilist/types/AniListTypes";
import convertDateStringToAniList from "../helperFunctions/convertDateStringToAniList";
} from "../helperTypes/StatusTypes"
import type { AniListUpdateVariables } from "../anilist/types/AniListTypes"
import convertDateStringToAniList from "../helperFunctions/convertDateStringToAniList"
import {
AniListDeleteEntry,
AniListUpdateEntry,
@ -35,32 +35,32 @@
SimklSyncRating,
SimklSyncRemove,
SimklSyncStatus,
} from "../../wailsjs/go/main/App";
import { AddAnimeServiceToTable } from "../helperModules/AddAnimeServiceToTable.svelte";
import { CheckIfAniListLoggedInAndLoadWatchList } from "../helperModules/CheckIfAniListLoggedInAndLoadWatchList.svelte";
} from "../../wailsjs/go/main/App"
import { AddAnimeServiceToTable } from "../helperModules/AddAnimeServiceToTable.svelte"
import { CheckIfAniListLoggedInAndLoadWatchList } from "../helperModules/CheckIfAniListLoggedInAndLoadWatchList.svelte"
let isAniListLoggedIn: boolean;
let isMalLoggedIn: boolean;
let isSimklLoggedIn: boolean;
let currentAniListAnime: AniListGetSingleAnime;
let currentMalAnime: MALAnime;
let currentSimklAnime: SimklAnime;
let submitting = writable(false);
let isSubmitting: boolean;
let submitSuccess = writable(false);
let isAniListLoggedIn: boolean
let isMalLoggedIn: boolean
let isSimklLoggedIn: boolean
let currentAniListAnime: AniListGetSingleAnime
let currentMalAnime: MALAnime
let currentSimklAnime: SimklAnime
let submitting = writable(false)
let isSubmitting: boolean
let submitSuccess = writable(false)
aniListLoggedIn.subscribe((value) => (isAniListLoggedIn = value));
malLoggedIn.subscribe((value) => (isMalLoggedIn = value));
simklLoggedIn.subscribe((value) => (isSimklLoggedIn = value));
aniListAnime.subscribe((value) => (currentAniListAnime = value));
malAnime.subscribe((value) => (currentMalAnime = value));
simklAnime.subscribe((value) => (currentSimklAnime = value));
submitting.subscribe((value) => (isSubmitting = value));
aniListLoggedIn.subscribe((value) => (isAniListLoggedIn = value))
malLoggedIn.subscribe((value) => (isMalLoggedIn = value))
simklLoggedIn.subscribe((value) => (isSimklLoggedIn = value))
aniListAnime.subscribe((value) => (currentAniListAnime = value))
malAnime.subscribe((value) => (currentMalAnime = value))
simklAnime.subscribe((value) => (currentSimklAnime = value))
submitting.subscribe((value) => (isSubmitting = value))
const title =
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 = [
{ id: 0, aniList: "CURRENT", mal: "watching", simkl: "watching" },
{
@ -73,21 +73,21 @@
{ id: 3, aniList: "DROPPED", mal: "dropped", simkl: "dropped" },
{ id: 4, aniList: "PAUSED", mal: "on_hold", simkl: "hold" },
{ id: 5, aniList: "REPEATING", mal: "rewatching", simkl: "watching" },
];
]
let startingAnilistStatusOption: StatusOption = statusOptions.filter(
(option) =>
currentAniListAnime.data.MediaList.status === option.aniList,
)[0];
)[0]
const startedAtDate = convertAniListDateToString(
currentAniListAnime.data.MediaList.startedAt,
);
)
const completedAtDate = convertAniListDateToString(
currentAniListAnime.data.MediaList.completedAt,
);
)
if (isAniListLoggedIn)
AddAnimeServiceToTable({
id: currentAniListAnime.data.MediaList.mediaId,
id: `a-${currentAniListAnime.data.MediaList.mediaId}`,
title,
service: "AniList",
progress: currentAniListAnime.data.MediaList.progress,
@ -101,11 +101,11 @@
score: currentAniListAnime.data.MediaList.score,
repeat: currentAniListAnime.data.MediaList.repeat,
notes: currentAniListAnime.data.MediaList.notes,
});
})
if (isMalLoggedIn)
AddAnimeServiceToTable({
id: currentMalAnime.id,
id: `m-${currentMalAnime.id}`,
title: currentMalAnime.title,
service: "MyAnimeList",
progress: currentMalAnime.my_list_status.num_episodes_watched,
@ -115,11 +115,11 @@
score: currentMalAnime.my_list_status.score,
repeat: currentMalAnime.my_list_status.num_times_rewatched,
notes: currentMalAnime.my_list_status.comments,
});
})
if (isSimklLoggedIn && Object.keys(currentSimklAnime).length > 0)
AddAnimeServiceToTable({
id: currentSimklAnime.show.ids.simkl,
id: `s-${currentSimklAnime.show.ids.simkl}`,
title: currentSimklAnime.show.title,
service: "Simkl",
progress: currentSimklAnime.watched_episodes_count,
@ -129,18 +129,18 @@
score: currentSimklAnime.user_rating,
repeat: 0,
notes: "",
});
})
const handleSubmit = async (e: any) => {
submitting.set(true);
submitting.set(true)
let submitData: {
rating: number;
episodes: number;
status: StatusOption;
startedAt: string;
completedAt: string;
repeat: number;
notes: string;
rating: number
episodes: number
status: StatusOption
startedAt: string
completedAt: string
repeat: number
notes: string
} = {
rating: 0,
episodes: 0,
@ -154,27 +154,27 @@
completedAt: "",
repeat: 0,
notes: "",
};
const formData = new FormData(e.target);
}
const formData = new FormData(e.target)
for (let field of formData) {
const [key, value] = field;
const [key, value] = field
if (key === "rating") {
submitData.rating = Number(value) * 2;
continue;
submitData.rating = Number(value) * 2
continue
}
if (key === "episodes") {
submitData.episodes = Number(value);
continue;
submitData.episodes = Number(value)
continue
}
if (key === "repeat") {
submitData.repeat = Number(value);
continue;
submitData.repeat = Number(value)
continue
}
if (key === "status") {
submitData.status = startingAnilistStatusOption;
continue;
submitData.status = startingAnilistStatusOption
continue
}
submitData[key] = value;
submitData[key] = value
}
if (
@ -190,18 +190,18 @@
notes: submitData.notes,
startedAt: convertDateStringToAniList(submitData.startedAt),
completedAt: convertDateStringToAniList(submitData.completedAt),
};
}
await AniListUpdateEntry(body).then(
(value: AniListGetSingleAnime) => {
// 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
// delete value.data.MediaList.media.tags
aniListAnime.update((newValue) => {
newValue = value;
return newValue;
});
newValue = value
return newValue
})
AddAnimeServiceToTable({
id: currentAniListAnime.data.MediaList.mediaId,
id: `a-${currentAniListAnime.data.MediaList.mediaId}`,
title,
service: "AniList",
progress: currentAniListAnime.data.MediaList.progress,
@ -215,9 +215,9 @@
score: currentAniListAnime.data.MediaList.score,
repeat: currentAniListAnime.data.MediaList.repeat,
notes: currentAniListAnime.data.MediaList.notes,
});
})
},
);
)
}
if (malLoggedIn && currentMalAnime.id !== 0) {
@ -228,24 +228,24 @@
num_watched_episodes: submitData.episodes,
num_times_rewatched: submitData.repeat,
comments: submitData.notes,
};
}
await MyAnimeListUpdate(currentMalAnime, body).then(
(malAnimeReturn: MalListStatus) => {
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.score = malAnimeReturn.score;
malAnimeReturn.is_rewatching
value.my_list_status.score = malAnimeReturn.score
value.my_list_status.num_episodes_watched =
malAnimeReturn.num_episodes_watched;
malAnimeReturn.num_episodes_watched
value.my_list_status.num_times_rewatched =
malAnimeReturn.num_times_rewatched;
value.my_list_status.comments = malAnimeReturn.comments;
return value;
});
malAnimeReturn.num_times_rewatched
value.my_list_status.comments = malAnimeReturn.comments
return value
})
AddAnimeServiceToTable({
id: currentMalAnime.id,
id: `m-${currentMalAnime.id}`,
title: currentMalAnime.title,
service: "MyAnimeList",
progress:
@ -257,9 +257,9 @@
repeat: currentMalAnime.my_list_status
.num_times_rewatched,
notes: currentMalAnime.my_list_status.comments,
});
})
},
);
)
}
if (simklLoggedIn && currentSimklAnime.show.ids.simkl !== 0) {
@ -271,7 +271,7 @@
submitData.episodes,
).then((value: SimklAnime) => {
AddAnimeServiceToTable({
id: value.show.ids.simkl,
id: `s-${value.show.ids.simkl}`,
title: value.show.title,
service: "Simkl",
progress: value.watched_episodes_count,
@ -281,12 +281,12 @@
score: value.user_rating,
repeat: 0,
notes: "",
});
})
simklAnime.update((newValue) => {
newValue = value;
return newValue;
});
});
newValue = value
return newValue
})
})
}
if (currentSimklAnime.user_rating !== submitData.rating) {
@ -295,7 +295,7 @@
submitData.rating,
).then((value) => {
AddAnimeServiceToTable({
id: value.show.ids.simkl,
id: `s-${value.show.ids.simkl}`,
title: value.show.title,
service: "Simkl",
progress: value.watched_episodes_count,
@ -305,12 +305,12 @@
score: value.user_rating,
repeat: 0,
notes: "",
});
})
simklAnime.update((newValue) => {
newValue = value;
return newValue;
});
});
newValue = value
return newValue
})
})
}
if (currentSimklAnime.status !== submitData.status.simkl) {
@ -319,7 +319,7 @@
submitData.status.simkl,
).then((value) => {
AddAnimeServiceToTable({
id: value.show.ids.simkl,
id: `s-${value.show.ids.simkl}`,
title: value.show.title,
service: "Simkl",
progress: value.watched_episodes_count,
@ -329,29 +329,29 @@
score: value.user_rating,
repeat: 0,
notes: "",
});
})
simklAnime.update((newValue) => {
newValue = value;
return newValue;
});
});
newValue = value
return newValue
})
})
}
}
submitting.set(false);
submitSuccess.set(true);
setTimeout(() => submitSuccess.set(false), 2000);
};
submitting.set(false)
submitSuccess.set(true)
setTimeout(() => submitSuccess.set(false), 2000)
}
const deleteEntries = async () => {
submitting.set(true);
submitting.set(true)
if (
isAniListLoggedIn &&
currentAniListAnime.data.MediaList.mediaId !== 0
) {
await AniListDeleteEntry(currentAniListAnime.data.MediaList.id);
await AniListDeleteEntry(currentAniListAnime.data.MediaList.id)
AddAnimeServiceToTable({
id: currentAniListAnime.data.MediaList.mediaId,
id: `a-${currentAniListAnime.data.MediaList.mediaId}`,
title,
service: "AniList",
progress: 0,
@ -361,12 +361,12 @@
score: 0,
repeat: 0,
notes: "",
});
})
}
if (malLoggedIn && currentMalAnime.id !== 0) {
await DeleteMyAnimeListEntry(currentMalAnime.id);
await DeleteMyAnimeListEntry(currentMalAnime.id)
AddAnimeServiceToTable({
id: currentMalAnime.id,
id: `m-${currentMalAnime.id}`,
title: currentMalAnime.title,
service: "MyAnimeList",
progress: 0,
@ -376,12 +376,12 @@
score: 0,
repeat: 0,
notes: "",
});
})
}
if (simklLoggedIn && currentSimklAnime.show.ids.simkl !== 0) {
await SimklSyncRemove(currentSimklAnime);
await SimklSyncRemove(currentSimklAnime)
AddAnimeServiceToTable({
id: currentSimklAnime.show.ids.simkl,
id: `s-${currentSimklAnime.show.ids.simkl}`,
title: currentSimklAnime.show.title,
service: "Simkl",
progress: 0,
@ -391,15 +391,18 @@
score: 0,
repeat: 0,
notes: "",
});
})
}
submitting.set(false);
submitSuccess.set(true);
setTimeout(() => submitSuccess.set(false), 2000);
};
submitting.set(false)
submitSuccess.set(true)
setTimeout(() => submitSuccess.set(false), 2000)
}
</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="md:col-span-2 space-y-3">
<img
@ -592,10 +595,9 @@
<Button
disabled={isSubmitting}
id="delete-button"
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-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"
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-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"
on:click={deleteEntries}
>
<svg
@ -627,10 +629,9 @@
<Button
disabled={isSubmitting}
id="sync-button"
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-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"
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-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"
type="submit"
>
<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
dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700"
on:click={async () => {
await CheckIfAniListLoggedInAndLoadWatchList();
return push("/");
await CheckIfAniListLoggedInAndLoadWatchList()
return push("/")
}}
>
Go Home
@ -674,4 +675,3 @@
<p>{@html currentAniListAnime.data.MediaList.media.description}</p>
</div>
</form>

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

@ -1,15 +1,22 @@
<script lang="ts">
import { createTable, Render, Subscribe } from "svelte-headless-table";
import {
createRender,
createTable,
Render,
Subscribe,
} from "svelte-headless-table"
// @ts-ignore
import { addSortBy } from "svelte-headless-table/plugins";
import { tableItems } from "../helperModules/GlobalVariablesAndHelperFunctions.svelte";
import { addSortBy } from "svelte-headless-table/plugins"
import { tableItems } from "../helperModules/GlobalVariablesAndHelperFunctions.svelte"
import WebsiteLink from "./WebsiteLink.svelte"
//when adding sort here is code { sort: addSortBy() }
const table = createTable(tableItems, { sort: addSortBy() });
const table = createTable(tableItems, { sort: addSortBy() })
const columns = table.createColumns([
table.column({
header: "Service Id",
cell: ({ value }) => createRender(WebsiteLink, {id: value}),
accessor: "id",
}),
table.column({
@ -48,11 +55,11 @@
header: "Notes",
accessor: "notes",
}),
]);
])
//add pluginStates when add sort back
const { headerRows, rows, tableAttrs, tableBodyAttrs } =
table.createViewModel(columns);
table.createViewModel(columns)
</script>
<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 TableItem = {
id: number
id: string
title: string
service: string
progress: number
@ -11,4 +11,4 @@ export type TableItem = {
score: number
repeat: number
notes: string
}
}