fixed formatXML()

Backend-libXML/Parser.py

@@ -40,17 +40,20 @@ def formatXML(source: str, prettify: bool) -> str:
     if prolog_start != -1:
         prolog_end = source.find("?>") + 2
         prolog = source[prolog_start:prolog_end]
-        source = source[prolog_end: ]
+        source = source[prolog_end:].strip()
-    
+
     byte_input = BytesIO(source.encode("utf-8"))
     parser = etree.XMLParser(remove_blank_text=True)
     xml = etree.parse(byte_input, parser=parser)
 
     if prettify:
         prolog += "\n"
+        return prolog + etree.tostring(xml, pretty_print=True, encoding="utf-8").decode("utf-8")
 
-    return prolog + etree.tostring(xml, pretty_print=prettify).decode()
+    raw_xml = etree.tostring(xml, encoding="utf-8").decode("utf-8")
+    raw_xml = " ".join(raw_xml.split())
 
+    return prolog + raw_xml
 
 def xpath(source: str, xpath: str) -> str:
     """
@@ -79,11 +82,8 @@ 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"
-                result_string += etree.tostring(e, pretty_print=True).decode() + "\n"
+        return result_string, "node"
-            else:
-                result_string += str(e) + "\n"
-    return result_string, "node"
 
 
 def xsd(source: str, xsd: str) -> bool:
@@ -106,8 +106,6 @@ def xsd(source: str, xsd: str) -> bool:
     except etree.DocumentInvalid as e:
         return str(e)
 
-    
-    
 def xslt(source: str, xslt: str) -> str:
     """
     Method used to transform XML string using XSLT

Backend-libXML/main.py

@@ -36,8 +36,8 @@ def process_xml(request: request, type: str) -> str:
             response_json['result'] = Parser.xslt(data, processorData)
         elif (type == "xpath"):
             response_json['result'], response_json['type'] = Parser.xpath(data, processorData)
-        elif (type == "prettify"):
+        # elif (type == "prettify"):
-            response_json['result'] = Parser.formatXML(data, True)
+        #     response_json['result'] = Parser.formatXML(data, True)
         elif (type == "minimize"):
             response_json['result'] = Parser.formatXML(data, False)
         elif (type == "prettifyHtml"):
@@ -77,9 +77,10 @@ def xsd():
 def xslt():
     return process_xml(request, "xslt")
 
-@app.route("/prettify", methods=["POST"])
+# Removed because lxml can't pretify <xs:complexType mixed="true">
-def prettify():
+# @app.route("/prettify", methods=["POST"])
-    return process_xml(request, "prettify")
+# def prettify():
+#     return process_xml(request, "prettify")
 
 @app.route("/minimize", methods=["POST"])
 def minimize():

Backend/tools-services/src/main/java/com/r11/tools/SparkApplication.java

@@ -44,6 +44,7 @@ public class SparkApplication {
         registry.registerController(new XmlController(gson, logger, saxon, xalan));
         registry.registerController(new MultipleXMLController(gson,logger, saxon));
         registry.registerController(new JsonController(gson, jsongson, logger));
+        registry.registerController(new XmlFormatterController(gson));
 
         registry.register();
 

Backend/tools-services/src/main/java/com/r11/tools/controller/XmlFormatterController.java

@@ -0,0 +1,51 @@
+package com.r11.tools.controller;
+
+import com.google.gson.Gson;
+import com.r11.tools.controller.internal.GlobalControllerManifest;
+import com.r11.tools.controller.internal.HandlerType;
+import com.r11.tools.controller.internal.RestController;
+import com.r11.tools.controller.internal.ScopedControllerManifest;
+import com.r11.tools.controller.internal.XmlJobType;
+import com.r11.tools.model.XMLRequestBody;
+import com.r11.tools.model.XMLResponseBody;
+import com.r11.tools.xml.XmlFormatter;
+import spark.Request;
+import spark.Response;
+
+@GlobalControllerManifest
+public class XmlFormatterController implements RestController {
+    private final Gson gson;
+
+    public XmlFormatterController(Gson gson) {
+        this.gson = gson;
+    }
+
+
+    @ScopedControllerManifest(method = HandlerType.POST, path = "/prettify")
+    public void acceptRequestXslt(Request request, Response response) {
+        acceptRequest(request, response);
+    }
+    private void acceptRequest(Request request, Response response){
+        long timeStart = System.currentTimeMillis();
+        long duration;
+
+        XmlFormatter formatter = new XmlFormatter();
+        XMLRequestBody requestBody;
+        try {
+            requestBody = this.gson.fromJson(request.body(), XMLRequestBody.class);
+        } catch (Exception e) {
+            requestErrorResponse(response, e);
+            return;
+        }
+        String responseString = formatter.formatXML(requestBody.getData());
+        duration = System.currentTimeMillis() - timeStart;
+        XMLResponseBody responseBody = new  XMLResponseBody(responseString,"OK",duration);
+        response.body(this.gson.toJson(responseBody));
+
+    }
+    private void requestErrorResponse(Response response, Exception ex) {
+        XMLResponseBody responseBody = new XMLResponseBody(ex.getMessage(), "ERR", "N/A", -1);
+        response.status(400);
+        response.body(this.gson.toJson(responseBody));
+    }
+}

Backend/tools-services/src/main/java/com/r11/tools/model/XMLRequestBody.java

@@ -4,6 +4,7 @@ import com.google.gson.annotations.SerializedName;
 
 /**
  * POJO class used to contain body of XML related requests
+ *
  * @author Adam Bem
  */
 public class XMLRequestBody {
@@ -15,6 +16,8 @@ public class XMLRequestBody {
     private String processor;
     @SerializedName("version")
     private String version;
+    @SerializedName("pretify")
+    private String pretif;
 
     public String getData() {
         return data;
@@ -31,4 +34,8 @@ public class XMLRequestBody {
     public String getVersion() {
         return version;
     }
+
+    public String getPretif() {
+        return pretif;
+    }
 }

Backend/tools-services/src/main/java/com/r11/tools/model/XMLResponseBody.java

@@ -2,6 +2,7 @@ package com.r11.tools.model;
 
 public class XMLResponseBody {
 
+
     private String result;
     private String status;
     private String processor;
@@ -10,6 +11,11 @@ public class XMLResponseBody {
     // Optional
     private String type;
 
+    public XMLResponseBody(String result, String status, long duration) {
+        this.result = result;
+        this.status = status;
+        this.duration = duration;
+    }
     public XMLResponseBody(String result, String status, String processor) {
         this.result = result;
         this.status = status;

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

@@ -61,13 +61,6 @@ 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");
@@ -108,10 +101,7 @@ public class Xalan implements XmlEngine{
                     for (Node nn = n.getNextSibling(); isTextNode(nn); nn = nn.getNextSibling()) {
                         resultString.append(nn.getNodeValue());
                     }
-                } else if (isAttributeNode(n)) {
+                } else {
-                    resultString.append(n.getNodeValue());
-                }
-                else {
                     ByteArrayOutputStream outputStream = new ByteArrayOutputStream();
                     serializer.transform(new DOMSource(n), new StreamResult(new OutputStreamWriter(outputStream)));
                     resultString.append(outputStream);

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

@@ -0,0 +1,37 @@
+package com.r11.tools.xml;
+
+import org.w3c.dom.Document;
+import org.xml.sax.InputSource;
+
+import javax.xml.parsers.DocumentBuilder;
+import javax.xml.parsers.DocumentBuilderFactory;
+import javax.xml.transform.OutputKeys;
+import javax.xml.transform.Transformer;
+import javax.xml.transform.TransformerFactory;
+import javax.xml.transform.dom.DOMSource;
+import javax.xml.transform.stream.StreamResult;
+import java.io.StringReader;
+import java.io.StringWriter;
+
+public class XmlFormatter {
+    public String formatXML(String inputXML) {
+        try {
+            DocumentBuilderFactory factory = DocumentBuilderFactory.newInstance();
+            factory.setNamespaceAware(true);
+            DocumentBuilder builder = factory.newDocumentBuilder();
+            Document document = builder.parse(new InputSource(new StringReader(inputXML)));
+
+            TransformerFactory transformerFactory = TransformerFactory.newInstance();
+            Transformer transformer = transformerFactory.newTransformer();
+            transformer.setOutputProperty(OutputKeys.INDENT, "yes");
+            transformer.setOutputProperty("{http://xml.apache.org/xslt}indent-amount", "2");
+
+            StringWriter writer = new StringWriter();
+            transformer.transform(new DOMSource(document), new StreamResult(writer));
+            return writer.toString();
+        } catch (Exception e) {
+            e.printStackTrace();
+            return null;
+        }
+    }
+}

Frontend/package-lock.json

@@ -13,7 +13,6 @@
         "@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",
@@ -3072,11 +3071,6 @@
         "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",
@@ -6915,11 +6909,6 @@
         "@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,7 +17,6 @@
     "@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,6 +1,5 @@
 <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';
 
@@ -46,12 +45,13 @@ function getTheme(){
 </script>
 
 <template>
-  <div id="layout" class="font-sans flex h-screen bg-[#f5f7fa] dark:bg-gray-700 dark:from-sky-950 dark:to-indigo-950">
+  <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">
     <SidebarComponent @theme:changed="setTheme" />
-    <div class="relative p-4 w-full m-4 ml-0 bg-[#f5f7fa] dark:bg-gray-700 rounded-2xl overflow-hidden ">
+    <div class="relative p-4 w-full m-4 ml-0 bg-blue-50 dark:bg-gray-700 rounded-2xl overflow-hidden shadow-lg">
       <RouterView></RouterView>
     </div>
   </div>
+  
 </template>
 
 <style scoped></style>

Frontend/src/components/common/CodeEditorComponent.vue

@@ -2,8 +2,7 @@
 import { onBeforeUpdate, inject } from 'vue'
 import { Codemirror } from 'vue-codemirror'
 import { oneDark } from '@codemirror/theme-one-dark'
-import { createTheme} from 'thememirror';
+import { espresso } 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'
@@ -19,47 +18,6 @@ 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'
@@ -79,7 +37,7 @@ function selectTheme() {
   if (isDarkModeSet())
     return oneDark;
   else
-    return lightTheme;
+    return espresso;
 }
 
 function isDarkModeSet(){
@@ -125,4 +83,4 @@ function parseLanguage(name: String){
       />
     
   </div>
-</template>
+</template>

Frontend/src/components/formatter/XMLButtonFormatterComponent.vue

@@ -18,38 +18,37 @@ function process() {
 }
 
 function prepareRequest():Request {
-    var request = new Request(prepareURL(), {
+  return new Request(prepareURL(), {
-        body: prepareRequestBody(),
+      body: prepareRequestBody(),
-        method: "POST"
+      method: "POST"
     })
-    return request
 }
 
 function prepareURL(): string {
-    var mode = "prettify"
+  let mode = "/java/prettify";
-    if (props.isMinimizer)
+  console.log("prepareUrl")
-        mode = "minimize"
+  console.log(props.isMinimizer)
-    return document.location.protocol + "//" + document.location.hostname + "/libxml/" + mode
+  if (props.isMinimizer)
+        mode = "/libxml/minimize"
+    return document.location.protocol + "//" + document.location.hostname + mode
 }
 
 function prepareRequestBody():string {
-    var requestBody = JSON.stringify({
+  return JSON.stringify({
-        "data": props.xml,
+      "data": props.xml,
-        "processorData": "N/A",
+      "processorData": "N/A",
-        "processor": "libxml",
+      "processor": "libxml",
-        "version": "1.0"
+      "version": "1.0"
     })
-    return requestBody
 }
 
 async function fetchRequest(request: Request):Promise<JSON> {
-    var responseBody = await fetch(request)
+  return await fetch(request)
-    .then(response => response.json())
+        .then(response => response.json())
-    .then((body) => {
+        .then((body) => {
-        emit("update:error", body.status == "ERR")
+          emit("update:error", body.status == "ERR")
-        return body
+          return body
-    })
+        })
-    return responseBody
 }
 
 function sendProcessedData(data: JSON) {

Frontend/src/components/landing/LandingComponent.vue

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

@@ -15,16 +15,11 @@ function toggleTooltips() {
 </script>
 
 <template>
-  <div
+    <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 ">
-      :class="[
+        <button :class="{'mr-2' : !areTooltipsHidden }" class="text-xl w-6 dark:text-slate-100" @click="toggleTooltips()">
-      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-lg dark:text-white bg-white dark:bg-gray-700" >
+        <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" >
             <slot></slot>
         </div>
     </div>

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-white dark:bg-gray-600 dark:from-sky-700 dark:to-sky-900">
+    <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-[#2A93B0] dark:text-gray-100  dark:hover:bg-slate-600">
+        <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">
             <span class="flex-1 whitespace-nowrap">{{props.categoryName}}</span>
         </button>
-        <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']">
+        <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']">
             <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-[#bbe3ef] dark:bg-gray-600 dark:text-white dark:hover:bg-[#2A93B0]"
+        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"
         :to="props.pathTo">{{ props.elementContent }}</RouterLink>
 </template>
 

Frontend/src/components/xml/XmlOutputFieldComponent.vue

@@ -7,18 +7,16 @@ 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", "update:engine"]);
+const emit = defineEmits(["update"]);
 
 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([""]);
 
@@ -74,7 +72,7 @@ function changeAvailableVersionsOfXPath() {
     if(engine.value == "xalan" || engine.value == "libxml")
         versionsForCurrentEngine.value = ["1.0"];
     else if (engine.value == "saxon")
-        versionsForCurrentEngine.value = allVersionsOfXpath;
+        versionsForCurrentEngine.value = allVersions;
 }
 
 function selectDefaultEngine() {
@@ -111,23 +109,21 @@ function prepareRequest():Request {
 
 function prepareURL(): string {
     const engineEndpoint = engine.value == "libxml" ? "libxml" : "java";
-
+   
     let tool = props.tool;
-    if (Array.isArray(props.xml) && props.xml.length > 1 && engine.value == "saxon")
+    if (Array.isArray(props.xml) && props.xml.length > 1)
         tool = "multiple/xslt";
 
     return document.location.protocol + "//" + document.location.hostname + "/" + engineEndpoint + "/" + tool;
 }
 
 function selectRequestBodyType() : string {
-    if (Array.isArray(props.xml) && (engine.value == "xalan" || engine.value == "libxml"))
+    if (Array.isArray(props.xml) && props.xml.length > 1)
-      return prepareRequestBodySingleXml(props.xml.at(props.activeTabId!)!.data)
+        return prepareRequestBodyMultiXml();
-    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);
+        return prepareRequestBodySingleXml(props.xml.at(0)!.data);
     else
-      return prepareRequestBodySingleXml(props.xml!);
+        return prepareRequestBodySingleXml(props.xml!);
 }
 
 function prepareRequestBodySingleXml(data: string):string {
@@ -192,10 +188,6 @@ 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");
 }
@@ -210,11 +202,6 @@ function highlightField() {
     return "";
 }
 
-function handleChange() {
-  changeAvailableVersions();
-  emitEngineChange();
-}
-
 </script>
 
 <template>
@@ -222,10 +209,10 @@ function handleChange() {
         <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="handleChange()" class="px-3 rounded-lg border border-slate-400 bg-white dark:text-slate-100 dark:bg-gray-600">
+                <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" 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">
+                <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">
                     <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,11 +10,11 @@ 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', 'update:activeTabId'])
+const emit = defineEmits(['update:modelValue'])
+
 const newTabId = ref(0);
 const activeTabId = ref(0);
 const data = ref('')
@@ -30,9 +30,6 @@ tabs.value.push({
 function sendValue() {
     emit('update:modelValue', tabs.value);
 }
-function emitActiveTab() {
-  emit('update:activeTabId', activeTabId.value);
-}
 
 function updateData(newData: string) {
     data.value = newData;
@@ -76,7 +73,6 @@ function changeActiveTab(id : number) {
     
     tabs.value.at(index)!.data = data.value;
     activeTabId.value = id;
-    emitActiveTab();
     data.value = tabs.value.at(newIndex)!.data;
 
     sendValue();
@@ -132,7 +128,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" :class="[tab.id !== activeTabId && (props.engine === 'xalan' ? 'disabled-tab' : '' || props.engine === 'libxml' ? 'disabled-tab' : '')]">{{ tab.name }}</TabComponent>
+                <TabComponent @click:activate="changeActiveTab" @click:remove="removeTab" v-for="tab in tabs" :id="tab.id" :isActive="tab.id == activeTabId">{{ tab.name }}</TabComponent>
             </div>
             <div class="flex gap-2">
                 <div class="flex items-stretch w-64">

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

@@ -13,9 +13,9 @@ function toggleTooltips() {
 </script>
 
 <template>
-    <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">
+    <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">
         <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-lg dark:text-white bg-white dark:bg-gray-700" >
+        <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>

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-lg shadow-lg bg-[#bbe3ef] dark:bg-[#2A93B0] 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-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-auto rounded-lg dark:text-white bg-[#bbe3ef] dark:bg-gray-700" >
+        <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" >
             <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/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-white dark:bg-gray-700" >
+        <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>

Frontend/src/style.css

@@ -17,7 +17,7 @@
 }
 
 .tool-button {
-    @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]
+    @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
 }
 
 .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-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
+    @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
 }
 
 .text-field-error {
@@ -41,9 +41,5 @@
 }
 
 .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-[#bbe3ef] dark:text-white dark:from-sky-600 dark:to-sky-800
+    @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
-}
-
-.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/LandingView.vue

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

Frontend/src/views/XSLTView.vue

@@ -11,8 +11,6 @@ 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;
@@ -24,10 +22,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" v-model:activeTabId="activeTabId" :engine="engine" :tab-count-limit="3" v-model="xml"></xmlTabbedInputComponent>
+                <xmlTabbedInputComponent stylized-name="XML" :tab-count-limit="3" v-model="xml"></xmlTabbedInputComponent>
                 <xmlInputFieldComponent stylized-name="XSLT" :data="query" v-model="query"></xmlInputFieldComponent>
             </div>
-            <xmlOutputFieldComponent tool="xslt" :xml="xml" :active-tab-id="activeTabId" v-model:engine="engine" :query="query" @update="updateVersion"></xmlOutputFieldComponent>
+            <xmlOutputFieldComponent tool="xslt" :xml="xml" :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: 2137,
+    port: 80,
     host: '0.0.0.0',
     proxy : {
       '/java': {

issue_template/bug.md

@@ -1,21 +0,0 @@
----
-
-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

@@ -1,10 +0,0 @@
----
-
-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.*