Implemeted error signal in HTML and JSON formatter

Frontend/src/components/formatter/HtmlButtonFormatterComponent.vue

@@ -1,8 +1,18 @@
 <script setup lang="ts">
 const props = defineProps(
     {
-        formatType: {type:String,required:true},
+        formatType: {
-        code: {type:String,required:true},
+            type:String,
+            required:true
+        },
+        code: {
+            type:String,
+            required:true
+        },
+        isError: {
+            type:Boolean,
+            required:false
+        },
     }
 )
 
@@ -24,7 +34,7 @@ function getTypeInfo(){
 function createBody(){
     return JSON.stringify({
         "data": props.code,
-        "process": getTypeInfo(),
+        "processorData": getTypeInfo(),
         "processor": "libxml",
         "version": "1.0"
     });
@@ -33,11 +43,13 @@ function createBody(){
 const fetchLink = document.location.protocol + "//" + document.location.hostname + "/libxml/html/" + chooseType(props.formatType);
 
 const emit = defineEmits([
-    'update:result'
+    'update:result',
+    'update:error'
 ])
 
 function processResponse(formattedCode : any){
     var result = formattedCode.result;
+    emit("update:error", formattedCode.status == "ERR")
     return result
 }
 

Frontend/src/components/formatter/JsonButtonFormatterComponent.vue

@@ -5,7 +5,7 @@ const props = defineProps({
     isMinimizer: {type: Boolean}
 })
 
-const emit = defineEmits(["update:result"])
+const emit = defineEmits(["update:result", "update:error"])
 
 function process() {
     var request:Request = prepareRequest();
@@ -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/views/HtmlFormatterView.vue

@@ -6,15 +6,29 @@ import HtmlButtonFormatterComponent from '@/components/formatter/HtmlButtonForma
 
 
 const html = ref('');
+const inputFile = ref()
+
+const errorOccurred = ref(false);
 
 function clear() {
     html.value = '';
+    errorOccurred.value = false
+    inputFile.value.value = ''
 }
 
 function setTextFieldValue(data: string) {
     html.value = data.toString()
 }
 
+function setErrorOccurred(occurred: boolean) {
+    errorOccurred.value = occurred
+}
+
+function setExample(data: string) {
+    inputFile.value.value = ''
+    setTextFieldValue(data)
+}
+
 function readFile(file : any) {
     
     const reader = new FileReader()
@@ -37,13 +51,13 @@ function readFile(file : any) {
                 <div class="flex items-stretch w-64">
                     <input id="fileLoader" ref="inputFile" class="file-selector" type="file" accept=".xml,.html,.htm,text/xml,text/plain,text/html" @change="readFile" />
                 </div>
-                <InsertTemplateComponent stylized-name="HTML" @update:defaultData="setTextFieldValue"></InsertTemplateComponent>
+                <InsertTemplateComponent stylized-name="HTML" @update:defaultData="setExample"></InsertTemplateComponent>
                 <button class="tool-button" @click="clear()">Clear</button>
-                <HtmlButtonFormatterComponent @update:result="setTextFieldValue" :code="html" format-type="Minimize" />
+                <HtmlButtonFormatterComponent @update:result="setTextFieldValue" @update:error="setErrorOccurred" :code="html" format-type="Minimize" />
-                <HtmlButtonFormatterComponent @update:result="setTextFieldValue" :code="html" format-type="Prettify" />
+                <HtmlButtonFormatterComponent @update:result="setTextFieldValue" @update:error="setErrorOccurred" :code="html" format-type="Prettify" />
-                <HtmlButtonFormatterComponent @update:result="setTextFieldValue" :code="html" format-type="XML Converter" />
+                <HtmlButtonFormatterComponent @update:result="setTextFieldValue" @update:error="setErrorOccurred" :code="html" format-type="HTML -> XML" />
             </div>
         </div>
-        <CodeEditorComponent @update:updated-code="setTextFieldValue" :code="html" :config="{disabled:false,language:'html'}" />
+        <CodeEditorComponent :class="{'text-field-error' : errorOccurred}" @update:updated-code="setTextFieldValue" :code="html" :config="{disabled:false,language:'html'}" />
     </div>
 </template>

Frontend/src/views/JsonFormatterView.vue

@@ -6,17 +6,32 @@ import { ref } from 'vue';
 
 
 const json = ref('');
+const inputFile = ref()
+
+const errorOccurred = ref(false);
+
 
 function setTextFieldValue(data: string) {
     json.value = data
 }
 
+function setExample(data: string) {
+    inputFile.value.value = ''
+    setTextFieldValue(data)
+}
+
+function setErrorOccurred(occurred: boolean) {
+    errorOccurred.value = occurred
+}
+
 function format(formattedXml: any) {
     json.value = formattedXml.data;
 }
 
 function clear() {
     json.value = '';
+    errorOccurred.value = false
+    inputFile.value.value = ''
 }
 
 function readFile(file : any) {
@@ -41,12 +56,12 @@ function readFile(file : any) {
                 <div class="flex items-stretch w-64">
                     <input id="fileLoader" ref="inputFile" class="file-selector" type="file" accept=".json,text/xml,text/plain,text/json,application/json" @change="readFile" />
                 </div>
-                <InsertTemplateComponent stylized-name="JSON" @update:defaultData="(data: string) => setTextFieldValue(data)"></InsertTemplateComponent>
+                <InsertTemplateComponent stylized-name="JSON" @update:defaultData="(data: string) => setExample(data)"></InsertTemplateComponent>
                 <button class="tool-button" @click="clear()">Clear</button>
-                <JsonButtonFormatterComponent isMinimizer :json="json" @update:result="(data: any) => format(data)"></JsonButtonFormatterComponent>
+                <JsonButtonFormatterComponent isMinimizer :json="json" @update:result="(data: any) => format(data)" @update:error="setErrorOccurred"></JsonButtonFormatterComponent>
-                <JsonButtonFormatterComponent :json="json" @update:result="(data: any) => format(data)"></JsonButtonFormatterComponent>
+                <JsonButtonFormatterComponent :json="json" @update:result="(data: any) => format(data)" @update:error="setErrorOccurred"></JsonButtonFormatterComponent>
             </div>
         </div>
-        <CodeEditorComponent @update:updated-code="setTextFieldValue" :code="json" :config="{disabled:false,language:'json'}" />
+        <CodeEditorComponent :class="{'text-field-error' : errorOccurred}" @update:updated-code="setTextFieldValue" :code="json" :config="{disabled:false,language:'json'}" />
     </div>
 </template>