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