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
	}