From a82f7f3b73b65a62f9695a4a5355ad45d1e71702 Mon Sep 17 00:00:00 2001
From: Adam Bem <adam.bem@zoho.eu>
Date: Thu, 15 Jun 2023 13:08:02 +0200
Subject: [PATCH 01/18] Basic styling

---
 Frontend/src/App.vue                               |  4 ++--
 .../src/components/sidebar/SidebarComponent.vue    |  9 ++++++---
 .../sidebar/SidebarMenuElementComponent.vue        | 14 +++++---------
 .../sidebar/SidebarToolLinkComponent.vue           |  2 +-
 4 files changed, 14 insertions(+), 15 deletions(-)

diff --git a/Frontend/src/App.vue b/Frontend/src/App.vue
index 1b1cdac..22c2e18 100644
--- a/Frontend/src/App.vue
+++ b/Frontend/src/App.vue
@@ -13,9 +13,9 @@ onMounted(() => {
 </script>
 
 <template>
-  <div id="layout" class="flex dark:bg-gray-700">
+  <div id="layout" class="flex dark:bg-gray-800">
     <SidebarComponent />
-    <div class="relative p-12 w-11/12">
+    <div class="relative p-6 w-11/12 m-4 bg-indigo-50 dark:bg-gray-700 rounded-2xl">
       <RouterView></RouterView>
     </div>
   </div>
diff --git a/Frontend/src/components/sidebar/SidebarComponent.vue b/Frontend/src/components/sidebar/SidebarComponent.vue
index 1db466e..4b873b3 100644
--- a/Frontend/src/components/sidebar/SidebarComponent.vue
+++ b/Frontend/src/components/sidebar/SidebarComponent.vue
@@ -28,8 +28,8 @@ function changeLogoForTheme(){
 </script>
 
 <template>
-    <aside class="relative top-0 left-0 z-40 w-1/12 h-screen transition-transform -translate-x-full sm:translate-x-0" >
-        <div class="h-full px-3 py-4 overflow-y-auto bg-gray-100 dark:bg-gray-800">
+    <aside class="relative top-0 left-0 z-40 w-48 h-screen transition-transform -translate-x-full sm:translate-x-0" >
+        <div class="h-full px-3 py-4 overflow-y-auto bg-indigo-50 dark:bg-gray-800">
             <a href="https://release11.com/">
                 <img :src="logoR11" class="w-72 h-16 p-2 dark:bg-gray-800"/>
             </a>
@@ -47,7 +47,10 @@ function changeLogoForTheme(){
                     <li><SidebarToolLinkComponent path-to="/format/JSON" element-content="JSON Formatter" /></li>
                 </sidebar-menu-element-component>
 
-                <li><SidebarToolLinkComponent class="text-left" path-to="/rest/mock" element-content="REST Mock" /></li>
+
+                <sidebar-menu-element-component category-name="REST">
+                    <li><SidebarToolLinkComponent path-to="/rest/mock" element-content="Mock" /></li>
+                </sidebar-menu-element-component>
 
             </ul>
         </div>
diff --git a/Frontend/src/components/sidebar/SidebarMenuElementComponent.vue b/Frontend/src/components/sidebar/SidebarMenuElementComponent.vue
index 9fc61f2..c7959f1 100644
--- a/Frontend/src/components/sidebar/SidebarMenuElementComponent.vue
+++ b/Frontend/src/components/sidebar/SidebarMenuElementComponent.vue
@@ -1,13 +1,9 @@
 <script setup lang="ts">
 import { ref } from 'vue'
-const hiddenOrActive = ref('hidden');
+const isActive = ref(false);
 
 function switchHiddenElement(){
-    if(hiddenOrActive.value == 'hidden'){
-        hiddenOrActive.value = "active";
-    } else{
-        hiddenOrActive.value = "hidden"
-    }
+    isActive.value = !isActive.value;
 }
 
 const props = defineProps(
@@ -22,10 +18,10 @@ const props = defineProps(
 
 <template>
     <li>
-        <button @click="switchHiddenElement()" type="button" class="flex items-center w-full p-2 text-gray-900 transition duration-75 rounded-lg group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700">
-            <span class="flex-1 ml-3 text-left whitespace-nowrap">{{props.categoryName}}</span>
+        <button @click="switchHiddenElement()" type="button" :class="[isActive ? 'rounded-t-lg bg-white dark:bg-gray-700' : 'rounded-lg']" class="flex items-center w-full p-2 text-lg font-bold text-gray-900 transition duration-75 group hover:bg-blue-100 dark:text-white dark:hover:bg-gray-700">
+            <span class="flex-1 text-center items-center whitespace-nowrap">{{props.categoryName}}</span>
         </button>
-        <ul class='py-2 space-y-2 bg-gray-50 dark:bg-gray-700 rounded-xl' :class="hiddenOrActive">
+        <ul class="py-2 space-y-2 bg-white dark:bg-gray-700 rounded-b-xl" :class="[isActive ? 'active' : 'hidden']">
             <slot></slot>
         </ul>
     </li>
diff --git a/Frontend/src/components/sidebar/SidebarToolLinkComponent.vue b/Frontend/src/components/sidebar/SidebarToolLinkComponent.vue
index dfee0dd..5d885ce 100644
--- a/Frontend/src/components/sidebar/SidebarToolLinkComponent.vue
+++ b/Frontend/src/components/sidebar/SidebarToolLinkComponent.vue
@@ -10,5 +10,5 @@ const props = defineProps(
 </script>
 
 <template>
-    <RouterLink class="flex items-center w-full p-2 text-gray-900 transition duration-75 rounded-lg pl-11 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700" :to="props.pathTo">{{ props.elementContent }}</RouterLink>
+    <RouterLink class="flex w-full py-2 px-4 text-center text-gray-800 font-thin transition duration-75 group hover:bg-blue-100 dark:text-white dark:hover:bg-gray-700" :to="props.pathTo">{{ props.elementContent }}</RouterLink>
 </template>
\ No newline at end of file
-- 
2.51.0


From 7f8cd7be5e9a8be863380444ba73cf191931d43b Mon Sep 17 00:00:00 2001
From: Adam Bem <adam.bem@zoho.eu>
Date: Thu, 15 Jun 2023 14:10:42 +0200
Subject: [PATCH 02/18] Centered menu items

---
 .../components/sidebar/SidebarComponent.vue   | 30 ++++++++-----------
 .../sidebar/SidebarMenuElementComponent.vue   | 13 ++++----
 .../sidebar/SidebarToolLinkComponent.vue      | 16 +++++++---
 3 files changed, 31 insertions(+), 28 deletions(-)

diff --git a/Frontend/src/components/sidebar/SidebarComponent.vue b/Frontend/src/components/sidebar/SidebarComponent.vue
index 4b873b3..12971e1 100644
--- a/Frontend/src/components/sidebar/SidebarComponent.vue
+++ b/Frontend/src/components/sidebar/SidebarComponent.vue
@@ -16,11 +16,7 @@ onMounted( () => {
 } )
 
 function changeLogoForTheme(){
-    if (isDarkModeSet()) {
-    logoR11.value = logoDark;
-    } else{
-        logoR11.value = logoWhite;
-    }
+    logoR11.value = isDarkModeSet() ? logoDark : logoWhite;
 }
 
 
@@ -29,30 +25,30 @@ function changeLogoForTheme(){
 
 <template>
     <aside class="relative top-0 left-0 z-40 w-48 h-screen transition-transform -translate-x-full sm:translate-x-0" >
-        <div class="h-full px-3 py-4 overflow-y-auto bg-indigo-50 dark:bg-gray-800">
+        <div class="h-full px-3 pt-2 pb-4 overflow-y-auto bg-indigo-50 dark:bg-gray-800">
             <a href="https://release11.com/">
-                <img :src="logoR11" class="w-72 h-16 p-2 dark:bg-gray-800"/>
+                <img :src="logoR11" class="w-72 h-16 p-2 pt-0 dark:bg-gray-800"/>
             </a>
-            <ul class="space-y-2 font-medium">
+            <div class="flex flex-col font-medium items-center">
                 <sidebar-menu-element-component category-name="XML">
-                    <li><SidebarToolLinkComponent path-to="/xml/xslt" element-content="XSLT" /></li>
-                    <li><SidebarToolLinkComponent path-to="/xml/xpath" element-content="XPath" /></li>
-                    <li><SidebarToolLinkComponent path-to="/xml/xsd" element-content="XSD" /></li>
-                    <li><SidebarToolLinkComponent path-to="/xml/xquery" element-content="XQuery" /></li>
+                    <SidebarToolLinkComponent path-to="/xml/xslt" element-content="XSLT" />
+                    <SidebarToolLinkComponent path-to="/xml/xpath" element-content="XPath" />
+                    <SidebarToolLinkComponent path-to="/xml/xsd" element-content="XSD" />
+                    <SidebarToolLinkComponent path-to="/xml/xquery" element-content="XQuery" />
                 </sidebar-menu-element-component>
 
                 <sidebar-menu-element-component category-name="Formatter">
-                    <li><SidebarToolLinkComponent path-to="/format/XML" element-content="XML Formatter" /></li>
-                    <li><SidebarToolLinkComponent path-to="/format/HTML" element-content="HTML Formatter" /></li>
-                    <li><SidebarToolLinkComponent path-to="/format/JSON" element-content="JSON Formatter" /></li>
+                    <SidebarToolLinkComponent path-to="/format/XML" element-content="XML Formatter" />
+                    <SidebarToolLinkComponent path-to="/format/HTML" element-content="HTML Formatter" />
+                    <SidebarToolLinkComponent path-to="/format/JSON" element-content="JSON Formatter" />
                 </sidebar-menu-element-component>
 
 
                 <sidebar-menu-element-component category-name="REST">
-                    <li><SidebarToolLinkComponent path-to="/rest/mock" element-content="Mock" /></li>
+                    <SidebarToolLinkComponent path-to="/rest/mock" element-content="Mock" />
                 </sidebar-menu-element-component>
 
-            </ul>
+            </div>
         </div>
     </aside>
 </template>
\ No newline at end of file
diff --git a/Frontend/src/components/sidebar/SidebarMenuElementComponent.vue b/Frontend/src/components/sidebar/SidebarMenuElementComponent.vue
index c7959f1..4a3c3c9 100644
--- a/Frontend/src/components/sidebar/SidebarMenuElementComponent.vue
+++ b/Frontend/src/components/sidebar/SidebarMenuElementComponent.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref } from 'vue'
-const isActive = ref(false);
+const isActive = ref(true);
 
 function switchHiddenElement(){
     isActive.value = !isActive.value;
@@ -17,12 +17,11 @@ const props = defineProps(
 
 
 <template>
-    <li>
-        <button @click="switchHiddenElement()" type="button" :class="[isActive ? 'rounded-t-lg bg-white dark:bg-gray-700' : 'rounded-lg']" class="flex items-center w-full p-2 text-lg font-bold text-gray-900 transition duration-75 group hover:bg-blue-100 dark:text-white dark:hover:bg-gray-700">
-            <span class="flex-1 text-center items-center whitespace-nowrap">{{props.categoryName}}</span>
+
+        <button @click="switchHiddenElement()" type="button" :class="[isActive ? 'rounded-t-lg bg-white dark:bg-gray-700' : 'rounded-lg']" class="w-full p-2 text-lg font-bold text-gray-900 transition duration-75 hover:bg-blue-100 dark:text-white dark:hover:bg-gray-600">
+            <span class="flex-1 whitespace-nowrap">{{props.categoryName}}</span>
         </button>
-        <ul class="py-2 space-y-2 bg-white dark:bg-gray-700 rounded-b-xl" :class="[isActive ? 'active' : 'hidden']">
+        <div class="flex flex-col w-full mb-4 py-2 bg-white dark:bg-gray-700 rounded-b-xl font-thin overflow-hidden" :class="[isActive ? 'active' : 'hidden']">
             <slot></slot>
-        </ul>
-    </li>
+        </div>
 </template>
\ No newline at end of file
diff --git a/Frontend/src/components/sidebar/SidebarToolLinkComponent.vue b/Frontend/src/components/sidebar/SidebarToolLinkComponent.vue
index 5d885ce..b6450b8 100644
--- a/Frontend/src/components/sidebar/SidebarToolLinkComponent.vue
+++ b/Frontend/src/components/sidebar/SidebarToolLinkComponent.vue
@@ -2,13 +2,21 @@
 import { RouterLink } from 'vue-router';
 const props = defineProps(
     {
-        elementContent: {required: false},
-        pathTo: {type: String, required:true}
+        elementContent: { required: false },
+        pathTo: { type: String, required: true }
     }
 )
 
 </script>
 
 <template>
-    <RouterLink class="flex w-full py-2 px-4 text-center text-gray-800 font-thin transition duration-75 group hover:bg-blue-100 dark:text-white dark:hover:bg-gray-700" :to="props.pathTo">{{ props.elementContent }}</RouterLink>
-</template>
\ No newline at end of file
+    <RouterLink
+        class="w-full text-center py-2 px-4 text-gray-800 transition duration-75 hover:bg-blue-100 dark:text-white dark:hover:bg-gray-600"
+        :to="props.pathTo">{{ props.elementContent }}</RouterLink>
+</template>
+
+<style>
+.router-link-active {
+    font-weight: 500;
+}
+</style>
\ No newline at end of file
-- 
2.51.0


From 517afaabffd5cc26883fa04b3fd834883a30653f Mon Sep 17 00:00:00 2001
From: Adam Bem <adam.bem@zoho.eu>
Date: Thu, 15 Jun 2023 14:30:48 +0200
Subject: [PATCH 03/18] Small fixes

---
 .../src/components/sidebar/SidebarComponent.vue     | 13 ++++++-------
 .../sidebar/SidebarMenuElementComponent.vue         |  5 +++--
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/Frontend/src/components/sidebar/SidebarComponent.vue b/Frontend/src/components/sidebar/SidebarComponent.vue
index 12971e1..7798d30 100644
--- a/Frontend/src/components/sidebar/SidebarComponent.vue
+++ b/Frontend/src/components/sidebar/SidebarComponent.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref , onMounted } from 'vue'
+import { ref , onMounted, watch } from 'vue'
 import SidebarToolLinkComponent from './SidebarToolLinkComponent.vue';
 import SidebarMenuElementComponent from './SidebarMenuElementComponent.vue';
 import logoDark from '@assets/logo_biale.svg';
@@ -7,6 +7,11 @@ import logoWhite from '@assets/logo_czarne.svg';
 
 const logoR11 = ref( logoDark );
 
+
+function changeLogoForTheme(){
+    logoR11.value = isDarkModeSet() ? logoDark : logoWhite;
+}
+
 function isDarkModeSet(){
     return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
 }
@@ -15,12 +20,6 @@ onMounted( () => {
     changeLogoForTheme();
 } )
 
-function changeLogoForTheme(){
-    logoR11.value = isDarkModeSet() ? logoDark : logoWhite;
-}
-
-
-
 </script>
 
 <template>
diff --git a/Frontend/src/components/sidebar/SidebarMenuElementComponent.vue b/Frontend/src/components/sidebar/SidebarMenuElementComponent.vue
index 4a3c3c9..42adbaa 100644
--- a/Frontend/src/components/sidebar/SidebarMenuElementComponent.vue
+++ b/Frontend/src/components/sidebar/SidebarMenuElementComponent.vue
@@ -17,11 +17,12 @@ const props = defineProps(
 
 
 <template>
-
+    <div class="mb-4 w-full">
         <button @click="switchHiddenElement()" type="button" :class="[isActive ? 'rounded-t-lg bg-white dark:bg-gray-700' : 'rounded-lg']" class="w-full p-2 text-lg font-bold text-gray-900 transition duration-75 hover:bg-blue-100 dark:text-white dark:hover:bg-gray-600">
             <span class="flex-1 whitespace-nowrap">{{props.categoryName}}</span>
         </button>
-        <div class="flex flex-col w-full mb-4 py-2 bg-white dark:bg-gray-700 rounded-b-xl font-thin overflow-hidden" :class="[isActive ? 'active' : 'hidden']">
+        <div class="flex flex-col w-full py-2 bg-white dark:bg-gray-700 rounded-b-xl font-thin overflow-hidden" :class="[isActive ? 'active' : 'hidden']">
             <slot></slot>
         </div>
+    </div>
 </template>
\ No newline at end of file
-- 
2.51.0


From 8486c166c5aab1299be380e2ae07b63b50bb4fe2 Mon Sep 17 00:00:00 2001
From: Adam Bem <adam.bem@zoho.eu>
Date: Thu, 15 Jun 2023 14:48:13 +0200
Subject: [PATCH 04/18] Sidebar now doesn't shrink

---
 Frontend/src/components/sidebar/SidebarComponent.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/Frontend/src/components/sidebar/SidebarComponent.vue b/Frontend/src/components/sidebar/SidebarComponent.vue
index 7798d30..8755d84 100644
--- a/Frontend/src/components/sidebar/SidebarComponent.vue
+++ b/Frontend/src/components/sidebar/SidebarComponent.vue
@@ -23,10 +23,10 @@ onMounted( () => {
 </script>
 
 <template>
-    <aside class="relative top-0 left-0 z-40 w-48 h-screen transition-transform -translate-x-full sm:translate-x-0" >
+    <aside class="relative flex-shrink-0 top-0 left-0 z-40 w-48 h-screen transition-transform -translate-x-full sm:translate-x-0" >
         <div class="h-full px-3 pt-2 pb-4 overflow-y-auto bg-indigo-50 dark:bg-gray-800">
             <a href="https://release11.com/">
-                <img :src="logoR11" class="w-72 h-16 p-2 pt-0 dark:bg-gray-800"/>
+                <img :src="logoR11" class="w-72 h-16 p-2 pt-0"/>
             </a>
             <div class="flex flex-col font-medium items-center">
                 <sidebar-menu-element-component category-name="XML">
-- 
2.51.0


From 794328a27b40c0bbcfd750d9a16fad7f8c63bf34 Mon Sep 17 00:00:00 2001
From: Adam Bem <adam.bem@zoho.eu>
Date: Thu, 15 Jun 2023 15:10:46 +0200
Subject: [PATCH 05/18] Added some gradients

---
 Frontend/src/components/sidebar/SidebarComponent.vue        | 2 +-
 .../src/components/sidebar/SidebarMenuElementComponent.vue  | 6 +++---
 .../src/components/sidebar/SidebarToolLinkComponent.vue     | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/Frontend/src/components/sidebar/SidebarComponent.vue b/Frontend/src/components/sidebar/SidebarComponent.vue
index 8755d84..35313d1 100644
--- a/Frontend/src/components/sidebar/SidebarComponent.vue
+++ b/Frontend/src/components/sidebar/SidebarComponent.vue
@@ -24,7 +24,7 @@ onMounted( () => {
 
 <template>
     <aside class="relative flex-shrink-0 top-0 left-0 z-40 w-48 h-screen transition-transform -translate-x-full sm:translate-x-0" >
-        <div class="h-full px-3 pt-2 pb-4 overflow-y-auto bg-indigo-50 dark:bg-gray-800">
+        <div class="h-full px-3 pt-2 pb-4 overflow-y-auto">
             <a href="https://release11.com/">
                 <img :src="logoR11" class="w-72 h-16 p-2 pt-0"/>
             </a>
diff --git a/Frontend/src/components/sidebar/SidebarMenuElementComponent.vue b/Frontend/src/components/sidebar/SidebarMenuElementComponent.vue
index 42adbaa..b16429d 100644
--- a/Frontend/src/components/sidebar/SidebarMenuElementComponent.vue
+++ b/Frontend/src/components/sidebar/SidebarMenuElementComponent.vue
@@ -17,11 +17,11 @@ const props = defineProps(
 
 
 <template>
-    <div class="mb-4 w-full">
-        <button @click="switchHiddenElement()" type="button" :class="[isActive ? 'rounded-t-lg bg-white dark:bg-gray-700' : 'rounded-lg']" class="w-full p-2 text-lg font-bold text-gray-900 transition duration-75 hover:bg-blue-100 dark:text-white dark:hover:bg-gray-600">
+    <div class="mb-4 bg-gradient-to-r from-blue-400 to-blue-200 dark:from-blue-700 dark:to-indigo-900 p-2 rounded-xl w-full">
+        <button @click="switchHiddenElement()" type="button" :class="[isActive ? 'rounded-lg' : 'rounded-lg']" class="w-full p-2 text-lg font-bold text-gray-900 transition duration-75 hover:bg-blue-100 dark:text-gray-100  dark:hover:bg-slate-600">
             <span class="flex-1 whitespace-nowrap">{{props.categoryName}}</span>
         </button>
-        <div class="flex flex-col w-full py-2 bg-white dark:bg-gray-700 rounded-b-xl font-thin overflow-hidden" :class="[isActive ? 'active' : 'hidden']">
+        <div class="flex flex-col w-full py-2 bg-indigo-50 dark:bg-slate-800 rounded-xl font-thin overflow-hidden" :class="[isActive ? 'active' : 'hidden']">
             <slot></slot>
         </div>
     </div>
diff --git a/Frontend/src/components/sidebar/SidebarToolLinkComponent.vue b/Frontend/src/components/sidebar/SidebarToolLinkComponent.vue
index b6450b8..f85e7e7 100644
--- a/Frontend/src/components/sidebar/SidebarToolLinkComponent.vue
+++ b/Frontend/src/components/sidebar/SidebarToolLinkComponent.vue
@@ -11,7 +11,7 @@ const props = defineProps(
 
 <template>
     <RouterLink
-        class="w-full text-center py-2 px-4 text-gray-800 transition duration-75 hover:bg-blue-100 dark:text-white dark:hover:bg-gray-600"
+        class="w-full text-center py-2 px-4 text-gray-800 transition duration-75 hover:bg-blue-200 dark:text-white dark:hover:bg-slate-600"
         :to="props.pathTo">{{ props.elementContent }}</RouterLink>
 </template>
 
-- 
2.51.0


From 8f13ab0b4eb8135e9aa7917e4b95f291c78a99e6 Mon Sep 17 00:00:00 2001
From: Adam Bem <adam.bem@zoho.eu>
Date: Thu, 15 Jun 2023 15:19:12 +0200
Subject: [PATCH 06/18] Added gradient to main background

---
 Frontend/src/App.vue                                          | 4 ++--
 .../src/components/sidebar/SidebarMenuElementComponent.vue    | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/Frontend/src/App.vue b/Frontend/src/App.vue
index 22c2e18..acfd065 100644
--- a/Frontend/src/App.vue
+++ b/Frontend/src/App.vue
@@ -13,9 +13,9 @@ onMounted(() => {
 </script>
 
 <template>
-  <div id="layout" class="flex dark:bg-gray-800">
+  <div id="layout" class="flex bg-gradient-to-r from-white to-blue-200 dark:bg-gradient-to-r dark:from-slate-800 dark:to-indigo-950">
     <SidebarComponent />
-    <div class="relative p-6 w-11/12 m-4 bg-indigo-50 dark:bg-gray-700 rounded-2xl">
+    <div class="relative p-6 w-full m-4 bg-indigo-50 dark:bg-gray-700 rounded-2xl shadow-md">
       <RouterView></RouterView>
     </div>
   </div>
diff --git a/Frontend/src/components/sidebar/SidebarMenuElementComponent.vue b/Frontend/src/components/sidebar/SidebarMenuElementComponent.vue
index b16429d..f7d45a6 100644
--- a/Frontend/src/components/sidebar/SidebarMenuElementComponent.vue
+++ b/Frontend/src/components/sidebar/SidebarMenuElementComponent.vue
@@ -17,7 +17,7 @@ const props = defineProps(
 
 
 <template>
-    <div class="mb-4 bg-gradient-to-r from-blue-400 to-blue-200 dark:from-blue-700 dark:to-indigo-900 p-2 rounded-xl w-full">
+    <div class="mb-4 bg-gradient-to-r from-blue-400 to-blue-200 dark:from-blue-700 dark:to-indigo-900 p-2 rounded-xl w-full shadow-md">
         <button @click="switchHiddenElement()" type="button" :class="[isActive ? 'rounded-lg' : 'rounded-lg']" class="w-full p-2 text-lg font-bold text-gray-900 transition duration-75 hover:bg-blue-100 dark:text-gray-100  dark:hover:bg-slate-600">
             <span class="flex-1 whitespace-nowrap">{{props.categoryName}}</span>
         </button>
-- 
2.51.0


From 59968447a27d0ac3fb622c8dc242eeda45aa0be9 Mon Sep 17 00:00:00 2001
From: Adam Bem <adam.bem@zoho.eu>
Date: Thu, 15 Jun 2023 15:32:34 +0200
Subject: [PATCH 07/18] Some adjustments

---
 Frontend/src/App.vue                                        | 6 ------
 Frontend/src/components/sidebar/SidebarComponent.vue        | 4 ++--
 .../src/components/sidebar/SidebarMenuElementComponent.vue  | 2 +-
 .../src/components/sidebar/SidebarToolLinkComponent.vue     | 2 +-
 4 files changed, 4 insertions(+), 10 deletions(-)

diff --git a/Frontend/src/App.vue b/Frontend/src/App.vue
index acfd065..65660b2 100644
--- a/Frontend/src/App.vue
+++ b/Frontend/src/App.vue
@@ -3,13 +3,7 @@ import { onMounted, ref } from 'vue';
 import { RouterView } from 'vue-router';
 import SidebarComponent from '@components/sidebar/SidebarComponent.vue';
 
-const activeToolBox = ref('');
 
-
-
-onMounted(() => {
-  activeToolBox.value = "xml";
-});
 </script>
 
 <template>
diff --git a/Frontend/src/components/sidebar/SidebarComponent.vue b/Frontend/src/components/sidebar/SidebarComponent.vue
index 35313d1..e8ab267 100644
--- a/Frontend/src/components/sidebar/SidebarComponent.vue
+++ b/Frontend/src/components/sidebar/SidebarComponent.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref , onMounted, watch } from 'vue'
+import { ref , onMounted, watch, onUpdated } from 'vue'
 import SidebarToolLinkComponent from './SidebarToolLinkComponent.vue';
 import SidebarMenuElementComponent from './SidebarMenuElementComponent.vue';
 import logoDark from '@assets/logo_biale.svg';
@@ -18,7 +18,7 @@ function isDarkModeSet(){
 
 onMounted( () => {
     changeLogoForTheme();
-} )
+})
 
 </script>
 
diff --git a/Frontend/src/components/sidebar/SidebarMenuElementComponent.vue b/Frontend/src/components/sidebar/SidebarMenuElementComponent.vue
index f7d45a6..0dd42af 100644
--- a/Frontend/src/components/sidebar/SidebarMenuElementComponent.vue
+++ b/Frontend/src/components/sidebar/SidebarMenuElementComponent.vue
@@ -17,7 +17,7 @@ const props = defineProps(
 
 
 <template>
-    <div class="mb-4 bg-gradient-to-r from-blue-400 to-blue-200 dark:from-blue-700 dark:to-indigo-900 p-2 rounded-xl w-full shadow-md">
+    <div class="w-full mb-4 p-2 rounded-xl  shadow-md bg-gradient-to-r from-blue-400 to-blue-200 dark:from-blue-600 dark:to-blue-900">
         <button @click="switchHiddenElement()" type="button" :class="[isActive ? 'rounded-lg' : 'rounded-lg']" class="w-full p-2 text-lg font-bold text-gray-900 transition duration-75 hover:bg-blue-100 dark:text-gray-100  dark:hover:bg-slate-600">
             <span class="flex-1 whitespace-nowrap">{{props.categoryName}}</span>
         </button>
diff --git a/Frontend/src/components/sidebar/SidebarToolLinkComponent.vue b/Frontend/src/components/sidebar/SidebarToolLinkComponent.vue
index f85e7e7..5a1b5c4 100644
--- a/Frontend/src/components/sidebar/SidebarToolLinkComponent.vue
+++ b/Frontend/src/components/sidebar/SidebarToolLinkComponent.vue
@@ -11,7 +11,7 @@ const props = defineProps(
 
 <template>
     <RouterLink
-        class="w-full text-center py-2 px-4 text-gray-800 transition duration-75 hover:bg-blue-200 dark:text-white dark:hover:bg-slate-600"
+        class="w-full text-center py-2 px-4 text-gray-800 transition duration-75 hover:bg-blue-100 dark:text-white dark:hover:bg-slate-600"
         :to="props.pathTo">{{ props.elementContent }}</RouterLink>
 </template>
 
-- 
2.51.0


From 5e8870067e007f891bbfce4cf19c404ce5480047 Mon Sep 17 00:00:00 2001
From: Adam Bem <adam.bem@zoho.eu>
Date: Thu, 15 Jun 2023 15:32:57 +0200
Subject: [PATCH 08/18] Removed unused import in app.vue

---
 Frontend/src/App.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/Frontend/src/App.vue b/Frontend/src/App.vue
index 65660b2..798ecc7 100644
--- a/Frontend/src/App.vue
+++ b/Frontend/src/App.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { onMounted, ref } from 'vue';
 import { RouterView } from 'vue-router';
 import SidebarComponent from '@components/sidebar/SidebarComponent.vue';
 
-- 
2.51.0


From 21402f8490c6e950fe8c0728c4329977f78e96ea Mon Sep 17 00:00:00 2001
From: Adam Bem <adam.bem@zoho.eu>
Date: Thu, 15 Jun 2023 15:39:48 +0200
Subject: [PATCH 09/18] Adjustments

---
 Frontend/src/components/sidebar/SidebarComponent.vue            | 2 +-
 Frontend/src/components/sidebar/SidebarMenuElementComponent.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/Frontend/src/components/sidebar/SidebarComponent.vue b/Frontend/src/components/sidebar/SidebarComponent.vue
index e8ab267..d3a73c5 100644
--- a/Frontend/src/components/sidebar/SidebarComponent.vue
+++ b/Frontend/src/components/sidebar/SidebarComponent.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref , onMounted, watch, onUpdated } from 'vue'
+import { ref , onMounted} from 'vue'
 import SidebarToolLinkComponent from './SidebarToolLinkComponent.vue';
 import SidebarMenuElementComponent from './SidebarMenuElementComponent.vue';
 import logoDark from '@assets/logo_biale.svg';
diff --git a/Frontend/src/components/sidebar/SidebarMenuElementComponent.vue b/Frontend/src/components/sidebar/SidebarMenuElementComponent.vue
index 0dd42af..e6f089e 100644
--- a/Frontend/src/components/sidebar/SidebarMenuElementComponent.vue
+++ b/Frontend/src/components/sidebar/SidebarMenuElementComponent.vue
@@ -17,7 +17,7 @@ const props = defineProps(
 
 
 <template>
-    <div class="w-full mb-4 p-2 rounded-xl  shadow-md bg-gradient-to-r from-blue-400 to-blue-200 dark:from-blue-600 dark:to-blue-900">
+    <div class="w-full mb-4 p-2 rounded-xl shadow-md bg-gradient-to-r from-blue-400 to-blue-200 dark:from-blue-600 dark:to-blue-900">
         <button @click="switchHiddenElement()" type="button" :class="[isActive ? 'rounded-lg' : 'rounded-lg']" class="w-full p-2 text-lg font-bold text-gray-900 transition duration-75 hover:bg-blue-100 dark:text-gray-100  dark:hover:bg-slate-600">
             <span class="flex-1 whitespace-nowrap">{{props.categoryName}}</span>
         </button>
-- 
2.51.0


From f9a4cd52e48f47edbe100fccf77a2f106a288a85 Mon Sep 17 00:00:00 2001
From: Adam Bem <adam.bem@zoho.eu>
Date: Thu, 15 Jun 2023 16:37:26 +0200
Subject: [PATCH 10/18] Added components for XSLT

---
 .../components/xml/XmlInputFieldComponent.vue | 20 +++++++++---------
 .../xml/XmlInputFieldToolbarComponent.vue     | 21 +++++++++++++++++++
 .../xml/XmlOutputFieldComponent.vue           | 21 +++++++++++++++++++
 .../xml/XmlOutputFieldToolbarComponent.vue    | 21 +++++++++++++++++++
 4 files changed, 73 insertions(+), 10 deletions(-)
 create mode 100644 Frontend/src/components/xml/XmlInputFieldToolbarComponent.vue
 create mode 100644 Frontend/src/components/xml/XmlOutputFieldComponent.vue
 create mode 100644 Frontend/src/components/xml/XmlOutputFieldToolbarComponent.vue

diff --git a/Frontend/src/components/xml/XmlInputFieldComponent.vue b/Frontend/src/components/xml/XmlInputFieldComponent.vue
index 80704f0..33a83e9 100644
--- a/Frontend/src/components/xml/XmlInputFieldComponent.vue
+++ b/Frontend/src/components/xml/XmlInputFieldComponent.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import xmlInputFieldToolbarComponent from '@/components/xml/XmlInputFieldToolbarComponent.vue';
 
 const props = defineProps(
     {
@@ -9,15 +10,14 @@ const props = defineProps(
 </script>
 
 <template>
-    <div class="flex flex-col gap-6 w-full h-full items-center">
-        <label for="xmlfield" class="dark:text-white">XML</label>
-        <textarea id="xmlfield" class="w-1/2 h-36 bg-gray-500">
-
-
-        </textarea>
-        <label for="transformField" class="dark:text-white">{{ props.transformationName }}</label>
-        <textarea id="transformField" class="w-1/2 h-36 bg-gray-500">
-
-        </textarea>
+    <div class="flex flex-col w-full h-full items-center gap-4">
+        <div class="w-full">
+            <xmlInputFieldToolbarComponent prettyName="XML" fieldName="xml"></xmlInputFieldToolbarComponent>
+            <textarea id="xmlfield" class="w-full dark:bg-gray-600 border border-slate-400 rounded-md"></textarea>
+        </div>
+        <div class="w-full">
+            <xmlInputFieldToolbarComponent prettyName="XSLT" fieldName="xslt"></xmlInputFieldToolbarComponent>
+        <textarea id="transformField" class="w-full dark:bg-gray-600 border border-slate-400 rounded-md"></textarea>
+        </div>
     </div>
 </template>
\ No newline at end of file
diff --git a/Frontend/src/components/xml/XmlInputFieldToolbarComponent.vue b/Frontend/src/components/xml/XmlInputFieldToolbarComponent.vue
new file mode 100644
index 0000000..7a3cb1a
--- /dev/null
+++ b/Frontend/src/components/xml/XmlInputFieldToolbarComponent.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+
+const props = defineProps(
+    {
+        prettyName: {type: String, required: true},
+        fieldName: {type: String, required: true},
+    }
+)
+
+</script>
+
+<template>
+    <div class="flex place-content-between w-full pr-2 items-center m-2">
+        <span class="dark:text-white">{{ prettyName }}</span>
+        <div class="flex space-x-2">
+            <button class="tool-button">Insert default {{ prettyName }}</button>
+            <button class="tool-button">Clear</button>    
+        </div>
+        
+    </div>
+</template>
\ No newline at end of file
diff --git a/Frontend/src/components/xml/XmlOutputFieldComponent.vue b/Frontend/src/components/xml/XmlOutputFieldComponent.vue
new file mode 100644
index 0000000..bf61cb8
--- /dev/null
+++ b/Frontend/src/components/xml/XmlOutputFieldComponent.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import xmlOutputFieldToolbarComponent from '@/components/xml/XmlOutputFieldToolbarComponent.vue';
+
+
+const props = defineProps(
+    {
+        transformationName: {type: String},
+    }
+)
+
+</script>
+
+<template>
+    <div class="flex flex-col w-full h-full items-center">
+        <xmlOutputFieldToolbarComponent field-name="result"></xmlOutputFieldToolbarComponent>
+        <div class="w-full h-max p-2 border border-slate-400 rounded-md text-left">
+            <pre ><code>&lt;test&gt;fsdafdsa&lt;/test&gt;</code></pre>
+        </div>
+        
+    </div>
+</template>
\ No newline at end of file
diff --git a/Frontend/src/components/xml/XmlOutputFieldToolbarComponent.vue b/Frontend/src/components/xml/XmlOutputFieldToolbarComponent.vue
new file mode 100644
index 0000000..4853a13
--- /dev/null
+++ b/Frontend/src/components/xml/XmlOutputFieldToolbarComponent.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+
+const props = defineProps(
+    {
+
+        fieldName: {type: String, required: true},
+    }
+)
+
+</script>
+
+<template>
+    <div class="flex place-content-between w-full h-full items-center m-2">
+        <span class="dark:text-white">Result:</span>
+        <div class="flex space-x-2">
+            <button class="tool-button">Process</button>
+            <button class="tool-button">Clear</button>    
+        </div>
+        
+    </div>
+</template>
\ No newline at end of file
-- 
2.51.0


From bd16c0408136c8d3bafa30aa7eca3c0b4ed7202a Mon Sep 17 00:00:00 2001
From: Adam Bem <adam.bem@zoho.eu>
Date: Fri, 16 Jun 2023 11:04:37 +0200
Subject: [PATCH 11/18] Implemented working XSLT tool

---
 Frontend/package-lock.json                    |  9 +++
 Frontend/package.json                         |  1 +
 Frontend/src/App.vue                          |  2 +-
 .../components/xml/XmlInputFieldComponent.vue | 28 ++++++---
 .../xml/XmlInputFieldToolbarComponent.vue     |  4 +-
 .../xml/XmlOutputFieldComponent.vue           | 19 ++++--
 .../xml/XmlOutputFieldToolbarComponent.vue    | 61 +++++++++++++++++--
 Frontend/src/style.css                        |  4 ++
 Frontend/src/views/XSLTView.vue               | 17 +++---
 9 files changed, 119 insertions(+), 26 deletions(-)

diff --git a/Frontend/package-lock.json b/Frontend/package-lock.json
index ecb6806..08406b2 100644
--- a/Frontend/package-lock.json
+++ b/Frontend/package-lock.json
@@ -8,6 +8,7 @@
       "name": "new-frontend",
       "version": "0.0.0",
       "dependencies": {
+        "hljs": "^6.2.3",
         "vue": "^3.3.4",
         "vue-router": "^4.2.2"
       },
@@ -2356,6 +2357,14 @@
         "he": "bin/he"
       }
     },
+    "node_modules/hljs": {
+      "version": "6.2.3",
+      "resolved": "https://registry.npmjs.org/hljs/-/hljs-6.2.3.tgz",
+      "integrity": "sha512-2vtAOX8kI7WO4/19XPFl7WJauIGsOxZkD+6LLmDWx6IQsPvxjnqqFsJlfg+wkghrb5I59OS5oeqGU7Ihbp+oOw==",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/hosted-git-info": {
       "version": "2.8.9",
       "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz",
diff --git a/Frontend/package.json b/Frontend/package.json
index 250b1e4..37b53fe 100644
--- a/Frontend/package.json
+++ b/Frontend/package.json
@@ -12,6 +12,7 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
+    "hljs": "^6.2.3",
     "vue": "^3.3.4",
     "vue-router": "^4.2.2"
   },
diff --git a/Frontend/src/App.vue b/Frontend/src/App.vue
index 798ecc7..91a9744 100644
--- a/Frontend/src/App.vue
+++ b/Frontend/src/App.vue
@@ -6,7 +6,7 @@ import SidebarComponent from '@components/sidebar/SidebarComponent.vue';
 </script>
 
 <template>
-  <div id="layout" class="flex bg-gradient-to-r from-white to-blue-200 dark:bg-gradient-to-r dark:from-slate-800 dark:to-indigo-950">
+  <div id="layout" class="flex bg-gradient-to-br from-white to-blue-200 dark:from-slate-800 dark:to-indigo-950">
     <SidebarComponent />
     <div class="relative p-6 w-full m-4 bg-indigo-50 dark:bg-gray-700 rounded-2xl shadow-md">
       <RouterView></RouterView>
diff --git a/Frontend/src/components/xml/XmlInputFieldComponent.vue b/Frontend/src/components/xml/XmlInputFieldComponent.vue
index 33a83e9..bb4668e 100644
--- a/Frontend/src/components/xml/XmlInputFieldComponent.vue
+++ b/Frontend/src/components/xml/XmlInputFieldComponent.vue
@@ -1,23 +1,37 @@
 <script setup lang="ts">
 import xmlInputFieldToolbarComponent from '@/components/xml/XmlInputFieldToolbarComponent.vue';
+import { ref } from 'vue';
+
+const xml = ref('')
+const query = ref('')
 
 const props = defineProps(
     {
-        transformationName: {type: String},
+        prettyName: {type: String, required: true},
+        xmlData: {type: String},
     }
 )
+const emit = defineEmits(['update:xml', 'update:transform'])
+
+function sendXml() {
+    emit('update:xml', xml.value)
+}
+
+function sendTransform() {
+    emit('update:transform', query.value)
+}
 
 </script>
 
 <template>
     <div class="flex flex-col w-full h-full items-center gap-4">
-        <div class="w-full">
-            <xmlInputFieldToolbarComponent prettyName="XML" fieldName="xml"></xmlInputFieldToolbarComponent>
-            <textarea id="xmlfield" class="w-full dark:bg-gray-600 border border-slate-400 rounded-md"></textarea>
+        <div class="flex flex-col w-full h-1/2">
+            <xmlInputFieldToolbarComponent prettyName="XML"></xmlInputFieldToolbarComponent>
+            <textarea id="xmlField" v-model="xml" @input="sendXml()" class="w-full h-full dark:text-slate-100 dark:bg-gray-600 border border-slate-400 p-2 rounded-md"></textarea>
         </div>
-        <div class="w-full">
-            <xmlInputFieldToolbarComponent prettyName="XSLT" fieldName="xslt"></xmlInputFieldToolbarComponent>
-        <textarea id="transformField" class="w-full dark:bg-gray-600 border border-slate-400 rounded-md"></textarea>
+        <div class="flex flex-col w-full h-1/2">
+            <xmlInputFieldToolbarComponent :prettyName="$props.prettyName"></xmlInputFieldToolbarComponent>
+            <textarea id="transformField" v-model="query" @input="sendTransform()" class="w-full h-full dark:text-slate-100 dark:bg-gray-600 border border-slate-400 p-2 rounded-md"></textarea>
         </div>
     </div>
 </template>
\ No newline at end of file
diff --git a/Frontend/src/components/xml/XmlInputFieldToolbarComponent.vue b/Frontend/src/components/xml/XmlInputFieldToolbarComponent.vue
index 7a3cb1a..0f334e4 100644
--- a/Frontend/src/components/xml/XmlInputFieldToolbarComponent.vue
+++ b/Frontend/src/components/xml/XmlInputFieldToolbarComponent.vue
@@ -2,8 +2,7 @@
 
 const props = defineProps(
     {
-        prettyName: {type: String, required: true},
-        fieldName: {type: String, required: true},
+        prettyName: {type: String, required: true}
     }
 )
 
@@ -14,7 +13,6 @@ const props = defineProps(
         <span class="dark:text-white">{{ prettyName }}</span>
         <div class="flex space-x-2">
             <button class="tool-button">Insert default {{ prettyName }}</button>
-            <button class="tool-button">Clear</button>    
         </div>
         
     </div>
diff --git a/Frontend/src/components/xml/XmlOutputFieldComponent.vue b/Frontend/src/components/xml/XmlOutputFieldComponent.vue
index bf61cb8..c2bb233 100644
--- a/Frontend/src/components/xml/XmlOutputFieldComponent.vue
+++ b/Frontend/src/components/xml/XmlOutputFieldComponent.vue
@@ -1,20 +1,31 @@
 <script setup lang="ts">
 import xmlOutputFieldToolbarComponent from '@/components/xml/XmlOutputFieldToolbarComponent.vue';
+import { resourceUsage } from 'process';
+import { ref } from 'vue';
 
 
 const props = defineProps(
     {
-        transformationName: {type: String},
+        tool: {type: String, required: true},
+        xml: {type: String},
+        query: {type: String}
     }
 )
 
+const result = ref('');
+
+function parseResult(data: any) {
+    console.log(data.result);
+    result.value = data.result;
+}
+
 </script>
 
 <template>
     <div class="flex flex-col w-full h-full items-center">
-        <xmlOutputFieldToolbarComponent field-name="result"></xmlOutputFieldToolbarComponent>
-        <div class="w-full h-max p-2 border border-slate-400 rounded-md text-left">
-            <pre ><code>&lt;test&gt;fsdafdsa&lt;/test&gt;</code></pre>
+        <xmlOutputFieldToolbarComponent class="grow-0" :xml="$props.xml" :query="$props.query" :tool="$props.tool" @update:result="(data) => parseResult(data)"></xmlOutputFieldToolbarComponent>
+        <div class="w-full h-full p-2 border border-slate-400 rounded-md text-left bg-white dark:text-slate-100 dark:bg-gray-600">
+            <pre><code>{{ result }}</code></pre>
         </div>
         
     </div>
diff --git a/Frontend/src/components/xml/XmlOutputFieldToolbarComponent.vue b/Frontend/src/components/xml/XmlOutputFieldToolbarComponent.vue
index 4853a13..ad8a6fd 100644
--- a/Frontend/src/components/xml/XmlOutputFieldToolbarComponent.vue
+++ b/Frontend/src/components/xml/XmlOutputFieldToolbarComponent.vue
@@ -1,20 +1,73 @@
 <script setup lang="ts">
+import { ref } from 'vue';
+
 
 const props = defineProps(
     {
-
-        fieldName: {type: String, required: true},
+        tool: {type: String, required: true}, 
+        xml: {type: String},
+        query: {type: String},
     }
 )
 
+const engine = ref('')
+
+const emit = defineEmits(['update:result'])
+
+function process() {
+    var request:Request = prepareRequest();
+    fetchRequest(request).then((data) => {
+        sendProcessedData(data);
+    })
+}
+
+function prepareURL(): string {
+   const engineEndpoint = engine.value == "libxml" ? "libxml" : "java";
+   return document.location.protocol + "//" + document.location.hostname + "/" + engineEndpoint + "/" + props.tool;
+}
+
+function prepareRequestBody():string {
+    var requestBody = JSON.stringify({
+        "data": props.xml,
+        "process": props.query,
+        "processor": engine.value,
+        "version": "3.0"
+    });
+    return requestBody;
+}
+
+function prepareRequest():Request {
+    var request = new Request(prepareURL(), {
+        body: prepareRequestBody(),
+        method: "POST"
+    });
+    return request
+}
+
+async function fetchRequest(request: Request):Promise<JSON> {
+    var responseBody = await fetch(request)
+    .then(response => response.json())
+    .then((body) => body);
+    return responseBody;
+}
+
+function sendProcessedData(data: any) {
+    emit("update:result", data);
+}
+
 </script>
 
 <template>
-    <div class="flex place-content-between w-full h-full items-center m-2">
+    <div class="flex place-content-between w-full items-center m-2">
         <span class="dark:text-white">Result:</span>
         <div class="flex space-x-2">
-            <button class="tool-button">Process</button>
+            <select v-model="engine" name="engine" class="px-3 rounded-full border border-slate-400 bg-white dark:text-slate-100 dark:bg-gray-600">
+                <option value="saxon">Saxon</option>
+                <option value="xalan">Xalan</option>
+                <option value="libxml">libXML</option>
+            </select>
             <button class="tool-button">Clear</button>    
+            <button class="tool-button" @click="process">Process</button>
         </div>
         
     </div>
diff --git a/Frontend/src/style.css b/Frontend/src/style.css
index b5c61c9..07bd882 100644
--- a/Frontend/src/style.css
+++ b/Frontend/src/style.css
@@ -1,3 +1,7 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+.tool-button {
+    @apply py-1 px-4 rounded-full bg-gradient-to-r from-blue-300 to-sky-200  dark:text-white dark:from-blue-700 dark:to-indigo-800 hover:bg-blue-400
+}
\ No newline at end of file
diff --git a/Frontend/src/views/XSLTView.vue b/Frontend/src/views/XSLTView.vue
index fd6a98e..8c04245 100644
--- a/Frontend/src/views/XSLTView.vue
+++ b/Frontend/src/views/XSLTView.vue
@@ -1,15 +1,18 @@
-<script lang="ts">
+<script setup lang="ts">
 import xmlInputFieldComponent from '@/components/xml/XmlInputFieldComponent.vue';
+import xmlOutputFieldComponent from '@/components/xml/XmlOutputFieldComponent.vue';
+import { ref } from 'vue';
 
-export default {
-    name: "XSLT",
-    components: {xmlInputFieldComponent}
-}
+
+const xml = ref('');
+const query = ref('');
 
 </script>
 
 <template>
+    <div id="layout" class="flex flex-col lg:flex-row w-full h-full gap-4">
+        <xmlInputFieldComponent prettyName="XSLT" @update:xml="(data) => {xml = data}" @update:transform="(data) => {query = data}"></xmlInputFieldComponent>    
 
-    <xmlInputFieldComponent transformationName="XSLT"></xmlInputFieldComponent>
-
+        <xmlOutputFieldComponent tool="xslt" :xml="xml" :query="query"></xmlOutputFieldComponent>
+    </div>
 </template>
\ No newline at end of file
-- 
2.51.0


From f7e147c882161a8ba989b621e427d46fbab2eb3f Mon Sep 17 00:00:00 2001
From: Adam Bem <adam.bem@zoho.eu>
Date: Fri, 16 Jun 2023 11:17:10 +0200
Subject: [PATCH 12/18] Added dynamic engine selection

---
 .../xml/XmlOutputFieldToolbarComponent.vue    | 54 ++++++++++++++-----
 Frontend/src/views/XSLTView.vue               |  2 +-
 2 files changed, 41 insertions(+), 15 deletions(-)

diff --git a/Frontend/src/components/xml/XmlOutputFieldToolbarComponent.vue b/Frontend/src/components/xml/XmlOutputFieldToolbarComponent.vue
index ad8a6fd..b9b38cd 100644
--- a/Frontend/src/components/xml/XmlOutputFieldToolbarComponent.vue
+++ b/Frontend/src/components/xml/XmlOutputFieldToolbarComponent.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref } from 'vue';
+import { onMounted, ref } from 'vue';
 
 
 const props = defineProps(
@@ -10,7 +10,11 @@ const props = defineProps(
     }
 )
 
-const engine = ref('')
+const engine = ref('');
+
+const isSaxonHidden = ref(false);
+const isXalanHidden = ref(false);
+const isLibXMLHidden = ref(false);
 
 const emit = defineEmits(['update:result'])
 
@@ -21,6 +25,14 @@ function process() {
     })
 }
 
+function prepareRequest():Request {
+    var request = new Request(prepareURL(), {
+        body: prepareRequestBody(),
+        method: "POST"
+    });
+    return request
+}
+
 function prepareURL(): string {
    const engineEndpoint = engine.value == "libxml" ? "libxml" : "java";
    return document.location.protocol + "//" + document.location.hostname + "/" + engineEndpoint + "/" + props.tool;
@@ -36,14 +48,6 @@ function prepareRequestBody():string {
     return requestBody;
 }
 
-function prepareRequest():Request {
-    var request = new Request(prepareURL(), {
-        body: prepareRequestBody(),
-        method: "POST"
-    });
-    return request
-}
-
 async function fetchRequest(request: Request):Promise<JSON> {
     var responseBody = await fetch(request)
     .then(response => response.json())
@@ -51,10 +55,32 @@ async function fetchRequest(request: Request):Promise<JSON> {
     return responseBody;
 }
 
-function sendProcessedData(data: any) {
+function sendProcessedData(data: JSON) {
     emit("update:result", data);
 }
 
+onMounted(() => {
+    showOnlyAvailableEngines();
+})
+
+function showOnlyAvailableEngines() {
+    if (props.tool == "xsd") {
+        isSaxonHidden.value = true;
+        isXalanHidden.value = false;
+        isLibXMLHidden.value = false;
+    }
+    else if (props.tool == "xquery") {
+        isSaxonHidden.value = false;
+        isXalanHidden.value = true;
+        isLibXMLHidden.value = true;
+    }
+    else {
+        isSaxonHidden.value = false;
+        isXalanHidden.value = false;
+        isLibXMLHidden.value = false;
+    }
+}
+
 </script>
 
 <template>
@@ -62,9 +88,9 @@ function sendProcessedData(data: any) {
         <span class="dark:text-white">Result:</span>
         <div class="flex space-x-2">
             <select v-model="engine" name="engine" class="px-3 rounded-full border border-slate-400 bg-white dark:text-slate-100 dark:bg-gray-600">
-                <option value="saxon">Saxon</option>
-                <option value="xalan">Xalan</option>
-                <option value="libxml">libXML</option>
+                <option value="saxon" :class="(isSaxonHidden) ? 'hidden' : ''">Saxon</option>
+                <option value="xalan" :class="(isXalanHidden) ? 'hidden' : ''">Xalan</option>
+                <option value="libxml" :class="(isLibXMLHidden) ? 'hidden' : ''">libXML</option>
             </select>
             <button class="tool-button">Clear</button>    
             <button class="tool-button" @click="process">Process</button>
diff --git a/Frontend/src/views/XSLTView.vue b/Frontend/src/views/XSLTView.vue
index 8c04245..47d963e 100644
--- a/Frontend/src/views/XSLTView.vue
+++ b/Frontend/src/views/XSLTView.vue
@@ -13,6 +13,6 @@ const query = ref('');
     <div id="layout" class="flex flex-col lg:flex-row w-full h-full gap-4">
         <xmlInputFieldComponent prettyName="XSLT" @update:xml="(data) => {xml = data}" @update:transform="(data) => {query = data}"></xmlInputFieldComponent>    
 
-        <xmlOutputFieldComponent tool="xslt" :xml="xml" :query="query"></xmlOutputFieldComponent>
+        <xmlOutputFieldComponent tool="xpath" :xml="xml" :query="query"></xmlOutputFieldComponent>
     </div>
 </template>
\ No newline at end of file
-- 
2.51.0


From 510ce477fb7b9de60b39bae392c89e960ed7e31d Mon Sep 17 00:00:00 2001
From: Adam Bem <adam.bem@zoho.eu>
Date: Fri, 16 Jun 2023 13:12:30 +0200
Subject: [PATCH 13/18] Fixed some resizing issuses

---
 Frontend/src/App.vue                          |  2 +-
 .../components/sidebar/SidebarComponent.vue   |  6 ++---
 .../components/xml/XmlInputFieldComponent.vue |  6 ++---
 .../xml/XmlOutputFieldComponent.vue           | 10 ++++----
 .../xml/XmlOutputFieldToolbarComponent.vue    |  9 +++++++-
 Frontend/src/router/index.ts                  | 23 +++++++++++++++----
 Frontend/src/views/XPathView.vue              | 18 +++++++++++++++
 Frontend/src/views/XQueryView.vue             | 18 +++++++++++++++
 Frontend/src/views/XSDView.vue                | 18 +++++++++++++++
 Frontend/src/views/XSLTView.vue               |  2 +-
 10 files changed, 92 insertions(+), 20 deletions(-)
 create mode 100644 Frontend/src/views/XPathView.vue
 create mode 100644 Frontend/src/views/XQueryView.vue
 create mode 100644 Frontend/src/views/XSDView.vue

diff --git a/Frontend/src/App.vue b/Frontend/src/App.vue
index 91a9744..12adeaa 100644
--- a/Frontend/src/App.vue
+++ b/Frontend/src/App.vue
@@ -6,7 +6,7 @@ import SidebarComponent from '@components/sidebar/SidebarComponent.vue';
 </script>
 
 <template>
-  <div id="layout" class="flex bg-gradient-to-br from-white to-blue-200 dark:from-slate-800 dark:to-indigo-950">
+  <div id="layout" class="flex bg-gradient-to-r from-white to-blue-200 dark:from-slate-800 dark:to-indigo-950">
     <SidebarComponent />
     <div class="relative p-6 w-full m-4 bg-indigo-50 dark:bg-gray-700 rounded-2xl shadow-md">
       <RouterView></RouterView>
diff --git a/Frontend/src/components/sidebar/SidebarComponent.vue b/Frontend/src/components/sidebar/SidebarComponent.vue
index d3a73c5..7e95b4c 100644
--- a/Frontend/src/components/sidebar/SidebarComponent.vue
+++ b/Frontend/src/components/sidebar/SidebarComponent.vue
@@ -30,16 +30,16 @@ onMounted( () => {
             </a>
             <div class="flex flex-col font-medium items-center">
                 <sidebar-menu-element-component category-name="XML">
-                    <SidebarToolLinkComponent path-to="/xml/xslt" element-content="XSLT" />
                     <SidebarToolLinkComponent path-to="/xml/xpath" element-content="XPath" />
-                    <SidebarToolLinkComponent path-to="/xml/xsd" element-content="XSD" />
                     <SidebarToolLinkComponent path-to="/xml/xquery" element-content="XQuery" />
+                    <SidebarToolLinkComponent path-to="/xml/xsd" element-content="XSD" />
+                    <SidebarToolLinkComponent path-to="/xml/xslt" element-content="XSLT" />
                 </sidebar-menu-element-component>
 
                 <sidebar-menu-element-component category-name="Formatter">
-                    <SidebarToolLinkComponent path-to="/format/XML" element-content="XML Formatter" />
                     <SidebarToolLinkComponent path-to="/format/HTML" element-content="HTML Formatter" />
                     <SidebarToolLinkComponent path-to="/format/JSON" element-content="JSON Formatter" />
+                    <SidebarToolLinkComponent path-to="/format/XML" element-content="XML Formatter" />
                 </sidebar-menu-element-component>
 
 
diff --git a/Frontend/src/components/xml/XmlInputFieldComponent.vue b/Frontend/src/components/xml/XmlInputFieldComponent.vue
index bb4668e..e266b63 100644
--- a/Frontend/src/components/xml/XmlInputFieldComponent.vue
+++ b/Frontend/src/components/xml/XmlInputFieldComponent.vue
@@ -24,14 +24,14 @@ function sendTransform() {
 </script>
 
 <template>
-    <div class="flex flex-col w-full h-full items-center gap-4">
+    <div class="flex flex-col w-full lg:w-1/2 h-full items-center gap-4">
         <div class="flex flex-col w-full h-1/2">
             <xmlInputFieldToolbarComponent prettyName="XML"></xmlInputFieldToolbarComponent>
-            <textarea id="xmlField" v-model="xml" @input="sendXml()" class="w-full h-full dark:text-slate-100 dark:bg-gray-600 border border-slate-400 p-2 rounded-md"></textarea>
+            <textarea id="xmlField" v-model="xml" @input="sendXml()" class="w-full h-full resize-none dark:text-slate-100 dark:bg-gray-600 border border-slate-400 p-2 rounded-md"></textarea>
         </div>
         <div class="flex flex-col w-full h-1/2">
             <xmlInputFieldToolbarComponent :prettyName="$props.prettyName"></xmlInputFieldToolbarComponent>
-            <textarea id="transformField" v-model="query" @input="sendTransform()" class="w-full h-full dark:text-slate-100 dark:bg-gray-600 border border-slate-400 p-2 rounded-md"></textarea>
+            <textarea id="transformField" v-model="query" @input="sendTransform()" class="w-full h-full resize-none dark:text-slate-100 dark:bg-gray-600 border border-slate-400 p-2 rounded-md"></textarea>
         </div>
     </div>
 </template>
\ No newline at end of file
diff --git a/Frontend/src/components/xml/XmlOutputFieldComponent.vue b/Frontend/src/components/xml/XmlOutputFieldComponent.vue
index c2bb233..6fceeb2 100644
--- a/Frontend/src/components/xml/XmlOutputFieldComponent.vue
+++ b/Frontend/src/components/xml/XmlOutputFieldComponent.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import xmlOutputFieldToolbarComponent from '@/components/xml/XmlOutputFieldToolbarComponent.vue';
-import { resourceUsage } from 'process';
 import { ref } from 'vue';
 
 
@@ -15,17 +14,16 @@ const props = defineProps(
 const result = ref('');
 
 function parseResult(data: any) {
-    console.log(data.result);
     result.value = data.result;
 }
 
 </script>
 
 <template>
-    <div class="flex flex-col w-full h-full items-center">
-        <xmlOutputFieldToolbarComponent class="grow-0" :xml="$props.xml" :query="$props.query" :tool="$props.tool" @update:result="(data) => parseResult(data)"></xmlOutputFieldToolbarComponent>
-        <div class="w-full h-full p-2 border border-slate-400 rounded-md text-left bg-white dark:text-slate-100 dark:bg-gray-600">
-            <pre><code>{{ result }}</code></pre>
+    <div class="flex flex-col w-full lg:w-1/2 h-full items-center">
+        <xmlOutputFieldToolbarComponent :xml="$props.xml" :query="$props.query" :tool="$props.tool" @update:result="(data) => parseResult(data)"></xmlOutputFieldToolbarComponent>
+        <div class="w-full h-full p-2 overflow-scroll border border-slate-400 rounded-md text-left bg-white dark:text-slate-100 dark:bg-gray-600">
+            <pre class="break-words"><code>{{ result }}</code></pre>
         </div>
         
     </div>
diff --git a/Frontend/src/components/xml/XmlOutputFieldToolbarComponent.vue b/Frontend/src/components/xml/XmlOutputFieldToolbarComponent.vue
index b9b38cd..101a2cc 100644
--- a/Frontend/src/components/xml/XmlOutputFieldToolbarComponent.vue
+++ b/Frontend/src/components/xml/XmlOutputFieldToolbarComponent.vue
@@ -11,6 +11,7 @@ const props = defineProps(
 )
 
 const engine = ref('');
+const version = ref('');
 
 const isSaxonHidden = ref(false);
 const isXalanHidden = ref(false);
@@ -43,7 +44,7 @@ function prepareRequestBody():string {
         "data": props.xml,
         "process": props.query,
         "processor": engine.value,
-        "version": "3.0"
+        "version": version.value
     });
     return requestBody;
 }
@@ -92,6 +93,12 @@ function showOnlyAvailableEngines() {
                 <option value="xalan" :class="(isXalanHidden) ? 'hidden' : ''">Xalan</option>
                 <option value="libxml" :class="(isLibXMLHidden) ? 'hidden' : ''">libXML</option>
             </select>
+            <select v-model="version" name="version" class="px-3 rounded-full border border-slate-400 bg-white dark:text-slate-100 dark:bg-gray-600">
+                <option value="1.0">1.0</option>
+                <option value="2.0">2.0</option>
+                <option value="3.0">3.0</option>
+                <option value="3.1">3.1</option>
+            </select>
             <button class="tool-button">Clear</button>    
             <button class="tool-button" @click="process">Process</button>
         </div>
diff --git a/Frontend/src/router/index.ts b/Frontend/src/router/index.ts
index 21f4c58..b935285 100644
--- a/Frontend/src/router/index.ts
+++ b/Frontend/src/router/index.ts
@@ -4,6 +4,9 @@ const landingPage = import("@views/LandingView.vue")
 const restMock = import("@views/RestMockView.vue")
 
 const xsltTool = import("@views/XSLTView.vue")
+const xsdTool = import("@views/XSDView.vue")
+const xpathTool = import("@views/XPathView.vue")
+const xqueryTool = import("@views/XQueryView.vue")
 
 const routes = [
   {
@@ -11,16 +14,26 @@ const routes = [
     name: 'landing',
     component: () => landingPage
   },
+  {
+    path: '/xml/xpath',
+    name: 'xpath',
+    component: () => xpathTool
+  },
+  {
+    path: '/xml/xquery',
+    name: 'xquery',
+    component: () => xqueryTool
+  },
+  {
+    path: '/xml/xsd',
+    name: 'xsd',
+    component: () => xsdTool
+  },
   {
     path: '/xml/xslt',
     name: 'xslt',
     component: () => xsltTool
   },
-  {
-    path: '/xml/xpath',
-    name: 'xpath',
-    component: () => restMock
-  },
 ]
 
 
diff --git a/Frontend/src/views/XPathView.vue b/Frontend/src/views/XPathView.vue
new file mode 100644
index 0000000..20acd1f
--- /dev/null
+++ b/Frontend/src/views/XPathView.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import xmlInputFieldComponent from '@/components/xml/XmlInputFieldComponent.vue';
+import xmlOutputFieldComponent from '@/components/xml/XmlOutputFieldComponent.vue';
+import { ref } from 'vue';
+
+
+const xml = ref('');
+const query = ref('');
+
+</script>
+
+<template>
+    <div id="layout" class="flex flex-col lg:flex-row w-full h-full gap-4">
+        <xmlInputFieldComponent prettyName="XPath" @update:xml="(data) => {xml = data}" @update:transform="(data) => {query = data}"></xmlInputFieldComponent>    
+
+        <xmlOutputFieldComponent tool="xpath" :xml="xml" :query="query"></xmlOutputFieldComponent>
+    </div>
+</template>
\ No newline at end of file
diff --git a/Frontend/src/views/XQueryView.vue b/Frontend/src/views/XQueryView.vue
new file mode 100644
index 0000000..fe23239
--- /dev/null
+++ b/Frontend/src/views/XQueryView.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import xmlInputFieldComponent from '@/components/xml/XmlInputFieldComponent.vue';
+import xmlOutputFieldComponent from '@/components/xml/XmlOutputFieldComponent.vue';
+import { ref } from 'vue';
+
+
+const xml = ref('');
+const query = ref('');
+
+</script>
+
+<template>
+    <div id="layout" class="flex flex-col lg:flex-row w-full h-full gap-4">
+        <xmlInputFieldComponent prettyName="XQuery" @update:xml="(data) => {xml = data}" @update:transform="(data) => {query = data}"></xmlInputFieldComponent>    
+
+        <xmlOutputFieldComponent tool="xquery" :xml="xml" :query="query"></xmlOutputFieldComponent>
+    </div>
+</template>
\ No newline at end of file
diff --git a/Frontend/src/views/XSDView.vue b/Frontend/src/views/XSDView.vue
new file mode 100644
index 0000000..94ba20d
--- /dev/null
+++ b/Frontend/src/views/XSDView.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import xmlInputFieldComponent from '@/components/xml/XmlInputFieldComponent.vue';
+import xmlOutputFieldComponent from '@/components/xml/XmlOutputFieldComponent.vue';
+import { ref } from 'vue';
+
+
+const xml = ref('');
+const query = ref('');
+
+</script>
+
+<template>
+    <div id="layout" class="flex flex-col lg:flex-row w-full h-full gap-4">
+        <xmlInputFieldComponent prettyName="XSD" @update:xml="(data) => {xml = data}" @update:transform="(data) => {query = data}"></xmlInputFieldComponent>    
+
+        <xmlOutputFieldComponent tool="xsd" :xml="xml" :query="query"></xmlOutputFieldComponent>
+    </div>
+</template>
\ No newline at end of file
diff --git a/Frontend/src/views/XSLTView.vue b/Frontend/src/views/XSLTView.vue
index 47d963e..8c04245 100644
--- a/Frontend/src/views/XSLTView.vue
+++ b/Frontend/src/views/XSLTView.vue
@@ -13,6 +13,6 @@ const query = ref('');
     <div id="layout" class="flex flex-col lg:flex-row w-full h-full gap-4">
         <xmlInputFieldComponent prettyName="XSLT" @update:xml="(data) => {xml = data}" @update:transform="(data) => {query = data}"></xmlInputFieldComponent>    
 
-        <xmlOutputFieldComponent tool="xpath" :xml="xml" :query="query"></xmlOutputFieldComponent>
+        <xmlOutputFieldComponent tool="xslt" :xml="xml" :query="query"></xmlOutputFieldComponent>
     </div>
 </template>
\ No newline at end of file
-- 
2.51.0


From c0b948eda54ca3801b39cd6acb38efd048411254 Mon Sep 17 00:00:00 2001
From: Adam Bem <adam.bem@zoho.eu>
Date: Fri, 16 Jun 2023 13:17:25 +0200
Subject: [PATCH 14/18] Adjusted colors

---
 Frontend/src/components/sidebar/SidebarComponent.vue            | 2 +-
 Frontend/src/components/sidebar/SidebarMenuElementComponent.vue | 2 +-
 Frontend/src/style.css                                          | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/Frontend/src/components/sidebar/SidebarComponent.vue b/Frontend/src/components/sidebar/SidebarComponent.vue
index 7e95b4c..1fdadd2 100644
--- a/Frontend/src/components/sidebar/SidebarComponent.vue
+++ b/Frontend/src/components/sidebar/SidebarComponent.vue
@@ -23,7 +23,7 @@ onMounted( () => {
 </script>
 
 <template>
-    <aside class="relative flex-shrink-0 top-0 left-0 z-40 w-48 h-screen transition-transform -translate-x-full sm:translate-x-0" >
+    <aside class="relative flex-shrink-0 top-0 left-0 z-40 w-48 h-screen" >
         <div class="h-full px-3 pt-2 pb-4 overflow-y-auto">
             <a href="https://release11.com/">
                 <img :src="logoR11" class="w-72 h-16 p-2 pt-0"/>
diff --git a/Frontend/src/components/sidebar/SidebarMenuElementComponent.vue b/Frontend/src/components/sidebar/SidebarMenuElementComponent.vue
index e6f089e..2b7f39f 100644
--- a/Frontend/src/components/sidebar/SidebarMenuElementComponent.vue
+++ b/Frontend/src/components/sidebar/SidebarMenuElementComponent.vue
@@ -17,7 +17,7 @@ const props = defineProps(
 
 
 <template>
-    <div class="w-full mb-4 p-2 rounded-xl shadow-md bg-gradient-to-r from-blue-400 to-blue-200 dark:from-blue-600 dark:to-blue-900">
+    <div class="w-full mb-4 p-2 rounded-xl shadow-md bg-gradient-to-r from-blue-400 to-blue-200 dark:from-sky-700 dark:to-sky-900">
         <button @click="switchHiddenElement()" type="button" :class="[isActive ? 'rounded-lg' : 'rounded-lg']" class="w-full p-2 text-lg font-bold text-gray-900 transition duration-75 hover:bg-blue-100 dark:text-gray-100  dark:hover:bg-slate-600">
             <span class="flex-1 whitespace-nowrap">{{props.categoryName}}</span>
         </button>
diff --git a/Frontend/src/style.css b/Frontend/src/style.css
index 07bd882..f884ed7 100644
--- a/Frontend/src/style.css
+++ b/Frontend/src/style.css
@@ -3,5 +3,5 @@
 @tailwind utilities;
 
 .tool-button {
-    @apply py-1 px-4 rounded-full bg-gradient-to-r from-blue-300 to-sky-200  dark:text-white dark:from-blue-700 dark:to-indigo-800 hover:bg-blue-400
+    @apply py-1 px-4 rounded-full bg-gradient-to-r from-blue-300 to-sky-200  dark:text-white dark:from-sky-600 dark:to-sky-800 hover:bg-blue-400
 }
\ No newline at end of file
-- 
2.51.0


From 6bb9dfc0bf18f987961a19f4f427aa1f0d36c308 Mon Sep 17 00:00:00 2001
From: Adam Bem <adam.bem@zoho.eu>
Date: Fri, 16 Jun 2023 14:06:14 +0200
Subject: [PATCH 15/18] Added insertion of default data

---
 Frontend/src/assets/sampleXMLForXSD.xml       | 33 +++++++++++++++
 Frontend/src/assets/sampleXQuery.xquery       |  7 ++++
 Frontend/src/assets/sampleXml.xml             | 33 +++++++++++++++
 Frontend/src/assets/sampleXsd.xml             | 42 +++++++++++++++++++
 Frontend/src/assets/sampleXslt.xml            | 14 +++++++
 .../components/xml/XmlInputFieldComponent.vue | 14 ++++++-
 .../xml/XmlInputFieldToolbarComponent.vue     | 33 ++++++++++++++-
 .../xml/XmlOutputFieldToolbarComponent.vue    |  3 +-
 8 files changed, 175 insertions(+), 4 deletions(-)
 create mode 100644 Frontend/src/assets/sampleXMLForXSD.xml
 create mode 100644 Frontend/src/assets/sampleXQuery.xquery
 create mode 100644 Frontend/src/assets/sampleXml.xml
 create mode 100644 Frontend/src/assets/sampleXsd.xml
 create mode 100644 Frontend/src/assets/sampleXslt.xml

diff --git a/Frontend/src/assets/sampleXMLForXSD.xml b/Frontend/src/assets/sampleXMLForXSD.xml
new file mode 100644
index 0000000..2ba2458
--- /dev/null
+++ b/Frontend/src/assets/sampleXMLForXSD.xml
@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="utf-8"?>
+<library>
+    <libraryName>City library</libraryName>
+    <libraryID>345123</libraryID>
+    <readerList>
+        <person>
+            <readerID>7321</readerID>
+            <name>Adam</name>
+            <surname>Choke</surname>
+        </person>
+        <person>
+            <readerID>5123</readerID>
+            <name>Lauren</name>
+            <surname>Wong</surname>
+        </person>
+    </readerList>
+    <bookList>
+        <book>
+            <bookID>6422</bookID>
+            <title>Harry Potter</title>
+            <readerID>7542</readerID>
+        </book>
+        <book>
+            <bookID>1234</bookID>
+            <title>Macbeth</title>
+            <readerID>5123</readerID>
+        </book>
+        <book>
+            <bookID>9556</bookID>
+            <title>Romeo and Juliet</title>
+        </book>
+    </bookList>
+</library>
\ No newline at end of file
diff --git a/Frontend/src/assets/sampleXQuery.xquery b/Frontend/src/assets/sampleXQuery.xquery
new file mode 100644
index 0000000..0a124d5
--- /dev/null
+++ b/Frontend/src/assets/sampleXQuery.xquery
@@ -0,0 +1,7 @@
+declare namespace p="http://www.release11.com/person";
+declare namespace b="http://www.release11.com/book";
+declare namespace l="http://www.release11.com/library";
+
+
+for $x in //p:person
+return string($x/p:name)
\ No newline at end of file
diff --git a/Frontend/src/assets/sampleXml.xml b/Frontend/src/assets/sampleXml.xml
new file mode 100644
index 0000000..cd89168
--- /dev/null
+++ b/Frontend/src/assets/sampleXml.xml
@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="utf-8"?>
+<l:library xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://www.release11.com" xmlns:l="http://www.release11.com/library" xmlns:p="http://www.release11.com/person" xmlns:b="http://www.release11.com/book">
+    <l:libraryName>City library</l:libraryName>
+    <l:libraryID>345123</l:libraryID>
+    <l:readerList>
+        <p:person>
+            <p:readerID>7321</p:readerID>
+            <p:name>Adam</p:name>
+            <p:surname>Choke</p:surname>
+        </p:person>
+        <p:person>
+            <p:readerID>5123</p:readerID>
+            <p:name>Lauren</p:name>
+            <p:surname>Wong</p:surname>
+        </p:person>
+    </l:readerList>
+    <l:bookList>
+        <b:book>
+            <b:bookID>6422</b:bookID>
+            <b:title>Harry Potter</b:title>
+            <p:readerID>7542</p:readerID>
+        </b:book>
+        <b:book>
+            <b:bookID>1234</b:bookID>
+            <b:title>Macbeth</b:title>
+            <p:readerID>5123</p:readerID>
+        </b:book>
+        <b:book>
+            <b:bookID>9556</b:bookID>
+            <b:title>Romeo and Juliet</b:title>
+        </b:book>
+    </l:bookList>
+</l:library>
\ No newline at end of file
diff --git a/Frontend/src/assets/sampleXsd.xml b/Frontend/src/assets/sampleXsd.xml
new file mode 100644
index 0000000..6993ce3
--- /dev/null
+++ b/Frontend/src/assets/sampleXsd.xml
@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<xsd:schema xmlns:xsd="http://www.w3.org/2001/XMLSchema" elementFormDefault="qualified"
+  targetNamespace="">
+  <xsd:element name="library">
+    <xsd:complexType mixed="true">
+      <xsd:sequence>
+        <xsd:element minOccurs="0" name="libraryName" type="xsd:string" />
+        <xsd:element minOccurs="0" name="libraryID" type="xsd:int" />
+        <xsd:element minOccurs="0" name="readerList">
+          <xsd:complexType mixed="true">
+            <xsd:sequence>
+              <xsd:element maxOccurs="unbounded" name="person">
+                <xsd:complexType mixed="true">
+                  <xsd:sequence>
+                    <xsd:element minOccurs="0" name="readerID" type="xsd:int" />
+                    <xsd:element minOccurs="0" name="name" type="xsd:normalizedString" />
+                    <xsd:element minOccurs="0" name="surname" type="xsd:normalizedString" />
+                  </xsd:sequence>
+                </xsd:complexType>
+              </xsd:element>
+            </xsd:sequence>
+          </xsd:complexType>
+        </xsd:element>
+        <xsd:element minOccurs="0" name="bookList">
+          <xsd:complexType mixed="true">
+            <xsd:sequence>
+              <xsd:element maxOccurs="unbounded" name="book">
+                <xsd:complexType mixed="true">
+                  <xsd:sequence>
+                    <xsd:element minOccurs="0" name="bookID" type="xsd:int" />
+                    <xsd:element minOccurs="0" name="title" type="xsd:string" />
+                    <xsd:element minOccurs="0" name="readerID" type="xsd:int" />
+                  </xsd:sequence>
+                </xsd:complexType>
+              </xsd:element>
+            </xsd:sequence>
+          </xsd:complexType>
+        </xsd:element>
+      </xsd:sequence>
+    </xsd:complexType>
+  </xsd:element>
+</xsd:schema>
\ No newline at end of file
diff --git a/Frontend/src/assets/sampleXslt.xml b/Frontend/src/assets/sampleXslt.xml
new file mode 100644
index 0000000..3ce05e2
--- /dev/null
+++ b/Frontend/src/assets/sampleXslt.xml
@@ -0,0 +1,14 @@
+<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
+    xmlns:b="http://www.release11.com/book" xmlns:p="http://www.release11.com/person"
+    xmlns:l="http://www.release11.com/library">
+    <xsl:template match="/">
+        <Library>
+            <ReaderCount>
+                <xsl:value-of select="count(//p:person)" />
+            </ReaderCount>
+            <BookCount>
+                <xsl:value-of select="count(/l:library/l:bookList/b:book)" />
+            </BookCount>
+        </Library>
+    </xsl:template>
+</xsl:stylesheet>
\ No newline at end of file
diff --git a/Frontend/src/components/xml/XmlInputFieldComponent.vue b/Frontend/src/components/xml/XmlInputFieldComponent.vue
index e266b63..67df3a6 100644
--- a/Frontend/src/components/xml/XmlInputFieldComponent.vue
+++ b/Frontend/src/components/xml/XmlInputFieldComponent.vue
@@ -21,16 +21,26 @@ function sendTransform() {
     emit('update:transform', query.value)
 }
 
+function setToDefaultXML(data: string) {
+    xml.value = data;
+    sendXml();
+}
+
+function setToDefaultQuery(data: string) {
+    query.value = data;
+    sendTransform();
+}
+
 </script>
 
 <template>
     <div class="flex flex-col w-full lg:w-1/2 h-full items-center gap-4">
         <div class="flex flex-col w-full h-1/2">
-            <xmlInputFieldToolbarComponent prettyName="XML"></xmlInputFieldToolbarComponent>
+            <xmlInputFieldToolbarComponent prettyName="XML" @update:defaultData="(data) => setToDefaultXML(data)"></xmlInputFieldToolbarComponent>
             <textarea id="xmlField" v-model="xml" @input="sendXml()" class="w-full h-full resize-none dark:text-slate-100 dark:bg-gray-600 border border-slate-400 p-2 rounded-md"></textarea>
         </div>
         <div class="flex flex-col w-full h-1/2">
-            <xmlInputFieldToolbarComponent :prettyName="$props.prettyName"></xmlInputFieldToolbarComponent>
+            <xmlInputFieldToolbarComponent :prettyName="$props.prettyName" @update:defaultData="(data) => setToDefaultQuery(data)"></xmlInputFieldToolbarComponent>
             <textarea id="transformField" v-model="query" @input="sendTransform()" class="w-full h-full resize-none dark:text-slate-100 dark:bg-gray-600 border border-slate-400 p-2 rounded-md"></textarea>
         </div>
     </div>
diff --git a/Frontend/src/components/xml/XmlInputFieldToolbarComponent.vue b/Frontend/src/components/xml/XmlInputFieldToolbarComponent.vue
index 0f334e4..2607453 100644
--- a/Frontend/src/components/xml/XmlInputFieldToolbarComponent.vue
+++ b/Frontend/src/components/xml/XmlInputFieldToolbarComponent.vue
@@ -1,18 +1,49 @@
 <script setup lang="ts">
 
+import sampleXML from "@/assets/sampleXml.xml?raw"
+import sampleXSLT from "@/assets/sampleXslt.xml?raw"
+import sampleXSD from "@/assets/sampleXsd.xml?raw"
+import sampleXQuery from "@/assets/sampleXQuery.xquery?raw"
+
+
 const props = defineProps(
     {
         prettyName: {type: String, required: true}
     }
 )
 
+const emit = defineEmits(['update:defaultData'])
+
+function setDefault() {
+    console.log(props.prettyName.toLowerCase())
+    switch (props.prettyName.toLowerCase()) {
+        case "xpath":
+            emit("update:defaultData", "string(/l:library/l:libraryName)")
+            break;
+        case "xsd":
+            emit("update:defaultData", sampleXSD)
+            break;
+        case "xslt":
+            emit("update:defaultData", sampleXSLT)
+            break;
+        case "xquery":
+            emit("update:defaultData", sampleXQuery)
+            break;
+        
+        default:
+            emit("update:defaultData", sampleXML)
+            break;
+    }
+
+}
+
 </script>
 
 <template>
     <div class="flex place-content-between w-full pr-2 items-center m-2">
         <span class="dark:text-white">{{ prettyName }}</span>
         <div class="flex space-x-2">
-            <button class="tool-button">Insert default {{ prettyName }}</button>
+            <button class="tool-button" @click="setDefault()">Insert default {{ prettyName }}</button>
         </div>
         
     </div>
diff --git a/Frontend/src/components/xml/XmlOutputFieldToolbarComponent.vue b/Frontend/src/components/xml/XmlOutputFieldToolbarComponent.vue
index 101a2cc..df1ffa4 100644
--- a/Frontend/src/components/xml/XmlOutputFieldToolbarComponent.vue
+++ b/Frontend/src/components/xml/XmlOutputFieldToolbarComponent.vue
@@ -10,6 +10,8 @@ const props = defineProps(
     }
 )
 
+const emit = defineEmits(['update:result'])
+
 const engine = ref('');
 const version = ref('');
 
@@ -17,7 +19,6 @@ const isSaxonHidden = ref(false);
 const isXalanHidden = ref(false);
 const isLibXMLHidden = ref(false);
 
-const emit = defineEmits(['update:result'])
 
 function process() {
     var request:Request = prepareRequest();
-- 
2.51.0


From 99bb7d5fa7814fcb3d07911f29936fe91b1d41f4 Mon Sep 17 00:00:00 2001
From: Adam Bem <adam.bem@zoho.eu>
Date: Fri, 16 Jun 2023 14:13:34 +0200
Subject: [PATCH 16/18] Removed unneded console.log

---
 Frontend/src/components/xml/XmlInputFieldToolbarComponent.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/Frontend/src/components/xml/XmlInputFieldToolbarComponent.vue b/Frontend/src/components/xml/XmlInputFieldToolbarComponent.vue
index 2607453..b655f4c 100644
--- a/Frontend/src/components/xml/XmlInputFieldToolbarComponent.vue
+++ b/Frontend/src/components/xml/XmlInputFieldToolbarComponent.vue
@@ -15,7 +15,6 @@ const props = defineProps(
 const emit = defineEmits(['update:defaultData'])
 
 function setDefault() {
-    console.log(props.prettyName.toLowerCase())
     switch (props.prettyName.toLowerCase()) {
         case "xpath":
             emit("update:defaultData", "string(/l:library/l:libraryName)")
-- 
2.51.0


From f16e88bef7d6405da857b14267638355caba077b Mon Sep 17 00:00:00 2001
From: Adam Bem <adam.bem@zoho.eu>
Date: Fri, 16 Jun 2023 14:15:00 +0200
Subject: [PATCH 17/18] Extracted value to const

---
 .../components/xml/XmlInputFieldToolbarComponent.vue  | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/Frontend/src/components/xml/XmlInputFieldToolbarComponent.vue b/Frontend/src/components/xml/XmlInputFieldToolbarComponent.vue
index b655f4c..bf40438 100644
--- a/Frontend/src/components/xml/XmlInputFieldToolbarComponent.vue
+++ b/Frontend/src/components/xml/XmlInputFieldToolbarComponent.vue
@@ -15,22 +15,23 @@ const props = defineProps(
 const emit = defineEmits(['update:defaultData'])
 
 function setDefault() {
+    const emitName = "update:defaultData";
     switch (props.prettyName.toLowerCase()) {
         case "xpath":
-            emit("update:defaultData", "string(/l:library/l:libraryName)")
+            emit(emitName, "string(/l:library/l:libraryName)")
             break;
         case "xsd":
-            emit("update:defaultData", sampleXSD)
+            emit(emitName, sampleXSD)
             break;
         case "xslt":
-            emit("update:defaultData", sampleXSLT)
+            emit(emitName, sampleXSLT)
             break;
         case "xquery":
-            emit("update:defaultData", sampleXQuery)
+            emit(emitName, sampleXQuery)
             break;
         
         default:
-            emit("update:defaultData", sampleXML)
+            emit(emitName, sampleXML)
             break;
     }
 
-- 
2.51.0


From 6473623b05c31cc944ebb6cd0733a4059619a0df Mon Sep 17 00:00:00 2001
From: Adam Bem <adam.bem@zoho.eu>
Date: Fri, 16 Jun 2023 14:30:41 +0200
Subject: [PATCH 18/18] There is now engine and version selected by default

---
 .../xml/XmlOutputFieldToolbarComponent.vue    | 58 ++++++++++---------
 1 file changed, 31 insertions(+), 27 deletions(-)

diff --git a/Frontend/src/components/xml/XmlOutputFieldToolbarComponent.vue b/Frontend/src/components/xml/XmlOutputFieldToolbarComponent.vue
index df1ffa4..5db6734 100644
--- a/Frontend/src/components/xml/XmlOutputFieldToolbarComponent.vue
+++ b/Frontend/src/components/xml/XmlOutputFieldToolbarComponent.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue';
 
+var engines = ["saxon", "xalan", "libxml"];
+var versions = ["1.0", "2.0", "3.0", "3.1"];
 
 const props = defineProps(
     {
@@ -20,6 +22,33 @@ const isXalanHidden = ref(false);
 const isLibXMLHidden = ref(false);
 
 
+onMounted(() => {
+    selectAvailableEngines();
+    selectAvailableVersions();
+    selectDefaults();
+})
+
+function selectAvailableEngines() {
+    if (props.tool == "xsd") {
+        engines = ["xalan", "libxml"]
+    }
+    else if (props.tool == "xquery") {
+        engines = ["saxon"]
+    }
+}
+
+function selectAvailableVersions() {
+    if (props.tool == "xquery")
+        versions = ["3.1"];
+    else if (props.tool == "xsd")
+        versions = ["N/A"];
+}
+
+function selectDefaults() {
+    version.value = versions[versions.length - 1];
+    engine.value = engines[0];
+}
+
 function process() {
     var request:Request = prepareRequest();
     fetchRequest(request).then((data) => {
@@ -61,27 +90,7 @@ function sendProcessedData(data: JSON) {
     emit("update:result", data);
 }
 
-onMounted(() => {
-    showOnlyAvailableEngines();
-})
 
-function showOnlyAvailableEngines() {
-    if (props.tool == "xsd") {
-        isSaxonHidden.value = true;
-        isXalanHidden.value = false;
-        isLibXMLHidden.value = false;
-    }
-    else if (props.tool == "xquery") {
-        isSaxonHidden.value = false;
-        isXalanHidden.value = true;
-        isLibXMLHidden.value = true;
-    }
-    else {
-        isSaxonHidden.value = false;
-        isXalanHidden.value = false;
-        isLibXMLHidden.value = false;
-    }
-}
 
 </script>
 
@@ -90,15 +99,10 @@ function showOnlyAvailableEngines() {
         <span class="dark:text-white">Result:</span>
         <div class="flex space-x-2">
             <select v-model="engine" name="engine" class="px-3 rounded-full border border-slate-400 bg-white dark:text-slate-100 dark:bg-gray-600">
-                <option value="saxon" :class="(isSaxonHidden) ? 'hidden' : ''">Saxon</option>
-                <option value="xalan" :class="(isXalanHidden) ? 'hidden' : ''">Xalan</option>
-                <option value="libxml" :class="(isLibXMLHidden) ? 'hidden' : ''">libXML</option>
+                <option v-for="engine in engines" :value="engine">{{ engine }}</option>
             </select>
             <select v-model="version" name="version" class="px-3 rounded-full border border-slate-400 bg-white dark:text-slate-100 dark:bg-gray-600">
-                <option value="1.0">1.0</option>
-                <option value="2.0">2.0</option>
-                <option value="3.0">3.0</option>
-                <option value="3.1">3.1</option>
+                <option v-for="version in versions" :value="version">{{ version }}</option>
             </select>
             <button class="tool-button">Clear</button>    
             <button class="tool-button" @click="process">Process</button>
-- 
2.51.0