139 lines
12 KiB
Svelte
139 lines
12 KiB
Svelte
<script lang="ts">
|
|
// import { storage } from "@/storage";
|
|
import { extrenalNavigate } from "@/utils/chrome-misc";
|
|
import { getStore } from '@/utils/storage'
|
|
import { onMount } from "svelte";
|
|
import { navigate } from '@/utils/router'
|
|
import { mainStore } from '@/utils/store'
|
|
// https://yup-live.pages.dev
|
|
import { YUP_APP_BASE } from '@/constants/config'
|
|
import Alert from '@/components/Alert.svelte'
|
|
import { alertStore } from '@/utils/store'
|
|
import PageLoader from "@/components/PageLoader.svelte";
|
|
|
|
let store
|
|
let loading = true
|
|
let currentRoute = null
|
|
let auth = false
|
|
let alert: Alert
|
|
let navigating = false
|
|
|
|
const lNavigate = async (path: string) => {
|
|
if(navigating) return
|
|
navigating = true
|
|
await navigate(path)
|
|
currentRoute = path
|
|
navigating = false
|
|
}
|
|
|
|
onMount(async () => {
|
|
store = await getStore()
|
|
alertStore.set(alert)
|
|
auth = store?.user?.auth?.authToken ?? false
|
|
if(auth){
|
|
await mainStore.set(store)
|
|
await navigate('/')
|
|
currentRoute = '/'
|
|
} else {
|
|
await navigate('/login')
|
|
currentRoute = '/login'
|
|
}
|
|
loading = false
|
|
})
|
|
|
|
</script>
|
|
|
|
<div class="entry" style="{ $mainStore.settings.theme === 'light'? 'filter: invert(1);' : '' }">
|
|
|
|
<a href="#app" on:click="{() => extrenalNavigate(YUP_APP_BASE)}">
|
|
<h1 aria-label="logo" class="logo inline-flex items-center text-[1.6rem] font-bold gap-2.5 pl-8">
|
|
<span class="gradient-text" style="{ $mainStore.settings.theme === 'light'? 'filter: invert(1.1);' : '' }" >YUP</span>
|
|
</h1>
|
|
</a>
|
|
{#if loading}
|
|
<PageLoader />
|
|
{:else if auth}
|
|
<div class="headerMenu flex">
|
|
{#if currentRoute !== '/info'}
|
|
<svg on:click={() => lNavigate('/info')} aria-hidden="true" viewBox="0 0 512 512" class="w-6 mx-1 interactive-svg"><path fill="#fff" d="M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zM256 128c17.67 0 32 14.33 32 32c0 17.67-14.33 32-32 32S224 177.7 224 160C224 142.3 238.3 128 256 128zM296 384h-80C202.8 384 192 373.3 192 360s10.75-24 24-24h16v-64H224c-13.25 0-24-10.75-24-24S210.8 224 224 224h32c13.25 0 24 10.75 24 24v88h16c13.25 0 24 10.75 24 24S309.3 384 296 384z"/></svg>
|
|
{/if}
|
|
{#if currentRoute !== '/'}
|
|
<svg on:click={() => lNavigate('/')} aria-hidden="true" class="w-6 mx-1 interactive-svg" viewBox="0 0 24 24"><g id="info"/><g><path fill="#fff" d="M12,0C5.4,0,0,5.4,0,12c0,6.6,5.4,12,12,12s12-5.4,12-12C24,5.4,18.6,0,12,0z M12,4c2.2,0,4,2.2,4,5s-1.8,5-4,5 s-4-2.2-4-5S9.8,4,12,4z M18.6,19.5C16.9,21,14.5,22,12,22s-4.9-1-6.6-2.5c-0.4-0.4-0.5-1-0.1-1.4c1.1-1.3,2.6-2.2,4.2-2.7 c0.8,0.4,1.6,0.6,2.5,0.6s1.7-0.2,2.5-0.6c1.7,0.5,3.1,1.4,4.2,2.7C19.1,18.5,19.1,19.1,18.6,19.5z" id="user2"/></g></svg>
|
|
{/if}
|
|
{#if currentRoute !== '/usage' }
|
|
<svg on:click={() => lNavigate('/usage')} aria-hidden="true" class="w-6 mx-1 interactive-svg" viewBox="0 0 512 512"><title/><path fill="#fff" d="M256,48C141.12,48,48,141.12,48,256s93.12,208,208,208,208-93.12,208-208S370.88,48,256,48ZM173.67,162.34l105,71a32.5,32.5,0,0,1-37.25,53.26,33.21,33.21,0,0,1-8-8l-71-105a8.13,8.13,0,0,1,11.32-11.32ZM256,432C159,432,80,353.05,80,256a174.55,174.55,0,0,1,53.87-126.72,14.15,14.15,0,1,1,19.64,20.37A146.53,146.53,0,0,0,108.3,256c0,81.44,66.26,147.7,147.7,147.7S403.7,337.44,403.7,256c0-76.67-58.72-139.88-133.55-147V164a14.15,14.15,0,1,1-28.3,0V94.15A14.15,14.15,0,0,1,256,80C353.05,80,432,159,432,256S353.05,432,256,432Z"/></svg>
|
|
{/if}
|
|
{#if currentRoute !== '/settings' }
|
|
<svg on:click={() => lNavigate('/settings')} aria-hidden="true" class="w-6 mx-1 interactive-svg" viewBox="0 0 32 32" ><g><path clip-rule="evenodd" d="M8,6.021V3c0-1.654-1.346-3-3-3S2,1.346,2,3v3.021 C0.792,6.936,0,8.369,0,10s0.792,3.064,2,3.977V29c0,1.654,1.346,3,3,3s3-1.346,3-3V13.977c1.208-0.912,2-2.346,2-3.977 S9.208,6.936,8,6.021z M4,3c0-0.553,0.447-1,1-1s1,0.447,1,1v2.1C5.677,5.035,5.343,5,5,5S4.323,5.035,4,5.1V3z M6,29 c0,0.553-0.447,1-1,1s-1-0.447-1-1V14.898C4.323,14.965,4.657,15,5,15s0.677-0.035,1-0.102V29z M7.865,10.84 c-0.016,0.053-0.03,0.105-0.049,0.158c-0.095,0.264-0.217,0.514-0.378,0.736c-0.004,0.006-0.01,0.01-0.014,0.016 c-0.174,0.238-0.381,0.449-0.616,0.627c-0.004,0.004-0.007,0.006-0.01,0.008c-0.241,0.182-0.51,0.328-0.799,0.43 C5.686,12.928,5.353,13,5,13s-0.686-0.072-1-0.186c-0.289-0.102-0.558-0.248-0.799-0.43c-0.003-0.002-0.006-0.004-0.01-0.008 c-0.235-0.178-0.442-0.389-0.616-0.627c-0.004-0.006-0.01-0.01-0.014-0.016c-0.161-0.223-0.283-0.473-0.378-0.736 c-0.019-0.053-0.033-0.105-0.049-0.158C2.055,10.572,2,10.293,2,10c0-0.295,0.055-0.574,0.135-0.842 c0.016-0.053,0.03-0.105,0.049-0.156C2.278,8.738,2.4,8.488,2.562,8.264c0.004-0.006,0.01-0.01,0.014-0.016 c0.174-0.236,0.381-0.449,0.616-0.627c0.004-0.002,0.007-0.006,0.01-0.008C3.442,7.434,3.711,7.287,4,7.184 C4.314,7.072,4.647,7,5,7s0.686,0.072,1,0.184c0.289,0.104,0.558,0.25,0.799,0.43c0.003,0.002,0.006,0.006,0.01,0.008 c0.235,0.178,0.442,0.391,0.616,0.627c0.004,0.006,0.01,0.01,0.014,0.016C7.6,8.488,7.722,8.738,7.816,9.002 C7.835,9.053,7.85,9.105,7.865,9.158C7.945,9.426,8,9.705,8,10C8,10.293,7.945,10.572,7.865,10.84z" fill="#fff" fill-rule="evenodd"/><path clip-rule="evenodd" d="M30,6.021V3c0-1.654-1.346-3-3-3s-3,1.346-3,3v3.021 C22.791,6.936,22,8.369,22,10s0.791,3.064,2,3.977V29c0,1.654,1.346,3,3,3s3-1.346,3-3V13.977c1.207-0.912,2-2.346,2-3.977 S31.207,6.936,30,6.021z M26,3c0-0.553,0.447-1,1-1s1,0.447,1,1v2.1C27.676,5.035,27.342,5,27,5c-0.344,0-0.678,0.035-1,0.1V3z M28,29c0,0.553-0.447,1-1,1s-1-0.447-1-1V14.898C26.322,14.965,26.656,15,27,15c0.342,0,0.676-0.035,1-0.102V29z M29.865,10.84 c-0.016,0.053-0.031,0.105-0.049,0.158c-0.096,0.264-0.217,0.514-0.379,0.736c-0.004,0.006-0.01,0.01-0.014,0.016 c-0.174,0.238-0.381,0.449-0.615,0.627c-0.004,0.004-0.008,0.006-0.01,0.008c-0.242,0.182-0.51,0.328-0.799,0.43 C27.686,12.928,27.352,13,27,13c-0.354,0-0.686-0.072-1-0.186c-0.289-0.102-0.559-0.248-0.799-0.43 c-0.004-0.002-0.006-0.004-0.01-0.008c-0.236-0.178-0.443-0.389-0.617-0.627c-0.004-0.006-0.01-0.01-0.014-0.016 c-0.16-0.223-0.283-0.473-0.377-0.736c-0.02-0.053-0.033-0.105-0.049-0.158C24.055,10.572,24,10.293,24,10 c0-0.295,0.055-0.574,0.135-0.842c0.016-0.053,0.029-0.105,0.049-0.156c0.094-0.264,0.217-0.514,0.377-0.738 c0.004-0.006,0.01-0.01,0.014-0.016c0.174-0.236,0.381-0.449,0.617-0.627c0.004-0.002,0.006-0.006,0.01-0.008 c0.24-0.18,0.51-0.326,0.799-0.43C26.314,7.072,26.646,7,27,7c0.352,0,0.686,0.072,1,0.184c0.289,0.104,0.557,0.25,0.799,0.43 c0.002,0.002,0.006,0.006,0.01,0.008c0.234,0.178,0.441,0.391,0.615,0.627c0.004,0.006,0.01,0.01,0.014,0.016 c0.162,0.225,0.283,0.475,0.379,0.738c0.018,0.051,0.033,0.104,0.049,0.156C29.945,9.426,30,9.705,30,10 C30,10.293,29.945,10.572,29.865,10.84z" fill="#fff" fill-rule="evenodd"/><path clip-rule="evenodd" d="M19,18.021V3c0-1.654-1.346-3-3-3s-3,1.346-3,3v15.021 c-1.208,0.914-2,2.348-2,3.979s0.792,3.064,2,3.977V29c0,1.654,1.346,3,3,3s3-1.346,3-3v-3.023c1.207-0.912,2-2.346,2-3.977 S20.207,18.936,19,18.021z M15,3c0-0.553,0.447-1,1-1c0.553,0,1,0.447,1,1v14.1c-0.324-0.064-0.658-0.1-1-0.1 c-0.343,0-0.677,0.035-1,0.1V3z M17,29c0,0.553-0.447,1-1,1c-0.553,0-1-0.447-1-1v-2.102C15.323,26.965,15.657,27,16,27 c0.342,0,0.676-0.035,1-0.102V29z M18.865,22.84c-0.016,0.053-0.031,0.105-0.049,0.158c-0.096,0.264-0.217,0.514-0.379,0.736 c-0.004,0.006-0.01,0.01-0.014,0.016c-0.174,0.238-0.381,0.449-0.615,0.627c-0.004,0.004-0.008,0.006-0.01,0.008 c-0.242,0.182-0.51,0.328-0.799,0.43C16.686,24.928,16.352,25,16,25c-0.353,0-0.686-0.072-1-0.186 c-0.289-0.102-0.558-0.248-0.799-0.43c-0.003-0.002-0.006-0.004-0.01-0.008c-0.235-0.178-0.442-0.389-0.616-0.627 c-0.004-0.006-0.01-0.01-0.014-0.016c-0.161-0.223-0.283-0.473-0.378-0.736c-0.019-0.053-0.033-0.105-0.049-0.158 C13.055,22.572,13,22.293,13,22c0-0.295,0.055-0.574,0.135-0.842c0.016-0.053,0.03-0.105,0.049-0.156 c0.095-0.264,0.217-0.514,0.378-0.738c0.004-0.006,0.01-0.01,0.014-0.016c0.174-0.236,0.381-0.449,0.616-0.627 c0.004-0.002,0.007-0.006,0.01-0.008c0.241-0.18,0.51-0.326,0.799-0.43C15.314,19.072,15.647,19,16,19c0.352,0,0.686,0.072,1,0.184 c0.289,0.104,0.557,0.25,0.799,0.43c0.002,0.002,0.006,0.006,0.01,0.008c0.234,0.178,0.441,0.391,0.615,0.627 c0.004,0.006,0.01,0.01,0.014,0.016c0.162,0.225,0.283,0.475,0.379,0.738c0.018,0.051,0.033,0.104,0.049,0.156 C18.945,21.426,19,21.705,19,22C19,22.293,18.945,22.572,18.865,22.84z" fill="#fff" fill-rule="evenodd"/></g></svg>
|
|
{/if}
|
|
{#if currentRoute !== '/notifications' && $mainStore.settings.notificationsEnabled }
|
|
{@const hasNew = $mainStore.settings.hasNewNotifications}
|
|
<svg class="{`w-6 mx-1 interactive-svg ${hasNew ? 'animate-pulse red' : 'white'}`}"
|
|
style="{ $mainStore.settings.theme === 'light' && hasNew ? 'filter: invert(1.1);' : '' }"
|
|
on:click={() => lNavigate('/notifications')} aria-hidden="true" viewBox="0 0 512 512">
|
|
<path fill="currentColor" d="M470.346 403.26C468.655 400.18 466.169 397.611 463.146 395.82L441.487 382.82C433.033 377.737 426.038 370.553 421.183 361.967C416.327 353.381 413.776 343.684 413.777 333.82V216.66C413.756 182.674 402.73 149.609 382.347 122.414C361.964 95.2185 333.321 75.3562 300.707 65.8C299.296 65.3984 298.054 64.5512 297.165 63.3849C296.277 62.2187 295.79 60.7962 295.777 59.33C295.777 48.899 291.633 38.8953 284.257 31.5195C276.881 24.1437 266.877 20 256.447 20C246.016 20 236.012 24.1437 228.636 31.5195C221.26 38.8953 217.116 48.899 217.116 59.33C217.102 60.7957 216.614 62.2175 215.726 63.3834C214.837 64.5493 213.596 65.397 212.186 65.8C179.572 75.3562 150.929 95.2185 130.546 122.414C110.163 149.609 99.1367 182.674 99.1164 216.66V333.8C99.1173 343.664 96.566 353.361 91.7104 361.947C86.8548 370.533 79.8601 377.717 71.4065 382.8L49.7465 395.8C46.0067 398.033 43.0981 401.426 41.4629 405.463C39.8276 409.501 39.5551 413.961 40.6867 418.168C41.8184 422.374 44.2922 426.096 47.7324 428.767C51.1726 431.439 55.3911 432.915 59.7465 432.97H453.086C456.534 432.888 459.903 431.923 462.871 430.165C465.839 428.408 468.305 425.918 470.034 422.934C471.764 419.95 472.698 416.572 472.747 413.124C472.797 409.676 471.96 406.272 470.317 403.24L470.346 403.26Z"/>
|
|
<path fill="currentColor" d="M222.447 481.12C229.872 486.373 238.414 489.832 247.402 491.225C256.39 492.619 265.579 491.908 274.246 489.15C282.913 486.392 290.822 481.661 297.351 475.329C303.881 468.998 308.853 461.238 311.876 452.66H200.987C205.035 464.132 212.53 474.073 222.447 481.12Z"/>
|
|
</svg>
|
|
{/if}
|
|
</div>
|
|
|
|
{/if}
|
|
|
|
<div id="router"></div>
|
|
<Alert bind:this={alert} />
|
|
</div>
|
|
|
|
<style lang="scss">
|
|
.entry {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 370px;
|
|
width: 250px;
|
|
background-color: #242424;
|
|
color: aliceblue;
|
|
font-family: 'Roboto', sans-serif;
|
|
font-size: 1.2rem;
|
|
font-weight: 300;
|
|
text-align: center;
|
|
letter-spacing: 0.1rem;
|
|
overflow: hidden;
|
|
flex-direction: column;
|
|
padding: 0.81rem;
|
|
box-shadow: inset 0 0px 1px 4px #161616;
|
|
}
|
|
|
|
.white {
|
|
color: white;
|
|
}
|
|
|
|
.red {
|
|
color: rgba(156, 39, 39, 0.733);
|
|
}
|
|
|
|
#router {
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
margin-top: 2.2rem;
|
|
height: 100%;
|
|
width: 250px;
|
|
}
|
|
|
|
.headerMenu, .logo {
|
|
padding: 0.4rem 0.4rem;
|
|
position: absolute;
|
|
}
|
|
|
|
.headerMenu {
|
|
right: 0.3rem;
|
|
top: 0.2rem;
|
|
}
|
|
|
|
.logo {
|
|
left: 0rem;
|
|
top: -0.8rem;
|
|
width: 270px;
|
|
box-shadow: inset 3px -3px 6rem 11px #0000005e;
|
|
border-bottom: 1px solid #d3d9df63;
|
|
}
|
|
</style>
|