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