fix(ui): handle missing version in simulator state

[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 30f469d99ebc3ab24cec71de311187b24f14f2cd..fc1f6a5cbb02ee4f550ca85dd347f9e6ce3b1b19 100644 (file)
--- a/ui/web/src/components/charging-stations/CSTable.vue
+++ b/ui/web/src/components/charging-stations/CSTable.vue
@@ -5,10 +5,6 @@
     </caption>
     <thead id="cs-table__head">
       <tr class="cs-table__row">
-        <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>
@@ -17,15 +13,17 @@
         <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>
+        <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"
-        :key="chargingStation.stationInfo?.hashId"
+        v-for="chargingStation in chargingStations"
+        :key="chargingStation.stationInfo.hashId"
         :charging-station="chargingStation"
-        :id-tag="props.idTag"
+        @need-refresh="$emit('need-refresh')"
       />
     </tbody>
   </table>
@@ -35,10 +33,11 @@
 import CSData from '@/components/charging-stations/CSData.vue'
 import type { ChargingStationData } from '@/types'
 
-const props = defineProps<{
+defineProps<{
   chargingStations: ChargingStationData[]
-  idTag: string
 }>()
+
+const $emit = defineEmits(['need-refresh'])
 </script>
 
 <style>
@@ -53,7 +52,6 @@ const props = defineProps<{
   empty-cells: show;
 }
 
-#cs-table__head,
 #cs-table__body {
   height: fit-content;
   width: 100%;
@@ -61,11 +59,9 @@ const props = defineProps<{
   flex-direction: column;
 }
 
-#cs-table__body {
-  overflow: visible overlay;
-}
-
 #cs-table__caption {
+  color: ivory;
+  background-color: black;
   font-size: 1.5rem;
   font-weight: bold;
   padding: 0.5rem;
@@ -75,21 +71,32 @@ const props = defineProps<{
   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.25px black;
 }
 
 .cs-table__row:nth-of-type(even) {
-  background-color: rgb(223, 217, 217);
+  background-color: whitesmoke;
 }
 
 .cs-table__column {
   height: fit-content;
-  width: calc(100% / 13);
+  width: calc((100% - calc(100% / 3)) / 10);
+  display: flex;
+  flex-direction: column;
   text-align: center;
 }
+
+#cs-table__head .cs-table__row {
+  background-color: lightgrey;
+}
+
+.cs-table__connectors-column {
+  height: fit-content;
+  width: calc(100% / 3);
+  display: flex;
+  flex-direction: column;
+}
 </style>