bubble/modbus-logger
1
0
Fork 0
mirror of https://github.com/sergeyyarkov/modbus-logger.git synced 2026-10-11 02:18:51 +03:00
Code Issues Packages Projects Releases Wiki Activity

progress

Browse Source
This commit is contained in:
Sergey Yarkov 2023-10-24 13:13:22 +03:00
parent e3e031ea1d
commit fa7c94b908
No known key found for this signature in database
GPG Key ID: E91CE1FABC619B6F
9 changed files with 336 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
README.md Normal file
View File

@ -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
```

BIN
data.db
View File

Binary file not shown.

12
events/index.js Normal file
View File

@ -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 };

92
public/css/dist.css
View File

@ -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 {
margin-top: 0.5rem;
.mt-16 {
margin-top: 4rem;
}
.mt-6 {
margin-top: 1.5rem;
.mt-3 {
margin-top: 0.75rem;
}
.mt-4 {
margin-top: 1rem;
}
.mt-10 {
margin-top: 2.5rem;
}
.mt-16 {
margin-top: 4rem;
.mt-2 {
margin-top: 0.5rem;
}
.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);
}

140
public/index.html
View File

@ -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'">
<div x-data="configAppModal" class="border rounded-sm p-4 max-w-2xl mx-auto">
<main x-data="configApp" 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">
Fill in the required configuration settings to connect to the Modbus network.
</p>
<hr />
<form @submit.prevent="configurateApp()" class="flex flex-col" action="#">
<div>
<label class="block" for="conn_type">Network type</label>
<select name="conn_type" id="conn_type">
<span>app config state:</span>
<pre x-text="JSON.stringify($store.app.config, undefined, 2)"></pre>
</div>
<form @submit.prevent="configurateApp" action="#">
<div>
<div>
<label class="block" for="connection_type">Network type</label>
<select
x-model="$store.app.config.mb_connection_type"
name="mb_connection_type"
id="connection_type"
required
>
<option value="TCP">TCP</option>
<option value="RTU">RTU</option>
</select>
</div>
<div x-show="$store.app.config.mb_connection_type === 'TCP'" class="flex flex-col space-y-3">
<div>
<label>IP</label>
<input placeholder="e.g 127.0.0.1" type="text" />
<label>Port</label>
<input placeholder="e.g 502" 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>
<div>
<label>Path</label>
<input placeholder="e.g COM1" 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>Baud</label>
<input placeholder="e.g 9600" type="text" />
<div x-show="$store.app.config.mb_connection_type === 'RTU'" class="flex flex-col space-y-3">
<div>
<label for="rtu_path">Path</label>
<input
id="rtu_path"
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>Parity</label>
<select name="parity" id="conn_type">
<div>
<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>
<div>
<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>
<label>Data bits</label>
<input placeholder="e.g 8" type="text" />
<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>
<label>Stop bits</label>
<input placeholder="e.g 1" type="text" />
<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">
<button class="btn" type="submit">Connect</button>
<div class="mt-2">
<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>

25
public/js/api.js Normal file
View File

@ -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;
},
};

76
public/js/app.js
View File

@ -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 { is_configured } = await (await fetch("/api/app/is_configured")).json();
this.is_configured = is_configured;
this.config = config;
const config = await fetch("/api/app/config");
const is_configured = await fetch("/api/app/is_configured");
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.");
}
},
}));
});

27
public/js/services/app.service.js Normal file
View File

@ -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");
}

4
routes/api.router.js
View File

@ -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.");