From 38bed6f835017890f55d331f347668245a030a95 Mon Sep 17 00:00:00 2001
From: eraden <adrian.wozniak@ita-prog.pl>
Date: Sat, 16 Apr 2022 21:09:50 +0200
Subject: [PATCH] Better test editor

---
 api/assets/index.html | 65 ++++++++++++++++++++++++++++++++-----------
 1 file changed, 49 insertions(+), 16 deletions(-)
diff --git a/api/assets/index.html b/api/assets/index.html
index c35b75b..6e3c8dc 100644
--- a/api/assets/index.html
+++ b/api/assets/index.html
@@ -3,27 +3,60 @@
 <head>
     <meta charset="UTF-8">
     <title>Bazzar</title>
+    <style>
+        @import url(https://fonts.googleapis.com/css?family=Questrial);
+        @import url(https://fonts.googleapis.com/css?family=Arvo);
+
+        @font-face {
+            src: url(https://lea.verou.me/logo.otf);
+            font-family: 'LeaVerou';
+        }
+
+        fieldset {
+            display: flex;
+            justify-content: space-between;
+            width: 600px;
+        }
+        fieldset > label {
+            width: 45%;
+        }
+        fieldset > input, fieldset > textarea {
+            width: 54%;
+        }
+    </style>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.27.0/prism.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.27.0/components/prism-json.min.js"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.27.0/themes/prism-dark.min.css">
 </head>
 <body>
-<div style="display: flex">
-    <div>
+<div style="display: flex;justify-content: space-between;">
+    <div style="width: 49%">
         <form>
-            <select id="method">
-                <option value="GET">GET</option>
-                <option value="POST">POST</option>
-                <option value="PATCH">PATCH</option>
-                <option value="DELETE">DELETE</option>
-            </select>
-            <input id="path" type="text">
-            <textarea id="params"></textarea>
+            <fieldset>
+                <label for="method">Method</label>
+                <select id="method">
+                    <option value="GET">GET</option>
+                    <option value="POST">POST</option>
+                    <option value="PATCH">PATCH</option>
+                    <option value="DELETE">DELETE</option>
+                </select>
+            </fieldset>
+            <fieldset>
+                <label for="path">Path</label><input id="path" type="text">
+            </fieldset>
+            <fieldset>
+                <label for="params">Params</label><textarea id="params"></textarea>
+            </fieldset>
             <input type="submit">
         </form>
     </div>
-    <div>
-        <pre><code id="output"></code></pre>
+    <div style="width: 49%">
+        <pre style="background: black; width: 100%; min-height: 300px"><code id="output" class="language-json"></code></pre>
     </div>
 </div>
 <script>
+    Prism.manual = true;
+
     const out = document.querySelector('#output');
     const form = document.querySelector("form");
     const urlEl = form.querySelector('#path');
@@ -40,8 +73,8 @@
 
         paramsEl.value.split("\n").forEach(s => {
             if (!s.length) return;
-            let [k, v] = s.split("=");
-            params[k] = v;
+            let [k, ...v] = s.split("=");
+            params[k] = Array(v).join('=');
         });
 
         const rest = method === 'GET'
@@ -51,10 +84,10 @@
             ? `${ path }?${ JSON.stringify(params) }`
             : path;
 
-        fetch(`/${ path }`, { ...rest, method })
+        fetch(`${ path }`, { ...rest, method })
             .then(res => res.json())
             .then(json => {
-                out.textContent = JSON.stringify(json, null, 4);
+                out.innerHTML = Prism.highlight(JSON.stringify(json), Prism.languages.json, 'json');
             })
     });
 </script>
