esp_messenger/pc_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Temporaly reverted old test variant

Browse Source
This commit is contained in:
AndreyDanyliuk
2026-06-11 07:41:59 +02:00
parent fef960d4ce
commit 246a08b941
18 changed files with 1950 additions and 788 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
front_new/css/chat.css Normal file
View File

@@ -0,0 +1,3 @@
.chat {
flex-grow: 1;
}

70
front_new/css/chats.css Normal file
View File

@@ -0,0 +1,70 @@
.chats {
width: 200pt;
border-right: 1px black solid;
display: flex;
flex-direction: column;
padding: 5pt;
}
.chatslist {
flex-grow: 1;
overflow-y: auto;
}
#chatslistuser {
display: flex;
flex-direction: column;
gap: 2pt;
padding: 5pt;
margin-top: 5pt;
margin-bottom: 5pt;
user-select: none;
border-radius: 12pt;
cursor: pointer;
}
.active-chatlistuser {
background-color: gainsboro !important;
}
#chatslistuser:hover {
background-color: aliceblue;
}
#chatslistuser:active {
background-color: gainsboro;
}
#chatslistuser > #title {
font-size: 12pt;
font-weight: 600;
}
#chatslistuser > #subtitle {
font-size: 10pt;
}
.espselect {
display: flex;
flex-direction: row;
justify-items: center;
align-items: center;
padding: 0;
}
.espselect > .title {
flex-grow: 1;
padding: 5pt;
}
.espselect > .button {
background-color: rgba(0, 0, 0, 0);
padding: 5pt;
border: none;
user-select: none;
}
.espselect > .button:hover {
background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
}
.espselect > .button:active {
background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));
}

6
front_new/css/elements.css Normal file
View File

@@ -0,0 +1,6 @@
.card {
border: 1px solid black;
padding: 5pt;
border-radius: 20pt;
overflow: hidden;
}

14
front_new/css/main.css Normal file
View File

@@ -0,0 +1,14 @@
* {
padding: 0;
margin: 0;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
body {
width: 100%;
height: 100dvh;
margin: 0;
padding: 0;
overflow: hidden;
display: flex;
}

33
front_new/index.html Normal file
View File

@@ -0,0 +1,33 @@
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="Content-Security-Policy" content="script-src 'self';" />
<title>ESP communication</title>
<link rel="stylesheet" href="./css/main.css" />
<link rel="stylesheet" href="./css/elements.css" />
<link rel="stylesheet" href="./css/chats.css" />
<link rel="stylesheet" href="./css/chat.css" />
<script type="module" src="./js/main.js"></script>
</head>
<body>
<div id="app"></div>
<!-- <div class="chats">
<div class="card espselect">
<p class="title">123</p>
<button class="button">
<img src="./media/icons/settings.svg" />
</button>
</div>
<div class="chatslist">
<div id="chatslistuser">
<p id="title">11221</p>
<p id="subtitle">1212</p>
</div>
</div>
</div>
<div class="chat"></div> -->
</body>
</html>

141
front_new/js/main.js Normal file
View File

@@ -0,0 +1,141 @@
console.log(1);
const { createRoot } = require("react-dom/client");
const React = require("react");
const { Test } = require("./js/test.jsx");
createRoot(document.getElementById("root")).render(
<React.StrictMode>
<Test />
</React.StrictMode>,
);
// const { serialList, serialOpen } = require("./serialapi");
// let serial;
// async function listSerialPorts() {
// document.getElementById("port-select").innerHTML = "";
// const ports = await serialList();
// if (ports.length === 0) {
// document.getElementById("port-select").innerHTML =
// "<option value='' disabled>No ports found</option>";
// }
// document.getElementById("port-select").innerHTML = ports
// .map(
// (port) =>
// `<option value="${port.path}">${port.path} - ${port.manufacturer} ${port.friendlyName}</option>`,
// )
// .join("");
// }
// async function printToConsole(text, variant) {
// let classes = "p-console";
// if (variant === "error") classes = " p-error";
// if (variant === "log") classes = " p-log";
// if (variant === "incoming") classes = " p-incoming";
// if (variant === "outgoing") classes = " p-outgoing";
// document.getElementById("inner-console").innerHTML +=
// `<p class="${classes}">${text}</p>`;
// }
// async function printIncoming(text) {
// if (
// document
// .getElementById("inner-console")
// .lastChild.classList.contains("p-incoming")
// ) {
// document.getElementById("inner-console").lastChild.innerHTML += text;
// } else {
// printToConsole(text, "incoming");
// }
// }
// async function clearConsole() {
// document.getElementById("inner-console").innerHTML = "";
// document.getElementById("console-input").value = "";
// }
// async function openConnection() {
// if (serial) closeConnection();
// const selector = document.getElementById("port-select");
// selector.disabled = true;
// const port = selector.options[selector.selectedIndex].value;
// console.log(port);
// serial = await serialOpen(port);
// serial.on("data", (line) => {
// // const linebrakedData = line.split("\n");
// // if (linebrakedData.length > 1) {
// // } else {
// // addToLastLog(data.toString());
// // }
// // console.log(line);
// // printToConsole(line.toString(), "incoming");
// printIncoming(line.toString());
// });
// serial.on("error", (err) => {
// printToConsole(err, "error");
// closeConnection();
// });
// serial.on("close", () => {
// printToConsole("Connection closed", "log");
// closeConnection();
// });
// serial.on("open", () => {
// printToConsole("Connection opened", "log");
// });
// document.getElementById("open-button").style.display = "none";
// document.getElementById("close-button").style.display = "block";
// }
// async function closeConnection() {
// if (serial) serial.close();
// serial = null;
// document.getElementById("open-button").style.display = "block";
// document.getElementById("close-button").style.display = "none";
// document.getElementById("port-select").disabled = false;
// }
// async function sendToSerial() {
// if (!serial) return;
// document.getElementById("console-input").disabled = true;
// const data = document.getElementById("console-input").value;
// if (document.getElementById("message-mode").checked) {
// document.getElementById("sender").disabled = true;
// const sender = document.getElementById("sender").value;
// const sendData = "ST" + sender + "D" + data;
// serial.write(sendData);
// printToConsole("> " + sendData, "outgoing");
// document.getElementById("sender").disabled = false;
// } else {
// serial.write(data);
// printToConsole("> " + data, "outgoing");
// }
// document.getElementById("console-input").value = "";
// document.getElementById("console-input").disabled = false;
// }
// async function toogleMsgMode() {
// if (document.getElementById("message-mode").checked) {
// document.getElementById("sender").disabled = false;
// } else {
// document.getElementById("sender").disabled = true;
// }
// }
// // document.getElementById("console-input").addEventListener("keyup", (event) => {
// // if (event.key === "Enter") {
// // sendToSerial();
// // }
// // });
// // listSerialPorts();

16
front_new/js/serialapi.js Normal file
View File

@@ -0,0 +1,16 @@
const { SerialPort } = require("serialport");
async function serialList() {
const ports = await SerialPort.list();
return ports; // path, manufacturer, serialNumber, pnpId, locationId, friendlyName, vendorId, productId
}
async function serialOpen(port) {
const serial = new SerialPort({
path: port,
baudRate: 115200,
});
return serial;
}
module.exports = { serialList, serialOpen };

0
front_new/js/storage.js Normal file
View File

9
front_new/js/test.jsx Normal file
View File

@@ -0,0 +1,9 @@
const React = require("react");
const Test = () => {
return (
<div>
<h1>Test</h1>
</div>
);
};

1
front_new/media/icons/settings.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-settings-icon lucide-settings"><path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"/><circle cx="12" cy="12" r="3"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 609 B