2 <Container id="charging-stations-container">
4 v-show="Array.isArray(uiServerConfigurations) && uiServerConfigurations.length > 1"
5 id="ui-server-container"
8 id="ui-server-selector"
9 v-model="state.uiServerIndex"
13 getFromLocalStorage<number>('uiServerConfigurationIndex', 0) !== state.uiServerIndex
15 app?.appContext.config.globalProperties.$uiClient.setConfiguration(
16 app?.appContext.config.globalProperties.$configuration.uiServer[state.uiServerIndex]
18 initializeWSEventListeners()
19 app?.appContext.config.globalProperties.$uiClient.registerWSEventListener(
22 setToLocalStorage<number>('uiServerConfigurationIndex', state.uiServerIndex)
24 $router.currentRoute.value.name !== 'charging-stations' &&
25 $router.push({ name: 'charging-stations' })
29 app?.appContext.config.globalProperties.$uiClient.registerWSEventListener(
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)
38 initializeWSEventListeners()
47 v-for="uiServerConfiguration in uiServerConfigurations"
48 :value="uiServerConfiguration.index"
50 {{ uiServerConfiguration.configuration.name ?? uiServerConfiguration.configuration.host }}
54 <Container id="buttons-container">
57 :key="state.renderSimulator"
58 :status="state.simulatorState?.started"
59 :on="() => startSimulator()"
60 :off="() => stopSimulator()"
62 state.simulatorState?.started === true
63 ? 'simulator-stop-button'
64 : 'simulator-start-button'
67 {{ state.simulatorState?.started === true ? 'Stop' : 'Start' }} Simulator
70 :id="'add-charging-stations'"
71 :key="state.renderAddChargingStations"
75 $router.push({ name: 'add-charging-stations' })
80 $router.push({ name: 'charging-stations' })
85 state.renderChargingStations = randomUUID()
93 :loading="state.loading"
94 @click="loadChargingStations(() => (state.renderChargingStations = randomUUID()))"
99 Array.isArray(app?.appContext.config.globalProperties.$chargingStations) &&
100 app.appContext.config.globalProperties.$chargingStations.length > 0
102 :key="state.renderChargingStations"
103 :charging-stations="app?.appContext.config.globalProperties.$chargingStations"
106 state.renderAddChargingStations = randomUUID()
107 state.renderChargingStations = randomUUID()
114 <script setup lang="ts">
115 import { getCurrentInstance, onMounted, ref } from 'vue'
116 import { useToast } from 'vue-toast-notification'
117 import CSTable from '@/components/charging-stations/CSTable.vue'
118 import type { ResponsePayload, UIServerConfigurationSection } from '@/types'
119 import Container from '@/components/Container.vue'
120 import ReloadButton from '@/components/buttons/ReloadButton.vue'
122 deleteFromLocalStorage,
127 } from '@/composables'
128 import ToggleButton from '@/components/buttons/ToggleButton.vue'
131 renderSimulator: `${string}-${string}-${string}-${string}-${string}`
132 renderAddChargingStations: `${string}-${string}-${string}-${string}-${string}`
133 renderChargingStations: `${string}-${string}-${string}-${string}-${string}`
135 simulatorState?: { started: boolean }
136 uiServerIndex: number
138 renderSimulator: randomUUID(),
139 renderAddChargingStations: randomUUID(),
140 renderChargingStations: randomUUID(),
142 uiServerIndex: getFromLocalStorage<number>('uiServerConfigurationIndex', 0)
145 const app = getCurrentInstance()
147 const clearToggleButtons = (): void => {
148 for (const key in getLocalStorage()) {
149 if (key.includes('toggle-button')) {
150 deleteFromLocalStorage(key)
155 const clearChargingStations = (): void => {
156 app!.appContext.config.globalProperties.$chargingStations = []
157 state.value.renderChargingStations = randomUUID()
160 const uiClient = app?.appContext.config.globalProperties.$uiClient
162 const getSimulatorState = (): void => {
165 .then((response: ResponsePayload) => {
166 state.value.simulatorState = response.state as { started: boolean }
168 .catch((error: Error) => {
169 $toast.error('Error at fetching simulator state')
170 console.error('Error at fetching simulator state:', error)
173 state.value.renderSimulator = randomUUID()
177 const initializeWSEventListeners = () => {
178 app?.appContext.config.globalProperties.$uiClient.registerWSEventListener('open', () => {
182 .then((response: ResponsePayload) => {
184 app.appContext.config.globalProperties.$templates = response.templates
187 .catch((error: Error) => {
189 app.appContext.config.globalProperties.$templates = []
191 $toast.error('Error at fetching charging station templates')
192 console.error('Error at fetching charging station templates:', error)
195 state.value.renderAddChargingStations = randomUUID()
197 loadChargingStations(() => {
198 state.value.renderChargingStations = randomUUID()
201 app?.appContext.config.globalProperties.$uiClient.registerWSEventListener(
203 clearChargingStations
205 app?.appContext.config.globalProperties.$uiClient.registerWSEventListener(
207 clearChargingStations
212 initializeWSEventListeners()
215 const uiServerConfigurations: { configuration: UIServerConfigurationSection; index: number }[] =
216 app?.appContext.config.globalProperties.$configuration.uiServer.map(
217 (configuration: UIServerConfigurationSection, index: number) => ({
223 const $toast = useToast()
225 const loadChargingStations = (renderCallback?: () => void): void => {
226 if (state.value.loading === false) {
227 state.value.loading = true
229 .listChargingStations()
230 .then((response: ResponsePayload) => {
232 app.appContext.config.globalProperties.$chargingStations = response.chargingStations
235 .catch((error: Error) => {
237 app.appContext.config.globalProperties.$chargingStations = []
239 $toast.error('Error at fetching charging stations')
240 console.error('Error at fetching charging stations:', error)
243 if (renderCallback != null) {
246 state.value.loading = false
251 const startSimulator = (): void => {
255 $toast.success('Simulator successfully started')
257 .catch((error: Error) => {
258 $toast.error('Error at starting simulator')
259 console.error('Error at starting simulator:', error)
265 const stopSimulator = (): void => {
270 app.appContext.config.globalProperties.$chargingStations = []
272 $toast.success('Simulator successfully stopped')
274 .catch((error: Error) => {
275 $toast.error('Error at stopping simulator')
276 console.error('Error at stopping simulator:', error)
285 #charging-stations-container {
289 flex-direction: column;
292 #ui-server-container {
297 #ui-server-selector {
307 .simulator-start-button {
309 background-color: green;
312 .simulator-stop-button {
314 background-color: red;
323 background-color: blue;
328 #reload-button:hover {
329 background-color: rgb(0, 0, 225);
332 #reload-button:active {
333 background-color: darkblue;
338 background-color: black;