diff --git a/index.html b/index.html index c88faae..8cf492e 100644 --- a/index.html +++ b/index.html @@ -4,137 +4,9 @@ Буревестник-client - - + + +
@@ -143,7 +15,7 @@
- +
@@ -163,163 +35,12 @@
- +
Logs will appear here...
- - \ No newline at end of file diff --git a/thirdparty/index.css b/thirdparty/index.css new file mode 100644 index 0000000..cf6f129 --- /dev/null +++ b/thirdparty/index.css @@ -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; +} \ No newline at end of file diff --git a/thirdparty/index.js b/thirdparty/index.js new file mode 100644 index 0000000..3cf3446 --- /dev/null +++ b/thirdparty/index.js @@ -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(`

[OK] ${new Date().toLocaleString()} : ${data}


`) + return true; + } + function err_msg_conn(data) { + document.getElementById('log').innerHTML += String(`

[ERROR] ${new Date().toLocaleString()} : ${data}


`) + return false; + } + +}) diff --git a/jq.js b/thirdparty/jq.js similarity index 100% rename from jq.js rename to thirdparty/jq.js