fix(ui): ensure opened actions are closed at UI server switch
[e-mobility-charging-stations-simulator.git] / ui / web / src / views / ChargingStationsView.vue
1 <template>
2 <Container id="charging-stations-container">
3 <Container
4 v-show="Array.isArray(uiServerConfigurations) && uiServerConfigurations.length > 1"
5 id="ui-server-container"
6 >
7 <select
8 id="ui-server-selector"
9 v-model="state.uiServerIndex"
10 @change="
11 () => {
12 if (
13 getFromLocalStorage<number>('uiServerConfigurationIndex', 0) !== state.uiServerIndex
14 ) {
15 app?.appContext.config.globalProperties.$uiClient.setConfiguration(
16 app?.appContext.config.globalProperties.$configuration.uiServer[state.uiServerIndex]
17 )
18 initializeWSEventListeners()
19 app?.appContext.config.globalProperties.$uiClient.registerWSEventListener(
20 'open',
21 () => {
22 setToLocalStorage<number>('uiServerConfigurationIndex', state.uiServerIndex)
23 delete app?.appContext.config.globalProperties.$templates
24 $router.currentRoute.value.name !== 'charging-stations' &&
25 $router.push({ name: 'charging-stations' })
26 },
27 { once: true }
28 )
29 app?.appContext.config.globalProperties.$uiClient.registerWSEventListener(
30 'error',
31 () => {
32 state.uiServerIndex = getFromLocalStorage<number>('uiServerConfigurationIndex', 0)
33 app?.appContext.config.globalProperties.$uiClient.setConfiguration(
34 app?.appContext.config.globalProperties.$configuration.uiServer[
35 getFromLocalStorage<number>('uiServerConfigurationIndex', 0)
36 ]
37 )
38 initializeWSEventListeners()
39 },
40 { once: true }
41 )
42 }
43 }
44 "
45 >
46 <option
47 v-for="uiServerConfiguration in uiServerConfigurations"
48 :value="uiServerConfiguration.index"
49 >
50 {{ uiServerConfiguration.configuration.name ?? uiServerConfiguration.configuration.host }}
51 </option>
52 </select>
53 </Container>
54 <Container id="buttons-container">
55 <Button @click="startSimulator()">Start Simulator</Button>
56 <Button @click="stopSimulator()">Stop Simulator</Button>
57 <Button @click="$router.push({ name: 'add-charging-stations' })">
58 Add Charging Stations
59 </Button>
60 <ReloadButton
61 id="reload-button"
62 :loading="state.loading"
63 @click="loadChargingStations(() => (state.renderChargingStationsList = randomUUID()))"
64 />
65 </Container>
66 <CSTable
67 v-show="
68 Array.isArray(app?.appContext.config.globalProperties.$chargingStations) &&
69 app?.appContext.config.globalProperties.$chargingStations.length > 0
70 "
71 :key="state.renderChargingStationsList"
72 :charging-stations="app?.appContext.config.globalProperties.$chargingStations"
73 />
74 </Container>
75 </template>
76
77 <script setup lang="ts">
78 import { getCurrentInstance, onMounted, reactive } from 'vue'
79 import { useToast } from 'vue-toast-notification'
80 import CSTable from '@/components/charging-stations/CSTable.vue'
81 import type { ResponsePayload, UIServerConfigurationSection } from '@/types'
82 import Container from '@/components/Container.vue'
83 import ReloadButton from '@/components/buttons/ReloadButton.vue'
84 import Button from '@/components/buttons/Button.vue'
85 import { getFromLocalStorage, setToLocalStorage } from '@/composables'
86
87 const randomUUID = (): `${string}-${string}-${string}-${string}-${string}` => {
88 return crypto.randomUUID()
89 }
90
91 const app = getCurrentInstance()
92
93 const initializeWSEventListeners = () => {
94 app?.appContext.config.globalProperties.$uiClient.registerWSEventListener('open', () => {
95 loadChargingStations(() => (state.renderChargingStationsList = randomUUID()))
96 })
97 app?.appContext.config.globalProperties.$uiClient.registerWSEventListener('error', () => {
98 app.appContext.config.globalProperties.$chargingStations = []
99 state.renderChargingStationsList = randomUUID()
100 })
101 app?.appContext.config.globalProperties.$uiClient.registerWSEventListener('close', () => {
102 app.appContext.config.globalProperties.$chargingStations = []
103 state.renderChargingStationsList = randomUUID()
104 })
105 }
106
107 onMounted(() => {
108 initializeWSEventListeners()
109 })
110
111 const state = reactive({
112 renderChargingStationsList: randomUUID(),
113 loading: false,
114 uiServerIndex: getFromLocalStorage<number>('uiServerConfigurationIndex', 0)
115 })
116
117 const uiClient = app?.appContext.config.globalProperties.$uiClient
118 const uiServerConfigurations: { configuration: UIServerConfigurationSection; index: number }[] =
119 app?.appContext.config.globalProperties.$configuration.uiServer.map(
120 (configuration: UIServerConfigurationSection, index: number) => ({
121 configuration,
122 index
123 })
124 )
125
126 const $toast = useToast()
127
128 const loadChargingStations = (renderCallback?: () => void): void => {
129 if (state.loading === false) {
130 state.loading = true
131 uiClient
132 .listChargingStations()
133 .then((response: ResponsePayload) => {
134 if (app != null) {
135 app.appContext.config.globalProperties.$chargingStations = response.chargingStations
136 }
137 })
138 .catch((error: Error) => {
139 if (app != null) {
140 app.appContext.config.globalProperties.$chargingStations = []
141 }
142 $toast.error('Error at fetching charging stations')
143 console.error('Error at fetching charging stations:', error)
144 })
145 .finally(() => {
146 if (renderCallback != null) {
147 renderCallback()
148 }
149 state.loading = false
150 })
151 }
152 }
153
154 const startSimulator = (): void => {
155 uiClient
156 .startSimulator()
157 .then(() => {
158 $toast.success('Simulator successfully started')
159 })
160 .catch((error: Error) => {
161 $toast.error('Error at starting simulator')
162 console.error('Error at starting simulator:', error)
163 })
164 }
165 const stopSimulator = (): void => {
166 uiClient
167 .stopSimulator()
168 .then(() => {
169 if (app != null) {
170 app.appContext.config.globalProperties.$chargingStations = []
171 }
172 $toast.success('Simulator successfully stopped')
173 })
174 .catch((error: Error) => {
175 $toast.error('Error at stopping simulator')
176 console.error('Error at stopping simulator:', error)
177 })
178 }
179 </script>
180
181 <style>
182 #charging-stations-container {
183 height: fit-content;
184 width: 100%;
185 display: flex;
186 flex-direction: column;
187 }
188
189 #ui-server-container {
190 display: flex;
191 flex-direction: row;
192 }
193
194 #ui-server-selector {
195 width: 100%;
196 text-align: center;
197 }
198
199 #buttons-container {
200 display: flex;
201 flex-direction: row;
202 }
203
204 #action-button {
205 flex: none;
206 }
207
208 #reload-button {
209 flex: auto;
210 color: white;
211 background-color: blue;
212 font-size: 1.5rem;
213 font-weight: bold;
214 align-items: center;
215 justify-content: center;
216 }
217
218 #reload-button:hover {
219 background-color: rgb(0, 0, 225);
220 }
221
222 #reload-button:active {
223 background-color: red;
224 }
225
226 #action {
227 color: white;
228 background-color: black;
229 padding: 1%;
230 }
231 </style>