src/ui/web/src/components/charging-stations/CSTable.vue

   1 <template>
   2   <table id="cs-table">
   3     <thead id="cs-table__head">
   4       <tr class="cs-table__row">
   5         <th scope="col" class="cs-table__action-col">Action</th>
   6         <th scope="col" class="cs-table__connector-col">Connector</th>
   7         <th scope="col" class="cs-table__status-col">Status</th>
   8         <th scope="col" class="cs-table__transaction-col">Transaction</th>
   9         <th scope="col" class="cs-table__name-col">Name</th>
  10         <th scope="col" class="cs-table__vendor-col">Vendor</th>
  11         <th scope="col" class="cs-table__model-col">Model</th>
  12         <th scope="col" class="cs-table__firmware-col">Firmware Version</th>
  13       </tr>
  14     </thead>
  15     <tbody id="cs-table__body">
  16       <CSData
  17         v-for="chargingStation in chargingStations"
  18         :key="chargingStation.hashId"
  19         :charging-station="chargingStation"
  20         :idTag="props.idTag"
  21       />
  22     </tbody>
  23   </table>
  24 </template>
  25
  26 <script setup lang="ts">
  27 import CSData from './CSData.vue';
  28 import { ChargingStationData } from '@/type/ChargingStationType';
  29
  30 const props = defineProps<{
  31   chargingStations: Record<string, ChargingStationData>;
  32   idTag: string;
  33 }>();
  34 </script>
  35
  36 <style>
  37 #cs-table {
  38   background-color: white;
  39
  40   height: 100%;
  41   width: 100%;
  42
  43   display: flex;
  44   flex-grow: 1;
  45   flex-direction: column;
  46   overflow: auto hidden;
  47   border-collapse: collapse;
  48   empty-cells: show;
  49 }
  50
  51 #cs-table__head,
  52 #cs-table__body {
  53   display: block;
  54   /* flex-direction: column;
  55   justify-content: space-evenly; */
  56   width: 100%;
  57   min-width: 934px;
  58   /* box-sizing: border-box; */
  59 }
  60 #cs-table__head {
  61   /* width: 100%; */
  62   /* display: block; */
  63 }
  64 #cs-table__body {
  65   /* width: 100%; */
  66   /* direction: rtl; */
  67   /* overflow: visible scroll; */
  68   overflow: visible overlay;
  69   flex-grow: 1;
  70 }
  71
  72 .cs-table__row {
  73   width: 100%;
  74   /* display: inline-block; */
  75   display: flex;
  76   /* align-content: stretch; */
  77   /* align-items: baseline; */
  78 }
  79 #cs-table__head .cs-table__row {
  80   background-color: rgb(194, 188, 188);
  81 }
  82 .cs-table__row:nth-of-type(even) {
  83   background-color: rgb(223, 217, 217);
  84 }
  85
  86 .cs-table__action-col,
  87 .cs-table__connector-col,
  88 .cs-table__status-col,
  89 .cs-table__transaction-col,
  90 .cs-table__name-col,
  91 .cs-table__model-col,
  92 .cs-table__vendor-col,
  93 .cs-table__firmware-col {
  94   height: 0.1%;
  95   width: 20%;
  96   padding-top: 0.2%;
  97   padding-bottom: 0.2%;
  98   /* background-color: red; */
  99   text-align: center;
 100   /* display: table-cell;
 101   vertical-align: middle; */
 102 }
 103 .cs-table__action-col {
 104   /* min-width: 200px; */
 105 }
 106 .cs-table__connector-col {
 107   /* min-width: 120px; */
 108 }
 109 .cs-table__status-col {
 110   /* min-width: 120px; */
 111 }
 112 .cs-table__transaction-col {
 113   /* min-width: 120px; */
 114 }
 115 .cs-table__name-col {
 116   /* min-width: 120px; */
 117 }
 118 .cs-table__model-col {
 119   /* min-width: 120px; */
 120 }
 121 .cs-table__vendor-col {
 122   /* min-width: 120px; */
 123 }
 124 .cs-table__firmware-col {
 125   /* min-width: 120px; */
 126 }
 127 </style>