diff --git a/pages/logging/logging.css b/pages/logging/logging.css index db5999fd..73035ec0 100644 --- a/pages/logging/logging.css +++ b/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; } diff --git a/pages/logging/logging.html b/pages/logging/logging.html index 43fcc0f0..5c7fa2e1 100644 --- a/pages/logging/logging.html +++ b/pages/logging/logging.html @@ -12,9 +12,17 @@

SimpleLog

Refresh
-
Delete
+
Copy
+
Clear

no data

+
+
+
Raw
+
Markdown
+
+ +
diff --git a/pages/logging/logging.js b/pages/logging/logging.js index ac5dbb9f..6f315ca2 100644 --- a/pages/logging/logging.js +++ b/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);