325 lines
12 KiB
HTML
325 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<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>
|
|
</head>
|
|
<body>
|
|
<div class="global-cont">
|
|
<div class="nc-fields">
|
|
<h1>PLD connection configuration</h1>
|
|
<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>
|
|
</div>
|
|
</div>
|
|
<div class="container">
|
|
<div class="checkbox-group">
|
|
<label>
|
|
<input type="radio" name="mode" value="wr"> WR
|
|
</label>
|
|
</div>
|
|
<div class="input-group">
|
|
<div class="checkbox-group">
|
|
<label>
|
|
<input type="radio" name="mode" value="rd"> RD
|
|
</label>
|
|
<label>
|
|
<input type="checkbox" id="inc"> INC
|
|
</label>
|
|
</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>
|
|
</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 = "http://localhost:8080"
|
|
|
|
function hello_api() {
|
|
$.ajax({
|
|
type: "POST",
|
|
url: `${apiServer}/hello`,
|
|
data: "",
|
|
contentType: "application/json",
|
|
success: function(status){
|
|
console.log(status)
|
|
ok_msg_conn("API-Server is running. Connection established");
|
|
apiIsAlive = true;
|
|
},
|
|
error: function(er,status){
|
|
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 === "wr";
|
|
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> |