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

   1 <template>
   2   <tr v-for="(connector, index) in getConnectors()" class="cs-table__row">
   3     <CSConnector
   4       :hash-id="getHashId()"
   5       :connector="connector"
   6       :connector-id="index + 1"
   7       :transaction-id="connector.transactionId"
   8       :id-tag="props.idTag"
   9     />
  10     <td class="cs-table__name-col">{{ getId() }}</td>
  11     <td class="cs-table__started-col">{{ getStarted() }}</td>
  12     <td class="cs-table__wsState-col">{{ getWsState() }}</td>
  13     <td class="cs-table__registration-status-col">{{ getRegistrationStatus() }}</td>
  14     <td class="cs-table__vendor-col">{{ getVendor() }}</td>
  15     <td class="cs-table__model-col">{{ getModel() }}</td>
  16     <td class="cs-table__firmware-col">{{ getFirmwareVersion() }}</td>
  17   </tr>
  18 </template>
  19
  20 <script setup lang="ts">
  21 // import { reactive } from 'vue';
  22 import CSConnector from './CSConnector.vue';
  23 import type {
  24   ChargingStationData,
  25   ChargingStationInfo,
  26   ConnectorStatus,
  27 } from '@/types/ChargingStationType';
  28 import Utils from '@/composables/Utils';
  29
  30 const props = defineProps<{
  31   chargingStation: ChargingStationData;
  32   idTag: string;
  33 }>();
  34
  35 // type State = {
  36 //   isTagModalVisible: boolean;
  37 //   idTag: string;
  38 // };
  39
  40 // const state: State = reactive({
  41 //   isTagModalVisible: false,
  42 //   idTag: '',
  43 // });
  44
  45 function getConnectors(): ConnectorStatus[] {
  46   if (Array.isArray(props.chargingStation.evses) && props.chargingStation.evses.length > 0) {
  47     const connectorsStatus: ConnectorStatus[] = [];
  48     for (const [evseId, evseStatus] of props.chargingStation.evses.entries()) {
  49       if (evseId > 0 && Array.isArray(evseStatus.connectors) && evseStatus.connectors.length > 0) {
  50         for (const connectorStatus of evseStatus.connectors) {
  51           connectorsStatus.push(connectorStatus);
  52         }
  53       }
  54     }
  55     return connectorsStatus;
  56   }
  57   return props.chargingStation.connectors?.slice(1);
  58 }
  59 function getInfo(): ChargingStationInfo {
  60   return props.chargingStation.stationInfo;
  61 }
  62 function getHashId(): string {
  63   return getInfo().hashId;
  64 }
  65 function getId(): string {
  66   return Utils.ifUndefined<string>(getInfo().chargingStationId, 'Ø');
  67 }
  68 function getModel(): string {
  69   return getInfo().chargePointModel;
  70 }
  71 function getVendor(): string {
  72   return getInfo().chargePointVendor;
  73 }
  74 function getFirmwareVersion(): string {
  75   return Utils.ifUndefined<string>(getInfo().firmwareVersion, 'Ø');
  76 }
  77 function getStarted(): string {
  78   return props.chargingStation.started === true ? 'Yes' : 'No';
  79 }
  80 function getWsState(): string {
  81   switch (props.chargingStation?.wsState) {
  82     case WebSocket.CONNECTING:
  83       return 'Connecting';
  84     case WebSocket.OPEN:
  85       return 'Open';
  86     case WebSocket.CLOSING:
  87       return 'Closing';
  88     case WebSocket.CLOSED:
  89       return 'Closed';
  90     default:
  91       return 'Ø';
  92   }
  93 }
  94 function getRegistrationStatus(): string {
  95   return props.chargingStation?.bootNotificationResponse?.status ?? 'Ø';
  96 }
  97 // function showTagModal(): void {
  98 //   state.isTagModalVisible = true;
  99 // }
 100 // function hideTagModal(): void {
 101 //   state.isTagModalVisible = false;
 102 // }
 103 </script>