Compare commits
9 Commits
778170e36d
...
finished_m
| Author | SHA1 | Date | |
|---|---|---|---|
| c3e0659bfa | |||
| 4f96d91c5c | |||
| 48ff86d837 | |||
| c3eef96354 | |||
| ba5d5685b9 | |||
| e8b22a41c6 | |||
| 467adf2264 | |||
| 0812fc6c49 | |||
| 971cc5f36a |
69
Frontend/src/components/CodeEditorComponent.vue
Normal file
69
Frontend/src/components/CodeEditorComponent.vue
Normal file
@@ -0,0 +1,69 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { computed, ref } from 'vue'
|
||||||
|
import { Codemirror } from 'vue-codemirror'
|
||||||
|
import { oneDark } from '@codemirror/theme-one-dark'
|
||||||
|
import {xml} from '@codemirror/lang-xml'
|
||||||
|
import {json} from '@codemirror/lang-json'
|
||||||
|
import {html} from '@codemirror/lang-html'
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const props= defineProps({
|
||||||
|
code : {
|
||||||
|
type: String,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
config: {
|
||||||
|
type: Object,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
const emit = defineEmits(
|
||||||
|
[
|
||||||
|
'update:updatedCode'
|
||||||
|
]
|
||||||
|
)
|
||||||
|
|
||||||
|
function dataUpdated(newData:String, viewUpdate : any){
|
||||||
|
emit('update:updatedCode',newData)
|
||||||
|
}
|
||||||
|
|
||||||
|
const extensions = computed( ()=> {
|
||||||
|
return [
|
||||||
|
oneDark,
|
||||||
|
parseLanguage(props.config.language),
|
||||||
|
]
|
||||||
|
|
||||||
|
} )
|
||||||
|
|
||||||
|
function parseLanguage(name: String){
|
||||||
|
switch(name.toUpperCase()){
|
||||||
|
case "JSON": {
|
||||||
|
return json();
|
||||||
|
}
|
||||||
|
case "HTML": {
|
||||||
|
return html();
|
||||||
|
}
|
||||||
|
default: {
|
||||||
|
return xml();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="editor w-full max-w-full h-full overflow-scroll">
|
||||||
|
|
||||||
|
<codemirror
|
||||||
|
style="height: 100%; width: 100%; padding:1rem ; border-radius: 1rem; font-size: large;"
|
||||||
|
:model-value="code"
|
||||||
|
@update:model-value="dataUpdated"
|
||||||
|
:extensions="extensions"
|
||||||
|
:disabled="config.disabled"
|
||||||
|
/>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
@@ -39,4 +39,3 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped></style>
|
<style scoped></style>
|
||||||
|
|
||||||
|
|||||||
@@ -0,0 +1,22 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
|
||||||
|
import InsertTemplateComponent from '@components/common/InsertTemplateComponent.vue'
|
||||||
|
|
||||||
|
const props = defineProps(
|
||||||
|
{
|
||||||
|
prettyName: {type: String, required: true}
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
const emit = defineEmits(['update:defaultData'])
|
||||||
|
|
||||||
|
function setDefault(data: string) {
|
||||||
|
const emitName = "update:defaultData";
|
||||||
|
emit(emitName, data)
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
|
||||||
|
</template>
|
||||||
@@ -54,7 +54,6 @@ function changeAvailableVersions() {
|
|||||||
changeAvailableVersionsOfXSLT();
|
changeAvailableVersionsOfXSLT();
|
||||||
else if (props.tool == "xsd")
|
else if (props.tool == "xsd")
|
||||||
versionsForCurrentEngine.value = ["N/A"];
|
versionsForCurrentEngine.value = ["N/A"];
|
||||||
|
|
||||||
else if (props.tool == "xpath")
|
else if (props.tool == "xpath")
|
||||||
changeAvailableVersionsOfXPath();
|
changeAvailableVersionsOfXPath();
|
||||||
|
|
||||||
|
|||||||
83
Frontend/src/components/xml/XmlToolComponent.vue
Normal file
83
Frontend/src/components/xml/XmlToolComponent.vue
Normal file
@@ -0,0 +1,83 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { onMounted, ref, watch } from 'vue';
|
||||||
|
|
||||||
|
const xml = ref('');
|
||||||
|
const transform = ref('');
|
||||||
|
const transformPlaceholder = ref('');
|
||||||
|
const engine = ref('');
|
||||||
|
const result = ref('');
|
||||||
|
|
||||||
|
const activeXmlTool = ref('');
|
||||||
|
|
||||||
|
async function submit() {
|
||||||
|
const engineEndpoint = engine.value == "libxml" ? "libxml" : "java";
|
||||||
|
const url = document.location.protocol + "//" + document.location.hostname + "/" + engineEndpoint + "/" + activeXmlTool.value;
|
||||||
|
|
||||||
|
var version = "1.0";
|
||||||
|
if (engine.value == "saxon")
|
||||||
|
version = "3.0"
|
||||||
|
|
||||||
|
var requestBody = JSON.stringify({
|
||||||
|
"data": xml.value,
|
||||||
|
"process": transform.value,
|
||||||
|
"processor": engine.value,
|
||||||
|
"version": version
|
||||||
|
});
|
||||||
|
|
||||||
|
var request = new Request(url, {
|
||||||
|
body: requestBody,
|
||||||
|
method: "POST"
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
var responseBody = await fetch(request)
|
||||||
|
.then(response => response.json())
|
||||||
|
.then((body) => body);
|
||||||
|
|
||||||
|
result.value = responseBody.result;
|
||||||
|
}
|
||||||
|
|
||||||
|
watch(activeXmlTool, (tool) => {
|
||||||
|
if (tool == "xpath")
|
||||||
|
transformPlaceholder.value = "XPath";
|
||||||
|
if (tool == "xsd")
|
||||||
|
transformPlaceholder.value = "XSD";
|
||||||
|
if (tool == "xslt")
|
||||||
|
transformPlaceholder.value = "XSLT";
|
||||||
|
if (tool == "xquery")
|
||||||
|
transformPlaceholder.value = "XQuery";
|
||||||
|
|
||||||
|
transform.value = "";
|
||||||
|
})
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
activeXmlTool.value = "xpath";
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<label for="xpath">XPath</label>
|
||||||
|
<input v-model="activeXmlTool" type="radio" id="xpath" name="xmltool" value="xpath" />
|
||||||
|
|
||||||
|
<label for="xslt">XSLT</label>
|
||||||
|
<input v-model="activeXmlTool" type="radio" id="xslt" name="xmltool" value="xslt" />
|
||||||
|
|
||||||
|
<label for="xsd">XSD</label>
|
||||||
|
<input v-model="activeXmlTool" type="radio" id="xsd" name="xmltool" value="xsd" />
|
||||||
|
|
||||||
|
<label for="xquery">XQuery</label>
|
||||||
|
<input v-model="activeXmlTool" type="radio" id="xquery" name="xmltool" value="xquery" />
|
||||||
|
<br /><br />
|
||||||
|
<select name="engine" v-model="engine">
|
||||||
|
<option value="saxon" selected>Saxon</option>
|
||||||
|
<option value="xalan">Xalan</option>
|
||||||
|
<option value="libxml">libXML</option>
|
||||||
|
</select>
|
||||||
|
<br />
|
||||||
|
<textarea v-model="xml" id="xml" placeholder="XML"></textarea>
|
||||||
|
<textarea v-model="transform" id="transform" :placeholder="transformPlaceholder"></textarea><br />
|
||||||
|
<button @click="submit">Submit</button><br />
|
||||||
|
<pre><code>{{ result }}</code></pre>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped></style>
|
||||||
@@ -1,6 +1,10 @@
|
|||||||
{
|
{
|
||||||
"data": "<people><person><name>John</name><age>67</age></person><person><name>Anna</name><age>69</age></person></people>",
|
"data": "<people><person><name>John</name><age>67</age></person><person><name>Anna</name><age>69</age></person></people>",
|
||||||
|
<<<<<<< HEAD
|
||||||
|
"process": "for $x in //person return string($x/name)",
|
||||||
|
=======
|
||||||
"processorData": "for $x in //person return string($x/name)",
|
"processorData": "for $x in //person return string($x/name)",
|
||||||
|
>>>>>>> 307e732608fca31b60027b417412691ff0e1c2f0
|
||||||
"processor": "saxon",
|
"processor": "saxon",
|
||||||
"version": "3.1"
|
"version": "3.1"
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user