Added new endpoint handling
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"> | ||||
| import { onMounted, ref } from 'vue'; | ||||
| import { type TabData } from '../common/TabData' | ||||
| import CodeEditor from '../CodeEditorComponent.vue'; | ||||
| import { xml } from '@codemirror/lang-xml'; | ||||
|  | ||||
|  | ||||
| const props = defineProps( | ||||
|     { | ||||
|         tool: {type: String, required: true}, | ||||
|         xml: {type: String}, | ||||
|         xml: {type: String, required: false}, | ||||
|         multiXml: {type: Array<TabData>, required: false}, | ||||
|         query: {type: String} | ||||
|     } | ||||
| ) | ||||
| @@ -90,27 +93,73 @@ function process() { | ||||
|  | ||||
| function prepareRequest():Request { | ||||
|     var request = new Request(prepareURL(), { | ||||
|         body: prepareRequestBody(), | ||||
|         body: selectRequestBodyType(), | ||||
|         method: "POST" | ||||
|     }); | ||||
|     return request | ||||
|      | ||||
| } | ||||
|  | ||||
| function prepareURL(): string { | ||||
|    const engineEndpoint = engine.value == "libxml" ? "libxml" : "java"; | ||||
|    return document.location.protocol + "//" + document.location.hostname + "/" + engineEndpoint + "/" + props.tool; | ||||
|     const engineEndpoint = engine.value == "libxml" ? "libxml" : "java"; | ||||
|     | ||||
|     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({ | ||||
|         "data": props.xml, | ||||
|         "data": data, | ||||
|         "processorData": props.query, | ||||
|         "processor": engine.value, | ||||
|         "version": version.value | ||||
|     }); | ||||
|     console.log(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 | ||||
|     }); | ||||
|     console.log(requestBody); | ||||
|     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> { | ||||
|     var responseBody = await fetch(request) | ||||
|     .then(response => response.json()) | ||||
|   | ||||
| @@ -2,12 +2,12 @@ | ||||
| import TabComponent from './TabComponent.vue' | ||||
| import InsertTemplateComponent from '@components/common/InsertTemplateComponent.vue' | ||||
| import XMLButtonFormatterComponent from '@components/formatter/XMLButtonFormatterComponent.vue' | ||||
| import { type TabData } from '../common/TabData' | ||||
| import { ref } from 'vue' | ||||
| import CodeEditor from '../CodeEditorComponent.vue' | ||||
|  | ||||
| const newTabId = ref(0); | ||||
| const activeTabId = ref(0); | ||||
| const prevActiveTabId = ref(-1); | ||||
|  | ||||
| const tabs = ref(new Array<TabData>); | ||||
| tabs.value.push({ | ||||
| @@ -22,28 +22,26 @@ const inputFile = ref() | ||||
| const props = defineProps( | ||||
|     { | ||||
|         stylizedName: {type: String, required: true}, | ||||
|         data: {type: String}, | ||||
|         data: {type: Array<TabData>}, | ||||
|     } | ||||
| ) | ||||
| const emit = defineEmits(['update']) | ||||
|  | ||||
| interface TabData { | ||||
|     id: number; | ||||
|     name: string; | ||||
|     data: string; | ||||
| } | ||||
|  | ||||
|  | ||||
| function sendValue() { | ||||
|     emit('update', data.value); | ||||
|     emit('update', tabs.value); | ||||
| } | ||||
|  | ||||
| function sendNewValue(newValue : string) { | ||||
|     data.value = newValue; | ||||
|     emit('update', data.value); | ||||
|     tabs.value.at(findIndexWithID(activeTabId.value))!.data = newValue; | ||||
|     emit('update', tabs.value); | ||||
| } | ||||
|  | ||||
| function updateData(newData: string) { | ||||
|     data.value = newData; | ||||
|     tabs.value.at(findIndexWithID(activeTabId.value))!.data = newData; | ||||
|     inputFile.value.value = ''; | ||||
|     sendValue(); | ||||
| } | ||||
| @@ -81,7 +79,6 @@ function changeActiveTab(id : number) { | ||||
|     let newIndex = findIndexWithID(id); | ||||
|      | ||||
|     tabs.value.at(index)!.data = data.value; | ||||
|     prevActiveTabId.value = activeTabId.value; | ||||
|     activeTabId.value = id; | ||||
|     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 xmlOutputFieldComponent from '@/components/xml/XmlOutputFieldComponent.vue'; | ||||
| import TooltipComponent from '@/components/xml/tooltips/TooltipComponent.vue'; | ||||
|  | ||||
| import { type TabData } from '@/components/common/TabData'; | ||||
| import { ref } from 'vue'; | ||||
|  | ||||
|  | ||||
| const xml = ref(''); | ||||
| const xml = ref(new Array<TabData>); | ||||
| const query = ref(''); | ||||
| const version = ref(''); | ||||
|  | ||||
| function updateVersion(newVersion: string) { | ||||
|     version.value = newVersion; | ||||
| } | ||||
|  | ||||
| function updateXML(data: Array<TabData>) { | ||||
|     xml.value = data; | ||||
|     console.log("Update:" + data); | ||||
|     console.log(data); | ||||
| } | ||||
|  | ||||
| </script> | ||||
|  | ||||
| <template> | ||||
|     <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 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> | ||||
|             </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> | ||||
|         <TooltipComponent tool-type="xslt" :version="version"></TooltipComponent> | ||||
|     </div> | ||||
|   | ||||
		Reference in New Issue
	
	Block a user