Added green shadow wan success and other things (#268)

Reviewed-on: #268
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/FormatterComponent.vue

@@ -0,0 +1,114 @@
+<script setup lang="ts">
+import XMLButtonFormatterComponent from '@/components/formatter/XMLButtonFormatterComponent.vue';
+import JsonButtonFormatterComponent from '@/components/formatter/JsonButtonFormatterComponent.vue';
+import HtmlButtonFormatterComponent from '@/components/formatter/HtmlButtonFormatterComponent.vue';
+
+import InsertTemplateComponent from '@components/common/InsertTemplateComponent.vue';
+import CodeEditorComponent from '@/components/CodeEditorComponent.vue';
+import { ref } from 'vue';
+
+
+const data = ref('');
+const inputFile = ref()
+
+const errorOccurred = ref(false);
+const successOccurred = ref(false);
+
+const props = defineProps({
+    formatterLanguage: {
+        type: String,
+        required: true
+    }
+})
+
+function setTextFieldValue(newData: string) {
+    successOccurred.value = false;
+    errorOccurred.value = false;
+    data.value = newData;
+}
+
+function format(formatted: any) {
+    data.value = formatted.result;
+}
+
+function setErrorOccurred(occurred: boolean) {
+    errorOccurred.value = occurred;
+    successOccurred.value = !(occurred);
+}
+
+function setExample(data: string) {
+    inputFile.value.value = ''
+    setTextFieldValue(data)
+}
+
+function clear() {
+    data.value = '';
+    successOccurred.value = false;
+    errorOccurred.value = false;
+    inputFile.value.value = ''
+}
+
+function readFile(file : any) {
+    
+    const reader = new FileReader()
+    reader.onloadend = () => {
+        var result = reader.result?.toString()
+        if (typeof result == "string")
+            setTextFieldValue(result);
+            
+    }
+    reader.readAsText(file.target.files[0])
+}
+
+function highlightTextField() {
+    if (successOccurred.value)
+        return "text-field-success";
+    if (errorOccurred.value)
+        return "text-field-error";
+
+    return "";
+}
+
+</script>
+
+<template>
+    <div id="layout" class="flex flex-col w-full h-full gap-4">
+        <div id="toolbar" class= "flex flex-col gap-4 items-center lg:flex-row place-content-between">
+            <span class="dark:text-slate-100"> {{ formatterLanguage }} Formatter</span>
+            <!-- XML Formatter Toolbar -->
+            <div v-if="formatterLanguage.toLowerCase() == 'xml'" class="flex flex-wrap gap-2 justify-center">
+                <div class="flex items-stretch w-64">
+                    <input id="fileLoader" ref="inputFile" class="file-selector" type="file" accept=".xml,.xql,.xquery,.xslt,text/xml,text/plain" @change="readFile" />
+                </div>
+                <InsertTemplateComponent stylized-name="XML" @update:defaultData="(data: string) => setExample(data)"></InsertTemplateComponent>
+                <button class="tool-button" @click="clear()">Clear</button>
+                <XMLButtonFormatterComponent @update:error="setErrorOccurred" is-minimizer :xml="data" @update:result="format"></XMLButtonFormatterComponent>
+                <XMLButtonFormatterComponent @update:error="setErrorOccurred" :xml="data" @update:result="format"></XMLButtonFormatterComponent>
+            </div>
+
+            <!-- JSON Formatter Toolbar -->
+            <div v-if="formatterLanguage.toLowerCase() == 'json'" class="flex flex-wrap gap-2 justify-center">
+                <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) => setExample(data)"></InsertTemplateComponent>
+                <button class="tool-button" @click="clear()">Clear</button>
+                <JsonButtonFormatterComponent isMinimizer :json="data" @update:result="format" @update:error="setErrorOccurred"></JsonButtonFormatterComponent>
+                <JsonButtonFormatterComponent :json="data" @update:result="format" @update:error="setErrorOccurred"></JsonButtonFormatterComponent>
+            </div>
+
+            <!-- HTML Formatter Toolbar -->
+            <div v-if="formatterLanguage.toLowerCase() == 'html'" class="flex flex-wrap gap-2 justify-center">
+                <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="setExample"></InsertTemplateComponent>
+                <button class="tool-button" @click="clear()">Clear</button>
+                <HtmlButtonFormatterComponent @update:result="format" @update:error="setErrorOccurred" :code="data" format-type="Minimize" />
+                <HtmlButtonFormatterComponent @update:result="format" @update:error="setErrorOccurred" :code="data" format-type="Prettify" />
+                <HtmlButtonFormatterComponent @update:result="format" @update:error="setErrorOccurred" :code="data" format-type="HTML -> XML" />
+            </div>
+        </div>
+        <CodeEditorComponent :class="highlightTextField()" @update:updated-code="setTextFieldValue" :code="data" :config="{disabled:false,language:formatterLanguage.toLowerCase()}" />
+    </div>
+</template>

Frontend/src/components/formatter/HtmlButtonFormatterComponent.vue

@@ -47,16 +47,16 @@ function createBody(){
 
 const fetchLink = document.location.protocol + "//" + document.location.hostname + "/libxml/html/" + chooseType(props.formatType);
 
-function processResponse(formattedCode : any){
-    var result = formattedCode.result;
-    emit("update:error", formattedCode.status == "ERR")
-    return result
-}
 
 function process(){
     fetch(fetchLink, {body:createBody(), method: "POST"})
         .then( response => response.json() )
-        .then( formattedCode => emit('update:result', processResponse(formattedCode) ) )
+        .then( formattedCode => processResponse(formattedCode) )
+}
+
+function processResponse(formattedCode : any){
+    emit('update:result', formattedCode )
+    emit("update:error", formattedCode.status == "ERR")
 }
 
 </script>

Frontend/src/components/formatter/JsonButtonFormatterComponent.vue

@@ -41,7 +41,6 @@ async function fetchRequest(request: Request):Promise<JSON> {
         return response.json()
     })
     .then((body) => body);
-    console.log(responseBody);
     return responseBody;
 }