This commit is contained in:
2023-06-19 09:15:00 +02:00
parent 4e83da66c3
commit 8cc494f03b
6 changed files with 94 additions and 141 deletions

View File

@@ -1,18 +0,0 @@
<script setup lang="ts">
import XMLButtonFormatterComponent from '@/components/formatter/XMLButtonFormatterComponent.vue';
import InsertDefaultComponent from '../xml/InsertDefaultComponent.vue';
defineProps({
inputValue: {type: String, required: true}
})
</script>
<template>
<div class="flex flex-col w-full h-full">
<textarea name="data" id="data" :value="$props.inputValue" class="text-field"></textarea>
</div>
</template>
<style scoped></style>

View File

@@ -1,6 +1,6 @@
<script setup lang="ts">
import InsertDefaultComponent from "./InsertDefaultComponent.vue"
import InsertTemplateComponent from '@components/common/InsertTemplateComponent.vue'
const props = defineProps(
{
@@ -21,7 +21,7 @@ function setDefault(data: string) {
<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">
<InsertDefaultComponent :pretty-name="props.prettyName" @update:default-data="(data) => setDefault(data)"></InsertDefaultComponent>
<InsertTemplateComponent :pretty-name="props.prettyName" @update:default-data="(data: string) => setDefault(data)"></InsertTemplateComponent>
</div>
</div>

View File

@@ -1,6 +1,5 @@
<script setup lang="ts">
import xmlOutputFieldToolbarComponent from '@/components/xml/XmlOutputFieldToolbarComponent.vue';
import { ref } from 'vue';
import { onMounted, ref } from 'vue';
const props = defineProps(
@@ -13,7 +12,80 @@ const props = defineProps(
const result = ref('');
function parseResult(data: any) {
var engines = ["saxon", "xalan", "libxml"];
var versions = ["1.0", "2.0", "3.0", "3.1"];
const engine = ref('');
const version = ref('');
onMounted(() => {
selectAvailableEngines();
selectAvailableVersions();
selectDefaults();
})
function selectAvailableEngines() {
if (props.tool == "xsd") {
engines = ["xalan", "libxml"]
}
else if (props.tool == "xquery") {
engines = ["saxon"]
}
}
function selectAvailableVersions() {
if (props.tool == "xquery")
versions = ["3.1"];
else if (props.tool == "xslt")
versions = ["3.0"];
else if (props.tool == "xsd")
versions = ["N/A"];
}
function selectDefaults() {
version.value = versions[versions.length - 1];
engine.value = engines[0];
}
function process() {
var request:Request = prepareRequest();
fetchRequest(request).then((data) => {
updateOutputField(data);
})
}
function prepareRequest():Request {
var request = new Request(prepareURL(), {
body: prepareRequestBody(),
method: "POST"
});
return request
}
function prepareURL(): string {
const engineEndpoint = engine.value == "libxml" ? "libxml" : "java";
return document.location.protocol + "//" + document.location.hostname + "/" + engineEndpoint + "/" + props.tool;
}
function prepareRequestBody():string {
var requestBody = JSON.stringify({
"data": props.xml,
"process": props.query,
"processor": engine.value,
"version": version.value
});
return requestBody;
}
async function fetchRequest(request: Request):Promise<JSON> {
var responseBody = await fetch(request)
.then(response => response.json())
.then((body) => body);
return responseBody;
}
function updateOutputField(data: any) {
result.value = data.result;
}
@@ -21,7 +93,19 @@ function parseResult(data: any) {
<template>
<div class="flex flex-col w-full lg:w-1/2 h-full items-center">
<xmlOutputFieldToolbarComponent :xml="$props.xml" :query="$props.query" :tool="$props.tool" @update:result="(data) => parseResult(data)"></xmlOutputFieldToolbarComponent>
<div class="flex place-content-between w-full items-center m-2">
<span class="dark:text-white">Result:</span>
<div class="flex space-x-2">
<select v-model="engine" name="engine" class="px-3 rounded-full border border-slate-400 bg-white dark:text-slate-100 dark:bg-gray-600">
<option v-for="engine in engines" :value="engine">{{ engine }}</option>
</select>
<select v-model="version" name="version" class="px-3 rounded-full border border-slate-400 bg-white dark:text-slate-100 dark:bg-gray-600">
<option v-for="version in versions" :value="version">{{ version }}</option>
</select>
<button class="tool-button">Clear</button>
<button class="tool-button" @click="process">Process</button>
</div>
</div>
<div class="text-field overflow-scroll">
<pre class="break-words"><code>{{ result }}</code></pre>
</div>

View File

@@ -1,112 +0,0 @@
<script setup lang="ts">
import { onMounted, ref } from 'vue';
var engines = ["saxon", "xalan", "libxml"];
var versions = ["1.0", "2.0", "3.0", "3.1"];
const props = defineProps(
{
tool: {type: String, required: true},
xml: {type: String},
query: {type: String},
}
)
const emit = defineEmits(['update:result'])
const engine = ref('');
const version = ref('');
const isSaxonHidden = ref(false);
const isXalanHidden = ref(false);
const isLibXMLHidden = ref(false);
onMounted(() => {
selectAvailableEngines();
selectAvailableVersions();
selectDefaults();
})
function selectAvailableEngines() {
if (props.tool == "xsd") {
engines = ["xalan", "libxml"]
}
else if (props.tool == "xquery") {
engines = ["saxon"]
}
}
function selectAvailableVersions() {
if (props.tool == "xquery")
versions = ["3.1"];
else if (props.tool == "xsd")
versions = ["N/A"];
}
function selectDefaults() {
version.value = versions[versions.length - 1];
engine.value = engines[0];
}
function process() {
var request:Request = prepareRequest();
fetchRequest(request).then((data) => {
sendProcessedData(data);
})
}
function prepareRequest():Request {
var request = new Request(prepareURL(), {
body: prepareRequestBody(),
method: "POST"
});
return request
}
function prepareURL(): string {
const engineEndpoint = engine.value == "libxml" ? "libxml" : "java";
return document.location.protocol + "//" + document.location.hostname + "/" + engineEndpoint + "/" + props.tool;
}
function prepareRequestBody():string {
var requestBody = JSON.stringify({
"data": props.xml,
"process": props.query,
"processor": engine.value,
"version": version.value
});
return requestBody;
}
async function fetchRequest(request: Request):Promise<JSON> {
var responseBody = await fetch(request)
.then(response => response.json())
.then((body) => body);
return responseBody;
}
function sendProcessedData(data: JSON) {
emit("update:result", data);
}
</script>
<template>
<div class="flex place-content-between w-full items-center m-2">
<span class="dark:text-white">Result:</span>
<div class="flex space-x-2">
<select v-model="engine" name="engine" class="px-3 rounded-full border border-slate-400 bg-white dark:text-slate-100 dark:bg-gray-600">
<option v-for="engine in engines" :value="engine">{{ engine }}</option>
</select>
<select v-model="version" name="version" class="px-3 rounded-full border border-slate-400 bg-white dark:text-slate-100 dark:bg-gray-600">
<option v-for="version in versions" :value="version">{{ version }}</option>
</select>
<button class="tool-button">Clear</button>
<button class="tool-button" @click="process">Process</button>
</div>
</div>
</template>

View File

@@ -1,13 +1,12 @@
<script setup lang="ts">
import InputFormatterComponent from '@/components/formatter/InputFormatterComponent.vue';
import XMLButtonFormatterComponent from '@/components/formatter/XMLButtonFormatterComponent.vue';
import InsertDefaultComponent from '@components/xml/InsertDefaultComponent.vue';
import InsertTemplateComponent from '@components/common/InsertTemplateComponent.vue';
import { ref } from 'vue';
const xml = ref('');
function setTextFieldValue(data: any) {
function setTextFieldValue(data: string) {
xml.value = data
}
@@ -22,10 +21,10 @@ function format(formattedXml: any) {
<div id="toolbar" class= "flex flex-col gap-4 items-center md:flex-row place-content-between">
<span class="dark:text-slate-100">XML Formatter</span>
<div class="space-x-2">
<InsertDefaultComponent pretty-name="XML" @update:defaultData="(data: any) => setTextFieldValue(data)"></InsertDefaultComponent>
<InsertTemplateComponent pretty-name="XML" @update:defaultData="(data: string) => setTextFieldValue(data)"></InsertTemplateComponent>
<XMLButtonFormatterComponent :xml="xml" @update:result="(data: any) => format(data)"></XMLButtonFormatterComponent>
</div>
</div>
<InputFormatterComponent :inputValue="xml"></InputFormatterComponent>
<textarea name="data" id="data" :value="xml" class="text-field"></textarea>
</div>
</template>