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)
23 $router.currentRoute.value.name !== 'charging-stations' &&
24 $router.push({ name: 'charging-stations' })
28 app?.appContext.config.globalProperties.$uiClient.registerWSEventListener(
31 state.uiServerIndex = getFromLocalStorage<number>('uiServerConfigurationIndex', 0)
32 app?.appContext.config.globalProperties.$uiClient.setConfiguration(
33 app?.appContext.config.globalProperties.$configuration.uiServer[
34 getFromLocalStorage<number>('uiServerConfigurationIndex', 0)
37 initializeWSEventListeners()
46 v-for="uiServerConfiguration in uiServerConfigurations"
47 :value="uiServerConfiguration.index"
49 {{ uiServerConfiguration.configuration.name ?? uiServerConfiguration.configuration.host }}
53 <Container id="buttons-container">
54 <Button @click="startSimulator()">Start Simulator</Button>
55 <Button @click="stopSimulator()">Stop Simulator</Button>
57 :id="'add-charging-stations'"
58 :key="state.renderAddChargingStations"
62 $router.push({ name: 'add-charging-stations' })
67 $router.push({ name: 'charging-stations' })
72 state.renderChargingStations = randomUUID()
80 :loading="state.loading"
81 @click="loadChargingStations(() => (state.renderChargingStations = randomUUID()))"
86 Array.isArray(app?.appContext.config.globalProperties.$chargingStations) &&
87 app.appContext.config.globalProperties.$chargingStations.length > 0
89 :key="state.renderChargingStations"
90 :charging-stations="app?.appContext.config.globalProperties.$chargingStations"
93 state.renderAddChargingStations = randomUUID()
94 state.renderChargingStations = randomUUID()
101 <script setup lang="ts">
102 import { getCurrentInstance, onMounted, ref } from 'vue'
103 import { useToast } from 'vue-toast-notification'
104 import CSTable from '@/components/charging-stations/CSTable.vue'
105 import type { ResponsePayload, UIServerConfigurationSection } from '@/types'
106 import Container from '@/components/Container.vue'
107 import ReloadButton from '@/components/buttons/ReloadButton.vue'
108 import Button from '@/components/buttons/Button.vue'
113 removeFromLocalStorage,
115 } from '@/composables'
116 import ToggleButton from '@/components/buttons/ToggleButton.vue'
118 const app = getCurrentInstance()
120 const clearToggleButtons = (): void => {
121 for (const key in getLocalStorage()) {
122 if (key.includes('toggle-button')) {
123 removeFromLocalStorage(key)
128 const clearChargingStations = (): void => {
130 app!.appContext.config.globalProperties.$chargingStations = []
131 state.value.renderAddChargingStations = randomUUID()
132 state.value.renderChargingStations = randomUUID()
135 const initializeWSEventListeners = () => {
136 app?.appContext.config.globalProperties.$uiClient.registerWSEventListener('open', () => {
139 .then((response: ResponsePayload) => {
141 app.appContext.config.globalProperties.$templates = response.templates
144 .catch((error: Error) => {
146 app.appContext.config.globalProperties.$templates = []
148 $toast.error('Error at fetching charging station templates')
149 console.error('Error at fetching charging station templates:', error)
151 loadChargingStations(() => {
152 state.value.renderAddChargingStations = randomUUID()
153 state.value.renderChargingStations = randomUUID()
156 app?.appContext.config.globalProperties.$uiClient.registerWSEventListener(
158 clearChargingStations
160 app?.appContext.config.globalProperties.$uiClient.registerWSEventListener(
162 clearChargingStations
167 initializeWSEventListeners()
171 renderAddChargingStations: randomUUID(),
172 renderChargingStations: randomUUID(),
174 uiServerIndex: getFromLocalStorage<number>('uiServerConfigurationIndex', 0)
177 const uiClient = app?.appContext.config.globalProperties.$uiClient
178 const uiServerConfigurations: { configuration: UIServerConfigurationSection; index: number }[] =
179 app?.appContext.config.globalProperties.$configuration.uiServer.map(
180 (configuration: UIServerConfigurationSection, index: number) => ({
186 const $toast = useToast()
188 const loadChargingStations = (renderCallback?: () => void): void => {
189 if (state.value.loading === false) {
190 state.value.loading = true
192 .listChargingStations()
193 .then((response: ResponsePayload) => {
195 app.appContext.config.globalProperties.$chargingStations = response.chargingStations
198 .catch((error: Error) => {
200 app.appContext.config.globalProperties.$chargingStations = []
202 $toast.error('Error at fetching charging stations')
203 console.error('Error at fetching charging stations:', error)
206 if (renderCallback != null) {
209 state.value.loading = false
214 const startSimulator = (): void => {
218 $toast.success('Simulator successfully started')
220 .catch((error: Error) => {
221 $toast.error('Error at starting simulator')
222 console.error('Error at starting simulator:', error)
225 const stopSimulator = (): void => {
230 app.appContext.config.globalProperties.$chargingStations = []
232 $toast.success('Simulator successfully stopped')
234 .catch((error: Error) => {
235 $toast.error('Error at stopping simulator')
236 console.error('Error at stopping simulator:', error)
242 #charging-stations-container {
246 flex-direction: column;
249 #ui-server-container {
254 #ui-server-selector {
271 background-color: blue;
275 justify-content: center;
278 #reload-button:hover {
279 background-color: rgb(0, 0, 225);
282 #reload-button:active {
283 background-color: red;
288 background-color: black;