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