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