106 lines
2.9 KiB
Svelte
106 lines
2.9 KiB
Svelte
<script lang="ts">
|
|
import axios from '$lib/axios.svelte'
|
|
import i18n from '$lib/i18n'
|
|
import type { ChargePoint } from '$lib/types/chargepoint'
|
|
import { relativeTimeFromDate } from '$lib/util'
|
|
import { onMount } from 'svelte'
|
|
|
|
$i18n.loadNamespaces('chargepoint')
|
|
|
|
let chargepoints: ChargePoint[] = $state([])
|
|
const pageSize = 25
|
|
let page: number = $state(1)
|
|
|
|
const urlParams = new URLSearchParams(window.location.search)
|
|
if (urlParams.has('page')) {
|
|
page = Number.parseInt(urlParams.get('page')!)
|
|
}
|
|
|
|
function load() {
|
|
axios
|
|
.get('/chargepoints', { params: { skip: (page - 1) * pageSize, limit: pageSize } })
|
|
.then((res) => {
|
|
chargepoints = res.data
|
|
})
|
|
}
|
|
|
|
function nextPage() {
|
|
++page
|
|
load()
|
|
}
|
|
|
|
function previousPage() {
|
|
--page
|
|
load()
|
|
}
|
|
|
|
onMount(() => {
|
|
load()
|
|
})
|
|
</script>
|
|
|
|
<div class="w-full h-full mt-4 flex flex-col">
|
|
<p class="w-full text-2xl font-bold">
|
|
{$i18n.t('chargepoint:header')}
|
|
</p>
|
|
<div class="overflow-x-auto mt-8 bg-base-100 rounded-md">
|
|
<table class="table">
|
|
<thead>
|
|
<tr>
|
|
<th>{$i18n.t('chargepoint:tableHeader.name')}</th>
|
|
<th>{$i18n.t('chargepoint:tableHeader.active')}</th>
|
|
<th>{$i18n.t('chargepoint:tableHeader.lastSeen')}</th>
|
|
<th>{$i18n.t('chargepoint:tableHeader.price')}</th>
|
|
<th></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{#if chargepoints.length > 0}
|
|
{#each chargepoints as chargepoint}
|
|
<tr>
|
|
<td>
|
|
{chargepoint.identity}
|
|
</td>
|
|
<td>
|
|
{#if chargepoint.is_active}
|
|
{$i18n.t('chargepoint:state.enabled')}
|
|
{:else}
|
|
{$i18n.t('chargepoint:state.disabled')}
|
|
{/if}
|
|
</td>
|
|
<td>
|
|
{$i18n.t(
|
|
'chargepoint:tableFormatting.lastSeen',
|
|
relativeTimeFromDate(new Date(chargepoint.last_seen))!
|
|
)}
|
|
</td>
|
|
<td>{chargepoint.price} €</td>
|
|
<th>
|
|
<a href="/chargepoint/{chargepoint.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 chargepoints.length === 0}
|
|
<p class="w-full mt-15 mb-15 text-center text-xl font-bold">
|
|
{$i18n.t('chargepoint:noChargepoints')}
|
|
</p>
|
|
{/if}
|
|
</div>
|
|
<div class="join mt-4">
|
|
<button onclick={previousPage} disabled={page === 1 || null} class="join-item btn bg-base-100"
|
|
>«</button
|
|
>
|
|
<button class="join-item btn bg-base-100">Page {page}</button>
|
|
<button
|
|
onclick={nextPage}
|
|
disabled={chargepoints.length < pageSize || null}
|
|
class="join-item btn bg-base-100">»</button
|
|
>
|
|
</div>
|
|
</div>
|