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