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()"
69 state.simulatorState?.started === true
70 ? 'simulator-stop-button'
71 : 'simulator-start-button'
74 {{ state.simulatorState?.started === true ? 'Stop' : 'Start' }} Simulator
75 {{ state.simulatorState?.version != null ? ` (${state.simulatorState?.version})` : '' }}
78 :id="'add-charging-stations'"
79 :key="state.renderAddChargingStations"
83 $router.push({ name: 'add-charging-stations' })
88 $router.push({ name: 'charging-stations' })
93 state.renderChargingStations = randomUUID()
101 :loading="state.loading"
102 @click="loadChargingStations(() => (state.renderChargingStations = randomUUID()))"
107 Array.isArray(app?.appContext.config.globalProperties.$chargingStations) &&
108 app.appContext.config.globalProperties.$chargingStations.length > 0
110 :key="state.renderChargingStations"
111 :charging-stations="app?.appContext.config.globalProperties.$chargingStations"
114 state.renderAddChargingStations = randomUUID()
115 state.renderChargingStations = randomUUID()
122 <script setup lang="ts">
123 import { getCurrentInstance, onMounted, ref } from 'vue'
124 import { useToast } from 'vue-toast-notification'
125 import CSTable from '@/components/charging-stations/CSTable.vue'
126 import type { ResponsePayload, SimulatorState, UIServerConfigurationSection } from '@/types'
127 import Container from '@/components/Container.vue'
128 import ReloadButton from '@/components/buttons/ReloadButton.vue'
130 deleteFromLocalStorage,
135 } from '@/composables'
136 import ToggleButton from '@/components/buttons/ToggleButton.vue'
139 renderSimulator: `${string}-${string}-${string}-${string}-${string}`
140 renderAddChargingStations: `${string}-${string}-${string}-${string}-${string}`
141 renderChargingStations: `${string}-${string}-${string}-${string}-${string}`
143 simulatorState?: SimulatorState
144 uiServerIndex: number
146 renderSimulator: randomUUID(),
147 renderAddChargingStations: randomUUID(),
148 renderChargingStations: randomUUID(),
150 uiServerIndex: getFromLocalStorage<number>('uiServerConfigurationIndex', 0)
153 const app = getCurrentInstance()
155 const clearToggleButtons = (): void => {
156 for (const key in getLocalStorage()) {
157 if (key.includes('toggle-button')) {
158 deleteFromLocalStorage(key)
163 const clearChargingStations = (): void => {
164 app!.appContext.config.globalProperties.$chargingStations = []
165 state.value.renderChargingStations = randomUUID()
168 const uiClient = app?.appContext.config.globalProperties.$uiClient
170 const getSimulatorState = (): void => {
173 .then((response: ResponsePayload) => {
174 state.value.simulatorState = response.state as SimulatorState
176 .catch((error: Error) => {
177 $toast.error('Error at fetching simulator state')
178 console.error('Error at fetching simulator state:', error)
181 state.value.renderSimulator = randomUUID()
185 const initializeWSEventListeners = () => {
186 app?.appContext.config.globalProperties.$uiClient.registerWSEventListener('open', () => {
190 .then((response: ResponsePayload) => {
192 app.appContext.config.globalProperties.$templates = response.templates
195 .catch((error: Error) => {
197 app.appContext.config.globalProperties.$templates = []
199 $toast.error('Error at fetching charging station templates')
200 console.error('Error at fetching charging station templates:', error)
203 state.value.renderAddChargingStations = randomUUID()
205 loadChargingStations(() => {
206 state.value.renderChargingStations = randomUUID()
209 app?.appContext.config.globalProperties.$uiClient.registerWSEventListener(
211 clearChargingStations
213 app?.appContext.config.globalProperties.$uiClient.registerWSEventListener(
215 clearChargingStations
220 initializeWSEventListeners()
223 const uiServerConfigurations: { index: number; configuration: UIServerConfigurationSection }[] =
224 app?.appContext.config.globalProperties.$configuration.uiServer.map(
225 (configuration: UIServerConfigurationSection, index: number) => ({
231 const $toast = useToast()
233 const loadChargingStations = (renderCallback?: () => void): void => {
234 if (state.value.loading === false) {
235 state.value.loading = true
237 .listChargingStations()
238 .then((response: ResponsePayload) => {
240 app.appContext.config.globalProperties.$chargingStations = response.chargingStations
243 .catch((error: Error) => {
245 app.appContext.config.globalProperties.$chargingStations = []
247 $toast.error('Error at fetching charging stations')
248 console.error('Error at fetching charging stations:', error)
251 if (renderCallback != null) {
254 state.value.loading = false
259 const startSimulator = (): void => {
263 $toast.success('Simulator successfully started')
265 .catch((error: Error) => {
266 $toast.error('Error at starting simulator')
267 console.error('Error at starting simulator:', error)
273 const stopSimulator = (): void => {
278 app.appContext.config.globalProperties.$chargingStations = []
280 $toast.success('Simulator successfully stopped')
282 .catch((error: Error) => {
283 $toast.error('Error at stopping simulator')
284 console.error('Error at stopping simulator:', error)
293 #charging-stations-container {
297 flex-direction: column;
300 #ui-server-container {
302 justify-content: center;
303 border-style: outset;
306 #ui-server-selector {
308 background-color: rgb(239, 239, 239);
313 #ui-server-selector:hover {
314 background-color: rgb(229, 229, 229);
322 .simulator-start-button {
324 background-color: green;
327 .simulator-start-button:hover {
328 background-color: rgb(0, 98, 0);
331 .simulator-stop-button {
333 background-color: red;
336 .simulator-stop-button:hover {
337 background-color: rgb(225, 0, 0);
346 background-color: blue;
350 #reload-button:hover {
351 background-color: rgb(0, 0, 225);
354 #reload-button:active {
355 background-color: darkblue;
359 min-width: max-content;
361 background-color: black;