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.renderChargingStations = randomUUID()))"
81 Array.isArray(app?.appContext.config.globalProperties.$chargingStations) &&
82 app.appContext.config.globalProperties.$chargingStations.length > 0
84 :key="state.renderChargingStations"
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.renderChargingStations = 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)
140 loadChargingStations(() => {
141 state.value.renderAddChargingStations = randomUUID()
142 state.value.renderChargingStations = randomUUID()
145 app?.appContext.config.globalProperties.$uiClient.registerWSEventListener(
147 clearChargingStations
149 app?.appContext.config.globalProperties.$uiClient.registerWSEventListener(
151 clearChargingStations
156 initializeWSEventListeners()
160 renderAddChargingStations: randomUUID(),
161 renderChargingStations: randomUUID(),
163 uiServerIndex: getFromLocalStorage<number>('uiServerConfigurationIndex', 0)
166 const uiClient = app?.appContext.config.globalProperties.$uiClient
167 const uiServerConfigurations: { configuration: UIServerConfigurationSection; index: number }[] =
168 app?.appContext.config.globalProperties.$configuration.uiServer.map(
169 (configuration: UIServerConfigurationSection, index: number) => ({
175 const $toast = useToast()
177 const loadChargingStations = (renderCallback?: () => void): void => {
178 if (state.value.loading === false) {
179 state.value.loading = true
181 .listChargingStations()
182 .then((response: ResponsePayload) => {
184 app.appContext.config.globalProperties.$chargingStations = response.chargingStations
187 .catch((error: Error) => {
189 app.appContext.config.globalProperties.$chargingStations = []
191 $toast.error('Error at fetching charging stations')
192 console.error('Error at fetching charging stations:', error)
195 if (renderCallback != null) {
198 state.value.loading = false
203 const startSimulator = (): void => {
207 $toast.success('Simulator successfully started')
209 .catch((error: Error) => {
210 $toast.error('Error at starting simulator')
211 console.error('Error at starting simulator:', error)
214 const stopSimulator = (): void => {
219 app.appContext.config.globalProperties.$chargingStations = []
221 $toast.success('Simulator successfully stopped')
223 .catch((error: Error) => {
224 $toast.error('Error at stopping simulator')
225 console.error('Error at stopping simulator:', error)
231 #charging-stations-container {
235 flex-direction: column;
238 #ui-server-container {
243 #ui-server-selector {
260 background-color: blue;
264 justify-content: center;
267 #reload-button:hover {
268 background-color: rgb(0, 0, 225);
271 #reload-button:active {
272 background-color: red;
277 background-color: black;