ui/web/src/views/ChargingStationsView.vue

   1 <template>
   2   <Container id="charging-stations-container">
   3     <Container id="buttons-container">
   4       <Container
   5         v-show="Array.isArray(uiServerConfigurations) && uiServerConfigurations.length > 1"
   6         id="ui-server-container"
   7       >
   8         <select
   9           id="ui-server-selector"
  10           v-model="state.uiServerIndex"
  11           @change="
  12             () => {
  13               if (
  14                 getFromLocalStorage<number>('uiServerConfigurationIndex', 0) !== state.uiServerIndex
  15               ) {
  16                 $uiClient.setConfiguration(
  17                   ($configuration.value.uiServer as UIServerConfigurationSection[])[
  18                     state.uiServerIndex
  19                   ]
  20                 )
  21                 registerWSEventListeners()
  22                 $uiClient.registerWSEventListener(
  23                   'open',
  24                   () => {
  25                     setToLocalStorage<number>('uiServerConfigurationIndex', state.uiServerIndex)
  26                     clearToggleButtons()
  27                     $route.name !== 'charging-stations' &&
  28                       $router.push({ name: 'charging-stations' })
  29                   },
  30                   { once: true }
  31                 )
  32                 $uiClient.registerWSEventListener(
  33                   'error',
  34                   () => {
  35                     state.uiServerIndex = getFromLocalStorage<number>(
  36                       'uiServerConfigurationIndex',
  37                       0
  38                     )
  39                     $uiClient.setConfiguration(
  40                       ($configuration.value.uiServer as UIServerConfigurationSection[])[
  41                         getFromLocalStorage<number>('uiServerConfigurationIndex', 0)
  42                       ]
  43                     )
  44                     registerWSEventListeners()
  45                   },
  46                   { once: true }
  47                 )
  48               }
  49             }
  50           "
  51         >
  52           <option
  53             v-for="uiServerConfiguration in uiServerConfigurations"
  54             :value="uiServerConfiguration.index"
  55           >
  56             {{
  57               uiServerConfiguration.configuration.name ?? uiServerConfiguration.configuration.host
  58             }}
  59           </option>
  60         </select>
  61       </Container>
  62       <ToggleButton
  63         :id="'simulator'"
  64         :key="state.renderSimulator"
  65         :status="simulatorState?.started"
  66         :on="() => startSimulator()"
  67         :off="() => stopSimulator()"
  68         :class="simulatorButtonClass"
  69       >
  70         {{ simulatorButtonMessage }}
  71       </ToggleButton>
  72       <ToggleButton
  73         :id="'add-charging-stations'"
  74         :key="state.renderAddChargingStations"
  75         :shared="true"
  76         :on="
  77           () => {
  78             $router.push({ name: 'add-charging-stations' })
  79           }
  80         "
  81         :off="
  82           () => {
  83             $router.push({ name: 'charging-stations' })
  84           }
  85         "
  86         @clicked="
  87           () => {
  88             state.renderChargingStations = randomUUID()
  89           }
  90         "
  91       >
  92         Add Charging Stations
  93       </ToggleButton>
  94       <ReloadButton
  95         id="reload-button"
  96         :loading="state.gettingChargingStations"
  97         @click="getChargingStations()"
  98       />
  99     </Container>
 100     <CSTable
 101       v-show="Array.isArray($chargingStations.value) && $chargingStations.value.length > 0"
 102       :key="state.renderChargingStations"
 103       :charging-stations="$chargingStations.value"
 104       @need-refresh="
 105         () => {
 106           state.renderAddChargingStations = randomUUID()
 107           state.renderChargingStations = randomUUID()
 108         }
 109       "
 110     />
 111   </Container>
 112 </template>
 113
 114 <script setup lang="ts">
 115 import { computed, getCurrentInstance, onMounted, onUnmounted, ref, watch } from 'vue'
 116 import { useToast } from 'vue-toast-notification'
 117 import CSTable from '@/components/charging-stations/CSTable.vue'
 118 import type {
 119   ChargingStationData,
 120   ResponsePayload,
 121   SimulatorState,
 122   UIServerConfigurationSection
 123 } from '@/types'
 124 import Container from '@/components/Container.vue'
 125 import ReloadButton from '@/components/buttons/ReloadButton.vue'
 126 import {
 127   deleteFromLocalStorage,
 128   getFromLocalStorage,
 129   getLocalStorage,
 130   randomUUID,
 131   setToLocalStorage,
 132   useUIClient
 133 } from '@/composables'
 134 import ToggleButton from '@/components/buttons/ToggleButton.vue'
 135
 136 const simulatorState = ref<SimulatorState | undefined>(undefined)
 137
 138 const simulatorButtonClass = computed<string>(() =>
 139   simulatorState.value?.started === true ? 'simulator-stop-button' : 'simulator-start-button'
 140 )
 141 const simulatorButtonMessage = computed<string>(
 142   () =>
 143     `${simulatorState.value?.started === true ? 'Stop' : 'Start'} Simulator${simulatorState.value?.version != null ? ` (${simulatorState.value.version})` : ''}`
 144 )
 145
 146 const state = ref<{
 147   renderSimulator: `${string}-${string}-${string}-${string}-${string}`
 148   renderAddChargingStations: `${string}-${string}-${string}-${string}-${string}`
 149   renderChargingStations: `${string}-${string}-${string}-${string}-${string}`
 150   gettingSimulatorState: boolean
 151   gettingTemplates: boolean
 152   gettingChargingStations: boolean
 153   uiServerIndex: number
 154 }>({
 155   renderSimulator: randomUUID(),
 156   renderAddChargingStations: randomUUID(),
 157   renderChargingStations: randomUUID(),
 158   gettingSimulatorState: false,
 159   gettingTemplates: false,
 160   gettingChargingStations: false,
 161   uiServerIndex: getFromLocalStorage<number>('uiServerConfigurationIndex', 0)
 162 })
 163
 164 const clearToggleButtons = (): void => {
 165   for (const key in getLocalStorage()) {
 166     if (key.includes('toggle-button')) {
 167       deleteFromLocalStorage(key)
 168     }
 169   }
 170   state.value.renderChargingStations = randomUUID()
 171   state.value.renderAddChargingStations = randomUUID()
 172 }
 173
 174 const app = getCurrentInstance()
 175
 176 watch(app!.appContext.config.globalProperties.$chargingStations, () => {
 177   state.value.renderChargingStations = randomUUID()
 178 })
 179
 180 watch(simulatorState, () => {
 181   state.value.renderSimulator = randomUUID()
 182 })
 183
 184 const clearTemplates = (): void => {
 185   if (app != null) {
 186     app.appContext.config.globalProperties.$templates.value = []
 187   }
 188 }
 189
 190 const clearChargingStations = (): void => {
 191   if (app != null) {
 192     app.appContext.config.globalProperties.$chargingStations.value = []
 193   }
 194 }
 195
 196 const uiClient = useUIClient()
 197
 198 const $toast = useToast()
 199
 200 const getSimulatorState = (): void => {
 201   if (state.value.gettingSimulatorState === false) {
 202     state.value.gettingSimulatorState = true
 203     uiClient
 204       .simulatorState()
 205       .then((response: ResponsePayload) => {
 206         simulatorState.value = response.state as SimulatorState
 207       })
 208       .catch((error: Error) => {
 209         $toast.error('Error at fetching simulator state')
 210         console.error('Error at fetching simulator state:', error)
 211       })
 212       .finally(() => {
 213         state.value.gettingSimulatorState = false
 214       })
 215   }
 216 }
 217
 218 const getTemplates = (): void => {
 219   if (state.value.gettingTemplates === false) {
 220     state.value.gettingTemplates = true
 221     uiClient
 222       .listTemplates()
 223       .then((response: ResponsePayload) => {
 224         if (app != null) {
 225           app.appContext.config.globalProperties.$templates.value = response.templates as string[]
 226         }
 227       })
 228       .catch((error: Error) => {
 229         clearTemplates()
 230         $toast.error('Error at fetching charging station templates')
 231         console.error('Error at fetching charging station templates:', error)
 232       })
 233       .finally(() => {
 234         state.value.gettingTemplates = false
 235       })
 236   }
 237 }
 238
 239 const getChargingStations = (): void => {
 240   if (state.value.gettingChargingStations === false) {
 241     state.value.gettingChargingStations = true
 242     uiClient
 243       .listChargingStations()
 244       .then((response: ResponsePayload) => {
 245         if (app != null) {
 246           app.appContext.config.globalProperties.$chargingStations.value =
 247             response.chargingStations as ChargingStationData[]
 248         }
 249       })
 250       .catch((error: Error) => {
 251         clearChargingStations()
 252         $toast.error('Error at fetching charging stations')
 253         console.error('Error at fetching charging stations:', error)
 254       })
 255       .finally(() => {
 256         state.value.gettingChargingStations = false
 257       })
 258   }
 259 }
 260
 261 const getData = (): void => {
 262   getSimulatorState()
 263   getTemplates()
 264   getChargingStations()
 265 }
 266
 267 const registerWSEventListeners = () => {
 268   uiClient.registerWSEventListener('open', getData)
 269   uiClient.registerWSEventListener('error', clearChargingStations)
 270   uiClient.registerWSEventListener('close', clearChargingStations)
 271 }
 272
 273 const unregisterWSEventListeners = () => {
 274   uiClient.unregisterWSEventListener('open', getData)
 275   uiClient.unregisterWSEventListener('error', clearChargingStations)
 276   uiClient.unregisterWSEventListener('close', clearChargingStations)
 277 }
 278
 279 onMounted(() => {
 280   registerWSEventListeners()
 281 })
 282
 283 onUnmounted(() => {
 284   unregisterWSEventListeners()
 285 })
 286
 287 const uiServerConfigurations: { index: number; configuration: UIServerConfigurationSection }[] = (
 288   app?.appContext.config.globalProperties.$configuration.value
 289     .uiServer as UIServerConfigurationSection[]
 290 ).map((configuration: UIServerConfigurationSection, index: number) => ({
 291   index,
 292   configuration
 293 }))
 294
 295 const startSimulator = (): void => {
 296   uiClient
 297     .startSimulator()
 298     .then(() => {
 299       $toast.success('Simulator successfully started')
 300     })
 301     .catch((error: Error) => {
 302       $toast.error('Error at starting simulator')
 303       console.error('Error at starting simulator:', error)
 304     })
 305     .finally(() => {
 306       getSimulatorState()
 307     })
 308 }
 309 const stopSimulator = (): void => {
 310   uiClient
 311     .stopSimulator()
 312     .then(() => {
 313       clearChargingStations()
 314       $toast.success('Simulator successfully stopped')
 315     })
 316     .catch((error: Error) => {
 317       $toast.error('Error at stopping simulator')
 318       console.error('Error at stopping simulator:', error)
 319     })
 320     .finally(() => {
 321       getSimulatorState()
 322     })
 323 }
 324 </script>
 325
 326 <style>
 327 #charging-stations-container {
 328   height: fit-content;
 329   width: 100%;
 330   display: flex;
 331   flex-direction: column;
 332 }
 333
 334 #ui-server-container {
 335   display: flex;
 336   justify-content: center;
 337   border-style: outset;
 338 }
 339
 340 #ui-server-selector {
 341   width: 100%;
 342   background-color: rgb(239, 239, 239);
 343   font: small-caption;
 344   text-align: center;
 345 }
 346
 347 #ui-server-selector:hover {
 348   background-color: rgb(229, 229, 229);
 349 }
 350
 351 #buttons-container {
 352   display: flex;
 353   flex-direction: row;
 354 }
 355
 356 .simulator-start-button {
 357   color: ivory;
 358   background-color: green;
 359 }
 360
 361 .simulator-start-button:hover {
 362   background-color: rgb(0, 98, 0);
 363 }
 364
 365 .simulator-stop-button {
 366   color: ivory;
 367   background-color: red;
 368 }
 369
 370 .simulator-stop-button:hover {
 371   background-color: rgb(225, 0, 0);
 372 }
 373
 374 #action-button {
 375   flex: none;
 376 }
 377
 378 #reload-button {
 379   color: ivory;
 380   background-color: blue;
 381   font-size: 2rem;
 382 }
 383
 384 #reload-button:hover {
 385   background-color: rgb(0, 0, 225);
 386 }
 387
 388 #reload-button:active {
 389   background-color: darkblue;
 390 }
 391
 392 #action {
 393   min-width: max-content;
 394   color: ivory;
 395   background-color: black;
 396   padding: 0.8%;
 397 }
 398 </style>