refactor(ui): refine tables CSS

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

diff --git a/ui/web/src/components/charging-stations/CSData.vue b/ui/web/src/components/charging-stations/CSData.vue
index c0f07792da49311d81d8d40e283d8ca7ad208ad6..44aed70907e013bba5e0fc6369a9855aa4cc2904 100644 (file)
--- a/ui/web/src/components/charging-stations/CSData.vue
+++ b/ui/web/src/components/charging-stations/CSData.vue
@@ -22,6 +22,7 @@
       <Button @click="stopChargingStation()">Stop Charging Station</Button>
       <Button @click="openConnection()">Open Connection</Button>
       <Button @click="closeConnection()">Close Connection</Button>
+      <Button @click="deleteChargingStation()">Delete Charging Station</Button>
     </td>
     <td class="cs-table__connectors-column">
       <table id="connectors-table">
@@ -147,6 +148,9 @@ function openConnection(): void {
 function closeConnection(): void {
   UIClient.closeConnection(getHashId())
 }
+function deleteChargingStation(): void {
+  UIClient.deleteChargingStation(getHashId())
+}
 // function showTagModal(): void {
 //   state.isTagModalVisible = true
 // }
@@ -158,34 +162,33 @@ function closeConnection(): void {
 <style>
 #connectors-table {
   display: flex;
-  background-color: white;
   flex-direction: column;
+  background-color: white;
   overflow: auto hidden;
   border-collapse: collapse;
   empty-cells: show;
 }
 
-#connectors-table__head,
 #connectors-table__body {
   display: flex;
   flex-direction: column;
 }
 
 .connectors-table__row {
-  min-height: 4rem;
   display: flex;
+  flex-direction: row;
   justify-content: center;
   align-items: center;
 }
 
-#connectors-table__head .connectors-table__row {
-  background-color: lightgrey;
-}
-
 .connectors-table__row:nth-of-type(even) {
   background-color: whitesmoke;
 }
 
+#connectors-table__head .connectors-table__row {
+  background-color: lightgrey;
+}
+
 .connectors-table__column {
   width: calc(100% / 5);
   text-align: center;