Resolved merge conflict
This commit is contained in:
5
Frontend/src/components/common/TabData.ts
Normal file
5
Frontend/src/components/common/TabData.ts
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
export interface TabData {
|
||||||
|
id: number;
|
||||||
|
name: string;
|
||||||
|
data: string;
|
||||||
|
}
|
||||||
@@ -1,12 +1,15 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { onMounted, ref } from 'vue';
|
import { onMounted, ref } from 'vue';
|
||||||
|
import { type TabData } from '../common/TabData'
|
||||||
import CodeEditor from '../CodeEditorComponent.vue';
|
import CodeEditor from '../CodeEditorComponent.vue';
|
||||||
|
import { xml } from '@codemirror/lang-xml';
|
||||||
|
|
||||||
|
|
||||||
const props = defineProps(
|
const props = defineProps(
|
||||||
{
|
{
|
||||||
tool: {type: String, required: true},
|
tool: {type: String, required: true},
|
||||||
xml: {type: String},
|
xml: {type: String, required: false},
|
||||||
|
multiXml: {type: Array<TabData>, required: false},
|
||||||
query: {type: String}
|
query: {type: String}
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
@@ -90,28 +93,71 @@ function process() {
|
|||||||
|
|
||||||
function prepareRequest():Request {
|
function prepareRequest():Request {
|
||||||
var request = new Request(prepareURL(), {
|
var request = new Request(prepareURL(), {
|
||||||
body: prepareRequestBody(),
|
body: selectRequestBodyType(),
|
||||||
method: "POST"
|
method: "POST"
|
||||||
});
|
});
|
||||||
return request
|
return request
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function prepareURL(): string {
|
function prepareURL(): string {
|
||||||
const engineEndpoint = engine.value == "libxml" ? "libxml" : "java";
|
const engineEndpoint = engine.value == "libxml" ? "libxml" : "java";
|
||||||
return document.location.protocol + "//" + document.location.hostname + "/" + engineEndpoint + "/" + props.tool;
|
|
||||||
|
var tool = props.tool;
|
||||||
|
if (props.multiXml && props.multiXml.length > 1)
|
||||||
|
tool = "multiple/xslt";
|
||||||
|
|
||||||
|
return document.location.protocol + "//" + document.location.hostname + "/" + engineEndpoint + "/" + tool;
|
||||||
}
|
}
|
||||||
|
|
||||||
function prepareRequestBody():string {
|
function selectRequestBodyType() : string {
|
||||||
|
if (props.multiXml && props.multiXml.length > 1)
|
||||||
|
return prepareRequestBodyMultiXml();
|
||||||
|
else if (props.multiXml)
|
||||||
|
return prepareRequestBodySingleXml(props.multiXml.at(0)!.data);
|
||||||
|
else
|
||||||
|
return prepareRequestBodySingleXml(props.xml!);
|
||||||
|
}
|
||||||
|
|
||||||
|
function prepareRequestBodySingleXml(data: string):string {
|
||||||
var requestBody = JSON.stringify({
|
var requestBody = JSON.stringify({
|
||||||
"data": props.xml,
|
"data": data,
|
||||||
"processorData": props.query,
|
"processorData": props.query,
|
||||||
"processor": engine.value,
|
"processor": engine.value,
|
||||||
"version": version.value
|
"version": version.value
|
||||||
});
|
});
|
||||||
console.log(requestBody)
|
|
||||||
return requestBody;
|
return requestBody;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function prepareRequestBodyMultiXml():string {
|
||||||
|
var xmlFilesArray = convertDataArray(props.multiXml!);
|
||||||
|
|
||||||
|
var requestBody = JSON.stringify({
|
||||||
|
"data": xmlFilesArray,
|
||||||
|
"processorData": props.query,
|
||||||
|
"processor": engine.value,
|
||||||
|
"version": version.value
|
||||||
|
});
|
||||||
|
return requestBody;
|
||||||
|
}
|
||||||
|
|
||||||
|
function convertDataArray(data: Array<TabData>) {
|
||||||
|
let result = new Array<Object>;
|
||||||
|
data.forEach(element => {
|
||||||
|
let fileName = element.name;
|
||||||
|
if (!fileName.endsWith(".xml")) {
|
||||||
|
fileName += ".xml";
|
||||||
|
}
|
||||||
|
|
||||||
|
result.push({
|
||||||
|
fileName: fileName,
|
||||||
|
fileData: element.data,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
|
||||||
async function fetchRequest(request: Request):Promise<JSON> {
|
async function fetchRequest(request: Request):Promise<JSON> {
|
||||||
var responseBody = await fetch(request)
|
var responseBody = await fetch(request)
|
||||||
.then(response => response.json())
|
.then(response => response.json())
|
||||||
|
|||||||
@@ -2,12 +2,12 @@
|
|||||||
import TabComponent from './TabComponent.vue'
|
import TabComponent from './TabComponent.vue'
|
||||||
import InsertTemplateComponent from '@components/common/InsertTemplateComponent.vue'
|
import InsertTemplateComponent from '@components/common/InsertTemplateComponent.vue'
|
||||||
import XMLButtonFormatterComponent from '@components/formatter/XMLButtonFormatterComponent.vue'
|
import XMLButtonFormatterComponent from '@components/formatter/XMLButtonFormatterComponent.vue'
|
||||||
|
import { type TabData } from '../common/TabData'
|
||||||
import { ref } from 'vue'
|
import { ref } from 'vue'
|
||||||
import CodeEditor from '../CodeEditorComponent.vue'
|
import CodeEditor from '../CodeEditorComponent.vue'
|
||||||
|
|
||||||
const newTabId = ref(0);
|
const newTabId = ref(0);
|
||||||
const activeTabId = ref(0);
|
const activeTabId = ref(0);
|
||||||
const prevActiveTabId = ref(-1);
|
|
||||||
|
|
||||||
const tabs = ref(new Array<TabData>);
|
const tabs = ref(new Array<TabData>);
|
||||||
tabs.value.push({
|
tabs.value.push({
|
||||||
@@ -22,28 +22,26 @@ const inputFile = ref()
|
|||||||
const props = defineProps(
|
const props = defineProps(
|
||||||
{
|
{
|
||||||
stylizedName: {type: String, required: true},
|
stylizedName: {type: String, required: true},
|
||||||
data: {type: String},
|
data: {type: Array<TabData>},
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
const emit = defineEmits(['update'])
|
const emit = defineEmits(['update'])
|
||||||
|
|
||||||
interface TabData {
|
|
||||||
id: number;
|
|
||||||
name: string;
|
|
||||||
data: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
function sendValue() {
|
function sendValue() {
|
||||||
emit('update', data.value);
|
emit('update', tabs.value);
|
||||||
}
|
}
|
||||||
|
|
||||||
function sendNewValue(newValue : string) {
|
function sendNewValue(newValue : string) {
|
||||||
data.value = newValue;
|
data.value = newValue;
|
||||||
emit('update', data.value);
|
tabs.value.at(findIndexWithID(activeTabId.value))!.data = newValue;
|
||||||
|
emit('update', tabs.value);
|
||||||
}
|
}
|
||||||
|
|
||||||
function updateData(newData: string) {
|
function updateData(newData: string) {
|
||||||
data.value = newData;
|
data.value = newData;
|
||||||
|
tabs.value.at(findIndexWithID(activeTabId.value))!.data = newData;
|
||||||
inputFile.value.value = '';
|
inputFile.value.value = '';
|
||||||
sendValue();
|
sendValue();
|
||||||
}
|
}
|
||||||
@@ -81,7 +79,6 @@ function changeActiveTab(id : number) {
|
|||||||
let newIndex = findIndexWithID(id);
|
let newIndex = findIndexWithID(id);
|
||||||
|
|
||||||
tabs.value.at(index)!.data = data.value;
|
tabs.value.at(index)!.data = data.value;
|
||||||
prevActiveTabId.value = activeTabId.value;
|
|
||||||
activeTabId.value = id;
|
activeTabId.value = id;
|
||||||
data.value = tabs.value.at(newIndex)!.data;
|
data.value = tabs.value.at(newIndex)!.data;
|
||||||
|
|
||||||
|
|||||||
@@ -3,26 +3,35 @@ import xmlInputFieldComponent from '@/components/xml/XmlInputFieldComponent.vue'
|
|||||||
import xmlTabbedInputComponent from '@/components/xml/XmlTabbedInputComponent.vue';
|
import xmlTabbedInputComponent from '@/components/xml/XmlTabbedInputComponent.vue';
|
||||||
import xmlOutputFieldComponent from '@/components/xml/XmlOutputFieldComponent.vue';
|
import xmlOutputFieldComponent from '@/components/xml/XmlOutputFieldComponent.vue';
|
||||||
import TooltipComponent from '@/components/xml/tooltips/TooltipComponent.vue';
|
import TooltipComponent from '@/components/xml/tooltips/TooltipComponent.vue';
|
||||||
|
|
||||||
|
import { type TabData } from '@/components/common/TabData';
|
||||||
import { ref } from 'vue';
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
|
||||||
const xml = ref('');
|
const xml = ref(new Array<TabData>);
|
||||||
const query = ref('');
|
const query = ref('');
|
||||||
const version = ref('');
|
const version = ref('');
|
||||||
|
|
||||||
function updateVersion(newVersion: string) {
|
function updateVersion(newVersion: string) {
|
||||||
version.value = newVersion;
|
version.value = newVersion;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function updateXML(data: Array<TabData>) {
|
||||||
|
xml.value = data;
|
||||||
|
console.log("Update:" + data);
|
||||||
|
console.log(data);
|
||||||
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div id="layout" class="flex flex-row w-full h-full">
|
<div id="layout" class="flex flex-row w-full h-full">
|
||||||
<div class="flex flex-col 2xl:flex-row w-full xl:w-7/12 grow overflow-hide pr-2">
|
<div class="flex flex-col 2xl:flex-row w-full xl:w-7/12 grow overflow-hide pr-2">
|
||||||
<div class="flex flex-col w-full 2xl:w-1/2 h-2/3 2xl:h-full flex-none items-center">
|
<div class="flex flex-col w-full 2xl:w-1/2 h-2/3 2xl:h-full flex-none items-center">
|
||||||
<xmlTabbedInputComponent stylized-name="XML" :data="xml" @update="(data) => {xml = data}"></xmlTabbedInputComponent>
|
<xmlTabbedInputComponent stylized-name="XML" :data="xml" @update="updateXML"></xmlTabbedInputComponent>
|
||||||
<xmlInputFieldComponent stylized-name="XSLT" :data="query" @update="(data) => {query = data}"></xmlInputFieldComponent>
|
<xmlInputFieldComponent stylized-name="XSLT" :data="query" @update="(data) => {query = data}"></xmlInputFieldComponent>
|
||||||
</div>
|
</div>
|
||||||
<xmlOutputFieldComponent tool="xslt" :xml="xml" :query="query" @update="(version) => updateVersion(version)"></xmlOutputFieldComponent>
|
<xmlOutputFieldComponent tool="xslt" :multi-xml="xml" :query="query" @update="(version) => updateVersion(version)"></xmlOutputFieldComponent>
|
||||||
</div>
|
</div>
|
||||||
<TooltipComponent tool-type="xslt" :version="version"></TooltipComponent>
|
<TooltipComponent tool-type="xslt" :version="version"></TooltipComponent>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user