#90 Gson implementation. (#106)

Co-authored-by: Artur Kołecki <koleckiartur@icloud.com>
Reviewed-on: R11/release11-tools-web#106

Frontend/assets/css/json.css

@@ -1,4 +1,69 @@
 .json-block {
   height: 600px;
-  width: 100%;
-}
+  width: 97%;
+}
+
+.json-border {
+  border: 2px solid rgba(93, 99, 96, 0.705);
+  border-radius: 5px;
+}
+
+.json-border:focus {
+  box-shadow: 0 0 5px rgb(81, 203, 238);
+  border: 2px solid rgba(93, 99, 96, 0.705);
+  border-radius: 5px;
+}
+
+/*! Theme: Default Description: Original highlight.js style Author: (c) Ivan Sagalaev <maniac@softwaremaniacs.org> Maintainer: @highlightjs/core-team Website: https://highlightjs.org/ License: see project LICENSE Touched: 2021 */
+pre code.hljs{
+  display:block;
+  overflow-x:auto;
+  padding:1em
+}
+code.hljs{
+  padding:3px 5px
+}
+.hljs{
+  background:#FFFFFF;
+  color:#444
+}
+.hljs-comment{
+  color:#697070
+}
+.hljs-punctuation,.hljs-tag{
+  color:#444a
+}
+.hljs-tag .hljs-attr,.hljs-tag .hljs-name{
+  color:#444
+}
+.hljs-attribute,.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-name,.hljs-selector-tag{
+  font-weight:700
+}
+.hljs-deletion,.hljs-number,.hljs-quote,.hljs-selector-class,.hljs-selector-id,.hljs-string,.hljs-template-tag,.hljs-type{
+  color:#800
+}
+.hljs-section,.hljs-title{
+  color:#800;
+  font-weight:700
+}
+.hljs-link,.hljs-operator,.hljs-regexp,.hljs-selector-attr,.hljs-selector-pseudo,.hljs-symbol,.hljs-template-variable,.hljs-variable{
+  color:#ab5656
+}
+.hljs-literal{
+  color:#695
+}
+.hljs-addition,.hljs-built_in,.hljs-bullet,.hljs-code{
+  color:#397300
+}
+.hljs-meta{
+  color:#1f7199
+}
+.hljs-meta .hljs-string{
+  color:#38a
+}
+.hljs-emphasis{
+  font-style:italic
+}
+.hljs-strong{
+  font-weight:700
+}

Frontend/assets/scripts/tools/json.js

@@ -1,7 +1,6 @@
 function formatAndValidateJson(errorElement) {
   const input = document.querySelector('#jsonBlock');
   const processInfo = document.getElementById(errorElement);
-  const start = new Date();
 
   const address = window.location.protocol + "//" + window.location.hostname + ":" + 8081 + "/json/formatting"
 
@@ -10,22 +9,22 @@ function formatAndValidateJson(errorElement) {
     body: input.textContent
   })
   .then(async (response) => {
+    const promise = response.json();
     if (!response.ok) {
-      throw Error(await response.text());
+      throw Error(await promise);
     }
 
-    return response.text();
+    return promise;
   })
   .then((data) => {
-    input.innerText = data;
+    input.innerText = data.data;
     processInfo.innerText = "";
     hljs.highlightElement(input);
 
-    const end = new Date();
-    processInfo.innerHTML = "<b style='color: black'>Validation and formatting time:</b> <span style='color: green'>" + (end.getMilliseconds() - start.getMilliseconds()) + "ms</span>";
+    processInfo.innerHTML = "<b style='color: green'>Computed in </b> <span style='color: green'>" + data.time + "ms</span>";
   })
   .catch((error) => {
-    processInfo.innerHTML = "<b style='color: red'>" + error + "</b>";
+    processInfo.innerHTML = "<b style='color: red'>" + error.data + "</b>";
     console.error('Error:', error);
   });
 }
@@ -34,7 +33,6 @@ function minimizeJson(errorElement) {
   const input = document.querySelector('#jsonBlock');
   const processInfo = document.getElementById(errorElement);
 
-  const start = new Date();
   const address = window.location.protocol + "//" + window.location.hostname + ":" + 8081 + "/json/minimize"
 
   fetch(address, {
@@ -42,22 +40,33 @@ function minimizeJson(errorElement) {
     body: input.textContent
   })
   .then(async (response) => {
+    const promise = response.json();
     if (!response.ok) {
-      throw Error(await response.text());
+      throw Error(await promise);
     }
 
-    return response.text();
+    return promise;
   })
   .then((data) => {
-    input.innerText = data;
+    input.innerText = data.data;
     processInfo.innerText = "";
     hljs.highlightElement(input);
 
-    const end = new Date();
-    processInfo.innerHTML = "<b style='color: black'>Validation and formatting time:</b> <span style='color: green'>" + (end.getMilliseconds() - start.getMilliseconds()) + "ms</span>";
+    processInfo.innerHTML = "<b style='color: green'>Computed in </b> <span style='color: green'>" + data.time + "ms</span>";
   })
   .catch((error) => {
-    processInfo.innerHTML = "<b style='color: red'>" + error + "</b>";
+    processInfo.innerHTML = "<b style='color: red'>" + error.data + "</b>";
     console.error('Error:', error);
   });
+}
+
+function clearJsonData() {
+  const input = document.querySelector('#jsonBlock');
+  input.textContent = "";
+}
+
+function insertDefaultJson() {
+  const input = document.querySelector('#jsonBlock');
+  input.textContent = "{\"enter\": \"your\", \"json\": \"here\"}";
+  hljs.highlightElement(input);
 }