94 lines
2.9 KiB
Svelte
94 lines
2.9 KiB
Svelte
<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>
|