<template>
<tr class="cs-table__row">
<td class="cs-table__column">
- {{ props.chargingStation.stationInfo.chargingStationId }}
+ {{ chargingStation.stationInfo.chargingStationId }}
</td>
- <td class="cs-table__column">{{ props.chargingStation.started === true ? 'Yes' : 'No' }}</td>
+ <td class="cs-table__column">{{ 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">
- {{ props.chargingStation?.bootNotificationResponse?.status ?? 'Ø' }}
+ {{ chargingStation.bootNotificationResponse?.status ?? 'Ø' }}
</td>
<td class="cs-table__column">
- {{ props.chargingStation.stationInfo.templateName }}
+ {{ chargingStation.stationInfo.templateName }}
</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">{{ chargingStation.stationInfo.chargePointVendor }}</td>
+ <td class="cs-table__column">{{ chargingStation.stationInfo.chargePointModel }}</td>
<td class="cs-table__column">
- {{ props.chargingStation.stationInfo.firmwareVersion ?? 'Ø' }}
+ {{ 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="
- $router.push({
- name: 'set-supervision-url',
- params: {
- hashId: props.chargingStation.stationInfo.hashId,
- chargingStationId: props.chargingStation.stationInfo.chargingStationId
- }
- })
+ <ToggleButton
+ :id="`${chargingStation.stationInfo.hashId}-set-supervision-url`"
+ :shared="true"
+ :on="
+ () => {
+ $router.push({
+ name: 'set-supervision-url',
+ params: {
+ hashId: chargingStation.stationInfo.hashId,
+ chargingStationId: chargingStation.stationInfo.chargingStationId
+ }
+ })
+ }
+ "
+ :off="
+ () => {
+ $router.push({ name: 'charging-stations' })
+ }
+ "
+ @clicked="
+ () => {
+ $emit('need-refresh')
+ }
"
- >Set Supervision Url</Button
>
+ Set Supervision Url
+ </ToggleButton>
<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">
+ <caption></caption>
<thead id="connectors-table__head">
<tr class="connectors-table__row">
<th scope="col" class="connectors-table__column">Identifier</th>
<!-- eslint-disable-next-line vue/valid-v-for -->
<CSConnector
v-for="(connector, index) in getConnectorStatuses()"
- :hash-id="props.chargingStation.stationInfo.hashId"
- :charging-station-id="props.chargingStation.stationInfo.chargingStationId"
+ :hash-id="chargingStation.stationInfo.hashId"
+ :charging-station-id="chargingStation.stationInfo.chargingStationId"
:connector-id="index + 1"
:connector="connector"
:atg-status="getATGStatus(index + 1)"
+ @need-refresh="$emit('need-refresh')"
/>
</tbody>
</table>
</template>
<script setup lang="ts">
-import { getCurrentInstance } from 'vue'
import { useToast } from 'vue-toast-notification'
import CSConnector from '@/components/charging-stations/CSConnector.vue'
import Button from '@/components/buttons/Button.vue'
import type { ChargingStationData, ConnectorStatus, Status } from '@/types'
+import ToggleButton from '@/components/buttons/ToggleButton.vue'
+import { useUIClient } from '@/composables'
const props = defineProps<{
chargingStation: ChargingStationData
}>()
+const $emit = defineEmits(['need-refresh'])
+
const getConnectorStatuses = (): ConnectorStatus[] => {
if (Array.isArray(props.chargingStation.evses) && props.chargingStation.evses.length > 0) {
- const connectorsStatus: ConnectorStatus[] = []
+ const connectorStatuses: 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)
+ connectorStatuses.push(connectorStatus)
}
}
}
- return connectorsStatus
+ return connectorStatuses
}
return props.chargingStation.connectors?.slice(1)
}
}
}
-const uiClient = getCurrentInstance()?.appContext.config.globalProperties.$uiClient
+const uiClient = useUIClient()
const $toast = useToast()
flex-direction: row;
justify-content: center;
align-items: center;
+ border: solid 0.25px black;
}
.connectors-table__row:nth-of-type(even) {
.connectors-table__column {
width: calc(100% / 5);
+ display: flex;
+ flex-direction: column;
text-align: center;
}
</style>