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($configuration.value.uiServer[state.uiServerIndex])
17 registerWSEventListeners()
18 $uiClient.registerWSEventListener(
21 setToLocalStorage<number>('uiServerConfigurationIndex', state.uiServerIndex)
23 $route.name !== 'charging-stations' &&
24 $router.push({ name: 'charging-stations' })
28 $uiClient.registerWSEventListener(
31 state.uiServerIndex = getFromLocalStorage<number>(
32 'uiServerConfigurationIndex',
35 $uiClient.setConfiguration(
36 $configuration.value.uiServer[
37 getFromLocalStorage<number>('uiServerConfigurationIndex', 0)
40 registerWSEventListeners()
49 v-for="uiServerConfiguration in uiServerConfigurations"
50 :value="uiServerConfiguration.index"
53 uiServerConfiguration.configuration.name ?? uiServerConfiguration.configuration.host
60 :key="state.renderSimulator"
61 :status="simulatorState?.started"
62 :on="() => startSimulator()"
63 :off="() => stopSimulator()"
64 :class="simulatorButtonClass"
66 {{ simulatorButtonMessage }}
69 :id="'add-charging-stations'"
70 :key="state.renderAddChargingStations"
74 $router.push({ name: 'add-charging-stations' })
79 $router.push({ name: 'charging-stations' })
84 state.renderChargingStations = randomUUID()
92 :loading="state.gettingChargingStations"
93 @click="getChargingStations()"
97 v-show="Array.isArray($chargingStations.value) && $chargingStations.value.length > 0"
98 :key="state.renderChargingStations"
99 :charging-stations="$chargingStations.value"
102 state.renderAddChargingStations = randomUUID()
103 state.renderChargingStations = randomUUID()
110 <script setup lang="ts">
111 import { computed, getCurrentInstance, onMounted, onUnmounted, ref, watch } from 'vue'
112 import { useToast } from 'vue-toast-notification'
113 import CSTable from '@/components/charging-stations/CSTable.vue'
114 import type { ResponsePayload, SimulatorState, UIServerConfigurationSection } from '@/types'
115 import Container from '@/components/Container.vue'
116 import ReloadButton from '@/components/buttons/ReloadButton.vue'
118 deleteFromLocalStorage,
124 } from '@/composables'
125 import ToggleButton from '@/components/buttons/ToggleButton.vue'
127 const simulatorState = ref<SimulatorState | undefined>(undefined)
129 const simulatorButtonClass = computed<string>(() =>
130 simulatorState.value?.started === true ? 'simulator-stop-button' : 'simulator-start-button'
132 const simulatorButtonMessage = computed<string>(
134 `${simulatorState.value?.started === true ? 'Stop' : 'Start'} Simulator${simulatorState.value?.version != null ? ` (${simulatorState.value.version})` : ''}`
138 renderSimulator: `${string}-${string}-${string}-${string}-${string}`
139 renderAddChargingStations: `${string}-${string}-${string}-${string}-${string}`
140 renderChargingStations: `${string}-${string}-${string}-${string}-${string}`
141 gettingSimulatorState: boolean
142 gettingTemplates: boolean
143 gettingChargingStations: boolean
144 uiServerIndex: number
146 renderSimulator: randomUUID(),
147 renderAddChargingStations: randomUUID(),
148 renderChargingStations: randomUUID(),
149 gettingSimulatorState: false,
150 gettingTemplates: false,
151 gettingChargingStations: false,
152 uiServerIndex: getFromLocalStorage<number>('uiServerConfigurationIndex', 0)
155 const clearToggleButtons = (): void => {
156 for (const key in getLocalStorage()) {
157 if (key.includes('toggle-button')) {
158 deleteFromLocalStorage(key)
161 state.value.renderChargingStations = randomUUID()
162 state.value.renderAddChargingStations = randomUUID()
165 const app = getCurrentInstance()
167 watch(app?.appContext.config.globalProperties.$chargingStations, () => {
168 state.value.renderChargingStations = randomUUID()
171 watch(simulatorState, () => {
172 state.value.renderSimulator = randomUUID()
175 const clearTemplates = (): void => {
177 app.appContext.config.globalProperties.$templates.value = []
181 const clearChargingStations = (): void => {
183 app.appContext.config.globalProperties.$chargingStations.value = []
187 const uiClient = useUIClient()
189 const $toast = useToast()
191 const getSimulatorState = (): void => {
192 if (state.value.gettingSimulatorState === false) {
193 state.value.gettingSimulatorState = true
196 .then((response: ResponsePayload) => {
197 simulatorState.value = response.state as SimulatorState
199 .catch((error: Error) => {
200 $toast.error('Error at fetching simulator state')
201 console.error('Error at fetching simulator state:', error)
204 state.value.gettingSimulatorState = false
209 const getTemplates = (): void => {
210 if (state.value.gettingTemplates === false) {
211 state.value.gettingTemplates = true
214 .then((response: ResponsePayload) => {
216 app.appContext.config.globalProperties.$templates.value = response.templates
219 .catch((error: Error) => {
221 $toast.error('Error at fetching charging station templates')
222 console.error('Error at fetching charging station templates:', error)
225 state.value.gettingTemplates = false
230 const getChargingStations = (): void => {
231 if (state.value.gettingChargingStations === false) {
232 state.value.gettingChargingStations = true
234 .listChargingStations()
235 .then((response: ResponsePayload) => {
237 app.appContext.config.globalProperties.$chargingStations.value = response.chargingStations
240 .catch((error: Error) => {
241 clearChargingStations()
242 $toast.error('Error at fetching charging stations')
243 console.error('Error at fetching charging stations:', error)
246 state.value.gettingChargingStations = false
251 const getData = (): void => {
254 getChargingStations()
257 const registerWSEventListeners = () => {
258 uiClient.registerWSEventListener('open', getData)
259 uiClient.registerWSEventListener('error', clearChargingStations)
260 uiClient.registerWSEventListener('close', clearChargingStations)
263 const unregisterWSEventListeners = () => {
264 uiClient.unregisterWSEventListener('open', getData)
265 uiClient.unregisterWSEventListener('error', clearChargingStations)
266 uiClient.unregisterWSEventListener('close', clearChargingStations)
270 registerWSEventListeners()
274 unregisterWSEventListeners()
277 const uiServerConfigurations: { index: number; configuration: UIServerConfigurationSection }[] =
278 app?.appContext.config.globalProperties.$configuration.value.uiServer.map(
279 (configuration: UIServerConfigurationSection, index: number) => ({
285 const startSimulator = (): void => {
289 $toast.success('Simulator successfully started')
291 .catch((error: Error) => {
292 $toast.error('Error at starting simulator')
293 console.error('Error at starting simulator:', error)
299 const stopSimulator = (): void => {
303 clearChargingStations()
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;