From d5179c78012d226cc446381fa1dea3a4c2e238d3 Mon Sep 17 00:00:00 2001 From: Martin Geno Date: Tue, 30 May 2017 18:40:06 +0200 Subject: [PATCH] [BUGFIX] consoleView --- webroot/css/console.css | 55 +++++++++++++++++++++++++------------ webroot/css/main.css | 6 +++-- webroot/js/gui_console.js | 57 ++++++++++++++++++++++++++------------- webroot/js/gui_list.js | 12 +++++++++ 4 files changed, 92 insertions(+), 38 deletions(-) diff --git a/webroot/css/console.css b/webroot/css/console.css index db1c88e..36bc70a 100644 --- a/webroot/css/console.css +++ b/webroot/css/console.css @@ -14,28 +14,49 @@ .console { font-family: monospace; white-space: pre; + font-size: 14px; } -.console .cmd { - min-height: 22px; - clear: both; +.console { + width: 100%; + border-spacing: 0px; } -.console .cmd > .time, .console .cmd .host{ - display: inline-block; - color: #009ee0; +.console > tr { + clear: both; + border-spacing: 0px; - width: 15%; } -.console .cmd > div { - background-color: #ccc; - margin-bottom: 3px; +.console > tr > td { + width: 100%; + padding: 0px; + border-spacing: 0px; + height: 18px; } -.console .cmd .status { - width: 15%; - height: 20px; +.console > tr.cmd > td { + margin-top: 3px; } -.console .cmd > div > div { - clear: both; +.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; } -.console .cmd div .status { - width: 20px; +.console table .status { + width: 18px; } diff --git a/webroot/css/main.css b/webroot/css/main.css index fd6a5b7..a26109b 100644 --- a/webroot/css/main.css +++ b/webroot/css/main.css @@ -30,17 +30,19 @@ h1 { border-bottom: 4px solid #dc0067; } header { - background-color: #373636; - max-width: 100%; + 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; diff --git a/webroot/js/gui_console.js b/webroot/js/gui_console.js index 5989ee9..ec11869 100644 --- a/webroot/js/gui_console.js +++ b/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': {}, - 'clientsContainer': document.createElement('div'), - 'clientsEl': {}, - 'el': document.createElement('div') - }; + 'clients': {}, + 'clientsContainer': document.createElement('tr'), + 'clientsEl': {}, + '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.cmd = domlib.newAt(row.el, 'span'); - row.status = domlib.newAt(row.el, 'span'); + row.timestemp = domlib.newAt(row.el, 'td'); + row.cmd = domlib.newAt(row.el, 'td'); + 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(row.clientsContainer, 'div'), + const clientEl = domlib.newAt(clientRow, 'tr'), clients = { - 'host': domlib.newAt(clientEl, 'span'), - 'result': domlib.newAt(clientEl, 'span'), - 'status': domlib.newAt(clientEl, 'span') + 'host': domlib.newAt(clientEl, 'td'), + 'result': domlib.newAt(clientEl, 'td'), + '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,12 @@ const guiConsole = {}; socket.sendcmd(cmd); promptInput.value = ''; }); + promptInput.addEventListener('focusin', () => { + editing = true; + }); + promptInput.addEventListener('focusout', () => { + editing = false; + }); filterBtn.classList.add('btn'); filterBtn.innerHTML = 'Show all'; diff --git a/webroot/js/gui_list.js b/webroot/js/gui_list.js index 9da883d..65dbd52 100644 --- a/webroot/js/gui_list.js +++ b/webroot/js/gui_list.js @@ -332,6 +332,12 @@ const guiList = {}; cell2.addEventListener('dblclick', () => { sortTable(cell2); }); + nodeidFilter.addEventListener('focusin', () => { + editing = true; + }); + nodeidFilter.addEventListener('focusout', () => { + editing = false; + }); cell3.classList.add('sortable'); @@ -341,6 +347,12 @@ const guiList = {}; cell3.addEventListener('dblclick', () => { sortTable(cell3); }); + hostnameFilter.addEventListener('focusin', () => { + editing = true; + }); + hostnameFilter.addEventListener('focusout', () => { + editing = false; + }); cell4.innerHTML = 'Freq';