8 Commits

Author SHA1 Message Date
eb0e895eab fixed formatXML() 2025-02-10 13:24:49 +01:00
8797cac324 Clear code and fix minimize 2025-01-21 12:04:58 +01:00
1056f55887 Commmented redundat endpoints 2025-01-17 10:35:30 +01:00
5e169082fe Added handling error response 2025-01-17 09:57:00 +01:00
6137235d2c Removed redundant log message 2025-01-17 09:51:00 +01:00
276ca1b3bd Forwarded pretify request to Java backend 2025-01-17 09:45:24 +01:00
50e4575102 Added basic formatting feature 2025-01-16 17:54:59 +01:00
ea83e95a00 Created convention file for frontend and adjusted current project files (#277)
Reviewed-on: #277
Reviewed-by: Mikolaj Widla <widlam@noreply.example.com>
Co-authored-by: Adam Bem <adam.bem@zoho.eu>
Co-committed-by: Adam Bem <adam.bem@zoho.eu>
2024-01-04 08:17:44 +01:00
29 changed files with 233 additions and 295 deletions

View File

@@ -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:
"""
@@ -83,7 +86,6 @@ 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
@@ -104,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

View File

@@ -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,9 +77,10 @@ def xsd():
def xslt():
return process_xml(request, "xslt")
@app.route("/prettify", methods=["POST"])
def prettify():
return process_xml(request, "prettify")
# Removed because lxml can't pretify <xs:complexType mixed="true">
# @app.route("/prettify", methods=["POST"])
# def prettify():
# return process_xml(request, "prettify")
@app.route("/minimize", methods=["POST"])
def minimize():

View File

@@ -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();

View File

@@ -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));
}
}

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@@ -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"})

View File

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

View File

@@ -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>
@@ -39,3 +39,4 @@
</template>
<style scoped></style>

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@@ -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);
}

View File

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

View File

@@ -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"]
}

View File

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

View File

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