From a8f8c6d5f549cc5bd1f2428d4dfd98bf2cd881f3 Mon Sep 17 00:00:00 2001
From: Adam Bem <adam.bem@zoho.eu>
Date: Thu, 9 Nov 2023 08:34:28 +0100
Subject: [PATCH] Implemented red frame on parsing error in Parsers

---
 .../src/components/xml/XmlOutputFieldComponent.vue | 14 +++++++++-----
 Frontend/src/style.css                             |  4 ++++
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/Frontend/src/components/xml/XmlOutputFieldComponent.vue b/Frontend/src/components/xml/XmlOutputFieldComponent.vue
index f510d61..405d801 100644
--- a/Frontend/src/components/xml/XmlOutputFieldComponent.vue
+++ b/Frontend/src/components/xml/XmlOutputFieldComponent.vue
@@ -23,6 +23,8 @@ var versionsForCurrentEngine = ref([""]);
 const engine = ref('');
 const version = ref('');
 
+const errorOccurred = ref(false);
+
 
 onMounted(() => {
     changeAvailableEngines();
@@ -111,16 +113,18 @@ function prepareRequestBody():string {
 async function fetchRequest(request: Request):Promise<JSON> {
     var responseBody = await fetch(request)
     .then(response => response.json())
-    .then((body) => body);
-    return responseBody;
+    .then((body) => body)
+    return responseBody
 }
 
 function updateOutputField(data: any) {
-    result.value = data.result;
+    result.value = data.result
+    errorOccurred.value = data.status == "ERR"
 }
 
 function clear() {
-    result.value = "";
+    result.value = ""
+    errorOccurred.value = false
 }
 
 function emitVersionChange() {
@@ -148,7 +152,7 @@ function isVersionSelectionAvailable() {
                 <button class="tool-button" @click="process">Process</button>
             </div>
         </div>
-        <div class="overflow-scroll h-full w-full">
+        <div class="overflow-scroll h-full w-full rounded-2xl" :class="{'text-field-error' : errorOccurred}">
             <CodeEditor :code="result" :config="{disabled:true,language:tool}"></CodeEditor>
         </div>
         
diff --git a/Frontend/src/style.css b/Frontend/src/style.css
index 1bb9d69..e9a2af9 100644
--- a/Frontend/src/style.css
+++ b/Frontend/src/style.css
@@ -26,4 +26,8 @@
 
 .file-selector {
     @apply block file:border-none file:font-sans file:text-base file:hover:brightness-110 file:py-2 file:px-4 file:h-full file:w-fit file:rounded-full file:bg-gradient-to-r file:from-blue-400 file:to-sky-300  file:dark:text-white file:dark:from-sky-600 file:dark:to-sky-800 file:hover:bg-blue-400 w-fit rounded-full text-sm text-gray-900 border border-gray-300 cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400
+}
+
+.text-field-error {
+    @apply shadow-[0px_0px_20px_0px_rgba(255,0,0,1)];
 }
\ No newline at end of file