templates section done

Reviewed-on: #299
Reviewed-by: Wojciech Szewczyk <szewczyw@noreply.example.com>

Backend-libXML/Parser.py

@@ -1,5 +1,3 @@
-from typing import Any
-
 from lxml import etree, html
 from io import BytesIO
 

Backend/tools-services/src/main/java/com/r11/tools/xml/Xalan.java

@@ -18,10 +18,6 @@ import javax.xml.transform.stream.StreamSource;
 import javax.xml.validation.Schema;
 import javax.xml.validation.SchemaFactory;
 import javax.xml.validation.Validator;
-import javax.xml.xpath.XPath;
-import javax.xml.xpath.XPathConstants;
-import javax.xml.xpath.XPathExpression;
-import javax.xml.xpath.XPathFactory;
 import java.io.ByteArrayOutputStream;
 import java.io.OutputStreamWriter;
 import java.io.StringReader;

Frontend/src/components/common/CodeEditorComponent.vue

@@ -2,7 +2,8 @@
 import { onBeforeUpdate, inject } from 'vue'
 import { Codemirror } from 'vue-codemirror'
 import { oneDark } from '@codemirror/theme-one-dark'
-import { espresso } from 'thememirror';
+import { createTheme} from 'thememirror';
+import {tags as t} from '@lezer/highlight';
 import {xml} from '@codemirror/lang-xml'
 import {json} from '@codemirror/lang-json'
 import {html} from '@codemirror/lang-html'
@@ -18,6 +19,47 @@ const props= defineProps({
     },
 })
 
+const lightTheme = createTheme({
+	variant: 'light',
+	settings: {
+		background: '#FFFFFF',
+		foreground: '#000000',
+		caret: '#000000',
+		selection: '#80C7FF',
+		gutterBackground: '#FFFFFF',
+		gutterForeground: '#00000070',
+		lineHighlight: '#C1E2F840',
+	},
+	styles: [
+		{
+			tag: t.comment,
+			color: '#AAAAAA',
+		},
+		{
+			tag: [t.keyword, t.operator, t.typeName, t.tagName, t.propertyName],
+			color: '#2F6F9F',
+			fontWeight: 'bold',
+		},
+		{
+			tag: [t.attributeName, t.definition(t.propertyName)],
+			color: '#4F9FD0',
+		},
+		{
+			tag: [t.className, t.string, t.special(t.brace)],
+			color: '#CF4F5F',
+		},
+		{
+			tag: t.number,
+			color: '#CF4F5F',
+			fontWeight: 'bold',
+		},
+		{
+			tag: t.variableName,
+			fontWeight: 'bold',
+		},
+	],
+});
+
 const emit = defineEmits(
   [
     'update:updatedCode'
@@ -37,7 +79,7 @@ function selectTheme() {
   if (isDarkModeSet())
     return oneDark;
   else
-    return espresso;
+    return lightTheme;
 }
 
 function isDarkModeSet(){
@@ -83,4 +125,4 @@ function parseLanguage(name: String){
       />
     
   </div>
-</template>
+</template>

Frontend/src/components/xml/XmlOutputFieldComponent.vue

@@ -18,6 +18,7 @@ const result = ref('');
 
 let enginesForCurrentTool = ref(["saxon", "xalan", "libxml"]);
 
+const allVersionsOfXpath = ["2.0", "3.0", "3.1"];
 const allVersions = ["1.0", "2.0", "3.0", "3.1"];
 let versionsForCurrentEngine = ref([""]);
 
@@ -73,7 +74,7 @@ function changeAvailableVersionsOfXPath() {
     if(engine.value == "xalan" || engine.value == "libxml")
         versionsForCurrentEngine.value = ["1.0"];
     else if (engine.value == "saxon")
-        versionsForCurrentEngine.value = allVersions;
+        versionsForCurrentEngine.value = allVersionsOfXpath;
 }
 
 function selectDefaultEngine() {

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

@@ -7,6 +7,8 @@ const props = defineProps({
     tool:{type: String, required:true}
 })
 
+const activeIndex = ref<number | null>(null)
+
 function toggleTooltips() {
     isEntryHidden.value = !isEntryHidden.value;
 }
@@ -20,7 +22,15 @@ function entryHasArguments() {
 }
 
 function entryHasExamples() {
-    return props.entryData.examples.length > 0;
+    if("examples" in props.entryData){
+      return props.entryData.examples.length > 0;
+    }
+}
+
+function entryHasXsltExamples() {
+    if("xsltExamples" in props.entryData){
+      return props.entryData.xsltExamples.length > 0;
+    }
 }
 
 function interpretXPathIndicators( elementType:string ):string {
@@ -47,7 +57,7 @@ function interpretXPathIndicators( elementType:string ):string {
 
 <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 hover:font-bold" @click="toggleTooltips()">{{ props.entryData.name }}</button>
+        <button :class="{ 'mb-2' : !isEntryHidden }" class="dark:text-slate-100 hover:font-bold overflow-auto" @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">
@@ -55,6 +65,29 @@ function interpretXPathIndicators( elementType:string ):string {
                     {{ props.entryData.description }}
                 </p>
             </span>
+
+            <br/><h4 class="text-xl mb-2 font-bold text-justify">Examples:</h4>
+            <table v-if="entryHasXsltExamples()" class="w-full border">
+                <tr>
+                  <th class="font-normal">Use of {{ props.entryData.name }} example:</th>
+                </tr>
+                <tr v-for="(ex, index) in props.entryData.xsltExamples" :key="index">
+                    <td
+                        class="relative font-bold cursor-pointer bg-white p-4 border hover-effect"
+                        @mouseenter="activeIndex = index"
+                        @mouseleave="activeIndex = null"
+                    >
+                        <code>{{ ex.xslt }}</code>
+                      <transition name="fade">
+                        <div v-if="activeIndex === index" class="popup">
+                          <code>{{ ex.xslt }}</code>
+                        </div>
+                      </transition>
+                    </td>
+                </tr>
+            </table>
+            <br><span class="font-bold flex justify-center items-center w-full h-full">Hover over the text to enlarge!</span>
+
             <div id="xpathArgTooltip" v-if="tool == 'xpath'"> 
                 <h4 class="text-xl mt-4 mb-2 font-bold">Args and Output</h4>
             <table v-if="entryHasArguments()" class="w-full">

Frontend/src/style.css

@@ -47,3 +47,32 @@
 .disabled-tab {
     @apply py-2 px-3 h-fit text-slate-400 border-t border-l border-r border-slate-300 rounded-t-2xl bg-gradient-to-r from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 pointer-events-none opacity-50;
 }
+
+.hover-effect {
+    @apply border-black bg-blue-50;
+    font-size: 10px;
+}
+
+.hover-effect:hover {
+    @apply bg-blue-200;
+}
+
+.popup {
+    @apply fixed top-1/2 left-1/2 bg-blue-400 text-white p-5 rounded-lg shadow-lg text-sm;
+    transform: translate(-30%, -35%) scale(1.3) translate3d(-30%, 0px, 0px);
+    z-index: 1000;
+    white-space: pre-wrap;
+}
+
+.fade-enter-active {
+    @apply duration-500 opacity-100;
+}
+
+.fade-leave-active {
+    animation: fadeOut 0.5s ease-in-out 800ms forwards;
+}
+
+@keyframes fadeOut {
+    0% { opacity: 1; }
+    100% { opacity: 0; }
+}

issue_template/bug.md

@@ -0,0 +1,21 @@
+---
+
+name: "Bug template"    
+about: "This template is for reporting bugs"  
+title: "Bug"    
+
+---
+
+## Description
+*A clear and concise description of the issue.*
+
+### Selected Fields
+- **Engine:** [Specify the engine used]
+- **Version:** [Specify the version]
+- **Tool:** [Specify the currently used tool]
+
+### Data: 
+*Paste used xml/xslt/json etc...*
+
+## Additional Context
+*Any other information that might help with this issue.*

issue_template/feature.md

@@ -0,0 +1,10 @@
+---
+
+name: "Feature request template"    
+about: "This template is for requesting features"    
+title: "Feature request" 
+
+---
+
+## Feature Request 
+*Describe the feature you’d like to see and why it’s useful.*