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 app?.appContext.config.globalProperties.$uiClient.setConfiguration(
17 app?.appContext.config.globalProperties.$configuration.uiServer[
21 initializeWSEventListeners()
22 app?.appContext.config.globalProperties.$uiClient.registerWSEventListener(
25 setToLocalStorage<number>('uiServerConfigurationIndex', state.uiServerIndex)
27 $router.currentRoute.value.name !== 'charging-stations' &&
28 $router.push({ name: 'charging-stations' })
32 app?.appContext.config.globalProperties.$uiClient.registerWSEventListener(
35 state.uiServerIndex = getFromLocalStorage<number>(
36 'uiServerConfigurationIndex',
39 app?.appContext.config.globalProperties.$uiClient.setConfiguration(
40 app?.appContext.config.globalProperties.$configuration.uiServer[
41 getFromLocalStorage<number>('uiServerConfigurationIndex', 0)
44 initializeWSEventListeners()
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.loading"
97 @click="loadChargingStations(() => (state.renderChargingStations = randomUUID()))"
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, 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}`
138 simulatorState?: SimulatorState
139 uiServerIndex: number
141 renderSimulator: randomUUID(),
142 renderAddChargingStations: randomUUID(),
143 renderChargingStations: randomUUID(),
145 uiServerIndex: getFromLocalStorage<number>('uiServerConfigurationIndex', 0)
148 const simulatorButtonClass = computed<string>(() =>
149 state.value.simulatorState?.started === true ? 'simulator-stop-button' : 'simulator-start-button'
151 const simulatorButtonMessage = computed<string>(
153 `${state.value.simulatorState?.started === true ? 'Stop' : 'Start'} Simulator${state.value.simulatorState?.version != null ? ` (${state.value.simulatorState.version})` : ''}`
156 const app = getCurrentInstance()
158 const clearToggleButtons = (): void => {
159 for (const key in getLocalStorage()) {
160 if (key.includes('toggle-button')) {
161 deleteFromLocalStorage(key)
166 const clearChargingStations = (): void => {
167 app!.appContext.config.globalProperties.$chargingStations = []
168 state.value.renderChargingStations = randomUUID()
171 const uiClient = app?.appContext.config.globalProperties.$uiClient
173 const getSimulatorState = (): void => {
176 .then((response: ResponsePayload) => {
177 state.value.simulatorState = response.state as SimulatorState
179 .catch((error: Error) => {
180 $toast.error('Error at fetching simulator state')
181 console.error('Error at fetching simulator state:', error)
184 state.value.renderSimulator = randomUUID()
188 const initializeWSEventListeners = () => {
189 app?.appContext.config.globalProperties.$uiClient.registerWSEventListener('open', () => {
193 .then((response: ResponsePayload) => {
195 app.appContext.config.globalProperties.$templates = response.templates
198 .catch((error: Error) => {
200 app.appContext.config.globalProperties.$templates = []
202 $toast.error('Error at fetching charging station templates')
203 console.error('Error at fetching charging station templates:', error)
206 state.value.renderAddChargingStations = randomUUID()
208 loadChargingStations(() => {
209 state.value.renderChargingStations = randomUUID()
212 app?.appContext.config.globalProperties.$uiClient.registerWSEventListener(
214 clearChargingStations
216 app?.appContext.config.globalProperties.$uiClient.registerWSEventListener(
218 clearChargingStations
223 initializeWSEventListeners()
226 const uiServerConfigurations: { index: number; configuration: UIServerConfigurationSection }[] =
227 app?.appContext.config.globalProperties.$configuration.uiServer.map(
228 (configuration: UIServerConfigurationSection, index: number) => ({
234 const $toast = useToast()
236 const loadChargingStations = (renderCallback?: () => void): void => {
237 if (state.value.loading === false) {
238 state.value.loading = true
240 .listChargingStations()
241 .then((response: ResponsePayload) => {
243 app.appContext.config.globalProperties.$chargingStations = response.chargingStations
246 .catch((error: Error) => {
248 app.appContext.config.globalProperties.$chargingStations = []
250 $toast.error('Error at fetching charging stations')
251 console.error('Error at fetching charging stations:', error)
254 if (renderCallback != null) {
257 state.value.loading = false
262 const startSimulator = (): void => {
266 $toast.success('Simulator successfully started')
268 .catch((error: Error) => {
269 $toast.error('Error at starting simulator')
270 console.error('Error at starting simulator:', error)
276 const stopSimulator = (): void => {
281 app.appContext.config.globalProperties.$chargingStations = []
283 $toast.success('Simulator successfully stopped')
285 .catch((error: Error) => {
286 $toast.error('Error at stopping simulator')
287 console.error('Error at stopping simulator:', error)
296 #charging-stations-container {
300 flex-direction: column;
303 #ui-server-container {
305 justify-content: center;
306 border-style: outset;
309 #ui-server-selector {
311 background-color: rgb(239, 239, 239);
316 #ui-server-selector:hover {
317 background-color: rgb(229, 229, 229);
325 .simulator-start-button {
327 background-color: green;
330 .simulator-start-button:hover {
331 background-color: rgb(0, 98, 0);
334 .simulator-stop-button {
336 background-color: red;
339 .simulator-stop-button:hover {
340 background-color: rgb(225, 0, 0);
349 background-color: blue;
353 #reload-button:hover {
354 background-color: rgb(0, 0, 225);
357 #reload-button:active {
358 background-color: darkblue;
362 min-width: max-content;
364 background-color: black;