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",

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"
   },

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>

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">
+        <div class="flex flex-col w-full h-1/2">
-            <xmlInputFieldToolbarComponent prettyName="XML" fieldName="xml"></xmlInputFieldToolbarComponent>
+            <xmlInputFieldToolbarComponent prettyName="XML"></xmlInputFieldToolbarComponent>
-            <textarea id="xmlfield" class="w-full dark:bg-gray-600 border border-slate-400 rounded-md"></textarea>
+            <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">
+        <div class="flex flex-col w-full h-1/2">
-            <xmlInputFieldToolbarComponent prettyName="XSLT" fieldName="xslt"></xmlInputFieldToolbarComponent>
+            <xmlInputFieldToolbarComponent :prettyName="$props.prettyName"></xmlInputFieldToolbarComponent>
-        <textarea id="transformField" class="w-full dark:bg-gray-600 border border-slate-400 rounded-md"></textarea>
+            <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>

Frontend/src/components/xml/XmlInputFieldToolbarComponent.vue

@@ -2,8 +2,7 @@
 
 const props = defineProps(
     {
-        prettyName: {type: String, required: true},
+        prettyName: {type: String, required: true}
-        fieldName: {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>

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>
+        <xmlOutputFieldToolbarComponent class="grow-0" :xml="$props.xml" :query="$props.query" :tool="$props.tool" @update:result="(data) => parseResult(data)"></xmlOutputFieldToolbarComponent>
-        <div class="w-full h-max p-2 border border-slate-400 rounded-md text-left">
+        <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>&lt;test&gt;fsdafdsa&lt;/test&gt;</code></pre>
+            <pre><code>{{ result }}</code></pre>
         </div>
         
     </div>

Frontend/src/components/xml/XmlOutputFieldToolbarComponent.vue

@@ -1,20 +1,73 @@
 <script setup lang="ts">
+import { ref } from 'vue';
+
 
 const props = defineProps(
     {
-
+        tool: {type: String, required: true}, 
-        fieldName: {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>

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

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",
+const xml = ref('');
-    components: {xmlInputFieldComponent}
+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>