Bluemedia/LibreCharge
1
0
Fork 0
Code Issues Pull requests 10 Projects Releases Packages Wiki Activity

Add basic frontend structure

Browse source
This commit is contained in:
Oliver Traber 2025-03-18 17:23:26 +00:00
parent 6ea19f686f
commit aa9357063f
Signed by: Bluemedia
GPG key ID: C0674B105057136C
29 changed files with 1280 additions and 486 deletions
Download patch file Download diff file Expand all files Collapse all files

94
frontend/src/lib/component/TransactionTable.svelte Normal file
View file

@ -0,0 +1,94 @@
<script lang="ts">
import i18n from '$lib/i18n'
let props: {
transactions: {
id: string
begin: Date
end: Date
chargepoint: {
name: string
id: string
}
energyAmmount: number
cost: number
}[]
} = $props()
</script>
<div class="overflow-x-auto mt-4 bg-base-100 rounded-md">
<table class="table">
<thead>
<tr>
<th>{$i18n.t('common:transactionTable.headerDate')}</th>
<th>{$i18n.t('common:transactionTable.headerChargepoint')}</th>
<th>{$i18n.t('common:transactionTable.headerEnergyTotal')}</th>
<th>{$i18n.t('common:transactionTable.headerCost')}</th>
<th></th>
</tr>
</thead>
<tbody>
{#if props.transactions.length > 0}
{#each props.transactions as transaction}
<tr>
<td>
<div class="flex items-center gap-3">
<div>
<p>
{$i18n.t('common:transactionTable.startTime', {
time: transaction.begin,
formatParams: {
time: {
year: 'numeric',
month: 'numeric',
day: 'numeric',
hour: 'numeric',
minute: 'numeric',
second: 'numeric',
},
},
})}
</p>
<p>
{$i18n.t('common:transactionTable.endTime', {
time: transaction.end,
formatParams: {
time: {
year: 'numeric',
month: 'numeric',
day: 'numeric',
hour: 'numeric',
minute: 'numeric',
second: 'numeric',
},
},
})}
</p>
</div>
</div>
</td>
<td>
<a href="/chargepoint/{transaction.chargepoint.id}" class="btn btn-sm btn-primary">
<i class="bi bi-plug-fill text-lg"></i>
{transaction.chargepoint.name}
</a>
</td>
<td class="font-bold">{transaction.energyAmmount} kWh</td>
<td class="font-bold">{transaction.cost} €</td>
<th>
<a href="/transaction/{transaction.id}" class="btn btn-sm btn-primary">
{$i18n.t('common:transactionTable.detailButton')}
<i class="bi bi-arrow-right"></i>
</a>
</th>
</tr>
{/each}
{/if}
</tbody>
</table>
{#if props.transactions.length === 0}
<p class="w-full mt-15 mb-15 text-center text-xl font-bold">
{$i18n.t('common:transactionTable.noPreviousTransactions')}
</p>
{/if}
</div>