Fixed sending parameters

2025-01-23 18:59:41 +01:00
parent b7af1eb33a
commit 04e37258bf
7 changed files with 249 additions and 105 deletions
--- a/Frontend/src/components/XsltParamComponent.vue
+++ b/Frontend/src/components/XsltParamComponent.vue
@@ -2,106 +2,125 @@
 import {ref} from 'vue'

 const emit = defineEmits<{
-  (event: 'update-value', value: string): void;
+  (event: 'update-value', options: { name: string }[]): void;
 }>();

-const props = defineProps({
-  xslt: {type: String, required: true}
-})
+const options = ref<{ name: string }[]>([
+  { name: "Add Param" }
+]);

-
-const sendToParent = (xslt: string) => {
-  emit('update-value', xslt);
+const sendToParent = () => {
+  options.value.forEach((value) => {console.log("KID" + value + options.value.indexOf(value))})
+  emit('update-value', options.value);
 };
+
+
 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 selectedOption = ref(options.value[0].name)

 const selectedFunction = () => {
-  if(selectedOption.value === "Add Param") {
-    sendRequest("addParam");
+  if (selectOption(selectedOption.value) === 'Add Param') {
+    options.value.push({name: nameInput.value + " = " + valueInput.value});
+
  }
-  else {
-    sendRequest("setParam")
+  if (selectOption(selectedOption.value) === 'Remove Param') {
+    const currentIndex = options.value.indexOf(selectedOption.value)
+    options.value.splice(currentIndex, 1);
+    selectedOption.value= options.value[0].name
+    valueInput.value = ""
+    nameInput.value = ""
+  }
+  sendToParent()
+  /*
+
+    if(selectedOption.value === "Add Param") {
+      sendRequest("add");
    }
-};
+    else {
+      sendRequest("remove");
+      }
+  */
+}
+
+/*
 const sendRequest = (type:string) => {
  console.log(type)
  let request: Request = prepareRequest(type)
  fetchRequest(request).then((body) => {
-    const result = (body as any).result;
-    sendToParent(result);
+
+    const {status} = body as any;
+    console.log(status)
+    if (status === "OK") {
+      options.value.push({ name: nameInput.value + " = " + valueInput.value });
+    }
  });
 }
-
-function prepareRequest(type :string): Request {
-  let request = new Request(prepareURL(), {
-    body: prepareRequestBody(type),
-    method: "POST"
-  });
-  return request
+*/
+function selectOption(option: string): string {
+  return option == "Add Param" ? "Add Param" : "Remove Param"
 }

-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
-}
+//
+// 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({
+//     "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()
+//      }

 </script>

 <template>
  <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"
+      class="flex h-full px-3 rounded-full border border-slate-400 bg-white dark:text-slate-100 dark:bg-gray-600 w-48"
  >
    <option v-for="option in options" :value="option.name" :key="option.name">
      {{ option.name }}
    </option>
  </select>
-
  <input
+      v-if="selectedOption==='Add Param'"
      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"
+      class="text-input h-full 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
+      v-if="selectedOption==='Add Param'"
      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"
+      class="text-input h-full 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="selectedFunction">{{selectedOption}}</button>
+  <button class="tool-button" @click="selectedFunction">{{ selectOption(selectedOption) }}</button>
 </template>

--- a/Frontend/src/components/xml/XmlInputFieldComponent.vue
+++ b/Frontend/src/components/xml/XmlInputFieldComponent.vue
@@ -6,21 +6,26 @@ import XsltParamComponent from '@/components/XsltParamComponent.vue'

 import {ref} from 'vue'

-const props = defineProps(
-    {
-      stylizedName: {type: String, required: true},
-      data: {type: String},
-    }
-)
-const emit = defineEmits(['update:modelValue'])
+const props = defineProps<{
+  stylizedName: string;
+  data?: string;
+  params?: { name: string }[];
+}>();
+
+const emit = defineEmits(['update:modelValue','update:params'])

 const data = ref('')
 const inputFile = ref()
+const params = ref<{ name: string }[]>([]);

 function sendValue() {
  emit('update:modelValue', data.value)
 }

+function updateParams(newParams: { name: string }[]) {
+  emit('update:params', newParams);
+}
+

 function updateData(newData: string, clearFileSelector: boolean = true) {
  data.value = newData
@@ -54,8 +59,12 @@ function readFile(file: any) {
  }
  reader.readAsText(file.target.files[0])
 }
-const handleUpdateValue = (value: string) => {data.value = value};

+const handleUpdateValue = (options: { name: string }[]) => {
+  console.log("from parent" +options.length)
+  params.value = options
+  updateParams(params)
+};

 </script>

@@ -78,10 +87,8 @@ const handleUpdateValue = (value: string) => {data.value = value};
      </div>
    </div>

-    <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 @update-value="handleUpdateValue" :xslt="data"/>
-      </div>
+    <div class="flex justify-end gap-2 place-content-between w-full items-center">
+        <XsltParamComponent v-if="addParameters()" @update-value="handleUpdateValue" :xslt="data"/>
    </div>

    <CodeEditor @update:updated-code="updateData" v-model="data" :code="data" :config="{disabled:false, language:stylizedName}"></CodeEditor>
--- a/Frontend/src/components/xml/XmlOutputFieldComponent.vue
+++ b/Frontend/src/components/xml/XmlOutputFieldComponent.vue
@@ -1,15 +1,14 @@
 <script setup lang="ts">
-import { onMounted, ref } from 'vue';
-import { type TabData } from '../common/TabData'
+import {onMounted, ref} from 'vue';
+import {type TabData} from '../common/TabData'
 import CodeEditor from '@/components/common/CodeEditorComponent.vue';

-const props = defineProps(
-    {
-        tool: {type: String, required: true},
-        xml: {type: [String, Array<TabData>], required: true},
-        query: {type: String, required: true}
-    }
-)
+const props = defineProps<{
+  tool: string;
+  xml: string | TabData[];
+  query: string;
+  params?: { name: string }[];
+}>();

 const emit = defineEmits(["update"]);

@@ -86,7 +85,9 @@ function selectDefaultVersion() {
 }

 function process() {
-    let request:Request = prepareRequest();
+  props.params?.forEach((param) => {console.log(param.name)})
+
+  let request:Request = prepareRequest();
    fetchRequest(request).then((data) => {
        updateOutputField(data);
    })
@@ -125,14 +126,25 @@ function selectRequestBodyType() : string {
    else
        return prepareRequestBodySingleXml(props.xml!);
 }
+function formatParams() {
+  return props.params.map(param => {
+    const [key, value] = param.name.split(" = ");
+    return {key, value};
+  });
+}

 function prepareRequestBodySingleXml(data: string):string {
-    let requestBody = JSON.stringify({
+
+  const formattedParams = formatParams();
+
+  let requestBody = JSON.stringify({
+        "params": formattedParams,
        "data": data,
        "processorData": props.query,
        "processor": engine.value,
        "version": version.value
    });
+    console.log(requestBody);
    return requestBody;
 }