refactor(ui): refine tables CSS

[e-mobility-charging-stations-simulator.git] / ui / web / src / components / charging-stations / CSData.vue

diff --git a/ui/web/src/components/charging-stations/CSData.vue b/ui/web/src/components/charging-stations/CSData.vue
index ad5e81c788f22bf6beacb0d15aa01caf7d80c629..44aed70907e013bba5e0fc6369a9855aa4cc2904 100644 (file)
--- a/ui/web/src/components/charging-stations/CSData.vue
+++ b/ui/web/src/components/charging-stations/CSData.vue
@@ -1,27 +1,62 @@
 <template>
-  <tr v-for="(connector, index) in getConnectors()" class="cs-table__row">
-    <CSConnector
-      :hash-id="getHashId()"
-      :connector="connector"
-      :connector-id="index + 1"
-      :transaction-id="connector.transactionId"
-      :id-tag="props.idTag"
-    />
-    <td class="cs-table__name-col">{{ getId() }}</td>
-    <td class="cs-table__started-col">{{ getStarted() }}</td>
-    <td class="cs-table__wsState-col">{{ getWsState() }}</td>
-    <td class="cs-table__registration-status-col">{{ getRegistrationStatus() }}</td>
-    <td class="cs-table__vendor-col">{{ getVendor() }}</td>
-    <td class="cs-table__model-col">{{ getModel() }}</td>
-    <td class="cs-table__firmware-col">{{ getFirmwareVersion() }}</td>
+  <tr class="cs-table__row">
+    <td class="cs-table__column">{{ getId() }}</td>
+    <td class="cs-table__column">{{ getStarted() }}</td>
+    <td class="cs-table__column">
+      {{ getSupervisionUrl() }}
+    </td>
+    <td class="cs-table__column">{{ getWsState() }}</td>
+    <td class="cs-table__column">
+      {{ getRegistrationStatus() }}
+    </td>
+    <td class="cs-table__column">
+      {{ getInfo().templateName }}
+    </td>
+    <td class="cs-table__column">{{ getVendor() }}</td>
+    <td class="cs-table__column">{{ getModel() }}</td>
+    <td class="cs-table__column">
+      {{ getFirmwareVersion() }}
+    </td>
+    <td class="cs-table__column">
+      <Button @click="startChargingStation()">Start Charging Station</Button>
+      <Button @click="stopChargingStation()">Stop Charging Station</Button>
+      <Button @click="openConnection()">Open Connection</Button>
+      <Button @click="closeConnection()">Close Connection</Button>
+      <Button @click="deleteChargingStation()">Delete Charging Station</Button>
+    </td>
+    <td class="cs-table__connectors-column">
+      <table id="connectors-table">
+        <thead id="connectors-table__head">
+          <tr class="connectors-table__row">
+            <th scope="col" class="connectors-table__column">Identifier</th>
+            <th scope="col" class="connectors-table__column">Status</th>
+            <th scope="col" class="connectors-table__column">Transaction</th>
+            <th scope="col" class="connectors-table__column">ATG Started</th>
+            <th scope="col" class="connectors-table__column">Actions</th>
+          </tr>
+        </thead>
+        <tbody id="connectors-table__body">
+          <!-- eslint-disable-next-line vue/valid-v-for -->
+          <CSConnector
+            v-for="(connector, index) in getConnectors()"
+            :hash-id="getHashId()"
+            :connector-id="index + 1"
+            :connector="connector"
+            :atg-status="getATGStatus(index + 1)"
+            :transaction-id="connector.transactionId"
+            :id-tag="props.idTag"
+          />
+        </tbody>
+      </table>
+    </td>
   </tr>
 </template>
 
 <script setup lang="ts">
 // import { reactive } from 'vue'
-import CSConnector from './CSConnector.vue'
-import type { ChargingStationData, ChargingStationInfo, ConnectorStatus } from '@/types'
-import { ifUndefined } from '@/composables/Utils'
+import { getCurrentInstance } from 'vue'
+import CSConnector from '@/components/charging-stations/CSConnector.vue'
+import type { ChargingStationData, ChargingStationInfo, ConnectorStatus, Status } from '@/types'
 
 const props = defineProps<{
   chargingStation: ChargingStationData
@@ -38,19 +73,12 @@ const props = defineProps<{
 //   idTag: ''
 // })
 
-function getConnectors(): ConnectorStatus[] {
-  if (Array.isArray(props.chargingStation.evses) && props.chargingStation.evses.length > 0) {
-    const connectorsStatus: ConnectorStatus[] = []
-    for (const [evseId, evseStatus] of props.chargingStation.evses.entries()) {
-      if (evseId > 0 && Array.isArray(evseStatus.connectors) && evseStatus.connectors.length > 0) {
-        for (const connectorStatus of evseStatus.connectors) {
-          connectorsStatus.push(connectorStatus)
-        }
-      }
-    }
-    return connectorsStatus
-  }
-  return props.chargingStation.connectors?.slice(1)
+function getStarted(): string {
+  return props.chargingStation.started === true ? 'Yes' : 'No'
+}
+function getATGStatus(connectorId: number): Status | undefined {
+  return props.chargingStation.automaticTransactionGenerator
+    ?.automaticTransactionGeneratorStatuses?.[connectorId - 1]
 }
 function getInfo(): ChargingStationInfo {
   return props.chargingStation.stationInfo
@@ -59,7 +87,7 @@ function getHashId(): string {
   return getInfo().hashId
 }
 function getId(): string {
-  return ifUndefined<string>(getInfo().chargingStationId, 'Ø')
+  return getInfo().chargingStationId ?? 'Ø'
 }
 function getModel(): string {
   return getInfo().chargePointModel
@@ -68,10 +96,11 @@ function getVendor(): string {
   return getInfo().chargePointVendor
 }
 function getFirmwareVersion(): string {
-  return ifUndefined<string>(getInfo().firmwareVersion, 'Ø')
+  return getInfo().firmwareVersion ?? 'Ø'
 }
-function getStarted(): string {
-  return props.chargingStation.started === true ? 'Yes' : 'No'
+function getSupervisionUrl(): string {
+  const supervisionUrl = new URL(props.chargingStation.supervisionUrl)
+  return `${supervisionUrl.protocol}//${supervisionUrl.host.split('.').join('.\u200b')}`
 }
 function getWsState(): string {
   switch (props.chargingStation?.wsState) {
@@ -90,6 +119,38 @@ function getWsState(): string {
 function getRegistrationStatus(): string {
   return props.chargingStation?.bootNotificationResponse?.status ?? 'Ø'
 }
+function getConnectors(): ConnectorStatus[] {
+  if (Array.isArray(props.chargingStation.evses) && props.chargingStation.evses.length > 0) {
+    const connectorsStatus: ConnectorStatus[] = []
+    for (const [evseId, evseStatus] of props.chargingStation.evses.entries()) {
+      if (evseId > 0 && Array.isArray(evseStatus.connectors) && evseStatus.connectors.length > 0) {
+        for (const connectorStatus of evseStatus.connectors) {
+          connectorsStatus.push(connectorStatus)
+        }
+      }
+    }
+    return connectorsStatus
+  }
+  return props.chargingStation.connectors?.slice(1)
+}
+
+const UIClient = getCurrentInstance()?.appContext.config.globalProperties.$UIClient
+
+function startChargingStation(): void {
+  UIClient.startChargingStation(getHashId())
+}
+function stopChargingStation(): void {
+  UIClient.stopChargingStation(getHashId())
+}
+function openConnection(): void {
+  UIClient.openConnection(getHashId())
+}
+function closeConnection(): void {
+  UIClient.closeConnection(getHashId())
+}
+function deleteChargingStation(): void {
+  UIClient.deleteChargingStation(getHashId())
+}
 // function showTagModal(): void {
 //   state.isTagModalVisible = true
 // }
@@ -97,3 +158,39 @@ function getRegistrationStatus(): string {
 //   state.isTagModalVisible = false
 // }
 </script>
+
+<style>
+#connectors-table {
+  display: flex;
+  flex-direction: column;
+  background-color: white;
+  overflow: auto hidden;
+  border-collapse: collapse;
+  empty-cells: show;
+}
+
+#connectors-table__body {
+  display: flex;
+  flex-direction: column;
+}
+
+.connectors-table__row {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+}
+
+.connectors-table__row:nth-of-type(even) {
+  background-color: whitesmoke;
+}
+
+#connectors-table__head .connectors-table__row {
+  background-color: lightgrey;
+}
+
+.connectors-table__column {
+  width: calc(100% / 5);
+  text-align: center;
+}
+</style>