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' })
75 :loading="state.loading"
76 @click="loadChargingStations(() => (state.renderChargingStationsList = randomUUID()))"
81 Array.isArray(app?.appContext.config.globalProperties.$chargingStations) &&
82 app?.appContext.config.globalProperties.$chargingStations.length > 0
84 :key="state.renderChargingStationsList"
85 :charging-stations="app?.appContext.config.globalProperties.$chargingStations"
90 <script setup lang="ts">
91 import { getCurrentInstance, onMounted, ref } from 'vue'
92 import { useToast } from 'vue-toast-notification'
93 import CSTable from '@/components/charging-stations/CSTable.vue'
94 import type { ResponsePayload, UIServerConfigurationSection } from '@/types'
95 import Container from '@/components/Container.vue'
96 import ReloadButton from '@/components/buttons/ReloadButton.vue'
97 import Button from '@/components/buttons/Button.vue'
102 removeFromLocalStorage,
104 } from '@/composables'
105 import ToggleButton from '@/components/buttons/ToggleButton.vue'
107 const app = getCurrentInstance()
109 const clearToggleButtons = (): void => {
110 for (const key in getLocalStorage()) {
111 if (key.includes('toggle-button')) {
112 removeFromLocalStorage(key)
117 const clearChargingStations = (): void => {
119 app!.appContext.config.globalProperties.$chargingStations = []
120 state.value.renderAddChargingStations = randomUUID()
121 state.value.renderChargingStationsList = randomUUID()
124 const initializeWSEventListeners = () => {
125 app?.appContext.config.globalProperties.$uiClient.registerWSEventListener('open', () => {
128 .then((response: ResponsePayload) => {
130 app.appContext.config.globalProperties.$templates = response.templates
133 .catch((error: Error) => {
135 app.appContext.config.globalProperties.$templates = []
137 $toast.error('Error at fetching charging station templates')
138 console.error('Error at fetching charging station templates:', error)
141 loadChargingStations(() => {
142 state.value.renderAddChargingStations = randomUUID()
143 state.value.renderChargingStationsList = randomUUID()
146 app?.appContext.config.globalProperties.$uiClient.registerWSEventListener(
148 clearChargingStations
150 app?.appContext.config.globalProperties.$uiClient.registerWSEventListener(
152 clearChargingStations
157 initializeWSEventListeners()
161 renderAddChargingStations: randomUUID(),
162 renderChargingStationsList: randomUUID(),
164 uiServerIndex: getFromLocalStorage<number>('uiServerConfigurationIndex', 0)
167 const uiClient = app?.appContext.config.globalProperties.$uiClient
168 const uiServerConfigurations: { configuration: UIServerConfigurationSection; index: number }[] =
169 app?.appContext.config.globalProperties.$configuration.uiServer.map(
170 (configuration: UIServerConfigurationSection, index: number) => ({
176 const $toast = useToast()
178 const loadChargingStations = (renderCallback?: () => void): void => {
179 if (state.value.loading === false) {
180 state.value.loading = true
182 .listChargingStations()
183 .then((response: ResponsePayload) => {
185 app.appContext.config.globalProperties.$chargingStations = response.chargingStations
188 .catch((error: Error) => {
190 app.appContext.config.globalProperties.$chargingStations = []
192 $toast.error('Error at fetching charging stations')
193 console.error('Error at fetching charging stations:', error)
196 if (renderCallback != null) {
199 state.value.loading = false
204 const startSimulator = (): void => {
208 $toast.success('Simulator successfully started')
210 .catch((error: Error) => {
211 $toast.error('Error at starting simulator')
212 console.error('Error at starting simulator:', error)
215 const stopSimulator = (): void => {
220 app.appContext.config.globalProperties.$chargingStations = []
222 $toast.success('Simulator successfully stopped')
224 .catch((error: Error) => {
225 $toast.error('Error at stopping simulator')
226 console.error('Error at stopping simulator:', error)
232 #charging-stations-container {
236 flex-direction: column;
239 #ui-server-container {
244 #ui-server-selector {
261 background-color: blue;
265 justify-content: center;
268 #reload-button:hover {
269 background-color: rgb(0, 0, 225);
272 #reload-button:active {
273 background-color: red;
278 background-color: black;