152 lines
4.4 KiB
Vue
152 lines
4.4 KiB
Vue
<script setup lang="ts">
|
|
import { onMounted, ref } from 'vue';
|
|
import CodeEditor from '../CodeEditorComponent.vue';
|
|
|
|
|
|
const props = defineProps(
|
|
{
|
|
tool: {type: String, required: true},
|
|
xml: {type: String},
|
|
query: {type: String}
|
|
}
|
|
)
|
|
|
|
const emit = defineEmits(["update"]);
|
|
|
|
const result = ref('');
|
|
|
|
var enginesForCurrentTool = ref(["saxon", "xalan", "libxml"]);
|
|
|
|
const allVersions = ["1.0", "2.0", "3.0", "3.1"];
|
|
var versionsForCurrentEngine = ref([""]);
|
|
|
|
const engine = ref('');
|
|
const version = ref('');
|
|
|
|
|
|
onMounted(() => {
|
|
changeAvailableEngines();
|
|
changeAvailableVersions();
|
|
})
|
|
|
|
function changeAvailableEngines() {
|
|
if (props.tool == "xsd") {
|
|
enginesForCurrentTool.value = ["xalan", "libxml"]
|
|
}
|
|
else if (props.tool == "xquery") {
|
|
enginesForCurrentTool.value = ["saxon"]
|
|
}
|
|
|
|
selectDefaultEngine();
|
|
}
|
|
|
|
function changeAvailableVersions() {
|
|
if (props.tool == "xquery")
|
|
versionsForCurrentEngine.value = ["3.1"];
|
|
else if (props.tool == "xslt")
|
|
changeAvailableVersionsOfXSLT();
|
|
else if (props.tool == "xsd")
|
|
versionsForCurrentEngine.value = ["N/A"];
|
|
else if (props.tool == "xpath")
|
|
changeAvailableVersionsOfXPath();
|
|
|
|
selectDefaultVersion();
|
|
}
|
|
|
|
function changeAvailableVersionsOfXSLT() {
|
|
if(engine.value == "saxon")
|
|
versionsForCurrentEngine.value = ["3.0"];
|
|
else
|
|
versionsForCurrentEngine.value = ["1.0"];
|
|
}
|
|
|
|
function changeAvailableVersionsOfXPath() {
|
|
if(engine.value == "xalan" || engine.value == "libxml")
|
|
versionsForCurrentEngine.value = ["1.0"];
|
|
else if (engine.value == "saxon")
|
|
versionsForCurrentEngine.value = allVersions;
|
|
}
|
|
|
|
function selectDefaultEngine() {
|
|
engine.value = enginesForCurrentTool.value[0];
|
|
}
|
|
|
|
function selectDefaultVersion() {
|
|
const lastVersion = versionsForCurrentEngine.value.length - 1
|
|
version.value = versionsForCurrentEngine.value[lastVersion];
|
|
emitVersionChange();
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
function clear() {
|
|
result.value = "";
|
|
}
|
|
|
|
function emitVersionChange() {
|
|
emit("update", version.value);
|
|
}
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex flex-col flex-none w-full lg:w-1/2 h-1/3 lg:h-full items-center pb-2">
|
|
<div class="flex place-content-between w-full items-center pb-2">
|
|
<span class="dark:text-white">Result:</span>
|
|
<div class="flex space-x-2">
|
|
<select v-model="engine" name="engine" @change="changeAvailableVersions()" class="px-3 rounded-full border border-slate-400 bg-white dark:text-slate-100 dark:bg-gray-600">
|
|
<option v-for="engine in enginesForCurrentTool" :value="engine">{{ engine }}</option>
|
|
</select>
|
|
<select v-model="version" name="version" @change="emitVersionChange()" class="px-3 rounded-full border border-slate-400 bg-white dark:text-slate-100 dark:bg-gray-600">
|
|
<option v-for="version in versionsForCurrentEngine" :value="version">{{ version }}</option>
|
|
</select>
|
|
<button class="tool-button" @click="clear">Clear</button>
|
|
<button class="tool-button" @click="process">Process</button>
|
|
</div>
|
|
</div>
|
|
<div class="overflow-scroll h-full w-full">
|
|
<CodeEditor :code="result" :config="{disabled:true,language:tool}"></CodeEditor>
|
|
</div>
|
|
|
|
</div>
|
|
</template>
|