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 ? 'Stop' : 'Start' }} Simulator
65 :id="'add-charging-stations'"
66 :key="state.renderAddChargingStations"
70 $router.push({ name: 'add-charging-stations' })
75 $router.push({ name: 'charging-stations' })
80 state.renderChargingStations = randomUUID()
88 :loading="state.loading"
89 @click="loadChargingStations(() => (state.renderChargingStations = randomUUID()))"
94 Array.isArray(app?.appContext.config.globalProperties.$chargingStations) &&
95 app.appContext.config.globalProperties.$chargingStations.length > 0
97 :key="state.renderChargingStations"
98 :charging-stations="app?.appContext.config.globalProperties.$chargingStations"
101 state.renderAddChargingStations = randomUUID()
102 state.renderChargingStations = randomUUID()
109 <script setup lang="ts">
110 import { getCurrentInstance, onMounted, ref } from 'vue'
111 import { useToast } from 'vue-toast-notification'
112 import CSTable from '@/components/charging-stations/CSTable.vue'
113 import type { ResponsePayload, UIServerConfigurationSection } from '@/types'
114 import Container from '@/components/Container.vue'
115 import ReloadButton from '@/components/buttons/ReloadButton.vue'
120 removeFromLocalStorage,
122 } from '@/composables'
123 import ToggleButton from '@/components/buttons/ToggleButton.vue'
126 renderSimulator: `${string}-${string}-${string}-${string}-${string}`
127 renderAddChargingStations: `${string}-${string}-${string}-${string}-${string}`
128 renderChargingStations: `${string}-${string}-${string}-${string}-${string}`
130 simulatorState?: { started: boolean }
131 uiServerIndex: number
133 renderSimulator: randomUUID(),
134 renderAddChargingStations: randomUUID(),
135 renderChargingStations: randomUUID(),
137 uiServerIndex: getFromLocalStorage<number>('uiServerConfigurationIndex', 0)
140 const app = getCurrentInstance()
142 const clearToggleButtons = (): void => {
143 for (const key in getLocalStorage()) {
144 if (key.includes('toggle-button')) {
145 removeFromLocalStorage(key)
150 const clearChargingStations = (): void => {
151 app!.appContext.config.globalProperties.$chargingStations = []
152 state.value.renderChargingStations = randomUUID()
155 const uiClient = app?.appContext.config.globalProperties.$uiClient
157 const getSimulatorState = (): void => {
160 .then((response: ResponsePayload) => {
161 state.value.simulatorState = response.state as { started: boolean }
163 .catch((error: Error) => {
164 $toast.error('Error at fetching simulator state')
165 console.error('Error at fetching simulator state:', error)
168 state.value.renderSimulator = randomUUID()
172 const initializeWSEventListeners = () => {
173 app?.appContext.config.globalProperties.$uiClient.registerWSEventListener('open', () => {
177 .then((response: ResponsePayload) => {
179 app.appContext.config.globalProperties.$templates = response.templates
182 .catch((error: Error) => {
184 app.appContext.config.globalProperties.$templates = []
186 $toast.error('Error at fetching charging station templates')
187 console.error('Error at fetching charging station templates:', error)
190 state.value.renderAddChargingStations = randomUUID()
192 loadChargingStations(() => {
193 state.value.renderChargingStations = randomUUID()
196 app?.appContext.config.globalProperties.$uiClient.registerWSEventListener(
198 clearChargingStations
200 app?.appContext.config.globalProperties.$uiClient.registerWSEventListener(
202 clearChargingStations
207 initializeWSEventListeners()
210 const uiServerConfigurations: { configuration: UIServerConfigurationSection; index: number }[] =
211 app?.appContext.config.globalProperties.$configuration.uiServer.map(
212 (configuration: UIServerConfigurationSection, index: number) => ({
218 const $toast = useToast()
220 const loadChargingStations = (renderCallback?: () => void): void => {
221 if (state.value.loading === false) {
222 state.value.loading = true
224 .listChargingStations()
225 .then((response: ResponsePayload) => {
227 app.appContext.config.globalProperties.$chargingStations = response.chargingStations
230 .catch((error: Error) => {
232 app.appContext.config.globalProperties.$chargingStations = []
234 $toast.error('Error at fetching charging stations')
235 console.error('Error at fetching charging stations:', error)
238 if (renderCallback != null) {
241 state.value.loading = false
246 const startSimulator = (): void => {
250 $toast.success('Simulator successfully started')
252 .catch((error: Error) => {
253 $toast.error('Error at starting simulator')
254 console.error('Error at starting simulator:', error)
260 const stopSimulator = (): void => {
265 app.appContext.config.globalProperties.$chargingStations = []
267 $toast.success('Simulator successfully stopped')
269 .catch((error: Error) => {
270 $toast.error('Error at stopping simulator')
271 console.error('Error at stopping simulator:', error)
280 #charging-stations-container {
284 flex-direction: column;
287 #ui-server-container {
292 #ui-server-selector {
309 background-color: blue;
313 justify-content: center;
316 #reload-button:hover {
317 background-color: rgb(0, 0, 225);
320 #reload-button:active {
321 background-color: seagreen;
326 background-color: black;