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')} +

+
+ + + + + + + + + + + + {#if chargepoints.length > 0} + {#each chargepoints as chargepoint} + + + + + + + + {/each} + {/if} + +
{$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')} + + +
+ {#if chargepoints.length === 0} +

+ {$i18n.t('chargepoint:noChargepoints')} +

+ {/if} +
+
+ + + +
+
diff --git a/frontend/static/locales/de/chargepoint.json b/frontend/static/locales/de/chargepoint.json new file mode 100644 index 0000000..25d2220 --- /dev/null +++ b/frontend/static/locales/de/chargepoint.json @@ -0,0 +1,17 @@ +{ + "header": "Ladepunkte", + "tableHeader": { + "name": "Name", + "active": "Aktiv", + "price": "Preis", + "lastSeen": "Zuletzt gesehen" + }, + "tableFormatting": { + "lastSeen": "{{val, relativetime}}" + }, + "state": { + "enabled": "Aktiv", + "disabled": "Deaktiviert" + }, + "noChargepoints": "Noch keine Ladepunkte vorhanden." +} \ No newline at end of file diff --git a/frontend/static/locales/en/chargepoint.json b/frontend/static/locales/en/chargepoint.json new file mode 100644 index 0000000..e485e10 --- /dev/null +++ b/frontend/static/locales/en/chargepoint.json @@ -0,0 +1,17 @@ +{ + "header": "Chargepoints", + "tableHeader": { + "name": "Name", + "active": "Active", + "price": "Price", + "lastSeen": "Last seen" + }, + "tableFormatting": { + "lastSeen": "{{val, relativetime}}" + }, + "state": { + "enabled": "Active", + "disabled": "Disabled" + }, + "noChargepoints": "There are no chargepoints yet." +} \ No newline at end of file