refactor + query factory
prplV
parent
9b01e15817
commit
e2c4e322ed
289
index.html
289
index.html
|
|
@ -4,137 +4,9 @@
|
|||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Буревестник-client</title>
|
||||
<script src="jq.js"></script>
|
||||
<style>
|
||||
body {
|
||||
background-color: #2E2E2E;
|
||||
color: #E0E0E0;
|
||||
font-family: Arial, sans-serif;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
}
|
||||
h1 {
|
||||
text-align: center;
|
||||
font-size: 2vw;
|
||||
}
|
||||
.global-cont {
|
||||
position: absolute;
|
||||
top: 0%;
|
||||
height: 100%;
|
||||
width: 67%;
|
||||
left: 1%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.nc-fields{
|
||||
position: relative;
|
||||
width: 90%;
|
||||
left: 0%;
|
||||
top: 3%;
|
||||
background-color: #1E1E1E;
|
||||
padding: 3%;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
box-shadow: 0px 0.5vw 1vw #1f1f1f;
|
||||
}
|
||||
.container {
|
||||
position: relative;
|
||||
width: 90%;
|
||||
left: 0%;
|
||||
top: 10%;
|
||||
background-color: #1E1E1E;
|
||||
padding: 3%;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
box-shadow: 0px 0.5vw 1vw #1f1f1f;
|
||||
}
|
||||
.input-group {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
input[type="text"], input[type="number"] {
|
||||
background-color: #333;
|
||||
/* border: 1px solid #555; */
|
||||
color: #E0E0E0;
|
||||
padding: 8px;
|
||||
border-radius: 4px;
|
||||
flex: 1;
|
||||
/* width: 30%; */
|
||||
}
|
||||
button {
|
||||
background-color: #555;
|
||||
color: #E0E0E0;
|
||||
border: none;
|
||||
padding: 10px 15px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
width: 30%;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #777;
|
||||
}
|
||||
.checkbox-group, .radio-group {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
align-items: center;
|
||||
}
|
||||
.log {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 3%;
|
||||
background-color: #111;
|
||||
height: 90vh;
|
||||
max-height: 90vh;
|
||||
width: 30%;
|
||||
border-radius: 4px;
|
||||
padding: 10px;
|
||||
overflow-y: scroll;
|
||||
color: green;
|
||||
font-size: 1.4vw;
|
||||
padding: 2%;
|
||||
padding-top: 2%;
|
||||
box-shadow: 0px 0.5vw 1vw #1f1f1f;
|
||||
}
|
||||
.ipaddr {
|
||||
width: 80%;
|
||||
max-width: 80%;
|
||||
}
|
||||
.port {
|
||||
width: 15%;
|
||||
max-width: 15%;
|
||||
}
|
||||
.btn-pldconn .btn-plddatawr {
|
||||
width: 15%;
|
||||
max-width: 15%;
|
||||
font-size: 1.4vw;
|
||||
text-align: center;
|
||||
}
|
||||
.reg-data {
|
||||
width: 80%;
|
||||
max-width: 80%;
|
||||
}
|
||||
.reg-addr {
|
||||
width: 15%;
|
||||
max-width: 15%;
|
||||
}
|
||||
p{
|
||||
display: inline-block;
|
||||
}
|
||||
.invalid-args {
|
||||
border: 1px solid rgb(110, 0, 0);
|
||||
}
|
||||
.valid-args {
|
||||
border: 1px solid #555;
|
||||
}
|
||||
</style>
|
||||
<script src="./thirdparty/jq.js"></script>
|
||||
<script src="./thirdparty/index.js"></script>
|
||||
<link rel="stylesheet" href="./thirdparty/index.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="global-cont">
|
||||
|
|
@ -143,7 +15,7 @@
|
|||
<div class="input-group">
|
||||
<input type="text" placeholder="IP address" id="ipAddress" class="ipaddr valid-args">
|
||||
<input type="number" placeholder="Port" id="port" class="port valid-args">
|
||||
<button onclick="connect()" class="btn-pldconn">Connect</button>
|
||||
<button class="btn-pldconn" id="connect-btn">Connect</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
|
|
@ -163,163 +35,12 @@
|
|||
</div>
|
||||
<input type="text" placeholder="Data" id="data" class="reg-data valid-args">
|
||||
<input type="text" placeholder="Reg-address" id="address" class="reg-addr valid-args">
|
||||
<button onclick="send()" class="btn-plddatawr">Send</button>
|
||||
<button class="btn-plddatawr" id="send-btn">Send</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="log" id="log">
|
||||
Logs will appear here... <br>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var isConnected = false;
|
||||
var apiIsAlive = false;
|
||||
// TODO: change to valid url
|
||||
var apiServer = "localhost"
|
||||
|
||||
function hello_api() {
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: `${apiServer}/hello`,
|
||||
data: "",
|
||||
dataType: "json",
|
||||
contentType: "application/json",
|
||||
success: function(data){
|
||||
ok_msg_conn("API-Server is running. Connection established");
|
||||
apiIsAlive = true;
|
||||
},
|
||||
error: function(er){
|
||||
err_msg_conn(`API-Server unreachable. Error: ${JSON.stringify(er)}`);
|
||||
}
|
||||
});
|
||||
}
|
||||
function connect_pld(ip, port) {
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: `${apiServer}/connect`,
|
||||
data: JSON.stringify({
|
||||
"ip_address": ip,
|
||||
"port": port
|
||||
}),
|
||||
dataType: "json",
|
||||
contentType: "application/json",
|
||||
success: function(data){
|
||||
ok_msg_conn(`Successfully connected to PLD ${ip}:${port}`);
|
||||
isConnected = true;
|
||||
return true;
|
||||
},
|
||||
error: function(er){
|
||||
err_msg_conn(`Cannot open web-socket with ${ip}:${port}. Error: ${JSON.stringify(er)}`);
|
||||
return false;
|
||||
}
|
||||
});
|
||||
}
|
||||
function sendData(data, address, wrd, inc) {
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: `${apiServer}/send`,
|
||||
data: JSON.stringify({
|
||||
"request_type": "0x01",
|
||||
"data_size": "ryzhi xyi",
|
||||
"additional_header": {
|
||||
"wrd": wrd,
|
||||
"auto_increment": inc,
|
||||
"register_address": address
|
||||
},
|
||||
"data" : data,
|
||||
}),
|
||||
dataType: "json",
|
||||
contentType: "application/json",
|
||||
success: function(data){
|
||||
ok_msg_conn(`Successfully sent data to ${address}`);
|
||||
return true;
|
||||
},
|
||||
error: function(er){
|
||||
err_msg_conn(`Cannot send data to ${address}. Error: ${JSON.stringify(er)}`);
|
||||
return false;
|
||||
}
|
||||
});
|
||||
}
|
||||
hello_api();
|
||||
|
||||
function connect() {
|
||||
if (!apiIsAlive) {
|
||||
err_msg_conn("Cannot work without API-Server. Check it health...");
|
||||
return;
|
||||
}
|
||||
const ipAddress = document.getElementById('ipAddress').value;
|
||||
const port = document.getElementById('port').value;
|
||||
if (ipAddress == "" || port == "") {
|
||||
err_msg_conn(`Cannot connect to PLD. Empty fields IP or Port`);
|
||||
invalid('ipAddress');
|
||||
invalid('port');
|
||||
}
|
||||
else {
|
||||
ok_msg_conn(`Connecting to ${ipAddress}:${port}...`);
|
||||
if (connect_pld(ipAddress, port)) {
|
||||
valid('ipAddress');
|
||||
valid('port');
|
||||
} else {
|
||||
invalid('ipAddress');
|
||||
invalid('port');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function send() {
|
||||
if (!apiIsAlive) {
|
||||
err_msg_conn("Cannot work without API-Server. Check it health...");
|
||||
return;
|
||||
}
|
||||
const address = document.getElementById('address').value;
|
||||
const data = document.getElementById('data').value;
|
||||
const wrd = () => document.querySelector('input[type=radio]:checked')?.value === "rd";
|
||||
const inc = document.querySelector('#inc').checked;
|
||||
|
||||
if (isConnected) {
|
||||
valid('ipAddress');
|
||||
valid('port');
|
||||
if (address == "" || data == "") {
|
||||
err_msg_conn(`Cannot send data to PLD. Empty fields Data or Segment-address`);
|
||||
invalid('address');
|
||||
invalid('data');
|
||||
}
|
||||
else {
|
||||
ok_msg_conn(`Sending data to address ${address}`);
|
||||
valid('address');
|
||||
valid('data');
|
||||
if (!sendData(data, address, wrd(), inc)) {
|
||||
invalid('address');
|
||||
invalid('data');
|
||||
}
|
||||
}
|
||||
} else {
|
||||
invalid('ipAddress');
|
||||
invalid('port');
|
||||
err_msg_conn(`Cannot send any data! Connect to PLD first`);
|
||||
}
|
||||
}
|
||||
function valid(id) {
|
||||
var obj = document.getElementById(id).classList;
|
||||
if (obj.contains('invalid-args')) {
|
||||
obj.remove('invalid-args');
|
||||
obj.add('valid-args');
|
||||
}
|
||||
}
|
||||
function invalid(id) {
|
||||
var obj = document.getElementById(id).classList;
|
||||
if (obj.contains("valid-args")) {
|
||||
obj.remove("valid-args");
|
||||
obj.add("invalid-args");
|
||||
}
|
||||
}
|
||||
function ok_msg_conn(data) {
|
||||
document.getElementById('log').innerHTML += String(`<p style="color:white"><span style="color:green"><b>[OK]</b></span> ${new Date().toLocaleString()} : ${data}</p><br>`)
|
||||
}
|
||||
function err_msg_conn(data) {
|
||||
document.getElementById('log').innerHTML += String(`<p style="color:white"><span style="color:red"><b>[ERROR]</b></span> ${new Date().toLocaleString()} : ${data}</p><br>`)
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,128 @@
|
|||
body {
|
||||
background-color: #2E2E2E;
|
||||
color: #E0E0E0;
|
||||
font-family: Arial, sans-serif;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
}
|
||||
h1 {
|
||||
text-align: center;
|
||||
font-size: 2vw;
|
||||
}
|
||||
.global-cont {
|
||||
position: absolute;
|
||||
top: 0%;
|
||||
height: 100%;
|
||||
width: 67%;
|
||||
left: 1%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.nc-fields{
|
||||
position: relative;
|
||||
width: 90%;
|
||||
left: 0%;
|
||||
top: 3%;
|
||||
background-color: #1E1E1E;
|
||||
padding: 3%;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
box-shadow: 0px 0.5vw 1vw #1f1f1f;
|
||||
}
|
||||
.container {
|
||||
position: relative;
|
||||
width: 90%;
|
||||
left: 0%;
|
||||
top: 10%;
|
||||
background-color: #1E1E1E;
|
||||
padding: 3%;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
box-shadow: 0px 0.5vw 1vw #1f1f1f;
|
||||
}
|
||||
.input-group {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
input[type="text"], input[type="number"] {
|
||||
background-color: #333;
|
||||
/* border: 1px solid #555; */
|
||||
color: #E0E0E0;
|
||||
padding: 8px;
|
||||
border-radius: 4px;
|
||||
flex: 1;
|
||||
/* width: 30%; */
|
||||
}
|
||||
button {
|
||||
background-color: #555;
|
||||
color: #E0E0E0;
|
||||
border: none;
|
||||
padding: 10px 15px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
width: 30%;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #777;
|
||||
}
|
||||
.checkbox-group, .radio-group {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
align-items: center;
|
||||
}
|
||||
.log {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 3%;
|
||||
background-color: #111;
|
||||
height: 90vh;
|
||||
max-height: 90vh;
|
||||
width: 30%;
|
||||
border-radius: 4px;
|
||||
padding: 10px;
|
||||
overflow-y: scroll;
|
||||
color: green;
|
||||
font-size: 1.4vw;
|
||||
padding: 2%;
|
||||
padding-top: 2%;
|
||||
box-shadow: 0px 0.5vw 1vw #1f1f1f;
|
||||
}
|
||||
.ipaddr {
|
||||
width: 80%;
|
||||
max-width: 80%;
|
||||
}
|
||||
.port {
|
||||
width: 15%;
|
||||
max-width: 15%;
|
||||
}
|
||||
.btn-pldconn .btn-plddatawr {
|
||||
width: 15%;
|
||||
max-width: 15%;
|
||||
font-size: 1.4vw;
|
||||
text-align: center;
|
||||
}
|
||||
.reg-data {
|
||||
width: 80%;
|
||||
max-width: 80%;
|
||||
}
|
||||
.reg-addr {
|
||||
width: 15%;
|
||||
max-width: 15%;
|
||||
}
|
||||
p{
|
||||
display: inline-block;
|
||||
}
|
||||
.invalid-args {
|
||||
border: 1px solid rgb(110, 0, 0);
|
||||
}
|
||||
.valid-args {
|
||||
border: 1px solid #555;
|
||||
}
|
||||
|
|
@ -0,0 +1,229 @@
|
|||
$(window).ready(function () {
|
||||
var isConnected = false;
|
||||
var apiIsAlive = true;
|
||||
// TODO: change to valid url
|
||||
var apiServer = "http://localhost:8080";
|
||||
|
||||
class Hello {
|
||||
constructor() {
|
||||
this.type = "hello";
|
||||
}
|
||||
}
|
||||
class Connect {
|
||||
constructor(ip, port) {
|
||||
this.type = "connect";
|
||||
// string
|
||||
this.ip = ip;
|
||||
// string
|
||||
this.port = port;
|
||||
}
|
||||
}
|
||||
class Send {
|
||||
constructor(operation, inc, register_address, data) {
|
||||
this.type = "send";
|
||||
// bool: true -> wr | false -> rd
|
||||
this.wrd = operation;
|
||||
// bool
|
||||
this.inc = inc;
|
||||
// string
|
||||
this.register_address = register_address;
|
||||
// string
|
||||
this.data = data;
|
||||
}
|
||||
}
|
||||
class Close {
|
||||
constructor() {
|
||||
this.type = "close";
|
||||
}
|
||||
}
|
||||
class PacketFabric {
|
||||
constructor() {}
|
||||
new_hello() {
|
||||
return new Hello();
|
||||
}
|
||||
new_connect(ip, port) {
|
||||
return new Connect(ip, port);
|
||||
}
|
||||
new_send(operation, inc, register_address, data) {
|
||||
return new Send(operation, inc, register_address, data);
|
||||
}
|
||||
new_close() {
|
||||
return new Close();
|
||||
}
|
||||
}
|
||||
|
||||
const fabric = new PacketFabric();
|
||||
|
||||
function dataConstructor(packet){
|
||||
switch (packet.type) {
|
||||
case 'hello':
|
||||
return JSON.stringify({});
|
||||
case 'close':
|
||||
return JSON.stringify({});
|
||||
case 'connect':
|
||||
return JSON.stringify({
|
||||
"ip_address" : packet.ip,
|
||||
"port" : packet.port
|
||||
});
|
||||
case 'send':
|
||||
return JSON.stringify({
|
||||
"request_type": "0x01",
|
||||
"additional_header": {
|
||||
"wrd": packet.wrd,
|
||||
"auto_increment": packet.inc,
|
||||
"register_address": packet.register_address
|
||||
},
|
||||
"data" : packet.data,
|
||||
});
|
||||
default:
|
||||
return packet
|
||||
}
|
||||
}
|
||||
function reponseHandlerConstructor(packet, status, er) {
|
||||
switch (packet.type) {
|
||||
case 'hello':
|
||||
apiIsAlive = status;
|
||||
return status ?
|
||||
ok_msg_conn(`API-Server is running. Connection established`)
|
||||
: err_msg_conn(`API-Server unreachable. Error: ${JSON.stringify(er)}`);
|
||||
case 'close':
|
||||
isConnected = status ? false : isConnected;
|
||||
if (status) {
|
||||
$('#ipAddress').prop("disabled", false);
|
||||
$('#port').prop("disabled", false);
|
||||
$('#ipAddress').val("");
|
||||
$('#port').val("");
|
||||
$('#connect-btn').val("Connect");
|
||||
}
|
||||
return status ?
|
||||
ok_msg_conn(`Connection closed`)
|
||||
: err_msg_conn(`Cannot close connection. Error: ${JSON.stringify(er)}`);
|
||||
case 'connect':
|
||||
isConnected = status ? true : isConnected;
|
||||
if (status) {
|
||||
valid('ipAddress');
|
||||
valid('port');
|
||||
$('#ipAddress').prop("disabled", true);
|
||||
$('#port').prop("disabled", true);
|
||||
$('#connect-btn').val("Close");
|
||||
} else {
|
||||
invalid('ipAddress');
|
||||
invalid('port');
|
||||
}
|
||||
return status ?
|
||||
ok_msg_conn(`Successfully connected to PLD ${packet.ip}:${packet.port}`)
|
||||
: err_msg_conn(`Cannot open web-socket with ${packet.ip}:${packet.port}. Error: ${JSON.stringify(er)}`);
|
||||
case 'send':
|
||||
if (status) {
|
||||
valid('address');
|
||||
valid('data');
|
||||
valid('ipAddress');
|
||||
valid('port');
|
||||
} else {
|
||||
invalid('address');
|
||||
invalid('data');
|
||||
}
|
||||
return status ?
|
||||
ok_msg_conn(`Successfully sent data to ${packet.register_address}`)
|
||||
: err_msg_conn(`Cannot send data to ${packet.register_address}. Error: ${JSON.stringify(er)}`);
|
||||
default:
|
||||
return packet
|
||||
}
|
||||
}
|
||||
function queryConstructor(packet) {
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: `${apiServer}/${packet.type}`,
|
||||
// change
|
||||
data: dataConstructor(packet),
|
||||
contentType: "application/json",
|
||||
// change
|
||||
success: function(data){
|
||||
return reponseHandlerConstructor(packet, true, "");
|
||||
},
|
||||
error: function(er){
|
||||
return reponseHandlerConstructor(packet, false, er);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
$('#connect-btn').click(function() {
|
||||
if (!apiIsAlive) {
|
||||
err_msg_conn("Cannot work without API-Server. Check its health...");
|
||||
return;
|
||||
}
|
||||
|
||||
if (isConnected) {
|
||||
let packet = fabric.new_close();
|
||||
queryConstructor(packet);
|
||||
} else {
|
||||
const ipAddress = $('#ipAddress').val();
|
||||
const port = $('#port').val();
|
||||
|
||||
if (ipAddress === "" || port === "") {
|
||||
err_msg_conn("Cannot connect to PLD. Empty fields IP or Port");
|
||||
invalid('ipAddress');
|
||||
invalid('port');
|
||||
} else {
|
||||
let packet = fabric.new_connect(ipAddress, port);
|
||||
queryConstructor(packet);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$('#send-btn').click(() => {
|
||||
if (!apiIsAlive) {
|
||||
err_msg_conn("Cannot work without API-Server. Check it health...");
|
||||
return;
|
||||
}
|
||||
const address = document.getElementById('address').value;
|
||||
const data = document.getElementById('data').value;
|
||||
// wr or rd
|
||||
const wrd = () => document.querySelector('input[type=radio]:checked')?.value === "wr"
|
||||
// true or false
|
||||
const inc = document.querySelector('#inc').checked;
|
||||
let packet = fabric.new_send(wrd(), inc, address, data);
|
||||
|
||||
if (isConnected) {
|
||||
valid('ipAddress');
|
||||
valid('port');
|
||||
if (address == "" || data == "") {
|
||||
err_msg_conn(`Cannot send data to PLD. Empty fields Data or Segment-address`);
|
||||
invalid('address');
|
||||
invalid('data');
|
||||
}
|
||||
else {
|
||||
queryConstructor(packet);
|
||||
}
|
||||
} else {
|
||||
invalid('ipAddress');
|
||||
invalid('port');
|
||||
err_msg_conn(`Cannot send any data! Connect to PLD first`);
|
||||
}
|
||||
});
|
||||
|
||||
function valid(id) {
|
||||
var obj = document.getElementById(id).classList;
|
||||
if (obj.contains('invalid-args')) {
|
||||
obj.remove('invalid-args');
|
||||
obj.add('valid-args');
|
||||
}
|
||||
}
|
||||
function invalid(id) {
|
||||
var obj = document.getElementById(id).classList;
|
||||
if (obj.contains("valid-args")) {
|
||||
obj.remove("valid-args");
|
||||
obj.add("invalid-args");
|
||||
}
|
||||
}
|
||||
function ok_msg_conn(data) {
|
||||
document.getElementById('log').innerHTML += String(`<p style="color:white"><span style="color:green"><b>[OK]</b></span> ${new Date().toLocaleString()} : ${data}</p><br>`)
|
||||
return true;
|
||||
}
|
||||
function err_msg_conn(data) {
|
||||
document.getElementById('log').innerHTML += String(`<p style="color:white"><span style="color:red"><b>[ERROR]</b></span> ${new Date().toLocaleString()} : ${data}</p><br>`)
|
||||
return false;
|
||||
}
|
||||
|
||||
})
|
||||
Loading…
Reference in New Issue