<template>
- <Container id="charging-stations">
- <Button id="simulator-button" @click="startSimulator()">Start Simulator</Button>
- <Button id="simulator-button" @click="stopSimulator()">Stop Simulator</Button>
- <Container id="inputs-container">
- <input
- id="idtag-field"
- type="text"
- name="idtag-field"
- placeholder="RFID tag"
- v-model="state.idTag"
+ <Container id="charging-stations-container">
+ <Container
+ v-show="Array.isArray(uiServerConfigurations) && uiServerConfigurations.length > 1"
+ id="ui-server-container"
+ >
+ <select
+ id="ui-server-selector"
+ v-model="state.uiServerIndex"
+ @change="
+ () => {
+ try {
+ if (
+ getFromLocalStorage<number>('uiServerConfigurationIndex', 0) !== state.uiServerIndex
+ ) {
+ setToLocalStorage<number>('uiServerConfigurationIndex', state.uiServerIndex)
+ app?.appContext.config.globalProperties.$uiClient.registerWSEventListener(
+ 'close',
+ () => {
+ app!.appContext.config.globalProperties.$chargingStations = []
+ },
+ { once: true }
+ )
+ app?.appContext.config.globalProperties.$uiClient.setConfiguration(
+ app?.appContext.config.globalProperties.$configuration.uiServer[
+ getFromLocalStorage<number>('uiServerConfigurationIndex', state.uiServerIndex)
+ ]
+ )
+ app?.appContext.config.globalProperties.$uiClient.registerWSEventListener(
+ 'open',
+ () => {
+ loadChargingStations(() => (state.renderChargingStationsList = randomUUID()))
+ },
+ { once: true }
+ )
+ }
+ } catch (error) {
+ $toast.error('Error at changing UI server configuration')
+ console.error('Error at changing UI server configuration:', error)
+ }
+ }
+ "
+ >
+ <option
+ v-for="uiServerConfiguration in uiServerConfigurations"
+ :value="uiServerConfiguration.index"
+ >
+ {{ uiServerConfiguration.configuration.name ?? uiServerConfiguration.configuration.host }}
+ </option>
+ </select>
+ </Container>
+ <Container id="buttons-container">
+ <Button @click="startSimulator()">Start Simulator</Button>
+ <Button @click="stopSimulator()">Stop Simulator</Button>
+ <Button @click="$router.push({ name: 'add-charging-stations' })">
+ Add Charging Stations
+ </Button>
+ <ReloadButton
+ id="reload-button"
+ :loading="state.loading"
+ @click="loadChargingStations(() => (state.renderChargingStationsList = randomUUID()))"
/>
- <ReloadButton id="reload-button" :loading="state.isLoading" @click="load()" />
</Container>
- <CSTable :chargingStations="state.chargingStations" :idTag="state.idTag" />
+ <CSTable
+ v-show="
+ Array.isArray(app?.appContext.config.globalProperties.$chargingStations) &&
+ app?.appContext.config.globalProperties.$chargingStations.length > 0
+ "
+ :key="state.renderChargingStationsList"
+ :charging-stations="app?.appContext.config.globalProperties.$chargingStations"
+ />
</Container>
</template>
<script setup lang="ts">
-import Container from '@/components/Container.vue';
-import ReloadButton from '@/components/buttons/ReloadButton.vue';
-import CSTable from '@/components/charging-stations/CSTable.vue';
-
-import { onMounted, reactive } from 'vue';
-import UIClient from '@/composables/UIClient';
-import type { ChargingStationData } from '@/types/ChargingStationType';
-
-const UIClientInstance = UIClient.getInstance();
-
-onMounted(() => {
- UIClientInstance.registerWSonOpenListener(load);
-});
-
-type State = {
- isLoading: boolean;
- chargingStations: ChargingStationData[];
- idTag: string;
-};
-
-const state: State = reactive({
- isLoading: false,
- chargingStations: [],
- idTag: '',
-});
-
-async function load(): Promise<void> {
- if (state.isLoading === true) return;
- state.isLoading = true;
- const listChargingStationsPayload = await UIClientInstance.listChargingStations();
- state.chargingStations =
- listChargingStationsPayload.chargingStations as unknown as ChargingStationData[];
- state.isLoading = false;
+import { getCurrentInstance, reactive } from 'vue'
+import { useToast } from 'vue-toast-notification'
+import CSTable from '@/components/charging-stations/CSTable.vue'
+import type { ResponsePayload, UIServerConfigurationSection } from '@/types'
+import Container from '@/components/Container.vue'
+import ReloadButton from '@/components/buttons/ReloadButton.vue'
+import Button from '@/components/buttons/Button.vue'
+import { getFromLocalStorage, setToLocalStorage } from '@/composables'
+
+const randomUUID = (): `${string}-${string}-${string}-${string}-${string}` => {
+ return crypto.randomUUID()
+}
+
+const state = reactive({
+ renderChargingStationsList: randomUUID(),
+ loading: false,
+ uiServerIndex: getFromLocalStorage<number>('uiServerConfigurationIndex', 0)
+})
+
+const app = getCurrentInstance()
+const uiClient = app?.appContext.config.globalProperties.$uiClient
+const uiServerConfigurations: { configuration: UIServerConfigurationSection; index: number }[] =
+ app?.appContext.config.globalProperties.$configuration.uiServer.map(
+ (configuration: UIServerConfigurationSection, index: number) => ({
+ configuration,
+ index
+ })
+ )
+
+const $toast = useToast()
+
+const loadChargingStations = (renderCallback?: () => void): void => {
+ if (state.loading === false) {
+ state.loading = true
+ uiClient
+ .listChargingStations()
+ .then((response: ResponsePayload) => {
+ if (app != null) {
+ app.appContext.config.globalProperties.$chargingStations = response.chargingStations
+ }
+ })
+ .catch((error: Error) => {
+ $toast.error('Error at fetching charging stations')
+ console.error('Error at fetching charging stations:', error)
+ })
+ .finally(() => {
+ if (renderCallback != null) {
+ renderCallback()
+ }
+ state.loading = false
+ })
+ }
}
-function startSimulator(): void {
- UIClientInstance.startSimulator();
+const startSimulator = (): void => {
+ uiClient
+ .startSimulator()
+ .then(() => {
+ $toast.success('Simulator successfully started')
+ })
+ .catch((error: Error) => {
+ $toast.error('Error at starting simulator')
+ console.error('Error at starting simulator:', error)
+ })
}
-function stopSimulator(): void {
- UIClientInstance.stopSimulator();
+const stopSimulator = (): void => {
+ uiClient
+ .stopSimulator()
+ .then(() => {
+ if (app != null) {
+ app.appContext.config.globalProperties.$chargingStations = []
+ }
+ $toast.success('Simulator successfully stopped')
+ })
+ .catch((error: Error) => {
+ $toast.error('Error at stopping simulator')
+ console.error('Error at stopping simulator:', error)
+ })
}
</script>
<style>
-#charging-stations {
- height: 100%;
+#charging-stations-container {
+ height: fit-content;
width: 100%;
- padding: 30px;
- background-color: rgb(233, 227, 227);
display: flex;
flex-direction: column;
- gap: 0.5%;
}
-#inputs-container {
+#ui-server-container {
+ display: flex;
+ flex-direction: row;
+}
+
+#ui-server-selector {
+ width: 100%;
+ text-align: center;
+}
+
+#buttons-container {
display: flex;
- justify-content: space-between;
+ flex-direction: row;
+}
+
+#action-button {
+ flex: none;
}
#reload-button {
flex: auto;
- padding: 5px 15px;
- background-color: rgb(25, 118, 210);
- border-radius: 5px;
color: white;
- font-size: 35px;
+ background-color: blue;
+ font-size: 1.5rem;
font-weight: bold;
+ align-items: center;
+ justify-content: center;
}
#reload-button:hover {
- background-color: rgb(10, 113, 195);
+ background-color: rgb(0, 0, 225);
}
#reload-button:active {
- background-color: rgb(255, 113, 195);
+ background-color: red;
}
-#simulator-button {
- flex: auto;
-}
-
-#idtag-field {
- flex: auto;
+#action {
+ color: white;
+ background-color: black;
+ padding: 1%;
}
</style>
repositories / e-mobility-charging-stations-simulator.git / blobdiff