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