Merge branch 'Updates' of https://github.com/TheNewC0der-24/Postman-C…

…lone
TheNewC0der-24 · Dec 24, 2023 · 2e794e1 · 2e794e1
2 parents 98cce27 + be81e3a
commit 2e794e1
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 16 deletions.
diff --git a/assets/CSS/style.css b/assets/CSS/style.css
@@ -20,7 +20,8 @@ body {
 }
 
 input:focus,
-select:focus {
+select:focus,
+textarea:focus {
     outline: none !important;
     box-shadow: none !important;
     border: 1px solid #ced4da !important;

diff --git a/assets/JS/script.js b/assets/JS/script.js
@@ -1,7 +1,4 @@
-console.log('Welcome to PostMan Clone');
-
-import prettyBytes from '../../node_modules/pretty-bytes/index.js';
-import editorSetup from './editorSetup';
+console.log('Welcome to Postman Clone');
 
 const queryParamsContainer = document.querySelector('[data-query-params]');
 const requestHeadersContainer = document.querySelector('[data-request-headers]');
@@ -36,14 +33,31 @@ axios.interceptors.response.use(updateEndTime, e => {
     return Promise.reject(updateEndTime(e.response));
 });
 
-const { requestEditor, updateResponseEditor } = editorSetup();
+var editor = ace.edit("json-input");
+editor.setTheme("ace/theme/monokai");
+editor.session.setMode("ace/mode/json");
+editor.session.setUseWrapMode(true);
+editor.setOptions({
+    autoScrollEditorIntoView: true,
+    copyWithEmptySelection: true,
+});
+editor.session.setUseSoftTabs(true);
+editor.session.mergeUndoDeltas = true;
+editor.setValue('{}', -1);
+
+var outputEditor = ace.edit("json-output");
+outputEditor.setTheme("ace/theme/monokai");
+outputEditor.session.setMode("ace/mode/json");
+outputEditor.setReadOnly(true);
+outputEditor.session.setUseWrapMode(true);
 
 form.addEventListener('submit', (e) => {
     e.preventDefault();
 
     let data;
     try {
-        data = JSON.parse(requestEditor.state.doc.toString() || null);
+        // data = JSON.parse(document.querySelector('[data-json-request-body] textarea').value || null);
+        data = JSON.parse(editor.getValue()) || null;
     }
     catch (e) {
         document.querySelector('[data-alert]').classList.remove('d-none');
@@ -64,7 +78,8 @@ form.addEventListener('submit', (e) => {
         .then((response) => {
             document.querySelector('[data-response-section]').classList.remove('d-none');
             updateResponseDetails(response);
-            updateResponseEditor(response.data);
+            outputEditor.setValue(JSON.stringify(response.data, null, 2), -1);
+            // document.querySelector('[data-json-response-body]').innerHTML = '<pre>' + '<code>' + JSON.stringify(response.data, null, 2) + '</code>' + '</pre>';
             updateResponseHeaders(response.headers);
         });
 });
@@ -88,12 +103,16 @@ function keyValuePairsToObjects(container) {
     }, {});
 };
 
+function formatSize(size) {
+    const i = Math.floor(Math.log(size) / Math.log(1024));
+    return (size / Math.pow(1024, i)).toFixed(2) * 1 + ' ' + ['B', 'KB', 'MB', 'GB', 'TB'][i];
+};
+
 function updateResponseDetails(response) {
     document.querySelector('[data-status]').textContent = response.status;
     document.querySelector('[data-time]').textContent = response.customData.time;
-    document.querySelector('[data-size]').textContent = prettyBytes(
-        JSON.stringify(response.data).length + JSON.stringify(response.headers).length
-    );
+    const sizeInBytes = JSON.stringify(response.data).length + JSON.stringify(response.headers).length;
+    document.querySelector('[data-size]').textContent = formatSize(sizeInBytes);
 };
 
 function updateResponseHeaders(headers) {

diff --git a/index.html b/index.html
@@ -13,7 +13,6 @@
         integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
 
     <link rel="stylesheet" href="./assets/CSS/style.css">
-    <script type="module" src="./assets/JS/script.js"></script>
 
     <title>Postman Clone</title>
 </head>
@@ -25,7 +24,7 @@
         <div class="container-fluid">
             <div class="navbar-brand">
                 <img src="./assets/Img/logo.png" alt="logo" width="8%" class="d-inline-block">
-                PostMan Clone
+                Postman Clone
             </div>
         </div>
     </nav>
@@ -82,7 +81,11 @@
                     <button data-request-header-btn class="btn btn-outline-success mt-2" type="button">Add</button>
                 </div>
                 <div class="tab-pane fade" id="json" role="tabpanel" aria-labelledby="jsonTabs">
-                    <div data-json-request-body class="overflow-auto json-request-body"></div>
+                    <!-- <div data-json-request-body class="overflow-auto json-request-body"> -->
+                    <!-- <textarea class="form-control" rows="5"></textarea> -->
+
+                    <div id="json-input" class="overflow-auto json-request-body" style="height: 300px;"></div>
+                    <!-- </div> -->
                 </div>
             </div>
         </form>
@@ -119,10 +122,13 @@ <h3>Response</h3>
 
             <div class="tab-content p-3 border-top-0 border">
                 <div class="tab-pane fade show active" id="body" role="tabpanel" aria-labelledby="bodyTabs">
-                    <div data-json-response-body class="overflow-auto json-response-body">
+                    <!-- <div data-json-response-body class="overflow-auto json-response-body">
+                        <div id="jsonResponseEditor"></div>
+                    </div> -->
 
-                    </div>
+                    <div id="json-output" class="overflow-auto json-request-body" style="height: 300px;"></div>
                 </div>
+
                 <div class="tab-pane fade" id="response-headers" role="tabpanel" aria-labelledby="responseHeadersTabs">
                     <div data-response-headers class="headers-response">
 
@@ -140,12 +146,22 @@ <h3>Response</h3>
         </div>
     </template>
 
+
+    <script type="module" src="./assets/JS/script.js"></script>
+
     <!-- Bootstrap JS -->
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"
         integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm"
         crossorigin="anonymous"></script>
     <!-- Axios  -->
     <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
+
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/9.5.6/jsoneditor.min.js"></script>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ace.js"
+        integrity="sha512-GZ1RIgZaSc8rnco/8CXfRdCpDxRCphenIiZ2ztLy3XQfS2KzB9dCm5KRMb2JZ2PPlDZC8SHNJKLZ7oGqYrW7bw=="
+        crossorigin="anonymous"></script>
 </body>
 
 </html>