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()"
68 :class="simulatorButtonClass"
70 {{ simulatorButtonMessage }}
73 :id="'add-charging-stations'"
74 :key="state.renderAddChargingStations"
78 $router.push({ name: 'add-charging-stations' })
83 $router.push({ name: 'charging-stations' })
88 state.renderChargingStations = randomUUID()
96 :loading="state.gettingChargingStations"
97 @click="getChargingStations()"
102 Array.isArray(app?.appContext.config.globalProperties.$chargingStations) &&
103 app.appContext.config.globalProperties.$chargingStations.length > 0
105 :key="state.renderChargingStations"
106 :charging-stations="app?.appContext.config.globalProperties.$chargingStations"
109 state.renderAddChargingStations = randomUUID()
110 state.renderChargingStations = randomUUID()
117 <script setup lang="ts">
118 import { computed, getCurrentInstance, onMounted, ref } from 'vue'
119 import { useToast } from 'vue-toast-notification'
120 import CSTable from '@/components/charging-stations/CSTable.vue'
121 import type { ResponsePayload, SimulatorState, UIServerConfigurationSection } from '@/types'
122 import Container from '@/components/Container.vue'
123 import ReloadButton from '@/components/buttons/ReloadButton.vue'
125 deleteFromLocalStorage,
130 } from '@/composables'
131 import ToggleButton from '@/components/buttons/ToggleButton.vue'
134 renderSimulator: `${string}-${string}-${string}-${string}-${string}`
135 renderAddChargingStations: `${string}-${string}-${string}-${string}-${string}`
136 renderChargingStations: `${string}-${string}-${string}-${string}-${string}`
137 gettingSimulatorState: boolean
138 gettingTemplates: boolean
139 gettingChargingStations: boolean
140 simulatorState?: SimulatorState
141 uiServerIndex: number
143 renderSimulator: randomUUID(),
144 renderAddChargingStations: randomUUID(),
145 renderChargingStations: randomUUID(),
146 gettingSimulatorState: false,
147 gettingTemplates: false,
148 gettingChargingStations: false,
149 uiServerIndex: getFromLocalStorage<number>('uiServerConfigurationIndex', 0)
152 const simulatorButtonClass = computed<string>(() =>
153 state.value.simulatorState?.started === true ? 'simulator-stop-button' : 'simulator-start-button'
155 const simulatorButtonMessage = computed<string>(
157 `${state.value.simulatorState?.started === true ? 'Stop' : 'Start'} Simulator${state.value.simulatorState?.version != null ? ` (${state.value.simulatorState.version})` : ''}`
160 const app = getCurrentInstance()
162 const clearToggleButtons = (): void => {
163 for (const key in getLocalStorage()) {
164 if (key.includes('toggle-button')) {
165 deleteFromLocalStorage(key)
168 state.value.renderChargingStations = randomUUID()
169 state.value.renderAddChargingStations = randomUUID()
172 const clearChargingStations = (): void => {
174 app.appContext.config.globalProperties.$chargingStations = []
176 state.value.renderChargingStations = randomUUID()
179 const uiClient = app?.appContext.config.globalProperties.$uiClient
181 const getSimulatorState = (): void => {
182 if (state.value.gettingSimulatorState === false) {
183 state.value.gettingSimulatorState = true
186 .then((response: ResponsePayload) => {
187 state.value.simulatorState = response.state as SimulatorState
189 .catch((error: Error) => {
190 $toast.error('Error at fetching simulator state')
191 console.error('Error at fetching simulator state:', error)
194 state.value.renderSimulator = randomUUID()
195 state.value.gettingSimulatorState = false
200 const initializeWSEventListeners = () => {
201 app?.appContext.config.globalProperties.$uiClient.registerWSEventListener('open', () => {
203 if (state.value.gettingTemplates === false) {
204 state.value.gettingTemplates = true
207 .then((response: ResponsePayload) => {
209 app.appContext.config.globalProperties.$templates = response.templates
212 .catch((error: Error) => {
214 app.appContext.config.globalProperties.$templates = []
216 $toast.error('Error at fetching charging station templates')
217 console.error('Error at fetching charging station templates:', error)
220 state.value.gettingTemplates = false
223 getChargingStations()
225 app?.appContext.config.globalProperties.$uiClient.registerWSEventListener(
227 clearChargingStations
229 app?.appContext.config.globalProperties.$uiClient.registerWSEventListener(
231 clearChargingStations
236 initializeWSEventListeners()
239 const uiServerConfigurations: { index: number; configuration: UIServerConfigurationSection }[] =
240 app?.appContext.config.globalProperties.$configuration.uiServer.map(
241 (configuration: UIServerConfigurationSection, index: number) => ({
247 const $toast = useToast()
249 const getChargingStations = (): void => {
250 if (state.value.gettingChargingStations === false) {
251 state.value.gettingChargingStations = true
253 .listChargingStations()
254 .then((response: ResponsePayload) => {
256 app.appContext.config.globalProperties.$chargingStations = response.chargingStations
259 .catch((error: Error) => {
261 app.appContext.config.globalProperties.$chargingStations = []
263 $toast.error('Error at fetching charging stations')
264 console.error('Error at fetching charging stations:', error)
267 state.value.renderChargingStations = randomUUID()
268 state.value.gettingChargingStations = false
273 const startSimulator = (): void => {
277 $toast.success('Simulator successfully started')
279 .catch((error: Error) => {
280 $toast.error('Error at starting simulator')
281 console.error('Error at starting simulator:', error)
287 const stopSimulator = (): void => {
292 app.appContext.config.globalProperties.$chargingStations = []
294 $toast.success('Simulator successfully stopped')
296 .catch((error: Error) => {
297 $toast.error('Error at stopping simulator')
298 console.error('Error at stopping simulator:', error)
307 #charging-stations-container {
311 flex-direction: column;
314 #ui-server-container {
316 justify-content: center;
317 border-style: outset;
320 #ui-server-selector {
322 background-color: rgb(239, 239, 239);
327 #ui-server-selector:hover {
328 background-color: rgb(229, 229, 229);
336 .simulator-start-button {
338 background-color: green;
341 .simulator-start-button:hover {
342 background-color: rgb(0, 98, 0);
345 .simulator-stop-button {
347 background-color: red;
350 .simulator-stop-button:hover {
351 background-color: rgb(225, 0, 0);
360 background-color: blue;
364 #reload-button:hover {
365 background-color: rgb(0, 0, 225);
368 #reload-button:active {
369 background-color: darkblue;
373 min-width: max-content;
375 background-color: black;