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
   7         id="reload-button"
   8         :loading="state.isLoading"
   9         @click="loadChargingStations(() => $router.go(0))"
  10       />
  11     </Container>
  12     <CSTable :charging-stations="app?.appContext.config.globalProperties.$chargingStations ?? []" />
  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(reloadCallback?: () => void): 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         if (reloadCallback != null) {
  47           reloadCallback()
  48         }
  49         state.isLoading = false
  50       })
  51   }
  52 }
  53
  54 function startSimulator(): void {
  55   uiClient.startSimulator()
  56 }
  57 function stopSimulator(): void {
  58   uiClient.stopSimulator()
  59 }
  60 </script>
  61
  62 <style>
  63 #charging-stations {
  64   height: fit-content;
  65   width: 100%;
  66   display: flex;
  67   flex-direction: column;
  68 }
  69
  70 #buttons-container {
  71   display: flex;
  72   flex-direction: row;
  73 }
  74
  75 #reload-button {
  76   flex: auto;
  77   color: white;
  78   background-color: blue;
  79   font-size: 1.5rem;
  80   font-weight: bold;
  81   align-items: center;
  82   justify-content: center;
  83 }
  84
  85 #reload-button:hover {
  86   background-color: rgb(0, 0, 225);
  87 }
  88
  89 #reload-button:active {
  90   background-color: red;
  91 }
  92
  93 #simulator-button {
  94   flex: auto;
  95 }
  96 </style>