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

Implemented working XSLT tool

Browse Source
This commit is contained in:
Adam Bem
2023-06-16 11:04:37 +02:00
parent f9a4cd52e4
commit bd16c04081
9 changed files with 119 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
Frontend/package-lock.json generated
View File

@@ -8,6 +8,7 @@
"name": "new-frontend",
"version": "0.0.0",
"dependencies": {
"hljs": "^6.2.3",
"vue": "^3.3.4",
"vue-router": "^4.2.2"
},
@@ -2356,6 +2357,14 @@
"he": "bin/he"
}
},
"node_modules/hljs": {
"version": "6.2.3",
"resolved": "https://registry.npmjs.org/hljs/-/hljs-6.2.3.tgz",
"integrity": "sha512-2vtAOX8kI7WO4/19XPFl7WJauIGsOxZkD+6LLmDWx6IQsPvxjnqqFsJlfg+wkghrb5I59OS5oeqGU7Ihbp+oOw==",
"engines": {
"node": "*"
}
},
"node_modules/hosted-git-info": {
"version": "2.8.9",
"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz",

1
Frontend/package.json
View File

@@ -12,6 +12,7 @@
"format": "prettier --write src/"
},
"dependencies": {
"hljs": "^6.2.3",
"vue": "^3.3.4",
"vue-router": "^4.2.2"
},

2
Frontend/src/App.vue
View File

@@ -6,7 +6,7 @@ import SidebarComponent from '@components/sidebar/SidebarComponent.vue';
</script>
<template>
<div id="layout" class="flex bg-gradient-to-r from-white to-blue-200 dark:bg-gradient-to-r dark:from-slate-800 dark:to-indigo-950">
<div id="layout" class="flex bg-gradient-to-br from-white to-blue-200 dark:from-slate-800 dark:to-indigo-950">
<SidebarComponent />
<div class="relative p-6 w-full m-4 bg-indigo-50 dark:bg-gray-700 rounded-2xl shadow-md">
<RouterView></RouterView>

28
Frontend/src/components/xml/XmlInputFieldComponent.vue
View File

@@ -1,23 +1,37 @@
<script setup lang="ts">
import xmlInputFieldToolbarComponent from '@/components/xml/XmlInputFieldToolbarComponent.vue';
import { ref } from 'vue';
const xml = ref('')
const query = ref('')
const props = defineProps(
{
transformationName: {type: String},
prettyName: {type: String, required: true},
xmlData: {type: String},
}
)
const emit = defineEmits(['update:xml', 'update:transform'])
function sendXml() {
emit('update:xml', xml.value)
}
function sendTransform() {
emit('update:transform', query.value)
}
</script>
<template>
<div class="flex flex-col w-full h-full items-center gap-4">
<div class="w-full">
<xmlInputFieldToolbarComponent prettyName="XML" fieldName="xml"></xmlInputFieldToolbarComponent>
<textarea id="xmlfield" class="w-full dark:bg-gray-600 border border-slate-400 rounded-md"></textarea>
<div class="flex flex-col w-full h-1/2">
<xmlInputFieldToolbarComponent prettyName="XML"></xmlInputFieldToolbarComponent>
<textarea id="xmlField" v-model="xml" @input="sendXml()" class="w-full h-full dark:text-slate-100 dark:bg-gray-600 border border-slate-400 p-2 rounded-md"></textarea>
</div>
<div class="w-full">
<xmlInputFieldToolbarComponent prettyName="XSLT" fieldName="xslt"></xmlInputFieldToolbarComponent>
<textarea id="transformField" class="w-full dark:bg-gray-600 border border-slate-400 rounded-md"></textarea>
<div class="flex flex-col w-full h-1/2">
<xmlInputFieldToolbarComponent :prettyName="$props.prettyName"></xmlInputFieldToolbarComponent>
<textarea id="transformField" v-model="query" @input="sendTransform()" class="w-full h-full dark:text-slate-100 dark:bg-gray-600 border border-slate-400 p-2 rounded-md"></textarea>
</div>
</div>
</template>

4
Frontend/src/components/xml/XmlInputFieldToolbarComponent.vue
View File

@@ -2,8 +2,7 @@
const props = defineProps(
{
prettyName: {type: String, required: true},
fieldName: {type: String, required: true},
prettyName: {type: String, required: true}
}
)
@@ -14,7 +13,6 @@ const props = defineProps(
<span class="dark:text-white">{{ prettyName }}</span>
<div class="flex space-x-2">
<button class="tool-button">Insert default {{ prettyName }}</button>
<button class="tool-button">Clear</button>
</div>
</div>

19
Frontend/src/components/xml/XmlOutputFieldComponent.vue
View File

@@ -1,20 +1,31 @@
<script setup lang="ts">
import xmlOutputFieldToolbarComponent from '@/components/xml/XmlOutputFieldToolbarComponent.vue';
import { resourceUsage } from 'process';
import { ref } from 'vue';
const props = defineProps(
{
transformationName: {type: String},
tool: {type: String, required: true},
xml: {type: String},
query: {type: String}
}
)
const result = ref('');
function parseResult(data: any) {
console.log(data.result);
result.value = data.result;
}
</script>
<template>
<div class="flex flex-col w-full h-full items-center">
<xmlOutputFieldToolbarComponent field-name="result"></xmlOutputFieldToolbarComponent>
<div class="w-full h-max p-2 border border-slate-400 rounded-md text-left">
<pre ><code>&lt;test&gt;fsdafdsa&lt;/test&gt;</code></pre>
<xmlOutputFieldToolbarComponent class="grow-0" :xml="$props.xml" :query="$props.query" :tool="$props.tool" @update:result="(data) => parseResult(data)"></xmlOutputFieldToolbarComponent>
<div class="w-full h-full p-2 border border-slate-400 rounded-md text-left bg-white dark:text-slate-100 dark:bg-gray-600">
<pre><code>{{ result }}</code></pre>
</div>
</div>

61
Frontend/src/components/xml/XmlOutputFieldToolbarComponent.vue
View File

@@ -1,20 +1,73 @@
<script setup lang="ts">
import { ref } from 'vue';
const props = defineProps(
{
fieldName: {type: String, required: true},
tool: {type: String, required: true},
xml: {type: String},
query: {type: String},
}
)
const engine = ref('')
const emit = defineEmits(['update:result'])
function process() {
var request:Request = prepareRequest();
fetchRequest(request).then((data) => {
sendProcessedData(data);
})
}
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": "3.0"
});
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())
.then((body) => body);
return responseBody;
}
function sendProcessedData(data: any) {
emit("update:result", data);
}
</script>
<template>
<div class="flex place-content-between w-full h-full items-center m-2">
<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">
<button class="tool-button">Process</button>
<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>
</select>
<button class="tool-button">Clear</button>
<button class="tool-button" @click="process">Process</button>
</div>
</div>

4
Frontend/src/style.css
View File

@@ -1,3 +1,7 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
.tool-button {
@apply py-1 px-4 rounded-full bg-gradient-to-r from-blue-300 to-sky-200 dark:text-white dark:from-blue-700 dark:to-indigo-800 hover:bg-blue-400
}

17
Frontend/src/views/XSLTView.vue
View File

@@ -1,15 +1,18 @@
<script lang="ts">
<script setup lang="ts">
import xmlInputFieldComponent from '@/components/xml/XmlInputFieldComponent.vue';
import xmlOutputFieldComponent from '@/components/xml/XmlOutputFieldComponent.vue';
import { ref } from 'vue';
export default {
name: "XSLT",
components: {xmlInputFieldComponent}
}
const xml = ref('');
const query = ref('');
</script>
<template>
<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>
<xmlInputFieldComponent transformationName="XSLT"></xmlInputFieldComponent>
<xmlOutputFieldComponent tool="xslt" :xml="xml" :query="query"></xmlOutputFieldComponent>
</div>
</template>