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

Implemented XML Formatter and simplified structure of XML tools (#229)

Browse Source 
Co-authored-by: Adam Bem <adam.bem@zoho.eu>
Reviewed-on: #229
Reviewed-by: Mikolaj Widla <widlam@noreply.example.com>
This commit is contained in:
Adam Bem
2023-06-21 14:32:00 +02:00
parent 3c79bddde3
commit f16639b45e
28 changed files with 573 additions and 329 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
Frontend/src/components/common/InsertTemplateComponent.vue Normal file
View File

@@ -0,0 +1,47 @@
<script setup lang="ts">
import sampleXML from "@/assets/sampleXml.xml?raw"
import sampleXSLT from "@/assets/sampleXslt.xml?raw"
import sampleXSD from "@/assets/sampleXsd.xml?raw"
import sampleXQuery from "@/assets/sampleXQuery.xquery?raw"
const props = defineProps(
{
stylizedName: {type: String, required: true}
}
)
const emit = defineEmits(['update:defaultData'])
function setDefault() {
const emitName = "update:defaultData";
switch (props.stylizedName.toLowerCase()) {
case "json":
emit(emitName, "{'message': 'Here we have to add some proper message', 'answer': 'Ya, definitely'}")
break;
case "xpath":
emit(emitName, "/u:root/u:UserList/u:User[../u:NameList = 'FirstList']")
break;
case "xsd":
emit(emitName, sampleXSD)
break;
case "xslt":
emit(emitName, sampleXSLT)
break;
case "xquery":
emit(emitName, sampleXQuery)
break;
default:
emit(emitName, sampleXML)
break;
}
}
</script>
<template>
<button class="tool-button" @click="setDefault()">Default {{ stylizedName }}</button>
</template>

10
Frontend/src/components/formatter/FormatterComponent.vue
View File

@@ -1,10 +0,0 @@
<script setup lang="ts">
</script>
<template>
<h1>Formatter</h1>
</template>
<style scoped></style>

54
Frontend/src/components/formatter/JsonButtonFormatterComponent.vue Normal file
View File

@@ -0,0 +1,54 @@
<script setup lang="ts">
const props = defineProps({
json: {type: String, required: true},
isMinimizer: {type: Boolean}
})
const emit = defineEmits(["update:result"])
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 {
var mode = "formatting";
if (props.isMinimizer)
mode = "minimize";
return document.location.protocol + "//" + document.location.hostname + "/java/json/" + mode;
}
function prepareRequestBody():string {
var requestBody = props.json;
return requestBody;
}
async function fetchRequest(request: Request):Promise<JSON> {
var responseBody = await fetch(request)
.then(response => response.json())
.then((body) => body);
console.log(responseBody);
return responseBody;
}
function sendProcessedData(data: JSON) {
emit("update:result", data);
}
</script>
<template>
<button class="tool-button" @click="process()">{{ props.isMinimizer ? "Minimize" : "Format" }}</button>
</template>
<style scoped></style>

58
Frontend/src/components/formatter/XMLButtonFormatterComponent.vue Normal file
View File

@@ -0,0 +1,58 @@
<script setup lang="ts">
const props = defineProps({
xml: {type: String, required: true},
isMinimizer: {type: Boolean}
})
const emit = defineEmits(["update:result"])
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 {
var mode = "prettify";
if (props.isMinimizer)
mode = "minimize";
return document.location.protocol + "//" + document.location.hostname + "/libxml/" + mode;
}
function prepareRequestBody():string {
var requestBody = JSON.stringify({
"data": props.xml,
"process": "N/A",
"processor": "libxml",
"version": "1.0"
});
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>
<button class="tool-button" @click="process()">{{ props.isMinimizer ? "Minimize" : "Format" }}</button>
</template>
<style scoped></style>

11
Frontend/src/components/landing/LandingComponent.vue
View File

@@ -3,7 +3,16 @@
</script>
<template>
<h1 class="text-3xl underline">Landing</h1>
<div class="dark:text-slate-100">
<h1 class="text-3xl mb-4">Welcome to Release11 Tools</h1>
<h2 class="text-xl">Our toolset is split to three main categories:</h2>
<ol class="list-decimal ml-5">
<li><strong>XML</strong> - containing various tools that allow to validate and transform any XML</li>
<li><strong>Formatter</strong> - containing tools for formatting text files in various formats</li>
<li><strong>REST</strong> - consist of Mock that allows to create mocked REST endpoint</li>
</ol>
</div>
</template>
<style scoped></style>

15
Frontend/src/components/sidebar/FooterComponent.vue Normal file
View File

@@ -0,0 +1,15 @@
<script setup lang="ts">
</script>
<template>
<div class="flex flex-col gap-4 text-center font-thin text-slate-600 dark:text-slate-400 ">
<div class="flex flex-col">
<a href="mailto:bugs@release11.com">Found a bug?</a>
<a href="#" class="hidden">Privacy Policy</a>
</div>
<span>Copyright 2023 <br/> Release11</span>
</div>
</template>

12
Frontend/src/components/sidebar/SidebarComponent.vue
View File

@@ -2,6 +2,7 @@
import { ref , onMounted} from 'vue'
import SidebarToolLinkComponent from './SidebarToolLinkComponent.vue';
import SidebarMenuElementComponent from './SidebarMenuElementComponent.vue';
import FooterComponent from './FooterComponent.vue';
import logoDark from '@assets/logo_biale.svg';
import logoWhite from '@assets/logo_czarne.svg';
@@ -24,11 +25,11 @@ onMounted( () => {
<template>
<aside class="relative flex-shrink-0 top-0 left-0 z-40 w-48 h-screen" >
<div class="h-full px-3 pt-2 pb-4 overflow-y-auto">
<div class="flex flex-col h-full px-3 pt-2 pb-4 overflow-y-auto">
<a href="https://release11.com/">
<img :src="logoR11" class="w-72 h-16 p-2 pt-0"/>
</a>
<div class="flex flex-col font-medium items-center">
<div class="flex basis-full flex-col font-medium items-center">
<sidebar-menu-element-component category-name="XML">
<SidebarToolLinkComponent path-to="/xml/xpath" element-content="XPath" />
<SidebarToolLinkComponent path-to="/xml/xquery" element-content="XQuery" />
@@ -37,9 +38,9 @@ onMounted( () => {
</sidebar-menu-element-component>
<sidebar-menu-element-component category-name="Formatter">
<SidebarToolLinkComponent path-to="/format/HTML" element-content="HTML Formatter" />
<SidebarToolLinkComponent path-to="/format/JSON" element-content="JSON Formatter" />
<SidebarToolLinkComponent path-to="/format/XML" element-content="XML Formatter" />
<SidebarToolLinkComponent path-to="/format/HTML" element-content="HTML" />
<SidebarToolLinkComponent path-to="/format/JSON" element-content="JSON" />
<SidebarToolLinkComponent path-to="/format/XML" element-content="XML" />
</sidebar-menu-element-component>
@@ -48,6 +49,7 @@ onMounted( () => {
</sidebar-menu-element-component>
</div>
<FooterComponent></FooterComponent>
</div>
</aside>
</template>

2
Frontend/src/components/sidebar/SidebarMenuElementComponent.vue
View File

@@ -17,7 +17,7 @@ const props = defineProps(
<template>
<div class="w-full mb-4 p-2 rounded-xl shadow-md bg-gradient-to-r from-blue-400 to-blue-200 dark:from-sky-700 dark:to-sky-900">
<div class="w-full mb-4 p-2 rounded-xl shadow-lg bg-gradient-to-r from-blue-400 to-blue-300 dark:from-sky-700 dark:to-sky-900">
<button @click="switchHiddenElement()" type="button" :class="[isActive ? 'rounded-lg' : 'rounded-lg']" class="w-full p-2 text-lg font-bold text-gray-900 transition duration-75 hover:bg-blue-100 dark:text-gray-100 dark:hover:bg-slate-600">
<span class="flex-1 whitespace-nowrap">{{props.categoryName}}</span>
</button>

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

@@ -1,47 +1,49 @@
<script setup lang="ts">
import xmlInputFieldToolbarComponent from '@/components/xml/XmlInputFieldToolbarComponent.vue';
import InsertTemplateComponent from '@components/common/InsertTemplateComponent.vue';
import XMLButtonFormatterComponent from '@components/formatter/XMLButtonFormatterComponent.vue'
import { ref } from 'vue';
const xml = ref('')
const query = ref('')
const data = ref('')
const props = defineProps(
{
prettyName: {type: String, required: true},
xmlData: {type: String},
stylizedName: {type: String, required: true},
data: {type: String},
}
)
const emit = defineEmits(['update:xml', 'update:transform'])
const emit = defineEmits(['update'])
function sendXml() {
emit('update:xml', xml.value)
function sendValue() {
emit('update', data.value)
}
function sendTransform() {
emit('update:transform', query.value)
function updateData(newData: string) {
data.value = newData;
sendValue();
}
function setToDefaultXML(data: string) {
xml.value = data;
sendXml();
function clear() {
updateData('');
}
function setToDefaultQuery(data: string) {
query.value = data;
sendTransform();
function canBeFormatted() {
return props.stylizedName.toLowerCase() == 'xml' ||
props.stylizedName.toLowerCase() == 'xsd' ||
props.stylizedName.toLowerCase() == 'xslt';
}
</script>
<template>
<div class="flex flex-col w-full lg:w-1/2 h-full items-center gap-4">
<div class="flex flex-col w-full h-1/2">
<xmlInputFieldToolbarComponent prettyName="XML" @update:defaultData="(data) => setToDefaultXML(data)"></xmlInputFieldToolbarComponent>
<textarea id="xmlField" v-model="xml" @input="sendXml()" class="w-full h-full resize-none dark:text-slate-100 dark:bg-gray-600 border border-slate-400 p-2 rounded-md"></textarea>
</div>
<div class="flex flex-col w-full h-1/2">
<xmlInputFieldToolbarComponent :prettyName="$props.prettyName" @update:defaultData="(data) => setToDefaultQuery(data)"></xmlInputFieldToolbarComponent>
<textarea id="transformField" v-model="query" @input="sendTransform()" class="w-full h-full resize-none dark:text-slate-100 dark:bg-gray-600 border border-slate-400 p-2 rounded-md"></textarea>
<div class="flex flex-col w-full h-1/2">
<div class="flex place-content-between w-full pr-2 items-center m-2">
<span class="dark:text-white">{{ stylizedName }}</span>
<div class="flex space-x-2">
<InsertTemplateComponent :stylized-name="props.stylizedName" @update:default-data="(data: string) => updateData(data)"></InsertTemplateComponent>
<XMLButtonFormatterComponent v-if="canBeFormatted()" :xml="data" @update:result="(data:any) => updateData(data.result)"></XMLButtonFormatterComponent>
<button class="tool-button" @click="clear">Clear</button>
</div>
</div>
<textarea id="xmlField" v-model="data" @input="sendValue()" class="text-field"></textarea>
</div>
</template>

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

@@ -1,10 +1,6 @@
<script setup lang="ts">
import sampleXML from "@/assets/sampleXml.xml?raw"
import sampleXSLT from "@/assets/sampleXslt.xml?raw"
import sampleXSD from "@/assets/sampleXsd.xml?raw"
import sampleXQuery from "@/assets/sampleXQuery.xquery?raw"
import InsertTemplateComponent from '@components/common/InsertTemplateComponent.vue'
const props = defineProps(
{
@@ -14,37 +10,13 @@ const props = defineProps(
const emit = defineEmits(['update:defaultData'])
function setDefault() {
function setDefault(data: string) {
const emitName = "update:defaultData";
switch (props.prettyName.toLowerCase()) {
case "xpath":
emit(emitName, "string(/l:library/l:libraryName)")
break;
case "xsd":
emit(emitName, sampleXSD)
break;
case "xslt":
emit(emitName, sampleXSLT)
break;
case "xquery":
emit(emitName, sampleXQuery)
break;
default:
emit(emitName, sampleXML)
break;
}
emit(emitName, data)
}
</script>
<template>
<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">
<button class="tool-button" @click="setDefault()">Insert default {{ prettyName }}</button>
</div>
</div>
</template>

129
Frontend/src/components/xml/XmlOutputFieldComponent.vue
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,18 +12,132 @@ const props = defineProps(
const result = ref('');
function parseResult(data: any) {
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];
}
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 = "";
}
</script>
<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="w-full h-full p-2 overflow-scroll border border-slate-400 rounded-md text-left bg-white dark:text-slate-100 dark:bg-gray-600">
<pre class="break-words"><code>{{ result }}</code></pre>
<div class="flex flex-col w-full lg:w-1/2 h-1/2 lg:h-full items-center">
<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" @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" 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="text-field overflow-scroll h-full w-full">
<pre class="whitespace-pre-wrap"><code>{{ result }}</code></pre>
</div>
</div>
</template>
</template>

112
Frontend/src/components/xml/XmlOutputFieldToolbarComponent.vue
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>