<template>
<table id="cs-table">
- <caption>
- Charging stations
+ <caption id="cs-table__caption">
+ Charging Stations
</caption>
<thead id="cs-table__head">
<tr class="cs-table__row">
- <th scope="col" class="cs-table__action-col">Action</th>
- <th scope="col" class="cs-table__connector-col">Connector</th>
- <th scope="col" class="cs-table__status-col">Status</th>
- <th scope="col" class="cs-table__transaction-col">Transaction</th>
- <th scope="col" class="cs-table__name-col">Name</th>
- <th scope="col" class="cs-table__started-col">Started</th>
- <th scope="col" class="cs-table__wsState-col">WebSocket State</th>
- <th scope="col" class="cs-table__registration-status-col">Registration Status</th>
- <th scope="col" class="cs-table__template-col">Template</th>
- <th scope="col" class="cs-table__vendor-col">Vendor</th>
- <th scope="col" class="cs-table__model-col">Model</th>
- <th scope="col" class="cs-table__firmware-col">Firmware Version</th>
+ <th scope="col" class="cs-table__column">Name</th>
+ <th scope="col" class="cs-table__column">Started</th>
+ <th scope="col" class="cs-table__column">Supervision Url</th>
+ <th scope="col" class="cs-table__column">WebSocket State</th>
+ <th scope="col" class="cs-table__column">Registration Status</th>
+ <th scope="col" class="cs-table__column">Template</th>
+ <th scope="col" class="cs-table__column">Vendor</th>
+ <th scope="col" class="cs-table__column">Model</th>
+ <th scope="col" class="cs-table__column">Firmware</th>
+ <th scope="col" class="cs-table__column">Actions</th>
+ <th scope="col" class="cs-table__connectors-column">Connector(s)</th>
</tr>
</thead>
<tbody id="cs-table__body">
<CSData
- v-for="chargingStation in props.chargingStations"
- :key="chargingStation.stationInfo?.hashId"
+ v-for="chargingStation in chargingStations"
+ :key="chargingStation.stationInfo.hashId"
:charging-station="chargingStation"
- :id-tag="props.idTag"
+ @need-refresh="$emit('need-refresh')"
/>
</tbody>
</table>
</template>
<script setup lang="ts">
-import CSData from './CSData.vue'
+import CSData from '@/components/charging-stations/CSData.vue'
import type { ChargingStationData } from '@/types'
-const props = defineProps<{
+defineProps<{
chargingStations: ChargingStationData[]
- idTag: string
}>()
+
+const $emit = defineEmits(['need-refresh'])
</script>
<style>
#cs-table {
- height: 100%;
+ height: fit-content;
width: 100%;
background-color: white;
display: flex;
- flex-grow: 1;
flex-direction: column;
overflow: auto hidden;
border-collapse: collapse;
empty-cells: show;
}
-#cs-table__head,
#cs-table__body {
height: fit-content;
width: 100%;
- min-width: 100%;
- display: block;
+ display: flex;
+ flex-direction: column;
}
-#cs-table__body {
- overflow: visible overlay;
- flex-grow: 1;
+#cs-table__caption {
+ color: ivory;
+ background-color: black;
+ font-size: 1.5rem;
+ font-weight: bold;
+ padding: 0.5rem;
}
.cs-table__row {
+ height: fit-content;
width: 100%;
display: flex;
+ flex-direction: row;
justify-content: center;
align-items: center;
-}
-
-#cs-table__head .cs-table__row {
- background-color: rgb(194, 188, 188);
+ border: solid 0.25px black;
}
.cs-table__row:nth-of-type(even) {
- background-color: rgb(223, 217, 217);
+ background-color: whitesmoke;
}
-.cs-table__action-col,
-.cs-table__connector-col,
-.cs-table__status-col,
-.cs-table__transaction-col,
-.cs-table__name-col,
-.cs-table__started-col,
-.cs-table__wsState-col,
-.cs-table__registration-status-col,
-.cs-table__template-col,
-.cs-table__model-col,
-.cs-table__vendor-col,
-.cs-table__firmware-col {
- height: 0.1%;
- width: 20%;
- padding-top: 0.2%;
- padding-bottom: 0.2%;
+.cs-table__column {
+ height: fit-content;
+ width: calc((100% - calc(100% / 3)) / 10);
+ display: flex;
+ flex-direction: column;
text-align: center;
}
+
+#cs-table__head .cs-table__row {
+ background-color: lightgrey;
+}
+
+.cs-table__connectors-column {
+ height: fit-content;
+ width: calc(100% / 3);
+ display: flex;
+ flex-direction: column;
+}
</style>