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

feat(frontend): Add frontend #25

Merged
Bluemedia merged 16 commits from feature/frontend into main 2025-07-27 21:39:24 +02:00
Conversation 0 Commits 16 Files changed 61 +58 -46
1 changed files with 58 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit b3804f3d58 - Show all commits

104
frontend/src/routes/(navbar)/chargepoint/+page.svelte
View file

@ -7,6 +7,7 @@
$i18n.loadNamespaces('chargepoint')
let loading = $state(true)
let chargepoints: ChargePoint[] = $state([])
const pageSize = 25
let page: number = $state(1)
@ -21,16 +22,19 @@
.get('/chargepoints', { params: { skip: (page - 1) * pageSize, limit: pageSize } })
.then((res) => {
chargepoints = res.data
loading = false
})
}
function nextPage() {
++page
loading = true
load()
}
function previousPage() {
--page
loading = true
load()
}
@ -44,52 +48,60 @@
{$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 !loading}
<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}
{:else}
<div class="card w-full bg-base-100 shadow-sm">
<div class="card-body flex items-center justify-center p-8">
<span class="loading loading-dots loading-xl"></span>
</div>
</div>
{/if}
</div>
<div class="join mt-4">