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"> | <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,27 +93,73 @@ 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 | ||||||
|  |     }); | ||||||
|  |     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> { | 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