2 <Container id="charging-stations-container">
3 <Container id="buttons-container">
5 v-show="Array.isArray(uiServerConfigurations) && uiServerConfigurations.length > 1"
6 id="ui-server-container"
9 id="ui-server-selector"
10 v-model="state.uiServerIndex"
14 getFromLocalStorage<number>('uiServerConfigurationIndex', 0) !== state.uiServerIndex
16 uiClient.setConfiguration(
17 app?.appContext.config.globalProperties.$configuration.uiServer[
21 registerWSEventListeners()
22 uiClient.registerWSEventListener(
25 setToLocalStorage<number>('uiServerConfigurationIndex', state.uiServerIndex)
27 $router.currentRoute.value.name !== 'charging-stations' &&
28 $router.push({ name: 'charging-stations' })
32 uiClient.registerWSEventListener(
35 state.uiServerIndex = getFromLocalStorage<number>(
36 'uiServerConfigurationIndex',
39 uiClient.setConfiguration(
40 app?.appContext.config.globalProperties.$configuration.uiServer[
41 getFromLocalStorage<number>('uiServerConfigurationIndex', 0)
44 registerWSEventListeners()
53 v-for="uiServerConfiguration in uiServerConfigurations"
54 :value="uiServerConfiguration.index"
57 uiServerConfiguration.configuration.name ?? uiServerConfiguration.configuration.host
64 :key="state.renderSimulator"
65 :status="state.simulatorState?.started"
66 :on="() => startSimulator()"
67 :off="() => stopSimulator()"
68 :class="simulatorButtonClass"
70 {{ simulatorButtonMessage }}
73 :id="'add-charging-stations'"
74 :key="state.renderAddChargingStations"
78 $router.push({ name: 'add-charging-stations' })
83 $router.push({ name: 'charging-stations' })
88 state.renderChargingStations = randomUUID()
96 :loading="state.gettingChargingStations"
97 @click="getChargingStations()"
102 Array.isArray(app?.appContext.config.globalProperties.$chargingStations) &&
103 app.appContext.config.globalProperties.$chargingStations.length > 0
105 :key="state.renderChargingStations"
106 :charging-stations="app?.appContext.config.globalProperties.$chargingStations"
109 state.renderAddChargingStations = randomUUID()
110 state.renderChargingStations = randomUUID()
117 <script setup lang="ts">
118 import { computed, getCurrentInstance, onMounted, onUnmounted, ref } from 'vue'
119 import { useToast } from 'vue-toast-notification'
120 import CSTable from '@/components/charging-stations/CSTable.vue'
121 import type { ResponsePayload, SimulatorState, UIServerConfigurationSection } from '@/types'
122 import Container from '@/components/Container.vue'
123 import ReloadButton from '@/components/buttons/ReloadButton.vue'
125 deleteFromLocalStorage,
130 } from '@/composables'
131 import ToggleButton from '@/components/buttons/ToggleButton.vue'
134 renderSimulator: `${string}-${string}-${string}-${string}-${string}`
135 renderAddChargingStations: `${string}-${string}-${string}-${string}-${string}`
136 renderChargingStations: `${string}-${string}-${string}-${string}-${string}`
137 gettingSimulatorState: boolean
138 gettingTemplates: boolean
139 gettingChargingStations: boolean
140 simulatorState?: SimulatorState
141 uiServerIndex: number
143 renderSimulator: randomUUID(),
144 renderAddChargingStations: randomUUID(),
145 renderChargingStations: randomUUID(),
146 gettingSimulatorState: false,
147 gettingTemplates: false,
148 gettingChargingStations: false,
149 uiServerIndex: getFromLocalStorage<number>('uiServerConfigurationIndex', 0)
152 const simulatorButtonClass = computed<string>(() =>
153 state.value.simulatorState?.started === true ? 'simulator-stop-button' : 'simulator-start-button'
155 const simulatorButtonMessage = computed<string>(
157 `${state.value.simulatorState?.started === true ? 'Stop' : 'Start'} Simulator${state.value.simulatorState?.version != null ? ` (${state.value.simulatorState.version})` : ''}`
160 const clearToggleButtons = (): void => {
161 for (const key in getLocalStorage()) {
162 if (key.includes('toggle-button')) {
163 deleteFromLocalStorage(key)
166 state.value.renderChargingStations = randomUUID()
167 state.value.renderAddChargingStations = randomUUID()
170 const app = getCurrentInstance()
172 const clearChargingStations = (): void => {
174 app.appContext.config.globalProperties.$chargingStations = []
176 state.value.renderChargingStations = randomUUID()
179 const uiClient = app?.appContext.config.globalProperties.$uiClient
181 const $toast = useToast()
183 const getSimulatorState = (): void => {
184 if (state.value.gettingSimulatorState === false) {
185 state.value.gettingSimulatorState = true
188 .then((response: ResponsePayload) => {
189 state.value.simulatorState = response.state as SimulatorState
191 .catch((error: Error) => {
192 $toast.error('Error at fetching simulator state')
193 console.error('Error at fetching simulator state:', error)
196 state.value.renderSimulator = randomUUID()
197 state.value.gettingSimulatorState = false
202 const getTemplates = (): void => {
203 if (state.value.gettingTemplates === false) {
204 state.value.gettingTemplates = true
207 .then((response: ResponsePayload) => {
209 app.appContext.config.globalProperties.$templates = response.templates
212 .catch((error: Error) => {
214 app.appContext.config.globalProperties.$templates = []
216 $toast.error('Error at fetching charging station templates')
217 console.error('Error at fetching charging station templates:', error)
220 state.value.gettingTemplates = false
225 const getChargingStations = (): void => {
226 if (state.value.gettingChargingStations === false) {
227 state.value.gettingChargingStations = true
229 .listChargingStations()
230 .then((response: ResponsePayload) => {
232 app.appContext.config.globalProperties.$chargingStations = response.chargingStations
235 .catch((error: Error) => {
237 app.appContext.config.globalProperties.$chargingStations = []
239 $toast.error('Error at fetching charging stations')
240 console.error('Error at fetching charging stations:', error)
243 state.value.renderChargingStations = randomUUID()
244 state.value.gettingChargingStations = false
249 const getData = (): void => {
252 getChargingStations()
255 const registerWSEventListeners = () => {
256 uiClient.registerWSEventListener('open', getData)
257 uiClient.registerWSEventListener('error', clearChargingStations)
258 uiClient.registerWSEventListener('close', clearChargingStations)
261 const unregisterWSEventListeners = () => {
262 uiClient.unregisterWSEventListener('open', getData)
263 uiClient.unregisterWSEventListener('error', clearChargingStations)
264 uiClient.unregisterWSEventListener('close', clearChargingStations)
268 registerWSEventListeners()
272 unregisterWSEventListeners()
275 const uiServerConfigurations: { index: number; configuration: UIServerConfigurationSection }[] =
276 app?.appContext.config.globalProperties.$configuration.uiServer.map(
277 (configuration: UIServerConfigurationSection, index: number) => ({
283 const startSimulator = (): void => {
287 $toast.success('Simulator successfully started')
289 .catch((error: Error) => {
290 $toast.error('Error at starting simulator')
291 console.error('Error at starting simulator:', error)
297 const stopSimulator = (): void => {
302 app.appContext.config.globalProperties.$chargingStations = []
304 $toast.success('Simulator successfully stopped')
306 .catch((error: Error) => {
307 $toast.error('Error at stopping simulator')
308 console.error('Error at stopping simulator:', error)
317 #charging-stations-container {
321 flex-direction: column;
324 #ui-server-container {
326 justify-content: center;
327 border-style: outset;
330 #ui-server-selector {
332 background-color: rgb(239, 239, 239);
337 #ui-server-selector:hover {
338 background-color: rgb(229, 229, 229);
346 .simulator-start-button {
348 background-color: green;
351 .simulator-start-button:hover {
352 background-color: rgb(0, 98, 0);
355 .simulator-stop-button {
357 background-color: red;
360 .simulator-stop-button:hover {
361 background-color: rgb(225, 0, 0);
370 background-color: blue;
374 #reload-button:hover {
375 background-color: rgb(0, 0, 225);
378 #reload-button:active {
379 background-color: darkblue;
383 min-width: max-content;
385 background-color: black;