2 <Container id="charging-stations-container">
3 <Container id="buttons-container">
5 v-show="Array.isArray(uiServerConfigurations) && uiServerConfigurations.length > 1"
6 id="ui-server-container"
9 id="ui-server-selector"
10 v-model="state.uiServerIndex"
14 getFromLocalStorage<number>('uiServerConfigurationIndex', 0) !== state.uiServerIndex
16 app?.appContext.config.globalProperties.$uiClient.setConfiguration(
17 app?.appContext.config.globalProperties.$configuration.uiServer[
21 initializeWSEventListeners()
22 app?.appContext.config.globalProperties.$uiClient.registerWSEventListener(
25 setToLocalStorage<number>('uiServerConfigurationIndex', state.uiServerIndex)
27 $router.currentRoute.value.name !== 'charging-stations' &&
28 $router.push({ name: 'charging-stations' })
32 app?.appContext.config.globalProperties.$uiClient.registerWSEventListener(
35 state.uiServerIndex = getFromLocalStorage<number>(
36 'uiServerConfigurationIndex',
39 app?.appContext.config.globalProperties.$uiClient.setConfiguration(
40 app?.appContext.config.globalProperties.$configuration.uiServer[
41 getFromLocalStorage<number>('uiServerConfigurationIndex', 0)
44 initializeWSEventListeners()
53 v-for="uiServerConfiguration in uiServerConfigurations"
54 :value="uiServerConfiguration.index"
57 uiServerConfiguration.configuration.name ?? uiServerConfiguration.configuration.host
64 :key="state.renderSimulator"
65 :status="state.simulatorState?.started"
66 :on="() => startSimulator()"
67 :off="() => stopSimulator()"
69 state.simulatorState?.started === true
70 ? 'simulator-stop-button'
71 : 'simulator-start-button'
74 {{ state.simulatorState?.started === true ? 'Stop' : 'Start' }} Simulator
77 :id="'add-charging-stations'"
78 :key="state.renderAddChargingStations"
82 $router.push({ name: 'add-charging-stations' })
87 $router.push({ name: 'charging-stations' })
92 state.renderChargingStations = randomUUID()
100 :loading="state.loading"
101 @click="loadChargingStations(() => (state.renderChargingStations = randomUUID()))"
106 Array.isArray(app?.appContext.config.globalProperties.$chargingStations) &&
107 app.appContext.config.globalProperties.$chargingStations.length > 0
109 :key="state.renderChargingStations"
110 :charging-stations="app?.appContext.config.globalProperties.$chargingStations"
113 state.renderAddChargingStations = randomUUID()
114 state.renderChargingStations = randomUUID()
121 <script setup lang="ts">
122 import { getCurrentInstance, onMounted, ref } from 'vue'
123 import { useToast } from 'vue-toast-notification'
124 import CSTable from '@/components/charging-stations/CSTable.vue'
125 import type { ResponsePayload, UIServerConfigurationSection } from '@/types'
126 import Container from '@/components/Container.vue'
127 import ReloadButton from '@/components/buttons/ReloadButton.vue'
129 deleteFromLocalStorage,
134 } from '@/composables'
135 import ToggleButton from '@/components/buttons/ToggleButton.vue'
138 renderSimulator: `${string}-${string}-${string}-${string}-${string}`
139 renderAddChargingStations: `${string}-${string}-${string}-${string}-${string}`
140 renderChargingStations: `${string}-${string}-${string}-${string}-${string}`
142 simulatorState?: { started: boolean }
143 uiServerIndex: number
145 renderSimulator: randomUUID(),
146 renderAddChargingStations: randomUUID(),
147 renderChargingStations: randomUUID(),
149 uiServerIndex: getFromLocalStorage<number>('uiServerConfigurationIndex', 0)
152 const app = getCurrentInstance()
154 const clearToggleButtons = (): void => {
155 for (const key in getLocalStorage()) {
156 if (key.includes('toggle-button')) {
157 deleteFromLocalStorage(key)
162 const clearChargingStations = (): void => {
163 app!.appContext.config.globalProperties.$chargingStations = []
164 state.value.renderChargingStations = randomUUID()
167 const uiClient = app?.appContext.config.globalProperties.$uiClient
169 const getSimulatorState = (): void => {
172 .then((response: ResponsePayload) => {
173 state.value.simulatorState = response.state as { started: boolean }
175 .catch((error: Error) => {
176 $toast.error('Error at fetching simulator state')
177 console.error('Error at fetching simulator state:', error)
180 state.value.renderSimulator = randomUUID()
184 const initializeWSEventListeners = () => {
185 app?.appContext.config.globalProperties.$uiClient.registerWSEventListener('open', () => {
189 .then((response: ResponsePayload) => {
191 app.appContext.config.globalProperties.$templates = response.templates
194 .catch((error: Error) => {
196 app.appContext.config.globalProperties.$templates = []
198 $toast.error('Error at fetching charging station templates')
199 console.error('Error at fetching charging station templates:', error)
202 state.value.renderAddChargingStations = randomUUID()
204 loadChargingStations(() => {
205 state.value.renderChargingStations = randomUUID()
208 app?.appContext.config.globalProperties.$uiClient.registerWSEventListener(
210 clearChargingStations
212 app?.appContext.config.globalProperties.$uiClient.registerWSEventListener(
214 clearChargingStations
219 initializeWSEventListeners()
222 const uiServerConfigurations: { configuration: UIServerConfigurationSection; index: number }[] =
223 app?.appContext.config.globalProperties.$configuration.uiServer.map(
224 (configuration: UIServerConfigurationSection, index: number) => ({
230 const $toast = useToast()
232 const loadChargingStations = (renderCallback?: () => void): void => {
233 if (state.value.loading === false) {
234 state.value.loading = true
236 .listChargingStations()
237 .then((response: ResponsePayload) => {
239 app.appContext.config.globalProperties.$chargingStations = response.chargingStations
242 .catch((error: Error) => {
244 app.appContext.config.globalProperties.$chargingStations = []
246 $toast.error('Error at fetching charging stations')
247 console.error('Error at fetching charging stations:', error)
250 if (renderCallback != null) {
253 state.value.loading = false
258 const startSimulator = (): void => {
262 $toast.success('Simulator successfully started')
264 .catch((error: Error) => {
265 $toast.error('Error at starting simulator')
266 console.error('Error at starting simulator:', error)
272 const stopSimulator = (): void => {
277 app.appContext.config.globalProperties.$chargingStations = []
279 $toast.success('Simulator successfully stopped')
281 .catch((error: Error) => {
282 $toast.error('Error at stopping simulator')
283 console.error('Error at stopping simulator:', error)
292 #charging-stations-container {
296 flex-direction: column;
299 #ui-server-container {
301 justify-content: center;
304 #ui-server-selector {
306 background-color: rgb(239, 239, 239);
310 #ui-server-selector:hover {
311 background-color: lightgrey;
319 .simulator-start-button {
321 background-color: green;
324 .simulator-stop-button {
326 background-color: red;
335 background-color: blue;
340 #reload-button:hover {
341 background-color: rgb(0, 0, 225);
344 #reload-button:active {
345 background-color: darkblue;
350 background-color: black;