89 lines
3 KiB
Svelte
89 lines
3 KiB
Svelte
<script lang="ts">
|
|
import i18n from '$lib/i18n'
|
|
import type { Transaction } from '$lib/types/transaction'
|
|
|
|
let props: {
|
|
transactions: Transaction[]
|
|
} = $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: new Date(transaction.started_at),
|
|
formatParams: {
|
|
time: {
|
|
year: 'numeric',
|
|
month: 'numeric',
|
|
day: 'numeric',
|
|
hour: 'numeric',
|
|
minute: 'numeric',
|
|
second: 'numeric',
|
|
},
|
|
},
|
|
})}
|
|
</p>
|
|
<p>
|
|
{$i18n.t('common:transactionTable.endTime', {
|
|
time: new Date(transaction.ended_at!),
|
|
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.identity}
|
|
</a>
|
|
</td>
|
|
<td class="font-bold"
|
|
>{(transaction.meter_end - transaction.meter_start).toFixed(2)} kWh</td
|
|
>
|
|
<td class="font-bold"
|
|
>{((transaction.meter_end - transaction.meter_start) * transaction.price).toFixed(2)} €</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>
|