[#13] Fix admin.js

log_outgoing_requests/static/log_outgoing_requests/js/admin.js

@@ -1,63 +1,53 @@
-const getCsrfTokenFromDom = () => {
-    return document.querySelector("[name=csrfmiddlewaretoken]").value;
-};
-
 document.addEventListener("DOMContentLoaded", function () {
-    const prettifyAnchors = document.querySelectorAll(
-        ".prettify-body-response"
-    );
-    const originalAnchors = document.querySelectorAll(
-        ".original-body-response"
-    );
-    const url = window.location.href;
-
-    prettifyAnchors.forEach(function (element) {
-        const responseBodyText = document.querySelector(".body-response-text");
-
-        element.addEventListener("click", function (event) {
+    const link = document.querySelector(".prettify-toggle-link");
+    if (link) {
+        link.addEventListener("click", function (event) {
             event.preventDefault();
-
-            fetch(element.href, {
-                method: "POST",
-                credentials: "same-origin",
-                headers: {
-                    "X-CSRFToken": getCsrfTokenFromDom(),
-                    "Content-Type": "application/json",
-                },
-                body: JSON.stringify({ url: url, text: element.textContent }),
-            })
-                .then((response) => response.json())
-                .then((data) => {
-                    responseBodyText.textContent = data.newValue;
-                })
-                .catch((error) => {
-                    console.error("Error:", error);
-                });
+            const textArea = document.querySelector(".prettify-output");
+            const contentType = textArea.getAttribute("content-type");
+            const responseBody = textArea.value;
+            if (textArea.style.display === "none") {
+                let outputValue = '';
+                if (contentType.includes('json')) {
+                    try {
+                        outputValue = JSON.stringify(JSON.parse(responseBody), null, 3);
+                    } catch (error) {
+                        outputValue = "<br><span style='color: red;'>Invalid JSON format</span>";
+                    }
+                } else if (contentType.includes('xml')) {
+                    try {
+                        outputValue = prettifyXml(responseBody);
+                    } catch (xmlError) {
+                        outputValue = "<br><span style='color: red;'>Invalid XML format</span>";
+                    }
+                }
+                textArea.value = outputValue;
+                textArea.style.display = "inline";
+            } else {
+                textArea.style.display = "none";
+            }
         });
-    });
+    }
+});
 
-    originalAnchors.forEach(function (element) {
-        const responseBodyText = document.querySelector(".body-response-text");
+var prettifyXml = function(sourceXml) {
+    var xmlDoc = new DOMParser().parseFromString(sourceXml, 'application/xml');
+    var xsltDoc = new DOMParser().parseFromString([
+        '<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform">',
+        '  <xsl:strip-space elements="*"/>',
+        '  <xsl:template match="node()|@*">',
+        '    <xsl:copy>',
+        '      <xsl:apply-templates select="node()|@*"/>',
+        '    </xsl:copy>',
+        '  </xsl:template>',
+        '  <xsl:output method="xml" indent="yes"/>',
+        '</xsl:stylesheet>',
+    ].join('\n'), 'application/xml');
 
-        element.addEventListener("click", function (event) {
-            event.preventDefault();
+    var xsltProcessor = new XSLTProcessor();    
+    xsltProcessor.importStylesheet(xsltDoc);
+    var resultDoc = xsltProcessor.transformToDocument(xmlDoc);
+    var resultXml = new XMLSerializer().serializeToString(resultDoc);
+    return resultXml;
+};
 
-            fetch(element.href, {
-                method: "POST",
-                credentials: "same-origin",
-                headers: {
-                    "X-CSRFToken": getCsrfTokenFromDom(),
-                    "Content-Type": "application/json",
-                },
-                body: JSON.stringify({ url: url, text: element.textContent }),
-            })
-                .then((response) => response.json())
-                .then((data) => {
-                    responseBodyText.textContent = data.newValue;
-                })
-                .catch((error) => {
-                    console.error("Error:", error);
-                });
-        });
-    });
-});