From 055544957803c5c1a49ef436f9d4ff5a995adb69 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Simon=20St=C3=BCrz?= Date: Thu, 3 Oct 2019 17:24:47 +0200 Subject: [PATCH] Add remove and copy buttons for log view --- data/debug-interface/debug-interface.qrc | 2 + data/debug-interface/delete.svg | 177 ++++++++++++++++++++ data/debug-interface/edit-copy.svg | 204 +++++++++++++++++++++++ data/debug-interface/script.js | 22 +++ data/debug-interface/styles.css | 41 ++++- libnymea-core/debugserverhandler.cpp | 28 ++++ 6 files changed, 473 insertions(+), 1 deletion(-) create mode 100644 data/debug-interface/delete.svg create mode 100644 data/debug-interface/edit-copy.svg diff --git a/data/debug-interface/debug-interface.qrc b/data/debug-interface/debug-interface.qrc index 733a0ac7..2c14f6e5 100644 --- a/data/debug-interface/debug-interface.qrc +++ b/data/debug-interface/debug-interface.qrc @@ -24,5 +24,7 @@ favicons/apple-touch-icon-76x76.png favicons/apple-touch-icon-114x114.png favicons/apple-touch-icon-120x120.png + edit-copy.svg + delete.svg diff --git a/data/debug-interface/delete.svg b/data/debug-interface/delete.svg new file mode 100644 index 00000000..c4f9686c --- /dev/null +++ b/data/debug-interface/delete.svg @@ -0,0 +1,177 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + diff --git a/data/debug-interface/edit-copy.svg b/data/debug-interface/edit-copy.svg new file mode 100644 index 00000000..299f9e01 --- /dev/null +++ b/data/debug-interface/edit-copy.svg @@ -0,0 +1,204 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + diff --git a/data/debug-interface/script.js b/data/debug-interface/script.js index 65dc28a8..8ae22c1b 100644 --- a/data/debug-interface/script.js +++ b/data/debug-interface/script.js @@ -104,6 +104,28 @@ function disconnectWebsocket() { } +function clearLogsContent() { + console.log("Clear live log content"); + var logTextArea = document.getElementById("logsTextArea") + logTextArea.value = ""; +} + + + +function copyLogsContent() { + console.log("Copy live log content"); + var logTextArea = document.getElementById("logsTextArea") + + logTextArea.select(); + logTextArea.setSelectionRange(0, 99999); /*For mobile devices*/ + document.execCommand("copy"); + + console.log("Copied text:"); + console.log(logTextArea.value); +} + + + /* ========================================================================*/ /* File download / show functions /* ========================================================================*/ diff --git a/data/debug-interface/styles.css b/data/debug-interface/styles.css index 86b041c8..60b1be55 100644 --- a/data/debug-interface/styles.css +++ b/data/debug-interface/styles.css @@ -214,6 +214,8 @@ textarea { transition: 0.3s; } +button::-moz-focus-inner { border: 0; } + .button:hover { opacity: 1 } @@ -224,8 +226,45 @@ textarea { color: #676767; } +.log-buttons { + width: 100%; + float: left; +} + +.log-buttons button { + float: left; +} + +#toggleLogsButton { + width: 80%; + margin-right: 10px; +} + +#copyLogsButton { + width: 20px; + margin-left: 10px; + margin-right: 10px; +} + +.tool-image { + width: 25px; + height: 25px; +} + +#clearLogsButton { + width: 20px; + margin-left: 10px; +} + +/* Clear floats (clearfix hack) */ +.log-buttons:after { + content: ""; + clear: both; + display: table; +} + .container { - min-height:100%; + min-height: 100%; position:relative; } diff --git a/libnymea-core/debugserverhandler.cpp b/libnymea-core/debugserverhandler.cpp index 8e883018..06f15816 100644 --- a/libnymea-core/debugserverhandler.cpp +++ b/libnymea-core/debugserverhandler.cpp @@ -1670,6 +1670,9 @@ QByteArray DebugServerHandler::createDebugXmlDocument() writer.writeTextElement("p", tr("This section allows you to see the live logs of the nymea server.")); + writer.writeStartElement("div"); + writer.writeAttribute("class", "log-buttons"); + // Toggle log button writer.writeStartElement("button"); writer.writeAttribute("class", "button"); @@ -1680,6 +1683,31 @@ QByteArray DebugServerHandler::createDebugXmlDocument() writer.writeCharacters(tr("Start logs")); writer.writeEndElement(); // button + // Copy log content button + writer.writeStartElement("button"); + writer.writeAttribute("class", "button"); + writer.writeAttribute("type", "button"); + writer.writeAttribute("id", "copyLogsButton"); + writer.writeAttribute("onClick", "copyLogsContent()"); + writer.writeEmptyElement("img"); + writer.writeAttribute("class", "tool-image"); + writer.writeAttribute("src", "/debug/edit-copy.svg"); + writer.writeEndElement(); // button + + // Copy log content button + writer.writeStartElement("button"); + writer.writeAttribute("class", "button"); + writer.writeAttribute("type", "button"); + writer.writeAttribute("id", "clearLogsButton"); + writer.writeAttribute("onClick", "clearLogsContent()"); + writer.writeEmptyElement("img"); + writer.writeAttribute("class", "tool-image"); + writer.writeAttribute("src", "/debug/delete.svg"); + writer.writeEndElement(); // button + + writer.writeEndElement(); // div log-buttons + + // Logs output writer.writeStartElement("textarea"); writer.writeAttribute("class", "console-textarea");