76 lines
3.0 KiB
Svelte
76 lines
3.0 KiB
Svelte
|
<script lang="ts">
|
||
|
|
|
||
|
|
import {Avatar} from "flowbite-svelte";
|
||
|
|
import type {AniListUser} from "./anilist/types/AniListTypes";
|
||
|
|
import {aniListLoggedIn, aniListUser, malLoggedIn, simklLoggedIn,} from "./GlobalVariablesAndHelperFunctions.svelte"
|
||
|
|
import * as runtime from "../wailsjs/runtime";
|
||
|
|
|
||
|
|
let currentAniListUser: AniListUser
|
||
|
|
let isAniListLoggedIn: boolean
|
||
|
|
let isSimklLoggedIn: boolean
|
||
|
|
let isMALLoggedIn: boolean
|
||
|
|
|
||
|
|
aniListUser.subscribe((value) => currentAniListUser = value)
|
||
|
|
aniListLoggedIn.subscribe((value) => isAniListLoggedIn = value)
|
||
|
|
simklLoggedIn.subscribe((value) => isSimklLoggedIn = value)
|
||
|
|
malLoggedIn.subscribe((value) => isMALLoggedIn = value)
|
||
|
|
|
||
|
|
function dropdownUser(): void {
|
||
|
|
let dropdown = document.querySelector("#userDropdown")
|
||
|
|
dropdown.classList.toggle("hidden")
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<div class="relative">
|
||
|
|
<button id="userDropdownButton" on:click={dropdownUser}>
|
||
|
|
{#if isAniListLoggedIn}
|
||
|
|
<Avatar src="{currentAniListUser.data.Viewer.avatar.medium}" class="cursor-pointer"
|
||
|
|
dot={{ color: 'green' }}/>
|
||
|
|
{:else}
|
||
|
|
<Avatar class="cursor-pointer" dot={{ color: 'red' }}/>
|
||
|
|
{/if}
|
||
|
|
</button>
|
||
|
|
<div id="userDropdown"
|
||
|
|
class="absolute right-0 2xl:left-1/2 2xl:-translate-x-1/2 z-10 bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700 dark:divide-gray-600">
|
||
|
|
<div class="px-4 py-3 text-sm text-gray-900 dark:text-white">
|
||
|
|
{#if isAniListLoggedIn}
|
||
|
|
<div>{currentAniListUser.data.Viewer.name}</div>
|
||
|
|
{:else}
|
||
|
|
<div>You are not logged into AniList</div>
|
||
|
|
{/if}
|
||
|
|
</div>
|
||
|
|
<ul class="py-2 text-sm text-gray-700 dark:text-gray-200"
|
||
|
|
aria-labelledby="dropdownUserAvatarButton">
|
||
|
|
{#if isAniListLoggedIn}
|
||
|
|
<li>
|
||
|
|
<button
|
||
|
|
class="block px-4 py-2 w-full hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">
|
||
|
|
Logout Anilist
|
||
|
|
</button>
|
||
|
|
</li>
|
||
|
|
{/if}
|
||
|
|
{#if isMALLoggedIn}
|
||
|
|
<li>
|
||
|
|
<button
|
||
|
|
class="block px-4 py-2 w-full hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">
|
||
|
|
Logout MAL
|
||
|
|
</button>
|
||
|
|
</li>
|
||
|
|
{/if}
|
||
|
|
{#if isSimklLoggedIn}
|
||
|
|
<li>
|
||
|
|
<button
|
||
|
|
class="block px-4 py-2 w-full hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">
|
||
|
|
Logout Simkl
|
||
|
|
</button>
|
||
|
|
</li>
|
||
|
|
{/if}
|
||
|
|
</ul>
|
||
|
|
<div class="py-2">
|
||
|
|
<button on:click={() => runtime.Quit()}
|
||
|
|
class="block px-4 py-2 w-full text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">
|
||
|
|
Exit Application
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|