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