ui/web/src/views/ChargingStationsView.vue

   1 <template>
   2   <Container id="charging-stations-container">
   3     <Container
   4       v-show="Array.isArray(uiServerConfigurations) && uiServerConfigurations.length > 1"
   5       id="ui-server-container"
   6     >
   7       <select
   8         id="ui-server-selector"
   9         v-model="state.uiServerIndex"
  10         @change="
  11           () => {
  12             try {
  13               if (
  14                 getFromLocalStorage<number>('uiServerConfigurationIndex', 0) !== state.uiServerIndex
  15               ) {
  16                 setToLocalStorage<number>('uiServerConfigurationIndex', state.uiServerIndex)
  17                 app?.appContext.config.globalProperties.$uiClient.registerWSEventListener(
  18                   'close',
  19                   () => {
  20                     app!.appContext.config.globalProperties.$chargingStations = []
  21                   },
  22                   { once: true }
  23                 )
  24                 app?.appContext.config.globalProperties.$uiClient.setConfiguration(
  25                   app?.appContext.config.globalProperties.$configuration.uiServer[
  26                     getFromLocalStorage<number>('uiServerConfigurationIndex', state.uiServerIndex)
  27                   ]
  28                 )
  29                 app?.appContext.config.globalProperties.$uiClient.registerWSEventListener(
  30                   'open',
  31                   () => {
  32                     loadChargingStations(() => (state.renderChargingStationsList = randomUUID()))
  33                   },
  34                   { once: true }
  35                 )
  36               }
  37             } catch (error) {
  38               $toast.error('Error at changing UI server configuration')
  39               console.error('Error at changing UI server configuration:', error)
  40             }
  41           }
  42         "
  43       >
  44         <option
  45           v-for="uiServerConfiguration in uiServerConfigurations"
  46           :value="uiServerConfiguration.index"
  47         >
  48           {{ uiServerConfiguration.configuration.host }}
  49         </option>
  50       </select>
  51     </Container>
  52     <Container id="buttons-container">
  53       <Button @click="startSimulator()">Start Simulator</Button>
  54       <Button @click="stopSimulator()">Stop Simulator</Button>
  55       <Button @click="$router.push({ name: 'add-charging-stations' })">
  56         Add Charging Stations
  57       </Button>
  58       <ReloadButton
  59         id="reload-button"
  60         :loading="state.loading"
  61         @click="loadChargingStations(() => (state.renderChargingStationsList = randomUUID()))"
  62       />
  63     </Container>
  64     <CSTable
  65       v-show="
  66         Array.isArray(app?.appContext.config.globalProperties.$chargingStations) &&
  67         app?.appContext.config.globalProperties.$chargingStations.length > 0
  68       "
  69       :key="state.renderChargingStationsList"
  70       :charging-stations="app?.appContext.config.globalProperties.$chargingStations"
  71     />
  72   </Container>
  73 </template>
  74
  75 <script setup lang="ts">
  76 import { getCurrentInstance, reactive } from 'vue'
  77 import { useToast } from 'vue-toast-notification'
  78 import CSTable from '@/components/charging-stations/CSTable.vue'
  79 import type { ResponsePayload, UIServerConfigurationSection } from '@/types'
  80 import Container from '@/components/Container.vue'
  81 import ReloadButton from '@/components/buttons/ReloadButton.vue'
  82 import Button from '@/components/buttons/Button.vue'
  83 import { getFromLocalStorage, setToLocalStorage } from '@/composables'
  84
  85 const randomUUID = (): `${string}-${string}-${string}-${string}-${string}` => {
  86   return crypto.randomUUID()
  87 }
  88
  89 const state = reactive({
  90   renderChargingStationsList: randomUUID(),
  91   loading: false,
  92   uiServerIndex: getFromLocalStorage<number>('uiServerConfigurationIndex', 0)
  93 })
  94
  95 const app = getCurrentInstance()
  96 const uiClient = app?.appContext.config.globalProperties.$uiClient
  97 const uiServerConfigurations: { configuration: UIServerConfigurationSection; index: number }[] =
  98   app?.appContext.config.globalProperties.$configuration.uiServer.map(
  99     (configuration: UIServerConfigurationSection, index: number) => ({
 100       configuration,
 101       index
 102     })
 103   )
 104
 105 const $toast = useToast()
 106
 107 const loadChargingStations = (renderCallback?: () => void): void => {
 108   if (state.loading === false) {
 109     state.loading = true
 110     uiClient
 111       .listChargingStations()
 112       .then((response: ResponsePayload) => {
 113         if (app != null) {
 114           app.appContext.config.globalProperties.$chargingStations = response.chargingStations
 115         }
 116       })
 117       .catch((error: Error) => {
 118         $toast.error('Error at fetching charging stations')
 119         console.error('Error at fetching charging stations:', error)
 120       })
 121       .finally(() => {
 122         if (renderCallback != null) {
 123           renderCallback()
 124         }
 125         state.loading = false
 126       })
 127   }
 128 }
 129
 130 const startSimulator = (): void => {
 131   uiClient
 132     .startSimulator()
 133     .then(() => {
 134       $toast.success('Simulator successfully started')
 135     })
 136     .catch((error: Error) => {
 137       $toast.error('Error at starting simulator')
 138       console.error('Error at starting simulator:', error)
 139     })
 140 }
 141 const stopSimulator = (): void => {
 142   uiClient
 143     .stopSimulator()
 144     .then(() => {
 145       if (app != null) {
 146         app.appContext.config.globalProperties.$chargingStations = []
 147       }
 148       $toast.success('Simulator successfully stopped')
 149     })
 150     .catch((error: Error) => {
 151       $toast.error('Error at stopping simulator')
 152       console.error('Error at stopping simulator:', error)
 153     })
 154 }
 155 </script>
 156
 157 <style>
 158 #charging-stations-container {
 159   height: fit-content;
 160   width: 100%;
 161   display: flex;
 162   flex-direction: column;
 163 }
 164
 165 #ui-server-container {
 166   display: flex;
 167   flex-direction: row;
 168 }
 169
 170 #ui-server-selector {
 171   width: 100%;
 172   text-align: center;
 173 }
 174
 175 #buttons-container {
 176   display: flex;
 177   flex-direction: row;
 178 }
 179
 180 #action-button {
 181   flex: none;
 182 }
 183
 184 #reload-button {
 185   flex: auto;
 186   color: white;
 187   background-color: blue;
 188   font-size: 1.5rem;
 189   font-weight: bold;
 190   align-items: center;
 191   justify-content: center;
 192 }
 193
 194 #reload-button:hover {
 195   background-color: rgb(0, 0, 225);
 196 }
 197
 198 #reload-button:active {
 199   background-color: red;
 200 }
 201
 202 #action {
 203   color: white;
 204   background-color: black;
 205   padding: 1%;
 206 }
 207 </style>