Commit | Line | Data |
---|---|---|
32de5a57 LM |
1 | <template> |
2 | <Container id="charging-stations"> | |
13c19b7b JB |
3 | <Container id="buttons-container"> |
4 | <Button id="simulator-button" @click="startSimulator()">Start Simulator</Button> | |
5 | <Button id="simulator-button" @click="stopSimulator()">Stop Simulator</Button> | |
6 | <ReloadButton id="reload-button" :loading="state.isLoading" @click="load()" /> | |
7 | </Container> | |
5a010bf0 | 8 | <Container id="inputs-container"> |
32de5a57 | 9 | <input |
5a010bf0 | 10 | id="idtag-field" |
01ff4231 | 11 | v-model="state.idTag" |
32de5a57 | 12 | type="text" |
5a010bf0 JB |
13 | name="idtag-field" |
14 | placeholder="RFID tag" | |
32de5a57 | 15 | /> |
32de5a57 | 16 | </Container> |
01ff4231 | 17 | <CSTable :charging-stations="state.chargingStations" :id-tag="state.idTag" /> |
32de5a57 LM |
18 | </Container> |
19 | </template> | |
20 | ||
21 | <script setup lang="ts"> | |
9d76f5ec | 22 | import { getCurrentInstance, onMounted, reactive } from 'vue' |
66a7748d JB |
23 | import CSTable from '@/components/charging-stations/CSTable.vue' |
24 | import type { ChargingStationData } from '@/types' | |
25 | import Container from '@/components/Container.vue' | |
26 | import ReloadButton from '@/components/buttons/ReloadButton.vue' | |
13c19b7b | 27 | import Button from '@/components/buttons/Button.vue' |
32de5a57 | 28 | |
9d76f5ec | 29 | const UIClient = getCurrentInstance()?.appContext.config.globalProperties.$UIClient |
32de5a57 LM |
30 | |
31 | onMounted(() => { | |
9d76f5ec | 32 | UIClient.registerWSonOpenListener(load) |
66a7748d | 33 | }) |
32de5a57 LM |
34 | |
35 | type State = { | |
66a7748d JB |
36 | isLoading: boolean |
37 | chargingStations: ChargingStationData[] | |
38 | idTag: string | |
39 | } | |
32de5a57 LM |
40 | |
41 | const state: State = reactive({ | |
42 | isLoading: false, | |
5e3cb728 | 43 | chargingStations: [], |
a974c8e4 | 44 | idTag: '' |
66a7748d | 45 | }) |
32de5a57 LM |
46 | |
47 | async function load(): Promise<void> { | |
2113b3c6 JB |
48 | if (state.isLoading === false) { |
49 | state.isLoading = true | |
50 | state.chargingStations = (await UIClient.listChargingStations()) | |
51 | .chargingStations as ChargingStationData[] | |
52 | state.isLoading = false | |
53 | } | |
32de5a57 | 54 | } |
5a010bf0 JB |
55 | |
56 | function startSimulator(): void { | |
9d76f5ec | 57 | UIClient.startSimulator() |
5a010bf0 JB |
58 | } |
59 | function stopSimulator(): void { | |
9d76f5ec | 60 | UIClient.stopSimulator() |
5a010bf0 | 61 | } |
32de5a57 LM |
62 | </script> |
63 | ||
64 | <style> | |
65 | #charging-stations { | |
1d41bc6b | 66 | height: fit-content; |
32de5a57 | 67 | width: 100%; |
5a010bf0 | 68 | display: flex; |
32de5a57 | 69 | flex-direction: column; |
5a010bf0 JB |
70 | } |
71 | ||
13c19b7b JB |
72 | #buttons-container { |
73 | display: flex; | |
74 | flex-direction: row; | |
75 | } | |
76 | ||
5a010bf0 JB |
77 | #inputs-container { |
78 | display: flex; | |
e2aa9605 | 79 | flex-direction: row; |
32de5a57 LM |
80 | } |
81 | ||
82 | #reload-button { | |
5a010bf0 | 83 | flex: auto; |
32de5a57 | 84 | color: white; |
9dc8b66f | 85 | background-color: blue; |
13c19b7b | 86 | font-size: 1.5rem; |
32de5a57 | 87 | font-weight: bold; |
13c19b7b | 88 | text-align: center; |
32de5a57 LM |
89 | } |
90 | ||
91 | #reload-button:hover { | |
9dc8b66f | 92 | background-color: rgb(0, 0, 225); |
32de5a57 LM |
93 | } |
94 | ||
95 | #reload-button:active { | |
9dc8b66f | 96 | background-color: red; |
32de5a57 LM |
97 | } |
98 | ||
5a010bf0 JB |
99 | #simulator-button { |
100 | flex: auto; | |
32de5a57 LM |
101 | } |
102 | ||
5a010bf0 JB |
103 | #idtag-field { |
104 | flex: auto; | |
13c19b7b | 105 | font-size: 1.5rem; |
1d41bc6b | 106 | text-align: center; |
32de5a57 LM |
107 | } |
108 | </style> |