810 lines
15 KiB
JavaScript
810 lines
15 KiB
JavaScript
class cmpSwoPage {
|
|
constructor() {
|
|
this.cmpSwoOnConnect = [];
|
|
this.cmpSwoOnDisconnect = [];
|
|
|
|
this.cmpOnLoad();
|
|
}
|
|
|
|
cmpSwoPageInit() {
|
|
this.snip = {};
|
|
|
|
if(!this.sws_sta_prefix)
|
|
this.sws_sta_prefix = "go-prefix/static/";
|
|
|
|
if(!this.sws_dyn_prefix)
|
|
this.sws_dyn_prefix = "go-prefix/ws";
|
|
|
|
this.connect();
|
|
|
|
|
|
this.git = null;
|
|
|
|
this.cmpSwoTaskListInit();
|
|
|
|
this.srvTime = 0;
|
|
}
|
|
|
|
connect() {
|
|
var serv = "";
|
|
|
|
if(window.location.protocol == "https:")
|
|
serv = "wss://";
|
|
else
|
|
serv = "ws://"
|
|
|
|
serv += window.location.host + "/" + this.sws_dyn_prefix ;
|
|
|
|
this.wsrv = new WebSocket(serv);
|
|
|
|
this.wsrv.onopen = this.onopen.bind (this);
|
|
this.wsrv.onclose = this.onclose.bind (this);
|
|
this.wsrv.onmessage = this.onmessage.bind (this);
|
|
this.wsrv.onerror = this.onerror.bind (this);
|
|
|
|
this.WSState(1);
|
|
}
|
|
|
|
onopen(evt) {
|
|
console.log("Connected to WebSocket server");
|
|
|
|
for(var i = 0; i < this.cmpSwoOnConnect.length; i++) {
|
|
(this.cmpSwoOnConnect[i])();
|
|
}
|
|
|
|
if(this.pprm == "only-connect")
|
|
return;
|
|
|
|
// this.gitInfoReq();
|
|
|
|
// this.leftMenuReq();
|
|
|
|
// this.contentReq();
|
|
}
|
|
|
|
onclose(evt) {
|
|
for(var i = 0; i < this.cmpSwoOnDisconnect.length; i++) {
|
|
(this.cmpSwoOnDisconnect[i])();
|
|
}
|
|
|
|
console.log("Disconnected");
|
|
|
|
console.log("Reason: ", evt);
|
|
|
|
if(!this.connInterval) {
|
|
setTimeout(this.connect.bind(this), 100);
|
|
}
|
|
}
|
|
|
|
onmessage(evt) {
|
|
// console.log('Retrieved data from server: ' + evt.data);
|
|
|
|
var obj = null;
|
|
|
|
if(!evt.data) {
|
|
return console.log("Empty answer");
|
|
}
|
|
|
|
try {
|
|
obj = JSON.parse(evt.data);
|
|
} catch(e) {
|
|
console.log(evt);
|
|
console.log(e);
|
|
}
|
|
|
|
if(!obj) {
|
|
console.log("Invalid JSON");
|
|
|
|
return;
|
|
}
|
|
|
|
if(!obj.snip) {
|
|
console.log("Undefine/empty obj.snip", obj);
|
|
return;
|
|
}
|
|
|
|
if(obj.task) {
|
|
console.log("Recv snip: " + obj.snip, "Tasked");
|
|
|
|
if(this.cmpSwoTaskListProc(obj) == 1) {
|
|
return;
|
|
}
|
|
}
|
|
|
|
if(obj.snip != "swoTick1000") {
|
|
console.log("Recv snip: " + obj.snip, obj);
|
|
}
|
|
|
|
if(obj.errors) {
|
|
console.log("Error: ", obj.errors);
|
|
}
|
|
|
|
if(!obj.result) {
|
|
return console.log("Empty result");
|
|
}
|
|
|
|
if(this.snip[obj.snip]) {
|
|
console.log("Call this.snip[" + obj.snip + "].rcv");
|
|
return (this.snip[obj.snip].rcv).bind(this, obj.result);
|
|
}
|
|
|
|
do {
|
|
var snipFn = obj.snip + "Rcv";
|
|
|
|
if(typeof(this[snipFn]) != "function")
|
|
break;
|
|
|
|
console.log("Call this[" + snipFn + "]");
|
|
// console.log(this[snipFn])
|
|
|
|
return this[snipFn](obj.result);
|
|
} while(0);
|
|
|
|
return console.log("Unknown snip '" + obj.snip + "'");
|
|
}
|
|
|
|
onerror(evt, e) {
|
|
console.log('Error occured: ', evt.data);
|
|
console.log(evt);
|
|
console.log(e);
|
|
}
|
|
|
|
// Util
|
|
|
|
setFavicon(i) {
|
|
var link = document.querySelector("link[rel~='icon']");
|
|
|
|
if (!link) {
|
|
link = document.createElement('link');
|
|
link.rel = 'icon';
|
|
document.head.appendChild(link);
|
|
}
|
|
/*
|
|
if(i)
|
|
link.href = '/go-prefix/static/img/umbrella-color.png';
|
|
else
|
|
link.href = '/go-prefix/static/img/umbrella-black.png';
|
|
|
|
console.log(link.href);
|
|
*/
|
|
}
|
|
|
|
WSState(z) {
|
|
if(!this.wsrv) {
|
|
console.log("WebSocket is NULL");
|
|
return 1;
|
|
}
|
|
|
|
var m = "";
|
|
|
|
switch(this.wsrv.readyState) {
|
|
case this.wsrv.CONNECTING : m = "WebSocket state is CONNECTING" ; break;
|
|
case this.wsrv.OPEN : m = "WebSocket state is OPEN" ; break;
|
|
case this.wsrv.CLOSING : m = "WebSocket state is CLOSING" ; break;
|
|
case this.wsrv.CLOSED : m = "WebSocket state is CLOSED" ; break;
|
|
default : m = "WebSocket state is UNKNOWN" ; break;
|
|
}
|
|
|
|
if(z)
|
|
console.log(m);
|
|
|
|
if(this.wsrv.readyState == this.wsrv.OPEN) {
|
|
this.setFavicon(0);
|
|
|
|
return 0;
|
|
}
|
|
|
|
this.setFavicon(1);
|
|
|
|
return 1;
|
|
}
|
|
|
|
readySnip() {
|
|
if(!this.wsrv) {
|
|
console.log("WebSocket is NULL");
|
|
return false;
|
|
}
|
|
|
|
if(this.wsrv.readyState == this.wsrv.OPEN)
|
|
return true;
|
|
|
|
return false;
|
|
}
|
|
|
|
reqSnip(snip, obj) {
|
|
if(this.WSState()) {
|
|
return this.WSState(1);
|
|
}
|
|
|
|
if(obj) {
|
|
obj.snip = snip;
|
|
}
|
|
else {
|
|
obj = {
|
|
snip: snip,
|
|
};
|
|
}
|
|
|
|
console.log("Send snip: " + obj.snip, obj);
|
|
|
|
var str = JSON.stringify(obj);
|
|
|
|
return this.wsrv.send(str);
|
|
}
|
|
|
|
|
|
gitInfoReq() {
|
|
return this.reqSnip("gitInfo");
|
|
}
|
|
|
|
gitInfoRcv(obj) {
|
|
var n;
|
|
|
|
if(!this.git) {
|
|
this.git = obj;
|
|
}
|
|
|
|
if(obj.gitStatus) {
|
|
if((n = document.getElementById("gitStatus"))) {
|
|
n.innerHTML = obj.gitStatus;
|
|
}
|
|
|
|
if((n = document.getElementById("gitTitl"))) {
|
|
n.setAttribute("title", obj.gitStatus);
|
|
n.style.color = (obj.gitStatus == "treeClean") ? "#86de74" : "#ff3b6b";
|
|
}
|
|
}
|
|
|
|
if(obj.gitTimeStamp) {
|
|
if((n = document.getElementById("gitDate"))) {
|
|
n.innerHTML = unixtimeToYYYYMMDD(obj.gitTimeStamp);
|
|
|
|
if(obj.gitTimeStamp != this.git.gitTimeStamp)
|
|
n.style.color = "#ffff64";
|
|
else
|
|
n.style.color = "#86de74";
|
|
}
|
|
|
|
if((n = document.getElementById("gitTime"))) {
|
|
n.innerHTML = unixtimeToHHMMSS(obj.gitTimeStamp);
|
|
|
|
if(obj.gitTimeStamp != this.git.gitTimeStamp)
|
|
n.style.color = "#ffff64";
|
|
else
|
|
n.style.color = "#86de74";
|
|
}
|
|
}
|
|
|
|
if(obj.gitCommit && (n = document.getElementById("gitCHID"))) {
|
|
n.innerHTML = obj.gitCommit.substr(0, 8);
|
|
|
|
if(obj.gitTimeStamp != this.git.gitTimeStamp)
|
|
n.style.color = "#ffff64";
|
|
else
|
|
n.style.color = "#86de74";
|
|
}
|
|
|
|
if(obj.gitComment && (n = document.getElementById("gitComm"))) {
|
|
n.innerHTML = obj.gitComment;
|
|
|
|
if(obj.gitTimeStamp != this.git.gitTimeStamp)
|
|
n.style.color = "#ffff64";
|
|
else
|
|
n.style.color = "#86de74";
|
|
}
|
|
}
|
|
|
|
swoTick1000Rcv(obj) {
|
|
var tzOff = checkTZ(0);
|
|
|
|
obj.ymd = unixtimeToYYYYMMDD(obj["time"] + tzOff);
|
|
obj.hms = unixtimeToHHMMSS (obj["time"] + tzOff);
|
|
|
|
this.srvTime = obj["time"];
|
|
|
|
setNodeText("srvDate", obj, "ymd", 0);
|
|
setNodeText("srvTime", obj, "hms", 0);
|
|
}
|
|
|
|
timeReStyle(sta) {
|
|
var n1 = document.getElementById("srvDate");
|
|
var n2 = document.getElementById("srvTime");
|
|
|
|
if(sta == "connect") {
|
|
if(n1) n1.style.color = "#86de74";
|
|
if(n2) n2.style.color = "#86de74";
|
|
}
|
|
else {
|
|
if(n1) n1.style.color = "#ff3b6b";
|
|
if(n2) n2.style.color = "#ff3b6b";
|
|
}
|
|
|
|
return;
|
|
}
|
|
|
|
// Logic
|
|
|
|
swoSystemctlRestartSelfServiceReq() {
|
|
this.reqSnip("swoSystemctlRestartSelfService");
|
|
}
|
|
|
|
swoSystemctlRestartSelfServiceRcv() {
|
|
;
|
|
}
|
|
|
|
rand4dReq() {
|
|
this.reqSnip("rand4d");
|
|
}
|
|
|
|
rand4dRcv(obj) {
|
|
return setNodeText("srvRand", obj, "rand4d");
|
|
}
|
|
|
|
pingReq() {
|
|
return this.reqSnip("ping");
|
|
}
|
|
|
|
pingRcv(obj) {
|
|
console.log("pingRcv", obj);
|
|
}
|
|
|
|
/****************/
|
|
|
|
leftMenuNameClick(obj) {
|
|
if(!obj)
|
|
return console.log("No obj");
|
|
|
|
var nodeButton = null;
|
|
var nodeBlock = null;
|
|
var node = null;
|
|
|
|
// console.log(button);
|
|
|
|
if(obj.parentNode) {
|
|
node = obj;
|
|
}
|
|
else if(obj?.target?.parentNode) {
|
|
node = obj?.target;
|
|
}
|
|
|
|
var mid = node.getAttribute("mid");
|
|
|
|
if(!mid)
|
|
console.log("Can't get mid");
|
|
|
|
if(!this.leftMenu.list[mid])
|
|
console.log("Invalid mid");
|
|
|
|
nodeBlock = this.leftMenu.list[mid].nodeBlock;
|
|
nodeButton = this.leftMenu.list[mid].nodeButt;
|
|
|
|
if(!nodeBlock)
|
|
return console.log("Invalid nodeBlock");
|
|
|
|
if(!nodeBlock.classList)
|
|
return console.log("Invalid nodeBlock.classList");
|
|
|
|
if(!nodeBlock.classList.contains("leftMenuBlock"))
|
|
return console.log("nodeBlock is not leftMenuBlock");
|
|
|
|
if(nodeBlock.classList.contains("leftMenuBlockHide")) {
|
|
nodeBlock.classList.remove("leftMenuBlockHide");
|
|
nodeButton.innerHTML = "-";
|
|
}
|
|
else {
|
|
nodeBlock.classList.add("leftMenuBlockHide");
|
|
nodeButton.innerHTML = "+";
|
|
}
|
|
|
|
return;
|
|
}
|
|
|
|
leftMenuItemLinkRend(obj, parn) {
|
|
var link = dcrt({
|
|
tag : "a" ,
|
|
parn : parn ,
|
|
id : obj?.id ,
|
|
class: "leftMenuLink" ,
|
|
href : obj.href ,
|
|
html : obj.html
|
|
});
|
|
}
|
|
|
|
leftMenuItemRend(obj, parn) {
|
|
if(obj.type == "link")
|
|
return this.leftMenuItemLinkRend(obj, parn);
|
|
|
|
var cli = null;
|
|
|
|
if(this[obj.func]) {
|
|
cli = this[obj.func].bind(this, obj.parm);
|
|
}
|
|
else {
|
|
console.log("Invalid func '" + obj.func + "'");
|
|
}
|
|
|
|
var cont = null;
|
|
|
|
if(obj.parn) {
|
|
cont = dcrt({
|
|
tag : "div",
|
|
parn : parn,
|
|
id : obj.parn
|
|
});
|
|
}
|
|
else {
|
|
cont = parn;
|
|
}
|
|
|
|
var but = dcrt({
|
|
tag : "button" ,
|
|
parn : cont ,
|
|
id : obj?.id ,
|
|
class: "leftMenuButton" ,
|
|
click: cli ,
|
|
html : obj.html
|
|
});
|
|
|
|
// but.setAttribute("onclick", "window.page." + obj.list[i].func + "();");
|
|
}
|
|
|
|
leftMenuBlockRend(obj) {
|
|
if(!this.leftMenuNodeRoot) {
|
|
return console.log("No .leftMenuNodeRoot");
|
|
}
|
|
|
|
var id = this.leftMenu.list.length;
|
|
|
|
var nodeBlock = dcrt({
|
|
tag : "div",
|
|
parn : this.leftMenuNodeRoot,
|
|
class: "leftMenuBlock"
|
|
});
|
|
|
|
if(!obj.view)
|
|
nodeBlock.classList.add("leftMenuBlockHide");
|
|
|
|
var nodeButt = dcrt({
|
|
mid : id ,
|
|
tag : "button" ,
|
|
parn : nodeBlock ,
|
|
class: "leftMenuBlockNameButton",
|
|
click: this.leftMenuNameClick.bind(this),
|
|
html : "+"
|
|
});
|
|
|
|
var nodeName = dcrt({
|
|
mid : id ,
|
|
tag : "button" ,
|
|
parn : nodeBlock ,
|
|
class: "leftMenuBlockName" ,
|
|
click: this.leftMenuNameClick.bind(this),
|
|
html : obj.name
|
|
});
|
|
|
|
var nodeBody = dcrt({
|
|
tag : "div",
|
|
parn : nodeBlock,
|
|
class: "leftMenuBlockBody"
|
|
});
|
|
|
|
this.leftMenu.list[id] = {
|
|
nodeBlock : nodeBlock ,
|
|
nodeButt : nodeButt ,
|
|
nodeName : nodeName ,
|
|
nodeBody : nodeBody
|
|
}
|
|
|
|
for(var i = 0; i < obj.list.length; i++) {
|
|
this.leftMenuItemRend(obj.list[i], nodeBody);
|
|
}
|
|
|
|
return;
|
|
}
|
|
|
|
leftMenuReq() {
|
|
this.reqSnip("leftMenu");
|
|
}
|
|
|
|
leftMenuRcv(obj) {
|
|
this.leftMenuNodeRoot = document.getElementById("leftMenu");
|
|
|
|
if(!this.leftMenuNodeRoot) {
|
|
return console.log("No .leftMenuNodeRoot");
|
|
}
|
|
|
|
this.leftMenuNodeRoot.innerHTML = "";
|
|
|
|
this.leftMenu = {
|
|
list: []
|
|
}
|
|
|
|
if(!obj.list) {
|
|
return console.log("No obj.list");
|
|
}
|
|
|
|
for(var i = 0; i < obj.list.length; i++) {
|
|
this.leftMenuBlockRend(obj.list[i]);
|
|
}
|
|
|
|
if(obj.defaultPage) {
|
|
var parm = {};
|
|
|
|
if(obj.defaultPageParm)
|
|
parm = obj.defaultPageParm;
|
|
|
|
this.pageContent = obj.defaultPage;
|
|
|
|
this.contentReq(obj.defaultPage, parm);
|
|
}
|
|
}
|
|
|
|
/****************/
|
|
|
|
swoTaskListRcv(obj) {
|
|
console.log(obj);
|
|
}
|
|
|
|
swoTaskListReq() {
|
|
this.reqSnip("swoTaskList");
|
|
}
|
|
|
|
swoLockListRcv(obj) {
|
|
console.log(obj);
|
|
}
|
|
|
|
swoLockListReq() {
|
|
this.reqSnip("swoLockList");
|
|
}
|
|
|
|
swoSetLogFileNameReq() {
|
|
this.reqSnip("swoSetLogFileName");
|
|
}
|
|
|
|
swoSetLogFileNameRcv(obj) {
|
|
console.log(obj);
|
|
}
|
|
|
|
/****************/
|
|
|
|
cmpSwoTaskListInit() {
|
|
this.cmpSwoTaskList = [];
|
|
|
|
this.cmpSwoTaskListNode = document.getElementById("cmpSwoTaskList");
|
|
|
|
if(!this.cmpSwoTaskListNode) {
|
|
console.log("No cmpSwoTaskList");
|
|
}
|
|
|
|
return;
|
|
}
|
|
|
|
cmpSwoTaskListRendItem(name, obj) {
|
|
if(!this.cmpSwoTaskListNode) {
|
|
return;
|
|
}
|
|
|
|
this.cmpSwoTaskList[name].node = dcrt({
|
|
tag : "span",
|
|
parn : this.cmpSwoTaskListNode,
|
|
html : "[" + obj.snip + "]"
|
|
});
|
|
|
|
return;
|
|
}
|
|
|
|
cmpSwoTaskListProc(obj) {
|
|
// if(!this.cmpSwoTaskListNode) {
|
|
// return 1;
|
|
// }
|
|
|
|
var name = obj.task.task;
|
|
|
|
if(obj.task.stat == "work") {
|
|
var tbj = {
|
|
snip: obj.snip,
|
|
node: null
|
|
};
|
|
|
|
this.cmpSwoTaskList[name] = tbj;
|
|
|
|
// console.log("Append cmpSwoTaskList node " + name);
|
|
this.cmpSwoTaskListRendItem(name, obj);
|
|
|
|
return 1;
|
|
}
|
|
|
|
if(obj.task.stat == "complete") {
|
|
if(this.cmpSwoTaskList[name]?.node) {
|
|
// console.log("Remove cmpSwoTaskList node " + name + " by complete");
|
|
this.cmpSwoTaskList[name].node.remove();
|
|
}
|
|
|
|
return 0;
|
|
}
|
|
|
|
if(obj.task.stat == "lock") {
|
|
if(this.cmpSwoTaskList[name]?.node) {
|
|
// console.log("Remove cmpSwoTaskList node " + name + " by lock");
|
|
this.cmpSwoTaskList[name].node.remove();
|
|
}
|
|
|
|
// console.log(obj);
|
|
|
|
var cause = obj?.lock?.cause;
|
|
|
|
if(cause) {
|
|
alert("Заблокировано: " + cause);
|
|
}
|
|
else {
|
|
alert("Заблокировано");
|
|
}
|
|
|
|
return 0;
|
|
}
|
|
|
|
// if(obj.task.stat == "error") {
|
|
// ;
|
|
//
|
|
// return 0;
|
|
// }
|
|
|
|
console.log("Unknown obj.task.stat: " + obj.task.stat);
|
|
console.log(obj);
|
|
|
|
return;
|
|
}
|
|
|
|
cmpOnLoad() {
|
|
console.log("OnLoad")
|
|
|
|
this.nodeDataHeadRoot = document.getElementById("tblheadroot");
|
|
this.nodeDataBodyRoot = document.getElementById("tblbodyroot");
|
|
|
|
dcrt({
|
|
tag : "h4",
|
|
html : "Default page title",
|
|
style: "margin:4px;",
|
|
parn : this.nodeDataHeadRoot
|
|
});
|
|
|
|
dcrt({
|
|
tag : "span",
|
|
html : "Default page data",
|
|
parn : this.nodeDataBodyRoot
|
|
});
|
|
}
|
|
|
|
cmpSshTestReq() {
|
|
this.nodeDataHeadRoot.innerHTML = "";
|
|
this.nodeDataBodyRoot.innerHTML = "";
|
|
|
|
if(!this.nodeSshTestHead) {
|
|
this.nodeSshTestHead = dcrt({
|
|
tag : "h4",
|
|
style: "margin:4px;",
|
|
html : "Test SSH",
|
|
parn : this.nodeDataHeadRoot
|
|
});
|
|
|
|
this.nodeSshTestBody = dcrt({
|
|
tag : "tbody"
|
|
});
|
|
|
|
this.nodeSshTestRoot = dcrt({
|
|
tag : "table",
|
|
parn : this.nodeDataBodyRoot,
|
|
child: [ this.nodeSshTestBody ]
|
|
});
|
|
}
|
|
else {
|
|
this.nodeDataHeadRoot.appendChild(this.nodeSshTestHead)
|
|
this.nodeDataBodyRoot.appendChild(this.nodeSshTestRoot)
|
|
this.nodeSshTestBody.innerHTML = "";
|
|
}
|
|
|
|
this.reqSnip("cmpSshTest");
|
|
}
|
|
|
|
cmpSshTestRcv(obj) {
|
|
dcrt({
|
|
tag : "tr",
|
|
parn : this.nodeSshTestBody,
|
|
child: [{
|
|
tag : "td",
|
|
html : obj.string
|
|
}]
|
|
});
|
|
}
|
|
|
|
cmpHttpTestReq() {
|
|
this.nodeDataHeadRoot.innerHTML = "";
|
|
this.nodeDataBodyRoot.innerHTML = "";
|
|
|
|
if(!this.nodeHttpTestHead) {
|
|
this.nodeHttpTestHead = dcrt({
|
|
tag : "h4",
|
|
style: "margin:4px;",
|
|
html : "Test HTTP",
|
|
parn : this.nodeDataHeadRoot
|
|
});
|
|
|
|
this.nodeHttpTestBody = dcrt({
|
|
tag : "tbody"
|
|
});
|
|
|
|
this.nodeHttpTestRoot = dcrt({
|
|
tag : "table",
|
|
parn : this.nodeDataBodyRoot,
|
|
child: [ this.nodeHttpTestBody ]
|
|
});
|
|
}
|
|
else {
|
|
this.nodeDataHeadRoot.appendChild(this.nodeHttpTestHead)
|
|
this.nodeDataBodyRoot.appendChild(this.nodeHttpTestRoot)
|
|
this.nodeHttpTestBody.innerHTML = "";
|
|
}
|
|
|
|
this.reqSnip("cmpHttpTest");
|
|
}
|
|
|
|
cmpHttpTestRcv(obj) {
|
|
if(obj.status == "error") {
|
|
dcrt({
|
|
tag : "tr",
|
|
parn : this.nodeHttpTestBody,
|
|
child: [{
|
|
tag : "td",
|
|
html : obj.error
|
|
}]
|
|
});
|
|
|
|
return;
|
|
}
|
|
|
|
if(obj.status == "request") {
|
|
dcrt({
|
|
tag : "tr",
|
|
parn : this.nodeHttpTestBody,
|
|
child: [{
|
|
tag : "td",
|
|
html : obj.request
|
|
}]
|
|
});
|
|
|
|
return;
|
|
}
|
|
|
|
if(obj.status == "response") {
|
|
dcrt({
|
|
tag : "tr",
|
|
parn : this.nodeHttpTestBody,
|
|
child: [{
|
|
tag : "td",
|
|
child: [{
|
|
tag : "pre",
|
|
html : JSON.stringify(obj.response, null, 2)
|
|
}]
|
|
}]
|
|
});
|
|
|
|
return;
|
|
}
|
|
|
|
dcrt({
|
|
tag : "tr",
|
|
parn : this.nodeHttpTestBody,
|
|
child: [{
|
|
tag : "td",
|
|
html : "Unknown status: '" + obj.status + "'"
|
|
}]
|
|
});
|
|
|
|
console.log(obj.status, obj)
|
|
|
|
return;
|
|
}
|
|
|
|
// END class
|
|
}
|