repositories
/
e-mobility-charging-stations-simulator.git
/ blobdiff
commit
grep
author
committer
pickaxe
?
search:
re
summary
|
shortlog
|
log
|
commit
|
commitdiff
|
tree
raw
|
inline
| side by side
Web UI: Refine documentation and code cleanup
[e-mobility-charging-stations-simulator.git]
/
src
/
ui
/
web
/
src
/
views
/
ChargingStationsView.vue
diff --git
a/src/ui/web/src/views/ChargingStationsView.vue
b/src/ui/web/src/views/ChargingStationsView.vue
index fb583e19a5c18edf8c6be0bc18b6c4c07c775da4..0c781566f6022bc150e84f7f7068e1bffe734616 100644
(file)
--- a/
src/ui/web/src/views/ChargingStationsView.vue
+++ b/
src/ui/web/src/views/ChargingStationsView.vue
@@
-1,16
+1,18
@@
<template>
<Container id="charging-stations">
<template>
<Container id="charging-stations">
- <Container id="reload-button_tag-field">
+ <Button id="simulator-button" @click="startSimulator()">Start Simulator</Button>
+ <Button id="simulator-button" @click="stopSimulator()">Stop Simulator</Button>
+ <Container id="inputs-container">
<input
<input
- id="tag-field"
+ id="
id
tag-field"
type="text"
type="text"
- name="tag-field"
- placeholder="
Badge Authentication ID
"
- v-model="state.
t
ag"
+ name="
id
tag-field"
+ placeholder="
RFID tag
"
+ v-model="state.
idT
ag"
/>
<ReloadButton id="reload-button" :loading="state.isLoading" @click="load()" />
</Container>
/>
<ReloadButton id="reload-button" :loading="state.isLoading" @click="load()" />
</Container>
- <CSTable :chargingStations="state.chargingStations" :
tag="state.t
ag" />
+ <CSTable :chargingStations="state.chargingStations" :
idTag="state.idT
ag" />
</Container>
</template>
</Container>
</template>
@@
-26,28
+28,35
@@
import { ChargingStationData } from '@/type/ChargingStationType';
const UIClientInstance = UIClient.instance;
onMounted(() => {
const UIClientInstance = UIClient.instance;
onMounted(() => {
- UIClientInstance.
onOpen
(load);
+ UIClientInstance.
registerWSonOpenListener
(load);
});
type State = {
isLoading: boolean;
});
type State = {
isLoading: boolean;
- chargingStations:
ChargingStationData[]
;
-
t
ag: string;
+ chargingStations:
Record<string, ChargingStationData>
;
+
idT
ag: string;
};
const state: State = reactive({
isLoading: false,
};
const state: State = reactive({
isLoading: false,
- chargingStations:
[]
,
-
t
ag: '',
+ chargingStations:
{}
,
+
idT
ag: '',
});
async function load(): Promise<void> {
if (state.isLoading === true) return;
state.isLoading = true;
});
async function load(): Promise<void> {
if (state.isLoading === true) return;
state.isLoading = true;
- const
l
ist = await UIClientInstance.listChargingStations();
- state.chargingStations =
list
;
+ const
chargingStationsL
ist = await UIClientInstance.listChargingStations();
+ state.chargingStations =
chargingStationsList as unknown as Record<string, ChargingStationData>
;
state.isLoading = false;
}
state.isLoading = false;
}
+
+function startSimulator(): void {
+ UIClientInstance.startSimulator();
+}
+function stopSimulator(): void {
+ UIClientInstance.stopSimulator();
+}
</script>
<style>
</script>
<style>
@@
-56,13
+65,18
@@
async function load(): Promise<void> {
width: 100%;
padding: 30px;
background-color: rgb(233, 227, 227);
width: 100%;
padding: 30px;
background-color: rgb(233, 227, 227);
-
+ display: flex;
flex-direction: column;
flex-direction: column;
- gap: 1%;
+ gap: 0.5%;
+}
+
+#inputs-container {
+ display: flex;
+ justify-content: space-between;
}
#reload-button {
}
#reload-button {
- /* width: 100%; */
+ flex: auto;
padding: 6px 14px;
background-color: rgb(25, 118, 210);
border-radius: 5px;
padding: 6px 14px;
background-color: rgb(25, 118, 210);
border-radius: 5px;
@@
-80,12
+94,11
@@
async function load(): Promise<void> {
background-color: rgb(255, 113, 195);
}
background-color: rgb(255, 113, 195);
}
-#reload-button_tag-field {
- display: flex;
- justify-content: space-between;
+#simulator-button {
+ flex: auto;
}
}
-#tag-field {
- flex
-grow: 1
;
+#
id
tag-field {
+ flex
: auto
;
}
</style>
}
</style>