Merge branch 'func/xpath_tooltips'

2023-06-29 10:50:51 +02:00
parent dcf3d3c43c b81c96f2a3
commit e5844a913f
17 changed files with 2530 additions and 35 deletions
--- a/Frontend/src/components/mock/HeadersComponent.vue
+++ b/Frontend/src/components/mock/HeadersComponent.vue
@@ -15,12 +15,20 @@ const headerData  = ref(props.headersObject)
 const newHeaderName = ref('');
 const newHeaderValue = ref('');

+function setAddButtonStyle() {
+    return isNewHeaderEmpty() ? "inactive-button" : "tool-button";
+}
+
+function isNewHeaderEmpty() {
+    return newHeaderName.value.trim().length == 0;
+}
+
 function isHeaderEssential(headerName : string){
    return headerName == "Keep-Alive" || headerName == "Connection" || headerName == "Date"
 }

 function setEssentialHeaderStyle(headerName : string){
-    return isHeaderEssential(headerName) ? "text-gray-400" : "tool-button text-red-400";
+    return isHeaderEssential(headerName) ? "inactive-button" : "tool-button";
 }

 function deleteHeader(index : string){
@@ -31,32 +39,36 @@ function deleteHeader(index : string){
 }

 function addNewHeader(name : string, value : string){
-    if (headerData.value != undefined){
-        headerData.value[name] = value;
-        newHeaderName.value = "";
-        newHeaderValue.value = "";
-        emit('update:httpHeaders',headerData.value)
-    }
+    if (headerData.value == undefined)
+        return;
+
+    if (isNewHeaderEmpty()) return;
+
+    headerData.value[name] = value;
+    newHeaderName.value = "";
+    newHeaderValue.value = "";
+    emit('update:httpHeaders',headerData.value);
 }

 </script>

 <template>
-    <div class="w-full gap-4 flex">
-        <div class="w-full">Header name</div>
-        <div class="w-full">Header value</div>
-        <div class="w-1/5"></div>
-    </div>
+    
    <div class="flex flex-col gap-4">
-        <div class="flex gap-9 flex-row" v-for="(item, index) in headerData" :key="index">
-            <input type="text" :value="index" class="text-field" />
-            <input type="text" :value="item" class="text-field" />
-            <button @click="deleteHeader(index)" class="tool-button w-1/5" :class="setEssentialHeaderStyle(index)">Remove</button>
+        <div class="flex flex-row gap-4">
+            <div class="w-full">Header name</div>
+            <div class="w-full">Header value</div>
+            <div class="w-52 px-4"></div>
+        </div>  
+        <div class="flex flex-row gap-4" v-for="(item, index) in headerData" :key="index">
+            <input type="text" :value="index" class="text-field" disabled/>
+            <input type="text" :value="item" class="text-field" disabled/>
+            <button @click="deleteHeader(index)" class="w-56" :class="setEssentialHeaderStyle(index)">Remove</button>
        </div>
-        <div class="flex gap-9 flex-row">
-            <input type="text" v-model="newHeaderName" class="text-field"  />
+        <div class="flex flex-row gap-4">
+            <input type="text" v-model="newHeaderName" @change="() => setAddButtonStyle()" class="text-field"  />
            <input type="text" v-model="newHeaderValue" class="text-field"  />
-            <button class="tool-button w-1/5" @click="addNewHeader(newHeaderName, newHeaderValue)" >Add</button>
+            <button @click="addNewHeader(newHeaderName, newHeaderValue)" :class="setAddButtonStyle()" class="w-56">Add</button>
        </div>
    </div>
 </template>
--- a/Frontend/src/components/mock/HistoryComponent.vue
+++ b/Frontend/src/components/mock/HistoryComponent.vue
@@ -35,7 +35,7 @@ function showHeaders(headers: object, index: number){

 <template>
    <div class="w-full xl:w-5/12 flex flex-col gap-y-4">
-    <HistoryRecords class="h-1/3 overflow-y-scroll" @click:show-headers="showHeaders" @click:show-body="showBody"></HistoryRecords>
+    <HistoryRecords class="xl:h-1/3 overflow-y-scroll" @click:show-headers="showHeaders" @click:show-body="showBody"></HistoryRecords>
    <BodyDetailComponent :content-type="currentContentType" :data="currentShownData" v-if="shownDetail == 'body' "></BodyDetailComponent>
    <HeadersDetailComponent :data="currentShownData"  v-if="shownDetail == 'headers' "></HeadersDetailComponent>
    </div>
--- a/Frontend/src/components/mock/HistoryRecords.vue
+++ b/Frontend/src/components/mock/HistoryRecords.vue
@@ -57,9 +57,9 @@ function refreshHistory(){
            <tr v-for="(item , index) in historyRecords" :key="index">
                <td> {{ parseTimeStamp(item.dateTimeStamp) }} </td>
                <td> {{ item.httpMethod }} </td>
-                <td> <button @click="showHeaders(item.headers, index)">Show Headers</button> </td>
+                <td> <button @click="showHeaders(item.headers, index)" class="underline">Show Headers</button> </td>
                <td> 
-                    <button v-if="item.requestBody.length != 0" @click="showBody(item.requestBody, index, item.headers['content-type'])">Show Body</button> 
+                    <button v-if="item.requestBody.length != 0" @click="showBody(item.requestBody, index, item.headers['content-type'])" class="underline">Show Body</button> 
                    <span v-else>Empty Body</span>
                </td>
            </tr>
--- a/Frontend/src/components/mock/RestMockMessageComponent.vue
+++ b/Frontend/src/components/mock/RestMockMessageComponent.vue
@@ -44,17 +44,18 @@ function showUpdatedCode(newCode : string){
 </script>

 <template>
-  <div class="flex overflow-y-scroll flex-col w-full xl:w-3/5 text-center dark:text-white gap-6">
-    <div>
-      <label for="link">Link</label><br/>
-      <div class="flex gap-4">
+  <div class="flex flex-col w-full xl:w-3/5 text-center dark:text-white gap-6 p-1">
+    <div class="flex flex-col md:flex-row gap-4 items-center md:justify-stretch md:items-end">
+      <div class="flex flex-col w-full">
+        <label for="link">Link</label><br/>
        <div class="p-2 w-full border-slate-400 border-2 rounded-lg">
          <a class="underline" :href="mockMessageLink">{{ mockMessageLink }}</a>
        </div>
-        <SaveComponent v-bind:message-data="messageData"></SaveComponent>
      </div>
+      
+      <SaveComponent v-bind:message-data="messageData"></SaveComponent>
    </div>
-    <div class="flex flex-row w-full gap-64">
+    <div class="flex flex-col md:flex-row w-full gap-4">
      <div class="w-full">
        <label for="contentType">Content Type</label><br/>
        <input  class="text-field" id="contentType" type="text" v-model="messageData.contentType"/>
--- a/Frontend/src/components/mock/SaveComponent.vue
+++ b/Frontend/src/components/mock/SaveComponent.vue
@@ -38,7 +38,7 @@ function hideToast(){
 </script>

 <template>
-    <button @click="prepareAndSendData()" class="w-2/12 tool-button">Save</button>
+    <button @click="prepareAndSendData()" class="tool-button w-full md:w-32">Save</button>

    <div class="fixed bottom-5 right-12">
        <MockedMessageToastComponent @closed:toast_closed="hideToast()" v-bind:visible="visible" v-bind:message="message"/>
--- a/Frontend/src/components/sidebar/SidebarComponent.vue
+++ b/Frontend/src/components/sidebar/SidebarComponent.vue
@@ -24,7 +24,7 @@ onMounted( () => {
 </script>

 <template>
-    <aside class="relative flex-shrink-0 top-0 left-0 z-40 w-48 h-screen" >
+    <aside class="hidden md:flex relative flex-shrink-0 top-0 left-0 z-40 w-48 h-screen" >
        <div class="flex flex-col h-full px-3 pt-2 pb-4 overflow-y-auto">
            <a href="https://release11.com/">
                <img :src="logoR11" class="w-72 h-16 p-2 pt-0"/>
--- a/Frontend/src/components/xml/XmlOutputFieldComponent.vue
+++ b/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>    
--- a/Frontend/src/components/xml/tooltips/TooltipCategoryComponent.vue
+++ b/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>
--- a/Frontend/src/components/xml/tooltips/TooltipComponent.vue
+++ b/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>
--- a/Frontend/src/components/xml/tooltips/TooltipEntryComponent.vue
+++ b/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>