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