// 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 : ''
},
{
tag : "div",
style: "display:block; position:absolute; top:0px; left:25px;",
click: this.ping2Snip.bind(this, w, "stat"),
html : ''
},
{
tag : "div",
style: "display:block; position:absolute; top:0px; left:50px;",
click: this.ping2Snip.bind(this, w, "stop"),
html : ''
},
{
tag : "div",
style: "display:block; position:absolute; top:0px; left:100px;",
click: this.ping2Addr.bind(this, w),
html : ''
},
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