From d934e93d93416d8a677600946e58140736e135de Mon Sep 17 00:00:00 2001
From: Sergey Yarkov <serzh.yarkov@gmail.com>
Date: Fri, 27 Oct 2023 16:26:38 +0400
Subject: [PATCH] progress

---
 app/index.js                       |   2 +-
 config/modbus-client.config.js     |   3 -
 controllers/modbus.controller.js   |  34 ++++++++++-
 data.db                            | Bin 20480 -> 20480 bytes
 index.d.ts                         |   7 ---
 public/css/dist.css                |  20 ++++++-
 public/index.html                  |  89 +++++++++++++++++------------
 public/js/app.js                   |  45 +++++++++------
 routes/api.router.js               |  31 ----------
 routes/api/index.js                |  14 +++++
 routes/api/modbus.router.js        |  17 ++++++
 routes/index.js                    |   2 +-
 validators/index.js                |   2 +-
 validators/modbus-device.schema.js |  12 ++++
 14 files changed, 174 insertions(+), 104 deletions(-)
 delete mode 100644 routes/api.router.js
 create mode 100644 routes/api/index.js
 create mode 100644 routes/api/modbus.router.js
 create mode 100644 validators/modbus-device.schema.js

diff --git a/app/index.js b/app/index.js
index 531396e..3c297b6 100644
--- a/app/index.js
+++ b/app/index.js
@@ -4,7 +4,7 @@ import pino from "pino-http";
 /**
  * Routers
  */
-import { apiRouter } from "#root/routes/api.router.js";
+import { apiRouter } from "#root/routes/index.js";
 
 /**
  * Middlewares
diff --git a/config/modbus-client.config.js b/config/modbus-client.config.js
index 7a213cb..087819f 100644
--- a/config/modbus-client.config.js
+++ b/config/modbus-client.config.js
@@ -1,7 +1,4 @@
 import Modbus from "modbus-serial";
 
 const modbusClient = new Modbus();
-
-modbusClient.on("close", () => console.log("Modbus connection closed."));
-
 export default modbusClient;
diff --git a/controllers/modbus.controller.js b/controllers/modbus.controller.js
index 6bb9f09..9ab78df 100644
--- a/controllers/modbus.controller.js
+++ b/controllers/modbus.controller.js
@@ -51,6 +51,7 @@ export const modbusController = {
       if (!modbusClient.isOpen) return res.status(400).json({ message: "Already closed." });
       modbusClient.close(undefined);
       modbusClient.destroy(undefined);
+      return res.status(200).json({ message: 'Closed.' });
     } catch (error) {
       next(error);
     }
@@ -77,7 +78,22 @@ export const modbusController = {
    * @param {import('express').Response} res 
    * @param {import('express').NextFunction} next 
    */
-  async createSlaveDevice(req, res, next) {},
+  async createDevice(req, res, next) {
+    try {
+      await db.run(`INSERT INTO "modbus_slaves" (
+                    "id", 
+                    "name", 
+                    "g_display_reg_addr", 
+                    "g_display_reg_format", 
+                    "g_y_label", 
+                    "is_logging") 
+                    VALUES (?, ?, ?, ?, ?, ?)`, 
+                    [...req.body]);
+      return res.send(200).json({ message: 'Device created.', data: req.body });
+    } catch (error) {
+      next(error)
+    }
+  },
 
   /**
    * Remove modbus slave device
@@ -85,7 +101,21 @@ export const modbusController = {
    * @param {import('express').Response} res 
    * @param {import('express').NextFunction} next 
    */
-  async removeSlaveDevice(req, res, next) {
+  async updateDevice(req, res, next) {
+    try {
+
+    } catch (error) {
+      next(error);
+    }
+  },
+
+  /**
+   * Remove modbus slave device
+   * @param {import('express').Request} req 
+   * @param {import('express').Response} res 
+   * @param {import('express').NextFunction} next 
+   */
+  async removeDevice(req, res, next) {
     try {
       const device = await db.get(`SELECT id FROM "modbus_slaves" WHERE id = ?`, [req.body.id]);
       if (!device) return res.status(404).json({ message: 'Device not found.' });
diff --git a/data.db b/data.db
index 7ab0cfc11f91cbc778b7487c8651f9dbfda1b6e8..87d5438059f248f8afd871641ae29ff8801598c3 100644
GIT binary patch
delta 215
zcmZozz}T>Wae}nqe+C8yRv?Cfu8BIvjQ=+#EaPVhXJ8NC*yzj7F;R_?ok4T~<K{Z?
zR5oc|E(qj=F%b0T`?BgxEO!|A?`#${IL$vXfPL~EdyT~`1_C?`0t^iN&-kZ<;ATOE
zE`C#gc?Je)4wuxj%;Z!BWfPyoq|_V*6QDcH<QW+e62=??5GiAzl=S5D{^C+VhLk)f
NqckT>vmsQ8ApnxuFH8Uc

delta 220
zcmZozz}T>Wae}nqBL)TrRv?Cfx`{f*jE^=ZEaPV>V_+}a*qFo4F_E2-ok4WI^X7Q*
zRJP5JWtEv&t}yUl*(|7VieFiaftx{Cok^5Ql#!Du#5usw(n!zH%tFsV&(Oe_@mq09
zamwcJ`n&=>Ed0|M_@D8g=HI|S9jLXP-$I;)ok5;~L7KxQwJb9^RYBRrCow5CN5Mpr
o87RTXh>$Sm5P(P-OER%DOg`@~E+qkUlRPJ*G$%~6AykPW0J%3a+yDRo

diff --git a/index.d.ts b/index.d.ts
index 257292a..541d82e 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -10,10 +10,3 @@ export type AppConfig = {
   log_interval_ms: number;
 };
 
-export type SlaveModbusDevice = {
-  id: number;
-  name: string;
-  display_reg_addr: number | null;
-  display_reg_format: number | null;
-  is_logging: boolean;
-}
\ No newline at end of file
diff --git a/public/css/dist.css b/public/css/dist.css
index 9bb17d3..feda3cf 100644
--- a/public/css/dist.css
+++ b/public/css/dist.css
@@ -682,6 +682,18 @@ video {
   margin-top: 1.5rem;
 }
 
+.mb-1 {
+  margin-bottom: 0.25rem;
+}
+
+.mb-2 {
+  margin-bottom: 0.5rem;
+}
+
+.mb-10 {
+  margin-bottom: 2.5rem;
+}
+
 .block {
   display: block;
 }
@@ -714,8 +726,12 @@ video {
   height: 100vh;
 }
 
-.max-h-\[520px\] {
-  max-height: 520px;
+.max-h-\[400px\] {
+  max-height: 400px;
+}
+
+.min-h-\[50px\] {
+  min-height: 50px;
 }
 
 .w-1 {
diff --git a/public/index.html b/public/index.html
index 3fc467e..a7fcdce 100644
--- a/public/index.html
+++ b/public/index.html
@@ -27,31 +27,34 @@
           <div class="flex h-full flex-row space-x-2">
             <div class="border-r min-w-[256px] p-2.5 pt-5">
               <div class="flex flex-col space-y-1">
+                <!-- List of devices -->
                 <span class="italic text-sm">Devices:</span>
-                <span x-show="devices.length === 0" class="text-gray-500 text-sm text-center block"
-                  >No devices added.</span
-                >
-                <div class="flex flex-col max-h-[520px] overflow-y-auto space-y-2">
+                <span x-show="devices.length === 0" class="text-gray-500 text-sm text-center block">
+                  No devices added.
+                </span>
+                <div class="flex flex-col max-h-[400px] overflow-y-auto space-y-2">
                   <template x-for="device in devices">
                     <button
                       @click="selectDevice(device)"
                       :class="{'bg-gray-100': selectedDevice?.id === device.id}"
-                      class="w-full select-none border px-2.5 py-3 text-left rounded-sm hover:bg-gray-100 cursor-pointer"
+                      class="w-full min-h-[50px] select-none border px-2.5 py-3 text-left rounded-sm hover:bg-gray-100 cursor-pointer"
                     >
                       <span x-text="device.name" class="text-md font-bold"></span>
                     </button>
                   </template>
                 </div>
-                <button class="w-full text-center border-2 border-dashed rounded-sm hover:bg-gray-50 cursor-pointer">
+                <!-- Add new device -->
+                <button class="w-full min-h-[50px] text-center border-2 border-dashed rounded-sm hover:bg-gray-50 cursor-pointer">
                   <span class="text-4xl text-gray-400 select-none">+</span>
                 </button>
               </div>
               <hr class="my-4" />
+              <!-- Connection -->
               <div>
                 <span class="italic text-sm">Connection:</span>
                 <div class="flex flex-col mt-1.5">
-                  <span class="text-sm"
-                    >Status:
+                  <span class="text-sm">
+                    Status:
                     <b x-show="$store.app.is_opened" class="text-green-700">Opened</b>
                     <b x-show="!$store.app.is_opened" class="text-red-700">Closed</b>
                   </span>
@@ -63,20 +66,27 @@
               <div x-show="selectedDevice != null">
                 <div class="pt-5 border-b flex justify-between items-center pr-6">
                   <h2 x-text="selectedDevice?.name" class="font-bold text-3xl my-2"></h2>
+                  <!-- Device create, delete -->
                   <div>
                     <a href="#">Edit</a>
-                    <a
-                      @click="$store.confirmDialog.open('Remove device', `Delete ${selectedDevice.name}? All logs will be cleared.`, removeDevice, selectedDevice.id)"
+                    <a @click="$dispatch('dialog', { 
+                                          title: 'Remove device', 
+                                          body: `Remove ${selectedDevice.name}? All logs will be cleared.`,
+                                          isOpen: true,
+                                          onConfirm: async () => await removeDevice(selectedDevice.id)
+                                        });"
                       class="text-red-500"
-                      href="#"
-                      >Delete</a
-                    >
+                      href="#">
+                      Delete
+                    </a>
                   </div>
                 </div>
+                <!-- Display Graph -->
                 <div class="mt-4">
                   <div id="div_g" x-ref="graph" style="width: 720px; height: 300px"></div>
                 </div>
                 <hr class="mt-10" />
+                <!-- Display values -->
                 <h2 class="text-xl font-bold mb-3">Display values</h2>
               </div>
               <div class="select-none" x-show="selectedDevice === null">
@@ -90,7 +100,7 @@
 
       <!-- Configuration content -->
       <template x-if="$store.app.currentPage === 'configuration'">
-        <main class="mt-6" x-data="configAppPage" x-bind:hidden="$store.app.currentPage !== 'configuration'">
+        <main class="mt-6 mb-2" x-data="configAppPage" x-bind:hidden="$store.app.currentPage !== 'configuration'">
           <div class="border rounded-sm p-4 max-w-2xl mx-auto">
             <h2 class="text-2xl font-bold">Setup configuration</h2>
             <p class="text-gray-700 italic">
@@ -295,31 +305,34 @@
         </main>
       </template>
 
-      <!-- Confirm dialog -->
-      <div x-show="$store.confirmDialog.isOpen" class="backdrop z-50">
-        <div
-          role="dialog"
-          @click.away="$store.confirmDialog.close()"
-          class="px-4 py-3.5 ml-auto mr-auto mt-20 bg-white max-w-md border rounded-sm"
-        >
-          <div class="flex justify-between items-center">
-            <h2 x-text="$store.confirmDialog.labels.title" class="font-bold text-lg"></h2>
-            <button @click="$store.confirmDialog.close()" aria-label="Close">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-                <path
-                  fill="currentColor"
-                  d="M6.4 19L5 17.6l5.6-5.6L5 6.4L6.4 5l5.6 5.6L17.6 5L19 6.4L13.4 12l5.6 5.6l-1.4 1.4l-5.6-5.6L6.4 19Z"
-                />
-              </svg>
-            </button>
+      <!-- Dialog -->
+      <div x-data="dialog">
+        <template @dialog.window="open($event)" x-if="isOpen">
+          <div class="backdrop z-50">
+              <div
+                role="dialog"
+                class="px-4 py-3.5 ml-auto mr-auto mt-20 bg-white max-w-md border rounded-sm"
+              >
+                <div class="flex justify-between items-center">
+                  <h2 x-text="labels.title" class="font-bold text-lg"></h2>
+                  <button @click="close()" aria-label="Close">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+                      <path
+                        fill="currentColor"
+                        d="M6.4 19L5 17.6l5.6-5.6L5 6.4L6.4 5l5.6 5.6L17.6 5L19 6.4L13.4 12l5.6 5.6l-1.4 1.4l-5.6-5.6L6.4 19Z"
+                      />
+                    </svg>
+                  </button>
+                </div>
+                <hr />
+                <p x-text="labels.body"></p>
+                <div class="mt-4 flex justify-end space-x-2">
+                  <button x-bind:disabled="isLoading" x-bind:class="isLoading && 'opacity-70'" @click="confirm()" class="btn">Confirm</button>
+                  <button @click="close()" class="btn bg-red-500">Cancel</button>
+                </div>
+              </div>
           </div>
-          <hr />
-          <p x-text="$store.confirmDialog.labels.body"></p>
-          <div class="mt-4 flex justify-end space-x-2">
-            <button @click="$store.confirmDialog.confirm()" class="btn">Confirm</button>
-            <button @click="$store.confirmDialog.close()" class="btn bg-red-500">Cancel</button>
-          </div>
-        </div>
+        </template>
       </div>
     </div>
   </body>
diff --git a/public/js/app.js b/public/js/app.js
index b3784d1..4483ffe 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -68,7 +68,7 @@ document.addEventListener("alpine:init", async () => {
           showRoller: false,
           ylabel: "Y Label",
           valueRange: [0.0, 1.8],
-          //labels: ["Time", "Random"],
+          // labels: ["Time", "Random"],
         });
         this.devices = await api.get("/modbus/devices");
         window.intervalId = setInterval(() => {
@@ -86,10 +86,10 @@ document.addEventListener("alpine:init", async () => {
       graphData = [];
       this.selectedDevice = device;
     },
-    async removeDevice(id, ctx) {
+    async removeDevice(id) {
       try {
-        //await api.post('/modbus/remove_device', { id });
-        this.devices = _this.devices.filter((d) => d.id != id);
+        await api.post('/modbus/remove_device', { id });
+        this.devices = this.devices.filter((d) => d.id != id);
         this.selectedDevice = null;
       } catch (error) {
         console.error("Error while removing device.", error);
@@ -128,28 +128,37 @@ document.addEventListener("alpine:init", async () => {
     },
   }));
 
-  Alpine.store("confirmDialog", {
+  Alpine.data("dialog", () => ({
     isOpen: false,
+    isLoading: false,
     labels: {
       title: "Confirm dialog",
       body: "Are you sure you want to perform this action?",
     },
-    cb: {
-      fn: null,
-      args: [],
-    },
-    open(title, body, cb, ...args) {
-      this.isOpen = true;
-      this.labels = { title, body };
-      this.cb.fn = cb;
-      this.cb.args = args;
-    },
+    cb: null,
+    onConfirm: () => undefined,
+    onError: () => undefined,
     confirm() {
-      this.cb.fn && this.cb.fn(...this.cb.args);
-      this.close();
+      if (this.onConfirm.constructor.name === 'AsyncFunction') {
+        this.isLoading = true;
+        this.onConfirm()
+          .then(() => this.close())
+          .catch((e) => this.onError(e))
+          .finally(() => this.isLoading = false)
+      } else {
+        this.onConfirm();
+        this.close();
+      }
     },
     close() {
       this.isOpen = false;
+      this.cb = null;
     },
-  });
+    open(event) {
+      const { detail } = event;
+      this.isOpen = detail.isOpen;
+      this.onConfirm = detail.onConfirm;
+      this.labels = { title: detail.title, body: detail.body };
+    }
+  }));
 });
diff --git a/routes/api.router.js b/routes/api.router.js
deleted file mode 100644
index 611a3a5..0000000
--- a/routes/api.router.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import express from "express";
-
-/**
- * Validators
- */
-import { appConfigSchema, removeModbusDeviceSchema } from "#root/validators/index.js";
-
-/**
- * Controllers
- */
-import { appController, modbusController } from "#root/controllers/index.js";
-
-/**
- * Middlewares
- */
-import { validateBodyMiddleware } from "#root/middlewares/index.js";
-
-const apiRouter = express.Router();
-
-apiRouter.get("/app/config", appController.getConfig);
-apiRouter.patch("/app/config", validateBodyMiddleware(appConfigSchema), appController.updateConfig);
-apiRouter.get("/app/is_configured", appController.isConfigured);
-
-apiRouter.get("/modbus/devices", modbusController.list);
-apiRouter.post('/modbus/remove_device', validateBodyMiddleware(removeModbusDeviceSchema), modbusController.removeSlaveDevice);
-apiRouter.post("/modbus/connect", modbusController.connect);
-apiRouter.post("/modbus/close", modbusController.close);
-apiRouter.get("/modbus/data_stream", modbusController.streamData);
-apiRouter.get('/modbus/status', modbusController.status);
-
-export { apiRouter };
diff --git a/routes/api/index.js b/routes/api/index.js
new file mode 100644
index 0000000..9c90cac
--- /dev/null
+++ b/routes/api/index.js
@@ -0,0 +1,14 @@
+import express from "express";
+import { modbusRouter } from './modbus.router.js'
+import { appConfigSchema } from "#root/validators/index.js";
+import { appController } from "#root/controllers/index.js";
+import { validateBodyMiddleware } from "#root/middlewares/index.js";
+
+const apiRouter = express.Router();
+
+apiRouter.use("/modbus", modbusRouter);
+apiRouter.get("/app/config", appController.getConfig);
+apiRouter.patch("/app/config", validateBodyMiddleware(appConfigSchema), appController.updateConfig);
+apiRouter.get("/app/is_configured", appController.isConfigured);
+
+export { apiRouter };
diff --git a/routes/api/modbus.router.js b/routes/api/modbus.router.js
new file mode 100644
index 0000000..d265dee
--- /dev/null
+++ b/routes/api/modbus.router.js
@@ -0,0 +1,17 @@
+import express from "express";
+import { modbusController } from "#root/controllers/index.js"
+import { modbusDeviceSchema, removeModbusDeviceSchema } from "#root/validators/index.js";
+import { validateBodyMiddleware } from "#root/middlewares/index.js";
+
+const modbusRouter = express.Router();
+
+modbusRouter.get("/devices", modbusController.list);
+modbusRouter.post("/create_device", validateBodyMiddleware(modbusDeviceSchema), modbusController.createDevice)
+modbusRouter.post('/remove_device', validateBodyMiddleware(removeModbusDeviceSchema), modbusController.removeDevice);
+modbusRouter.post('/update_device', validateBodyMiddleware(modbusDeviceSchema), modbusController.updateDevice);
+modbusRouter.post("/connect", modbusController.connect);
+modbusRouter.post("/close", modbusController.close);
+modbusRouter.get("/data_stream", modbusController.streamData);
+modbusRouter.get('/status', modbusController.status);
+
+export { modbusRouter }
\ No newline at end of file
diff --git a/routes/index.js b/routes/index.js
index 1eba398..5833d75 100644
--- a/routes/index.js
+++ b/routes/index.js
@@ -1 +1 @@
-export * from './api.router.js';
+export * from './api/index.js';
diff --git a/validators/index.js b/validators/index.js
index 0a195cf..b85a912 100644
--- a/validators/index.js
+++ b/validators/index.js
@@ -17,4 +17,4 @@ export const appConfigSchema = object({
   log_interval_ms: number().min(1000).required(),
 });
 
-export const removeModbusDeviceSchema = object({ id: number().max(255).min(1).required() }) 
\ No newline at end of file
+export * from './modbus-device.schema.js'
\ No newline at end of file
diff --git a/validators/modbus-device.schema.js b/validators/modbus-device.schema.js
new file mode 100644
index 0000000..e712ec2
--- /dev/null
+++ b/validators/modbus-device.schema.js
@@ -0,0 +1,12 @@
+import { object, number, boolean, string } from 'yup';
+
+export const modbusDeviceSchema = object({
+  id: number().required(),
+  name: string().required(),
+  g_display_reg_addr: number().nullable(),
+  g_display_reg_format: number().oneOf([16, 32]).nullable(),
+  g_y_label: string().max(40).nullable(),
+  is_logging: boolean().required()
+});
+
+export const removeModbusDeviceSchema = modbusDeviceSchema.pick(['id']);
\ No newline at end of file