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 for (const key in getLocalStorage()) {
24 if (key.includes('toggle-button')) {
25 removeFromLocalStorage(key)
28 $router.currentRoute.value.name !== 'charging-stations' &&
29 $router.push({ name: 'charging-stations' })
33 app?.appContext.config.globalProperties.$uiClient.registerWSEventListener(
36 state.uiServerIndex = getFromLocalStorage<number>('uiServerConfigurationIndex', 0)
37 app?.appContext.config.globalProperties.$uiClient.setConfiguration(
38 app?.appContext.config.globalProperties.$configuration.uiServer[
39 getFromLocalStorage<number>('uiServerConfigurationIndex', 0)
42 initializeWSEventListeners()
51 v-for="uiServerConfiguration in uiServerConfigurations"
52 :value="uiServerConfiguration.index"
54 {{ uiServerConfiguration.configuration.name ?? uiServerConfiguration.configuration.host }}
58 <Container id="buttons-container">
59 <Button @click="startSimulator()">Start Simulator</Button>
60 <Button @click="stopSimulator()">Stop Simulator</Button>
62 :id="'add-charging-stations'"
66 $router.push({ name: 'add-charging-stations' })
71 $router.push({ name: 'charging-stations' })
79 :loading="state.loading"
80 @click="loadChargingStations(() => (state.renderChargingStationsList = randomUUID()))"
85 Array.isArray(app?.appContext.config.globalProperties.$chargingStations) &&
86 app?.appContext.config.globalProperties.$chargingStations.length > 0
88 :key="state.renderChargingStationsList"
89 :charging-stations="app?.appContext.config.globalProperties.$chargingStations"
94 <script setup lang="ts">
95 import { getCurrentInstance, onMounted, ref } from 'vue'
96 import { useToast } from 'vue-toast-notification'
97 import CSTable from '@/components/charging-stations/CSTable.vue'
98 import type { ResponsePayload, UIServerConfigurationSection } from '@/types'
99 import Container from '@/components/Container.vue'
100 import ReloadButton from '@/components/buttons/ReloadButton.vue'
101 import Button from '@/components/buttons/Button.vue'
106 removeFromLocalStorage,
108 } from '@/composables'
109 import ToggleButton from '@/components/buttons/ToggleButton.vue'
111 const app = getCurrentInstance()
113 const initializeWSEventListeners = () => {
114 app?.appContext.config.globalProperties.$uiClient.registerWSEventListener('open', () => {
117 .then((response: ResponsePayload) => {
119 app.appContext.config.globalProperties.$templates = response.templates
122 .catch((error: Error) => {
124 app.appContext.config.globalProperties.$templates = []
126 $toast.error('Error at fetching charging station templates')
127 console.error('Error at fetching charging station templates:', error)
129 loadChargingStations(() => (state.value.renderChargingStationsList = randomUUID()))
131 app?.appContext.config.globalProperties.$uiClient.registerWSEventListener('error', () => {
132 app.appContext.config.globalProperties.$chargingStations = []
133 state.value.renderChargingStationsList = randomUUID()
135 app?.appContext.config.globalProperties.$uiClient.registerWSEventListener('close', () => {
136 app.appContext.config.globalProperties.$chargingStations = []
137 state.value.renderChargingStationsList = randomUUID()
142 initializeWSEventListeners()
146 renderChargingStationsList: randomUUID(),
148 uiServerIndex: getFromLocalStorage<number>('uiServerConfigurationIndex', 0)
151 const uiClient = app?.appContext.config.globalProperties.$uiClient
152 const uiServerConfigurations: { configuration: UIServerConfigurationSection; index: number }[] =
153 app?.appContext.config.globalProperties.$configuration.uiServer.map(
154 (configuration: UIServerConfigurationSection, index: number) => ({
160 const $toast = useToast()
162 const loadChargingStations = (renderCallback?: () => void): void => {
163 if (state.value.loading === false) {
164 state.value.loading = true
166 .listChargingStations()
167 .then((response: ResponsePayload) => {
169 app.appContext.config.globalProperties.$chargingStations = response.chargingStations
172 .catch((error: Error) => {
174 app.appContext.config.globalProperties.$chargingStations = []
176 $toast.error('Error at fetching charging stations')
177 console.error('Error at fetching charging stations:', error)
180 if (renderCallback != null) {
183 state.value.loading = false
188 const startSimulator = (): void => {
192 $toast.success('Simulator successfully started')
194 .catch((error: Error) => {
195 $toast.error('Error at starting simulator')
196 console.error('Error at starting simulator:', error)
199 const stopSimulator = (): void => {
204 app.appContext.config.globalProperties.$chargingStations = []
206 $toast.success('Simulator successfully stopped')
208 .catch((error: Error) => {
209 $toast.error('Error at stopping simulator')
210 console.error('Error at stopping simulator:', error)
216 #charging-stations-container {
220 flex-direction: column;
223 #ui-server-container {
228 #ui-server-selector {
245 background-color: blue;
249 justify-content: center;
252 #reload-button:hover {
253 background-color: rgb(0, 0, 225);
256 #reload-button:active {
257 background-color: red;
262 background-color: black;