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