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