Frontend/src/components/formatter/FormatterComponent.vue

@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import XMLButtonFormatterComponent from '@/components/formatter/XMLButtonFormatterComponent.vue';
+import JsonButtonFormatterComponent from '@/components/formatter/JsonButtonFormatterComponent.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({
+    formatterType: {
+        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"> {{ formatterType.toUpperCase() }} Formatter</span>
+            <div v-if="formatterType == '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="(data: any) => format(data)"></XMLButtonFormatterComponent>
+                <XMLButtonFormatterComponent @update:error="setErrorOccurred" :xml="data" @update:result="(data: any) => format(data)"></XMLButtonFormatterComponent>
+            </div>
+
+            <div v-if="formatterType == '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="(data: any) => format(data)" @update:error="setErrorOccurred"></JsonButtonFormatterComponent>
+                <JsonButtonFormatterComponent :json="data" @update:result="(data: any) => format(data)" @update:error="setErrorOccurred"></JsonButtonFormatterComponent>
+            </div>
+        </div>
+        <CodeEditorComponent :class="highlightTextField()" @update:updated-code="setTextFieldValue" :code="data" :config="{disabled:false,language:formatterType}" />
+    </div>
+</template>

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;
 }
 

Frontend/src/views/JsonFormatterView.vue

@@ -1,67 +1,8 @@
 <script setup lang="ts">
-import CodeEditorComponent from '@/components/CodeEditorComponent.vue';
-import JsonButtonFormatterComponent from '@/components/formatter/JsonButtonFormatterComponent.vue';
-import InsertTemplateComponent from '@components/common/InsertTemplateComponent.vue';
-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) {
-    
-    const reader = new FileReader()
-    reader.onloadend = () => {
-        var result = reader.result?.toString()
-        if (typeof result == "string")
-            setTextFieldValue(result);
-            
-    }
-    reader.readAsText(file.target.files[0])
-}
+import FormatterComponent from '@/components/formatter/FormatterComponent.vue';
 
 </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">JSON Formatter</span>
-            <div 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="json" @update:result="(data: any) => format(data)" @update:error="setErrorOccurred"></JsonButtonFormatterComponent>
-                <JsonButtonFormatterComponent :json="json" @update:result="(data: any) => format(data)" @update:error="setErrorOccurred"></JsonButtonFormatterComponent>
-            </div>
-        </div>
-        <CodeEditorComponent :class="{'text-field-error' : errorOccurred}" @update:updated-code="setTextFieldValue" :code="json" :config="{disabled:false,language:'json'}" />
-    </div>
+    <FormatterComponent formatter-type="json"></FormatterComponent>
 </template>

Frontend/src/views/XmlFormatterView.vue

@@ -1,66 +1,8 @@
 <script setup lang="ts">
-import XMLButtonFormatterComponent from '@/components/formatter/XMLButtonFormatterComponent.vue';
-import InsertTemplateComponent from '@components/common/InsertTemplateComponent.vue';
-import CodeEditorComponent from '@/components/CodeEditorComponent.vue';
-import { ref } from 'vue';
-
-
-const xml = ref('');
-const inputFile = ref()
-
-const errorOccurred = ref(false);
-
-function setTextFieldValue(data: string) {
-    xml.value = data
-}
-
-function format(formattedXml: any) {
-    xml.value = formattedXml.result;
-}
-
-function setErrorOccurred(occurred: boolean) {
-    errorOccurred.value = occurred
-}
-
-function setExample(data: string) {
-    inputFile.value.value = ''
-    setTextFieldValue(data)
-}
-
-function clear() {
-    xml.value = '';
-    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])
-}
+import FormatterComponent from '@/components/formatter/FormatterComponent.vue';
 
 </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">XML Formatter</span>
-            <div 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="xml" @update:result="(data: any) => format(data)"></XMLButtonFormatterComponent>
-                <XMLButtonFormatterComponent @update:error="setErrorOccurred" :xml="xml" @update:result="(data: any) => format(data)"></XMLButtonFormatterComponent>
-            </div>
-        </div>
-        <CodeEditorComponent :class="{'text-field-error' : errorOccurred}" @update:updated-code="setTextFieldValue" :code="xml" :config="{disabled:false,language:'xml'}" />
-    </div>
+    <FormatterComponent formatter-type="xml"></FormatterComponent>
 </template>