Vue UI + UI server

[e-mobility-charging-stations-simulator.git] / src / ui / web / src / components / charging-stations / CSData.vue

diff --git a/src/ui/web/src/components/charging-stations/CSData.vue b/src/ui/web/src/components/charging-stations/CSData.vue
new file mode 100644 (file)
index 0000000..1d2fc02
--- /dev/null
+++ b/src/ui/web/src/components/charging-stations/CSData.vue
@@ -0,0 +1,68 @@
+<template>
+  <tr v-for="(connector, index) in getConnector()" class="cs-table__row">
+    <CSConnector
+      :hash-id="getHashId()"
+      :connector="connector"
+      :connector-id="index + 1"
+      :tag="props.tag"
+    />
+    <td class="cs-table__name-col">{{ getId() }}</td>
+    <td class="cs-table__model-col">{{ getModel() }}</td>
+    <td class="cs-table__vendor-col">{{ getVendor() }}</td>
+    <td class="cs-table__firmware-col">{{ getFirmwareVersion() }}</td>
+  </tr>
+</template>
+
+<script setup lang="ts">
+import CSConnector from './CSConnector.vue';
+
+import { reactive } from 'vue';
+import Utils from '@/composable/Utils';
+import {
+  ChargingStationData,
+  ChargingStationInfo,
+  ConnectorStatus,
+} from '@/type/ChargingStationType';
+
+const props = defineProps<{
+  chargingStation: ChargingStationData;
+  tag: string;
+}>();
+
+type State = {
+  isTagModalVisible: boolean;
+  // tag: string;
+};
+const state: State = reactive({
+  isTagModalVisible: false,
+  // tag: '',
+});
+
+function getHashId(): string {
+  return props.chargingStation.hashId;
+}
+function getConnector(): Array<ConnectorStatus> {
+  return props.chargingStation.connectors.slice(1);
+}
+function getInfo(): ChargingStationInfo {
+  return props.chargingStation.stationInfo;
+}
+function getId(): string {
+  return Utils.ifUndefined<string>(getInfo().chargingStationId, 'Ø');
+}
+function getModel(): string {
+  return getInfo().chargePointModel;
+}
+function getVendor(): string {
+  return getInfo().chargePointVendor;
+}
+function getFirmwareVersion(): string {
+  return Utils.ifUndefined<string>(getInfo().firmwareVersion, 'Ø');
+}
+// function showTagModal(): void {
+//   state.isTagModalVisible = true;
+// }
+// function hideTagModal(): void {
+//   state.isTagModalVisible = false;
+// }
+</script>