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
  16       v-if="
  17         Array.isArray(app?.appContext.config.globalProperties.$chargingStations) &&
  18         app?.appContext.config.globalProperties.$chargingStations.length > 0
  19       "
  20       :charging-stations="app?.appContext.config.globalProperties.$chargingStations"
  21     />
  22   </Container>
  23 </template>
  24
  25 <script setup lang="ts">
  26 import { getCurrentInstance, reactive } from 'vue'
  27 import { useToast } from 'vue-toast-notification'
  28 import CSTable from '@/components/charging-stations/CSTable.vue'
  29 import type { ResponsePayload } from '@/types'
  30 import Container from '@/components/Container.vue'
  31 import ReloadButton from '@/components/buttons/ReloadButton.vue'
  32 import Button from '@/components/buttons/Button.vue'
  33
  34 const state = reactive({
  35   isLoading: false
  36 })
  37
  38 const app = getCurrentInstance()
  39 const uiClient = app?.appContext.config.globalProperties.$uiClient
  40
  41 const $toast = useToast()
  42
  43 const loadChargingStations = (reloadCallback?: () => void): void => {
  44   if (state.isLoading === false) {
  45     state.isLoading = true
  46     uiClient
  47       .listChargingStations()
  48       .then((response: ResponsePayload) => {
  49         if (app != null) {
  50           app.appContext.config.globalProperties.$chargingStations = response.chargingStations
  51         }
  52       })
  53       .catch((error: Error) => {
  54         $toast.error('Error at fetching charging stations')
  55         console.error('Error at fetching charging stations:', error)
  56       })
  57       .finally(() => {
  58         if (reloadCallback != null) {
  59           reloadCallback()
  60         }
  61         state.isLoading = false
  62       })
  63   }
  64 }
  65
  66 const startSimulator = (): void => {
  67   uiClient
  68     .startSimulator()
  69     .then(() => {
  70       $toast.success('Simulator successfully started')
  71     })
  72     .catch((error: Error) => {
  73       $toast.error('Error at starting simulator')
  74       console.error('Error at starting simulator:', error)
  75     })
  76 }
  77 const stopSimulator = (): void => {
  78   uiClient
  79     .stopSimulator()
  80     .then(() => {
  81       if (app != null) {
  82         app.appContext.config.globalProperties.$chargingStations = []
  83       }
  84       $toast.success('Simulator successfully stopped')
  85     })
  86     .catch((error: Error) => {
  87       $toast.error('Error at stopping simulator')
  88       console.error('Error at stopping simulator:', error)
  89     })
  90 }
  91 </script>
  92
  93 <style>
  94 #charging-stations-container {
  95   height: fit-content;
  96   width: 100%;
  97   position: absolute;
  98   display: flex;
  99   flex-direction: column;
 100 }
 101
 102 #buttons-container {
 103   display: flex;
 104   flex-direction: row;
 105 }
 106
 107 #action-button {
 108   flex: none;
 109 }
 110
 111 #reload-button {
 112   flex: auto;
 113   color: white;
 114   background-color: blue;
 115   font-size: 1.5rem;
 116   font-weight: bold;
 117   align-items: center;
 118   justify-content: center;
 119 }
 120
 121 #reload-button:hover {
 122   background-color: rgb(0, 0, 225);
 123 }
 124
 125 #reload-button:active {
 126   background-color: red;
 127 }
 128
 129 #action {
 130   color: white;
 131   background-color: black;
 132   padding: 1%;
 133 }
 134 </style>