mirror of
https://github.com/pockethost/pockethost.git
synced 2025-03-30 15:08:30 +00:00
chore: refactor dashboard files
This commit is contained in:
parent
2b243ef597
commit
8466459809
@ -2,51 +2,10 @@
|
|||||||
import { MAX_INSTANCE_COUNTS } from '$src/env'
|
import { MAX_INSTANCE_COUNTS } from '$src/env'
|
||||||
import { globalInstancesStore, userSubscriptionType } from '$util/stores'
|
import { globalInstancesStore, userSubscriptionType } from '$util/stores'
|
||||||
import { values } from '@s-libs/micro-dash'
|
import { values } from '@s-libs/micro-dash'
|
||||||
import InstanceList from './InstanceList.svelte'
|
import Main from './Main.svelte'
|
||||||
import { SubscriptionType } from 'pockethost/common'
|
|
||||||
import { faPlus } from '@fortawesome/free-solid-svg-icons'
|
|
||||||
import Fa from 'svelte-fa'
|
|
||||||
|
|
||||||
|
$: maxInstanceCount = MAX_INSTANCE_COUNTS[$userSubscriptionType]
|
||||||
$: instanceCount = values($globalInstancesStore).length
|
$: instanceCount = values($globalInstancesStore).length
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<svelte:head>
|
<Main />
|
||||||
<title>Dashboard - PocketHost</title>
|
|
||||||
</svelte:head>
|
|
||||||
|
|
||||||
<div
|
|
||||||
class="flex flex-row items-center justify-between mb-6 gap-4 pl-4 sm:pl-6 lg:pl-8 pr-4"
|
|
||||||
>
|
|
||||||
<h2 class="text-4xl text-base-content font-bold capitalize">Dashboard</h2>
|
|
||||||
|
|
||||||
<a href="/instances/new" class="m-3 btn btn-primary">
|
|
||||||
<Fa icon={faPlus} /> New Instance</a
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex flex-row space-x-4 items-center justify-center">
|
|
||||||
<div>Instances</div>
|
|
||||||
<progress
|
|
||||||
class="progress progress-primary w-48 md:w-80"
|
|
||||||
value={instanceCount}
|
|
||||||
max={MAX_INSTANCE_COUNTS[$userSubscriptionType]}
|
|
||||||
></progress>
|
|
||||||
<div>
|
|
||||||
{#if $userSubscriptionType === SubscriptionType.Founder}
|
|
||||||
{instanceCount}/<a
|
|
||||||
href="https://discord.com/channels/1128192380500193370/1128192380500193373/1296340516044017718"
|
|
||||||
class="link"
|
|
||||||
target="_blank">{MAX_INSTANCE_COUNTS[$userSubscriptionType]}</a
|
|
||||||
>
|
|
||||||
{:else}
|
|
||||||
{instanceCount}/{MAX_INSTANCE_COUNTS[$userSubscriptionType]}
|
|
||||||
{/if}
|
|
||||||
{#if $userSubscriptionType === SubscriptionType.Free}
|
|
||||||
<a href="/pricing" class="link text-xs text-success">Upgrade</a>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex flex-wrap gap-2 items-center justify-center">
|
|
||||||
<InstanceList />
|
|
||||||
</div>
|
|
||||||
|
52
packages/dashboard/src/routes/(app)/dashboard/Main.svelte
Normal file
52
packages/dashboard/src/routes/(app)/dashboard/Main.svelte
Normal file
@ -0,0 +1,52 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { MAX_INSTANCE_COUNTS } from '$src/env'
|
||||||
|
import { globalInstancesStore, userSubscriptionType } from '$util/stores'
|
||||||
|
import { values } from '@s-libs/micro-dash'
|
||||||
|
import InstanceList from './InstanceList.svelte'
|
||||||
|
import { SubscriptionType } from 'pockethost/common'
|
||||||
|
import { faPlus } from '@fortawesome/free-solid-svg-icons'
|
||||||
|
import Fa from 'svelte-fa'
|
||||||
|
|
||||||
|
$: instanceCount = values($globalInstancesStore).length
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<svelte:head>
|
||||||
|
<title>Dashboard - PocketHost</title>
|
||||||
|
</svelte:head>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="flex flex-row items-center justify-between mb-6 gap-4 pl-4 sm:pl-6 lg:pl-8 pr-4"
|
||||||
|
>
|
||||||
|
<h2 class="text-4xl text-base-content font-bold capitalize">Dashboard</h2>
|
||||||
|
|
||||||
|
<a href="/instances/new" class="m-3 btn btn-primary">
|
||||||
|
<Fa icon={faPlus} /> New Instance</a
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex flex-row space-x-4 items-center justify-center">
|
||||||
|
<div>Instances</div>
|
||||||
|
<progress
|
||||||
|
class="progress progress-primary w-48 md:w-80"
|
||||||
|
value={instanceCount}
|
||||||
|
max={MAX_INSTANCE_COUNTS[$userSubscriptionType]}
|
||||||
|
></progress>
|
||||||
|
<div>
|
||||||
|
{#if $userSubscriptionType === SubscriptionType.Founder}
|
||||||
|
{instanceCount}/<a
|
||||||
|
href="https://discord.com/channels/1128192380500193370/1128192380500193373/1296340516044017718"
|
||||||
|
class="link"
|
||||||
|
target="_blank">{MAX_INSTANCE_COUNTS[$userSubscriptionType]}</a
|
||||||
|
>
|
||||||
|
{:else}
|
||||||
|
{instanceCount}/{MAX_INSTANCE_COUNTS[$userSubscriptionType]}
|
||||||
|
{/if}
|
||||||
|
{#if $userSubscriptionType === SubscriptionType.Free}
|
||||||
|
<a href="/pricing" class="link text-xs text-success">Upgrade</a>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex flex-wrap gap-2 items-center justify-center">
|
||||||
|
<InstanceList />
|
||||||
|
</div>
|
Loading…
x
Reference in New Issue
Block a user