created UI for adding parameters

Frontend/src/components/common/CodeEditorComponent.vue

@@ -2,8 +2,7 @@
 import { onBeforeUpdate, inject } from 'vue'
 import { Codemirror } from 'vue-codemirror'
 import { oneDark } from '@codemirror/theme-one-dark'
-import { createTheme} from 'thememirror';
-import {tags as t} from '@lezer/highlight';
+import { espresso } from 'thememirror';
 import {xml} from '@codemirror/lang-xml'
 import {json} from '@codemirror/lang-json'
 import {html} from '@codemirror/lang-html'
@@ -19,47 +18,6 @@ const props= defineProps({
     },
 })
 
-const lightTheme = createTheme({
-	variant: 'light',
-	settings: {
-		background: '#FFFFFF',
-		foreground: '#000000',
-		caret: '#000000',
-		selection: '#80C7FF',
-		gutterBackground: '#FFFFFF',
-		gutterForeground: '#00000070',
-		lineHighlight: '#C1E2F840',
-	},
-	styles: [
-		{
-			tag: t.comment,
-			color: '#AAAAAA',
-		},
-		{
-			tag: [t.keyword, t.operator, t.typeName, t.tagName, t.propertyName],
-			color: '#2F6F9F',
-			fontWeight: 'bold',
-		},
-		{
-			tag: [t.attributeName, t.definition(t.propertyName)],
-			color: '#4F9FD0',
-		},
-		{
-			tag: [t.className, t.string, t.special(t.brace)],
-			color: '#CF4F5F',
-		},
-		{
-			tag: t.number,
-			color: '#CF4F5F',
-			fontWeight: 'bold',
-		},
-		{
-			tag: t.variableName,
-			fontWeight: 'bold',
-		},
-	],
-});
-
 const emit = defineEmits(
   [
     'update:updatedCode'
@@ -79,7 +37,7 @@ function selectTheme() {
   if (isDarkModeSet())
     return oneDark;
   else
-    return lightTheme;
+    return espresso;
 }
 
 function isDarkModeSet(){
@@ -125,4 +83,4 @@ function parseLanguage(name: String){
       />
     
   </div>
-</template>
+</template>

Frontend/src/components/xml/XmlInputFieldComponent.vue

@@ -3,12 +3,13 @@ import InsertTemplateComponent from '@components/common/InsertTemplateComponent.
 import XMLButtonFormatterComponent from '@components/formatter/XMLButtonFormatterComponent.vue'
 import CodeEditor from '@/components/common/CodeEditorComponent.vue'
 
-import { ref } from 'vue'
+import {ref} from 'vue'
+import TabComponent from "@components/xml/TabComponent.vue";
 
 const props = defineProps(
     {
-        stylizedName: {type: String, required: true},
-        data: {type: String},
+      stylizedName: {type: String, required: true},
+      data: {type: String},
     }
 )
 const emit = defineEmits(['update:modelValue'])
@@ -17,54 +18,88 @@ const data = ref('')
 const inputFile = ref()
 
 function sendValue() {
-    emit('update:modelValue', data.value)
+  emit('update:modelValue', data.value)
 }
 
 function updateData(newData: string, clearFileSelector: boolean = true) {
-    data.value = newData
-    if (clearFileSelector)
-        inputFile.value.value = '';
-    sendValue()
+  data.value = newData
+  if (clearFileSelector)
+    inputFile.value.value = '';
+  sendValue()
 }
 
 function clear() {
-    updateData('')
+  updateData('')
 }
 
 function canBeFormatted() {
-    return props.stylizedName.toLowerCase() == 'xml' || 
-           props.stylizedName.toLowerCase() == 'xsd' || 
-           props.stylizedName.toLowerCase() == 'xslt'
+  return props.stylizedName.toLowerCase() == 'xml' ||
+      props.stylizedName.toLowerCase() == 'xsd' ||
+      props.stylizedName.toLowerCase() == 'xslt'
 }
 
-function readFile(file : any) {
-    
-    const reader = new FileReader()
-    reader.onloadend = () => {
-        let result = reader.result?.toString()
-        if (typeof result == "string")
-            updateData(result, false);
-            
-    }
-    reader.readAsText(file.target.files[0])
+function addParameters() {
+  return props.stylizedName?.toLowerCase() == "xslt"
 }
 
+function readFile(file: any) {
+
+  const reader = new FileReader()
+  reader.onloadend = () => {
+    let result = reader.result?.toString()
+    if (typeof result == "string")
+      updateData(result, false);
+
+  }
+  reader.readAsText(file.target.files[0])
+}
+
+
 </script>
 
 <template>
-    <div class="flex flex-col w-full h-1/2 lg:h-1/2 flex-none xl:pr-2 2xl:pr-4 pb-2">
-        <div class="flex place-content-between w-full items-center">
-            <span class="dark:text-white mr-2">{{ stylizedName }}</span>
-            <div class="flex space-x-2 pb-2 overflow-x-auto">
-                <div class="flex items-stretch w-64">
-                    <input id="fileLoader" ref="inputFile" class="file-selector" type="file" accept=".xml,.xql,.xquery,.xslt,text/xml,text/plain" @change="readFile" />
-                </div>
-                
-                <InsertTemplateComponent :stylized-name="props.stylizedName" @update:default-data="updateData"></InsertTemplateComponent>
-                <XMLButtonFormatterComponent v-if="canBeFormatted()" :xml="data" @update:result="(data:any) => updateData(data.result)"></XMLButtonFormatterComponent>
-                <button class="tool-button" @click="clear">Clear</button>
-            </div>
-        </div>
-        <CodeEditor @update:updated-code="updateData" v-model="data" :code="data" :config="{disabled:false, language:stylizedName}"></CodeEditor>
+  <div class="flex flex-col w-full h-1/2 lg:h-1/2 flex-none xl:pr-2 2xl:pr-4 pb-2">
+    <div class="flex justify-between mb-2"></div>
+
+    <div class="flex place-content-between w-full items-center">
+      <span class="dark:text-white mr-2">{{ stylizedName }}</span>
+      <div class="flex items-stretch w-64">
+        <input id="fileLoader" ref="inputFile" class="file-selector" type="file" accept=".xml,.xql,.xquery,.xslt,text/xml,text/plain" @change="readFile" />
+      </div>
+      <div class="flex space-x-2 pb-2 overflow-x-auto">
+        <InsertTemplateComponent :stylized-name="props.stylizedName" @update:default-data="updateData"></InsertTemplateComponent>
+        <XMLButtonFormatterComponent v-if="canBeFormatted()" :xml="data" @update:result="(data:any) => updateData(data.result)"></XMLButtonFormatterComponent>
+        <button class="tool-button" @click="clear">Clear</button>
+      </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">
+        <select id = "myList" onchange = "favTutorial()" class = "w-full rounded-3xl" >
+          <option> ---Choose tutorial--- </option>
+          <option> w3schools </option>
+          <option> Javatpoint </option>
+          <option> tutorialspoint </option>
+          <option> geeksforgeeks </option>
+        </select>
+        <input
+            id="textInput1"
+            class="text-input px-2 py-1 border rounded-3xl w-1/3"
+            type="text"
+            placeholder="Input 1"
+        />
+        <input
+            id="textInput2"
+            class="text-input px-2 py-1 border rounded-3xl w-1/3"
+            type="text"
+            placeholder="Input 2"
+        />
+        <button class="tool-button" @click="clear">Add Variable</button>
+      </div>
+    </div>
+
+    <CodeEditor @update:updated-code="updateData" v-model="data" :code="data"
+                :config="{disabled:false, language:stylizedName}"></CodeEditor>
+  </div>
+
 </template>

Frontend/src/components/xml/XmlOutputFieldComponent.vue

@@ -7,18 +7,16 @@ const props = defineProps(
     {
         tool: {type: String, required: true},
         xml: {type: [String, Array<TabData>], required: true},
-        query: {type: String, required: true},
-        activeTabId: {type: Number, required: false}
+        query: {type: String, required: true}
     }
 )
 
-const emit = defineEmits(["update", "update:engine"]);
+const emit = defineEmits(["update"]);
 
 const result = ref('');
 
 let enginesForCurrentTool = ref(["saxon", "xalan", "libxml"]);
 
-const allVersionsOfXpath = ["2.0", "3.0", "3.1"];
 const allVersions = ["1.0", "2.0", "3.0", "3.1"];
 let versionsForCurrentEngine = ref([""]);
 
@@ -74,7 +72,7 @@ function changeAvailableVersionsOfXPath() {
     if(engine.value == "xalan" || engine.value == "libxml")
         versionsForCurrentEngine.value = ["1.0"];
     else if (engine.value == "saxon")
-        versionsForCurrentEngine.value = allVersionsOfXpath;
+        versionsForCurrentEngine.value = allVersions;
 }
 
 function selectDefaultEngine() {
@@ -111,23 +109,21 @@ function prepareRequest():Request {
 
 function prepareURL(): string {
     const engineEndpoint = engine.value == "libxml" ? "libxml" : "java";
-
+   
     let tool = props.tool;
-    if (Array.isArray(props.xml) && props.xml.length > 1 && engine.value == "saxon")
+    if (Array.isArray(props.xml) && props.xml.length > 1)
         tool = "multiple/xslt";
 
     return document.location.protocol + "//" + document.location.hostname + "/" + engineEndpoint + "/" + tool;
 }
 
 function selectRequestBodyType() : string {
-    if (Array.isArray(props.xml) && (engine.value == "xalan" || engine.value == "libxml"))
-      return prepareRequestBodySingleXml(props.xml.at(props.activeTabId!)!.data)
-    else if (Array.isArray(props.xml) && props.xml.length > 1)
-      return prepareRequestBodyMultiXml();
+    if (Array.isArray(props.xml) && props.xml.length > 1)
+        return prepareRequestBodyMultiXml();
     else if (Array.isArray(props.xml))
-      return prepareRequestBodySingleXml(props.xml.at(0)!.data);
+        return prepareRequestBodySingleXml(props.xml.at(0)!.data);
     else
-      return prepareRequestBodySingleXml(props.xml!);
+        return prepareRequestBodySingleXml(props.xml!);
 }
 
 function prepareRequestBodySingleXml(data: string):string {
@@ -192,10 +188,6 @@ function emitVersionChange() {
     emit("update", version.value);
 }
 
-function emitEngineChange() {
-  emit("update:engine", engine.value);
-}
-
 function isVersionSelectionAvailable() {
     return !(versionsForCurrentEngine.value.length == 1 && versionsForCurrentEngine.value.at(0) == "N/A");
 }
@@ -210,11 +202,6 @@ function highlightField() {
     return "";
 }
 
-function handleChange() {
-  changeAvailableVersions();
-  emitEngineChange();
-}
-
 </script>
 
 <template>
@@ -222,7 +209,7 @@ function handleChange() {
         <div class="flex place-content-between w-full items-center pb-2">
             <span class="dark:text-white">Result:</span>
             <div class="flex space-x-2 overflow-x-auto">
-                <select v-model="engine" name="engine" @change="handleChange()" class="px-3 rounded-full border border-slate-400 bg-white dark:text-slate-100 dark:bg-gray-600">
+                <select v-model="engine" name="engine" @change="changeAvailableVersions()" class="px-3 rounded-full border border-slate-400 bg-white dark:text-slate-100 dark:bg-gray-600">
                     <option v-for="engine in enginesForCurrentTool" :value="engine">{{ engine }}</option>
                 </select>
                 <select v-model="version" v-if="isVersionSelectionAvailable()" name="version" @change="emitVersionChange()" class="px-3 rounded-full border border-slate-400 bg-white dark:text-slate-100 dark:bg-gray-600">

Frontend/src/components/xml/XmlTabbedInputComponent.vue

@@ -10,11 +10,11 @@ const props = defineProps(
     {
         stylizedName: {type: String, required: true},
         data: {type: Array<TabData>},
-        tabCountLimit: {type: Number, required: false, validator: (value) => typeof value == "number" && value > 0},
-        engine: {type: String, required: true}
+        tabCountLimit: {type: Number, required: false, validator: (value) => typeof value == "number" && value > 0}
     }
 )
-const emit = defineEmits(['update:modelValue', 'update:activeTabId'])
+const emit = defineEmits(['update:modelValue'])
+
 const newTabId = ref(0);
 const activeTabId = ref(0);
 const data = ref('')
@@ -30,9 +30,6 @@ tabs.value.push({
 function sendValue() {
     emit('update:modelValue', tabs.value);
 }
-function emitActiveTab() {
-  emit('update:activeTabId', activeTabId.value);
-}
 
 function updateData(newData: string) {
     data.value = newData;
@@ -76,7 +73,6 @@ function changeActiveTab(id : number) {
     
     tabs.value.at(index)!.data = data.value;
     activeTabId.value = id;
-    emitActiveTab();
     data.value = tabs.value.at(newIndex)!.data;
 
     sendValue();
@@ -132,7 +128,7 @@ function findIndexWithID(id : number) : number {
     <div class="flex flex-col w-full h-1/2 lg:h-1/2 flex-none xl:pr-2 2xl:pr-4 pb-2">
         <div class="flex justify-between mb-2">
             <div class="flex gap-2 overflow-x-auto">
-                <TabComponent @click:activate="changeActiveTab" @click:remove="removeTab" v-for="tab in tabs" :id="tab.id" :isActive="tab.id == activeTabId" :class="[tab.id !== activeTabId && (props.engine === 'xalan' ? 'disabled-tab' : '' || props.engine === 'libxml' ? 'disabled-tab' : '')]">{{ tab.name }}</TabComponent>
+                <TabComponent @click:activate="changeActiveTab" @click:remove="removeTab" v-for="tab in tabs" :id="tab.id" :isActive="tab.id == activeTabId">{{ tab.name }}</TabComponent>
             </div>
             <div class="flex gap-2">
                 <div class="flex items-stretch w-64">

Frontend/src/style.css

@@ -43,7 +43,3 @@
 .tab-active {
     @apply py-2 px-3 h-fit text-slate-700 border-t border-l border-r border-slate-400 rounded-t-2xl bg-gradient-to-r from-blue-400 to-sky-300  dark:text-white dark:from-sky-600 dark:to-sky-800 hover:bg-blue-400
 }
-
-.disabled-tab {
-    @apply py-2 px-3 h-fit text-slate-400 border-t border-l border-r border-slate-300 rounded-t-2xl bg-gradient-to-r from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 pointer-events-none opacity-50;
-}

Frontend/src/views/XSLTView.vue

@@ -11,8 +11,6 @@ import { ref } from 'vue';
 const xml = ref(new Array<TabData>);
 const query = ref('');
 const version = ref('');
-const engine = ref('')
-const activeTabId = ref(0)
 
 function updateVersion(newVersion: string) {
     version.value = newVersion;
@@ -24,10 +22,10 @@ function updateVersion(newVersion: string) {
     <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" v-model:activeTabId="activeTabId" :engine="engine" :tab-count-limit="3" v-model="xml"></xmlTabbedInputComponent>
+                <xmlTabbedInputComponent stylized-name="XML" :tab-count-limit="3" v-model="xml"></xmlTabbedInputComponent>
                 <xmlInputFieldComponent stylized-name="XSLT" :data="query" v-model="query"></xmlInputFieldComponent>
             </div>
-            <xmlOutputFieldComponent tool="xslt" :xml="xml" :active-tab-id="activeTabId" v-model:engine="engine" :query="query" @update="updateVersion"></xmlOutputFieldComponent>
+            <xmlOutputFieldComponent tool="xslt" :xml="xml" :query="query" @update="updateVersion"></xmlOutputFieldComponent>
         </div>
         <TooltipComponent tool-type="xslt" :version="version"></TooltipComponent>
     </div>

issue_template/bug.md

@@ -1,21 +0,0 @@
----
-
-name: "Bug template"    
-about: "This template is for reporting bugs"  
-title: "Bug"    
-
----
-
-## Description
-*A clear and concise description of the issue.*
-
-### Selected Fields
-- **Engine:** [Specify the engine used]
-- **Version:** [Specify the version]
-- **Tool:** [Specify the currently used tool]
-
-### Data: 
-*Paste used xml/xslt/json etc...*
-
-## Additional Context
-*Any other information that might help with this issue.*

issue_template/feature.md

@@ -1,10 +0,0 @@
----
-
-name: "Feature request template"    
-about: "This template is for requesting features"    
-title: "Feature request" 
-
----
-
-## Feature Request 
-*Describe the feature you’d like to see and why it’s useful.*