Commit | Line | Data |
---|---|---|
32de5a57 LM |
1 | <template> |
2 | <Container id="charging-stations"> | |
5a010bf0 JB |
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"> | |
32de5a57 | 6 | <input |
5a010bf0 | 7 | id="idtag-field" |
01ff4231 | 8 | v-model="state.idTag" |
32de5a57 | 9 | type="text" |
5a010bf0 JB |
10 | name="idtag-field" |
11 | placeholder="RFID tag" | |
32de5a57 LM |
12 | /> |
13 | <ReloadButton id="reload-button" :loading="state.isLoading" @click="load()" /> | |
14 | </Container> | |
01ff4231 | 15 | <CSTable :charging-stations="state.chargingStations" :id-tag="state.idTag" /> |
32de5a57 LM |
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'; | |
f27eb751 JB |
25 | import UIClient from '@/composables/UIClient'; |
26 | import type { ChargingStationData } from '@/types/ChargingStationType'; | |
32de5a57 | 27 | |
f27eb751 | 28 | const UIClientInstance = UIClient.getInstance(); |
32de5a57 LM |
29 | |
30 | onMounted(() => { | |
16fe3949 | 31 | UIClientInstance.registerWSonOpenListener(load); |
32de5a57 LM |
32 | }); |
33 | ||
34 | type State = { | |
35 | isLoading: boolean; | |
5e3cb728 | 36 | chargingStations: ChargingStationData[]; |
5a010bf0 | 37 | idTag: string; |
32de5a57 LM |
38 | }; |
39 | ||
40 | const state: State = reactive({ | |
41 | isLoading: false, | |
5e3cb728 | 42 | chargingStations: [], |
5a010bf0 | 43 | idTag: '', |
32de5a57 LM |
44 | }); |
45 | ||
46 | async function load(): Promise<void> { | |
47 | if (state.isLoading === true) return; | |
48 | state.isLoading = true; | |
5e3cb728 JB |
49 | const listChargingStationsPayload = await UIClientInstance.listChargingStations(); |
50 | state.chargingStations = | |
51 | listChargingStationsPayload.chargingStations as unknown as ChargingStationData[]; | |
32de5a57 LM |
52 | state.isLoading = false; |
53 | } | |
5a010bf0 JB |
54 | |
55 | function startSimulator(): void { | |
56 | UIClientInstance.startSimulator(); | |
57 | } | |
58 | function stopSimulator(): void { | |
59 | UIClientInstance.stopSimulator(); | |
60 | } | |
32de5a57 LM |
61 | </script> |
62 | ||
63 | <style> | |
64 | #charging-stations { | |
65 | height: 100%; | |
66 | width: 100%; | |
67 | padding: 30px; | |
68 | background-color: rgb(233, 227, 227); | |
5a010bf0 | 69 | display: flex; |
32de5a57 | 70 | flex-direction: column; |
5a010bf0 JB |
71 | gap: 0.5%; |
72 | } | |
73 | ||
74 | #inputs-container { | |
75 | display: flex; | |
76 | justify-content: space-between; | |
32de5a57 LM |
77 | } |
78 | ||
79 | #reload-button { | |
5a010bf0 | 80 | flex: auto; |
aeb31e77 | 81 | padding: 5px 15px; |
32de5a57 LM |
82 | background-color: rgb(25, 118, 210); |
83 | border-radius: 5px; | |
32de5a57 LM |
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 | ||
5a010bf0 JB |
97 | #simulator-button { |
98 | flex: auto; | |
32de5a57 LM |
99 | } |
100 | ||
5a010bf0 JB |
101 | #idtag-field { |
102 | flex: auto; | |
32de5a57 LM |
103 | } |
104 | </style> |