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> |
57c0ba05 JB |
8 | <CSTable |
9 | :charging-stations=" | |
32333395 | 10 | getCurrentInstance()?.appContext.config.globalProperties.$chargingStations ?? [] |
57c0ba05 | 11 | " |
57c0ba05 | 12 | /> |
32de5a57 LM |
13 | </Container> |
14 | </template> | |
15 | ||
16 | <script setup lang="ts"> | |
57c0ba05 | 17 | import { getCurrentInstance, reactive } from 'vue' |
66a7748d | 18 | import CSTable from '@/components/charging-stations/CSTable.vue' |
57c0ba05 | 19 | import type { ResponsePayload } from '@/types' |
66a7748d JB |
20 | import Container from '@/components/Container.vue' |
21 | import ReloadButton from '@/components/buttons/ReloadButton.vue' | |
13c19b7b | 22 | import Button from '@/components/buttons/Button.vue' |
32de5a57 | 23 | |
57c0ba05 | 24 | const state = reactive({ |
c317ae3e | 25 | isLoading: false |
66a7748d | 26 | }) |
32de5a57 | 27 | |
57c0ba05 JB |
28 | const app = getCurrentInstance() |
29 | const uiClient = app?.appContext.config.globalProperties.$uiClient | |
30 | ||
31 | function loadChargingStations(): void { | |
2113b3c6 JB |
32 | if (state.isLoading === false) { |
33 | state.isLoading = true | |
57c0ba05 JB |
34 | uiClient |
35 | .listChargingStations() | |
36 | .then((response: ResponsePayload) => { | |
37 | if (app != null) { | |
38 | app.appContext.config.globalProperties.$chargingStations = response.chargingStations | |
39 | } | |
40 | }) | |
41 | .catch((error: Error) => { | |
c317ae3e | 42 | // TODO: add code for UI notifications or other error handling logic |
57c0ba05 JB |
43 | console.error('Error at fetching charging stations:', error) |
44 | }) | |
45 | .finally(() => { | |
46 | state.isLoading = false | |
47 | }) | |
2113b3c6 | 48 | } |
32de5a57 | 49 | } |
5a010bf0 JB |
50 | |
51 | function startSimulator(): void { | |
57c0ba05 | 52 | uiClient.startSimulator() |
5a010bf0 JB |
53 | } |
54 | function stopSimulator(): void { | |
57c0ba05 | 55 | uiClient.stopSimulator() |
5a010bf0 | 56 | } |
32de5a57 LM |
57 | </script> |
58 | ||
59 | <style> | |
60 | #charging-stations { | |
1d41bc6b | 61 | height: fit-content; |
32de5a57 | 62 | width: 100%; |
5a010bf0 | 63 | display: flex; |
32de5a57 | 64 | flex-direction: column; |
5a010bf0 JB |
65 | } |
66 | ||
13c19b7b JB |
67 | #buttons-container { |
68 | display: flex; | |
69 | flex-direction: row; | |
70 | } | |
71 | ||
32de5a57 | 72 | #reload-button { |
5a010bf0 | 73 | flex: auto; |
32de5a57 | 74 | color: white; |
9dc8b66f | 75 | background-color: blue; |
13c19b7b | 76 | font-size: 1.5rem; |
32de5a57 | 77 | font-weight: bold; |
aee67dee JB |
78 | align-items: center; |
79 | justify-content: center; | |
32de5a57 LM |
80 | } |
81 | ||
82 | #reload-button:hover { | |
9dc8b66f | 83 | background-color: rgb(0, 0, 225); |
32de5a57 LM |
84 | } |
85 | ||
86 | #reload-button:active { | |
9dc8b66f | 87 | background-color: red; |
32de5a57 LM |
88 | } |
89 | ||
5a010bf0 JB |
90 | #simulator-button { |
91 | flex: auto; | |
32de5a57 | 92 | } |
32de5a57 | 93 | </style> |