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