ui/web/src/components/charging-stations/CSData.vue

   1 <template>
   2   <tr class="cs-table__row">
   3     <td class="cs-table__column">
   4       {{ chargingStation.stationInfo.chargingStationId }}
   5     </td>
   6     <td class="cs-table__column">{{ chargingStation.started === true ? 'Yes' : 'No' }}</td>
   7     <td class="cs-table__column">
   8       {{ getSupervisionUrl() }}
   9     </td>
  10     <td class="cs-table__column">{{ getWSState() }}</td>
  11     <td class="cs-table__column">
  12       {{ chargingStation.bootNotificationResponse?.status ?? 'Ø' }}
  13     </td>
  14     <td class="cs-table__column">
  15       {{ chargingStation.stationInfo.templateName }}
  16     </td>
  17     <td class="cs-table__column">{{ chargingStation.stationInfo.chargePointVendor }}</td>
  18     <td class="cs-table__column">{{ chargingStation.stationInfo.chargePointModel }}</td>
  19     <td class="cs-table__column">
  20       {{ chargingStation.stationInfo.firmwareVersion ?? 'Ø' }}
  21     </td>
  22     <td class="cs-table__column">
  23       <Button @click="startChargingStation()">Start Charging Station</Button>
  24       <Button @click="stopChargingStation()">Stop Charging Station</Button>
  25       <ToggleButton
  26         :id="`${chargingStation.stationInfo.hashId}-set-supervision-url`"
  27         :shared="true"
  28         :on="
  29           () => {
  30             $router.push({
  31               name: 'set-supervision-url',
  32               params: {
  33                 hashId: chargingStation.stationInfo.hashId,
  34                 chargingStationId: chargingStation.stationInfo.chargingStationId
  35               }
  36             })
  37           }
  38         "
  39         :off="
  40           () => {
  41             $router.push({ name: 'charging-stations' })
  42           }
  43         "
  44         @clicked="
  45           () => {
  46             $emit('need-refresh')
  47           }
  48         "
  49       >
  50         Set Supervision Url
  51       </ToggleButton>
  52       <Button @click="openConnection()">Open Connection</Button>
  53       <Button @click="closeConnection()">Close Connection</Button>
  54       <Button @click="deleteChargingStation()">Delete Charging Station</Button>
  55     </td>
  56     <td class="cs-table__connectors-column">
  57       <table id="connectors-table">
  58         <caption></caption>
  59         <thead id="connectors-table__head">
  60           <tr class="connectors-table__row">
  61             <th scope="col" class="connectors-table__column">Identifier</th>
  62             <th scope="col" class="connectors-table__column">Status</th>
  63             <th scope="col" class="connectors-table__column">Transaction</th>
  64             <th scope="col" class="connectors-table__column">ATG Started</th>
  65             <th scope="col" class="connectors-table__column">Actions</th>
  66           </tr>
  67         </thead>
  68         <tbody id="connectors-table__body">
  69           <CSConnector
  70             v-for="(connector, index) in getConnectorStatuses()"
  71             :key="index + 1"
  72             :hash-id="chargingStation.stationInfo.hashId"
  73             :charging-station-id="chargingStation.stationInfo.chargingStationId"
  74             :connector-id="index + 1"
  75             :connector="connector"
  76             :atg-status="getATGStatus(index + 1)"
  77             @need-refresh="$emit('need-refresh')"
  78           />
  79         </tbody>
  80       </table>
  81     </td>
  82   </tr>
  83 </template>
  84
  85 <script setup lang="ts">
  86 import { useToast } from 'vue-toast-notification'
  87
  88 import Button from '@/components/buttons/Button.vue'
  89 import ToggleButton from '@/components/buttons/ToggleButton.vue'
  90 import CSConnector from '@/components/charging-stations/CSConnector.vue'
  91 import { useUIClient } from '@/composables'
  92 import type { ChargingStationData, ConnectorStatus, Status } from '@/types'
  93
  94 const props = defineProps<{
  95   chargingStation: ChargingStationData
  96 }>()
  97
  98 const $emit = defineEmits(['need-refresh'])
  99
 100 const getConnectorStatuses = (): ConnectorStatus[] => {
 101   if (Array.isArray(props.chargingStation.evses) && props.chargingStation.evses.length > 0) {
 102     const connectorStatuses: ConnectorStatus[] = []
 103     for (const [evseId, evseStatus] of props.chargingStation.evses.entries()) {
 104       if (evseId > 0 && Array.isArray(evseStatus.connectors) && evseStatus.connectors.length > 0) {
 105         for (const connectorStatus of evseStatus.connectors) {
 106           connectorStatuses.push(connectorStatus)
 107         }
 108       }
 109     }
 110     return connectorStatuses
 111   }
 112   return props.chargingStation.connectors?.slice(1)
 113 }
 114 const getATGStatus = (connectorId: number): Status | undefined => {
 115   return props.chargingStation.automaticTransactionGenerator
 116     ?.automaticTransactionGeneratorStatuses?.[connectorId - 1]
 117 }
 118 const getSupervisionUrl = (): string => {
 119   const supervisionUrl = new URL(props.chargingStation.supervisionUrl)
 120   return `${supervisionUrl.protocol}//${supervisionUrl.host.split('.').join('.\u200b')}`
 121 }
 122 const getWSState = (): string => {
 123   switch (props.chargingStation?.wsState) {
 124     case WebSocket.CONNECTING:
 125       return 'Connecting'
 126     case WebSocket.OPEN:
 127       return 'Open'
 128     case WebSocket.CLOSING:
 129       return 'Closing'
 130     case WebSocket.CLOSED:
 131       return 'Closed'
 132     default:
 133       return 'Ø'
 134   }
 135 }
 136
 137 const uiClient = useUIClient()
 138
 139 const $toast = useToast()
 140
 141 const startChargingStation = (): void => {
 142   uiClient
 143     .startChargingStation(props.chargingStation.stationInfo.hashId)
 144     .then(() => {
 145       $toast.success('Charging station successfully started')
 146     })
 147     .catch((error: Error) => {
 148       $toast.error('Error at starting charging station')
 149       console.error('Error at starting charging station', error)
 150     })
 151 }
 152 const stopChargingStation = (): void => {
 153   uiClient
 154     .stopChargingStation(props.chargingStation.stationInfo.hashId)
 155     .then(() => {
 156       $toast.success('Charging station successfully stopped')
 157     })
 158     .catch((error: Error) => {
 159       $toast.error('Error at stopping charging station')
 160       console.error('Error at stopping charging station', error)
 161     })
 162 }
 163 const openConnection = (): void => {
 164   uiClient
 165     .openConnection(props.chargingStation.stationInfo.hashId)
 166     .then(() => {
 167       $toast.success('Connection successfully opened')
 168     })
 169     .catch((error: Error) => {
 170       $toast.error('Error at opening connection')
 171       console.error('Error at opening connection', error)
 172     })
 173 }
 174 const closeConnection = (): void => {
 175   uiClient
 176     .closeConnection(props.chargingStation.stationInfo.hashId)
 177     .then(() => {
 178       $toast.success('Connection successfully closed')
 179     })
 180     .catch((error: Error) => {
 181       $toast.error('Error at closing connection')
 182       console.error('Error at closing connection', error)
 183     })
 184 }
 185 const deleteChargingStation = (): void => {
 186   uiClient
 187     .deleteChargingStation(props.chargingStation.stationInfo.hashId)
 188     .then(() => {
 189       $toast.success('Charging station successfully deleted')
 190     })
 191     .catch((error: Error) => {
 192       $toast.error('Error at deleting charging station')
 193       console.error('Error at deleting charging station', error)
 194     })
 195 }
 196 </script>
 197
 198 <style>
 199 #connectors-table {
 200   display: flex;
 201   flex-direction: column;
 202   background-color: white;
 203   overflow: auto hidden;
 204   border-collapse: collapse;
 205   empty-cells: show;
 206 }
 207
 208 #connectors-table__body {
 209   display: flex;
 210   flex-direction: column;
 211 }
 212
 213 .connectors-table__row {
 214   display: flex;
 215   flex-direction: row;
 216   justify-content: center;
 217   align-items: center;
 218   border: solid 0.25px black;
 219 }
 220
 221 .connectors-table__row:nth-of-type(even) {
 222   background-color: whitesmoke;
 223 }
 224
 225 #connectors-table__head .connectors-table__row {
 226   background-color: lightgrey;
 227 }
 228
 229 .connectors-table__column {
 230   width: calc(100% / 5);
 231   display: flex;
 232   flex-direction: column;
 233   text-align: center;
 234 }
 235 </style>