[BUGFIX] consoleView

webroot/css/console.css

@@ -14,28 +14,49 @@
 .console {
 	font-family: monospace;
 	white-space: pre;
+	font-size: 14px;
 }
-.console .cmd {
+.console {
-	min-height: 22px;
+	width: 100%;
+	border-spacing: 0px;
+}
+.console > tr {
 	clear: both;
-}
+	border-spacing: 0px;
-.console .cmd > .time,  .console .cmd .host{
-	display: inline-block;
-	color: #009ee0;
 
-	width: 15%;
 }
-.console .cmd > div {
+.console > tr > td {
+	width: 100%;
+	padding: 0px;
+	border-spacing: 0px;
+	height: 18px;
+}
+.console > tr.cmd > td {
+	margin-top: 3px;
+}
+.console > tr:not(.cmd) > td {
+	margin-top: 0px;
+}
+.console table,
+.console table tr,
+.console table td {
+	width: 100%;
+	padding: 0px;
+	margin: 0px;
+	border-collapse: collapse;
+}
+.console .time,  .console .host{
+	color: #009ee0;
+	width: 1%;
+}
+.console .status {
+	text-align: right;
+	height: 18px;
+}
+
+.console table {
 	background-color: #ccc;
-	margin-bottom: 3px;
 }
-.console .cmd .status {
+.console table .status {
-	width: 15%;
+	width: 18px;
-	height: 20px;
-}
-.console .cmd > div > div {
-	clear: both;
-}
-.console .cmd div .status {
-	width: 20px;
 }

webroot/css/main.css

@@ -30,17 +30,19 @@ h1 {
 	border-bottom: 4px solid #dc0067;
 }
 header {
-	background-color: #373636;
+	width: 100%;
-	max-width: 100%;
 	height: 50px;
 }
 header > div {
 	display: inline-block;
 }
 nav {
+	background-color: #373636;
+	position: fixed;
 	display: inline-block;
 	font-weight: 700;
 	width: 100%;
+	height: 50px;
 }
 nav ul {
 	padding: 0;

webroot/js/gui_console.js

@@ -11,6 +11,7 @@ const guiConsole = {};
 	let container = null,
 		el = null,
 		output = null,
+		editing = false,
 		ownfilter = false;
 
 	function createID () {
@@ -84,15 +85,22 @@ const guiConsole = {};
 
 	function createRow (cmd) {
 		const row = {
-			'clients': {},
+				'clients': {},
-			'clientsContainer': document.createElement('div'),
+				'clientsContainer': document.createElement('tr'),
-			'clientsEl': {},
+				'clientsEl': {},
-			'el': document.createElement('div')
+				'el': document.createElement('tr')
-		};
+			},
+			tab = domlib.newAt(row.clientsContainer, 'td'),
+			clientRow = domlib.newAt(tab, 'table');
+
+		tab.setAttribute('colspan', '3');
 
 
 		if (cmd.cmd === '' && cmd.timestemp === 0) {
-			row.el.innerHTML = '\n' +
+			const initRow = domlib.newAt(row.el, 'td');
+
+			initRow.setAttribute('colspan', '3');
+			initRow.innerHTML = '\n' +
 					'  _______                     ________        __\n' +
 					' |       |.-----.-----.-----.|  |  |  |.----.|  |_\n' +
 					' |   -   ||  _  |  -__|     ||  |  |  ||   _||   _|\n' +
@@ -110,9 +118,9 @@ const guiConsole = {};
 
 			return row;
 		}
-		row.timestemp = domlib.newAt(row.el, 'span');
+		row.timestemp = domlib.newAt(row.el, 'td');
-		row.cmd = domlib.newAt(row.el, 'span');
+		row.cmd = domlib.newAt(row.el, 'td');
-		row.status = domlib.newAt(row.el, 'span');
+		row.status = domlib.newAt(row.el, 'td');
 
 		row.el.classList.add('cmd');
 		row.timestemp.classList.add('time');
@@ -120,12 +128,11 @@ const guiConsole = {};
 
 		if (cmd.clients) {
 			Object.keys(cmd.clients).forEach((addr) => {
-				console.log(cmd, row, addr);
+				const clientEl = domlib.newAt(clientRow, 'tr'),
-				const clientEl = domlib.newAt(row.clientsContainer, 'div'),
 					clients = {
-						'host': domlib.newAt(clientEl, 'span'),
+						'host': domlib.newAt(clientEl, 'td'),
-						'result': domlib.newAt(clientEl, 'span'),
+						'result': domlib.newAt(clientEl, 'td'),
-						'status': domlib.newAt(clientEl, 'span')
+						'status': domlib.newAt(clientEl, 'td')
 					};
 
 				clients.host.classList.add('host');
@@ -134,11 +141,11 @@ const guiConsole = {};
 				row.clientsEl[addr] = clientEl;
 				row.clients[addr] = clients;
 			});
-			row.cmd.addEventListener('click', () => {
+			row.el.addEventListener('click', () => {
 				if (row.clientsContainer.parentElement) {
-					row.el.removeChild(row.clientsContainer);
+					row.el.parentElement.removeChild(row.clientsContainer);
 				} else {
-					row.el.appendChild(row.clientsContainer);
+					row.el.parentElement.insertBefore(row.clientsContainer, row.el.nextSibling);
 				}
 			});
 		}
@@ -150,6 +157,9 @@ const guiConsole = {};
 	}
 
 	function update () {
+		if (editing) {
+			return;
+		}
 		let cmds = store.getCMDs();
 
 		if (ownfilter) {
@@ -185,11 +195,14 @@ const guiConsole = {};
 				return 0;
 			}
 
-			return cmds[aID].timestemp - cmds[bID].timestemp;
+			return new Date(cmds[aID].timestemp) - new Date(cmds[bID].timestemp);
 		}).
 		forEach((id) => {
 			if (cmds[id] && !cmdRow[id].el.parentElement) {
 				output.appendChild(cmdRow[id].el);
+				if (cmdRow[id].clientsContainer.parentElement) {
+					cmdRow[id].el.parentElement.insertBefore(cmdRow[id].clientsContainer, cmdRow[id].el.nextSibling);
+				}
 			}
 		});
 	}
@@ -215,7 +228,7 @@ const guiConsole = {};
 			'timestemp': 0
 		});
 
-		output = domlib.newAt(el, 'div');
+		output = domlib.newAt(el, 'table');
 		output.classList.add('console');
 
 		const prompt = domlib.newAt(el, 'div'),
@@ -239,6 +252,13 @@ const guiConsole = {};
 			socket.sendcmd(cmd);
 			promptInput.value = '';
 		});
+		promptInput.addEventListener('focusin', () => {
+			editing = true;
+		});
+		promptInput.addEventListener('focusout', () => {
+			editing = false;
+			update();
+		});
 
 		filterBtn.classList.add('btn');
 		filterBtn.innerHTML = 'Show all';

webroot/js/gui_list.js

@@ -332,6 +332,13 @@ const guiList = {};
 		cell2.addEventListener('dblclick', () => {
 			sortTable(cell2);
 		});
+		nodeidFilter.addEventListener('focusin', () => {
+			editing = true;
+		});
+		nodeidFilter.addEventListener('focusout', () => {
+			editing = false;
+			update();
+		});
 
 
 		cell3.classList.add('sortable');
@@ -341,6 +348,13 @@ const guiList = {};
 		cell3.addEventListener('dblclick', () => {
 			sortTable(cell3);
 		});
+		hostnameFilter.addEventListener('focusin', () => {
+			editing = true;
+		});
+		hostnameFilter.addEventListener('focusout', () => {
+			editing = false;
+			update();
+		});
 
 		cell4.innerHTML = 'Freq';