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 CSConnector from './CSConnector.vue';
  22
  23 // import { reactive } from 'vue';
  24 import Utils from '@/composables/Utils';
  25 import type {
  26   ChargingStationData,
  27   ChargingStationInfo,
  28   ConnectorStatus,
  29 } from '@/types/ChargingStationType';
  30
  31 const props = defineProps<{
  32   chargingStation: ChargingStationData;
  33   idTag: string;
  34 }>();
  35
  36 // type State = {
  37 //   isTagModalVisible: boolean;
  38 //   idTag: string;
  39 // };
  40
  41 // const state: State = reactive({
  42 //   isTagModalVisible: false,
  43 //   idTag: '',
  44 // });
  45
  46 function getConnectors(): ConnectorStatus[] {
  47   return props.chargingStation.connectors?.slice(1);
  48 }
  49 function getInfo(): ChargingStationInfo {
  50   return props.chargingStation.stationInfo;
  51 }
  52 function getHashId(): string {
  53   return getInfo().hashId;
  54 }
  55 function getId(): string {
  56   return Utils.ifUndefined<string>(getInfo().chargingStationId, 'Ø');
  57 }
  58 function getModel(): string {
  59   return getInfo().chargePointModel;
  60 }
  61 function getVendor(): string {
  62   return getInfo().chargePointVendor;
  63 }
  64 function getFirmwareVersion(): string {
  65   return Utils.ifUndefined<string>(getInfo().firmwareVersion, 'Ø');
  66 }
  67 function getStarted(): string {
  68   return props.chargingStation.started === true ? 'Yes' : 'No';
  69 }
  70 function getWsState(): string {
  71   switch (props.chargingStation?.wsState) {
  72     case WebSocket.CONNECTING:
  73       return 'Connecting';
  74     case WebSocket.OPEN:
  75       return 'Open';
  76     case WebSocket.CLOSING:
  77       return 'Closing';
  78     case WebSocket.CLOSED:
  79       return 'Closed';
  80     default:
  81       return 'Ø';
  82   }
  83 }
  84 function getRegistrationStatus(): string {
  85   return props.chargingStation?.bootNotificationResponse?.status ?? 'Ø';
  86 }
  87 // function showTagModal(): void {
  88 //   state.isTagModalVisible = true;
  89 // }
  90 // function hideTagModal(): void {
  91 //   state.isTagModalVisible = false;
  92 // }
  93 </script>