finished_milestone (#279)

Co-authored-by: Adam Bem <adam.bem@zoho.eu>
Reviewed-on: #279
Co-authored-by: widlam <mikolaj.widla@gmail.com>
Co-committed-by: widlam <mikolaj.widla@gmail.com>

Backend-libXML/Parser.py

@@ -40,20 +40,17 @@ 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:].strip()
-
+        source = source[prolog_end: ]
+    
     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")
 
-    raw_xml = etree.tostring(xml, encoding="utf-8").decode("utf-8")
-    raw_xml = " ".join(raw_xml.split())
+    return prolog + etree.tostring(xml, pretty_print=prettify).decode()
 
-    return prolog + raw_xml
 
 def xpath(source: str, xpath: str) -> str:
     """
@@ -86,6 +83,7 @@ def xpath(source: str, xpath: str) -> str:
         return result_string, "node"
 
 
+
 def xsd(source: str, xsd: str) -> bool:
     """
     Method used to validate XML string against XSD schema
@@ -106,6 +104,8 @@ 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"):
-        #     response_json['result'] = Parser.formatXML(data, True)
+        elif (type == "prettify"):
+            response_json['result'] = Parser.formatXML(data, True)
         elif (type == "minimize"):
             response_json['result'] = Parser.formatXML(data, False)
         elif (type == "prettifyHtml"):
@@ -77,10 +77,9 @@ def xsd():
 def xslt():
     return process_xml(request, "xslt")
 
-# Removed because lxml can't pretify <xs:complexType mixed="true">
-# @app.route("/prettify", methods=["POST"])
-# def prettify():
-#     return process_xml(request, "prettify")
+@app.route("/prettify", methods=["POST"])
+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,7 +44,6 @@ 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

@@ -1,51 +0,0 @@
-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,7 +4,6 @@ import com.google.gson.annotations.SerializedName;
 
 /**
  * POJO class used to contain body of XML related requests
- *
  * @author Adam Bem
  */
 public class XMLRequestBody {
@@ -16,8 +15,6 @@ public class XMLRequestBody {
     private String processor;
     @SerializedName("version")
     private String version;
-    @SerializedName("pretify")
-    private String pretif;
 
     public String getData() {
         return data;
@@ -34,8 +31,4 @@ 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,7 +2,6 @@ package com.r11.tools.model;
 
 public class XMLResponseBody {
 
-
     private String result;
     private String status;
     private String processor;
@@ -11,11 +10,6 @@ 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/XmlFormatter.java

@@ -1,37 +0,0 @@
-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/README.md

@@ -1,4 +1,4 @@
-# Modern frontend for Release 11 Tools
+# new-frontend
 
 This template should help get you started developing with Vue 3 in Vite.
 
@@ -44,46 +44,3 @@ 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/src/components/CodeEditorComponent.vue

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

@@ -7,6 +7,12 @@ 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,25 +30,21 @@ const emit = defineEmits(
   ]
 )
 
-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
+  }
+  else {
     return espresso;
+  }
 }
 
-function isDarkModeSet(){
-  return localStorage.theme == "dark";
-}
+let extensions = parseExtensions();
+
 
 function parseExtensions(){
   return  [
@@ -66,7 +68,7 @@ function parseLanguage(name: String){
 }
 
 
-
+onBeforeUpdate( () => { extensions = parseExtensions(); } )
 
 </script>
 

Frontend/src/components/common/ThemeSwitcherComponent.vue

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

Frontend/src/components/formatter/HtmlButtonFormatterComponent.vue

@@ -21,8 +21,6 @@ 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";
@@ -47,6 +45,8 @@ 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/formatter/XMLButtonFormatterComponent.vue

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

Frontend/src/components/landing/LandingComponent.vue

@@ -19,7 +19,7 @@
       <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>
+      <li><strong>XSLT</strong> - Allows to transformate XML using XSLT transformate.</li>
     </ul>
     
     <h2 class="text-xl mt-2">Formatter - Tools:</h2>
@@ -39,4 +39,3 @@
 </template>
 
 <style scoped></style>
-

Frontend/src/components/man/ElementDescription.vue

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

Frontend/src/components/man/ImgMan.vue

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

Frontend/src/components/man/ManTooltipComponent.vue

@@ -1,6 +1,18 @@
 <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"
 ])

Frontend/src/components/mock/BodyDetailComponent.vue

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

Frontend/src/components/mock/HistoryRecords.vue

@@ -1,11 +1,6 @@
 <script setup lang="ts">
 import {ref, type Ref } from 'vue';
 
-const emit = defineEmits([
-    'click:showHeaders',
-    'click:showBody',
-])
-
 interface historyRecord {
     clientUUID : String,
     dateTimeStamp: String,
@@ -19,11 +14,15 @@ 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,4 +1,5 @@
 <script setup lang="ts">
+import { ref } from 'vue';
 
 const emit = defineEmits([
     'closed:toast_closed',

Frontend/src/components/mock/RestMockMessageComponent.vue

@@ -4,6 +4,10 @@ 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;
@@ -12,10 +16,6 @@ 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);
 
+let messageData : Ref<mockedMessageData> = ref(exampleData);
 if ( localStorage.clientUUID != undefined ){
     clientUUID.value = localStorage.clientUUID;
 }

Frontend/src/components/xml/XmlInputFieldComponent.vue

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

Frontend/src/components/xml/XmlInputFieldToolbarComponent.vue

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

@@ -54,7 +54,6 @@ function changeAvailableVersions() {
         changeAvailableVersionsOfXSLT();
     else if (props.tool == "xsd")
         versionsForCurrentEngine.value = ["N/A"];
-
     else if (props.tool == "xpath")
         changeAvailableVersionsOfXPath();
 

Frontend/src/components/xml/XmlTabbedInputComponent.vue

@@ -17,8 +17,6 @@ const emit = defineEmits(['update:modelValue'])
 
 const newTabId = ref(0);
 const activeTabId = ref(0);
-const data = ref('')
-const inputFile = ref()
 
 const tabs = ref(new Array<TabData>);
 tabs.value.push({
@@ -27,6 +25,10 @@ tabs.value.push({
     data: "",
 })
 
+const data = ref('')
+const inputFile = ref()
+
+
 function sendValue() {
     emit('update:modelValue', tabs.value);
 }

Frontend/src/components/xml/XmlToolComponent.vue

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

Samples/xquery/xquery.json

@@ -1,6 +1,10 @@
 {
     "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"
 }