Finished logic

Frontend/src/assets/tooltips/xpath/xpath1.json

@@ -45,8 +45,13 @@
                 "examples": [
                     {
                         "command": "sum()",
-                        "output": "blablabla"
+                        "output": "56"
+                    },
+                    {
+                        "command": "sum()",
+                        "output": "2137"
                     }
+
                 ]
             },
             {

Frontend/src/assets/tooltips/xpath/xpath2.json

@@ -13,12 +13,7 @@
                     }
                 ],
                 "output": "number",
-                "examples": [
-                    {
-                        "command": "sum()",
-                        "output": "blablabla"
-                    }
-                ]
+                "examples": []
             },
             {
                 "name": "floor",

Frontend/src/components/xml/XmlOutputFieldComponent.vue

@@ -10,6 +10,8 @@ const props = defineProps(
     }
 )
 
+const emit = defineEmits(["update"]);
+
 const result = ref('');
 
 var enginesForCurrentTool = ref(["saxon", "xalan", "libxml"]);
@@ -118,6 +120,10 @@ function clear() {
     result.value = "";
 }
 
+function emitVersionChange() {
+    emit("update", version.value);
+}
+
 </script>
 
 <template>
@@ -128,7 +134,7 @@ function clear() {
                 <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" name="version" class="px-3 rounded-full border border-slate-400 bg-white dark:text-slate-100 dark:bg-gray-600">
+                <select v-model="version" name="version" @change="emitVersionChange()" class="px-3 rounded-full border border-slate-400 bg-white dark:text-slate-100 dark:bg-gray-600">
                     <option v-for="version in versionsForCurrentEngine" :value="version">{{ version }}</option>
                 </select>
                 <button class="tool-button" @click="clear">Clear</button>    

Frontend/src/components/xml/tooltips/TooltipComponent.vue

@@ -4,9 +4,24 @@ import tooltipCategoryComponent from '@components/xml/tooltips/TooltipCategoryCo
 import tooltipEntryComponent from '@components/xml/tooltips/TooltipEntryComponent.vue'
 
 import xpath1 from '@assets/tooltips/xpath/xpath1.json'
-import xpath2 from '@assets/tooltips/xpath/xpath1.json'
+import xpath2 from '@assets/tooltips/xpath/xpath2.json'
+import { watch } from 'vue';
+
+const props = defineProps({
+    version: {
+        type: String,
+        required: true
+    }
+})
+
 const areTooltipsHidden = ref(true)
 
+function selectXPathVersion() {
+    if (props.version == "1.0") {
+        return xpath1;
+    }
+    else return xpath2;
+}
 
 function toggleTooltips() {
     areTooltipsHidden.value = !areTooltipsHidden.value;
@@ -20,7 +35,7 @@ function toggleTooltips() {
             T<br/>o<br/>o<br/>l<br/>t<br/>i<br/>p<br/>s
         </button>
         <div id="content" :class="{'hidden' : areTooltipsHidden}" class="w-full flex flex-col gap-4 p-2 overflow-scroll rounded-xl dark:text-white bg-indigo-50 dark:bg-slate-800" >
-            <tooltipCategoryComponent v-for="category in xpath1" :name="category.name">
+            <tooltipCategoryComponent v-for="category in selectXPathVersion()" :name="category.name">
                 <tooltipEntryComponent v-for="entry in category.entries" :entry-data="entry"></tooltipEntryComponent>
             </tooltipCategoryComponent>
         </div>

Frontend/src/components/xml/tooltips/TooltipEntryComponent.vue

@@ -31,7 +31,7 @@ function entryHasExamples() {
                 </p>
             </span>
             
-            <h4 class="text-xl mt-4 mb-2 font-bold">Arguments</h4>
+            <h4 v-if="entryHasArguments()" class="text-xl mt-4 mb-2 font-bold">Arguments</h4>
             <table v-if="entryHasArguments()" class="w-full">
                 <tr>
                     <th>Name</th>
@@ -46,8 +46,8 @@ function entryHasExamples() {
             </table>
             <strong>Output: </strong>{{ props.entryData.output }}
 
-            <h4 class="text-xl mt-4 mb-2 font-bold">Example</h4>
-            <table class="w-full">
+            <h4 v-if="entryHasExamples()" class="text-xl mt-4 mb-2 font-bold">Example</h4>
+            <table v-if="entryHasExamples()" class="w-full">
                 <tr>
                     <th>Command</th>
                     <th>Output</th>

Frontend/src/views/XPathView.vue

@@ -7,6 +7,11 @@ import { ref } from 'vue';
 
 const xml = ref('');
 const query = ref('');
+const version = ref('');
+
+function updateVersion(newVersion: string) {
+    version.value = newVersion;
+}
 
 </script>
 
@@ -16,7 +21,7 @@ const query = ref('');
             <xmlInputFieldComponent stylized-name="XML" :data="xml" @update="(data) => {xml = data}"></xmlInputFieldComponent>
             <xmlInputFieldComponent stylized-name="XPath" :data="query" @update="(data) => {query = data}"></xmlInputFieldComponent>
         </div>
-        <xmlOutputFieldComponent tool="xpath" :xml="xml" :query="query"></xmlOutputFieldComponent>
-        <tooltipComponent></tooltipComponent>
+        <xmlOutputFieldComponent tool="xpath" :xml="xml" :query="query" @update="(version) => updateVersion(version)"></xmlOutputFieldComponent>
+        <tooltipComponent :version="version"></tooltipComponent>
     </div>
 </template>