X-Git-Url: https://git.piment-noir.org/?a=blobdiff_plain;f=ui%2Fweb%2Fsrc%2Fcomponents%2Fcharging-stations%2FCSTable.vue;h=49d576e51d0bb510b52c0741b87e165e9872cf95;hb=6dba76a51714e00deefea659141f7119d7f5263f;hp=b4be09912e1c9e2b5a397b163d485b31fa98fec2;hpb=4147bb7ee6c183f244a10431b4dc53d71917f611;p=e-mobility-charging-stations-simulator.git

diff --git a/ui/web/src/components/charging-stations/CSTable.vue b/ui/web/src/components/charging-stations/CSTable.vue
index b4be0991..49d576e5 100644
--- a/ui/web/src/components/charging-stations/CSTable.vue
+++ b/ui/web/src/components/charging-stations/CSTable.vue
@@ -1,100 +1,96 @@
 <template>
   <table id="cs-table">
-    <caption>
-      Charging stations
+    <caption id="cs-table__caption">
+      Charging Stations
     </caption>
     <thead id="cs-table__head">
       <tr class="cs-table__row">
-        <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__started-col">Started</th>
-        <th scope="col" class="cs-table__wsState-col">WebSocket State</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>
+        <th scope="col" class="cs-table__column">Name</th>
+        <th scope="col" class="cs-table__column">Started</th>
+        <th scope="col" class="cs-table__column">Supervision Url</th>
+        <th scope="col" class="cs-table__column">WebSocket State</th>
+        <th scope="col" class="cs-table__column">Registration Status</th>
+        <th scope="col" class="cs-table__column">Template</th>
+        <th scope="col" class="cs-table__column">Vendor</th>
+        <th scope="col" class="cs-table__column">Model</th>
+        <th scope="col" class="cs-table__column">Firmware</th>
+        <th scope="col" class="cs-table__column">Actions</th>
+        <th scope="col" class="cs-table__connectors-column">Connector(s)</th>
       </tr>
     </thead>
     <tbody id="cs-table__body">
       <CSData
-        v-for="chargingStation in props.chargingStations"
+        v-for="chargingStation in chargingStations"
         :key="chargingStation.stationInfo?.hashId"
         :charging-station="chargingStation"
-        :id-tag="props.idTag"
       />
     </tbody>
   </table>
 </template>
 
 <script setup lang="ts">
-import CSData from './CSData.vue';
-import type { ChargingStationData } from '@/types';
+import { defineProps } from 'vue'
+import CSData from '@/components/charging-stations/CSData.vue'
+import type { ChargingStationData } from '@/types'
 
-const props = defineProps<{
-  chargingStations: ChargingStationData[];
-  idTag: string;
-}>();
+defineProps<{
+  chargingStations: ChargingStationData[]
+}>()
 </script>
 
 <style>
 #cs-table {
-  height: 100%;
+  height: fit-content;
   width: 100%;
   background-color: white;
   display: flex;
-  flex-grow: 1;
   flex-direction: column;
   overflow: auto hidden;
   border-collapse: collapse;
   empty-cells: show;
 }
 
-#cs-table__head,
 #cs-table__body {
   height: fit-content;
   width: 100%;
-  min-width: 100%;
-  display: block;
+  display: flex;
+  flex-direction: column;
 }
 
-#cs-table__body {
-  overflow: visible overlay;
-  flex-grow: 1;
+#cs-table__caption {
+  color: white;
+  background-color: black;
+  font-size: 1.5rem;
+  font-weight: bold;
+  padding: 0.5rem;
 }
 
 .cs-table__row {
+  height: fit-content;
   width: 100%;
   display: flex;
+  flex-direction: row;
   justify-content: center;
   align-items: center;
-}
-
-#cs-table__head .cs-table__row {
-  background-color: rgb(194, 188, 188);
+  border: solid 0.5px black;
 }
 
 .cs-table__row:nth-of-type(even) {
-  background-color: rgb(223, 217, 217);
+  background-color: whitesmoke;
 }
 
-.cs-table__action-col,
-.cs-table__connector-col,
-.cs-table__status-col,
-.cs-table__transaction-col,
-.cs-table__name-col,
-.cs-table__started-col,
-.cs-table__wsState-col,
-.cs-table__registration-status-col,
-.cs-table__model-col,
-.cs-table__vendor-col,
-.cs-table__firmware-col {
-  height: 0.1%;
-  width: 20%;
-  padding-top: 0.2%;
-  padding-bottom: 0.2%;
+.cs-table__column {
+  height: fit-content;
+  width: calc(60% / 10);
   text-align: center;
 }
+
+#cs-table__head .cs-table__row {
+  background-color: lightgrey;
+}
+
+.cs-table__connectors-column {
+  height: fit-content;
+  width: 40%;
+}
 </style>