Added logic to tooltips

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

@@ -0,0 +1,72 @@
+[
+    {
+        "name": "Node-Set",
+        "entries": [
+            {
+                "name": "last",
+                "description": "The last function returns a number equal to the context size from the expression evaluation context.",
+                "arguments": [],
+                "output": "number",
+                "examples": [
+                    {
+                        "command": "last()",
+                        "output": "blablabla"
+                    }
+                ]
+            },
+            {
+                "name": "position",
+                "description": "The position function returns a number equal to the context position from the expression evaluation context.",
+                "arguments": [],
+                "output": "number",
+                "examples": [
+                    {
+                        "command": "position()",
+                        "output": "blablabla"
+                    }
+                ]
+            }
+        ]
+    },
+    {
+        "name": "Number",
+        "entries": [
+            {
+                "name": "sum",
+                "description": "The sum function returns the sum, for each node in the argument node-set, of the result of converting the string-values of the node to a number.",
+                "arguments": [
+                    {
+                        "name": "$arg",
+                        "type": "node-set",
+                        "description": "Data to sum"
+                    }
+                ],
+                "output": "number",
+                "examples": [
+                    {
+                        "command": "sum()",
+                        "output": "blablabla"
+                    }
+                ]
+            },
+            {
+                "name": "floor",
+                "description": "The floor function returns the largest (closest to positive infinity) number that is not greater than the argument and that is an integer.",
+                "arguments": [
+                    {
+                        "name": "$arg",
+                        "type": "number",
+                        "description": "Data to round"
+                    }
+                ],
+                "output": "number",
+                "examples": [
+                    {
+                        "command": "floor(3.6)",
+                        "output": "3"
+                    }
+                ]
+            }
+        ]
+    }
+]

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

@@ -0,0 +1,43 @@
+[
+    {
+        "name": "Number",
+        "entries": [
+            {
+                "name": "sum",
+                "description": "The sum function returns the sum, for each node in the argument node-set, of the result of converting the string-values of the node to a number.",
+                "arguments": [
+                    {
+                        "name": "$arg",
+                        "type": "node-set",
+                        "description": "Data to sum"
+                    }
+                ],
+                "output": "number",
+                "examples": [
+                    {
+                        "command": "sum()",
+                        "output": "blablabla"
+                    }
+                ]
+            },
+            {
+                "name": "floor",
+                "description": "The floor function returns the largest (closest to positive infinity) number that is not greater than the argument and that is an integer.",
+                "arguments": [
+                    {
+                        "name": "$arg",
+                        "type": "number",
+                        "description": "Data to round"
+                    }
+                ],
+                "output": "number",
+                "examples": [
+                    {
+                        "command": "floor(3.6)",
+                        "output": "3"
+                    }
+                ]
+            }
+        ]
+    }
+]

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

@@ -2,8 +2,12 @@
 import { ref } from 'vue';
 import tooltipCategoryComponent from '@components/xml/tooltips/TooltipCategoryComponent.vue'
 import tooltipEntryComponent from '@components/xml/tooltips/TooltipEntryComponent.vue'
+
+import xpath1 from '@assets/tooltips/xpath/xpath1.json'
+import xpath2 from '@assets/tooltips/xpath/xpath1.json'
 const areTooltipsHidden = ref(true)
 
+
 function toggleTooltips() {
     areTooltipsHidden.value = !areTooltipsHidden.value;
 }
@@ -16,15 +20,8 @@ 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 name="Category I">
-                <tooltipEntryComponent name="Test"></tooltipEntryComponent>
-                <tooltipEntryComponent name="Teścik">Teścik</tooltipEntryComponent>
-                <tooltipEntryComponent name="Dłuuuuuuuggiiiiii teeeeeeeeeestttt"></tooltipEntryComponent>
-            </tooltipCategoryComponent>
-            <tooltipCategoryComponent name="Category II">
-                <tooltipEntryComponent name="Test"></tooltipEntryComponent>
-                <tooltipEntryComponent name="Teścik">Teścik</tooltipEntryComponent>
-                <tooltipEntryComponent name="Dłuuuuuuuggiiiiii teeeeeeeeeestttt"></tooltipEntryComponent>
+            <tooltipCategoryComponent v-for="category in xpath1" :name="category.name">
+                <tooltipEntryComponent v-for="entry in category.entries" :entry-data="entry"></tooltipEntryComponent>
             </tooltipCategoryComponent>
         </div>
     </div>

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

@@ -3,40 +3,48 @@ import { ref } from 'vue';
 const isEntryHidden = ref(true)
 
 const props = defineProps({
-    name: {type: String, required: true}
+    entryData: {type: Object, required: true}
 })
 
 function toggleTooltips() {
     isEntryHidden.value = !isEntryHidden.value;
 }
 
+function entryHasArguments() {
+    return props.entryData.arguments.length > 0;
+}
+
+function entryHasExamples() {
+    return props.entryData.examples.length > 0;
+}
+
 </script>
 
 <template>
     <div class="flex p-1 flex-col rounded-xl border border-slate-400 dark:border-slate-400">
-        <button :class="{ 'mb-2' : !isEntryHidden }" class="dark:text-slate-100" @click="toggleTooltips()">{{ props.name }}</button>
+        <button :class="{ 'mb-2' : !isEntryHidden }" class="dark:text-slate-100" @click="toggleTooltips()">{{ props.entryData.name }}</button>
         <div id="content" :class="{'hidden' : isEntryHidden}" class="w-full p-2 rounded-xl dark:text-white bg-indigo-50 dark:bg-slate-800" >
             <h4 class="text-xl mb-2 font-bold text-justify">Description</h4>
             <span class="text-justify">
                 <p>
-                    Ultrices purus convallis pretium. Velit adipiscing curabitur facilisis proin, dis elit fames conubia lacinia adipiscing massa montes. Nec gravida volutpat viverra viverra et eu ac morbi id proin donec. Dis sollicitudin egestas sociis metus cras inceptos vehicula auctor felis vestibulum? Non potenti platea elit morbi suscipit eleifend, condimentum phasellus aliquet condimentum eros sodales. Mus pretium adipiscing, tempor gravida. Sapien.
+                    {{ props.entryData.description }}
                 </p>
             </span>
             
             <h4 class="text-xl mt-4 mb-2 font-bold">Arguments</h4>
-            <table class="w-full">
+            <table v-if="entryHasArguments()" class="w-full">
                 <tr>
                     <th>Name</th>
                     <th>Type</th>
                     <th>Description</th>
                 </tr>
-                <tr>
-                    <td class="text-center">$arg</td>
-                    <td class="text-center">any</td>
-                    <td class="text-center">Data to convert</td>
+                <tr v-for="arg in props.entryData.arguments">
+                    <td class="text-center">{{ arg.name }}</td>
+                    <td class="text-center">{{ arg.type }}</td>
+                    <td class="text-center">{{ arg.description }}</td>
                 </tr>
             </table>
-            <strong>Output: </strong> string
+            <strong>Output: </strong>{{ props.entryData.output }}
 
             <h4 class="text-xl mt-4 mb-2 font-bold">Example</h4>
             <table class="w-full">
@@ -44,13 +52,9 @@ function toggleTooltips() {
                     <th>Command</th>
                     <th>Output</th>
                 </tr>
-                <tr>
-                    <td class="text-center">string(696969)</td>
-                    <td class="text-center">'696969'</td>
-                </tr>
-                <tr>
-                    <td class="text-center">string('dupa')</td>
-                    <td class="text-center">'dupa'</td>
+                <tr v-for="ex in props.entryData.examples">
+                    <td class="text-center">{{ ex.command }}</td>
+                    <td class="text-center">{{ ex.output }}</td>
                 </tr>
             </table>
         </div>