<template>
<tr class="cs-table__row">
- <td class="cs-table__column">{{ getId() }}</td>
- <td class="cs-table__column">{{ getStarted() }}</td>
+ <td class="cs-table__column">
+ {{ props.chargingStation.stationInfo.chargingStationId ?? 'Ø' }}
+ </td>
+ <td class="cs-table__column">{{ props.chargingStation.started === true ? 'Yes' : 'No' }}</td>
<td class="cs-table__column">
{{ getSupervisionUrl() }}
</td>
<td class="cs-table__column">{{ getWsState() }}</td>
<td class="cs-table__column">
- {{ getRegistrationStatus() }}
+ {{ props.chargingStation?.bootNotificationResponse?.status ?? 'Ø' }}
</td>
<td class="cs-table__column">
- {{ getInfo().templateName }}
+ {{ props.chargingStation.stationInfo.templateName }}
</td>
- <td class="cs-table__column">{{ getVendor() }}</td>
- <td class="cs-table__column">{{ getModel() }}</td>
+ <td class="cs-table__column">{{ props.chargingStation.stationInfo.chargePointVendor }}</td>
+ <td class="cs-table__column">{{ props.chargingStation.stationInfo.chargePointModel }}</td>
<td class="cs-table__column">
- {{ getFirmwareVersion() }}
+ {{ props.chargingStation.stationInfo.firmwareVersion ?? 'Ø' }}
</td>
<td class="cs-table__column">
<Button @click="startChargingStation()">Start Charging Station</Button>
<Button @click="stopChargingStation()">Stop Charging Station</Button>
<Button @click="openConnection()">Open Connection</Button>
<Button @click="closeConnection()">Close Connection</Button>
+ <Button @click="deleteChargingStation()">Delete Charging Station</Button>
</td>
<td class="cs-table__connectors-column">
<table id="connectors-table">
<!-- eslint-disable-next-line vue/valid-v-for -->
<CSConnector
v-for="(connector, index) in getConnectors()"
- :hash-id="getHashId()"
+ :hash-id="props.chargingStation.stationInfo.hashId"
:connector-id="index + 1"
:connector="connector"
:atg-status="getATGStatus(index + 1)"
</template>
<script setup lang="ts">
-// import { reactive } from 'vue'
import { getCurrentInstance } from 'vue'
import CSConnector from '@/components/charging-stations/CSConnector.vue'
-import type { ChargingStationData, ChargingStationInfo, ConnectorStatus, Status } from '@/types'
+import Button from '@/components/buttons/Button.vue'
+import type { ChargingStationData, ConnectorStatus, Status } from '@/types'
const props = defineProps<{
chargingStation: ChargingStationData
idTag: string
}>()
-// type State = {
-// isTagModalVisible: boolean
-// idTag: string
-// }
-
-// const state: State = reactive({
-// isTagModalVisible: false,
-// idTag: ''
-// })
-
-function getStarted(): string {
- return props.chargingStation.started === true ? 'Yes' : 'No'
+function getConnectors(): ConnectorStatus[] {
+ if (Array.isArray(props.chargingStation.evses) && props.chargingStation.evses.length > 0) {
+ const connectorsStatus: ConnectorStatus[] = []
+ for (const [evseId, evseStatus] of props.chargingStation.evses.entries()) {
+ if (evseId > 0 && Array.isArray(evseStatus.connectors) && evseStatus.connectors.length > 0) {
+ for (const connectorStatus of evseStatus.connectors) {
+ connectorsStatus.push(connectorStatus)
+ }
+ }
+ }
+ return connectorsStatus
+ }
+ return props.chargingStation.connectors?.slice(1)
}
function getATGStatus(connectorId: number): Status | undefined {
return props.chargingStation.automaticTransactionGenerator
?.automaticTransactionGeneratorStatuses?.[connectorId - 1]
}
-function getInfo(): ChargingStationInfo {
- return props.chargingStation.stationInfo
-}
-function getHashId(): string {
- return getInfo().hashId
-}
-function getId(): string {
- return getInfo().chargingStationId ?? 'Ø'
-}
-function getModel(): string {
- return getInfo().chargePointModel
-}
-function getVendor(): string {
- return getInfo().chargePointVendor
-}
-function getFirmwareVersion(): string {
- return getInfo().firmwareVersion ?? 'Ø'
-}
function getSupervisionUrl(): string {
const supervisionUrl = new URL(props.chargingStation.supervisionUrl)
return `${supervisionUrl.protocol}//${supervisionUrl.host.split('.').join('.\u200b')}`
return 'Ø'
}
}
-function getRegistrationStatus(): string {
- return props.chargingStation?.bootNotificationResponse?.status ?? 'Ø'
-}
-function getConnectors(): ConnectorStatus[] {
- if (Array.isArray(props.chargingStation.evses) && props.chargingStation.evses.length > 0) {
- const connectorsStatus: ConnectorStatus[] = []
- for (const [evseId, evseStatus] of props.chargingStation.evses.entries()) {
- if (evseId > 0 && Array.isArray(evseStatus.connectors) && evseStatus.connectors.length > 0) {
- for (const connectorStatus of evseStatus.connectors) {
- connectorsStatus.push(connectorStatus)
- }
- }
- }
- return connectorsStatus
- }
- return props.chargingStation.connectors?.slice(1)
-}
-const UIClient = getCurrentInstance()?.appContext.config.globalProperties.$UIClient
+const uiClient = getCurrentInstance()?.appContext.config.globalProperties.$uiClient
function startChargingStation(): void {
- UIClient.startChargingStation(getHashId())
+ uiClient.startChargingStation(props.chargingStation.stationInfo.hashId)
}
function stopChargingStation(): void {
- UIClient.stopChargingStation(getHashId())
+ uiClient.stopChargingStation(props.chargingStation.stationInfo.hashId)
}
function openConnection(): void {
- UIClient.openConnection(getHashId())
+ uiClient.openConnection(props.chargingStation.stationInfo.hashId)
}
function closeConnection(): void {
- UIClient.closeConnection(getHashId())
+ uiClient.closeConnection(props.chargingStation.stationInfo.hashId)
+}
+function deleteChargingStation(): void {
+ uiClient.deleteChargingStation(props.chargingStation.stationInfo.hashId)
}
-// function showTagModal(): void {
-// state.isTagModalVisible = true
-// }
-// function hideTagModal(): void {
-// state.isTagModalVisible = false
-// }
</script>
<style>
#connectors-table {
display: flex;
- background-color: white;
flex-direction: column;
+ background-color: white;
overflow: auto hidden;
border-collapse: collapse;
empty-cells: show;
}
-#connectors-table__head,
#connectors-table__body {
display: flex;
flex-direction: column;
.connectors-table__row {
display: flex;
+ flex-direction: row;
justify-content: center;
align-items: center;
}
-#connectors-table__head .connectors-table__row {
- background-color: lightgrey;
-}
-
.connectors-table__row:nth-of-type(even) {
background-color: whitesmoke;
}
+#connectors-table__head .connectors-table__row {
+ background-color: lightgrey;
+}
+
.connectors-table__column {
width: calc(100% / 5);
text-align: center;