mirror of https://github.com/nymea/nymea.git
Add tabs for better overview
Simon Stürz
Michael Zanetti
parent
c17fe76027
commit
b2cb22df66
|
|
@ -19,11 +19,43 @@
|
|||
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
|
||||
|
||||
|
||||
/* ========================================================================*/
|
||||
/* Navigation
|
||||
/* ========================================================================*/
|
||||
|
||||
function selectSection(event, section) {
|
||||
|
||||
console.log("Selected tab " + section)
|
||||
|
||||
var i, tabcontent, tablinks;
|
||||
tabcontent = document.getElementsByClassName("tabcontent");
|
||||
for (i = 0; i < tabcontent.length; i++) {
|
||||
tabcontent[i].style.display = "none";
|
||||
}
|
||||
|
||||
tablinks = document.getElementsByClassName("tablinks");
|
||||
for (i = 0; i < tablinks.length; i++) {
|
||||
tablinks[i].className = tablinks[i].className.replace(" active", "");
|
||||
}
|
||||
|
||||
document.getElementById(section).style.display = "block";
|
||||
event.currentTarget.className += " active";
|
||||
}
|
||||
|
||||
/* ========================================================================*/
|
||||
/* Websocket connection
|
||||
/* ========================================================================*/
|
||||
|
||||
var webSocket = null;
|
||||
var webSocketConnected = false;
|
||||
|
||||
function toggleWebsocketConnection() {
|
||||
if (webSocketConnected) {
|
||||
disconnectWebsocket()
|
||||
} else {
|
||||
connectWebsocket()
|
||||
}
|
||||
}
|
||||
|
||||
function connectWebsocket() {
|
||||
var urlString = "ws://" + window.location.hostname + ":2626"
|
||||
|
|
@ -34,17 +66,17 @@ function connectWebsocket() {
|
|||
|
||||
webSocket.onopen = function(openEvent) {
|
||||
console.log("WebSocket connected: " + JSON.stringify(openEvent, null, 4));
|
||||
document.getElementById("connectWebsocketButton").disabled = true;
|
||||
document.getElementById("disconnectWebsocketButton").disabled = false;
|
||||
webSocketConnected = true;
|
||||
document.getElementById("toggleLogsButton").innerHTML = "Stop logs";
|
||||
};
|
||||
|
||||
webSocket.onclose = function (closeEvent) {
|
||||
webSocket.onclose = function(closeEvent) {
|
||||
console.log("WebSocket disconnected: " + JSON.stringify(closeEvent, null, 4));
|
||||
document.getElementById("connectWebsocketButton").disabled = false;
|
||||
document.getElementById("disconnectWebsocketButton").disabled = true;
|
||||
webSocketConnected = false;
|
||||
document.getElementById("toggleLogsButton").innerHTML = "Start logs";
|
||||
};
|
||||
|
||||
webSocket.onerror = function (errorEvent) {
|
||||
webSocket.onerror = function(errorEvent) {
|
||||
console.log("WebSocket error: " + JSON.stringify(errorEvent, null, 4));
|
||||
};
|
||||
|
||||
|
|
@ -64,13 +96,19 @@ function connectWebsocket() {
|
|||
function disconnectWebsocket() {
|
||||
console.log("Disconnecting from: " + webSocket.url);
|
||||
webSocket.close()
|
||||
webSocketConnected = false;
|
||||
document.getElementById("toggleLogsButton").innerHTML = "Start logs";
|
||||
}
|
||||
|
||||
|
||||
/* ========================================================================*/
|
||||
/* File download / show functions
|
||||
/* ========================================================================*/
|
||||
|
||||
/* ========================================================================*/
|
||||
/* File download function
|
||||
/* ========================================================================*/
|
||||
function showFile(path) {
|
||||
console.log("Show file in tab " + path);
|
||||
window.open(path, '_blank');
|
||||
}
|
||||
|
||||
function downloadFile(filePath, fileName) {
|
||||
console.log("Download file requested " + filePath + " --> " + fileName);
|
||||
|
|
@ -151,3 +189,13 @@ function startTracePathTest() {
|
|||
}
|
||||
};
|
||||
}
|
||||
|
||||
/* ========================================================================*/
|
||||
/* Start function calls
|
||||
/* ========================================================================*/
|
||||
|
||||
window.onload = function() {
|
||||
console.log("Window loading finished.");
|
||||
document.getElementById("informationTabButton").click();
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -29,7 +29,6 @@ p {
|
|||
color: #676767;
|
||||
font-family: "Ubuntu", Helvetica, "Helvetica Neue", Arial, sans-serif;
|
||||
font-size: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
|
|
@ -37,6 +36,7 @@ h1, h2, h3, h4, h5, h6 {
|
|||
font-weight: normal;
|
||||
color: #676767;
|
||||
text-transform: none;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
th, td {
|
||||
|
|
@ -73,11 +73,48 @@ textarea {
|
|||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.tab {
|
||||
overflow: hidden;
|
||||
background-color: #efefef;
|
||||
}
|
||||
|
||||
.tab button {
|
||||
background-color: inherit;
|
||||
float: left;
|
||||
width: 25%;
|
||||
border: none;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
padding: 14px 16px;
|
||||
opacity: 0.8;
|
||||
transition: 0.3s;
|
||||
font-size: 18px;
|
||||
font-family: "Ubuntu", Helvetica, "Helvetica Neue", Arial;
|
||||
}
|
||||
|
||||
.tab button:hover {
|
||||
background-color: #ddd;
|
||||
}
|
||||
|
||||
.tab button.active {
|
||||
background-color: #57baae;
|
||||
}
|
||||
|
||||
.tabcontent {
|
||||
display: none;
|
||||
animation: fadeEffect 0.5s;
|
||||
}
|
||||
|
||||
@keyframes fadeEffect {
|
||||
from {opacity: 0;}
|
||||
to {opacity: 1;}
|
||||
}
|
||||
|
||||
.console-textarea {
|
||||
color: white;
|
||||
margin-top: 20px;
|
||||
padding: 15px;
|
||||
font-family: "Ubuntu Mono";
|
||||
font-family: "Ubuntu Mono", "monospace";
|
||||
font-size: 100%;
|
||||
}
|
||||
|
||||
|
|
@ -196,8 +233,8 @@ textarea {
|
|||
}
|
||||
|
||||
.body {
|
||||
padding-left: 15%;
|
||||
padding-right: 15%;
|
||||
padding-left: 10%;
|
||||
padding-right: 10%;
|
||||
padding-bottom:120px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -344,7 +344,7 @@ void DebugServerHandler::logMessageHandler(QtMsgType type, const QMessageLogCont
|
|||
QByteArray DebugServerHandler::loadResourceData(const QString &resourceFileName)
|
||||
{
|
||||
QFile resourceFile(QString(":%1").arg(resourceFileName));
|
||||
if (!resourceFile.open(QFile::ReadOnly | QFile::Text)) {
|
||||
if (!resourceFile.open(QFile::ReadOnly)) {
|
||||
qCWarning(dcWebServer()) << "DebugServer: Could not open resource file" << resourceFile.fileName();
|
||||
return QByteArray();
|
||||
}
|
||||
|
|
@ -470,10 +470,54 @@ QByteArray DebugServerHandler::createDebugXmlDocument()
|
|||
writer.writeEndElement(); // h1
|
||||
writer.writeEndElement(); // div header
|
||||
|
||||
// Tab bar
|
||||
writer.writeStartElement("div");
|
||||
writer.writeAttribute("class", "tab");
|
||||
|
||||
writer.writeStartElement("button");
|
||||
writer.writeAttribute("class", "tablinks");
|
||||
writer.writeAttribute("id", "informationTabButton");
|
||||
writer.writeAttribute("onclick", "selectSection(event, 'information-section')");
|
||||
//: The name of the section tab in the debug server interface
|
||||
writer.writeCharacters(tr("Information"));
|
||||
writer.writeEndElement(); // button
|
||||
|
||||
writer.writeStartElement("button");
|
||||
writer.writeAttribute("class", "tablinks");
|
||||
writer.writeAttribute("id", "downloadsTabButton");
|
||||
writer.writeAttribute("onclick", "selectSection(event, 'downloads-section')");
|
||||
//: The name of the section tab in the debug server interface
|
||||
writer.writeCharacters(tr("Downloads"));
|
||||
writer.writeEndElement(); // button
|
||||
|
||||
writer.writeStartElement("button");
|
||||
writer.writeAttribute("class", "tablinks");
|
||||
writer.writeAttribute("id", "networkTabButton");
|
||||
writer.writeAttribute("onclick", "selectSection(event, 'network-section')");
|
||||
//: The name of the section tab in the debug server interface
|
||||
writer.writeCharacters(tr("Network"));
|
||||
writer.writeEndElement(); // button
|
||||
|
||||
writer.writeStartElement("button");
|
||||
writer.writeAttribute("class", "tablinks");
|
||||
writer.writeAttribute("id", "logsTabButton");
|
||||
writer.writeAttribute("onclick", "selectSection(event, 'logs-section')");
|
||||
//: The name of the section tab in the debug server interface
|
||||
writer.writeCharacters(tr("Logs"));
|
||||
writer.writeEndElement(); // button
|
||||
|
||||
writer.writeEndElement(); // tab
|
||||
|
||||
// Body
|
||||
writer.writeStartElement("div");
|
||||
writer.writeAttribute("class", "body");
|
||||
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
writer.writeStartElement("div");
|
||||
writer.writeAttribute("class", "tabcontent");
|
||||
writer.writeAttribute("id", "information-section");
|
||||
|
||||
//: The welcome message of the debug interface
|
||||
writer.writeTextElement("p", tr("Welcome to the debug interface."));
|
||||
writer.writeTextElement("p", tr("This debug interface was designed to provide an easy possibility to get helpful information about the running nymea server."));
|
||||
|
|
@ -633,7 +677,12 @@ QByteArray DebugServerHandler::createDebugXmlDocument()
|
|||
}
|
||||
|
||||
writer.writeEndElement(); // table
|
||||
writer.writeEndElement(); // information-section
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
writer.writeStartElement("div");
|
||||
writer.writeAttribute("class", "tabcontent");
|
||||
writer.writeAttribute("id", "downloads-section");
|
||||
|
||||
// Downloads section
|
||||
writer.writeEmptyElement("hr");
|
||||
|
|
@ -717,7 +766,7 @@ QByteArray DebugServerHandler::createDebugXmlDocument()
|
|||
writer.writeStartElement("button");
|
||||
writer.writeAttribute("class", "button");
|
||||
writer.writeAttribute("type", "button");
|
||||
writer.writeAttribute("onClick", "window.open('/debug/syslog', '_blank')");
|
||||
writer.writeAttribute("onClick", "showFile('/debug/syslog')");
|
||||
writer.writeCharacters(tr("Show"));
|
||||
writer.writeEndElement(); // button
|
||||
writer.writeEndElement(); // form
|
||||
|
|
@ -773,7 +822,7 @@ QByteArray DebugServerHandler::createDebugXmlDocument()
|
|||
if (!QFile::exists(NymeaSettings(NymeaSettings::SettingsRoleGlobal).fileName())) {
|
||||
writer.writeAttribute("disabled", "disabled");
|
||||
}
|
||||
writer.writeAttribute("onClick", "window.open('/debug/settings/nymead', '_blank')");
|
||||
writer.writeAttribute("onClick", "showFile('/debug/settings/nymead')");
|
||||
writer.writeCharacters(tr("Show"));
|
||||
writer.writeEndElement(); // button
|
||||
writer.writeEndElement(); // form
|
||||
|
|
@ -823,7 +872,7 @@ QByteArray DebugServerHandler::createDebugXmlDocument()
|
|||
if (!QFile::exists(NymeaSettings(NymeaSettings::SettingsRoleDevices).fileName())) {
|
||||
writer.writeAttribute("disabled", "true");
|
||||
}
|
||||
writer.writeAttribute("onClick", "window.open('/debug/settings/devices', '_blank')");
|
||||
writer.writeAttribute("onClick", "showFile('/debug/settings/devices')");
|
||||
writer.writeCharacters(tr("Show"));
|
||||
writer.writeEndElement(); // button
|
||||
writer.writeEndElement(); // form
|
||||
|
|
@ -873,7 +922,7 @@ QByteArray DebugServerHandler::createDebugXmlDocument()
|
|||
if (!QFile::exists(NymeaSettings(NymeaSettings::SettingsRoleDeviceStates).fileName())) {
|
||||
writer.writeAttribute("disabled", "true");
|
||||
}
|
||||
writer.writeAttribute("onClick", "window.open('/debug/settings/devicestates', '_blank')");
|
||||
writer.writeAttribute("onClick", "showFile('/debug/settings/devicestates')");
|
||||
writer.writeCharacters(tr("Show"));
|
||||
writer.writeEndElement(); // button
|
||||
writer.writeEndElement(); // form
|
||||
|
|
@ -923,7 +972,7 @@ QByteArray DebugServerHandler::createDebugXmlDocument()
|
|||
if (!QFile::exists(NymeaSettings(NymeaSettings::SettingsRoleRules).fileName())) {
|
||||
writer.writeAttribute("disabled", "true");
|
||||
}
|
||||
writer.writeAttribute("onClick", "window.open('/debug/settings/rules', '_blank')");
|
||||
writer.writeAttribute("onClick", "showFile('/debug/settings/rules')");
|
||||
writer.writeCharacters(tr("Show"));
|
||||
writer.writeEndElement(); // button
|
||||
writer.writeEndElement(); // form
|
||||
|
|
@ -973,15 +1022,21 @@ QByteArray DebugServerHandler::createDebugXmlDocument()
|
|||
if (!QFile::exists(NymeaSettings(NymeaSettings::SettingsRolePlugins).fileName())) {
|
||||
writer.writeAttribute("disabled", "true");
|
||||
}
|
||||
writer.writeAttribute("onClick", "window.open('/debug/settings/plugins', '_blank')");
|
||||
writer.writeAttribute("onClick", "showFile('/debug/settings/plugins')");
|
||||
writer.writeCharacters(tr("Show"));
|
||||
writer.writeEndElement(); // button
|
||||
writer.writeEndElement(); // form
|
||||
writer.writeEndElement(); // div show-button-column
|
||||
|
||||
writer.writeEndElement(); // div download-row
|
||||
writer.writeEndElement(); // downloads-section
|
||||
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
writer.writeStartElement("div");
|
||||
writer.writeAttribute("class", "tabcontent");
|
||||
writer.writeAttribute("id", "network-section");
|
||||
|
||||
// Network section
|
||||
writer.writeStartElement("div");
|
||||
writer.writeAttribute("class", "network");
|
||||
|
|
@ -991,7 +1046,7 @@ QByteArray DebugServerHandler::createDebugXmlDocument()
|
|||
|
||||
//: The network section description of the debug interface
|
||||
writer.writeTextElement("p", tr("This section allows you to perform different network connectivity tests in order "
|
||||
"to find out if the device nymea is running on is online and has full network connectivity."));
|
||||
"to find out if the device where nymea is running has full network connectivity."));
|
||||
|
||||
|
||||
// Ping section
|
||||
|
|
@ -1000,6 +1055,8 @@ QByteArray DebugServerHandler::createDebugXmlDocument()
|
|||
writer.writeTextElement("h3", tr("Ping nymea.io"));
|
||||
writer.writeEmptyElement("hr");
|
||||
|
||||
writer.writeTextElement("p", tr("This test makes four ping attempts to the nymea.io server."));
|
||||
|
||||
// Start ping button
|
||||
writer.writeStartElement("button");
|
||||
writer.writeAttribute("class", "button");
|
||||
|
|
@ -1022,10 +1079,13 @@ QByteArray DebugServerHandler::createDebugXmlDocument()
|
|||
|
||||
// Dig section
|
||||
writer.writeEmptyElement("hr");
|
||||
//: The ping section of the debug interface
|
||||
//: The DNS lookup section of the debug interface
|
||||
writer.writeTextElement("h3", tr("DNS lookup for nymea.io"));
|
||||
writer.writeEmptyElement("hr");
|
||||
|
||||
writer.writeTextElement("p", tr("This test makes a dynamic name server lookup for nymea.io."));
|
||||
|
||||
|
||||
// Start dig button
|
||||
writer.writeStartElement("button");
|
||||
writer.writeAttribute("class", "button");
|
||||
|
|
@ -1045,19 +1105,21 @@ QByteArray DebugServerHandler::createDebugXmlDocument()
|
|||
writer.writeCharacters("");
|
||||
writer.writeEndElement(); // textarea
|
||||
|
||||
// Dig section
|
||||
// Trace section
|
||||
writer.writeEmptyElement("hr");
|
||||
//: The ping section of the debug interface
|
||||
//: The trace section of the debug interface
|
||||
writer.writeTextElement("h3", tr("Trace path to nymea.io"));
|
||||
writer.writeEmptyElement("hr");
|
||||
|
||||
writer.writeTextElement("p", tr("This test showes the trace path from the nymea device to the nymea.io server."));
|
||||
|
||||
// Start tracepath button
|
||||
writer.writeStartElement("button");
|
||||
writer.writeAttribute("class", "button");
|
||||
writer.writeAttribute("type", "button");
|
||||
writer.writeAttribute("id", "tracePathButton");
|
||||
writer.writeAttribute("onClick", "startTracePathTest()");
|
||||
//: The ping button text of the debug interface
|
||||
//: The trace path button text of the debug interface
|
||||
writer.writeCharacters(tr("Start trace path test"));
|
||||
writer.writeEndElement(); // button
|
||||
|
||||
|
|
@ -1072,6 +1134,14 @@ QByteArray DebugServerHandler::createDebugXmlDocument()
|
|||
|
||||
writer.writeEndElement(); // div network
|
||||
|
||||
writer.writeEndElement(); // network-section
|
||||
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
writer.writeStartElement("div");
|
||||
writer.writeAttribute("class", "tabcontent");
|
||||
writer.writeAttribute("id", "logs-section");
|
||||
|
||||
// Logs stream
|
||||
writer.writeStartElement("div");
|
||||
writer.writeAttribute("class", "logstream");
|
||||
|
|
@ -1080,29 +1150,19 @@ QByteArray DebugServerHandler::createDebugXmlDocument()
|
|||
writer.writeTextElement("h2", tr("Server live logs"));
|
||||
writer.writeEmptyElement("hr");
|
||||
|
||||
// Start stream button
|
||||
writer.writeTextElement("p", tr("This section allowes you to see the live logs of the nymea server."));
|
||||
|
||||
// Toggle log button
|
||||
writer.writeStartElement("button");
|
||||
writer.writeAttribute("class", "button");
|
||||
writer.writeAttribute("type", "button");
|
||||
writer.writeAttribute("id", "connectWebsocketButton");
|
||||
writer.writeAttribute("onClick", "connectWebsocket()");
|
||||
writer.writeAttribute("id", "toggleLogsButton");
|
||||
writer.writeAttribute("onClick", "toggleWebsocketConnection()");
|
||||
//: The connect button for the log stream of the debug interface
|
||||
writer.writeCharacters(tr("Start server live logs"));
|
||||
writer.writeCharacters(tr("Start logs"));
|
||||
writer.writeEndElement(); // button
|
||||
|
||||
// Stop stream button
|
||||
writer.writeStartElement("button");
|
||||
writer.writeAttribute("class", "button");
|
||||
writer.writeAttribute("type", "button");
|
||||
writer.writeAttribute("id", "disconnectWebsocketButton");
|
||||
writer.writeAttribute("onClick", "disconnectWebsocket()");
|
||||
writer.writeAttribute("disabled", "true");
|
||||
//: The disconnect button for the log stream of the debug interface
|
||||
writer.writeCharacters(tr("Stop server live logs"));
|
||||
writer.writeEndElement(); // button
|
||||
|
||||
|
||||
// Dig output
|
||||
// Logs output
|
||||
writer.writeStartElement("textarea");
|
||||
writer.writeAttribute("class", "console-textarea");
|
||||
writer.writeAttribute("id", "logsTextArea");
|
||||
|
|
@ -1111,6 +1171,7 @@ QByteArray DebugServerHandler::createDebugXmlDocument()
|
|||
writer.writeCharacters("");
|
||||
writer.writeEndElement(); // textarea
|
||||
|
||||
writer.writeEndElement(); // logs-section
|
||||
|
||||
writer.writeEndElement(); // div body
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue