ui/web/src/views/ChargingStationsView.vue

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