[BUGFIX] consoleView

This commit is contained in:
Martin Geno 2017-05-30 18:40:06 +02:00
parent 7aa5896c4f
commit 3b74ddbf6a
No known key found for this signature in database
GPG Key ID: F0D39A37E925E941
4 changed files with 96 additions and 39 deletions

View File

@ -14,28 +14,49 @@
.console {
font-family: monospace;
white-space: pre;
font-size: 14px;
}
.console .cmd {
min-height: 22px;
.console {
width: 100%;
border-spacing: 0px;
}
.console > tr {
clear: both;
}
.console .cmd > .time, .console .cmd .host{
display: inline-block;
color: #009ee0;
border-spacing: 0px;
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 {
width: 15%;
height: 20px;
}
.console .cmd > div > div {
clear: both;
}
.console .cmd div .status {
width: 20px;
.console table .status {
width: 18px;
}

View File

@ -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;

View File

@ -11,6 +11,7 @@ const guiConsole = {};
let container = null,
el = null,
output = null,
editing = false,
ownfilter = false;
function createID () {
@ -85,14 +86,21 @@ const guiConsole = {};
function createRow (cmd) {
const row = {
'clients': {},
'clientsContainer': document.createElement('div'),
'clientsContainer': document.createElement('tr'),
'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.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,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';

View File

@ -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';