Added dynamic engine selection
This commit is contained in:
		@@ -1,5 +1,5 @@
 | 
			
		||||
<script setup lang="ts">
 | 
			
		||||
import { ref } from 'vue';
 | 
			
		||||
import { onMounted, ref } from 'vue';
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
const props = defineProps(
 | 
			
		||||
@@ -10,7 +10,11 @@ const props = defineProps(
 | 
			
		||||
    }
 | 
			
		||||
)
 | 
			
		||||
 | 
			
		||||
const engine = ref('')
 | 
			
		||||
const engine = ref('');
 | 
			
		||||
 | 
			
		||||
const isSaxonHidden = ref(false);
 | 
			
		||||
const isXalanHidden = ref(false);
 | 
			
		||||
const isLibXMLHidden = ref(false);
 | 
			
		||||
 | 
			
		||||
const emit = defineEmits(['update:result'])
 | 
			
		||||
 | 
			
		||||
@@ -21,6 +25,14 @@ function process() {
 | 
			
		||||
    })
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
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;
 | 
			
		||||
@@ -36,14 +48,6 @@ function prepareRequestBody():string {
 | 
			
		||||
    return requestBody;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
function prepareRequest():Request {
 | 
			
		||||
    var request = new Request(prepareURL(), {
 | 
			
		||||
        body: prepareRequestBody(),
 | 
			
		||||
        method: "POST"
 | 
			
		||||
    });
 | 
			
		||||
    return request
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
async function fetchRequest(request: Request):Promise<JSON> {
 | 
			
		||||
    var responseBody = await fetch(request)
 | 
			
		||||
    .then(response => response.json())
 | 
			
		||||
@@ -51,10 +55,32 @@ async function fetchRequest(request: Request):Promise<JSON> {
 | 
			
		||||
    return responseBody;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
function sendProcessedData(data: any) {
 | 
			
		||||
function sendProcessedData(data: JSON) {
 | 
			
		||||
    emit("update:result", data);
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
onMounted(() => {
 | 
			
		||||
    showOnlyAvailableEngines();
 | 
			
		||||
})
 | 
			
		||||
 | 
			
		||||
function showOnlyAvailableEngines() {
 | 
			
		||||
    if (props.tool == "xsd") {
 | 
			
		||||
        isSaxonHidden.value = true;
 | 
			
		||||
        isXalanHidden.value = false;
 | 
			
		||||
        isLibXMLHidden.value = false;
 | 
			
		||||
    }
 | 
			
		||||
    else if (props.tool == "xquery") {
 | 
			
		||||
        isSaxonHidden.value = false;
 | 
			
		||||
        isXalanHidden.value = true;
 | 
			
		||||
        isLibXMLHidden.value = true;
 | 
			
		||||
    }
 | 
			
		||||
    else {
 | 
			
		||||
        isSaxonHidden.value = false;
 | 
			
		||||
        isXalanHidden.value = false;
 | 
			
		||||
        isLibXMLHidden.value = false;
 | 
			
		||||
    }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<template>
 | 
			
		||||
@@ -62,9 +88,9 @@ function sendProcessedData(data: any) {
 | 
			
		||||
        <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 value="saxon">Saxon</option>
 | 
			
		||||
                <option value="xalan">Xalan</option>
 | 
			
		||||
                <option value="libxml">libXML</option>
 | 
			
		||||
                <option value="saxon" :class="(isSaxonHidden) ? 'hidden' : ''">Saxon</option>
 | 
			
		||||
                <option value="xalan" :class="(isXalanHidden) ? 'hidden' : ''">Xalan</option>
 | 
			
		||||
                <option value="libxml" :class="(isLibXMLHidden) ? 'hidden' : ''">libXML</option>
 | 
			
		||||
            </select>
 | 
			
		||||
            <button class="tool-button">Clear</button>    
 | 
			
		||||
            <button class="tool-button" @click="process">Process</button>
 | 
			
		||||
 
 | 
			
		||||
@@ -13,6 +13,6 @@ const query = ref('');
 | 
			
		||||
    <div id="layout" class="flex flex-col lg:flex-row w-full h-full gap-4">
 | 
			
		||||
        <xmlInputFieldComponent prettyName="XSLT" @update:xml="(data) => {xml = data}" @update:transform="(data) => {query = data}"></xmlInputFieldComponent>    
 | 
			
		||||
 | 
			
		||||
        <xmlOutputFieldComponent tool="xslt" :xml="xml" :query="query"></xmlOutputFieldComponent>
 | 
			
		||||
        <xmlOutputFieldComponent tool="xpath" :xml="xml" :query="query"></xmlOutputFieldComponent>
 | 
			
		||||
    </div>
 | 
			
		||||
</template>
 | 
			
		||||
		Reference in New Issue
	
	Block a user