diff --git a/frontend/src/lib/types/chargepoint.ts b/frontend/src/lib/types/chargepoint.ts new file mode 100644 index 0000000..ade067b --- /dev/null +++ b/frontend/src/lib/types/chargepoint.ts @@ -0,0 +1,19 @@ +export type ChargePoint = { + identity: string; + is_active: boolean; + price: number; + id: string; + last_seen: string; + vendor_name: string; + model: string; + serial_number: string, + firmware_version: string; + connectors: [ + { + id: string; + evse: number; + index: number; + status: 'Available' | 'Occupied' | 'Reserved' | 'Unavailable' | 'Faulted' + } + ] +} \ No newline at end of file diff --git a/frontend/src/lib/util.ts b/frontend/src/lib/util.ts index 9d3747c..bfabf44 100644 --- a/frontend/src/lib/util.ts +++ b/frontend/src/lib/util.ts @@ -7,4 +7,23 @@ export const currentDaytime = function(): string { return 'day' } return 'evening' +} + +export function relativeTimeFromDate(date: Date): {val: number, range: Intl.RelativeTimeFormatUnit} | undefined { + const units: {unit: Intl.RelativeTimeFormatUnit; ms: number}[] = [ + {unit: "year", ms: 31536000000}, + {unit: "month", ms: 2628000000}, + {unit: "day", ms: 86400000}, + {unit: "hour", ms: 3600000}, + {unit: "minute", ms: 60000}, + {unit: "second", ms: 1000}, + ]; + + const elapsed = date.getTime() - new Date().getTime(); + for (const {unit, ms} of units) { + if (Math.abs(elapsed) >= ms || unit === "second") { + return {val: Math.round(elapsed / ms), range: unit}; + } + } + return undefined; } \ No newline at end of file diff --git a/frontend/src/routes/(navbar)/chargepoint/+page.svelte b/frontend/src/routes/(navbar)/chargepoint/+page.svelte index e69de29..0d65da3 100644 --- a/frontend/src/routes/(navbar)/chargepoint/+page.svelte +++ b/frontend/src/routes/(navbar)/chargepoint/+page.svelte @@ -0,0 +1,106 @@ + + +
+ {$i18n.t('chargepoint:header')} +
+{$i18n.t('chargepoint:tableHeader.name')} | +{$i18n.t('chargepoint:tableHeader.active')} | +{$i18n.t('chargepoint:tableHeader.lastSeen')} | +{$i18n.t('chargepoint:tableHeader.price')} | ++ |
---|---|---|---|---|
+ {chargepoint.identity} + | ++ {#if chargepoint.is_active} + {$i18n.t('chargepoint:state.enabled')} + {:else} + {$i18n.t('chargepoint:state.disabled')} + {/if} + | ++ {$i18n.t( + 'chargepoint:tableFormatting.lastSeen', + relativeTimeFromDate(new Date(chargepoint.last_seen))! + )} + | +{chargepoint.price} € | ++ + {$i18n.t('common:transactionTable.detailButton')} + + + | +
+ {$i18n.t('chargepoint:noChargepoints')} +
+ {/if} +