Merge branch 'func/xpath_tooltips'

Frontend/src/components/xml/XmlOutputFieldComponent.vue

@@ -11,6 +11,8 @@ const props = defineProps(
     }
 )
 
+const emit = defineEmits(["update"]);
+
 const result = ref('');
 
 var enginesForCurrentTool = ref(["saxon", "xalan", "libxml"]);
@@ -72,6 +74,7 @@ function selectDefaultEngine() {
 function selectDefaultVersion() {
     const lastVersion = versionsForCurrentEngine.value.length - 1
     version.value = versionsForCurrentEngine.value[lastVersion];
+    emitVersionChange();
 }
 
 function process() {
@@ -119,6 +122,10 @@ function clear() {
     result.value = "";
 }
 
+function emitVersionChange() {
+    emit("update", version.value);
+}
+
 </script>
 
 <template>
@@ -129,7 +136,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/TooltipCategoryComponent.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+const isCategoryHidden = ref(true)
+
+const props = defineProps({
+    name: {type: String, required: true}
+})
+
+function toggleTooltips() {
+    isCategoryHidden.value = !isCategoryHidden.value;
+}
+
+</script>
+
+<template>
+    <div class="flex p-2 flex-col rounded-xl shadow-lg bg-gradient-to-r from-zinc-400 to-slate-400 dark:from-slate-600 dark:to-slate-700">
+        <button :class="{ 'mb-2' : !isCategoryHidden }" class="dark:text-slate-100" @click="toggleTooltips()">{{ props.name }}</button>
+        <div id="content" :class="{'hidden' : isCategoryHidden}" class="flex flex-col gap-4 w-full h-fit p-2 rounded-xl dark:text-white bg-indigo-50 dark:bg-slate-800" >
+            <slot></slot>
+        </div>
+    </div>
+</template>

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

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+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/xpath2.json';
+import xpath3 from '@/assets/tooltips/xpath/xpath3.json';
+import xpath31 from '@/assets/tooltips/xpath/xpath31.json';
+
+const props = defineProps({
+    version: {
+        type: String,
+        required: true
+    }
+})
+
+const areTooltipsHidden = ref(true)
+
+function selectXPathVersion() {
+    switch(props.version) {
+        case "1.0":
+            return xpath1;
+        case "2.0":
+            return xpath2;
+        case "3.0":
+            return xpath3;
+        case "3.1":
+        default:
+            return xpath31;
+    }
+}
+
+function toggleTooltips() {
+    areTooltipsHidden.value = !areTooltipsHidden.value;
+}
+
+</script>
+
+<template>
+    <div :class="{ 'w-4/12' : !areTooltipsHidden }" class="hidden xl: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" @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" >
+            <tooltipCategoryComponent v-for="category in selectXPathVersion()" :name="category.name">
+                <tooltipEntryComponent v-for="entry in category.entries" :entry-data="entry"></tooltipEntryComponent>
+            </tooltipCategoryComponent>
+        </div>
+    </div>
+</template>

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

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+const isEntryHidden = ref(true)
+
+const props = defineProps({
+    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;
+}
+
+function interpretXPathIndicators( elementType:string ):string {
+    const lastChar = elementType.charAt(elementType.length - 1);
+    var meaning = "";
+    switch (lastChar) {
+        case "*":
+            meaning = "Zero or more";
+        case "?":
+            meaning = "Zero or one";
+        case "+":
+            meaning = "One or more";
+
+    }
+    if (meaning.length == 0)
+        return elementType;
+    else
+        return elementType + " (" + meaning + ")";
+}
+
+</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.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>
+                    {{ props.entryData.description }}
+                </p>
+            </span>
+            
+            <h4 class="text-xl mt-4 mb-2 font-bold">Args and Output</h4>
+            <table v-if="entryHasArguments()" class="w-full">
+                <tr>
+                    <th>Type</th>
+                    <th>Description</th>
+                </tr>
+                <tr v-for="arg in props.entryData.arguments">
+                    <td class="text-center">{{ interpretXPathIndicators( arg.type ) }}</td>
+                    <td class="text-center">{{ arg.description }}</td>
+                </tr>
+            </table>
+            <div class="mt-2">
+                <strong>Output: </strong>{{ interpretXPathIndicators(props.entryData.output) }}
+            </div>
+            
+
+            <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>
+                </tr>
+                <tr v-for="ex in props.entryData.examples">
+                    <td class="text-center"><code>{{ ex.command }}</code></td>
+                    <td class="text-center">{{ ex.output }}</td>
+                </tr>
+            </table>
+            <div class="mt-2">
+                <a :href="props.entryData.documentationReferenceURL" class="underline" target="_blank" rel="noreferrer noopener">W3C Documentation Reference</a>
+            </div>
+            
+        </div>
+    </div>
+</template>