Add tabs for better overview

data/debug-interface/script.js

@@ -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;
+            webSocketConnected = true;
-            document.getElementById("disconnectWebsocketButton").disabled = false;
+            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;
+            webSocketConnected = false;
-            document.getElementById("disconnectWebsocketButton").disabled = true;
+            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
+/* ========================================================================*/
 
-/* ========================================================================*/
+function showFile(path) {
-/* File download function
+    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();
+};
+

data/debug-interface/styles.css

@@ -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-left: 10%;
-    padding-right: 15%;
+    padding-right: 10%;
     padding-bottom:120px;
 }
 

libnymea-core/debugserverhandler.cpp

@@ -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("id", "toggleLogsButton");
-    writer.writeAttribute("onClick", "connectWebsocket()");
+    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
+    // Logs output
-    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
     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