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">
+    <div class="flex flex-col w-full h-full items-center gap-4">
-        <label for="xmlfield" class="dark:text-white">XML</label>
+        <div class="w-full">
-        <textarea id="xmlfield" class="w-1/2 h-36 bg-gray-500">
+            <xmlInputFieldToolbarComponent prettyName="XML" fieldName="xml"></xmlInputFieldToolbarComponent>
-
+            <textarea id="xmlfield" class="w-full dark:bg-gray-600 border border-slate-400 rounded-md"></textarea>
-
+        </div>
-        </textarea>
+        <div class="w-full">
-        <label for="transformField" class="dark:text-white">{{ props.transformationName }}</label>
+            <xmlInputFieldToolbarComponent prettyName="XSLT" fieldName="xslt"></xmlInputFieldToolbarComponent>
-        <textarea id="transformField" class="w-1/2 h-36 bg-gray-500">
+        <textarea id="transformField" class="w-full dark:bg-gray-600 border border-slate-400 rounded-md"></textarea>
-
+        </div>
-        </textarea>
     </div>
 </template>

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>

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>

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>