<template>
<router-view />
+ <Container id="action">
+ <router-view name="action" />
+ </Container>
</template>
+<script setup lang="ts">
+import Container from '@/components/Container.vue'
+</script>
+
<style>
#app {
height: fit-content;
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
+ display: flex;
+ flex-direction: row;
color: black;
background-color: white;
}
+#action {
+ min-width: max-content;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ margin: 0.1%;
+ padding: 0.1%;
+ border: solid black;
+}
+
body {
- height: fit-content;
- width: fit-content;
margin: 0.005%;
padding: 0.005%;
}
--- /dev/null
+<template>
+ <h2>Action Start Transaction</h2>
+ <h3>Connector {{ connectorId }} on {{ chargingStationId }}</h3>
+ <p>Scan RFID tag:</p>
+ <input id="idtag" v-model="state.idTag" type="text" name="idtag" placeholder="RFID tag" />
+ <br />
+ <Button
+ @click="
+ () => {
+ uiClient
+ .startTransaction(props.hashId, parseInt(props.connectorId), state.idTag)
+ .catch((error: Error) => {
+ // TODO: add code for UI notifications or other error handling logic
+ console.error('Error at starting transaction:', error)
+ })
+ .finally(() => {
+ $router.push({ name: 'charging-stations' })
+ })
+ }
+ "
+ >Start Transaction</Button
+ >
+</template>
+
+<script setup lang="ts">
+import { getCurrentInstance, reactive } from 'vue'
+import Button from '@/components/buttons/Button.vue'
+
+const props = defineProps<{
+ hashId: string
+ chargingStationId: string
+ connectorId: string
+}>()
+
+const state = reactive({
+ idTag: ''
+})
+
+const uiClient = getCurrentInstance()?.appContext.config.globalProperties.$uiClient
+</script>
+
+<style>
+#idtag {
+ text-align: center;
+}
+</style>
{{ atgStatus?.start === true ? 'Yes' : 'No' }}
</td>
<td class="connectors-table__column">
- <Button @click="startTransaction()">Start Transaction</Button>
+ <Button
+ @click="
+ $router.push({
+ name: 'start-transaction',
+ params: { hashId, chargingStationId, connectorId }
+ })
+ "
+ >Start Transaction</Button
+ >
<Button @click="stopTransaction()">Stop Transaction</Button>
<Button @click="startAutomaticTransactionGenerator()">Start ATG</Button>
<Button @click="stopAutomaticTransactionGenerator()">Stop ATG</Button>
const props = defineProps<{
hashId: string
+ chargingStationId: string
connectorId: number
connector: ConnectorStatus
atgStatus?: Status
- transactionId?: number
- idTag?: string
}>()
const uiClient = getCurrentInstance()?.appContext.config.globalProperties.$uiClient
-function startTransaction(): void {
- uiClient.startTransaction(props.hashId, props.connectorId, props.idTag)
-}
function stopTransaction(): void {
- uiClient.stopTransaction(props.hashId, props.transactionId)
+ uiClient.stopTransaction(props.hashId, props.connector.transactionId)
}
function startAutomaticTransactionGenerator(): void {
uiClient.startAutomaticTransactionGenerator(props.hashId, props.connectorId)
<template>
<tr class="cs-table__row">
<td class="cs-table__column">
- {{ props.chargingStation.stationInfo.chargingStationId ?? 'Ø' }}
+ {{ props.chargingStation.stationInfo.chargingStationId }}
</td>
<td class="cs-table__column">{{ props.chargingStation.started === true ? 'Yes' : 'No' }}</td>
<td class="cs-table__column">
<CSConnector
v-for="(connector, index) in getConnectors()"
:hash-id="props.chargingStation.stationInfo.hashId"
+ :charging-station-id="props.chargingStation.stationInfo.chargingStationId"
:connector-id="index + 1"
:connector="connector"
:atg-status="getATGStatus(index + 1)"
- :transaction-id="connector.transactionId"
- :id-tag="props.idTag"
/>
</tbody>
</table>
const props = defineProps<{
chargingStation: ChargingStationData
- idTag: string
}>()
function getConnectors(): ConnectorStatus[] {
v-for="chargingStation in props.chargingStations"
:key="chargingStation.stationInfo?.hashId"
:charging-station="chargingStation"
- :id-tag="props.idTag"
/>
</tbody>
</table>
const props = defineProps<{
chargingStations: ChargingStationData[]
- idTag: string
}>()
</script>
return this.sendRequest(ProcedureName.STOP_SIMULATOR, {})
}
- public async deleteChargingStation(hashId: string): Promise<ResponsePayload> {
- return this.sendRequest(ProcedureName.DELETE_CHARGING_STATIONS, { hashIds: [hashId] })
+ public async listTemplates(): Promise<ResponsePayload> {
+ return this.sendRequest(ProcedureName.LIST_TEMPLATES, {})
}
public async listChargingStations(): Promise<ResponsePayload> {
return this.sendRequest(ProcedureName.LIST_CHARGING_STATIONS, {})
}
+ public async addChargingStations(
+ template: string,
+ numberOfStations: number
+ ): Promise<ResponsePayload> {
+ return this.sendRequest(ProcedureName.ADD_CHARGING_STATIONS, { template, numberOfStations })
+ }
+
+ public async deleteChargingStation(hashId: string): Promise<ResponsePayload> {
+ return this.sendRequest(ProcedureName.DELETE_CHARGING_STATIONS, { hashIds: [hashId] })
+ }
+
public async startChargingStation(hashId: string): Promise<ResponsePayload> {
return this.sendRequest(ProcedureName.START_CHARGING_STATION, { hashIds: [hashId] })
}
console.error('Error:', error)
console.info('Vue instance:', instance)
console.info('Error info:', info)
- // TODO: Add code for UI notifications or other error handling logic
+ // TODO: add code for UI notifications or other error handling logic
}
app.config.globalProperties.$uiClient = UIClient.getInstance(config)
app.config.globalProperties.$uiClient.registerWSonOpenListener(() => {
app.config.globalProperties.$chargingStations = response.chargingStations
})
.catch((error: Error) => {
+ // TODO: add code for UI notifications or other error handling logic
console.error('Error at fetching charging stations:', error)
throw error
})
import { createRouter, createWebHistory } from 'vue-router'
import ChargingStationsView from '@/views/ChargingStationsView.vue'
+import StartTransaction from '@/components/actions/StartTransaction.vue'
+import AddChargingStations from '@/components/actions/AddChargingStations.vue'
export const router = createRouter({
history: createWebHistory(),
components: {
default: ChargingStationsView
}
+ },
+ {
+ path: '/add-charging-stations',
+ name: 'add-charging-stations',
+ components: {
+ default: ChargingStationsView,
+ action: AddChargingStations
+ }
+ },
+ {
+ path: '/start-transaction/:hashId/:chargingStationId/:connectorId',
+ name: 'start-transaction',
+ components: {
+ default: ChargingStationsView,
+ action: StartTransaction
+ },
+ props: { default: false, action: true }
}
]
})
hashId: string
templateIndex: number
templateName: string
- chargingStationId?: string
+ chargingStationId: string
chargeBoxSerialNumber?: string
chargePointSerialNumber?: string
meterSerialNumber?: string
export enum ProcedureName {
START_SIMULATOR = 'startSimulator',
STOP_SIMULATOR = 'stopSimulator',
- DELETE_CHARGING_STATIONS = 'deleteChargingStations',
+ LIST_TEMPLATES = 'listTemplates',
LIST_CHARGING_STATIONS = 'listChargingStations',
+ ADD_CHARGING_STATIONS = 'addChargingStations',
+ DELETE_CHARGING_STATIONS = 'deleteChargingStations',
START_CHARGING_STATION = 'startChargingStation',
STOP_CHARGING_STATION = 'stopChargingStation',
OPEN_CONNECTION = 'openConnection',
<Button id="simulator-button" @click="stopSimulator()">Stop Simulator</Button>
<ReloadButton id="reload-button" :loading="state.isLoading" @click="loadChargingStations()" />
</Container>
- <Container id="inputs-container">
- <input
- id="idtag-field"
- v-model="state.idTag"
- type="text"
- name="idtag-field"
- placeholder="RFID tag"
- />
- </Container>
<CSTable
:charging-stations="
getCurrentInstance()?.appContext.config.globalProperties.$chargingStations ?? []
"
- :id-tag="state.idTag"
/>
</Container>
</template>
import Button from '@/components/buttons/Button.vue'
const state = reactive({
- isLoading: false,
- idTag: ''
+ isLoading: false
})
const app = getCurrentInstance()
}
})
.catch((error: Error) => {
+ // TODO: add code for UI notifications or other error handling logic
console.error('Error at fetching charging stations:', error)
})
.finally(() => {
flex-direction: row;
}
-#inputs-container {
- display: flex;
- flex-direction: row;
-}
-
#reload-button {
flex: auto;
color: white;
#simulator-button {
flex: auto;
}
-
-#idtag-field {
- flex: auto;
- font-size: 1.5rem;
- text-align: center;
-}
</style>
repositories / e-mobility-charging-stations-simulator.git / commitdiff
