Web UI: add and fix missing commands support

Signed-off-by: Jérôme Benoit <[email protected]>

package.json

@@ -49,7 +49,6 @@
     "prepare": "node prepare.js",
     "prestart": "npm run build",
     "start": "cross-env NODE_ENV=production node -r source-map-support/register dist/start.cjs",
-    "start:server": "npm run build && cross-env NODE_ENV=production node -r source-map-support/register dist/ui/httpd/start.cjs",
     "start:debug": "cross-env NODE_ENV=production node -r source-map-support/register --inspect dist/start.cjs",
     "start:dev": "npm run build:dev && cross-env NODE_ENV=development node -r source-map-support/register dist/start.cjs",
     "start:dev:debug": "npm run build:dev && cross-env NODE_ENV=development node -r source-map-support/register --inspect dist/start.cjs",
@@ -89,7 +88,6 @@
     "ajv-formats": "^2.1.1",
     "basic-ftp": "^5.0.1",
     "chalk": "^4.1.2",
-    "express": "^4.18.1",
     "mnemonist": "^0.39.2",
     "moment": "^2.29.4",
     "mongodb": "^4.9.0",

rollup.config.mjs

@@ -9,7 +9,7 @@ import ts from 'rollup-plugin-ts';
 const isDevelopmentBuild = process.env.BUILD === 'development';
 
 export default {
-  input: ['src/start.ts', 'src/ui/httpd/start.ts', 'src/charging-station/ChargingStationWorker.ts'],
+  input: ['src/start.ts', 'src/charging-station/ChargingStationWorker.ts'],
   output: [
     {
       dir: 'dist',

src/charging-station/Bootstrap.ts

@@ -35,7 +35,7 @@ const moduleName = 'Bootstrap';
 const missingChargingStationsConfigurationExitCode = 1;
 const noChargingStationTemplatesExitCode = 2;
 
-export default class Bootstrap {
+export class Bootstrap {
   private static instance: Bootstrap | null = null;
   private workerImplementation: WorkerAbstract<ChargingStationWorkerData> | null = null;
   private readonly uiServer!: AbstractUIServer;

src/charging-station/ui-server/UIWebSocketServer.ts

@@ -46,7 +46,7 @@ export default class UIWebSocketServer extends AbstractUIServer {
   }
 
   public stop(): void {
-    this.server.close();
+    this.chargingStations.clear();
   }
 
   public sendRequest(request: string): void {

src/charging-station/ui-server/ui-services/AbstractUIService.ts

@@ -1,6 +1,7 @@
 import { RawData } from 'ws';
 
 import BaseError from '../../../exception/BaseError';
+import { Bootstrap } from '../../../internal';
 import { JsonType } from '../../../types/JsonType';
 import {
   ProcedureName,
@@ -13,7 +14,6 @@ import {
   ResponseStatus,
 } from '../../../types/UIProtocol';
 import logger from '../../../utils/Logger';
-import Bootstrap from '../../Bootstrap';
 import UIServiceWorkerBroadcastChannel from '../../UIServiceWorkerBroadcastChannel';
 import type { AbstractUIServer } from '../AbstractUIServer';
 

src/internal.ts

@@ -0,0 +1 @@
+export * from './charging-station/Bootstrap';

src/start.ts

@@ -2,7 +2,7 @@
 
 import chalk from 'chalk';
 
-import Bootstrap from './charging-station/Bootstrap';
+import { Bootstrap } from './internal';
 
 Bootstrap.getInstance()
   .start()

src/ui/web/src/components/buttons/ReloadButton.vue

@@ -1,6 +1,6 @@
 <template>
   <FlatButton>
-    <span style="display: inline-block" :class="{ spin: loading }"> &#8635; </span>
+    <span style="display: inline-block" :class="{ spin: props.loading }"> &#8635; </span>
   </FlatButton>
 </template>
 

src/ui/web/src/components/charging-stations/CSConnector.vue

@@ -1,65 +1,74 @@
 <template>
   <td class="cs-table__action-col">
     <Button @click="startTransaction()">Start Transaction</Button>
-    <!-- <TagInputModal
-      :visibility="state.isTagModalVisible"
-      :tag="state.tag"
-      @close="hideTagModal()"
-      @done="Utils.compose(state.transaction, hideTagModal)()"
+    <!-- <IdTagInputModal
+      :visibility="state.isIdTagModalVisible"
+      :idTag="state.idTag"
+      @close="hideIdTagModal()"
+      @done="Utils.compose(state.transaction, hideIdTagModal)()"
     >
-      Start Charging Session
-    </TagInputModal> -->
-    <!-- TODO: Use transactionId to stop transaction -->
-    <!-- <Button @click="stopTransaction()">Stop Transaction</Button> -->
+      Start Transaction
+    </IdTagInputModal> -->
+    <Button @click="stopTransaction()">Stop Transaction</Button>
+    <Button @click="openConnection()">Open Connection</Button>
+    <Button @click="closeConnection()">Close Connection</Button>
   </td>
   <td class="cs-table__connector-col">{{ connectorId }}</td>
-  <td class="cs-table__status-col">{{ connector.bootStatus }}</td>
+  <td class="cs-table__status-col">{{ connector.status }}</td>
+  <td class="cs-table__transaction-col">{{ connector.transactionStarted }}</td>
 </template>
 
 <script setup lang="ts">
-import TagInputModal from './TagInputModal.vue';
+// import IdTagInputModal from './IdTagInputModal.vue';
 import Button from '../buttons/Button.vue';
 
-import { reactive } from 'vue';
+// import { reactive } from 'vue';
 import UIClient from '@/composable/UIClient';
 import { ConnectorStatus } from '@/type/ChargingStationType';
-import Utils from '@/composable/Utils';
+// import Utils from '@/composable/Utils';
 
 const props = defineProps<{
   hashId: string;
   connector: ConnectorStatus;
   transactionId?: number;
-  connectorId?: number;
-  tag?: string;
+  connectorId: number;
+  idTag?: string;
 }>();
 
-type State = {
-  isTagModalVisible: boolean;
-  tag: string;
-  transaction: () => void;
-};
-const state: State = reactive({
-  isTagModalVisible: false,
-  tag: '',
-  transaction: startTransaction,
-});
+// type State = {
+//   isIdTagModalVisible: boolean;
+//   idTag: string;
+//   transaction: () => void;
+// };
 
-function getTag(transaction: () => void): void {
-  state.transaction = transaction;
-  showTagModal();
-}
+// const state: State = reactive({
+//   isIdTagModalVisible: false,
+//   idTag: '',
+//   transaction: startTransaction,
+// });
 
-function showTagModal(): void {
-  state.isTagModalVisible = true;
-}
-function hideTagModal(): void {
-  state.isTagModalVisible = false;
-}
+// function getIdTag(transaction: () => void): void {
+//   state.transaction = transaction;
+//   showTagModal();
+// }
+
+// function showTagModal(): void {
+//   state.isIdTagModalVisible = true;
+// }
+// function hideIdTagModal(): void {
+//   state.isIdTagModalVisible = false;
+// }
 
 function startTransaction(): void {
-  UIClient.instance.startTransaction(props.hashId, props.connectorId, props.tag);
+  UIClient.instance.startTransaction(props.hashId, props.connectorId, props.idTag);
 }
 function stopTransaction(): void {
   UIClient.instance.stopTransaction(props.hashId, props.transactionId);
 }
+function openConnection(): void {
+  UIClient.instance.openConnection(props.hashId);
+}
+function closeConnection(): void {
+  UIClient.instance.closeConnection(props.hashId);
+}
 </script>

src/ui/web/src/components/charging-stations/CSData.vue

@@ -1,22 +1,23 @@
 <template>
-  <tr v-for="(connector, index) in getConnector()" class="cs-table__row">
+  <tr v-for="(connector, index) in getConnectors()" class="cs-table__row">
     <CSConnector
       :hash-id="getHashId()"
       :connector="connector"
       :connector-id="index + 1"
-      :tag="props.tag"
+      :transaction-id="connector.transactionId"
+      :id-tag="props.idTag"
     />
     <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__model-col">{{ getModel() }}</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 { reactive } from 'vue';
 import Utils from '@/composable/Utils';
 import {
   ChargingStationData,
@@ -26,22 +27,23 @@ import {
 
 const props = defineProps<{
   chargingStation: ChargingStationData;
-  tag: string;
+  idTag: string;
 }>();
 
-type State = {
-  isTagModalVisible: boolean;
-  // tag: string;
-};
-const state: State = reactive({
-  isTagModalVisible: false,
-  // tag: '',
-});
+// type State = {
+//   isTagModalVisible: boolean;
+//   idTag: string;
+// };
+
+// const state: State = reactive({
+//   isTagModalVisible: false,
+//   idTag: '',
+// });
 
 function getHashId(): string {
   return props.chargingStation.hashId;
 }
-function getConnector(): Array<ConnectorStatus> {
+function getConnectors(): ConnectorStatus[] {
   return props.chargingStation.connectors.slice(1);
 }
 function getInfo(): ChargingStationInfo {

src/ui/web/src/components/charging-stations/CSInfoModal.vue

@@ -1,15 +1,16 @@
 <template>
   <Modal :visibility="isVisible">
-    <div class="card-info">vendor: {{ info['chargePointVendor'] }}</div>
+    <div class="card-info">vendor: {{ props.info.chargePointVendor }}</div>
   </Modal>
 </template>
 
 <script setup lang="ts">
 import Modal from '@/components/Modal.vue';
+import { ChargingStationInfo } from '@/type/ChargingStationType';
 
 const props = defineProps<{
   isVisible: boolean;
-  info: any;
+  info: ChargingStationInfo;
 }>();
 </script>