From edf21529f19e3778c25575d6ea34456b3a341e97 Mon Sep 17 00:00:00 2001
From: martingtheodo <marting@theodo.fr>
Date: Fri, 24 May 2019 09:29:27 +0200
Subject: [PATCH] :sparkles: Add textarea to precise headers

---
 .../templates/debug-api/content.html          | 65 ++++++++++++-------
 1 file changed, 40 insertions(+), 25 deletions(-)
diff --git a/flask_debug_api/templates/debug-api/content.html b/flask_debug_api/templates/debug-api/content.html
index 6a9f6cc..51a2074 100644
--- a/flask_debug_api/templates/debug-api/content.html
+++ b/flask_debug_api/templates/debug-api/content.html
@@ -1,27 +1,42 @@
-<!doctype html>
+<!DOCTYPE html>
 <body>
-{{ data }}
-{% for method in methods %}
-<button class="debug-api" data-debug-api-method="{{ method }}">{{ method }}</button>
-{% endfor %}
-<br>
-<textarea rows="15" cols="70" id="data"></textarea>
-<script type="text/javascript">
-;[].slice.call(document.querySelectorAll('button.debug-api')).forEach(function(btn){
-    btn.addEventListener('click', function(){
-      var method = btn.getAttribute('data-debug-api-method')
-      var xhr = new XMLHttpRequest()
-      xhr.open(method, location)
-      xhr.setRequestHeader('Content-Type', 'application/json')
-      xhr.onreadystatechange = function(){
-        if(xhr.readyState == 4){
-          document.open()
-          document.write(xhr.responseText)
-          document.close()
-        }
-      }
-      xhr.send(document.getElementById('data').value)
-    })
-})
-</script>
+  {{ data }}
+  {% for method in methods %}
+  <button class="debug-api" data-debug-api-method="{{ method }}">
+    {{ method }}
+  </button>
+  {% endfor %}
+  <br />
+  <textarea rows="15" cols="70" id="data"></textarea>
+  <br />
+  <br />
+  <div>Headers (in JSON, except Content-Type: application/json)</div>
+  <textarea rows="15" cols="70" id="headers"></textarea>
+  <br />
+  <script type="text/javascript">
+    [].slice
+      .call(document.querySelectorAll("button.debug-api"))
+      .forEach(function(btn) {
+        btn.addEventListener("click", function() {
+          var method = btn.getAttribute("data-debug-api-method");
+          var xhr = new XMLHttpRequest();
+          xhr.open(method, location);
+          xhr.setRequestHeader("Content-Type", "application/json");
+          const headers = document.getElementById("headers").value
+            ? JSON.parse(document.getElementById("headers").value)
+            : [];
+          for (headerName in headers) {
+            xhr.setRequestHeader(headerName, headers[headerName]);
+          }
+          xhr.onreadystatechange = function() {
+            if (xhr.readyState == 4) {
+              document.open();
+              document.write(xhr.responseText);
+              document.close();
+            }
+          };
+          xhr.send(document.getElementById("data").value);
+        });
+      });
+  </script>
 </body>
