X-Git-Url: https://git.piment-noir.org/?a=blobdiff_plain;f=src%2Fui%2Fweb%2Fsrc%2Fcomponents%2Fcharging-stations%2FCSTable.vue;h=ccd7db14e4fc4862e7765e1822daf27c978c0ea4;hb=51c83d6f833f27f9990c17fc380ab5ee618894b1;hp=dc4865a127ecba4bc9f424329fd9a7acb9900da3;hpb=8fc2e5cc4eb4c5e8560a461f8d9c52e3a7a23b3d;p=e-mobility-charging-stations-simulator.git

diff --git a/src/ui/web/src/components/charging-stations/CSTable.vue b/src/ui/web/src/components/charging-stations/CSTable.vue
index dc4865a1..ccd7db14 100644
--- a/src/ui/web/src/components/charging-stations/CSTable.vue
+++ b/src/ui/web/src/components/charging-stations/CSTable.vue
@@ -8,6 +8,7 @@
         <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__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>
@@ -16,7 +17,7 @@
     <tbody id="cs-table__body">
       <CSData
         v-for="chargingStation in chargingStations"
-        :key="chargingStation.hashId"
+        :key="chargingStation.stationInfo.hashId"
         :charging-station="chargingStation"
         :idTag="props.idTag"
       />
@@ -26,7 +27,7 @@
 
 <script setup lang="ts">
 import CSData from './CSData.vue';
-import { ChargingStationData } from '@/type/ChargingStationType';
+import type { ChargingStationData } from '@/types/ChargingStationType';
 
 const props = defineProps<{
   chargingStations: Record<string, ChargingStationData>;
@@ -36,11 +37,9 @@ const props = defineProps<{
 
 <style>
 #cs-table {
-  background-color: white;
-
   height: 100%;
   width: 100%;
-
+  background-color: white;
   display: flex;
   flex-grow: 1;
   flex-direction: column;
@@ -51,35 +50,28 @@ const props = defineProps<{
 
 #cs-table__head,
 #cs-table__body {
-  display: block;
-  /* flex-direction: column;
-  justify-content: space-evenly; */
+  height: fit-content;
   width: 100%;
-  min-width: 934px;
-  /* box-sizing: border-box; */
-}
-#cs-table__head {
-  /* width: 100%; */
-  /* display: block; */
+  min-width: 100%;
+  display: block;
 }
+
 #cs-table__body {
-  /* width: 100%; */
-  /* direction: rtl; */
   overflow: visible overlay;
   flex-grow: 1;
 }
 
 .cs-table__row {
   width: 100%;
-  /* display: inline-block; */
   display: flex;
   justify-content: center;
   align-items: center;
-  /* align-content: stretch; */
 }
+
 #cs-table__head .cs-table__row {
   background-color: rgb(194, 188, 188);
 }
+
 .cs-table__row:nth-of-type(even) {
   background-color: rgb(223, 217, 217);
 }
@@ -90,6 +82,7 @@ const props = defineProps<{
 .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 {
@@ -97,36 +90,6 @@ const props = defineProps<{
   width: 20%;
   padding-top: 0.2%;
   padding-bottom: 0.2%;
-  /* background-color: red; */
   text-align: center;
-  /* display: table-cell;
-  vertical-align: middle; */
-}
-.cs-table__action-col {
-  /* min-width: 200px; */
-}
-.cs-table__connector-col {
-  /* min-width: 120px; */
-}
-.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__model-col {
-  /* min-width: 120px; */
-}
-.cs-table__vendor-col {
-  /* min-width: 120px; */
-}
-.cs-table__firmware-col {
-  /* min-width: 120px; */
 }
 </style>