visual update

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

Backend-libXML/Parser.py

@@ -79,11 +79,13 @@ def xpath(source: str, xpath: str) -> str:
     else:
         result_string = ""
         for e in result:
+            if isinstance(e, etree._Element):
                 result_string += etree.tostring(e, pretty_print=True).decode() + "\n"
+            else:
+                result_string += str(e) + "\n"
     return result_string, "node"
 
 
-
 def xsd(source: str, xsd: str) -> bool:
     """
     Method used to validate XML string against XSD schema

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

@@ -61,6 +61,13 @@ public class Xalan implements XmlEngine{
         return nodeType == Node.CDATA_SECTION_NODE || nodeType == Node.TEXT_NODE;
     }
 
+    private boolean isAttributeNode(Node n) {
+        if (n == null)
+            return false;
+        short nodeType = n.getNodeType();
+        return nodeType == Node.CDATA_SECTION_NODE || nodeType == Node.ATTRIBUTE_NODE;
+    }
+
     @Override
     public String processXSLT(XMLMultipleFilesData[] data, String transform) throws Exception {
         throw new UnsupportedOperationException("Xalan does not support multiple files XSLT processing");
@@ -101,7 +108,10 @@ public class Xalan implements XmlEngine{
                     for (Node nn = n.getNextSibling(); isTextNode(nn); nn = nn.getNextSibling()) {
                         resultString.append(nn.getNodeValue());
                     }
-                } else {
+                } else if (isAttributeNode(n)) {
+                    resultString.append(n.getNodeValue());
+                }
+                else {
                     ByteArrayOutputStream outputStream = new ByteArrayOutputStream();
                     serializer.transform(new DOMSource(n), new StreamResult(new OutputStreamWriter(outputStream)));
                     resultString.append(outputStream);

Frontend/README.md

@@ -1,4 +1,4 @@
-# new-frontend
+# Modern frontend for Release 11 Tools
 
 This template should help get you started developing with Vue 3 in Vite.
 
@@ -44,3 +44,46 @@ npm run build
 ```sh
 npm run lint
 ```
+
+## Structure of Vuejs 3 components and views in this project
+
+For this document's needs components and views will be named "modules" even though this is not a correct term for these files officially.
+
+### Main structure
+
+- \<script\>
+- \<template\>
+- \<style\> - if really needed
+
+### Scripts
+
+#### Elements should be placed in this order:
+ - Imports
+ - Props - constant defined by defineProps function, named "props" in code
+This name allows to have readable code sending data to parent module: 
+```TS
+    props.exampleProp
+```
+ - Emits - constant defined by defineEmits function, named "emit" in code. This name allows to have readable code sending data to parent module: 
+```TS
+    emit("update:modelValue", exampleVariable)
+```
+ - Interfaces
+ - Refs - constants defined by ref functions with appropriate values
+ - Injects - variables assigned by "inject" function
+ - Other variables/constants
+ - onFunctions - functions like onBeforeUpdate
+ - Other functions
+
+#### Rules regarding functions:
+ - Functions ought to have descriptive name
+ - Ought to do one thing. ie. function sendRequest should send request, but not prepare request body or process response data
+ - In practice, if function has more than 10 SLoC, it probably should be split
+ - DO NOT use "any" type. Just don't. *Optional
+ - Function used in other function should be placed below it (if possible, as function can be called from many places in the code)
+
+#### Rules regarding variables and refs:
+ - Variables ought to have descriptive name
+
+In cases not covered in this convention, TypeScript, VueJS 3 conventions and good programming practices are applied
+

Frontend/package-lock.json

@@ -13,6 +13,7 @@
         "@codemirror/lang-xml": "^6.0.2",
         "@codemirror/theme-one-dark": "^6.1.2",
         "codemirror": "^6.0.1",
+        "material-icons": "^1.13.14",
         "thememirror": "^2.0.1",
         "vue": "^3.3.4",
         "vue-codemirror": "^6.1.1",
@@ -3071,6 +3072,11 @@
         "node": ">=12"
       }
     },
+    "node_modules/material-icons": {
+      "version": "1.13.14",
+      "resolved": "https://registry.npmjs.org/material-icons/-/material-icons-1.13.14.tgz",
+      "integrity": "sha512-kZOfc7xCC0rAT8Q3DQixYAeT+tBqZnxkseQtp2bxBxz7q5pMAC+wmit7vJn1g/l7wRU+HEPq23gER4iPjGs5Cg=="
+    },
     "node_modules/memorystream": {
       "version": "0.3.1",
       "resolved": "https://registry.npmjs.org/memorystream/-/memorystream-0.3.1.tgz",
@@ -6909,6 +6915,11 @@
         "@jridgewell/sourcemap-codec": "^1.4.13"
       }
     },
+    "material-icons": {
+      "version": "1.13.14",
+      "resolved": "https://registry.npmjs.org/material-icons/-/material-icons-1.13.14.tgz",
+      "integrity": "sha512-kZOfc7xCC0rAT8Q3DQixYAeT+tBqZnxkseQtp2bxBxz7q5pMAC+wmit7vJn1g/l7wRU+HEPq23gER4iPjGs5Cg=="
+    },
     "memorystream": {
       "version": "0.3.1",
       "resolved": "https://registry.npmjs.org/memorystream/-/memorystream-0.3.1.tgz",

Frontend/package.json

@@ -17,6 +17,7 @@
     "@codemirror/lang-xml": "^6.0.2",
     "@codemirror/theme-one-dark": "^6.1.2",
     "codemirror": "^6.0.1",
+    "material-icons": "^1.13.14",
     "thememirror": "^2.0.1",
     "vue": "^3.3.4",
     "vue-codemirror": "^6.1.1",

Frontend/src/App.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { RouterView } from 'vue-router';
+import 'material-icons/iconfont/material-icons.css';
 import SidebarComponent from '@components/sidebar/SidebarComponent.vue';
 import {onMounted, provide, ref } from 'vue';
 
@@ -45,13 +46,12 @@ function getTheme(){
 </script>
 
 <template>
-  <div id="layout" class="font-sans flex h-screen bg-gradient-to-br from-sky-200 to-indigo-200 dark:from-sky-950 dark:to-indigo-950">
+  <div id="layout" class="font-sans flex h-screen bg-[#f5f7fa] dark:bg-gray-700 dark:from-sky-950 dark:to-indigo-950">
     <SidebarComponent @theme:changed="setTheme" />
-    <div class="relative p-4 w-full m-4 ml-0 bg-blue-50 dark:bg-gray-700 rounded-2xl overflow-hidden shadow-lg">
+    <div class="relative p-4 w-full m-4 ml-0 bg-[#f5f7fa] dark:bg-gray-700 rounded-2xl overflow-hidden ">
       <RouterView></RouterView>
     </div>
   </div>
-  
 </template>
 
 <style scoped></style>

Frontend/src/components/CodeEditorComponent.vue

@@ -1,69 +0,0 @@
-<script setup lang="ts">
-import { computed, ref } from 'vue'
-import { Codemirror } from 'vue-codemirror'
-import { oneDark } from '@codemirror/theme-one-dark'
-import {xml} from '@codemirror/lang-xml'
-import {json} from '@codemirror/lang-json'
-import {html} from '@codemirror/lang-html'
-
-
-
-  const props= defineProps({
-    code : {
-        type: String,
-        required: true
-    },
-    config: {
-        type: Object,
-        required: true
-      },
-  })
-
-  const emit = defineEmits(
-    [
-      'update:updatedCode'
-    ]
-  )
-
-  function dataUpdated(newData:String, viewUpdate : any){
-    emit('update:updatedCode',newData)
-  }
-
-  const extensions = computed( ()=> {
-    return  [
-        oneDark,
-        parseLanguage(props.config.language),
-    ]
-
-  } )
-
-  function parseLanguage(name: String){
-    switch(name.toUpperCase()){
-      case "JSON": {
-        return json();
-      }
-      case "HTML": {
-        return html();
-      }
-      default: {
-        return xml();
-      }
-    }
-  }
-
-
-</script>
-
-<template>
-  <div class="editor w-full max-w-full h-full overflow-scroll">
-    
-    <codemirror
-      style="height: 100%; width: 100%; padding:1rem ; border-radius: 1rem; font-size: large;"
-      :model-value="code"
-      @update:model-value="dataUpdated"
-      :extensions="extensions"
-      :disabled="config.disabled"
-      />
-    
-  </div>
-</template>

Frontend/src/components/common/CodeEditorComponent.vue

@@ -2,17 +2,12 @@
 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'
 
-function isDarkModeSet(){
-  return localStorage.theme == "dark";
-}
-
-const theme : string = inject('theme')! ;
-
 const props= defineProps({
   code : {
       type: String,
@@ -24,27 +19,72 @@ 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'
   ]
 )
 
+const theme : string = inject('theme')!;
+let extensions = parseExtensions();
+
+onBeforeUpdate( () => { extensions = parseExtensions(); } )
+
 function dataUpdated(newData:String){
   emit('update:updatedCode',newData)
 }
 
 function selectTheme() {
-  if (isDarkModeSet()) {
+  if (isDarkModeSet())
     return oneDark;
-  }
-  else {
-    return espresso;
-  }
+  else
+    return lightTheme;
 }
 
-let extensions = parseExtensions();
-
+function isDarkModeSet(){
+  return localStorage.theme == "dark";
+}
 
 function parseExtensions(){
   return  [
@@ -68,7 +108,7 @@ function parseLanguage(name: String){
 }
 
 
-onBeforeUpdate( () => { extensions = parseExtensions(); } )
+
 
 </script>
 

Frontend/src/components/common/ThemeSwitcherComponent.vue

@@ -1,30 +1,22 @@
 <script setup lang="ts">
 
-import lightThemeIcon from '@/assets/light_theme.svg';
-import darkThemeIcon from '@/assets/dark_theme.svg';
-
-    const emit = defineEmits([
+const emit = defineEmits([
     "theme",
-    ]);
+]);
 
-
-    function toDarkMode(){
+function toDarkMode(){
     localStorage.theme = "dark";
     document.documentElement.classList.add('dark');
     emit('theme',"dark");
 
-    }
+}
 
-    function toLightMode(){
+function toLightMode(){
     localStorage.theme = "light";
     document.documentElement.classList.remove('dark');
     emit('theme',"light");
 
-    }
-
-    
-
-
+}
 
 </script>
 

Frontend/src/components/formatter/HtmlButtonFormatterComponent.vue

@@ -21,6 +21,8 @@ const emit = defineEmits([
     'update:error'
 ])
 
+const fetchLink = document.location.protocol + "//" + document.location.hostname + "/libxml/html/" + chooseType(props.formatType);
+
 function chooseType(formatType: String){
     if (formatType == "HTML -> XML"){
         return "convert";
@@ -45,8 +47,6 @@ function createBody(){
     });
 }
 
-const fetchLink = document.location.protocol + "//" + document.location.hostname + "/libxml/html/" + chooseType(props.formatType);
-
 
 function process(){
     fetch(fetchLink, {body:createBody(), method: "POST"})

Frontend/src/components/landing/LandingComponent.vue

@@ -1,41 +1,79 @@
 <script setup lang="ts">
-
 </script>
 
 <template>
-  <div class="dark:text-slate-100">
-    <h1 class="text-3xl mb-4">Welcome to Release11 Tools</h1>
+  <div class="dark:text-slate-100 bg-[#f5f7fa] flex w-fit flex-col items-center ">
+
+    <div class="flex my-4 px-4 py-4 w-full rounded-lg shadow-lg flex-col bg-white items-center">
+      <h1 class="text-3xl">Welcome to Release11 Tools</h1>
+
+    </div>
+    <div class="flex my-4 px-4 py-4  w-full rounded-lg shadow-lg flex-col bg-white ">
+      <div class="flex items-center gap-2">
+        <i class="material-icons text-2xl text-[#2A93B0]">construction</i>
         <h2 class="text-xl">Our tool set is split to three main categories:</h2>
+      </div>
       <ul class="list-decimal ml-5">
-      <li><strong>XML</strong> - containing various tools that allow to validate and transform any XML</li>
-      <li><strong>Formatter</strong> - containing tools for formatting text files in various formats</li>
+        <li>
+          <strong>XML</strong> - containing various tools that allow to validate and transform any
+          XML
+        </li>
+        <li>
+          <strong>Formatter</strong> - containing tools for formatting text files in various formats
+        </li>
         <li><strong>REST</strong> - consist of Mock that allows to create mocked REST endpoint</li>
         <li><strong>Encoder</strong> - consist of encoders for Base64 and URL</li>
       </ul>
-    <br/>
+    </div>
+    <br />
+    <div class="flex my-4 px-4 py-4 w-full rounded-lg shadow-lg flex-col bg-white ">
+      <div class="flex items-center gap-2">
+        <i class="material-icons text-2xl text-[#2A93B0]">code</i>
+        <h2 class="text-xl ">XML - Tools:</h2>
+
+      </div>
 
-    <h2 class="text-xl mt-2">XML - Tools:</h2>
       <ul class="list-decimal ml-5">
         <li><strong>XPath</strong> - This is tool that allows to parse XPath on selected XML</li>
         <li><strong>XQuery</strong> - Allows to execute XQuery on provided XML file.</li>
         <li><strong>XSD</strong> - Allows to validate XML against provided XSD schema.</li>
-      <li><strong>XSLT</strong> - Allows to transformate XML using XSLT transformate.</li>
+        <li><strong>XSLT</strong> - Allows to transform XML using XSLT transform.</li>
       </ul>
-    
-    <h2 class="text-xl mt-2">Formatter - Tools:</h2>
-    <p>These are tools that allow to format or minimize files in bespoken formats.</p>
-    
-    <h2 class="text-xl mt-2">REST - Tools:</h2>
-    <p>This is tools that allow to created mocked REST Service that can be used to test REST clients.</p>
-    
-    <h2 class="text-xl mt-2">Encoder - Tools:</h2>
-    <ul class="list-decimal ml-5">
-      <li><strong>Base64</strong> - This is tool allowing to encode text to base64 and decode base64 to text or image.</li>
-      <li><strong>URL</strong> - This tool allow to encode string in the way that is used by browser when you put it in address bar.</li>
-    </ul>
-    
     </div>
-  
+    <div class="flex my-4 px-4 py-4 w-full rounded-lg shadow-lg flex-col bg-white ">
+      <div class="flex items-center gap-2">
+        <i class="material-icons text-2xl text-[#2A93B0]">format_align_left</i>
+        <h2 class="text-xl ">Formatter - Tools:</h2>
+      </div>
+      <p>These are tools that allow to format or minimize files in bespoken formats.</p>
+    </div>
+    <div class="flex my-4 px-4 py-4 w-full rounded-lg shadow-lg flex-col bg-white ">
+      <div class="flex items-center gap-2">
+        <i class="material-icons text-2xl text-[#2A93B0]">lan</i>
+        <h2 class="text-xl ">REST - Tools:</h2>
+      </div>
+      <p>
+        This is tools that allow to created mocked REST Service that can be used to test REST
+        clients.
+      </p>
+    </div>
+    <div class="flex my-4 px-4 py-4 w-full rounded-lg shadow-lg flex-col bg-white ">
+      <div class="flex items-center gap-2">
+        <i class="material-icons  text-2xl text-[#2A93B0]  ">cached</i>
+        <h2 class="text-xl ">Encoder - Tools:</h2>
+      </div>
+      <ul class="list-decimal ml-5">
+        <li>
+          <strong>Base64</strong> - This is tool allowing to encode text to base64 and decode base64
+          to text or image.
+        </li>
+        <li>
+          <strong>URL</strong> - This tool allow to encode string in the way that is used by browser
+          when you put it in address bar.
+        </li>
+      </ul>
+    </div>
+  </div>
 </template>
 
 <style scoped></style>

Frontend/src/components/man/ElementDescription.vue

@@ -1,9 +1,5 @@
 <script setup lang="ts">
 
-import { ref } from 'vue'
-
-
-
 const props = defineProps(
     {
         name: {type: String, required: true}

Frontend/src/components/man/ImgMan.vue

@@ -1,9 +1,5 @@
 <script setup lang="ts">
 
-import { ref } from 'vue'
-
-
-
 const props = defineProps(
     {
         imgPath: {type: String, required: true},

Frontend/src/components/man/ManTooltipComponent.vue

@@ -1,18 +1,6 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 
-
-// const props = defineProps({
-//     version: {
-//         type: String,
-//         required: true
-//     },
-//     toolType: {
-//         type: String,
-//         required: true
-//     }
-// })
-
 const emit = defineEmits([
     "update:visible"
 ])
@@ -27,11 +15,16 @@ function toggleTooltips() {
 </script>
 
 <template>
-    <div :class="areTooltipsHidden ? 'w-fit' : 'w-5/12'" class="hidden xl:flex 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()">
+  <div
+      :class="[
+      areTooltipsHidden ? 'w-fit' : 'w-5/12',
+      'hidden xl:flex items-stretch p-2 flex-row rounded-lg shadow-lg',
+      'bg-[#bbe3ef] dark:bg-[#2A93B0]'
+    ]"
+  >       <button :class="{'mr-2' : !areTooltipsHidden }" class="text-xl w-6 bg-[#bbe3ef] dark:bg-[#2A93B0]" @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-auto rounded-xl dark:text-white bg-indigo-50 dark:bg-gray-700" >
+        <div id="content" :class="{'hidden' : areTooltipsHidden}" class="w-full flex flex-col gap-4 p-2 overflow-auto rounded-lg dark:text-white bg-white dark:bg-gray-700" >
             <slot></slot>
         </div>
     </div>

Frontend/src/components/mock/BodyDetailComponent.vue

@@ -14,5 +14,5 @@ const props = defineProps(
 </script>
 
 <template>
-    <CodeEditorComponent :code="props.data" :config='{disabled:true, language:props.contentType.replace("application/","")}' />
+    <CodeEditorComponent :code="props.data" :config='{disabled:false, language:props.contentType.replace("application/","")}' />
 </template>

Frontend/src/components/mock/HistoryRecords.vue

@@ -1,6 +1,11 @@
 <script setup lang="ts">
 import {ref, type Ref } from 'vue';
 
+const emit = defineEmits([
+    'click:showHeaders',
+    'click:showBody',
+])
+
 interface historyRecord {
     clientUUID : String,
     dateTimeStamp: String,
@@ -14,15 +19,11 @@ interface Headers {
     [propName: string]: any;
 }
 
-const emit = defineEmits([
-    'click:showHeaders',
-    'click:showBody',
-])
-
-
 const clientUUID = localStorage.getItem("clientUUID")
 const fetchLink = window.location.protocol + "//" + window.location.hostname + "/mock/api/event";
-const historyRecords : Ref<Array<historyRecord>> = ref([])
+const historyRecords : Ref<Array<historyRecord>> = ref([]);
+
+
 fetch(fetchLink+"/"+clientUUID).then(response => response.json()).then(data => { historyRecords.value = data });
 
 function parseTimeStamp(timestamp : String){

Frontend/src/components/mock/MockedMessageToastComponent.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { ref } from 'vue';
 
 const emit = defineEmits([
     'closed:toast_closed',

Frontend/src/components/mock/RestMockMessageComponent.vue

@@ -4,10 +4,6 @@ import HeadersComponent from './HeadersComponent.vue';
 import SaveComponent from './SaveComponent.vue';
 import CodeEditorComponent from '@/components/common/CodeEditorComponent.vue';
 
-const clientUUID = ref('');
-const host = window.location.protocol + "//" + window.location.hostname + "/mock";
-const mockMessageLink = ref("www.google.com");
-
 interface mockedMessageData {
   clientUUID: string;
   contentType: string;
@@ -16,6 +12,10 @@ interface mockedMessageData {
   httpStatus: number;
 }
 
+const clientUUID = ref('');
+const host = window.location.protocol + "//" + window.location.hostname + "/mock";
+const mockMessageLink = ref("www.google.com");
+
 const exampleData : mockedMessageData = {
   clientUUID : "exampleUUID",
   contentType: "application/json",
@@ -23,8 +23,8 @@ const exampleData : mockedMessageData = {
   httpHeaders: {Connection:"keep-alive"},
   httpStatus: 200,
 }
-
 let messageData : Ref<mockedMessageData> = ref(exampleData);
+
 if ( localStorage.clientUUID != undefined ){
     clientUUID.value = localStorage.clientUUID;
 }

Frontend/src/components/sidebar/SidebarMenuElementComponent.vue

@@ -17,11 +17,11 @@ const props = defineProps(
 
 
 <template>
-    <div class="w-full mb-4 p-2 rounded-xl shadow-lg bg-gradient-to-r from-blue-400 to-blue-300 dark:from-sky-700 dark:to-sky-900">
-        <button @click="switchHiddenElement()" type="button" :class="[isActive ? 'rounded-lg' : 'rounded-lg']" class="w-full p-1 text-lg font-normal text-gray-900 transition duration-75 hover:bg-blue-100 dark:text-gray-100  dark:hover:bg-slate-600">
+    <div class="w-full mb-4 p-2 rounded-xl shadow-lg bg-white dark:bg-gray-600 dark:from-sky-700 dark:to-sky-900">
+        <button @click="switchHiddenElement()" type="button" :class="[isActive ? 'rounded-lg' : 'rounded-lg']" class="w-full p-1 text-lg font-normal text-gray-900 transition duration-75 hover:bg-[#2A93B0] dark:text-gray-100  dark:hover:bg-slate-600">
             <span class="flex-1 whitespace-nowrap">{{props.categoryName}}</span>
         </button>
-        <div class="flex flex-col w-full mt-2 py-2 bg-indigo-50 dark:bg-slate-800 rounded-xl font-light overflow-hidden" :class="[isActive ? 'active' : 'hidden']">
+        <div class="flex flex-col w-full mt-2 py-2 bg-white dark:bg-gray-600 rounded-xl font-light overflow-hidden" :class="[isActive ? 'active' : 'hidden']">
             <slot></slot>
         </div>
     </div>

Frontend/src/components/sidebar/SidebarToolLinkComponent.vue

@@ -11,7 +11,7 @@ const props = defineProps(
 
 <template>
     <RouterLink
-        class="w-full text-center py-2 px-4 text-gray-800 transition duration-75 hover:bg-blue-100 dark:text-white dark:hover:bg-slate-600"
+        class="w-full text-center py-2 px-4 text-gray-800 transition duration-75 hover:bg-[#bbe3ef] dark:bg-gray-600 dark:text-white dark:hover:bg-[#2A93B0]"
         :to="props.pathTo">{{ props.elementContent }}</RouterLink>
 </template>
 

Frontend/src/components/xml/XmlInputFieldComponent.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import InsertTemplateComponent from '@components/common/InsertTemplateComponent.vue'
 import XMLButtonFormatterComponent from '@components/formatter/XMLButtonFormatterComponent.vue'
-import { ref } from 'vue'
 import CodeEditor from '@/components/common/CodeEditorComponent.vue'
 
+import { ref } from 'vue'
+
 const props = defineProps(
     {
         stylizedName: {type: String, required: true},

Frontend/src/components/xml/XmlInputFieldToolbarComponent.vue

@@ -1,22 +0,0 @@
-<script setup lang="ts">
-
-import InsertTemplateComponent from '@components/common/InsertTemplateComponent.vue'
-
-const props = defineProps(
-    {
-        prettyName: {type: String, required: true}
-    }
-)
-
-const emit = defineEmits(['update:defaultData'])
-
-function setDefault(data: string) {
-    const emitName = "update:defaultData";
-    emit(emitName, data)
-}
-
-</script>
-
-<template>
-    
-</template>

Frontend/src/components/xml/XmlOutputFieldComponent.vue

@@ -7,16 +7,18 @@ const props = defineProps(
     {
         tool: {type: String, required: true},
         xml: {type: [String, Array<TabData>], required: true},
-        query: {type: String, required: true}
+        query: {type: String, required: true},
+        activeTabId: {type: Number, required: false}
     }
 )
 
-const emit = defineEmits(["update"]);
+const emit = defineEmits(["update", "update:engine"]);
 
 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([""]);
 
@@ -54,6 +56,7 @@ function changeAvailableVersions() {
         changeAvailableVersionsOfXSLT();
     else if (props.tool == "xsd")
         versionsForCurrentEngine.value = ["N/A"];
+
     else if (props.tool == "xpath")
         changeAvailableVersionsOfXPath();
 
@@ -71,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() {
@@ -110,14 +113,16 @@ function prepareURL(): string {
     const engineEndpoint = engine.value == "libxml" ? "libxml" : "java";
 
     let tool = props.tool;
-    if (Array.isArray(props.xml) && props.xml.length > 1)
+    if (Array.isArray(props.xml) && props.xml.length > 1 && engine.value == "saxon")
         tool = "multiple/xslt";
 
     return document.location.protocol + "//" + document.location.hostname + "/" + engineEndpoint + "/" + tool;
 }
 
 function selectRequestBodyType() : string {
-    if (Array.isArray(props.xml) && props.xml.length > 1)
+    if (Array.isArray(props.xml) && (engine.value == "xalan" || engine.value == "libxml"))
+      return prepareRequestBodySingleXml(props.xml.at(props.activeTabId!)!.data)
+    else if (Array.isArray(props.xml) && props.xml.length > 1)
       return prepareRequestBodyMultiXml();
     else if (Array.isArray(props.xml))
       return prepareRequestBodySingleXml(props.xml.at(0)!.data);
@@ -187,6 +192,10 @@ function emitVersionChange() {
     emit("update", version.value);
 }
 
+function emitEngineChange() {
+  emit("update:engine", engine.value);
+}
+
 function isVersionSelectionAvailable() {
     return !(versionsForCurrentEngine.value.length == 1 && versionsForCurrentEngine.value.at(0) == "N/A");
 }
@@ -201,6 +210,11 @@ function highlightField() {
     return "";
 }
 
+function handleChange() {
+  changeAvailableVersions();
+  emitEngineChange();
+}
+
 </script>
 
 <template>
@@ -208,10 +222,10 @@ function highlightField() {
         <div class="flex place-content-between w-full items-center pb-2">
             <span class="dark:text-white">Result:</span>
             <div class="flex space-x-2 overflow-x-auto">
-                <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">
+                <select v-model="engine" name="engine" @change="handleChange()" class="px-3 rounded-lg 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" v-if="isVersionSelectionAvailable()" name="version" @change="emitVersionChange()" class="px-3 rounded-full border border-slate-400 bg-white dark:text-slate-100 dark:bg-gray-600">
+                <select v-model="version" v-if="isVersionSelectionAvailable()" name="version" @change="emitVersionChange()" class="px-3 rounded-lg 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/XmlTabbedInputComponent.vue

@@ -10,13 +10,15 @@ const props = defineProps(
     {
         stylizedName: {type: String, required: true},
         data: {type: Array<TabData>},
-        tabCountLimit: {type: Number, required: false, validator: (value) => typeof value == "number" && value > 0}
+        tabCountLimit: {type: Number, required: false, validator: (value) => typeof value == "number" && value > 0},
+        engine: {type: String, required: true}
     }
 )
-const emit = defineEmits(['update:modelValue'])
-
+const emit = defineEmits(['update:modelValue', 'update:activeTabId'])
 const newTabId = ref(0);
 const activeTabId = ref(0);
+const data = ref('')
+const inputFile = ref()
 
 const tabs = ref(new Array<TabData>);
 tabs.value.push({
@@ -25,13 +27,12 @@ tabs.value.push({
     data: "",
 })
 
-const data = ref('')
-const inputFile = ref()
-
-
 function sendValue() {
     emit('update:modelValue', tabs.value);
 }
+function emitActiveTab() {
+  emit('update:activeTabId', activeTabId.value);
+}
 
 function updateData(newData: string) {
     data.value = newData;
@@ -75,6 +76,7 @@ function changeActiveTab(id : number) {
     
     tabs.value.at(index)!.data = data.value;
     activeTabId.value = id;
+    emitActiveTab();
     data.value = tabs.value.at(newIndex)!.data;
 
     sendValue();
@@ -130,7 +132,7 @@ function findIndexWithID(id : number) : number {
     <div class="flex flex-col w-full h-1/2 lg:h-1/2 flex-none xl:pr-2 2xl:pr-4 pb-2">
         <div class="flex justify-between mb-2">
             <div class="flex gap-2 overflow-x-auto">
-                <TabComponent @click:activate="changeActiveTab" @click:remove="removeTab" v-for="tab in tabs" :id="tab.id" :isActive="tab.id == activeTabId">{{ tab.name }}</TabComponent>
+                <TabComponent @click:activate="changeActiveTab" @click:remove="removeTab" v-for="tab in tabs" :id="tab.id" :isActive="tab.id == activeTabId" :class="[tab.id !== activeTabId && (props.engine === 'xalan' ? 'disabled-tab' : '' || props.engine === 'libxml' ? 'disabled-tab' : '')]">{{ tab.name }}</TabComponent>
             </div>
             <div class="flex gap-2">
                 <div class="flex items-stretch w-64">

Frontend/src/components/xml/XmlToolComponent.vue

@@ -1,83 +0,0 @@
-<script setup lang="ts">
-import { onMounted, ref, watch } from 'vue';
-
-const xml = ref('');
-const transform = ref('');
-const transformPlaceholder = ref('');
-const engine = ref('');
-const result = ref('');
-
-const activeXmlTool = ref('');
-
-async function submit() {
-  const engineEndpoint = engine.value == "libxml" ? "libxml" : "java";
-  const url = document.location.protocol + "//" + document.location.hostname + "/" + engineEndpoint + "/" + activeXmlTool.value;
-
-  var version = "1.0";
-  if (engine.value == "saxon")
-    version = "3.0"
-
-  var requestBody = JSON.stringify({
-    "data": xml.value,
-    "process": transform.value,
-    "processor": engine.value,
-    "version": version
-  });
-
-  var request = new Request(url, {
-    body: requestBody,
-    method: "POST"
-  });
-
-
-  var responseBody = await fetch(request)
-    .then(response => response.json())
-    .then((body) => body);
-
-  result.value = responseBody.result;
-}
-
-watch(activeXmlTool, (tool) => {
-  if (tool == "xpath")
-    transformPlaceholder.value = "XPath";
-  if (tool == "xsd")
-    transformPlaceholder.value = "XSD";
-  if (tool == "xslt")
-    transformPlaceholder.value = "XSLT";
-  if (tool == "xquery")
-    transformPlaceholder.value = "XQuery";
-  
-    transform.value = "";
-})
-
-onMounted(() => {
-  activeXmlTool.value = "xpath";
-});
-</script>
-
-<template>
-  <label for="xpath">XPath</label>
-  <input v-model="activeXmlTool" type="radio" id="xpath" name="xmltool" value="xpath" />
-
-  <label for="xslt">XSLT</label>
-  <input v-model="activeXmlTool" type="radio" id="xslt" name="xmltool" value="xslt" />
-
-  <label for="xsd">XSD</label>
-  <input v-model="activeXmlTool" type="radio" id="xsd" name="xmltool" value="xsd" />
-  
-  <label for="xquery">XQuery</label>
-  <input v-model="activeXmlTool" type="radio" id="xquery" name="xmltool" value="xquery" />
-  <br /><br />
-  <select name="engine" v-model="engine">
-    <option value="saxon" selected>Saxon</option>
-    <option value="xalan">Xalan</option>
-    <option value="libxml">libXML</option>
-  </select>
-  <br />
-  <textarea v-model="xml" id="xml" placeholder="XML"></textarea>
-  <textarea v-model="transform" id="transform" :placeholder="transformPlaceholder"></textarea><br />
-  <button @click="submit">Submit</button><br />
-  <pre><code>{{ result }}</code></pre>
-</template>
-
-<style scoped></style>

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

@@ -13,9 +13,9 @@ function toggleTooltips() {
 </script>
 
 <template>
-    <div class="flex p-2 flex-col rounded-xl shadow-lg bg-gradient-to-r from-gray-300 to-slate-300 dark:from-slate-500 dark:to-slate-600">
+    <div class="flex p-2 flex-col rounded-lg shadow-lg bg-white dark:bg-gray-700 dark:from-slate-500 dark:to-slate-600">
         <button :class="{ 'mb-2' : !isCategoryHidden }" class="dark:text-slate-100 hover:font-bold" @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" >
+        <div id="content" :class="{'hidden' : isCategoryHidden}" class="flex flex-col gap-4 w-full h-fit p-2 rounded-lg dark:text-white bg-white dark:bg-gray-700" >
             <slot></slot>
         </div>
     </div>

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

@@ -58,11 +58,11 @@ function toggleTooltips() {
 </script>
 
 <template>
-    <div :class="areTooltipsHidden ? 'w-fit' : 'w-[26rem]'" 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 ">
+    <div :class="areTooltipsHidden ? 'w-fit' : 'w-[26rem]'" class="hidden xl:flex shrink-0 items-stretch p-2 flex-row rounded-lg shadow-lg bg-[#bbe3ef] dark:bg-[#2A93B0] 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-auto rounded-xl dark:text-white bg-indigo-50 dark:bg-gray-700" >
+        <div id="content" :class="{'hidden' : areTooltipsHidden}" class="w-full flex flex-col gap-4 p-2 overflow-auto rounded-lg dark:text-white bg-[#bbe3ef] dark:bg-gray-700" >
             <TooltipDiffsComponent :tool-name="toolType" :tool-version="props.version"></TooltipDiffsComponent>
             <div class="w-full h-2"> </div>
             <tooltipCategoryComponent v-for="category in selectTooltip()" :key="category.name" :name="category.name">

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
+import TooltipCategoryComponent from './TooltipCategoryComponent.vue';
 import xpathDiffs from '@/assets/tooltips/xpath/xpathdiffs.json';
 import xsltDiffs from '@/assets/tooltips/xslt/xsltdiffs.json';
-import TooltipCategoryComponent from './TooltipCategoryComponent.vue';
 
 
 const props = defineProps({
@@ -10,7 +10,7 @@ const props = defineProps({
 })
 
 function getDiffEntry(toolVersion : String) : string[] {
-    if ( props.toolName == "xpath" ){
+    if ( props.toolName == "xpath" ) {
         switch(toolVersion){
             case "2.0" : {
                 return xpathDiffs.VersionDiffs[0].diffs
@@ -27,7 +27,7 @@ function getDiffEntry(toolVersion : String) : string[] {
         }
     } else if (props.toolName == "xslt") {
         return ["XSLT 2.0"].concat(xsltDiffs.VersionDiffs[0].diffs).concat(["XSLT 3.0"]).concat(xsltDiffs.VersionDiffs[1].diffs) ;
-    } else{
+    } else {
         return ["foo"]
     }
     

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

@@ -48,7 +48,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>
-        <div id="content" :class="{'hidden' : isEntryHidden}" class="w-full p-2 rounded-xl dark:text-white bg-indigo-50 dark:bg-slate-800" >
+        <div id="content" :class="{'hidden' : isEntryHidden}" class="w-full p-2 rounded-xl dark:text-white bg-white dark:bg-gray-700" >
             <h4 class="text-xl mb-2 font-bold text-justify">Description</h4>
             <span class="text-justify">
                 <p>

Frontend/src/style.css

@@ -17,7 +17,7 @@
 }
 
 .tool-button {
-    @apply hover:brightness-110 py-2 px-3 h-fit min-w-fit rounded-full bg-gradient-to-r from-blue-400 to-sky-300  dark:text-white dark:from-sky-600 dark:to-sky-800 hover:bg-blue-400
+    @apply hover:brightness-110 py-2 px-3 h-fit min-w-fit rounded-lg bg-white border border-[#2A93B0] dark:bg-[#2A93B0] dark:text-white dark:from-sky-600 dark:to-sky-800 hover:bg-[#2A93B0]
 }
 
 .text-field {
@@ -25,7 +25,7 @@
 }
 
 .file-selector {
-    @apply block file:border-none file:font-sans file:text-base file:hover:brightness-110 file:py-2 file:px-3 file:h-full file:w-fit file:rounded-full file:bg-gradient-to-r file:from-blue-400 file:to-sky-300  file:dark:text-white file:dark:from-sky-600 file:dark:to-sky-800 file:hover:bg-blue-400 w-fit rounded-full text-sm text-gray-900 border border-gray-300 cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400
+    @apply block file:border-none file:font-sans file:text-base file:hover:brightness-110 file:py-2 file:px-3 file:h-full file:w-fit file:rounded-lg file:bg-white file:from-blue-400 file:to-sky-300  file:dark:text-white file:dark:bg-[#2A93B0] file:dark:from-sky-600 file:dark:to-sky-800 file:hover:bg-[#2A93B0] w-fit rounded-lg text-sm text-gray-900 border border-[#2A93B0] cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400
 }
 
 .text-field-error {
@@ -41,5 +41,9 @@
 }
 
 .tab-active {
-    @apply py-2 px-3 h-fit text-slate-700 border-t border-l border-r border-slate-400 rounded-t-2xl bg-gradient-to-r from-blue-400 to-sky-300  dark:text-white dark:from-sky-600 dark:to-sky-800 hover:bg-blue-400
+    @apply py-2 px-3 h-fit text-slate-700 border-t border-l border-r border-slate-400 rounded-t-2xl bg-[#bbe3ef] dark:text-white dark:from-sky-600 dark:to-sky-800
+}
+
+.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;
 }

Frontend/src/views/Base64EncoderView.vue

@@ -6,17 +6,17 @@ import { ref } from 'vue'
 
 const data : any = ref("")
 const imageData = ref("")
-const DoshowImage = ref(false)
+const doShowImage = ref(false)
 const inputImage = ref()
 
 function setTextFieldValue(newData: string) {
     data.value = newData.toString()
-    DoshowImage.value = false
+    doShowImage.value = false
 }
 
 function showImage(newImage : string){
     imageData.value = "data:image/jpeg;base64,"+newImage
-    DoshowImage.value = true
+    doShowImage.value = true
 }
 
 function convertImageToBase64(file : any){
@@ -32,7 +32,7 @@ function convertImageToBase64(file : any){
 function clear(){
     data.value = ""
     imageData.value = ""
-    DoshowImage.value = false
+    doShowImage.value = false
     inputImage.value.value = null
 }
 
@@ -65,7 +65,7 @@ function clear(){
     </div>
     
     <div id="layoutRight" class="w-full xl:w-1/2 min-h-[66%] xl:h-full">
-        <div class="border-2 rounded-lg border-gray-300 dark:border-gray-600 min-h-[50%]" v-on="DoshowImage">
+        <div class="border-2 rounded-lg border-gray-300 dark:border-gray-600 min-h-[50%]" v-on="doShowImage">
             <img :src="imageData"/>
         </div>
         

Frontend/src/views/LandingView.vue

@@ -10,6 +10,9 @@ export default {
 
 
 <template>
+  <div class="flex rounded-lg items-center bg-[#f5f7fa]  justify-center ">
     <LandingComponent></LandingComponent>
+  </div>
+
 </template>
 

Frontend/src/views/XSLTView.vue

@@ -11,6 +11,8 @@ import { ref } from 'vue';
 const xml = ref(new Array<TabData>);
 const query = ref('');
 const version = ref('');
+const engine = ref('')
+const activeTabId = ref(0)
 
 function updateVersion(newVersion: string) {
     version.value = newVersion;
@@ -22,10 +24,10 @@ function updateVersion(newVersion: string) {
     <div id="layout" class="flex flex-row w-full h-full">
         <div class="flex flex-col 2xl:flex-row w-full xl:w-7/12 grow overflow-hide pr-2">
             <div class="flex flex-col w-full 2xl:w-1/2 h-2/3 2xl:h-full flex-none items-center">
-                <xmlTabbedInputComponent stylized-name="XML" :tab-count-limit="3" v-model="xml"></xmlTabbedInputComponent>
+                <xmlTabbedInputComponent stylized-name="XML" v-model:activeTabId="activeTabId" :engine="engine" :tab-count-limit="3" v-model="xml"></xmlTabbedInputComponent>
                 <xmlInputFieldComponent stylized-name="XSLT" :data="query" v-model="query"></xmlInputFieldComponent>
             </div>
-            <xmlOutputFieldComponent tool="xslt" :xml="xml" :query="query" @update="updateVersion"></xmlOutputFieldComponent>
+            <xmlOutputFieldComponent tool="xslt" :xml="xml" :active-tab-id="activeTabId" v-model:engine="engine" :query="query" @update="updateVersion"></xmlOutputFieldComponent>
         </div>
         <TooltipComponent tool-type="xslt" :version="version"></TooltipComponent>
     </div>

Frontend/vite.config.ts

@@ -9,7 +9,7 @@ export default defineConfig({
     vue(),
   ],
   server:{
-    port: 80,
+    port: 2137,
     host: '0.0.0.0',
     proxy : {
       '/java': {

Samples/xquery/xquery.json

@@ -1,10 +1,6 @@
 {
     "data": "<people><person><name>John</name><age>67</age></person><person><name>Anna</name><age>69</age></person></people>",
-<<<<<<< HEAD
-    "process": "for $x in //person return string($x/name)",
-=======
     "processorData": "for $x in //person return string($x/name)",
->>>>>>> 307e732608fca31b60027b417412691ff0e1c2f0
     "processor": "saxon",
     "version": "3.1"
 }

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.*