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

Implemented functionality

Browse Source
This commit is contained in:
Adam Bem
2023-06-19 08:08:04 +02:00
parent b7386450ae
commit 4e83da66c3
6 changed files with 142 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
Frontend/src/components/formatter/InputFormatterComponent.vue
View File

@@ -1,12 +1,18 @@
<script setup lang="ts">
import XMLButtonFormatterComponent from '@/components/formatter/XMLButtonFormatterComponent.vue';
import InsertDefaultComponent from '../xml/InsertDefaultComponent.vue';
defineProps({
inputValue: {type: String, required: true}
})
</script>
<template>
<div class="flex h-full"></div>
<textarea name="data" id="data" class="text-field"></textarea>
<div class="flex flex-col w-full h-full">
<textarea name="data" id="data" :value="$props.inputValue" class="text-field"></textarea>
</div>
</template>
<style scoped></style>

12
Frontend/src/components/formatter/ToolbarFormatterComponent.vue Normal file
View File

@@ -0,0 +1,12 @@
<script setup lang="ts">
</script>
<template>
<div class="flex h-full"></div>
<textarea name="data" id="data" class="text-field"></textarea>
</template>
<style scoped></style>

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

@@ -0,0 +1,54 @@
<script setup lang="ts">
const props = defineProps({
xml: {type: String, required: true}
})
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 {
return document.location.protocol + "//" + document.location.hostname + "/libxml/prettify";
}
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()">Format XML</button>
</template>
<style scoped></style>

44
Frontend/src/components/xml/InsertDefaultComponent.vue Normal file
View File

@@ -0,0 +1,44 @@
<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(
{
prettyName: {type: String, required: true}
}
)
const emit = defineEmits(['update:defaultData'])
function setDefault() {
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;
}
}
</script>
<template>
<button class="tool-button" @click="setDefault()">Insert default {{ prettyName }}</button>
</template>

30
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 InsertDefaultComponent from "./InsertDefaultComponent.vue"
const props = defineProps(
{
@@ -14,27 +10,9 @@ 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>
@@ -43,7 +21,7 @@ function setDefault() {
<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>
<InsertDefaultComponent :pretty-name="props.prettyName" @update:default-data="(data) => setDefault(data)"></InsertDefaultComponent>
</div>
</div>

23
Frontend/src/views/XmlFormatterView.vue
View File

@@ -1,16 +1,31 @@
<script setup lang="ts">
import InputFormatterComponent from '@/components/formatter/InputFormatterComponent.vue';
import xmlOutputFieldComponent from '@/components/xml/XmlOutputFieldComponent.vue';
import XMLButtonFormatterComponent from '@/components/formatter/XMLButtonFormatterComponent.vue';
import InsertDefaultComponent from '@components/xml/InsertDefaultComponent.vue';
import { ref } from 'vue';
const xml = ref('');
const query = ref('');
function setTextFieldValue(data: any) {
xml.value = data
}
function format(formattedXml: any) {
xml.value = formattedXml.result;
}
</script>
<template>
<div id="layout" class="flex flex-col lg:flex-row w-full h-full gap-4">
<InputFormatterComponent></InputFormatterComponent>
<div id="layout" class="flex flex-col w-full h-full gap-4">
<div id="toolbar" class= "flex flex-col gap-4 items-center md:flex-row place-content-between">
<span class="dark:text-slate-100">XML Formatter</span>
<div class="space-x-2">
<InsertDefaultComponent pretty-name="XML" @update:defaultData="(data: any) => setTextFieldValue(data)"></InsertDefaultComponent>
<XMLButtonFormatterComponent :xml="xml" @update:result="(data: any) => format(data)"></XMLButtonFormatterComponent>
</div>
</div>
<InputFormatterComponent :inputValue="xml"></InputFormatterComponent>
</div>
</template>