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.isLoading"
  47         @click="loadChargingStations(() => $router.go(0))"
  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       :charging-stations="app?.appContext.config.globalProperties.$chargingStations"
  56     />
  57   </Container>
  58 </template>
  59
  60 <script setup lang="ts">
  61 import { getCurrentInstance, reactive } from 'vue'
  62 import { useToast } from 'vue-toast-notification'
  63 import CSTable from '@/components/charging-stations/CSTable.vue'
  64 import type { ResponsePayload, UIServerConfigurationSection } from '@/types'
  65 import Container from '@/components/Container.vue'
  66 import ReloadButton from '@/components/buttons/ReloadButton.vue'
  67 import Button from '@/components/buttons/Button.vue'
  68 import { getFromLocalStorage, setToLocalStorage } from '@/composables'
  69
  70 const state = reactive({
  71   isLoading: false,
  72   uiServerIndex: getFromLocalStorage<number>('uiServerConfigurationIndex', 0)
  73 })
  74
  75 const app = getCurrentInstance()
  76 const uiClient = app?.appContext.config.globalProperties.$uiClient
  77 const uiServerConfigurations: { configuration: UIServerConfigurationSection; index: number }[] =
  78   app?.appContext.config.globalProperties.$configuration.uiServer.map(
  79     (configuration: UIServerConfigurationSection, index: number) => ({
  80       configuration,
  81       index
  82     })
  83   )
  84
  85 const $toast = useToast()
  86
  87 const loadChargingStations = (reloadCallback?: () => void): void => {
  88   if (state.isLoading === false) {
  89     state.isLoading = true
  90     uiClient
  91       .listChargingStations()
  92       .then((response: ResponsePayload) => {
  93         if (app != null) {
  94           app.appContext.config.globalProperties.$chargingStations = response.chargingStations
  95         }
  96       })
  97       .catch((error: Error) => {
  98         $toast.error('Error at fetching charging stations')
  99         console.error('Error at fetching charging stations:', error)
 100       })
 101       .finally(() => {
 102         if (reloadCallback != null) {
 103           reloadCallback()
 104         }
 105         state.isLoading = false
 106       })
 107   }
 108 }
 109
 110 const startSimulator = (): void => {
 111   uiClient
 112     .startSimulator()
 113     .then(() => {
 114       $toast.success('Simulator successfully started')
 115     })
 116     .catch((error: Error) => {
 117       $toast.error('Error at starting simulator')
 118       console.error('Error at starting simulator:', error)
 119     })
 120 }
 121 const stopSimulator = (): void => {
 122   uiClient
 123     .stopSimulator()
 124     .then(() => {
 125       if (app != null) {
 126         app.appContext.config.globalProperties.$chargingStations = []
 127       }
 128       $toast.success('Simulator successfully stopped')
 129     })
 130     .catch((error: Error) => {
 131       $toast.error('Error at stopping simulator')
 132       console.error('Error at stopping simulator:', error)
 133     })
 134 }
 135 </script>
 136
 137 <style>
 138 #charging-stations-container {
 139   height: fit-content;
 140   width: 100%;
 141   display: flex;
 142   flex-direction: column;
 143 }
 144
 145 #ui-server-container {
 146   display: flex;
 147   flex-direction: row;
 148 }
 149
 150 #ui-server-selector {
 151   width: 100%;
 152   text-align: center;
 153 }
 154
 155 #buttons-container {
 156   display: flex;
 157   flex-direction: row;
 158 }
 159
 160 #action-button {
 161   flex: none;
 162 }
 163
 164 #reload-button {
 165   flex: auto;
 166   color: white;
 167   background-color: blue;
 168   font-size: 1.5rem;
 169   font-weight: bold;
 170   align-items: center;
 171   justify-content: center;
 172 }
 173
 174 #reload-button:hover {
 175   background-color: rgb(0, 0, 225);
 176 }
 177
 178 #reload-button:active {
 179   background-color: red;
 180 }
 181
 182 #action {
 183   color: white;
 184   background-color: black;
 185   padding: 1%;
 186 }
 187 </style>