ui/web/src/views/ChargingStationsView.vue

   1 <template>
   2   <Container id="charging-stations">
   3     <Container id="buttons-container">
   4       <Button id="simulator-button" @click="startSimulator()">Start Simulator</Button>
   5       <Button id="simulator-button" @click="stopSimulator()">Stop Simulator</Button>
   6       <ReloadButton id="reload-button" :loading="state.isLoading" @click="loadChargingStations()" />
   7     </Container>
   8     <CSTable
   9       :charging-stations="
  10         getCurrentInstance()?.appContext.config.globalProperties.$chargingStations ?? []
  11       "
  12     />
  13   </Container>
  14 </template>
  15
  16 <script setup lang="ts">
  17 import { getCurrentInstance, reactive } from 'vue'
  18 import CSTable from '@/components/charging-stations/CSTable.vue'
  19 import type { ResponsePayload } from '@/types'
  20 import Container from '@/components/Container.vue'
  21 import ReloadButton from '@/components/buttons/ReloadButton.vue'
  22 import Button from '@/components/buttons/Button.vue'
  23
  24 const state = reactive({
  25   isLoading: false
  26 })
  27
  28 const app = getCurrentInstance()
  29 const uiClient = app?.appContext.config.globalProperties.$uiClient
  30
  31 function loadChargingStations(): void {
  32   if (state.isLoading === false) {
  33     state.isLoading = true
  34     uiClient
  35       .listChargingStations()
  36       .then((response: ResponsePayload) => {
  37         if (app != null) {
  38           app.appContext.config.globalProperties.$chargingStations = response.chargingStations
  39         }
  40       })
  41       .catch((error: Error) => {
  42         // TODO: add code for UI notifications or other error handling logic
  43         console.error('Error at fetching charging stations:', error)
  44       })
  45       .finally(() => {
  46         state.isLoading = false
  47       })
  48   }
  49 }
  50
  51 function startSimulator(): void {
  52   uiClient.startSimulator()
  53 }
  54 function stopSimulator(): void {
  55   uiClient.stopSimulator()
  56 }
  57 </script>
  58
  59 <style>
  60 #charging-stations {
  61   height: fit-content;
  62   width: 100%;
  63   display: flex;
  64   flex-direction: column;
  65 }
  66
  67 #buttons-container {
  68   display: flex;
  69   flex-direction: row;
  70 }
  71
  72 #reload-button {
  73   flex: auto;
  74   color: white;
  75   background-color: blue;
  76   font-size: 1.5rem;
  77   font-weight: bold;
  78   align-items: center;
  79   justify-content: center;
  80 }
  81
  82 #reload-button:hover {
  83   background-color: rgb(0, 0, 225);
  84 }
  85
  86 #reload-button:active {
  87   background-color: red;
  88 }
  89
  90 #simulator-button {
  91   flex: auto;
  92 }
  93 </style>