121 lines
4.1 KiB
Svelte
121 lines
4.1 KiB
Svelte
<script lang="ts">
|
|
import { persistentSettings } from '$lib/persistent_store'
|
|
import { currentDaytime } from '$lib/util'
|
|
import i18n from '$lib/i18n'
|
|
import DashboardCard from '$lib/component/DashboardCard.svelte'
|
|
import TransactionTable from '$lib/component/TransactionTable.svelte'
|
|
|
|
$i18n.loadNamespaces('dashboard')
|
|
|
|
let hasActiveTransaction = $state(true)
|
|
</script>
|
|
|
|
<div class="w-full h-full mt-10 flex flex-col">
|
|
<p class="w-full text-2xl font-bold">
|
|
{$i18n.t('dashboard:greeting.' + currentDaytime(), { name: $persistentSettings.friendlyName })}
|
|
</p>
|
|
<div class="w-full mt-5 flex gap-x-4">
|
|
<div class="card bg-base-100 shadow rounded-md basis-0 grow">
|
|
<div class="card-body gap-2">
|
|
<div class="flex items-start justify-between gap-2 text-sm">
|
|
<div>
|
|
<p class="text-base-content/80 font-medium">
|
|
{$i18n.t('dashboard:cards.currentTransaction')}
|
|
</p>
|
|
<div class="mt-3 flex items-center gap-2">
|
|
{#if hasActiveTransaction}
|
|
<div class="inline-grid *:[grid-area:1/1]">
|
|
<div class="status status-success animate-ping"></div>
|
|
<div class="status status-success"></div>
|
|
</div>
|
|
{/if}
|
|
<p class="text-2xl font-semibold">
|
|
{#if hasActiveTransaction}0,25 kWh{:else}-{/if}
|
|
</p>
|
|
{#if hasActiveTransaction}
|
|
<div class="badge badge-soft badge-success badge-sm gap-0.5 px-1 font-medium">
|
|
2,30 €
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
<i class="bi bi-plug-fill text-primary text-4xl"></i>
|
|
</div>
|
|
<div class="w-full flex flex-row items-center">
|
|
<p class="text-base-content/60 text-sm">
|
|
{#if hasActiveTransaction}
|
|
{$i18n.t('dashboard:cards.chargepoint', { name: 'DE-EXMPL-0001' })}
|
|
{:else}
|
|
{$i18n.t('dashboard:cards.noCurrentTransaction')}
|
|
{/if}
|
|
</p>
|
|
{#if hasActiveTransaction}
|
|
<button class="btn btn-xs btn-primary">
|
|
{$i18n.t('dashboard:cards.toCurrentTransactionButton')}
|
|
<i class="bi bi-arrow-right"></i>
|
|
</button>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<DashboardCard
|
|
title={$i18n.t('dashboard:cards.transactionCount')}
|
|
icon={'bi-battery-charging'}
|
|
value={3}
|
|
previousValue={1}
|
|
/>
|
|
<DashboardCard
|
|
title={$i18n.t('dashboard:cards.transactionEnergyTotal')}
|
|
icon={'bi-lightning-charge-fill'}
|
|
value={180}
|
|
previousValue={50}
|
|
unit={'kWh'}
|
|
/>
|
|
<DashboardCard
|
|
title={$i18n.t('dashboard:cards.transactionCostTotal')}
|
|
icon={'bi-currency-exchange'}
|
|
value={30.56}
|
|
previousValue={30.56}
|
|
unit={'€'}
|
|
/>
|
|
</div>
|
|
<div class="w-full flex flex-col mt-10">
|
|
<p class="text-xl font-bold">{$i18n.t('dashboard:table.title')}</p>
|
|
<TransactionTable
|
|
transactions={[
|
|
{
|
|
id: '1',
|
|
begin: new Date(Date.UTC(2025, 3, 15, 14, 12, 23)),
|
|
end: new Date(Date.UTC(2025, 3, 15, 16, 18, 46)),
|
|
chargepoint: { name: 'DE-EXMPL-0001', id: '1' },
|
|
energyAmmount: 58.65,
|
|
cost: 36.45,
|
|
},
|
|
{
|
|
id: '2',
|
|
begin: new Date(Date.UTC(2025, 3, 15, 14, 12, 23)),
|
|
end: new Date(Date.UTC(2025, 3, 15, 16, 18, 46)),
|
|
chargepoint: { name: 'DE-EXMPL-0001', id: '1' },
|
|
energyAmmount: 58.65,
|
|
cost: 36.45,
|
|
},
|
|
{
|
|
id: '3',
|
|
begin: new Date(Date.UTC(2025, 3, 15, 14, 12, 23)),
|
|
end: new Date(Date.UTC(2025, 3, 15, 16, 18, 46)),
|
|
chargepoint: { name: 'DE-EXMPL-0001', id: '1' },
|
|
energyAmmount: 58.65,
|
|
cost: 36.45,
|
|
},
|
|
{
|
|
id: '4',
|
|
begin: new Date(Date.UTC(2025, 3, 15, 14, 12, 23)),
|
|
end: new Date(Date.UTC(2025, 3, 15, 16, 18, 46)),
|
|
chargepoint: { name: 'DE-EXMPL-0001', id: '1' },
|
|
energyAmmount: 58.65,
|
|
cost: 36.45,
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
</div>
|