496 lines
13 KiB
JavaScript
496 lines
13 KiB
JavaScript
|
|
// import { modTrm } from "/go-prefix/static/modTrm.js";
|
|
// import { modYdl } from "/go-prefix/static/modYdl.js";
|
|
// import { modNeverc } from "/go-prefix/static/modNeverc.js";
|
|
|
|
class cmpPage extends cmpSwoPage {
|
|
constructor() {
|
|
super();
|
|
|
|
// Object.assign(this, modTrm);
|
|
// Object.assign(this, modYdl);
|
|
// Object.assign(this, modNeverc);
|
|
|
|
{
|
|
this.tblheadroot = document.getElementById("tblheadroot");
|
|
this.tblbodyroot = document.getElementById("tblbodyroot");
|
|
|
|
this.tblbody = document.getElementById("tblbody");
|
|
}
|
|
|
|
// this.trmInitOnce();
|
|
// this.ydlInitOnce();
|
|
|
|
this.cmpSwoOnConnect.push( this.timeReStyle.bind(this, "connect") );
|
|
this.cmpSwoOnConnect.push( this.leftMenuReq.bind(this) );
|
|
// this.cmpSwoOnConnect.push( this.trmConnect.bind(this) );
|
|
// this.cmpSwoOnConnect.push( this.ydlConnect.bind(this) );
|
|
this.cmpSwoOnDisconnect.push( this.timeReStyle.bind(this, "disconnect") );
|
|
|
|
this.cmpSwoPageInit();
|
|
|
|
this.offLineInit();
|
|
|
|
;
|
|
}
|
|
|
|
|
|
setHeadHeight(ii) {
|
|
this.tblheadroot.style.bottom = ii + "px";
|
|
this.tblbodyroot.style.top = (ii+1) + "px";
|
|
}
|
|
|
|
setHead(node) {
|
|
if(this.tblheadview)
|
|
this.tblheadview.style.display = "none";
|
|
|
|
this.tblheadview = node;
|
|
this.tblheadroot.appendChild(node);
|
|
this.tblheadview.style.display = "";
|
|
}
|
|
|
|
setBody(node) {
|
|
if(this.tblbodyview)
|
|
this.tblbodyview.style.display = "none";
|
|
|
|
this.tblbodyview = node;
|
|
this.tblbodyroot.appendChild(node);
|
|
this.tblbodyview.style.display = "";
|
|
}
|
|
|
|
// Util
|
|
|
|
setNode(nn, obj, idx) {
|
|
var n = document.getElementById(nn);
|
|
|
|
if(!n)
|
|
return console.log("No node '" + nn + "'");
|
|
|
|
n.innerHTML = obj[idx];
|
|
|
|
return;
|
|
}
|
|
|
|
// Logic
|
|
|
|
contentReq(page, parm) {
|
|
console.log("contentReq", page);
|
|
|
|
(this[page])();
|
|
}
|
|
|
|
|
|
|
|
|
|
rndTabHead(parn, hdr) {
|
|
var hdrTb = document.getElementById("tblhtr");
|
|
|
|
if(!hdrTb)
|
|
return;
|
|
|
|
hdrTb.innerHTML = "";
|
|
|
|
for(var n = parn?.firstChild?.firstChild, i = 0; n; n = n.nextSibling, i++) {
|
|
var sta = "border-right:1px solid grey; border-bottom:1px solid grey; ";
|
|
|
|
if(hdr[i].child) {
|
|
sta = "";
|
|
}
|
|
|
|
var th = dcrt({
|
|
tag : "th",
|
|
parn : hdrTb,
|
|
style: sta + "width:" + (n.offsetWidth) + "px;",
|
|
child: hdr[i].child ? hdr[i].child : null
|
|
});
|
|
|
|
if(hdr[i].html) {
|
|
th.innerHTML = hdr[i].html;
|
|
}
|
|
}
|
|
|
|
var n = document.getElementById("tblbodyroot");
|
|
|
|
if(n) {
|
|
n.style.top = (hdrTb.offsetHeight + 6) + "px";
|
|
}
|
|
|
|
return;
|
|
}
|
|
|
|
|
|
//
|
|
|
|
|
|
//
|
|
|
|
getSpeeddialElemReq() {
|
|
return this.reqSnip("getSpeeddialElem", null);
|
|
}
|
|
|
|
getSpeeddialElemRcv(obj) {
|
|
var i = 0;
|
|
|
|
for(i = 0; i < obj.length; i++) {
|
|
this.rndSpeeddialElem(obj[i]);
|
|
}
|
|
}
|
|
|
|
//
|
|
|
|
offLineInit() {
|
|
if(1)
|
|
return;
|
|
|
|
this.spdNodeLeftMenu = dcrt({
|
|
tag : "div",
|
|
parn : "mainRoot",
|
|
style: "width:320px; position:relative; height:calc(100% - 10px); top:5px; left:5px; border:1px solid grey;"
|
|
});
|
|
|
|
this.spdNodeLeftMenuScrTop = dcrt({
|
|
tag : "div",
|
|
parn : this.spdNodeLeftMenu,
|
|
style: "width:100%; margin:0px; height:40px; border-bottom:1px solid grey;"
|
|
});
|
|
|
|
this.spdNodeLeftMenuBody = dcrt({
|
|
tag : "div",
|
|
parn : this.spdNodeLeftMenu,
|
|
style: "width:100%; margin:0px; height:calc(100% - 80px); overflow-x:hidden; scroll-x:auto;"
|
|
})
|
|
|
|
this.spdNodeLeftMenuScrBottom = dcrt({
|
|
tag : "div",
|
|
parn : this.spdNodeLeftMenu,
|
|
style: "width:100%; margin:0px; height:40px; border-top:1px solid grey;"
|
|
});
|
|
|
|
return;
|
|
}
|
|
|
|
rndSpeeddialElem(obj) {
|
|
if(obj.type != "local")
|
|
return;
|
|
|
|
var lab = dcrt({
|
|
tag : "div",
|
|
style: "padding:16px;",
|
|
html : obj.label ? obj.label : obj.ip4v
|
|
});
|
|
|
|
var com = dcrt({
|
|
tag : "div",
|
|
style: "color:#888; padding-left:32px; margin-right:32px;",
|
|
html : (obj.label ? obj.ip4v : "") + (obj.xport ? (" / " + obj.xport) : "")
|
|
});
|
|
|
|
var zzz = null;
|
|
|
|
if(obj.xport == "A0") {
|
|
zzz = this.rndECtl();
|
|
}
|
|
|
|
dcrt({
|
|
tag : "div",
|
|
parn : this.spdNodeLeftMenuBody,
|
|
style: "position:relative; width:calc(100%-10px); margin:5px; height:100px; border:1px solid grey;",
|
|
child: [
|
|
lab,
|
|
com,
|
|
zzz
|
|
]
|
|
});
|
|
}
|
|
|
|
rndECtl() {
|
|
if(!this.listECtl)
|
|
this.listECtl = [];
|
|
|
|
var id = this.listECtl.legth;
|
|
|
|
this.listECtl[id] = {};
|
|
|
|
this.listECtl[id].nodePoint = dcrt({
|
|
tag : "div",
|
|
style: "position:absolute; top:2px; width:0px; height:0px; border-radius:17px; border:16px solid;"
|
|
});
|
|
|
|
this.listECtl[id].nodePoint.style.left = "2px";
|
|
this.listECtl[id].nodePoint.style.borderColor = "#a33";
|
|
|
|
this.listECtl[id].nodeLabel = dcrt({
|
|
tag : "div"
|
|
});
|
|
|
|
this.listECtl[id].nodeRoot = dcrt({
|
|
tag : "div",
|
|
style: "position:absolute; top:32px; right:32px; width:84px; height:36px; border:1px solid grey; border-radius:18px;",
|
|
click: this.clickECtl.bind(this, id),
|
|
child: [
|
|
this.listECtl[id].nodePoint,
|
|
this.listECtl[id].nodeLabel
|
|
]
|
|
});
|
|
|
|
return this.listECtl[id].nodeRoot;
|
|
}
|
|
|
|
clickECtl(id) {
|
|
var style = this.listECtl[id].nodePoint.style;
|
|
|
|
if(style.left) {
|
|
style.left = "";
|
|
style.right = "2px";
|
|
style.borderColor = "#3a3";
|
|
}
|
|
else {
|
|
style.left = "2px";
|
|
style.right = "";
|
|
style.borderColor = "#a33";
|
|
}
|
|
|
|
|
|
return;
|
|
}
|
|
|
|
//==========================
|
|
|
|
urlMod(parm) {
|
|
if(!parm?.urlMod.url)
|
|
return console.log("No .url");
|
|
|
|
if(!parm?.urlMod.title)
|
|
return console.log("No .title");
|
|
|
|
// const nextState = parm?.urlMod.nextState; // { additionalInformation: 'Updated the URL with JS' };
|
|
|
|
// This will create a new entry in the browser's history, without reloading
|
|
window.history.pushState(parm?.urlMod.nextState, parm?.urlMod.title, parm.urlMod.url);
|
|
|
|
// This will replace the current entry in the browser's history, without reloading
|
|
window.history.replaceState(parm?.urlMod.nextState, parm?.urlMod.title, parm.urlMod.url);
|
|
|
|
// console.log(window.location)
|
|
}
|
|
|
|
//==========================
|
|
|
|
ping2AddrSet(w, addr) {
|
|
this.blobPing2Wind[w].nodeAddr.innerHTML = addr;
|
|
this.blobPing2Wind[w].nodeAddrList.style.visibility = "hidden";
|
|
}
|
|
|
|
ping2Addr(w) {
|
|
if(!this.blobPing2Wind[w].nodeAddrList) {
|
|
this.blobPing2Wind[w].nodeAddrList = dcrt({
|
|
tag : "div",
|
|
style: "display:block; visibility:hidden; position:absolute; top:32px; left:110px; background-color:#222; overflow:auto; border:1px solid grey; padding:15px;",
|
|
parn : this.blobPing2Wind[w].nodeRoot
|
|
});
|
|
|
|
for(var i = 0; i < this.listPing2Addr.length; i++) {
|
|
dcrt({
|
|
tag : "div",
|
|
parn : this.blobPing2Wind[w].nodeAddrList,
|
|
click: this.ping2AddrSet.bind(this, w, this.listPing2Addr[i]),
|
|
html : this.listPing2Addr[i]
|
|
});
|
|
}
|
|
}
|
|
|
|
if(this.blobPing2Wind[w].nodeAddrList.style.visibility == "hidden") {
|
|
this.blobPing2Wind[w].nodeAddrList.style.visibility = "visible";
|
|
}
|
|
else {
|
|
this.blobPing2Wind[w].nodeAddrList.style.visibility = "hidden";
|
|
}
|
|
}
|
|
|
|
ping2Snip(w, cmd) {
|
|
if(!cmd) {
|
|
return;
|
|
}
|
|
|
|
var obj = {
|
|
win : w + "",
|
|
cmd : cmd,
|
|
addr : this.blobPing2Wind[w].nodeAddr.innerHTML
|
|
};
|
|
|
|
return this.reqSnip("ping2Exec", obj);
|
|
}
|
|
|
|
ping2Blob(w, sty) {
|
|
this.blobPing2Wind[w] = {
|
|
list : []
|
|
};
|
|
|
|
this.blobPing2Wind[w].nodeRoot = dcrt({
|
|
tag : "div",
|
|
style: sty,
|
|
parn : this.nodePing2Body
|
|
});
|
|
|
|
this.blobPing2Wind[w].nodeAddr = dcrt({
|
|
tag : "div",
|
|
style: "display:block; position:absolute; top:-2px; left:125px;",
|
|
click: this.ping2Addr.bind(this, w),
|
|
html : "8.8.8.8"
|
|
});
|
|
|
|
this.blobPing2Wind[w].nodeHead = dcrt({
|
|
tag : "div",
|
|
style: "display:block; position:absolute; top:1px; height:32px; left:1px; right:1px; overflow:auto; border:0px solid red; padding:0;",
|
|
parn : this.blobPing2Wind[w].nodeRoot,
|
|
child: [
|
|
{
|
|
tag : "div",
|
|
style: "display:block; position:absolute; top:0px; left:1px;",
|
|
click: this.ping2Snip.bind(this, w, "start"),
|
|
html : '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M320-200v-560l440 280-440 280Zm80-280Zm0 134 210-134-210-134v268Z"/></svg>'
|
|
},
|
|
{
|
|
tag : "div",
|
|
style: "display:block; position:absolute; top:0px; left:25px;",
|
|
click: this.ping2Snip.bind(this, w, "stat"),
|
|
html : '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M660-240v-480h80v480h-80Zm-440 0v-480l360 240-360 240Zm80-240Zm0 90 136-90-136-90v180Z"/></svg>'
|
|
},
|
|
{
|
|
tag : "div",
|
|
style: "display:block; position:absolute; top:0px; left:50px;",
|
|
click: this.ping2Snip.bind(this, w, "stop"),
|
|
html : '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M320-640v320-320Zm-80 400v-480h480v480H240Zm80-80h320v-320H320v320Z"/></svg>'
|
|
},
|
|
{
|
|
tag : "div",
|
|
style: "display:block; position:absolute; top:0px; left:100px;",
|
|
click: this.ping2Addr.bind(this, w),
|
|
html : '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M240-160q-33 0-56.5-23.5T160-240q0-33 23.5-56.5T240-320q33 0 56.5 23.5T320-240q0 33-23.5 56.5T240-160Zm240 0q-33 0-56.5-23.5T400-240q0-33 23.5-56.5T480-320q33 0 56.5 23.5T560-240q0 33-23.5 56.5T480-160Zm240 0q-33 0-56.5-23.5T640-240q0-33 23.5-56.5T720-320q33 0 56.5 23.5T800-240q0 33-23.5 56.5T720-160ZM240-400q-33 0-56.5-23.5T160-480q0-33 23.5-56.5T240-560q33 0 56.5 23.5T320-480q0 33-23.5 56.5T240-400Zm240 0q-33 0-56.5-23.5T400-480q0-33 23.5-56.5T480-560q33 0 56.5 23.5T560-480q0 33-23.5 56.5T480-400Zm240 0q-33 0-56.5-23.5T640-480q0-33 23.5-56.5T720-560q33 0 56.5 23.5T800-480q0 33-23.5 56.5T720-400ZM240-640q-33 0-56.5-23.5T160-720q0-33 23.5-56.5T240-800q33 0 56.5 23.5T320-720q0 33-23.5 56.5T240-640Zm240 0q-33 0-56.5-23.5T400-720q0-33 23.5-56.5T480-800q33 0 56.5 23.5T560-720q0 33-23.5 56.5T480-640Zm240 0q-33 0-56.5-23.5T640-720q0-33 23.5-56.5T720-800q33 0 56.5 23.5T800-720q0 33-23.5 56.5T720-640Z"/></svg>'
|
|
},
|
|
this.blobPing2Wind[w].nodeAddr
|
|
]
|
|
});
|
|
|
|
this.blobPing2Wind[w].nodeBody = dcrt({
|
|
tag : "div",
|
|
style: "display:block; position:absolute; top:26px; bottom:1px; left:1px; right:1px; overflow:auto; border:1px solid grey;",
|
|
parn : this.blobPing2Wind[w].nodeRoot
|
|
});
|
|
|
|
}
|
|
|
|
ping2StartReq() {
|
|
this.nodeDataHeadRoot.innerHTML = "";
|
|
this.nodeDataBodyRoot.innerHTML = "";
|
|
|
|
if(!this.nodePing2Head) {
|
|
this.listPing2Addr = [
|
|
"1.1.1.1",
|
|
"8.8.8.8",
|
|
"8.8.4.4",
|
|
"9.9.9.9"
|
|
];
|
|
|
|
this.blobPing2Wind = [];
|
|
|
|
this.nodePing2Head = dcrt({
|
|
tag : "h4",
|
|
parn : this.nodeDataHeadRoot,
|
|
style: "margin:4px;",
|
|
html : "Ping2 Start request"
|
|
});
|
|
|
|
this.nodePing2Body = dcrt({
|
|
tag : "div",
|
|
style: "display:block; position:relative; width:100%; height:100%; overflow:auto;",
|
|
parn : this.nodeDataBodyRoot
|
|
});
|
|
|
|
this.ping2Blob(0, "display:block; position:absolute; top:1px; bottom:1px; left:1px; right:calc(50% - 2px); overflow:auto; border:1px solid grey;");
|
|
|
|
this.ping2Blob(1, "display:block; position:absolute; top:1px; bottom:calc(50% - 2px); left:calc(50% + 3px); right:0; overflow:auto; border:1px solid grey;");
|
|
|
|
this.ping2Blob(2, "display:block; position:absolute; top:calc(50% - 1px); bottom:1px; left:calc(50% + 3px); right:0; overflow:auto; border:1px solid grey;");
|
|
|
|
this.nodePing2BodyList = [];
|
|
}
|
|
|
|
this.nodeDataHeadRoot.appendChild(this.nodePing2Head);
|
|
this.nodeDataBodyRoot.appendChild(this.nodePing2Body);
|
|
|
|
this.reqSnip("ping2Exec", {win: 0, cmd: "start", addr: "1.1.1.1"});
|
|
this.reqSnip("ping2Exec", {win: 1, cmd: "start", addr: "8.8.8.8"});
|
|
this.reqSnip("ping2Exec", {win: 2, cmd: "start", addr: "9.9.9.9"});
|
|
|
|
return;
|
|
}
|
|
|
|
ping2StartRcv(obj) {
|
|
// console.log(obj);
|
|
this.nodePing2Head.innerHTML = "Ping2 starting";
|
|
}
|
|
|
|
|
|
ping2StopReq() {
|
|
return this.reqSnip("ping2Stop");
|
|
}
|
|
|
|
ping2StopRcv(obj) {
|
|
// console.log(obj);
|
|
}
|
|
|
|
ping2StatReq() {
|
|
return this.reqSnip("ping2Stat");
|
|
}
|
|
|
|
ping2StatRcv(obj) {
|
|
// console.log(obj);
|
|
}
|
|
|
|
ping2DataRcv(obj) {
|
|
if(obj.data == "procid") {
|
|
this.nodePing2Head.innerHTML = "Ping2 started " + obj.procid;
|
|
return;
|
|
}
|
|
|
|
var w = 0;
|
|
|
|
this.blobPing2Wind[w].list.push(dcrt({
|
|
tag : "pre",
|
|
style: "margin:0;",
|
|
parn : this.blobPing2Wind[w].nodeBody,
|
|
html : obj.string
|
|
}));
|
|
|
|
this.blobPing2Wind[w].nodeBody.scrollTop = this.blobPing2Wind[w].nodeBody.scrollTopMax;
|
|
|
|
if(this.blobPing2Wind[w].list.length > 100) {
|
|
var node = this.blobPing2Wind[w].list.shift();
|
|
if(node)
|
|
node.remove();
|
|
}
|
|
}
|
|
|
|
// END class
|
|
}
|
|
|
|
|
|
window.diag = null;
|
|
function diagMove(e) {
|
|
window.diag.diagMove(e);
|
|
}
|
|
function diagMouseUp(e) {
|
|
window.diag.diagRoot.style.zIndex = 50;
|
|
window.removeEventListener('mousemove', diagMove, false);
|
|
}
|
|
|
|
var page = null;
|
|
|
|
document.addEventListener("DOMContentLoaded", function(event) {
|
|
page = new cmpPage();
|
|
window.page = page;
|
|
});
|
|
|
|
// END
|