enhancement/implement_tooltips_for_xpath3 (#242)

Co-authored-by: widlam <mikolaj.widla@gmail.com>
Reviewed-on: #242

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

@@ -7,6 +7,8 @@ import xpath1 from '@/assets/tooltips/xpath/xpath1.json';
 import xpath2 from '@/assets/tooltips/xpath/xpath2.json';
 import xpath3 from '@/assets/tooltips/xpath/xpath3.json';
 import xpath31 from '@/assets/tooltips/xpath/xpath31.json';
+import TooltipDiffsComponent from './TooltipDiffsComponent.vue';
+
 
 const props = defineProps({
     version: {
@@ -39,10 +41,12 @@ function toggleTooltips() {
 
 <template>
     <div :class="areTooltipsHidden ? 'w-fit' : 'w-4/12'" class="hidden 2xl:flex shrink-0 items-stretch p-2 flex-row rounded-xl shadow-lg bg-gradient-to-r from-blue-400 to-blue-300 dark:from-sky-600 dark:to-sky-800 ">
-        <button :class="{'mr-2' : !areTooltipsHidden }" class="text-xl w-6 dark:text-slate-100 hover:font-bold" @click="toggleTooltips()">
+        <button :class="{'mr-2' : !areTooltipsHidden }" class="text-xl w-6 dark:text-slate-100" @click="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" >
+            <TooltipDiffsComponent tool-name="XPath" :tool-version="props.version"></TooltipDiffsComponent>
+            <div class="w-full h-2"> </div>
             <tooltipCategoryComponent v-for="category in selectXPathVersion()" :name="category.name">
                 <tooltipEntryComponent v-for="entry in category.entries" :entry-data="entry"></tooltipEntryComponent>
             </tooltipCategoryComponent>

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

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import xpathDiffs from '@/assets/tooltips/xpath/xpathdiffs.json';
+import { ref } from 'vue';
+import TooltipCategoryComponent from './TooltipCategoryComponent.vue';
+
+const isEntryHidden = ref(true)
+
+function getDiffEntry(toolVersion : String) : string[] {
+    switch(toolVersion){
+        case "2.0" : {
+            return xpathDiffs.VersionDiffs[0].diffs
+        }
+        case "3.0" : {
+            return xpathDiffs.VersionDiffs[1].diffs
+        }
+        case "3.1" : {
+            return xpathDiffs.VersionDiffs[2].diffs
+        }
+        default: {
+            return xpathDiffs.VersionDiffs[0].diffs
+        }
+    }
+}
+
+
+
+const props = defineProps({
+    toolName: {type: String, required: true},
+    toolVersion: {type: String, required: true}
+})
+
+
+</script>
+
+<template>
+
+<TooltipCategoryComponent :name="xpathDiffs.universalInfo[0].category">
+    <span class="text-center">
+        {{ xpathDiffs.universalInfo[0].description }}
+    </span>
+</TooltipCategoryComponent>    
+
+<TooltipCategoryComponent v-if="toolVersion !== '1.0'"  :name="'What\'s new in ' + toolName + ' ' + toolVersion ">
+        <span v-for=" diff in getDiffEntry(toolVersion)" v-bind:key="diff" class=" text-justify" >
+            * {{ diff }}
+        </span>
+</TooltipCategoryComponent>
+
+</template>

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

@@ -24,8 +24,10 @@ function interpretXPathIndicators( elementType:string ):string {
     switch (lastChar) {
         case "*":
             meaning = "Zero or more";
+            break;
         case "?":
             meaning = "Zero or one";
+            break;
         case "+":
             meaning = "One or more";
 
@@ -39,8 +41,8 @@ function interpretXPathIndicators( elementType:string ):string {
 </script>
 
 <template>
-    <div class="flex p-1 flex-col rounded-xl border border-slate-400 dark:border-slate-400 hover:font-bold">
-        <button :class="{ 'mb-2' : !isEntryHidden }" class="dark:text-slate-100" @click="toggleTooltips()">{{ props.entryData.name }}</button>
+    <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 hover:font-bold" @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">