From a9443381462efe13855db6fa0efecf5916a0d728 Mon Sep 17 00:00:00 2001
From: Adam Bem <adam.bem@zoho.eu>
Date: Tue, 13 Jun 2023 14:29:48 +0200
Subject: [PATCH] Added placeholder for formatter

---
 new-frontend/src/App.vue                | 61 ++++++-------------------
 new-frontend/src/components/XmlTool.vue | 22 ++++-----
 2 files changed, 24 insertions(+), 59 deletions(-)

diff --git a/new-frontend/src/App.vue b/new-frontend/src/App.vue
index b219463..7e5953d 100644
--- a/new-frontend/src/App.vue
+++ b/new-frontend/src/App.vue
@@ -1,57 +1,22 @@
 <script setup lang="ts">
-import { onMounted, ref, watch } from 'vue';
+import { ref } from 'vue';
+import XmlTool from './components/XmlTool.vue'
 
-const xml = ref('');
-const transform = ref('');
-const result = ref('')
+const activeToolBox = ref('')
+const tools = ref('')
 
-const xmltool = ref('')
-
-async function submit() {
-  const url = document.location.protocol + "//" + document.location.hostname + "/java/" + xmltool.value;
-  console.log(xmltool.value);
-  var jsonData = JSON.stringify({
-    "data": xml.value,
-    "process": transform.value,
-    "processor": "xalan",
-    "version": "3.0"
-  });
-  var init = {
-    headers: new Headers({
-    }),
-    body: jsonData,
-    method: "POST"
-  };
-  var request = new Request(url, init);
-
-
-  var responseBody = await fetch(request).then(async response => {
-    const text = await response.text();
-    return JSON.parse(text);
-  });
-
-  result.value = responseBody.result;
-}
-
-watch(xmltool, (tool) => {
-  transform.value = tool;
-})
 </script>
 
 <template>
-  <label for="xpath">XPath</label>
-  <input v-model="xmltool" type="radio" id="xpath" name="xmltool" value="xpath"/>
-  
-  <label for="xslt">XSLT</label>
-  <input v-model="xmltool" type="radio" id="xslt" name="xmltool" value="xslt"/>
-  
-  <label for="xsd">XSD</label>
-  <input v-model="xmltool" type="radio" id="xsd" name="xmltool" value="xsd"/>
-  <br /><br />
-  <textarea v-model="xml" placeholder="XML"></textarea>
-  <textarea v-model="transform" placeholder="XPath"></textarea><br />
-  <button @click="submit">Submit</button><br />
-  <pre><code>{{ result }}</code></pre>
+  <label for="xml">XML</label>
+  <input v-model="activeToolBox" type="radio" id="xml" value="xml" />
+
+  <label for="formatter">Formatter</label>
+  <input v-model="activeToolBox" type="radio" id="formatter" value="formatter" />
+
+  <br><br>
+  <XmlTool v-if="activeToolBox == 'xml'" />
+  <h1 v-if="activeToolBox == 'formatter'">Formatter</h1>
 </template>
 
 <style scoped></style>
diff --git a/new-frontend/src/components/XmlTool.vue b/new-frontend/src/components/XmlTool.vue
index e6ccc83..5c86135 100644
--- a/new-frontend/src/components/XmlTool.vue
+++ b/new-frontend/src/components/XmlTool.vue
@@ -6,23 +6,21 @@ const transform = ref('');
 const transformPlaceholder = ref('')
 const result = ref('')
 
-const tool = ref('')
+const activeXmlTool = ref('')
 
 async function submit() {
-  const url = document.location.protocol + "//" + document.location.hostname + "/java/" + tool.value;
+  const url = document.location.protocol + "//" + document.location.hostname + "/java/" + activeXmlTool.value;
   var jsonData = JSON.stringify({
     "data": xml.value,
     "process": transform.value,
     "processor": "xalan",
     "version": "3.0"
   });
-  var init = {
-    headers: new Headers({
-    }),
+  var requestData = {
     body: jsonData,
     method: "POST"
   };
-  var request = new Request(url, init);
+  var request = new Request(url, requestData);
 
 
   var responseBody = await fetch(request).then(async response => {
@@ -33,7 +31,7 @@ async function submit() {
   result.value = responseBody.result;
 }
 
-watch(tool, (tool) => {
+watch(activeXmlTool, (tool) => {
   if (tool == "xpath")
     transformPlaceholder.value = "XPath";
   if (tool == "xsd")
@@ -42,21 +40,23 @@ watch(tool, (tool) => {
     transformPlaceholder.value = "XSLT";
   if (tool == "xquery")
     transformPlaceholder.value = "XQuery";
+  
+    transform.value = "";
 })
 </script>
 
 <template>
   <label for="xpath">XPath</label>
-  <input v-model="tool" type="radio" id="xpath" name="xmltool" value="xpath" />
+  <input v-model="activeXmlTool" type="radio" id="xpath" name="xmltool" value="xpath" />
 
   <label for="xslt">XSLT</label>
-  <input v-model="tool" type="radio" id="xslt" name="xmltool" value="xslt" />
+  <input v-model="activeXmlTool" type="radio" id="xslt" name="xmltool" value="xslt" />
 
   <label for="xsd">XSD</label>
-  <input v-model="tool" type="radio" id="xsd" name="xmltool" value="xsd" />
+  <input v-model="activeXmlTool" type="radio" id="xsd" name="xmltool" value="xsd" />
   
   <label for="xquery">XQuery</label>
-  <input v-model="tool" type="radio" id="xquery" name="xmltool" value="xquery" />
+  <input v-model="activeXmlTool" type="radio" id="xquery" name="xmltool" value="xquery" />
   <br /><br />
   <textarea v-model="xml" id="xml" placeholder="XML"></textarea>
   <textarea v-model="transform" id="transform" :placeholder="transformPlaceholder"></textarea><br />