Improved legibility of REST Mock interface and various fixes (#266)

Reviewed-on: #266
Reviewed-by: Mikolaj Widla <widlam@noreply.example.com>
Co-authored-by: Adam Bem <adam.bem@zoho.eu>
Co-committed-by: Adam Bem <adam.bem@zoho.eu>

Frontend/src/components/formatter/HtmlButtonFormatterComponent.vue

@@ -1,13 +1,28 @@
 <script setup lang="ts">
 const props = defineProps(
     {
-        formatType: {type:String,required:true},
-        code: {type:String,required:true},
+        formatType: {
+            type:String,
+            required:true
+        },
+        code: {
+            type:String,
+            required:true
+        },
+        isError: {
+            type:Boolean,
+            required:false
+        },
     }
 )
 
+const emit = defineEmits([
+    'update:result',
+    'update:error'
+])
+
 function chooseType(formatType: String){
-    if (formatType == "XML Converter"){
+    if (formatType == "HTML -> XML"){
         return "convert";
     }
     return formatType.toLowerCase();
@@ -24,7 +39,7 @@ function getTypeInfo(){
 function createBody(){
     return JSON.stringify({
         "data": props.code,
-        "process": getTypeInfo(),
+        "processorData": getTypeInfo(),
         "processor": "libxml",
         "version": "1.0"
     });
@@ -32,12 +47,9 @@ function createBody(){
 
 const fetchLink = document.location.protocol + "//" + document.location.hostname + "/libxml/html/" + chooseType(props.formatType);
 
-const emit = defineEmits([
-    'update:result'
-])
-
 function processResponse(formattedCode : any){
     var result = formattedCode.result;
+    emit("update:error", formattedCode.status == "ERR")
     return result
 }
 

Frontend/src/components/formatter/JsonButtonFormatterComponent.vue

@@ -5,12 +5,12 @@ const props = defineProps({
     isMinimizer: {type: Boolean}
 })
 
-const emit = defineEmits(["update:result"])
+const emit = defineEmits(["update:result", "update:error"])
 
 function process() {
     var request:Request = prepareRequest();
     fetchRequest(request).then((data) => {
-        sendProcessedData(data);
+        sendProcessedData(data);  
     })
 }
 
@@ -36,7 +36,10 @@ function prepareRequestBody():string {
 
 async function fetchRequest(request: Request):Promise<JSON> {
     var responseBody = await fetch(request)
-    .then(response => response.json())
+    .then(response => {
+        emit('update:error', response.status != 200)
+        return response.json()
+    })
     .then((body) => body);
     console.log(responseBody);
     return responseBody;

Frontend/src/components/formatter/XMLButtonFormatterComponent.vue

@@ -5,7 +5,10 @@ const props = defineProps({
     isMinimizer: {type: Boolean}
 })
 
-const emit = defineEmits(["update:result"])
+const emit = defineEmits([
+    'update:result',
+    'update:error'
+])
 
 function process() {
     var request:Request = prepareRequest()
@@ -42,7 +45,10 @@ function prepareRequestBody():string {
 async function fetchRequest(request: Request):Promise<JSON> {
     var responseBody = await fetch(request)
     .then(response => response.json())
-    .then((body) => body)
+    .then((body) => {
+        emit("update:error", body.status == "ERR")
+        return body
+    })
     return responseBody
 }