feat(ui): display supervision url in charging stations list

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

diff --git a/ui/web/src/components/charging-stations/CSTable.vue b/ui/web/src/components/charging-stations/CSTable.vue
index 11dfb5bb286923fa9feccc03d85cc185ebd26307..6fcf74683384943a8370ad6767adec8ca196ebc4 100644 (file)
--- a/ui/web/src/components/charging-stations/CSTable.vue
+++ b/ui/web/src/components/charging-stations/CSTable.vue
@@ -5,18 +5,19 @@
     </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__template-col">Template</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">Action</th>
+        <th scope="col" class="cs-table__column">Connector</th>
+        <th scope="col" class="cs-table__column">Status</th>
+        <th scope="col" class="cs-table__column">Transaction</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 Version</th>
       </tr>
     </thead>
     <tbody id="cs-table__body">
@@ -42,11 +43,10 @@ const props = defineProps<{
 
 <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;
@@ -57,16 +57,16 @@ const props = defineProps<{
 #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__row {
+  height: fit-content;
   width: 100%;
   display: flex;
   justify-content: center;
@@ -81,22 +81,9 @@ const props = defineProps<{
   background-color: rgb(223, 217, 217);
 }
 
-.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__template-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(100% / 13);
   text-align: center;
 }
 </style>