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

   1 <template>
   2   <table id="cs-table">
   3     <caption id="cs-table__caption">
   4       Charging Stations
   5     </caption>
   6     <thead id="cs-table__head">
   7       <tr class="cs-table__row">
   8         <th
   9           class="cs-table__column"
  10           scope="col"
  11         >
  12           Name
  13         </th>
  14         <th
  15           class="cs-table__column"
  16           scope="col"
  17         >
  18           Started
  19         </th>
  20         <th
  21           class="cs-table__column"
  22           scope="col"
  23         >
  24           Supervision Url
  25         </th>
  26         <th
  27           class="cs-table__column"
  28           scope="col"
  29         >
  30           WebSocket State
  31         </th>
  32         <th
  33           class="cs-table__column"
  34           scope="col"
  35         >
  36           Registration Status
  37         </th>
  38         <th
  39           class="cs-table__column"
  40           scope="col"
  41         >
  42           Template
  43         </th>
  44         <th
  45           class="cs-table__column"
  46           scope="col"
  47         >
  48           Vendor
  49         </th>
  50         <th
  51           class="cs-table__column"
  52           scope="col"
  53         >
  54           Model
  55         </th>
  56         <th
  57           class="cs-table__column"
  58           scope="col"
  59         >
  60           Firmware
  61         </th>
  62         <th
  63           class="cs-table__column"
  64           scope="col"
  65         >
  66           Actions
  67         </th>
  68         <th
  69           class="cs-table__connectors-column"
  70           scope="col"
  71         >
  72           Connector(s)
  73         </th>
  74       </tr>
  75     </thead>
  76     <tbody id="cs-table__body">
  77       <CSData
  78         v-for="chargingStation in chargingStations"
  79         :key="chargingStation.stationInfo.hashId"
  80         :charging-station="chargingStation"
  81         @need-refresh="$emit('need-refresh')"
  82       />
  83     </tbody>
  84   </table>
  85 </template>
  86
  87 <script setup lang="ts">
  88 import type { ChargingStationData } from '@/types'
  89
  90 import CSData from '@/components/charging-stations/CSData.vue'
  91
  92 defineProps<{
  93   chargingStations: ChargingStationData[]
  94 }>()
  95
  96 const $emit = defineEmits(['need-refresh'])
  97 </script>
  98
  99 <style>
 100 #cs-table {
 101   height: fit-content;
 102   width: 100%;
 103   background-color: white;
 104   display: flex;
 105   flex-direction: column;
 106   overflow: auto hidden;
 107   border: solid 0.25px black;
 108   border-collapse: collapse;
 109   empty-cells: show;
 110 }
 111
 112 #cs-table__body {
 113   height: fit-content;
 114   width: 100%;
 115   display: flex;
 116   flex-direction: column;
 117 }
 118
 119 #cs-table__caption {
 120   color: ivory;
 121   background-color: black;
 122   font-size: 1.5rem;
 123   font-weight: bold;
 124   padding: 0.5rem;
 125 }
 126
 127 .cs-table__row {
 128   height: fit-content;
 129   width: 100%;
 130   display: flex;
 131   flex-direction: row;
 132   justify-content: center;
 133   align-items: center;
 134   border: solid 0.25px black;
 135 }
 136
 137 .cs-table__row:nth-of-type(even) {
 138   background-color: whitesmoke;
 139 }
 140
 141 .cs-table__column {
 142   height: fit-content;
 143   width: calc((100% - calc(100% / 3)) / 10);
 144   display: flex;
 145   flex-direction: column;
 146   text-align: center;
 147 }
 148
 149 #cs-table__head .cs-table__row {
 150   background-color: lightgrey;
 151 }
 152
 153 .cs-table__connectors-column {
 154   height: fit-content;
 155   width: calc(100% / 3);
 156   display: flex;
 157   flex-direction: column;
 158 }
 159 </style>