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: 100%;
  65   width: 100%;
  66   padding: 30px;
  67   background-color: rgb(233, 227, 227);
  68   display: flex;
  69   flex-direction: column;
  70   gap: 0.5%;
  71 }
  72
  73 #inputs-container {
  74   display: flex;
  75   justify-content: space-between;
  76 }
  77
  78 #reload-button {
  79   flex: auto;
  80   padding: 5px 15px;
  81   background-color: rgb(25, 118, 210);
  82   border-radius: 5px;
  83   color: white;
  84   font-size: 35px;
  85   font-weight: bold;
  86 }
  87
  88 #reload-button:hover {
  89   background-color: rgb(10, 113, 195);
  90 }
  91
  92 #reload-button:active {
  93   background-color: rgb(255, 113, 195);
  94 }
  95
  96 #simulator-button {
  97   flex: auto;
  98 }
  99
 100 #idtag-field {
 101   flex: auto;
 102 }
 103 </style>