Web UI: add one UT

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

diff --git a/src/ui/web/src/components/charging-stations/CSTable.vue b/src/ui/web/src/components/charging-stations/CSTable.vue
index 03998d52b406c4036b711d6c6ddd5048a869bf00..cf96d954c9e756311ae2f06f2713a974e50db4c3 100644 (file)
--- a/src/ui/web/src/components/charging-stations/CSTable.vue
+++ b/src/ui/web/src/components/charging-stations/CSTable.vue
@@ -5,9 +5,12 @@
         <th scope="col" class="cs-table__action-col">Action</th>
         <th scope="col" class="cs-table__connector-col">Connector</th>
         <th scope="col" class="cs-table__status-col">Status</th>
+        <th scope="col" class="cs-table__transaction-col">Transaction</th>
         <th scope="col" class="cs-table__name-col">Name</th>
-        <th scope="col" class="cs-table__model-col">Model</th>
+        <th scope="col" class="cs-table__stopped-col">Stopped</th>
+        <th scope="col" class="cs-table__registration-status-col">Registration Status</th>
         <th scope="col" class="cs-table__vendor-col">Vendor</th>
+        <th scope="col" class="cs-table__model-col">Model</th>
         <th scope="col" class="cs-table__firmware-col">Firmware Version</th>
       </tr>
     </thead>
@@ -16,7 +19,7 @@
         v-for="chargingStation in chargingStations"
         :key="chargingStation.hashId"
         :charging-station="chargingStation"
-        :tag="props.tag"
+        :idTag="props.idTag"
       />
     </tbody>
   </table>
@@ -24,24 +27,23 @@
 
 <script setup lang="ts">
 import CSData from './CSData.vue';
-import { ChargingStationData } from '@/type/ChargingStationType';
+import type { ChargingStationData } from '@/type/ChargingStationType';
 
 const props = defineProps<{
-  chargingStations: ChargingStationData[];
-  tag: string;
+  chargingStations: Record<string, ChargingStationData>;
+  idTag: string;
 }>();
 </script>
 
 <style>
 #cs-table {
-  flex-grow: 1;
-
   background-color: white;
 
   height: 100%;
   width: 100%;
 
   display: flex;
+  flex-grow: 1;
   flex-direction: column;
   overflow: auto hidden;
   border-collapse: collapse;
@@ -64,18 +66,17 @@ const props = defineProps<{
 #cs-table__body {
   /* width: 100%; */
   /* direction: rtl; */
-  /* overflow: visible scroll; */
   overflow: visible overlay;
   flex-grow: 1;
 }
 
 .cs-table__row {
-  /* width: 1647px; */
   width: 100%;
   /* display: inline-block; */
   display: flex;
+  justify-content: center;
+  align-items: center;
   /* align-content: stretch; */
-  /* align-items: baseline; */
 }
 #cs-table__head .cs-table__row {
   background-color: rgb(194, 188, 188);
@@ -87,15 +88,18 @@ const props = defineProps<{
 .cs-table__action-col,
 .cs-table__connector-col,
 .cs-table__status-col,
+.cs-table__transaction-col,
 .cs-table__name-col,
+.cs-table__stopped-col,
+.cs-table__registration-status-col,
 .cs-table__model-col,
 .cs-table__vendor-col,
 .cs-table__firmware-col {
-  /* height: 2em; */
-  width: 14.3%;
-  padding-top: 0.5em;
+  height: 0.1%;
+  width: 20%;
+  padding-top: 0.2%;
+  padding-bottom: 0.2%;
   /* background-color: red; */
-  /* width: 14.3%; */
   text-align: center;
   /* display: table-cell;
   vertical-align: middle; */
@@ -109,9 +113,18 @@ const props = defineProps<{
 .cs-table__status-col {
   /* min-width: 120px; */
 }
+.cs-table__transaction-col {
+  /* min-width: 120px; */
+}
 .cs-table__name-col {
   /* min-width: 120px; */
 }
+.cs-table__stopped-col {
+  /* min-width: 120px; */
+}
+.cs-table__registration-status-col {
+  /* min-width: 120px; */
+}
 .cs-table__model-col {
   /* min-width: 120px; */
 }