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     <Container id="inputs-container">
   9       <input
  10         id="idtag-field"
  11         v-model="state.idTag"
  12         type="text"
  13         name="idtag-field"
  14         placeholder="RFID tag"
  15       />
  16     </Container>
  17     <CSTable
  18       :charging-stations="
  19         getCurrentInstance()?.appContext.config.globalProperties.$chargingStations ?? []
  20       "
  21       :id-tag="state.idTag"
  22     />
  23   </Container>
  24 </template>
  25
  26 <script setup lang="ts">
  27 import { getCurrentInstance, reactive } from 'vue'
  28 import CSTable from '@/components/charging-stations/CSTable.vue'
  29 import type { ResponsePayload } from '@/types'
  30 import Container from '@/components/Container.vue'
  31 import ReloadButton from '@/components/buttons/ReloadButton.vue'
  32 import Button from '@/components/buttons/Button.vue'
  33
  34 const state = reactive({
  35   isLoading: false,
  36   idTag: ''
  37 })
  38
  39 const app = getCurrentInstance()
  40 const uiClient = app?.appContext.config.globalProperties.$uiClient
  41
  42 function loadChargingStations(): void {
  43   if (state.isLoading === false) {
  44     state.isLoading = true
  45     uiClient
  46       .listChargingStations()
  47       .then((response: ResponsePayload) => {
  48         if (app != null) {
  49           app.appContext.config.globalProperties.$chargingStations = response.chargingStations
  50         }
  51       })
  52       .catch((error: Error) => {
  53         console.error('Error at fetching charging stations:', error)
  54       })
  55       .finally(() => {
  56         state.isLoading = false
  57       })
  58   }
  59 }
  60
  61 function startSimulator(): void {
  62   uiClient.startSimulator()
  63 }
  64 function stopSimulator(): void {
  65   uiClient.stopSimulator()
  66 }
  67 </script>
  68
  69 <style>
  70 #charging-stations {
  71   height: fit-content;
  72   width: 100%;
  73   display: flex;
  74   flex-direction: column;
  75 }
  76
  77 #buttons-container {
  78   display: flex;
  79   flex-direction: row;
  80 }
  81
  82 #inputs-container {
  83   display: flex;
  84   flex-direction: row;
  85 }
  86
  87 #reload-button {
  88   flex: auto;
  89   color: white;
  90   background-color: blue;
  91   font-size: 1.5rem;
  92   font-weight: bold;
  93   align-items: center;
  94   justify-content: center;
  95 }
  96
  97 #reload-button:hover {
  98   background-color: rgb(0, 0, 225);
  99 }
 100
 101 #reload-button:active {
 102   background-color: red;
 103 }
 104
 105 #simulator-button {
 106   flex: auto;
 107 }
 108
 109 #idtag-field {
 110   flex: auto;
 111   font-size: 1.5rem;
 112   text-align: center;
 113 }
 114 </style>