Added new component for params

Frontend/src/components/XsltParamComponent.vue

@@ -1,33 +1,107 @@
 <script setup lang="ts">
-import {defineComponent, ref} from 'vue'
-const selected = ref('A')
+import {ref} from 'vue'
+
+const emit = defineEmits<{
+  (event: 'update-value', value: string): void;
+}>();
+
+const props = defineProps({
+  xslt: {type: String, required: true}
+})
+
+
+const sendToParent = (xslt: string) => {
+  emit('update-value', xslt);
+};
+const nameInput = ref('')
+const valueInput = ref('')
+
+const options = ref<{ name: string }[]>([
+  { name: "Add Param" },
+  { name: "Set Param" },
+]);
+
+const selectedOption = ref(options.value[0].name);
+
+
+const selectedFunction = () => {
+  if(selectedOption.value === "Add Param") {
+    sendRequest("addParam");
+  }
+  else {
+    sendRequest("setParam")
+    }
+};
+const sendRequest = (type:string) => {
+  console.log(type)
+  let request: Request = prepareRequest(type)
+  fetchRequest(request).then((body) => {
+    const result = (body as any).result;
+    sendToParent(result);
+  });
+}
+
+function prepareRequest(type :string): Request {
+  let request = new Request(prepareURL(), {
+    body: prepareRequestBody(type),
+    method: "POST"
+  });
+  return request
+}
+
+function prepareURL(): string {
+  //const engineEndpoint = engine.value == "libxml" ? "libxml" : "java";
+  return document.location.protocol + "//" + document.location.hostname + "/" + "java" + "/xslt/param";
+  //return "http://localhost:8081/xslt/param";
+}
+
+function prepareRequestBody(type: string): string {
+  let requestBody = JSON.stringify({
+    "processorData": props.xslt,
+    "paramName": nameInput.value,
+    "paramValue": valueInput.value,
+    "type": type
+  });
+  console.log(requestBody);
+  return requestBody;
+}
+
+async function fetchRequest(request: Request): Promise<JSON> {
+  console.log(request)
+  let responseBody = await fetch(request)
+  return await responseBody.json()
+     // .then(response => response.json())
+   //   .then((body) => body)
+  //console.log(responseBody);
+  //return responseBody
+}
 
-let options = ref([
-  { text: 'One', value: 'A' },
-  { text: 'Two', value: 'B' },
-  { text: 'Three', value: 'C' }
-])
 </script>
 
 <template>
-  <select v-model="selected" class="px-3 rounded-full border border-slate-400 bg-white dark:text-slate-100 dark:bg-gray-600 w-2/3" >
-    <option v-for="option in options" :value="option.value">
-      {{ option.text }}
+  <select
+      v-model="selectedOption"
+      class="px-3 rounded-full border border-slate-400 bg-white dark:text-slate-100 dark:bg-gray-600 w-1/3"
+  >
+    <option v-for="option in options" :value="option.name" :key="option.name">
+      {{ option.name }}
     </option>
   </select>
 
   <input
-      id="textInput1"
+      id="NameTextInput"
+      v-model="nameInput"
       class="text-input px-3 rounded-full border border-slate-400 bg-white dark:text-slate-100 dark:bg-gray-600 w-1/3"
       type="text"
       placeholder="Name"
   />
   <input
-      id="textInput2"
+      id="ValueTextInput"
+      v-model="valueInput"
       class="text-input px-3 rounded-full border border-slate-400 bg-white dark:text-slate-100 dark:bg-gray-600 w-1/3"
       type="text"
       placeholder="Value"
   />
-  <button class="tool-button" @click="clear">Add Variable</button>
+  <button class="tool-button" @click="selectedFunction">{{selectedOption}}</button>
 </template>
 

Frontend/src/components/xml/XmlInputFieldComponent.vue

@@ -54,7 +54,7 @@ function readFile(file: any) {
   }
   reader.readAsText(file.target.files[0])
 }
-
+const handleUpdateValue = (value: string) => {data.value = value};
 
 
 </script>
@@ -80,7 +80,7 @@ function readFile(file: any) {
 
     <div class="flex place-content-between w-full items-center">
       <div v-if="addParameters()" class="flex justify-end space-x-2 pb-2 overflow-x-auto ml-auto">
-        <XsltParamComponent :stylizedName="stylizedName"/>
+        <XsltParamComponent @update-value="handleUpdateValue" :xslt="data"/>
       </div>
     </div>