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 ($configuration.value.uiServer as UIServerConfigurationSection[])[
21 registerWSEventListeners()
22 $uiClient.registerWSEventListener(
25 setToLocalStorage<number>('uiServerConfigurationIndex', state.uiServerIndex)
27 $route.name !== 'charging-stations' &&
28 $router.push({ name: 'charging-stations' })
32 $uiClient.registerWSEventListener(
35 state.uiServerIndex = getFromLocalStorage<number>(
36 'uiServerConfigurationIndex',
39 $uiClient.setConfiguration(
40 ($configuration.value.uiServer as UIServerConfigurationSection[])[
41 getFromLocalStorage<number>('uiServerConfigurationIndex', 0)
44 registerWSEventListeners()
53 v-for="uiServerConfiguration in uiServerConfigurations"
54 :key="uiServerConfiguration.index"
55 :value="uiServerConfiguration.index"
58 uiServerConfiguration.configuration.name ?? uiServerConfiguration.configuration.host
65 :key="state.renderSimulator"
66 :status="simulatorState?.started"
67 :on="() => startSimulator()"
68 :off="() => stopSimulator()"
69 :class="simulatorButtonClass"
71 {{ simulatorButtonMessage }}
74 :id="'add-charging-stations'"
75 :key="state.renderAddChargingStations"
79 $router.push({ name: 'add-charging-stations' })
84 $router.push({ name: 'charging-stations' })
89 state.renderChargingStations = randomUUID()
97 :loading="state.gettingChargingStations"
98 @click="getChargingStations()"
102 v-show="Array.isArray($chargingStations.value) && $chargingStations.value.length > 0"
103 :key="state.renderChargingStations"
104 :charging-stations="$chargingStations.value"
107 state.renderAddChargingStations = randomUUID()
108 state.renderChargingStations = randomUUID()
115 <script setup lang="ts">
116 import { computed, getCurrentInstance, onMounted, onUnmounted, ref, watch } from 'vue'
117 import { useToast } from 'vue-toast-notification'
119 import ReloadButton from '@/components/buttons/ReloadButton.vue'
120 import ToggleButton from '@/components/buttons/ToggleButton.vue'
121 import CSTable from '@/components/charging-stations/CSTable.vue'
122 import Container from '@/components/Container.vue'
124 deleteFromLocalStorage,
130 } from '@/composables'
135 UIServerConfigurationSection
138 const simulatorState = ref<SimulatorState | undefined>(undefined)
140 const simulatorButtonClass = computed<string>(() =>
141 simulatorState.value?.started === true ? 'simulator-stop-button' : 'simulator-start-button'
143 const simulatorButtonMessage = computed<string>(
145 `${simulatorState.value?.started === true ? 'Stop' : 'Start'} Simulator${
146 simulatorState.value?.version != null ? ` (${simulatorState.value.version})` : ''
151 renderSimulator: `${string}-${string}-${string}-${string}-${string}`
152 renderAddChargingStations: `${string}-${string}-${string}-${string}-${string}`
153 renderChargingStations: `${string}-${string}-${string}-${string}-${string}`
154 gettingSimulatorState: boolean
155 gettingTemplates: boolean
156 gettingChargingStations: boolean
157 uiServerIndex: number
159 renderSimulator: randomUUID(),
160 renderAddChargingStations: randomUUID(),
161 renderChargingStations: randomUUID(),
162 gettingSimulatorState: false,
163 gettingTemplates: false,
164 gettingChargingStations: false,
165 uiServerIndex: getFromLocalStorage<number>('uiServerConfigurationIndex', 0)
168 const clearToggleButtons = (): void => {
169 for (const key in getLocalStorage()) {
170 if (key.includes('toggle-button')) {
171 deleteFromLocalStorage(key)
174 state.value.renderChargingStations = randomUUID()
175 state.value.renderAddChargingStations = randomUUID()
178 const app = getCurrentInstance()
180 watch(app!.appContext.config.globalProperties.$chargingStations, () => {
181 state.value.renderChargingStations = randomUUID()
184 watch(simulatorState, () => {
185 state.value.renderSimulator = randomUUID()
188 const clearTemplates = (): void => {
190 app.appContext.config.globalProperties.$templates.value = []
194 const clearChargingStations = (): void => {
196 app.appContext.config.globalProperties.$chargingStations.value = []
200 const uiClient = useUIClient()
202 const $toast = useToast()
204 const getSimulatorState = (): void => {
205 if (state.value.gettingSimulatorState === false) {
206 state.value.gettingSimulatorState = true
209 .then((response: ResponsePayload) => {
210 simulatorState.value = response.state as SimulatorState
212 .catch((error: Error) => {
213 $toast.error('Error at fetching simulator state')
214 console.error('Error at fetching simulator state:', error)
217 state.value.gettingSimulatorState = false
222 const getTemplates = (): void => {
223 if (state.value.gettingTemplates === false) {
224 state.value.gettingTemplates = true
227 .then((response: ResponsePayload) => {
229 app.appContext.config.globalProperties.$templates.value = response.templates as string[]
232 .catch((error: Error) => {
234 $toast.error('Error at fetching charging station templates')
235 console.error('Error at fetching charging station templates:', error)
238 state.value.gettingTemplates = false
243 const getChargingStations = (): void => {
244 if (state.value.gettingChargingStations === false) {
245 state.value.gettingChargingStations = true
247 .listChargingStations()
248 .then((response: ResponsePayload) => {
250 app.appContext.config.globalProperties.$chargingStations.value =
251 response.chargingStations as ChargingStationData[]
254 .catch((error: Error) => {
255 clearChargingStations()
256 $toast.error('Error at fetching charging stations')
257 console.error('Error at fetching charging stations:', error)
260 state.value.gettingChargingStations = false
265 const getData = (): void => {
268 getChargingStations()
271 const registerWSEventListeners = () => {
272 uiClient.registerWSEventListener('open', getData)
273 uiClient.registerWSEventListener('error', clearChargingStations)
274 uiClient.registerWSEventListener('close', clearChargingStations)
277 const unregisterWSEventListeners = () => {
278 uiClient.unregisterWSEventListener('open', getData)
279 uiClient.unregisterWSEventListener('error', clearChargingStations)
280 uiClient.unregisterWSEventListener('close', clearChargingStations)
284 registerWSEventListeners()
288 unregisterWSEventListeners()
291 const uiServerConfigurations: {
293 configuration: UIServerConfigurationSection
295 app?.appContext.config.globalProperties.$configuration.value
296 .uiServer as UIServerConfigurationSection[]
297 ).map((configuration: UIServerConfigurationSection, index: number) => ({
302 const startSimulator = (): void => {
306 $toast.success('Simulator successfully started')
308 .catch((error: Error) => {
309 $toast.error('Error at starting simulator')
310 console.error('Error at starting simulator:', error)
316 const stopSimulator = (): void => {
320 clearChargingStations()
321 $toast.success('Simulator successfully stopped')
323 .catch((error: Error) => {
324 $toast.error('Error at stopping simulator')
325 console.error('Error at stopping simulator:', error)
334 #charging-stations-container {
338 flex-direction: column;
341 #ui-server-container {
343 justify-content: center;
344 border-style: outset;
347 #ui-server-selector {
349 background-color: rgb(239, 239, 239);
354 #ui-server-selector:hover {
355 background-color: rgb(229, 229, 229);
365 .simulator-start-button {
367 background-color: green;
370 .simulator-start-button:hover {
371 background-color: rgb(0, 98, 0);
374 .simulator-stop-button {
376 background-color: red;
379 .simulator-stop-button:hover {
380 background-color: rgb(225, 0, 0);
389 background-color: blue;
393 #reload-button:hover {
394 background-color: rgb(0, 0, 225);
397 #reload-button:active {
398 background-color: darkblue;
402 min-width: max-content;
404 background-color: black;