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 { 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'
|
||||
import Main from './Main.svelte'
|
||||
|
||||
$: maxInstanceCount = MAX_INSTANCE_COUNTS[$userSubscriptionType]
|
||||
$: 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>
|
||||
<Main />
|
||||
|
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