made a bunch of frontend variables global

This commit is contained in:
John O'Keefe 2024-08-11 20:27:58 -04:00
parent d644758253
commit 8daf3af5f9
3 changed files with 75 additions and 54 deletions

View File

@ -1,11 +1,17 @@
<script lang="ts">
import {
anilistModal,
GetAniListSingleItemAndOpenModal,
title,
simklWatchList,
aniListLoggedIn,
simklLoggedIn
simklLoggedIn,
simklUser,
aniListUser,
aniListPrimary,
aniListWatchlist,
loginToAniList,
GetAniListSingleItemAndOpenModal,
loginToSimkl
} from "./GlobalVariablesAndHelperFunctions.svelte";
import {
CheckIfAniListLoggedIn,
@ -24,15 +30,22 @@
import {onMount} from "svelte";
import type {SimklUser} from "./simkl/types/simklTypes";
let aniListPrimary = true
let simklUser: SimklUser
let aniListUser: AniListUser
let aniListWatchlist: AniListCurrentUserWatchList
let isAniListLoggedIn: boolean
let isSimklLoggedIn: boolean
let currentSimklUser: SimklUser
let currentAniListUser: AniListUser
let isAniListPrimary: boolean
let aniListWatchListLoaded: AniListCurrentUserWatchList
aniListLoggedIn.subscribe((value) => isAniListLoggedIn = value)
simklLoggedIn.subscribe((value) => isSimklLoggedIn = value)
simklUser.subscribe((value) => currentSimklUser = value)
aniListUser.subscribe((value) => currentAniListUser = value)
aniListPrimary.subscribe((value) => isAniListPrimary = value)
aniListWatchlist.subscribe((value) => aniListWatchListLoaded = value)
let page = 1
let perPage = 20
@ -42,10 +55,10 @@
await CheckIfAniListLoggedIn().then(result => {
if (result) {
GetAniListLoggedInUser().then(result => {
aniListUser = result
if (aniListPrimary) {
aniListUser.set(result)
if (isAniListPrimary) {
GetAniListUserWatchingList(page, perPage, MediaListSort.UpdatedTimeDesc).then((result) => {
aniListWatchlist = result
aniListWatchlist.set(result)
aniListLoggedIn.set(true)
})
} else {
@ -58,7 +71,7 @@
await CheckIfSimklLoggedIn().then(result => {
if (result) {
GetSimklLoggedInUser().then(result => {
simklUser = result
simklUser.set(result)
SimklGetUserWatchlist().then(result => {
simklWatchList.set(result)
simklLoggedIn.set(result)
@ -67,57 +80,19 @@
}
})
})
function loginToSimkl(): void {
GetSimklLoggedInUser().then(result => {
simklUser = result
simklLoggedIn.set(true)
})
}
function loginToAniList(): void {
GetAniListLoggedInUser().then(result => {
aniListUser = result
aniListLoggedIn.set(true)
if (aniListPrimary) {
GetAniListUserWatchingList(page, perPage, MediaListSort.UpdatedTimeDesc).then(result => aniListWatchlist = result)
}
})
}
// function anilistGetUserWatchlist(): void {
// GetAniListUserWatchingList(page, perPage, MediaListSort.UpdatedTimeDesc).then((result) => {
// aniListWatchlist = result
// aniListLoggedIn.set(true)
// })
// }
//
// let count = 1;
//
// const decrement = () => {
// if (count > 0) {
// count--
// }
// }
//
// const increment = () => {
// count++
// }
</script>
<Header/>
<main>
{#if isAniListLoggedIn}
<div>You are logged into AniList, {aniListUser.data.Viewer.name}!</div>
<div>You are logged into AniList, {currentAniListUser.data.Viewer.name}!</div>
{:else}
<button class="btn" on:click={loginToAniList}>Login to AniList</button>
{/if}
{#if isSimklLoggedIn}
<div>You are logged into Simkl, {simklUser.user.name}</div>
<div>You are logged into Simkl, {currentSimklUser.user.name}</div>
{:else}
<Button class="btn" on:click={loginToSimkl}>Login to Simkl</Button>
{/if}
@ -127,7 +102,7 @@
<h1 class="text-left text-xl font-bold mb-4">Your Watching List</h1>
<div class="grid grid-cols-1 gap-x-6 gap-y-10 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8">
{#each aniListWatchlist.data.Page.mediaList as media}
{#each aniListWatchListLoaded.data.Page.mediaList as media}
<div class="aspect-h-1 aspect-w-1 w-full overflow-hidden rounded-lg xl:aspect-h-8 xl:aspect-w-7">
<div class="flex flex-col items-center group">
<button on:click={() => GetAniListSingleItemAndOpenModal(media.media.id, true)}>

View File

@ -1,8 +1,16 @@
<script lang="ts" context="module">
import {GetAniListItem} from "../wailsjs/go/main/App";
import type {AniListGetSingleAnime} from "./anilist/types/AniListCurrentUserWatchListType.js";
import {
GetAniListItem,
GetAniListLoggedInUser,
GetSimklLoggedInUser
} from "../wailsjs/go/main/App";
import type {
AniListCurrentUserWatchList,
AniListGetSingleAnime
} from "./anilist/types/AniListCurrentUserWatchListType.js";
import {writable} from 'svelte/store'
import type {SimklWatchList} from "./simkl/types/simklTypes";
import type {SimklUser, SimklWatchList} from "./simkl/types/simklTypes";
import {type AniListUser} from "./anilist/types/AniListTypes";
export let aniListAnime: AniListGetSingleAnime
export let title = writable("")
@ -10,6 +18,10 @@
export let aniListLoggedIn = writable(false)
export let simklLoggedIn = writable(false)
export let simklWatchList = writable({} as SimklWatchList)
export let aniListPrimary = writable(true)
export let simklUser = writable({} as SimklUser)
export let aniListUser = writable({} as AniListUser)
export let aniListWatchlist = writable({} as AniListCurrentUserWatchList)
export function GetAniListSingleItemAndOpenModal(aniId: number, login: boolean): void {
GetAniListItem(aniId, login).then(result => {
@ -20,4 +32,18 @@
anilistModal.set(true)
})
}
export function loginToSimkl(): void {
GetSimklLoggedInUser().then(result => {
simklUser = result
simklLoggedIn.set(true)
})
}
export function loginToAniList(): void {
GetAniListLoggedInUser().then(result => {
aniListUser = result
aniListLoggedIn.set(true)
})
}
</script>

View File

@ -2,6 +2,16 @@
import logo from "./assets/images/AniTrackLogo.svg"
import Search from "./Search.svelte"
import UserDialogue from "./UserHeaderDialogue.svelte";
import {
aniListLoggedIn,
simklLoggedIn
} from "./GlobalVariablesAndHelperFunctions.svelte";
let isAniListLoggedIn: boolean
let isSimklLoggedIn: boolean
aniListLoggedIn.subscribe((value) => isAniListLoggedIn = value)
simklLoggedIn.subscribe((value) => isSimklLoggedIn = value)
</script>
@ -11,6 +21,16 @@
<a href="#" class="flex items-center">
<img src={logo} class="mr-3 h-6 sm:h-9" alt="AniTrack Logo" />
</a>
<div class="flex space-x-2 items-center">
<div>
<a href="#" class="bg-blue-100 hover:bg-blue-200 text-blue-800 text-sm font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-blue-400 border border-blue-400 inline-flex items-center justify-center">AniList</a>
</div>
<div>
<a href="#" class="bg-blue-100 hover:bg-blue-200 text-blue-800 text-sm font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-blue-400 border border-blue-400 inline-flex items-center justify-center">Simkl</a>
</div>
</div>
<div class="flex space-x-4 items-center lg:order-2">
<Search />