ui/web/src/views/ChargingStationsView.vue

   1 <template>
   2   <Container id="charging-stations-container">
   3     <Container id="buttons-container">
   4       <Button @click="startSimulator()">Start Simulator</Button>
   5       <Button @click="stopSimulator()">Stop Simulator</Button>
   6       <Button @click="$router.push({ name: 'add-charging-stations' })">
   7         Add Charging Stations
   8       </Button>
   9       <ReloadButton
  10         id="reload-button"
  11         :loading="state.isLoading"
  12         @click="loadChargingStations(() => $router.go(0))"
  13       />
  14     </Container>
  15     <CSTable :charging-stations="app?.appContext.config.globalProperties.$chargingStations" />
  16   </Container>
  17 </template>
  18
  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'
  27
  28 const state = reactive({
  29   isLoading: false
  30 })
  31
  32 const app = getCurrentInstance()
  33 const uiClient = app?.appContext.config.globalProperties.$uiClient
  34
  35 const $toast = useToast()
  36
  37 const loadChargingStations = (reloadCallback?: () => void): void => {
  38   if (state.isLoading === false) {
  39     state.isLoading = true
  40     uiClient
  41       .listChargingStations()
  42       .then((response: ResponsePayload) => {
  43         if (app != null) {
  44           app.appContext.config.globalProperties.$chargingStations = response.chargingStations
  45         }
  46       })
  47       .catch((error: Error) => {
  48         $toast.error('Error at fetching charging stations')
  49         console.error('Error at fetching charging stations:', error)
  50       })
  51       .finally(() => {
  52         if (reloadCallback != null) {
  53           reloadCallback()
  54         }
  55         state.isLoading = false
  56       })
  57   }
  58 }
  59
  60 const startSimulator = (): void => {
  61   uiClient
  62     .startSimulator()
  63     .then(() => {
  64       $toast.success('Simulator successfully started')
  65     })
  66     .catch((error: Error) => {
  67       $toast.error('Error at starting simulator')
  68       console.error('Error at starting simulator:', error)
  69     })
  70 }
  71 const stopSimulator = (): void => {
  72   uiClient
  73     .stopSimulator()
  74     .then(() => {
  75       $toast.success('Simulator successfully stopped')
  76     })
  77     .catch((error: Error) => {
  78       $toast.error('Error at stopping simulator')
  79       console.error('Error at stopping simulator:', error)
  80     })
  81 }
  82 </script>
  83
  84 <style>
  85 #charging-stations-container {
  86   height: fit-content;
  87   width: 100%;
  88   display: flex;
  89   flex-direction: column;
  90 }
  91
  92 #buttons-container {
  93   display: flex;
  94   flex-direction: row;
  95 }
  96
  97 #action-button {
  98   flex: none;
  99 }
 100
 101 #reload-button {
 102   flex: auto;
 103   color: white;
 104   background-color: blue;
 105   font-size: 1.5rem;
 106   font-weight: bold;
 107   align-items: center;
 108   justify-content: center;
 109 }
 110
 111 #reload-button:hover {
 112   background-color: rgb(0, 0, 225);
 113 }
 114
 115 #reload-button:active {
 116   background-color: red;
 117 }
 118
 119 #action {
 120   color: white;
 121   background-color: black;
 122   padding: 1%;
 123 }
 124 </style>