ui/web/src/views/ChargingStationsView.vue

   1 <template>
   2   <Container id="charging-stations">
   3     <Button id="simulator-button" @click="startSimulator()">Start Simulator</Button>
   4     <Button id="simulator-button" @click="stopSimulator()">Stop Simulator</Button>
   5     <Container id="inputs-container">
   6       <input
   7         id="idtag-field"
   8         v-model="state.idTag"
   9         type="text"
  10         name="idtag-field"
  11         placeholder="RFID tag"
  12       />
  13       <ReloadButton id="reload-button" :loading="state.isLoading" @click="load()" />
  14     </Container>
  15     <CSTable :charging-stations="state.chargingStations" :id-tag="state.idTag" />
  16   </Container>
  17 </template>
  18
  19 <script setup lang="ts">
  20 import { onMounted, reactive } from 'vue'
  21 import CSTable from '@/components/charging-stations/CSTable.vue'
  22 import type { ChargingStationData } from '@/types'
  23 import Container from '@/components/Container.vue'
  24 import ReloadButton from '@/components/buttons/ReloadButton.vue'
  25 import { UIClient } from '@/composables/UIClient'
  26
  27 const UIClientInstance = UIClient.getInstance()
  28
  29 onMounted(() => {
  30   UIClientInstance.registerWSonOpenListener(load)
  31 })
  32
  33 type State = {
  34   isLoading: boolean
  35   chargingStations: ChargingStationData[]
  36   idTag: string
  37 }
  38
  39 const state: State = reactive({
  40   isLoading: false,
  41   chargingStations: [],
  42   idTag: ''
  43 })
  44
  45 async function load(): Promise<void> {
  46   if (state.isLoading === true) return
  47   state.isLoading = true
  48   const listChargingStationsPayload = await UIClientInstance.listChargingStations()
  49   state.chargingStations =
  50     listChargingStationsPayload.chargingStations as unknown as ChargingStationData[]
  51   state.isLoading = false
  52 }
  53
  54 function startSimulator(): void {
  55   UIClientInstance.startSimulator()
  56 }
  57 function stopSimulator(): void {
  58   UIClientInstance.stopSimulator()
  59 }
  60 </script>
  61
  62 <style>
  63 #charging-stations {
  64   height: fit-content;
  65   width: 100%;
  66   background-color: rgb(233, 227, 227);
  67   display: flex;
  68   flex-direction: column;
  69 }
  70
  71 #inputs-container {
  72   display: flex;
  73   justify-content: space-between;
  74 }
  75
  76 #reload-button {
  77   flex: auto;
  78   background-color: rgb(25, 118, 210);
  79   color: white;
  80   font-size: 35px;
  81   font-weight: bold;
  82 }
  83
  84 #reload-button:hover {
  85   background-color: rgb(10, 113, 195);
  86 }
  87
  88 #reload-button:active {
  89   background-color: rgb(255, 113, 195);
  90 }
  91
  92 #simulator-button {
  93   flex: auto;
  94 }
  95
  96 #idtag-field {
  97   flex: auto;
  98   text-align: center;
  99 }
 100 </style>