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