R11/release11-tools
4
2
Fork 0
Code Issues 9 Pull Requests 4 Packages Projects Releases 6 Wiki Activity

Implemented basic Vue.js frontend #222

Merged
bema merged 14 commits from bema/func/vue_frontend into master 2023-06-14 11:26:02 +02:00
Conversation 1 Commits 14 Files Changed 100 +24 -59
2 changed files with 24 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit a944338146 - Show all commits

57
new-frontend/src/App.vue
View File

@@ -1,57 +1,22 @@
<script setup lang="ts"> <script setup lang="ts">
import { onMounted, ref, watch } from 'vue'; import { ref } from 'vue';
import XmlTool from './components/XmlTool.vue'
const xml = ref(''); const activeToolBox = ref('')
const transform = ref(''); const tools = ref('')
const result = 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> </script>
<template> <template>
<label for="xpath">XPath</label> <label for="xml">XML</label>
<input v-model="xmltool" type="radio" id="xpath" name="xmltool" value="xpath"/> <input v-model="activeToolBox" type="radio" id="xml" value="xml" />
<label for="xslt">XSLT</label> <label for="formatter">Formatter</label>
<input v-model="xmltool" type="radio" id="xslt" name="xmltool" value="xslt"/> <input v-model="activeToolBox" type="radio" id="formatter" value="formatter" />
<label for="xsd">XSD</label> <br><br>
<input v-model="xmltool" type="radio" id="xsd" name="xmltool" value="xsd"/> <XmlTool v-if="activeToolBox == 'xml'" />
<br /><br /> <h1 v-if="activeToolBox == 'formatter'">Formatter</h1>
<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>
</template> </template>
<style scoped></style> <style scoped></style>

22
new-frontend/src/components/XmlTool.vue
View File

@@ -6,23 +6,21 @@ const transform = ref('');
const transformPlaceholder = ref('') const transformPlaceholder = ref('')
const result = ref('') const result = ref('')
const tool = ref('') const activeXmlTool = ref('')
async function submit() { 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({ var jsonData = JSON.stringify({
"data": xml.value, "data": xml.value,
"process": transform.value, "process": transform.value,
"processor": "xalan", "processor": "xalan",
"version": "3.0" "version": "3.0"
}); });
var init = { var requestData = {
headers: new Headers({
}),
body: jsonData, body: jsonData,
method: "POST" method: "POST"
}; };
var request = new Request(url, init); var request = new Request(url, requestData);
var responseBody = await fetch(request).then(async response => { var responseBody = await fetch(request).then(async response => {
@@ -33,7 +31,7 @@ async function submit() {
result.value = responseBody.result; result.value = responseBody.result;
} }
watch(tool, (tool) => { watch(activeXmlTool, (tool) => {
if (tool == "xpath") if (tool == "xpath")
transformPlaceholder.value = "XPath"; transformPlaceholder.value = "XPath";
if (tool == "xsd") if (tool == "xsd")
@@ -42,21 +40,23 @@ watch(tool, (tool) => {
transformPlaceholder.value = "XSLT"; transformPlaceholder.value = "XSLT";
if (tool == "xquery") if (tool == "xquery")
transformPlaceholder.value = "XQuery"; transformPlaceholder.value = "XQuery";
transform.value = "";
}) })
</script> </script>
<template> <template>
<label for="xpath">XPath</label> <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> <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> <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> <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 /> <br /><br />
<textarea v-model="xml" id="xml" placeholder="XML"></textarea> <textarea v-model="xml" id="xml" placeholder="XML"></textarea>
<textarea v-model="transform" id="transform" :placeholder="transformPlaceholder"></textarea><br /> <textarea v-model="transform" id="transform" :placeholder="transformPlaceholder"></textarea><br />