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> | |
57c0ba05 | 6 | <ReloadButton id="reload-button" :loading="state.isLoading" @click="loadChargingStations()" /> |
13c19b7b | 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> |
57c0ba05 JB |
17 | <CSTable |
18 | :charging-stations=" | |
19 | getCurrentInstance()?.appContext.config.globalProperties.$chargingStations | |
20 | " | |
21 | :id-tag="state.idTag" | |
22 | /> | |
32de5a57 LM |
23 | </Container> |
24 | </template> | |
25 | ||
26 | <script setup lang="ts"> | |
57c0ba05 | 27 | import { getCurrentInstance, reactive } from 'vue' |
66a7748d | 28 | import CSTable from '@/components/charging-stations/CSTable.vue' |
57c0ba05 | 29 | import type { ResponsePayload } from '@/types' |
66a7748d JB |
30 | import Container from '@/components/Container.vue' |
31 | import ReloadButton from '@/components/buttons/ReloadButton.vue' | |
13c19b7b | 32 | import Button from '@/components/buttons/Button.vue' |
32de5a57 | 33 | |
57c0ba05 | 34 | const state = reactive({ |
32de5a57 | 35 | isLoading: false, |
a974c8e4 | 36 | idTag: '' |
66a7748d | 37 | }) |
32de5a57 | 38 | |
57c0ba05 JB |
39 | const app = getCurrentInstance() |
40 | const uiClient = app?.appContext.config.globalProperties.$uiClient | |
41 | ||
42 | function loadChargingStations(): void { | |
2113b3c6 JB |
43 | if (state.isLoading === false) { |
44 | state.isLoading = true | |
57c0ba05 JB |
45 | uiClient |
46 | .listChargingStations() | |
47 | .then((response: ResponsePayload) => { | |
48 | if (app != null) { | |
49 | app.appContext.config.globalProperties.$chargingStations = response.chargingStations | |
50 | } | |
51 | }) | |
52 | .catch((error: Error) => { | |
53 | console.error('Error at fetching charging stations:', error) | |
54 | }) | |
55 | .finally(() => { | |
56 | state.isLoading = false | |
57 | }) | |
2113b3c6 | 58 | } |
32de5a57 | 59 | } |
5a010bf0 JB |
60 | |
61 | function startSimulator(): void { | |
57c0ba05 | 62 | uiClient.startSimulator() |
5a010bf0 JB |
63 | } |
64 | function stopSimulator(): void { | |
57c0ba05 | 65 | uiClient.stopSimulator() |
5a010bf0 | 66 | } |
32de5a57 LM |
67 | </script> |
68 | ||
69 | <style> | |
70 | #charging-stations { | |
1d41bc6b | 71 | height: fit-content; |
32de5a57 | 72 | width: 100%; |
5a010bf0 | 73 | display: flex; |
32de5a57 | 74 | flex-direction: column; |
5a010bf0 JB |
75 | } |
76 | ||
13c19b7b JB |
77 | #buttons-container { |
78 | display: flex; | |
79 | flex-direction: row; | |
80 | } | |
81 | ||
5a010bf0 JB |
82 | #inputs-container { |
83 | display: flex; | |
e2aa9605 | 84 | flex-direction: row; |
32de5a57 LM |
85 | } |
86 | ||
87 | #reload-button { | |
5a010bf0 | 88 | flex: auto; |
32de5a57 | 89 | color: white; |
9dc8b66f | 90 | background-color: blue; |
13c19b7b | 91 | font-size: 1.5rem; |
32de5a57 | 92 | font-weight: bold; |
aee67dee JB |
93 | align-items: center; |
94 | justify-content: center; | |
32de5a57 LM |
95 | } |
96 | ||
97 | #reload-button:hover { | |
9dc8b66f | 98 | background-color: rgb(0, 0, 225); |
32de5a57 LM |
99 | } |
100 | ||
101 | #reload-button:active { | |
9dc8b66f | 102 | background-color: red; |
32de5a57 LM |
103 | } |
104 | ||
5a010bf0 JB |
105 | #simulator-button { |
106 | flex: auto; | |
32de5a57 LM |
107 | } |
108 | ||
5a010bf0 JB |
109 | #idtag-field { |
110 | flex: auto; | |
13c19b7b | 111 | font-size: 1.5rem; |
1d41bc6b | 112 | text-align: center; |
32de5a57 LM |
113 | } |
114 | </style> |