Added sidebar (#224)

Co-authored-by: widlam <mikolaj.widla@gmail.com>
Reviewed-on: #224
Reviewed-by: Adam Bem <bema@noreply.example.com>
Co-authored-by: Mikolaj Widla <widlam@noreply.example.com>
Co-committed-by: Mikolaj Widla <widlam@noreply.example.com>

Frontend/src/components/xml/XmlInputFieldComponent.vue

@@ -0,0 +1,23 @@
+<script setup>
+
+const props = defineProps(
+    {
+        transformationName: {type: String},
+    }
+)
+
+</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>
+</template>

Frontend/src/components/xml/XmlToolComponent.vue

@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import { onMounted, ref, watch } from 'vue';
+
+const xml = ref('');
+const transform = ref('');
+const transformPlaceholder = ref('');
+const engine = ref('');
+const result = ref('');
+
+const activeXmlTool = ref('');
+
+async function submit() {
+  const engineEndpoint = engine.value == "libxml" ? "libxml" : "java";
+  const url = document.location.protocol + "//" + document.location.hostname + "/" + engineEndpoint + "/" + activeXmlTool.value;
+
+  var version = "1.0";
+  if (engine.value == "saxon")
+    version = "3.0"
+
+  var requestBody = JSON.stringify({
+    "data": xml.value,
+    "process": transform.value,
+    "processor": engine.value,
+    "version": version
+  });
+
+  var request = new Request(url, {
+    body: requestBody,
+    method: "POST"
+  });
+
+
+  var responseBody = await fetch(request)
+    .then(response => response.json())
+    .then((body) => body);
+
+  result.value = responseBody.result;
+}
+
+watch(activeXmlTool, (tool) => {
+  if (tool == "xpath")
+    transformPlaceholder.value = "XPath";
+  if (tool == "xsd")
+    transformPlaceholder.value = "XSD";
+  if (tool == "xslt")
+    transformPlaceholder.value = "XSLT";
+  if (tool == "xquery")
+    transformPlaceholder.value = "XQuery";
+  
+    transform.value = "";
+})
+
+onMounted(() => {
+  activeXmlTool.value = "xpath";
+});
+</script>
+
+<template>
+  <label for="xpath">XPath</label>
+  <input v-model="activeXmlTool" type="radio" id="xpath" name="xmltool" value="xpath" />
+
+  <label for="xslt">XSLT</label>
+  <input v-model="activeXmlTool" type="radio" id="xslt" name="xmltool" value="xslt" />
+
+  <label for="xsd">XSD</label>
+  <input v-model="activeXmlTool" type="radio" id="xsd" name="xmltool" value="xsd" />
+  
+  <label for="xquery">XQuery</label>
+  <input v-model="activeXmlTool" type="radio" id="xquery" name="xmltool" value="xquery" />
+  <br /><br />
+  <select name="engine" v-model="engine">
+    <option value="saxon" selected>Saxon</option>
+    <option value="xalan">Xalan</option>
+    <option value="libxml">libXML</option>
+  </select>
+  <br />
+  <textarea v-model="xml" id="xml" placeholder="XML"></textarea>
+  <textarea v-model="transform" id="transform" :placeholder="transformPlaceholder"></textarea><br />
+  <button @click="submit">Submit</button><br />
+  <pre><code>{{ result }}</code></pre>
+</template>
+
+<style scoped></style>