progress

README.md

@@ -0,0 +1,47 @@
+```
+modbus-logger-app
+├─ .gitignore
+├─ .prettierrc
+├─ app
+│  └─ index.js
+├─ config
+│  ├─ database.config.js
+│  ├─ env.config.js
+│  └─ modbus-client.config.js
+├─ data.db
+├─ index.d.ts
+├─ jsconfig.json
+├─ middlewares
+│  ├─ index.js
+│  └─ validate-body.middleware.js
+├─ nodemon.json
+├─ package-lock.json
+├─ package.json
+├─ public
+│  ├─ css
+│  │  ├─ dist.css
+│  │  ├─ dygraphs.css
+│  │  └─ main.css
+│  ├─ index.html
+│  └─ js
+│     ├─ alpine.js
+│     ├─ app.js
+│     └─ dygraphs.min.js
+├─ routes
+│  ├─ api.router.js
+│  └─ index.js
+├─ scripts
+│  └─ db-init.script.js
+├─ server.js
+├─ services
+│  ├─ app.service.js
+│  └─ index.js
+├─ sql
+│  └─ init-schema.sql
+├─ tailwind.config.js
+├─ utils
+│  └─ database.util.js
+└─ validators
+   └─ index.js
+
+```

events/index.js

@@ -0,0 +1,12 @@
+import EventEmmiter from "events";
+
+const globalEventEmmiter = new EventEmmiter();
+
+/**
+ * Start logging data from modbus slaves
+ */
+globalEventEmmiter.on("log:start", (pollInterval) => {});
+
+globalEventEmmiter.on("log:stop", () => {});
+
+export { globalEventEmmiter };

public/css/dist.css

@@ -587,18 +587,6 @@ video {
   opacity: 0.7;
 }
 
-.sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border-width: 0;
-}
-
 .visible {
   visibility: visible;
 }
@@ -628,32 +616,24 @@ video {
   margin-left: auto;
 }
 
-.mt-3 {
-  margin-top: 0.75rem;
-}
-
 .mr-2 {
   margin-right: 0.5rem;
 }
 
-.mt-2 {
+.mt-16 {
-  margin-top: 0.5rem;
+  margin-top: 4rem;
 }
 
-.mt-6 {
+.mt-3 {
-  margin-top: 1.5rem;
+  margin-top: 0.75rem;
 }
 
 .mt-4 {
   margin-top: 1rem;
 }
 
-.mt-10 {
+.mt-2 {
-  margin-top: 2.5rem;
+  margin-top: 0.5rem;
-}
-
-.mt-16 {
-  margin-top: 4rem;
 }
 
 .block {
@@ -676,18 +656,6 @@ video {
   height: 0.25rem;
 }
 
-.h-8 {
-  height: 2rem;
-}
-
-.h-12 {
-  height: 3rem;
-}
-
-.h-24 {
-  height: 6rem;
-}
-
 .h-20 {
   height: 5rem;
 }
@@ -696,26 +664,6 @@ video {
   width: 0.25rem;
 }
 
-.w-8 {
-  width: 2rem;
-}
-
-.w-12 {
-  width: 3rem;
-}
-
-.w-36 {
-  width: 9rem;
-}
-
-.w-32 {
-  width: 8rem;
-}
-
-.w-24 {
-  width: 6rem;
-}
-
 .w-20 {
   width: 5rem;
 }
@@ -750,6 +698,24 @@ video {
   flex-direction: column;
 }
 
+.space-y-3 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
+}
+
+.space-y-2 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
+}
+
+.space-y-10 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(2.5rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(2.5rem * var(--tw-space-y-reverse));
+}
+
 .rounded-sm {
   border-radius: 0.125rem;
 }
@@ -813,16 +779,16 @@ video {
   font-style: italic;
 }
 
-.text-gray-700 {
-  --tw-text-opacity: 1;
-  color: rgb(55 65 81 / var(--tw-text-opacity));
-}
-
 .text-gray-200 {
   --tw-text-opacity: 1;
   color: rgb(229 231 235 / var(--tw-text-opacity));
 }
 
+.text-gray-700 {
+  --tw-text-opacity: 1;
+  color: rgb(55 65 81 / var(--tw-text-opacity));
+}
+
 .filter {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }

public/index.html

@@ -13,58 +13,152 @@
       <!-- Monitoring content -->
       <main x-bind:hidden="$store.app.currentPage !== 'monitoring'">
         <div>
-          <h1 class="text-3xl font-bold">Main page</h1>
+          <h1 class="text-3xl font-bold">Monitoring page</h1>
+          <button @click="$store.app.currentPage = 'configuration'" class="btn">Config</button>
         </div>
       </main>
 
       <!-- Configuration content -->
-      <main x-bind:hidden="$store.app.currentPage !== 'configuration'">
+      <main x-data="configApp" x-bind:hidden="$store.app.currentPage !== 'configuration'">
-        <div x-data="configAppModal" class="border rounded-sm p-4 max-w-2xl mx-auto">
+        <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">
             Fill in the required configuration settings to connect to the Modbus network.
           </p>
           <hr />
-          <form @submit.prevent="configurateApp()" class="flex flex-col" action="#">
+          <div>
+            <span>app config state:</span>
+            <pre x-text="JSON.stringify($store.app.config, undefined, 2)"></pre>
+          </div>
+          <form @submit.prevent="configurateApp" action="#">
             <div>
-              <label class="block" for="conn_type">Network type</label>
-              <select name="conn_type" id="conn_type">
-                <option value="TCP">TCP</option>
-                <option value="RTU">RTU</option>
-              </select>
-
               <div>
-                <label>IP</label>
+                <label class="block" for="connection_type">Network type</label>
-                <input placeholder="e.g 127.0.0.1" type="text" />
+                <select
-
+                  x-model="$store.app.config.mb_connection_type"
-                <label>Port</label>
+                  name="mb_connection_type"
-                <input placeholder="e.g 502" type="text" />
+                  id="connection_type"
+                  required
+                >
+                  <option value="TCP">TCP</option>
+                  <option value="RTU">RTU</option>
+                </select>
               </div>
 
-              <div>
+              <div x-show="$store.app.config.mb_connection_type === 'TCP'" class="flex flex-col space-y-3">
-                <label>Path</label>
+                <div>
-                <input placeholder="e.g  COM1" type="text" />
+                  <label for="tcp_ip">IP</label>
+                  <input
+                    x-model="$store.app.config.mb_tcp_ip"
+                    id="tcp_ip"
+                    name="tcp_ip"
+                    placeholder="e.g 127.0.0.1"
+                    type="text"
+                    x-bind:required="$store.app.config.mb_connection_type === 'TCP'"
+                  />
+                </div>
 
-                <label>Baud</label>
+                <div>
-                <input placeholder="e.g  9600" type="text" />
+                  <label for="rtu_port">Port</label>
+                  <input
+                    x-model.number="$store.app.config.mb_tcp_port"
+                    id="rtu_port"
+                    name="mb_rtu_port"
+                    placeholder="e.g 502"
+                    type="number"
+                    x-bind:required="$store.app.config.mb_connection_type === 'TCP'"
+                  />
+                </div>
+              </div>
 
-                <label>Parity</label>
+              <div x-show="$store.app.config.mb_connection_type === 'RTU'" class="flex flex-col space-y-3">
-                <select name="parity" id="conn_type">
+                <div>
-                  <option value="even">even</option>
+                  <label for="rtu_path">Path</label>
-                  <option value="odd">odd</option>
+                  <input
-                  <option value="none">none</option>
+                    id="rtu_path"
-                </select>
+                    name="mb_rtu_path"
+                    placeholder="e.g  COM1"
+                    type="text"
+                    x-model="$store.app.config.mb_rtu_path"
+                    x-bind:required="$store.app.config.mb_connection_type === 'RTU'"
+                  />
+                </div>
 
-                <label>Data bits</label>
+                <div>
-                <input placeholder="e.g  8" type="text" />
+                  <label for="rtu_baud">Baud</label>
+                  <select
+                    name="mb_rtu_baud"
+                    id="rtu_baud"
+                    x-model.number="$store.app.config.mb_rtu_baud"
+                    x-bind:required="$store.app.config.mb_connection_type === 'RTU'"
+                  >
+                    <option value="115200">115200</option>
+                    <option value="57600">57600</option>
+                    <option value="38400">38400</option>
+                    <option value="19200">19200</option>
+                    <option selected value="9600">9600</option>
+                    <option value="1200">1200</option>
+                  </select>
+                </div>
 
-                <label>Stop bits</label>
+                <div>
-                <input placeholder="e.g  1" type="text" />
+                  <label for="rtu_parity">Parity</label>
+                  <select
+                    name="mb_rtu_parity"
+                    id="rtu_parity"
+                    x-model.number="$store.app.config.mb_rtu_parity"
+                    x-bind:required="$store.app.config.mb_connection_type === 'RTU'"
+                  >
+                    <option value="even">even</option>
+                    <option value="odd">odd</option>
+                    <option value="none">none</option>
+                  </select>
+                </div>
+
+                <div>
+                  <label for="rtu_data_bits">Data bits</label>
+                  <select
+                    name="mb_rtu_data_bits"
+                    id="rtu_data_bits"
+                    x-model.number="$store.app.config.mb_rtu_data_bits"
+                    x-bind:required="$store.app.config.mb_connection_type === 'RTU'"
+                  >
+                    <option selected value="8">8</option>
+                    <option value="7">7</option>
+                    <option value="6">6</option>
+                    <option value="5">5</option>
+                  </select>
+                </div>
+
+                <div>
+                  <label for="rtu_stop_bits">Stop bits</label>
+                  <select
+                    name="mb_rtu_stop_bits"
+                    id="rtu_stop_bits"
+                    x-model.number="$store.app.config.mb_rtu_stop_bits"
+                    x-bind:required="$store.app.config.mb_connection_type === 'RTU'"
+                  >
+                    <option value="1">1</option>
+                    <option value="2">2</option>
+                  </select>
+                </div>
               </div>
             </div>
 
-            <div class="mt-3 ml-auto">
+            <div class="mt-2">
-              <button class="btn" type="submit">Connect</button>
+              <label for="rtu_path">Log Interval (ms)</label>
+              <input
+                id="log_interval_ms"
+                name="log_interval_ms"
+                type="number"
+                min="1000"
+                x-model.number="$store.app.config.log_interval_ms"
+                required
+              />
+            </div>
+
+            <div class="mt-3">
+              <button class="btn ml-auto" type="submit">Save</button>
             </div>
           </form>
         </div>

public/js/api.js

@@ -0,0 +1,25 @@
+const urlPrefix = "/api";
+
+export default {
+  async patch(path, data) {
+    const response = await fetch(`${urlPrefix}${path}`, {
+      method: "PATCH",
+      body: new URLSearchParams(data),
+      headers: {
+        "Content-Type": "application/x-www-form-urlencoded",
+      },
+    });
+    return response;
+  },
+
+  async post(path, data) {
+    const response = await fetch(`${urlPrefix}${path}`, {
+      method: "POST",
+      body: new URLSearchParams(data),
+      headers: {
+        "Content-Type": "application/x-www-form-urlencoded",
+      },
+    });
+    return response;
+  },
+};

public/js/app.js

@@ -1,18 +1,35 @@
 // @ts-nocheck
 import "./alpine.js";
+import api from "./api.js";
 
 document.addEventListener("alpine:init", async () => {
   Alpine.store("app", {
     is_configured: false,
-    config: null,
+    /**
+     * Default configuration
+     */
+    config: {
+      mb_connection_type: "TCP",
+      mb_tcp_ip: "127.0.0.1",
+      mb_tcp_port: 502,
+      mb_rtu_path: "",
+      mb_rtu_baud: 9600,
+      mb_rtu_data_bits: 8,
+      mb_rtu_stop_bits: 1,
+      mb_rtu_parity: "even",
+      log_interval_ms: 1000,
+    },
     currentPage: "loading",
     async init() {
-      const { config } = await (await fetch("/api/app/config")).json();
+      const config = await fetch("/api/app/config");
-      const { is_configured } = await (await fetch("/api/app/is_configured")).json();
+      const is_configured = await fetch("/api/app/is_configured");
-      this.is_configured = is_configured;
-      this.config = config;
 
-      if (is_configured) {
+      if (config.ok && is_configured.ok) {
+        this.config = (await config.json()).config;
+        this.is_configured = (await is_configured.json()).is_configured;
+      }
+
+      if (this.is_configured) {
         this.currentPage = "monitoring";
         return;
       }
@@ -21,9 +38,52 @@ document.addEventListener("alpine:init", async () => {
     },
   });
 
-  Alpine.data("configAppModal", () => ({
+  Alpine.data("configApp", () => ({
+    selectedConnectionType: "TCP",
+    isLoading: false,
     async configurateApp() {
-      console.log("Configuration app...");
+      try {
+        const {
+          mb_connection_type,
+          mb_tcp_ip,
+          mb_tcp_port,
+          mb_rtu_path,
+          mb_rtu_baud,
+          mb_rtu_parity,
+          mb_rtu_data_bits,
+          mb_rtu_stop_bits,
+          log_interval_ms,
+        } = this.$store.app.config;
+
+        if (mb_connection_type === "TCP") {
+          await api.patch("/app/config", {
+            mb_connection_type,
+            mb_tcp_ip,
+            mb_tcp_port,
+            log_interval_ms,
+          });
+
+          await api.post("/modbus/connect");
+
+          this.$store.app.currentPage = "monitoring";
+          return;
+        }
+
+        if (mb_connection_type === "RTU") {
+          await api.patch("/app/config", {
+            mb_rtu_path,
+            mb_rtu_parity,
+            mb_rtu_data_bits,
+            mb_rtu_stop_bits,
+            mb_rtu_baud,
+          });
+          await api.post("/modbus_connect");
+          this.$store.app.currentPage = "monitoring";
+          return;
+        }
+      } catch (error) {
+        console.error("Error while configuring app.");
+      }
     },
   }));
 });

public/js/services/app.service.js

@@ -0,0 +1,27 @@
+import api from "../api";
+
+export async function configurateApp(config) {
+  const {
+    mb_connection_type,
+    mb_tcp_ip,
+    mb_tcp_port,
+    mb_rtu_path,
+    mb_rtu_parity,
+    mb_rtu_data_bits,
+    mb_rtu_stop_bits,
+    mb_rtu_baud,
+    log_interval_ms,
+  } = config;
+  let data = {};
+
+  if (config.mb_connection_type === "TCP") {
+    data = { mb_connection_type, mb_tcp_ip, mb_tcp_port, log_interval_ms };
+  }
+
+  if (config.mb_connection_type === "RTU") {
+    data = { mb_rtu_path, mb_rtu_parity, mb_rtu_data_bits, mb_rtu_stop_bits, mb_rtu_baud };
+  }
+
+  const configRes = await api.patch("/app/config", data);
+  if (configRes.ok) await api.post("/modbus/connect");
+}

routes/api.router.js

@@ -52,7 +52,7 @@ apiRouter.patch("/app/config", validateBodyMiddleware(appConfigSchema), async (r
         [mb_tcp_ip, mb_tcp_port, payload.log_interval_ms],
       );
 
-      return res.status(200).send("Updated");
+      return res.status(200).send("Config Updated.");
     }
 
     /* Update RTU configuration */
@@ -71,7 +71,7 @@ apiRouter.patch("/app/config", validateBodyMiddleware(appConfigSchema), async (r
         `,
         [mb_rtu_path, mb_rtu_baud, mb_rtu_parity, mb_rtu_data_bits, mb_rtu_stop_bits, payload.log_interval_ms],
       );
-      return res.status(200).send("Updated.");
+      return res.status(200).send("Config updated.");
     }
 
     return res.status(400).send("Undefined Modbus connection type.");