Merge remote-tracking branch 'origin/Add_xslt_parameters' into Add_xslt_parameters

revert Commmented redundat endpoints

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

@@ -10,6 +10,8 @@ import org.apache.logging.log4j.Logger;
 import spark.Request;
 import spark.Response;
 
+import java.io.StringWriter;
+
 /**
  * Controller used to handle XML tools: XPath, XSD validation, XQuery and XSLT
  * @author Adam Bem
@@ -48,9 +50,14 @@ public class XmlController implements RestController {
 
     @ScopedControllerManifest(method = HandlerType.POST, path = "/xslt")
     public void acceptRequestXslt(Request request, Response response) {
+        System.out.println("received xslt");
         acceptRequest(request, response, XmlJobType.XSLT);
     }
-
+    @ScopedControllerManifest(method = HandlerType.POST, path = "/xslt/param")
+    public void acceptRequestXsltAddParam(Request request, Response response) {
+        System.out.println("received param");
+        acceptRequest(request, response, XmlJobType.XSLT_PARAM);
+    }
     private void acceptRequest(Request request, Response response, XmlJobType xmlJobType) {
         XMLRequestBody requestBody;
         try {
@@ -60,7 +67,12 @@ public class XmlController implements RestController {
             return;
         }
 
-        if (requestBody.getProcessor() == null) {
+        if (requestBody.getProcessor() == null ) {
+            if(requestBody.getProcessorData() != null){
+                processRequest(new XmlJob(response, requestBody, xmlJobType));
+                return;
+            }
+            System.out.println("getProcessor=null");
             invalidEngineSelectedResponse(response);
             return;
         }
@@ -91,10 +103,9 @@ public class XmlController implements RestController {
             responseBody.setDuration(duration);
 
             xmlJob.getResponse().status(200);
-
-            this.logger.info("Request (" + xmlJob.getXmlJobType() + ", " +
+           /* this.logger.info("Request (" + xmlJob.getXmlJobType() + ", " +
                     xmlJob.getEngine().getVersion() +
-                    ") processed in " + duration + " ms.");
+                    ") processed in " + duration + " ms.");*/
 
         } catch (Exception ex) {
             responseBody = processingErrorResponse(ex, xmlJob);
@@ -129,6 +140,13 @@ public class XmlController implements RestController {
 
         String result = null;
         switch (xmlJob.getXmlJobType()) {
+            case XSLT_PARAM:
+                System.out.println("xstl_param");
+                System.out.println(requestBody.getProcessorData());
+                System.out.println(requestBody.getParamName());
+                System.out.println(requestBody.getParamValue());
+                result = addParam(requestBody.getProcessorData(), requestBody.getParamName(), requestBody.getParamValue());
+                break;
             case XSLT:
                 result = engine.processXSLT(requestBody.getData(), requestBody.getProcessorData());
                 break;
@@ -141,7 +159,16 @@ public class XmlController implements RestController {
                         requestBody.getVersion());
                 break;
         }
-        return new XMLResponseBody(result, "OK", requestBody.getVersion());
+        System.out.println("can we get here?");
+        return new XMLResponseBody(result, "OK", requestBody.getProcessorData());
+    }
+
+    private String addParam(String processorData, String paramName, String paramValue) {
+        System.out.println("addParamSaxon");
+        processorData= processorData.replace("<xsl:template match=\"/\">", "<xsl:param name=\""+paramName+"\" select=\"'"+paramValue+"'\"/>\n\t\t<xsl:template match=\"/\">");
+        StringWriter sw = new StringWriter();
+        sw.write(processorData);
+        return sw.toString();
     }
 
     private XMLResponseBody processingErrorResponse(Exception ex, XmlJob xmlJob) {

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

@@ -7,7 +7,7 @@ import spark.Response;
 public class XmlJob {
     private final Response response;
     private final XMLRequestBody requestBody;
-    private final XmlEngine engine;
+    private XmlEngine engine;
     private final XmlJobType xmlJobType;
 
     public XmlJob(Response response, XMLRequestBody requestBody, XmlEngine engine, XmlJobType xmlJobType) {
@@ -16,7 +16,11 @@ public class XmlJob {
         this.engine = engine;
         this.xmlJobType = xmlJobType;
     }
-
+    public XmlJob(Response response, XMLRequestBody requestBody, XmlJobType xmlJobType) {
+        this.response = response;
+        this.requestBody = requestBody;
+        this.xmlJobType = xmlJobType;
+    }
     public Response getResponse() {
         return response;
     }

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

@@ -1,7 +1,7 @@
 package com.r11.tools.controller.internal;
 
 public enum XmlJobType {
-    XPath("XPath"), XSD("XSD"), XQuery("XQuery"), XSLT("XSLT");
+    XPath("XPath"), XSD("XSD"), XQuery("XQuery"), XSLT("XSLT"), XSLT_PARAM("XSLT_PARAM");
 
     XmlJobType(String type) {
     }

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

@@ -15,19 +15,20 @@ public class XMLRequestBody {
     private String processor;
     @SerializedName("version")
     private String version;
+    @SerializedName("paramName")
+    private String paramName;
+    @SerializedName("paramValue")
+    private String paramValue;
 
     public String getData() {
         return data;
     }
-
-    public String getProcessorData() {
-        return processorData;
-    }
-
+    public String getProcessorData() {return processorData;}
+    public String getParamName() {return paramName;}
+    public String getParamValue() {return paramValue;}
     public String getProcessor() {
         return processor;
     }
-
     public String getVersion() {
         return version;
     }

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

@@ -9,9 +9,6 @@ public interface XmlEngine {
     XPathQueryResult processXPath(String data, String query, String version) throws Exception;
     String processXSLT(String data, String transform) throws Exception;
     String validate(String data, String xsd) throws Exception;
-
     String executeXQuery(String data, String xquery, String version) throws Exception;
-
     public String getVersion();
-
 }

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/src/components/XsltParamComponent.vue

@@ -0,0 +1,107 @@
+<script setup lang="ts">
+import {ref} from 'vue'
+
+const emit = defineEmits<{
+  (event: 'update-value', value: string): void;
+}>();
+
+const props = defineProps({
+  xslt: {type: String, required: true}
+})
+
+
+const sendToParent = (xslt: string) => {
+  emit('update-value', xslt);
+};
+const nameInput = ref('')
+const valueInput = ref('')
+
+const options = ref<{ name: string }[]>([
+  { name: "Add Param" },
+  { name: "Set Param" },
+]);
+
+const selectedOption = ref(options.value[0].name);
+
+
+const selectedFunction = () => {
+  if(selectedOption.value === "Add Param") {
+    sendRequest("addParam");
+  }
+  else {
+    sendRequest("setParam")
+    }
+};
+const sendRequest = (type:string) => {
+  console.log(type)
+  let request: Request = prepareRequest(type)
+  fetchRequest(request).then((body) => {
+    const result = (body as any).result;
+    sendToParent(result);
+  });
+}
+
+function prepareRequest(type :string): Request {
+  let request = new Request(prepareURL(), {
+    body: prepareRequestBody(type),
+    method: "POST"
+  });
+  return request
+}
+
+function prepareURL(): string {
+  //const engineEndpoint = engine.value == "libxml" ? "libxml" : "java";
+  return document.location.protocol + "//" + document.location.hostname + "/" + "java" + "/xslt/param";
+  //return "http://localhost:8081/xslt/param";
+}
+
+function prepareRequestBody(type: string): string {
+  let requestBody = JSON.stringify({
+    "processorData": props.xslt,
+    "paramName": nameInput.value,
+    "paramValue": valueInput.value,
+    "type": type
+  });
+  console.log(requestBody);
+  return requestBody;
+}
+
+async function fetchRequest(request: Request): Promise<JSON> {
+  console.log(request)
+  let responseBody = await fetch(request)
+  return await responseBody.json()
+     // .then(response => response.json())
+   //   .then((body) => body)
+  //console.log(responseBody);
+  //return responseBody
+}
+
+</script>
+
+<template>
+  <select
+      v-model="selectedOption"
+      class="px-3 rounded-full border border-slate-400 bg-white dark:text-slate-100 dark:bg-gray-600 w-1/3"
+  >
+    <option v-for="option in options" :value="option.name" :key="option.name">
+      {{ option.name }}
+    </option>
+  </select>
+
+  <input
+      id="NameTextInput"
+      v-model="nameInput"
+      class="text-input px-3 rounded-full border border-slate-400 bg-white dark:text-slate-100 dark:bg-gray-600 w-1/3"
+      type="text"
+      placeholder="Name"
+  />
+  <input
+      id="ValueTextInput"
+      v-model="valueInput"
+      class="text-input px-3 rounded-full border border-slate-400 bg-white dark:text-slate-100 dark:bg-gray-600 w-1/3"
+      type="text"
+      placeholder="Value"
+  />
+  <button class="tool-button" @click="selectedFunction">{{selectedOption}}</button>
+</template>
+

Frontend/src/components/common/CodeEditorComponent.vue

@@ -7,12 +7,6 @@ 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,
@@ -30,21 +24,25 @@ 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;
-  }
 }
 
-let extensions = parseExtensions();
-
+function isDarkModeSet(){
+  return localStorage.theme == "dark";
+}
 
 function parseExtensions(){
   return  [
@@ -68,7 +66,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([
+    "theme",
+]);
 
-    const emit = defineEmits([
-        "theme",
-    ]);
+function toDarkMode(){
+    localStorage.theme = "dark";
+    document.documentElement.classList.add('dark');
+    emit('theme',"dark");
 
+}
 
-    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");
-
-    }
-
-    
-
+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

@@ -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 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>

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"
 ])

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/xml/XmlInputFieldComponent.vue

@@ -1,13 +1,15 @@
 <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 XsltParamComponent from '@/components/XsltParamComponent.vue'
+
+import {ref} from 'vue'
 
 const props = defineProps(
     {
-        stylizedName: {type: String, required: true},
-        data: {type: String},
+      stylizedName: {type: String, required: true},
+      data: {type: String},
     }
 )
 const emit = defineEmits(['update:modelValue'])
@@ -16,54 +18,72 @@ const data = ref('')
 const inputFile = ref()
 
 function sendValue() {
-    emit('update:modelValue', data.value)
+  emit('update:modelValue', data.value)
 }
 
+
 function updateData(newData: string, clearFileSelector: boolean = true) {
-    data.value = newData
-    if (clearFileSelector)
-        inputFile.value.value = '';
-    sendValue()
+  data.value = newData
+  if (clearFileSelector)
+    inputFile.value.value = '';
+  sendValue()
 }
 
 function clear() {
-    updateData('')
+  updateData('')
 }
 
 function canBeFormatted() {
-    return props.stylizedName.toLowerCase() == 'xml' || 
-           props.stylizedName.toLowerCase() == 'xsd' || 
-           props.stylizedName.toLowerCase() == 'xslt'
+  return props.stylizedName.toLowerCase() == 'xml' ||
+      props.stylizedName.toLowerCase() == 'xsd' ||
+      props.stylizedName.toLowerCase() == 'xslt'
 }
 
-function readFile(file : any) {
-    
-    const reader = new FileReader()
-    reader.onloadend = () => {
-        let result = reader.result?.toString()
-        if (typeof result == "string")
-            updateData(result, false);
-            
-    }
-    reader.readAsText(file.target.files[0])
+function addParameters() {
+  return props.stylizedName?.toLowerCase() == "xslt"
 }
 
+function readFile(file: any) {
+
+  const reader = new FileReader()
+  reader.onloadend = () => {
+    let result = reader.result?.toString()
+    if (typeof result == "string")
+      updateData(result, false)
+
+  }
+  reader.readAsText(file.target.files[0])
+}
+const handleUpdateValue = (value: string) => {data.value = value};
+
+
 </script>
 
 <template>
-    <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 place-content-between w-full items-center">
-            <span class="dark:text-white mr-2">{{ stylizedName }}</span>
-            <div class="flex space-x-2 pb-2 overflow-x-auto">
-                <div class="flex items-stretch w-64">
-                    <input id="fileLoader" ref="inputFile" class="file-selector" type="file" accept=".xml,.xql,.xquery,.xslt,text/xml,text/plain" @change="readFile" />
-                </div>
-                
-                <InsertTemplateComponent :stylized-name="props.stylizedName" @update:default-data="updateData"></InsertTemplateComponent>
-                <XMLButtonFormatterComponent v-if="canBeFormatted()" :xml="data" @update:result="(data:any) => updateData(data.result)"></XMLButtonFormatterComponent>
-                <button class="tool-button" @click="clear">Clear</button>
-            </div>
-        </div>
-        <CodeEditor @update:updated-code="updateData" v-model="data" :code="data" :config="{disabled:false, language:stylizedName}"></CodeEditor>
+  <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>
+
+    <div class="flex place-content-between w-full items-center">
+
+      <span class="dark:text-white mr-2">{{ stylizedName }}</span>
+
+      <div class="flex items-stretch w-64">
+        <input id="fileLoader" ref="inputFile" class="file-selector" type="file" accept=".xml,.xql,.xquery,.xslt,text/xml,text/plain" @change="readFile"/>
+      </div>
+
+      <div class="flex space-x-2 pb-2 overflow-x-auto">
+        <InsertTemplateComponent :stylized-name="props.stylizedName" @update:default-data="updateData"></InsertTemplateComponent>
+        <XMLButtonFormatterComponent v-if="canBeFormatted()" :xml="data" @update:result="(data:any) => updateData(data.result)"></XMLButtonFormatterComponent>
+        <button class="tool-button" @click="clear">Clear</button>
+      </div>
     </div>
+
+    <div class="flex place-content-between w-full items-center">
+      <div v-if="addParameters()" class="flex justify-end space-x-2 pb-2 overflow-x-auto ml-auto">
+        <XsltParamComponent @update-value="handleUpdateValue" :xslt="data"/>
+      </div>
+    </div>
+
+    <CodeEditor @update:updated-code="updateData" v-model="data" :code="data" :config="{disabled:false, language:stylizedName}"></CodeEditor>
+  </div>
 </template>

Frontend/src/components/xml/XmlTabbedInputComponent.vue

@@ -17,6 +17,8 @@ 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({
@@ -25,10 +27,6 @@ tabs.value.push({
     data: "",
 })
 
-const data = ref('')
-const inputFile = ref()
-
-
 function sendValue() {
     emit('update:modelValue', tabs.value);
 }

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>