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') $i18n.loadNamespaces('chargepoint')
let loading = $state(true)
let chargepoints: ChargePoint[] = $state([]) let chargepoints: ChargePoint[] = $state([])
const pageSize = 25 const pageSize = 25
let page: number = $state(1) let page: number = $state(1)
@ -21,16 +22,19 @@
.get('/chargepoints', { params: { skip: (page - 1) * pageSize, limit: pageSize } }) .get('/chargepoints', { params: { skip: (page - 1) * pageSize, limit: pageSize } })
.then((res) => { .then((res) => {
chargepoints = res.data chargepoints = res.data
loading = false
}) })
} }
function nextPage() { function nextPage() {
++page ++page
loading = true
load() load()
} }
function previousPage() { function previousPage() {
--page --page
loading = true
load() load()
} }
@ -44,52 +48,60 @@
{$i18n.t('chargepoint:header')} {$i18n.t('chargepoint:header')}
</p> </p>
<div class="overflow-x-auto mt-8 bg-base-100 rounded-md"> <div class="overflow-x-auto mt-8 bg-base-100 rounded-md">
<table class="table"> {#if !loading}
<thead> <table class="table">
<tr> <thead>
<th>{$i18n.t('chargepoint:tableHeader.name')}</th> <tr>
<th>{$i18n.t('chargepoint:tableHeader.active')}</th> <th>{$i18n.t('chargepoint:tableHeader.name')}</th>
<th>{$i18n.t('chargepoint:tableHeader.lastSeen')}</th> <th>{$i18n.t('chargepoint:tableHeader.active')}</th>
<th>{$i18n.t('chargepoint:tableHeader.price')}</th> <th>{$i18n.t('chargepoint:tableHeader.lastSeen')}</th>
<th></th> <th>{$i18n.t('chargepoint:tableHeader.price')}</th>
</tr> <th></th>
</thead> </tr>
<tbody> </thead>
{#if chargepoints.length > 0} <tbody>
{#each chargepoints as chargepoint} {#if chargepoints.length > 0}
<tr> {#each chargepoints as chargepoint}
<td> <tr>
{chargepoint.identity} <td>
</td> {chargepoint.identity}
<td> </td>
{#if chargepoint.is_active} <td>
{$i18n.t('chargepoint:state.enabled')} {#if chargepoint.is_active}
{:else} {$i18n.t('chargepoint:state.enabled')}
{$i18n.t('chargepoint:state.disabled')} {:else}
{/if} {$i18n.t('chargepoint:state.disabled')}
</td> {/if}
<td> </td>
{$i18n.t( <td>
'chargepoint:tableFormatting.lastSeen', {$i18n.t(
relativeTimeFromDate(new Date(chargepoint.last_seen))! 'chargepoint:tableFormatting.lastSeen',
)} relativeTimeFromDate(new Date(chargepoint.last_seen))!
</td> )}
<td>{chargepoint.price} €</td> </td>
<th> <td>{chargepoint.price} €</td>
<a href="/chargepoint/{chargepoint.id}" class="btn btn-sm btn-primary"> <th>
{$i18n.t('common:transactionTable.detailButton')} <a href="/chargepoint/{chargepoint.id}" class="btn btn-sm btn-primary">
<i class="bi bi-arrow-right"></i> {$i18n.t('common:transactionTable.detailButton')}
</a> <i class="bi bi-arrow-right"></i>
</th> </a>
</tr> </th>
{/each} </tr>
{/if} {/each}
</tbody> {/if}
</table> </tbody>
{#if chargepoints.length === 0} </table>
<p class="w-full mt-15 mb-15 text-center text-xl font-bold"> {#if chargepoints.length === 0}
{$i18n.t('chargepoint:noChargepoints')} <p class="w-full mt-15 mb-15 text-center text-xl font-bold">
</p> {$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} {/if}
</div> </div>
<div class="join mt-4"> <div class="join mt-4">