Updated: Logging page

pages/logging/logging.css

@@ -26,6 +26,11 @@ td {
     padding: 2px 15px;
 }
 
+textarea {
+    height: 400px;
+    margin: 0 0 20px 0;
+}
+
 .button {
     background-color: #fafafa;
     border: 1px solid #5f5f5f;
@@ -35,17 +40,23 @@ td {
     font-size: 14px;
     margin: 20px 20px 20px 0;
     padding: 10px;
+    user-select: none;
+}
+
+.button-copy {
+    border-radius: 0;
+    margin: 0;
 }
 
 .button-group {
     display: flex;
 }
 
-#no-logging-content, #logging-content, #btn-delete {
+#no-logging-content, #logging-content, #btn-delete, #btn-copy {
     display: none;
 }
 
-#btn-reload:hover {
+#btn-reload:hover, #btn-copy#hover {
     background-color: #ddd;
 }
 
@@ -59,6 +70,10 @@ td {
     background-color: #fffbd6;
 }
 
+#copy-to-clipboard-section {
+    display: none;
+}
+
 @media (prefers-color-scheme: dark) {
     body {
         background-color: #202023;
@@ -78,7 +93,7 @@ td {
         color: #bbb;
     }
 
-    #btn-reload:hover {
+    #btn-reload:hover, #btn-copy:hover {
         background-color: #2b2b2b;
     }
 

pages/logging/logging.html

@@ -12,9 +12,17 @@
         <h1>SimpleLog</h1>
         <div class="button-group">
             <div id="btn-reload" class="button">Refresh</div>
-            <div id="btn-delete" class="button">Delete</div>
+            <div id="btn-copy" class="button">Copy</div>
+            <div id="btn-delete" class="button">Clear</div>
         </div>
         <p id="no-logging-content">no data</p>
+        <div id="copy-to-clipboard-section">
+            <div class="button-group">
+                <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>
         <table id="logging-content">
             <thead>
                 <tr>

pages/logging/logging.js

@@ -24,8 +24,12 @@ var logging = {};
 logging._onDocumentLoaded = function () {
     logging._getLoggingData()
         .then(logging._generateTable);
-    document.getElementById('btn-delete').addEventListener('click', logging._deleteLogs);
     document.getElementById('btn-reload').addEventListener('click', logging._resfresh);
+    document.getElementById('btn-copy').addEventListener('click', logging._openCopySection);
+    document.getElementById('btn-delete').addEventListener('click', logging._deleteLogs);
+
+    document.getElementById('btn-raw').addEventListener('click', function () { logging._prepareCopiedData('btn-raw'); });
+    document.getElementById('btn-markdown').addEventListener('click', function () { logging._prepareCopiedData('btn-markdown'); });
 };
 
 logging._generateTable = function () {
@@ -103,6 +107,7 @@ logging._showTable = function (value) {
 
     document.getElementById('logging-content').style.display = v1;
     document.getElementById('btn-delete').style.display = v1;
+    document.getElementById('btn-copy').style.display = v1;
     document.getElementById('no-logging-content').style.display = v2;
 };
 
@@ -110,6 +115,50 @@ logging._resfresh = function () {
     location.reload();
 };
 
+logging._openCopySection = function () {
+    document.getElementById('copy-to-clipboard-section').style.display = 'block';
+    logging._prepareCopiedData('btn-raw');
+};
+
+logging._prepareCopiedData = function (type) {
+    let data, str;
+
+    data = logging._data;
+
+    if (type === 'btn-markdown') {
+        str = '| Number | Initiator | Resource | Redirected to |\n';
+        str += '| -------- | -------- | -------- | -------- |\n';
+        for (let i = 0; i < data.length; i++) {
+            str += String(`| \`${i + 1}\` |`);
+            str += String(` \`${Object.values(data[i])[0]}\` |`);
+            str += String(` \`${Object.values(data[i])[1]}\` |`);
+            str += String(` \`${Object.values(data[i])[2]}\` |\n`);
+        }
+    } else {
+        str = '"number";"initiator";"resource";"redirected to";\n';
+        for (let i = 0; i < data.length; i++) {
+            str += String(`"${i + 1}";`);
+            str += String(`"${Object.values(data[i])[0]}";`);
+            str += String(`"${Object.values(data[i])[1]}";`);
+            str += String(`"${Object.values(data[i])[2]}";\n`);
+        }
+    }
+    document.getElementById('copied-data').value = str;
+    logging._copy();
+};
+
+logging._copy = function () {
+    let textArea = document.getElementById('copied-data');
+    navigator.clipboard.writeText(textArea.value).then(
+        function () {
+            textArea.select();
+        },
+        function () {
+            alert('Rule set cannot be copied!');
+        }
+    );
+};
+
 logging._data = [];
 
 document.addEventListener('DOMContentLoaded', logging._onDocumentLoaded);