Implemented basic Vue.js frontend (#222)

Co-authored-by: Adam Bem <adam.bem@zoho.eu>
Co-authored-by: widlam <mikolaj.widla@gmail.com>
Reviewed-on: #222
Reviewed-by: Mikolaj Widla <widlam@noreply.example.com>

Frontend/src/App.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+import { RouterView } from 'vue-router';
+
+const activeToolBox = ref('');
+
+
+
+onMounted(() => {
+  activeToolBox.value = "xml";
+});
+</script>
+
+<template>
+   <button @click="$router.push('/xml')">XML</button>
+   <button @click="$router.push('/formatter')">Formatter</button>
+   <button @click="$router.push('/restmock')">REST Mock</button>
+
+
+  <RouterView></RouterView>
+</template>
+
+<style scoped></style>

Frontend/src/components/FormatterComponent.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+
+
+</script>
+
+<template>
+  <h1>Formatter</h1>
+</template>
+
+<style scoped></style>

Frontend/src/components/LandingComponent.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <h1>Landing</h1>
+</template>
+
+<style scoped></style>

Frontend/src/components/RestMockComponent.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+
+
+</script>
+
+<template>
+  <h1>RestMock</h1>
+</template>
+
+<style scoped></style>

Frontend/src/components/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>

Frontend/src/main.ts

@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import router from "./router";
+import App from './App.vue';
+
+createApp(App).use(router).mount('#app')

Frontend/src/router/index.ts

@@ -0,0 +1,38 @@
+import { createRouter, createWebHistory } from 'vue-router'
+
+const landingPage = import("@views/LandingView.vue")
+const xmlTool = import("@views/XmlToolView.vue")
+const restMock = import("@views/RestMockView.vue")
+const formatter = import("@views/FormatterView.vue")
+
+const routes = [
+  {
+    path: '/',
+    name: 'landing',
+    component: () => landingPage
+  },
+  {
+    path: '/xml',
+    name: 'xmltool',
+    component: () => xmlTool
+  },
+  {
+    path: '/restmock',
+    name: 'restmock',
+    component: () => restMock
+  },
+  {
+    path: '/formatter',
+    name: 'formatter',
+    component: () => formatter
+  },
+]
+
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes: routes
+})
+
+
+export default router;

Frontend/src/shims-vue.d.ts

@@ -0,0 +1 @@
+declare module '*.vue';

Frontend/src/views/FormatterView.vue

@@ -0,0 +1,14 @@
+<script lang="ts">
+import FormatterComponent from '@components/FormatterComponent.vue'
+
+export default {
+    name:"FormatterView",
+    components: {FormatterComponent}
+}
+</script>
+
+
+<template>
+    <FormatterComponent></FormatterComponent>
+</template>
+

Frontend/src/views/LandingView.vue

@@ -0,0 +1,15 @@
+<script lang="ts">
+import LandingComponent from '@components/LandingComponent.vue'
+
+
+export default {
+    name:"LandingView",
+    components: {LandingComponent}
+}
+</script>
+
+
+<template>
+    <LandingComponent></LandingComponent>
+</template>
+

Frontend/src/views/RestMockView.vue

@@ -0,0 +1,14 @@
+<script lang="ts">
+import RestMockComponent from '@components/RestMockComponent.vue'
+
+export default {
+    name:"RestMockView",
+    components: {RestMockComponent}
+}
+</script>
+
+
+<template>
+    <RestMockComponent></RestMockComponent>
+</template>
+

Frontend/src/views/XmlToolView.vue

@@ -0,0 +1,14 @@
+<script lang="ts">
+import XmlToolComponent from '@components/XmlToolComponent.vue'
+
+export default {
+    name:"XmlToolView",
+    components: {XmlToolComponent}
+}
+</script>
+
+
+<template>
+    <XmlToolComponent></XmlToolComponent>
+</template>
+