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

File uploading and fixes (#261)

Browse Source 
Reviewed-on: #261
Reviewed-by: Mikolaj Widla <widlam@noreply.example.com>
Co-authored-by: Adam Bem <adam.bem@zoho.eu>
Co-committed-by: Adam Bem <adam.bem@zoho.eu>
This commit is contained in:
Adam Bem
2023-11-06 11:17:42 +01:00
committed by Adam Bem
parent 1913c292d2
commit 5febb10d22
24 changed files with 155 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
Frontend/src/components/formatter/XMLButtonFormatterComponent.vue
View File

@@ -8,9 +8,9 @@ const props = defineProps({
const emit = defineEmits(["update:result"])
function process() {
var request:Request = prepareRequest();
var request:Request = prepareRequest()
fetchRequest(request).then((data) => {
sendProcessedData(data);
sendProcessedData(data)
})
}
@@ -18,36 +18,36 @@ function prepareRequest():Request {
var request = new Request(prepareURL(), {
body: prepareRequestBody(),
method: "POST"
});
})
return request
}
function prepareURL(): string {
var mode = "prettify";
var mode = "prettify"
if (props.isMinimizer)
mode = "minimize";
return document.location.protocol + "//" + document.location.hostname + "/libxml/" + mode;
mode = "minimize"
return document.location.protocol + "//" + document.location.hostname + "/libxml/" + mode
}
function prepareRequestBody():string {
var requestBody = JSON.stringify({
"data": props.xml,
"process": "N/A",
"processorData": "N/A",
"processor": "libxml",
"version": "1.0"
});
return requestBody;
})
return requestBody
}
async function fetchRequest(request: Request):Promise<JSON> {
var responseBody = await fetch(request)
.then(response => response.json())
.then((body) => body);
return responseBody;
.then((body) => body)
return responseBody
}
function sendProcessedData(data: JSON) {
emit("update:result", data);
emit("update:result", data)
}
</script>

2
Frontend/src/components/mock/HistoryComponent.vue
View File

@@ -34,7 +34,7 @@ function showHeaders(headers: object, index: number){
<template>
<div class="w-full xl:w-2/5 flex flex-none flex-col gap-y-4">
<div class="flex flex-1 flex-col justify-items-stretch gap-y-4">
<HistoryRecords class="xl:h-1/3 overflow-y-scroll" @click:show-headers="showHeaders" @click:show-body="showBody"></HistoryRecords>
<BodyDetailComponent :content-type="currentContentType" :data="currentShownData" v-if="shownDetail == 'body' "></BodyDetailComponent>
<HeadersDetailComponent :data="currentShownData" v-if="shownDetail == 'headers' "></HeadersDetailComponent>

6
Frontend/src/components/mock/HistoryRecords.vue
View File

@@ -45,12 +45,12 @@ function refreshHistory(){
</script>
<template>
<div>
<table class="text-white h-28 w-full text-center">
<div class="h-28 text-center text-grey-900 dark:text-white">
<table class="w-full">
<tr>
<th>Time</th>
<th>HTTP Method</th>
<th>HTTP Headers</th>
<th>Headers</th>
<th>Request Body</th>
<th class="text-2xl"><button @click="refreshHistory()">⟳</button></th>
</tr>

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

@@ -29,8 +29,8 @@ onMounted( () => {
<a href="https://release11.com/">
<img :src="logoR11" class="w-72 h-16 p-2 pt-0"/>
</a>
<div class="flex basis-full flex-col font-medium items-center">
<sidebar-menu-element-component category-name="XML">
<div class="flex basis-full flex-col font-normal items-center">
<sidebar-menu-element-component category-name="Parser">
<SidebarToolLinkComponent path-to="/xml/xpath" element-content="XPath" />
<SidebarToolLinkComponent path-to="/xml/xquery" element-content="XQuery" />
<SidebarToolLinkComponent path-to="/xml/xsd" element-content="XSD" />

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

@@ -18,10 +18,10 @@ const props = defineProps(
<template>
<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">
<button @click="switchHiddenElement()" type="button" :class="[isActive ? 'rounded-lg' : 'rounded-lg']" class="w-full p-2 text-lg font-normal 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>
<div class="flex flex-col w-full py-2 bg-indigo-50 dark:bg-slate-800 rounded-xl font-thin overflow-hidden" :class="[isActive ? 'active' : 'hidden']">
<div class="flex flex-col w-full py-2 bg-indigo-50 dark:bg-slate-800 rounded-xl font-light overflow-hidden" :class="[isActive ? 'active' : 'hidden']">
<slot></slot>
</div>
</div>

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

@@ -17,6 +17,6 @@ const props = defineProps(
<style>
.router-link-active {
font-weight: 500;
font-weight: 600;
}
</style>

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

@@ -1,10 +1,11 @@
<script setup lang="ts">
import InsertTemplateComponent from '@components/common/InsertTemplateComponent.vue';
import InsertTemplateComponent from '@components/common/InsertTemplateComponent.vue'
import XMLButtonFormatterComponent from '@components/formatter/XMLButtonFormatterComponent.vue'
import { ref } from 'vue';
import CodeEditor from '../CodeEditorComponent.vue';
import { ref } from 'vue'
import CodeEditor from '../CodeEditorComponent.vue'
const data = ref('')
const inputFile = ref()
const props = defineProps(
{
@@ -15,7 +16,6 @@ const props = defineProps(
const emit = defineEmits(['update'])
function sendValue() {
console.log("input works")
emit('update', data.value)
}
@@ -25,18 +25,31 @@ function sendNewValue(newValue : string) {
}
function updateData(newData: string) {
data.value = newData;
sendValue();
data.value = newData
inputFile.value.value = ''
sendValue()
}
function clear() {
updateData('');
updateData('')
}
function canBeFormatted() {
return props.stylizedName.toLowerCase() == 'xml' ||
props.stylizedName.toLowerCase() == 'xsd' ||
props.stylizedName.toLowerCase() == 'xslt';
props.stylizedName.toLowerCase() == 'xslt'
}
function readFile(file : any) {
const reader = new FileReader()
reader.onloadend = () => {
var result = reader.result?.toString()
if (typeof result == "string")
sendNewValue(result)
}
reader.readAsText(file.target.files[0])
}
</script>
@@ -44,8 +57,12 @@ function canBeFormatted() {
<template>
<div class="flex flex-col w-full h-1/2 lg:h-1/2 flex-none pr-4 pb-2">
<div class="flex place-content-between w-full items-center">
<span class="dark:text-white">{{ stylizedName }}</span>
<div class="flex space-x-2 pb-2">
<span class="dark:text-white mr-2">{{ stylizedName }}</span>
<div class="flex space-x-2 pb-2 overflow-x-scroll">
<div class="flex items-stretch w-64">
<input id="fileLoader" ref="inputFile" class="file-selector" type="file" accept=".xml,.xql,.xquery,.xslt,text/xml,text/plain" @change="readFile" />
</div>
<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>

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

@@ -1,22 +0,0 @@
<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>

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

@@ -47,6 +47,7 @@ function changeAvailableVersions() {
changeAvailableVersionsOfXSLT();
else if (props.tool == "xsd")
versionsForCurrentEngine.value = ["N/A"];
else if (props.tool == "xpath")
changeAvailableVersionsOfXPath();
@@ -72,7 +73,7 @@ function selectDefaultEngine() {
}
function selectDefaultVersion() {
const lastVersion = versionsForCurrentEngine.value.length - 1
const lastVersion = versionsForCurrentEngine.value.length - 1;
version.value = versionsForCurrentEngine.value[lastVersion];
emitVersionChange();
}
@@ -126,17 +127,21 @@ function emitVersionChange() {
emit("update", version.value);
}
function isVersionSelectionAvailable() {
return !(props.tool == "xsd");
}
</script>
<template>
<div class="flex flex-col flex-none w-full lg:w-1/2 h-1/3 lg:h-full items-center pb-2 pr-2">
<div class="flex flex-col flex-none w-full 2xl:w-1/2 h-1/3 2xl:h-full items-center pb-2 pr-2">
<div class="flex place-content-between w-full items-center pb-2">
<span class="dark:text-white">Result:</span>
<div class="flex space-x-2">
<div class="flex space-x-2 overflow-x-scroll">
<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" @change="emitVersionChange()" class="px-3 rounded-full border border-slate-400 bg-white dark:text-slate-100 dark:bg-gray-600">
<select v-model="version" v-if="isVersionSelectionAvailable()" name="version" @change="emitVersionChange()" 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>

2
Frontend/src/components/xml/tooltips/TooltipComponent.vue
View File

@@ -58,7 +58,7 @@ function toggleTooltips() {
</script>
<template>
<div :class="areTooltipsHidden ? 'w-fit' : 'w-4/12'" class="hidden 2xl:flex shrink-0 items-stretch p-2 flex-row rounded-xl shadow-lg bg-gradient-to-r from-blue-400 to-blue-300 dark:from-sky-600 dark:to-sky-800 ">
<div :class="areTooltipsHidden ? 'w-fit' : 'w-[26rem]'" class="hidden xl:flex shrink-0 items-stretch p-2 flex-row rounded-xl shadow-lg bg-gradient-to-r from-blue-400 to-blue-300 dark:from-sky-600 dark:to-sky-800 ">
<button :class="{'mr-2' : !areTooltipsHidden }" class="text-xl w-6 dark:text-slate-100" @click="toggleTooltips()">
T<br/>o<br/>o<br/>l<br/>t<br/>i<br/>p<br/>s
</button>

26
Frontend/src/components/xml/tooltips/TooltipDiffsComponent.vue
View File

@@ -12,19 +12,19 @@ const props = defineProps({
function getDiffEntry(toolVersion : String) : string[] {
if ( props.toolName == "xpath" ){
switch(toolVersion){
case "2.0" : {
return xpathDiffs.VersionDiffs[0].diffs
case "2.0" : {
return xpathDiffs.VersionDiffs[0].diffs
}
case "3.0" : {
return xpathDiffs.VersionDiffs[1].diffs
}
case "3.1" : {
return xpathDiffs.VersionDiffs[2].diffs
}
default: {
return xpathDiffs.VersionDiffs[2].diffs
}
}
case "3.0" : {
return xpathDiffs.VersionDiffs[1].diffs
}
case "3.1" : {
return xpathDiffs.VersionDiffs[2].diffs
}
default: {
return xpathDiffs.VersionDiffs[2].diffs
}
}
} else if (props.toolName == "xslt") {
return ["XSLT 2.0"].concat(xsltDiffs.VersionDiffs[0].diffs).concat(["XSLT 3.0"]).concat(xsltDiffs.VersionDiffs[1].diffs) ;
} else{
@@ -56,7 +56,7 @@ function getInfo(num : number ){
</span>
</TooltipCategoryComponent>
<TooltipCategoryComponent v-if="toolVersion !== '1.0'" :name="getInfo(1).category">
<TooltipCategoryComponent v-if="toolVersion !== '1.0'" :name="getInfo(1).category + ' ' + toolVersion + '?'">
<span v-for=" diff in getDiffEntry(toolVersion)" v-bind:key="diff" class=" text-justify" >
<div class="w-full h-4 text-center" v-if="diff.includes('XSLT')">
------------ {{ diff }} ------------