X-Git-Url: https://git.piment-noir.org/?a=blobdiff_plain;f=ui%2Fweb%2Fsrc%2Fcomponents%2Fcharging-stations%2FCSData.vue;h=48edd609b022ae81d6a8d03f6f4b2696baa5fd7a;hb=16c46962f43a692c996b1c89a94dc572fea52d63;hp=d077ca6eba882f74f3ce52ae07d4b2b01ea168a3;hpb=9d76f5ec92a3f5865ef2cefd5a253cab3aa2e5fe;p=e-mobility-charging-stations-simulator.git

diff --git a/ui/web/src/components/charging-stations/CSData.vue b/ui/web/src/components/charging-stations/CSData.vue
index d077ca6e..48edd609 100644
--- a/ui/web/src/components/charging-stations/CSData.vue
+++ b/ui/web/src/components/charging-stations/CSData.vue
@@ -1,84 +1,125 @@
 <template>
-  <tr v-for="(connector, index) in getConnectors()" class="cs-table__row">
-    <CSConnector
-      :hash-id="getHashId()"
-      :connector="connector"
-      :connector-id="index + 1"
-      :transaction-id="connector.transactionId"
-      :id-tag="props.idTag"
-    />
-    <td class="cs-table__column">{{ getId() }}</td>
-    <td class="cs-table__column">{{ getStarted() }}</td>
-    <td class="cs-table__column">{{ getSupervisionUrl() }}</td>
-    <td class="cs-table__column">{{ getWsState() }}</td>
-    <td class="cs-table__column">{{ getRegistrationStatus() }}</td>
-    <td class="cs-table__column">{{ getInfo().templateName }}</td>
-    <td class="cs-table__column">{{ getVendor() }}</td>
-    <td class="cs-table__column">{{ getModel() }}</td>
-    <td class="cs-table__column">{{ getFirmwareVersion() }}</td>
+  <tr class="cs-table__row">
+    <td class="cs-table__column">
+      {{ chargingStation.stationInfo.chargingStationId }}
+    </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">
+      {{ chargingStation.bootNotificationResponse?.status ?? 'Ø' }}
+    </td>
+    <td class="cs-table__column">
+      {{ chargingStation.stationInfo.templateName }}
+    </td>
+    <td class="cs-table__column">{{ chargingStation.stationInfo.chargePointVendor }}</td>
+    <td class="cs-table__column">{{ chargingStation.stationInfo.chargePointModel }}</td>
+    <td class="cs-table__column">
+      {{ chargingStation.stationInfo.firmwareVersion ?? 'Ø' }}
+    </td>
+    <td class="cs-table__column">
+      <Button @click="startChargingStation()">Start Charging Station</Button>
+      <Button @click="stopChargingStation()">Stop Charging Station</Button>
+      <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
+      </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>
+            <th scope="col" class="connectors-table__column">Status</th>
+            <th scope="col" class="connectors-table__column">Transaction</th>
+            <th scope="col" class="connectors-table__column">ATG Started</th>
+            <th scope="col" class="connectors-table__column">Actions</th>
+          </tr>
+        </thead>
+        <tbody id="connectors-table__body">
+          <CSConnector
+            v-for="(connector, index) in getConnectorStatuses()"
+            :key="index + 1"
+            :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>
+    </td>
   </tr>
 </template>
 
 <script setup lang="ts">
-// import { reactive } from 'vue'
+import { useToast } from 'vue-toast-notification'
+
+import Button from '@/components/buttons/Button.vue'
+import ToggleButton from '@/components/buttons/ToggleButton.vue'
 import CSConnector from '@/components/charging-stations/CSConnector.vue'
-import type { ChargingStationData, ChargingStationInfo, ConnectorStatus } from '@/types'
+import { useUIClient } from '@/composables'
+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: ''
-// })
+const $emit = defineEmits(['need-refresh'])
 
-function getConnectors(): ConnectorStatus[] {
+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)
 }
-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 ?? 'Ø'
+const getATGStatus = (connectorId: number): Status | undefined => {
+  return props.chargingStation.automaticTransactionGenerator
+    ?.automaticTransactionGeneratorStatuses?.[connectorId - 1]
 }
-function getStarted(): string {
-  return props.chargingStation.started === true ? 'Yes' : 'No'
-}
-function getSupervisionUrl(): string {
+const getSupervisionUrl = (): string => {
   const supervisionUrl = new URL(props.chargingStation.supervisionUrl)
   return `${supervisionUrl.protocol}//${supervisionUrl.host.split('.').join('.\u200b')}`
 }
-function getWsState(): string {
+const getWSState = (): string => {
   switch (props.chargingStation?.wsState) {
     case WebSocket.CONNECTING:
       return 'Connecting'
@@ -92,13 +133,103 @@ function getWsState(): string {
       return 'Ø'
   }
 }
-function getRegistrationStatus(): string {
-  return props.chargingStation?.bootNotificationResponse?.status ?? 'Ø'
+
+const uiClient = useUIClient()
+
+const $toast = useToast()
+
+const startChargingStation = (): void => {
+  uiClient
+    .startChargingStation(props.chargingStation.stationInfo.hashId)
+    .then(() => {
+      $toast.success('Charging station successfully started')
+    })
+    .catch((error: Error) => {
+      $toast.error('Error at starting charging station')
+      console.error('Error at starting charging station:', error)
+    })
+}
+const stopChargingStation = (): void => {
+  uiClient
+    .stopChargingStation(props.chargingStation.stationInfo.hashId)
+    .then(() => {
+      $toast.success('Charging station successfully stopped')
+    })
+    .catch((error: Error) => {
+      $toast.error('Error at stopping charging station')
+      console.error('Error at stopping charging station:', error)
+    })
+}
+const openConnection = (): void => {
+  uiClient
+    .openConnection(props.chargingStation.stationInfo.hashId)
+    .then(() => {
+      $toast.success('Connection successfully opened')
+    })
+    .catch((error: Error) => {
+      $toast.error('Error at opening connection')
+      console.error('Error at opening connection:', error)
+    })
+}
+const closeConnection = (): void => {
+  uiClient
+    .closeConnection(props.chargingStation.stationInfo.hashId)
+    .then(() => {
+      $toast.success('Connection successfully closed')
+    })
+    .catch((error: Error) => {
+      $toast.error('Error at closing connection')
+      console.error('Error at closing connection:', error)
+    })
+}
+const deleteChargingStation = (): void => {
+  uiClient
+    .deleteChargingStation(props.chargingStation.stationInfo.hashId)
+    .then(() => {
+      $toast.success('Charging station successfully deleted')
+    })
+    .catch((error: Error) => {
+      $toast.error('Error at deleting charging station')
+      console.error('Error at deleting charging station:', error)
+    })
 }
-// function showTagModal(): void {
-//   state.isTagModalVisible = true
-// }
-// function hideTagModal(): void {
-//   state.isTagModalVisible = false
-// }
 </script>
+
+<style>
+#connectors-table {
+  display: flex;
+  flex-direction: column;
+  background-color: white;
+  overflow: auto hidden;
+  border-collapse: collapse;
+  empty-cells: show;
+}
+
+#connectors-table__body {
+  display: flex;
+  flex-direction: column;
+}
+
+.connectors-table__row {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  border: solid 0.25px black;
+}
+
+.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);
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+}
+</style>