Updated: Simple logging page (#279)

pages/logging/logging.css

@@ -27,7 +27,7 @@ td {
 }
 
 textarea {
-    height: 400px;
+    height: 200px;
     margin: 0 0 20px 0;
 }
 
@@ -52,11 +52,15 @@ textarea {
     display: flex;
 }
 
+.button-active {
+    background-color: #ccc;
+}
+
 #no-logging-content, #logging-content, #btn-delete, #btn-copy {
     display: none;
 }
 
-#btn-reload:hover, #btn-copy#hover {
+#btn-reload:hover, #btn-copy:hover {
     background-color: #ddd;
 }
 
@@ -66,6 +70,10 @@ textarea {
     color: white;
 }
 
+#btn-markdown {
+    margin-left: -1px;
+}
+
 .missing {
     background-color: #fffbd6;
 }
@@ -93,6 +101,10 @@ textarea {
         color: #bbb;
     }
 
+    .button-active {
+        background-color: #2b2b2b;
+    }
+
     #btn-reload:hover, #btn-copy:hover {
         background-color: #2b2b2b;
     }

pages/logging/logging.html

@@ -16,24 +16,26 @@
             <div id="btn-delete" class="button">Clear</div>
         </div>
         <p id="no-logging-content">no data</p>
-        <div id="copy-to-clipboard-section">
+        <div>
-            <div class="button-group">
+            <div id="copy-to-clipboard-section">
-                <div id="btn-raw" class="button button-copy button-active">Raw</div>
+                <div class="button-group">
-                <div id="btn-markdown" class="button button-copy button-inactive">Markdown</div>
+                    <div id="btn-raw" class="button button-copy button-active">Raw</div>
+                    <div id="btn-markdown" class="button button-copy button-inactive">Markdown</div>
+                </div>
+                <textarea id="copied-data"></textarea>
             </div>
-            <textarea id="copied-data"></textarea>
+            <table id="logging-content">
+                <thead>
+                    <tr>
+                        <th>#</th>
+                        <th>Initiator</th>
+                        <th>Resource</th>
+                        <th>Redirected to</th>
+                    </tr>
+                </thead>
+                <tbody>
+                </tbody>
+            </table>
         </div>
-        <table id="logging-content">
-            <thead>
-                <tr>
-                    <th>#</th>
-                    <th>Initiator</th>
-                    <th>Resource</th>
-                    <th>Redirected to</th>
-                </tr>
-            </thead>
-            <tbody>
-            </tbody>
-        </table>
     </body>
 </html>

pages/logging/logging.js

@@ -25,7 +25,7 @@ logging._onDocumentLoaded = function () {
     logging._getLoggingData()
         .then(logging._generateTable);
     document.getElementById('btn-reload').addEventListener('click', logging._resfresh);
-    document.getElementById('btn-copy').addEventListener('click', logging._openCopySection);
+    document.getElementById('btn-copy').addEventListener('click', logging._toggleCopySection);
     document.getElementById('btn-delete').addEventListener('click', logging._deleteLogs);
 
     document.getElementById('btn-raw').addEventListener('click', function () { logging._prepareCopiedData('btn-raw'); });
@@ -115,8 +115,22 @@ logging._resfresh = function () {
     location.reload();
 };
 
-logging._openCopySection = function () {
+logging._toggleCopySection = function () {
-    document.getElementById('copy-to-clipboard-section').style.display = 'block';
+    let copyBtn, copySection;
+
+    copyBtn = document.getElementById('btn-copy');
+    copySection = document.getElementById('copy-to-clipboard-section');
+
+    if (copyBtn.classList.contains('button-active')) {
+        copyBtn.textContent = 'Copy';
+        copyBtn.classList.remove('button-active');
+        copySection.style.display = 'none';
+    } else {
+        copyBtn.classList.add('button-active');
+        copyBtn.textContent = 'Close';
+        copySection.style.display = 'block';
+    }
+
     logging._prepareCopiedData('btn-raw');
 };
 
@@ -143,8 +157,11 @@ logging._prepareCopiedData = function (type) {
             str += String(`"${Object.values(data[i])[2]}";\n`);
         }
     }
+
     document.getElementById('copied-data').value = str;
+
     logging._copy();
+    logging._switchExportType(type);
 };
 
 logging._copy = function () {
@@ -159,6 +176,21 @@ logging._copy = function () {
     );
 };
 
+logging._switchExportType = function (type) {
+    let btnRaw, btnMarkdown;
+
+    btnRaw = document.getElementById('btn-raw');
+    btnMarkdown = document.getElementById('btn-markdown');
+
+    if (type === 'btn-raw') {
+        btnMarkdown.classList.remove('button-active');
+        btnRaw.classList.add('button-active');
+    } else {
+        btnMarkdown.classList.add('button-active');
+        btnRaw.classList.remove('button-active');
+    }
+};
+
 logging._data = [];
 
 document.addEventListener('DOMContentLoaded', logging._onDocumentLoaded);