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