ui/web/src/views/ChargingStationsView.vue

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