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 49d576e51d0bb510b52c0741b87e165e9872cf95..fc1f6a5cbb02ee4f550ca85dd347f9e6ce3b1b19 100644 (file)
--- a/ui/web/src/components/charging-stations/CSTable.vue
+++ b/ui/web/src/components/charging-stations/CSTable.vue
@@ -21,21 +21,23 @@
     <tbody id="cs-table__body">
       <CSData
         v-for="chargingStation in chargingStations"
-        :key="chargingStation.stationInfo?.hashId"
+        :key="chargingStation.stationInfo.hashId"
         :charging-station="chargingStation"
+        @need-refresh="$emit('need-refresh')"
       />
     </tbody>
   </table>
 </template>
 
 <script setup lang="ts">
-import { defineProps } from 'vue'
 import CSData from '@/components/charging-stations/CSData.vue'
 import type { ChargingStationData } from '@/types'
 
 defineProps<{
   chargingStations: ChargingStationData[]
 }>()
+
+const $emit = defineEmits(['need-refresh'])
 </script>
 
 <style>
@@ -58,7 +60,7 @@ defineProps<{
 }
 
 #cs-table__caption {
-  color: white;
+  color: ivory;
   background-color: black;
   font-size: 1.5rem;
   font-weight: bold;
@@ -72,7 +74,7 @@ defineProps<{
   flex-direction: row;
   justify-content: center;
   align-items: center;
-  border: solid 0.5px black;
+  border: solid 0.25px black;
 }
 
 .cs-table__row:nth-of-type(even) {
@@ -81,7 +83,9 @@ defineProps<{
 
 .cs-table__column {
   height: fit-content;
-  width: calc(60% / 10);
+  width: calc((100% - calc(100% / 3)) / 10);
+  display: flex;
+  flex-direction: column;
   text-align: center;
 }
 
@@ -91,6 +95,8 @@ defineProps<{
 
 .cs-table__connectors-column {
   height: fit-content;
-  width: 40%;
+  width: calc(100% / 3);
+  display: flex;
+  flex-direction: column;
 }
 </style>