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 $router.currentRoute.value.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="state.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 } 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'
128 renderSimulator: `${string}-${string}-${string}-${string}-${string}`
129 renderAddChargingStations: `${string}-${string}-${string}-${string}-${string}`
130 renderChargingStations: `${string}-${string}-${string}-${string}-${string}`
131 gettingSimulatorState: boolean
132 gettingTemplates: boolean
133 gettingChargingStations: boolean
134 simulatorState?: SimulatorState
135 uiServerIndex: number
137 renderSimulator: randomUUID(),
138 renderAddChargingStations: randomUUID(),
139 renderChargingStations: randomUUID(),
140 gettingSimulatorState: false,
141 gettingTemplates: false,
142 gettingChargingStations: false,
143 uiServerIndex: getFromLocalStorage<number>('uiServerConfigurationIndex', 0)
146 const simulatorButtonClass = computed<string>(() =>
147 state.value.simulatorState?.started === true ? 'simulator-stop-button' : 'simulator-start-button'
149 const simulatorButtonMessage = computed<string>(
151 `${state.value.simulatorState?.started === true ? 'Stop' : 'Start'} Simulator${state.value.simulatorState?.version != null ? ` (${state.value.simulatorState.version})` : ''}`
154 const clearToggleButtons = (): void => {
155 for (const key in getLocalStorage()) {
156 if (key.includes('toggle-button')) {
157 deleteFromLocalStorage(key)
160 state.value.renderChargingStations = randomUUID()
161 state.value.renderAddChargingStations = randomUUID()
164 const app = getCurrentInstance()
166 const clearChargingStations = (): void => {
168 app.appContext.config.globalProperties.$chargingStations.value = []
170 state.value.renderChargingStations = randomUUID()
173 const uiClient = useUIClient()
175 const $toast = useToast()
177 const getSimulatorState = (): void => {
178 if (state.value.gettingSimulatorState === false) {
179 state.value.gettingSimulatorState = true
182 .then((response: ResponsePayload) => {
183 state.value.simulatorState = response.state as SimulatorState
185 .catch((error: Error) => {
186 $toast.error('Error at fetching simulator state')
187 console.error('Error at fetching simulator state:', error)
190 state.value.renderSimulator = randomUUID()
191 state.value.gettingSimulatorState = false
196 const getTemplates = (): void => {
197 if (state.value.gettingTemplates === false) {
198 state.value.gettingTemplates = true
201 .then((response: ResponsePayload) => {
203 app.appContext.config.globalProperties.$templates.value = response.templates
206 .catch((error: Error) => {
208 app.appContext.config.globalProperties.$templates.value = []
210 $toast.error('Error at fetching charging station templates')
211 console.error('Error at fetching charging station templates:', error)
214 state.value.gettingTemplates = false
219 const getChargingStations = (): void => {
220 if (state.value.gettingChargingStations === false) {
221 state.value.gettingChargingStations = true
223 .listChargingStations()
224 .then((response: ResponsePayload) => {
226 app.appContext.config.globalProperties.$chargingStations.value = response.chargingStations
229 .catch((error: Error) => {
231 app.appContext.config.globalProperties.$chargingStations.value = []
233 $toast.error('Error at fetching charging stations')
234 console.error('Error at fetching charging stations:', error)
237 state.value.renderChargingStations = randomUUID()
238 state.value.gettingChargingStations = false
243 const getData = (): void => {
246 getChargingStations()
249 const registerWSEventListeners = () => {
250 uiClient.registerWSEventListener('open', getData)
251 uiClient.registerWSEventListener('error', clearChargingStations)
252 uiClient.registerWSEventListener('close', clearChargingStations)
255 const unregisterWSEventListeners = () => {
256 uiClient.unregisterWSEventListener('open', getData)
257 uiClient.unregisterWSEventListener('error', clearChargingStations)
258 uiClient.unregisterWSEventListener('close', clearChargingStations)
262 registerWSEventListeners()
266 unregisterWSEventListeners()
269 const uiServerConfigurations: { index: number; configuration: UIServerConfigurationSection }[] =
270 app?.appContext.config.globalProperties.$configuration.value.uiServer.map(
271 (configuration: UIServerConfigurationSection, index: number) => ({
277 const startSimulator = (): void => {
281 $toast.success('Simulator successfully started')
283 .catch((error: Error) => {
284 $toast.error('Error at starting simulator')
285 console.error('Error at starting simulator:', error)
291 const stopSimulator = (): void => {
296 app.appContext.config.globalProperties.$chargingStations.value = []
298 $toast.success('Simulator successfully stopped')
300 .catch((error: Error) => {
301 $toast.error('Error at stopping simulator')
302 console.error('Error at stopping simulator:', error)
311 #charging-stations-container {
315 flex-direction: column;
318 #ui-server-container {
320 justify-content: center;
321 border-style: outset;
324 #ui-server-selector {
326 background-color: rgb(239, 239, 239);
331 #ui-server-selector:hover {
332 background-color: rgb(229, 229, 229);
340 .simulator-start-button {
342 background-color: green;
345 .simulator-start-button:hover {
346 background-color: rgb(0, 98, 0);
349 .simulator-stop-button {
351 background-color: red;
354 .simulator-stop-button:hover {
355 background-color: rgb(225, 0, 0);
364 background-color: blue;
368 #reload-button:hover {
369 background-color: rgb(0, 0, 225);
372 #reload-button:active {
373 background-color: darkblue;
377 min-width: max-content;
379 background-color: black;