2 <Container id="charging-stations-container">
3 <Container id="buttons-container">
4 <Button id="button" @click="startSimulator()">Start Simulator</Button>
5 <Button id="button" @click="stopSimulator()">Stop Simulator</Button>
6 <Button id="button" @click="$router.push({ name: 'add-charging-stations' })"
7 >Add Charging Stations</Button
11 :loading="state.isLoading"
12 @click="loadChargingStations(() => $router.go(0))"
15 <CSTable :charging-stations="app?.appContext.config.globalProperties.$chargingStations ?? []" />
19 <script setup lang="ts">
20 import { getCurrentInstance, reactive } from 'vue'
21 import { useToast } from 'vue-toast-notification'
22 import CSTable from '@/components/charging-stations/CSTable.vue'
23 import type { ResponsePayload } from '@/types'
24 import Container from '@/components/Container.vue'
25 import ReloadButton from '@/components/buttons/ReloadButton.vue'
26 import Button from '@/components/buttons/Button.vue'
28 const state = reactive({
32 const app = getCurrentInstance()
33 const uiClient = app?.appContext.config.globalProperties.$uiClient
35 const $toast = useToast()
37 const loadChargingStations = (reloadCallback?: () => void): void => {
38 if (state.isLoading === false) {
39 state.isLoading = true
41 .listChargingStations()
42 .then((response: ResponsePayload) => {
44 app.appContext.config.globalProperties.$chargingStations = response.chargingStations
47 .catch((error: Error) => {
48 $toast.error('Error at fetching charging stations')
49 console.error('Error at fetching charging stations:', error)
52 if (reloadCallback != null) {
55 state.isLoading = false
60 const startSimulator = (): void => {
64 $toast.success('Simulator successfully started')
66 .catch((error: Error) => {
67 $toast.error('Error at starting simulator')
68 console.error('Error at starting simulator:', error)
71 const stopSimulator = (): void => {
75 $toast.success('Simulator successfully stopped')
77 .catch((error: Error) => {
78 $toast.error('Error at stopping simulator')
79 console.error('Error at stopping simulator:', error)
85 #charging-stations-container {
89 flex-direction: column;
104 background-color: blue;
108 justify-content: center;
111 #reload-button:hover {
112 background-color: rgb(0, 0, 225);
115 #reload-button:active {
116 background-color: red;