Compare commits
No commits in common. "main" and "fix" have entirely different histories.
|
|
@ -129,4 +129,5 @@ dist
|
||||||
.yarn/build-state.yml
|
.yarn/build-state.yml
|
||||||
.yarn/install-state.gz
|
.yarn/install-state.gz
|
||||||
.pnp.*
|
.pnp.*
|
||||||
|
.idea
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,8 @@
|
||||||
|
# Default ignored files
|
||||||
|
/shelf/
|
||||||
|
/workspace.xml
|
||||||
|
# Editor-based HTTP Client requests
|
||||||
|
/httpRequests/
|
||||||
|
# Datasource local storage ignored files
|
||||||
|
/dataSources/
|
||||||
|
/dataSources.local.xml
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<module type="WEB_MODULE" version="4">
|
||||||
|
<component name="Go" enabled="true" />
|
||||||
|
<component name="NewModuleRootManager">
|
||||||
|
<content url="file://$MODULE_DIR$" />
|
||||||
|
<orderEntry type="inheritedJdk" />
|
||||||
|
<orderEntry type="sourceFolder" forTests="false" />
|
||||||
|
</component>
|
||||||
|
</module>
|
||||||
|
|
@ -0,0 +1,36 @@
|
||||||
|
<component name="InspectionProjectProfileManager">
|
||||||
|
<profile version="1.0">
|
||||||
|
<option name="myName" value="Project Default" />
|
||||||
|
<inspection_tool class="HttpUrlsUsage" enabled="true" level="WEAK WARNING" enabled_by_default="true">
|
||||||
|
<option name="ignoredUrls">
|
||||||
|
<list>
|
||||||
|
<option value="http://${apiServer}" />
|
||||||
|
<option value="http://0.0.0.0" />
|
||||||
|
<option value="http://127.0.0.1" />
|
||||||
|
<option value="http://activemq.apache.org/schema/" />
|
||||||
|
<option value="http://cxf.apache.org/schemas/" />
|
||||||
|
<option value="http://java.sun.com/" />
|
||||||
|
<option value="http://javafx.com/fxml" />
|
||||||
|
<option value="http://javafx.com/javafx/" />
|
||||||
|
<option value="http://json-schema.org/draft" />
|
||||||
|
<option value="http://localhost" />
|
||||||
|
<option value="http://maven.apache.org/POM/" />
|
||||||
|
<option value="http://maven.apache.org/xsd/" />
|
||||||
|
<option value="http://primefaces.org/ui" />
|
||||||
|
<option value="http://schema.cloudfoundry.org/spring/" />
|
||||||
|
<option value="http://schemas.xmlsoap.org/" />
|
||||||
|
<option value="http://tiles.apache.org/" />
|
||||||
|
<option value="http://www.ibm.com/webservices/xsd" />
|
||||||
|
<option value="http://www.jboss.com/xml/ns/" />
|
||||||
|
<option value="http://www.jboss.org/j2ee/schema/" />
|
||||||
|
<option value="http://www.springframework.org/schema/" />
|
||||||
|
<option value="http://www.springframework.org/security/tags" />
|
||||||
|
<option value="http://www.springframework.org/tags" />
|
||||||
|
<option value="http://www.thymeleaf.org" />
|
||||||
|
<option value="http://www.w3.org/" />
|
||||||
|
<option value="http://xmlns.jcp.org/" />
|
||||||
|
</list>
|
||||||
|
</option>
|
||||||
|
</inspection_tool>
|
||||||
|
</profile>
|
||||||
|
</component>
|
||||||
|
|
@ -0,0 +1,8 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<project version="4">
|
||||||
|
<component name="ProjectModuleManager">
|
||||||
|
<modules>
|
||||||
|
<module fileurl="file://$PROJECT_DIR$/.idea/client.iml" filepath="$PROJECT_DIR$/.idea/client.iml" />
|
||||||
|
</modules>
|
||||||
|
</component>
|
||||||
|
</project>
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<project version="4">
|
||||||
|
<component name="VcsDirectoryMappings">
|
||||||
|
<mapping directory="" vcs="Git" />
|
||||||
|
</component>
|
||||||
|
</project>
|
||||||
296
index.html
296
index.html
|
|
@ -4,9 +4,137 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<title>Буревестник-client</title>
|
<title>Буревестник-client</title>
|
||||||
<script src="./thirdparty/jq.js"></script>
|
<script src="jq.js"></script>
|
||||||
<script src="./thirdparty/index.js"></script>
|
<style>
|
||||||
<link rel="stylesheet" href="./thirdparty/index.css">
|
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>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="global-cont">
|
<div class="global-cont">
|
||||||
|
|
@ -15,7 +143,7 @@
|
||||||
<div class="input-group">
|
<div class="input-group">
|
||||||
<input type="text" placeholder="IP address" id="ipAddress" class="ipaddr valid-args">
|
<input type="text" placeholder="IP address" id="ipAddress" class="ipaddr valid-args">
|
||||||
<input type="number" placeholder="Port" id="port" class="port valid-args">
|
<input type="number" placeholder="Port" id="port" class="port valid-args">
|
||||||
<button class="btn-pldconn" id="connect-btn">Connect</button>
|
<button onclick="connect()" class="btn-pldconn">Connect</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
|
|
@ -23,9 +151,6 @@
|
||||||
<label>
|
<label>
|
||||||
<input type="radio" name="mode" value="wr"> WR
|
<input type="radio" name="mode" value="wr"> WR
|
||||||
</label>
|
</label>
|
||||||
<label> </label>
|
|
||||||
<label class="addr-label"><div>Address</div></label>
|
|
||||||
<label class="data-label"><div>Data</div></label>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="input-group">
|
<div class="input-group">
|
||||||
<div class="checkbox-group">
|
<div class="checkbox-group">
|
||||||
|
|
@ -36,14 +161,165 @@
|
||||||
<input type="checkbox" id="inc"> INC
|
<input type="checkbox" id="inc"> INC
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<input type="text" placeholder="Address" id="address" class="reg-addr valid-args">
|
|
||||||
<input type="text" placeholder="Data" id="data" class="reg-data valid-args">
|
<input type="text" placeholder="Data" id="data" class="reg-data valid-args">
|
||||||
<button class="btn-plddatawr" id="send-btn">Send</button>
|
<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>
|
||||||
</div>
|
</div>
|
||||||
<div class="log" id="log">
|
<div class="log" id="log">
|
||||||
<div class="log-desc">Logs</div><br>
|
Logs will appear here... <br>
|
||||||
</div>
|
</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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
@ -1,159 +0,0 @@
|
||||||
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;
|
|
||||||
}
|
|
||||||
.addr-label {
|
|
||||||
position: relative;
|
|
||||||
margin-left: auto;
|
|
||||||
width: 10vw;
|
|
||||||
text-align: center;
|
|
||||||
border: 1px solid red;
|
|
||||||
}
|
|
||||||
.data-label {
|
|
||||||
position: relative;
|
|
||||||
width: 80%;
|
|
||||||
max-width: 30%;
|
|
||||||
border: 1px solid red;
|
|
||||||
}
|
|
||||||
.log-desc {
|
|
||||||
position: relative;
|
|
||||||
text-align: center;
|
|
||||||
font-size: 2vw;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #E0E0E0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* .reg-data {
|
|
||||||
width: 80%;
|
|
||||||
max-width: 80%;
|
|
||||||
}
|
|
||||||
.reg-addr {
|
|
||||||
width: 15%;
|
|
||||||
max-width: 15%;
|
|
||||||
} */
|
|
||||||
|
|
||||||
.log {
|
|
||||||
position: absolute;
|
|
||||||
right: 0;
|
|
||||||
top: 3%;
|
|
||||||
background-color: #111;
|
|
||||||
height: 90vh;
|
|
||||||
max-height: 90vh;
|
|
||||||
width: 30%;
|
|
||||||
max-width: 30%;
|
|
||||||
border-radius: 4px;
|
|
||||||
padding: 15px;
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
@ -1,240 +0,0 @@
|
||||||
$(window).ready(function () {
|
|
||||||
var isConnected = false;
|
|
||||||
var apiIsAlive = false;
|
|
||||||
// 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();
|
|
||||||
let hello_check = fabric.new_hello();
|
|
||||||
queryConstructor(hello_check);
|
|
||||||
|
|
||||||
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",
|
|
||||||
"data_size" : String(1 + 4 + 4*packet.data.split(' ').length),
|
|
||||||
"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: ${er.statusText}. Status : ${er.status}`);
|
|
||||||
case 'close':
|
|
||||||
isConnected = status ? false : isConnected;
|
|
||||||
if (status) {
|
|
||||||
$('#ipAddress').prop("disabled", false);
|
|
||||||
$('#port').prop("disabled", false);
|
|
||||||
$('#ipAddress').val("");
|
|
||||||
$('#port').val("");
|
|
||||||
$('#connect-btn').text("Connect");
|
|
||||||
}
|
|
||||||
return status ?
|
|
||||||
ok_msg_conn(`Connection closed`)
|
|
||||||
: err_msg_conn(`Cannot close connection. Error: ${er.statusText}. Status : ${er.status}`);
|
|
||||||
case 'connect':
|
|
||||||
isConnected = status ? true : isConnected;
|
|
||||||
if (status) {
|
|
||||||
valid('ipAddress');
|
|
||||||
valid('port');
|
|
||||||
$('#ipAddress').prop("disabled", true);
|
|
||||||
$('#port').prop("disabled", true);
|
|
||||||
$('#connect-btn').text("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: ${er.statusText}. Status : ${er.status}`);
|
|
||||||
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: ${er.statusText}. Status : ${er.status}`);
|
|
||||||
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) {
|
|
||||||
if (!hello_api()) {
|
|
||||||
err_msg_conn("Cannot work without API-Server. Check it 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) {
|
|
||||||
if (!hello_api()) {
|
|
||||||
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 hello_api() {
|
|
||||||
let packet = fabric.new_hello;
|
|
||||||
return queryConstructor(packet);
|
|
||||||
}
|
|
||||||
|
|
||||||
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