6 Commits

Author SHA1 Message Date
5bc89fc514 xalan_libxml_issue#283 (#299)
Reviewed-on: #299
Reviewed-by: Wojciech Szewczyk <szewczyw@noreply.example.com>
2025-02-11 17:48:46 +01:00
fa620baa9c xpath_version_change (#300)
Reviewed-on: #300
Reviewed-by: Wojciech Szewczyk <szewczyw@noreply.example.com>
Co-authored-by: Wojciech Mizia <miziawojciech@gmail.com>
Co-committed-by: Wojciech Mizia <miziawojciech@gmail.com>
2025-02-11 17:46:24 +01:00
f3f88ad659 xalan_single_files_frontend (#297)
Reviewed-on: #297
Reviewed-by: Wojciech Szewczyk <szewczyw@noreply.example.com>
Co-authored-by: Wojciech Mizia <miziawojciech@gmail.com>
Co-committed-by: Wojciech Mizia <miziawojciech@gmail.com>
2025-02-05 17:01:23 +01:00
79959c5ff9 issue_tracker (#296)
Co-authored-by: Wojciech Szewczyk <szewczyw@noreply.example.com>
Reviewed-on: #296
Co-authored-by: Wojciech Mizia <miziawojciech@gmail.com>
Co-committed-by: Wojciech Mizia <miziawojciech@gmail.com>
2025-02-05 14:28:20 +01:00
469b5a584f mark_text_doesnt_work (#291)
Updated existing theme so that line highlighting is transparent,  had to add new theme because ovewriting exisiting value was impossible.

Reviewed-on: #291
Reviewed-by: Adam Bem <bema@noreply.example.com>
Co-authored-by: szewczyw <wojtekszewczyk2000@gmail.com>
Co-committed-by: szewczyw <wojtekszewczyk2000@gmail.com>
2025-02-05 14:20:09 +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
23 changed files with 228 additions and 108 deletions

View File

@@ -79,9 +79,11 @@ def xpath(source: str, xpath: str) -> str:
else:
result_string = ""
for e in result:
result_string += etree.tostring(e, pretty_print=True).decode() + "\n"
return result_string, "node"
if isinstance(e, etree._Element):
result_string += etree.tostring(e, pretty_print=True).decode() + "\n"
else:
result_string += str(e) + "\n"
return result_string, "node"
def xsd(source: str, xsd: str) -> bool:

View File

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

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

@@ -2,17 +2,12 @@
import { onBeforeUpdate, inject } from 'vue'
import { Codemirror } from 'vue-codemirror'
import { oneDark } from '@codemirror/theme-one-dark'
import { espresso } from 'thememirror';
import { createTheme} from 'thememirror';
import {tags as t} from '@lezer/highlight';
import {xml} from '@codemirror/lang-xml'
import {json} from '@codemirror/lang-json'
import {html} from '@codemirror/lang-html'
function isDarkModeSet(){
return localStorage.theme == "dark";
}
const theme : string = inject('theme')! ;
const props= defineProps({
code : {
type: String,
@@ -24,27 +19,72 @@ const props= defineProps({
},
})
const lightTheme = createTheme({
variant: 'light',
settings: {
background: '#FFFFFF',
foreground: '#000000',
caret: '#000000',
selection: '#80C7FF',
gutterBackground: '#FFFFFF',
gutterForeground: '#00000070',
lineHighlight: '#C1E2F840',
},
styles: [
{
tag: t.comment,
color: '#AAAAAA',
},
{
tag: [t.keyword, t.operator, t.typeName, t.tagName, t.propertyName],
color: '#2F6F9F',
fontWeight: 'bold',
},
{
tag: [t.attributeName, t.definition(t.propertyName)],
color: '#4F9FD0',
},
{
tag: [t.className, t.string, t.special(t.brace)],
color: '#CF4F5F',
},
{
tag: t.number,
color: '#CF4F5F',
fontWeight: 'bold',
},
{
tag: t.variableName,
fontWeight: 'bold',
},
],
});
const emit = defineEmits(
[
'update:updatedCode'
]
)
const theme : string = inject('theme')!;
let extensions = parseExtensions();
onBeforeUpdate( () => { extensions = parseExtensions(); } )
function dataUpdated(newData:String){
emit('update:updatedCode',newData)
}
function selectTheme() {
if (isDarkModeSet()) {
if (isDarkModeSet())
return oneDark;
}
else {
return espresso;
}
else
return lightTheme;
}
let extensions = parseExtensions();
function isDarkModeSet(){
return localStorage.theme == "dark";
}
function parseExtensions(){
return [
@@ -68,7 +108,7 @@ function parseLanguage(name: String){
}
onBeforeUpdate( () => { extensions = parseExtensions(); } )
</script>
@@ -85,4 +125,4 @@ onBeforeUpdate( () => { extensions = parseExtensions(); } )
/>
</div>
</template>
</template>

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

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

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

@@ -7,16 +7,18 @@ const props = defineProps(
{
tool: {type: String, required: true},
xml: {type: [String, Array<TabData>], required: true},
query: {type: String, required: true}
query: {type: String, required: true},
activeTabId: {type: Number, required: false}
}
)
const emit = defineEmits(["update"]);
const emit = defineEmits(["update", "update:engine"]);
const result = ref('');
let enginesForCurrentTool = ref(["saxon", "xalan", "libxml"]);
const allVersionsOfXpath = ["2.0", "3.0", "3.1"];
const allVersions = ["1.0", "2.0", "3.0", "3.1"];
let versionsForCurrentEngine = ref([""]);
@@ -72,7 +74,7 @@ function changeAvailableVersionsOfXPath() {
if(engine.value == "xalan" || engine.value == "libxml")
versionsForCurrentEngine.value = ["1.0"];
else if (engine.value == "saxon")
versionsForCurrentEngine.value = allVersions;
versionsForCurrentEngine.value = allVersionsOfXpath;
}
function selectDefaultEngine() {
@@ -109,21 +111,23 @@ 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)
if (Array.isArray(props.xml) && props.xml.length > 1 && engine.value == "saxon")
tool = "multiple/xslt";
return document.location.protocol + "//" + document.location.hostname + "/" + engineEndpoint + "/" + tool;
}
function selectRequestBodyType() : string {
if (Array.isArray(props.xml) && props.xml.length > 1)
return prepareRequestBodyMultiXml();
if (Array.isArray(props.xml) && (engine.value == "xalan" || engine.value == "libxml"))
return prepareRequestBodySingleXml(props.xml.at(props.activeTabId!)!.data)
else if (Array.isArray(props.xml) && props.xml.length > 1)
return prepareRequestBodyMultiXml();
else if (Array.isArray(props.xml))
return prepareRequestBodySingleXml(props.xml.at(0)!.data);
return prepareRequestBodySingleXml(props.xml.at(0)!.data);
else
return prepareRequestBodySingleXml(props.xml!);
return prepareRequestBodySingleXml(props.xml!);
}
function prepareRequestBodySingleXml(data: string):string {
@@ -188,6 +192,10 @@ function emitVersionChange() {
emit("update", version.value);
}
function emitEngineChange() {
emit("update:engine", engine.value);
}
function isVersionSelectionAvailable() {
return !(versionsForCurrentEngine.value.length == 1 && versionsForCurrentEngine.value.at(0) == "N/A");
}
@@ -202,6 +210,11 @@ function highlightField() {
return "";
}
function handleChange() {
changeAvailableVersions();
emitEngineChange();
}
</script>
<template>
@@ -209,7 +222,7 @@ function highlightField() {
<div class="flex place-content-between w-full items-center pb-2">
<span class="dark:text-white">Result:</span>
<div class="flex space-x-2 overflow-x-auto">
<select v-model="engine" name="engine" @change="changeAvailableVersions()" class="px-3 rounded-full border border-slate-400 bg-white dark:text-slate-100 dark:bg-gray-600">
<select v-model="engine" name="engine" @change="handleChange()" class="px-3 rounded-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-full border border-slate-400 bg-white dark:text-slate-100 dark:bg-gray-600">

View File

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

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

@@ -43,3 +43,7 @@
.tab-active {
@apply py-2 px-3 h-fit text-slate-700 border-t border-l border-r border-slate-400 rounded-t-2xl bg-gradient-to-r from-blue-400 to-sky-300 dark:text-white dark:from-sky-600 dark:to-sky-800 hover:bg-blue-400
}
.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;
}

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

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

21
issue_template/bug.md Normal file
View File

@@ -0,0 +1,21 @@
---
name: "Bug template"
about: "This template is for reporting bugs"
title: "Bug"
---
## Description
*A clear and concise description of the issue.*
### Selected Fields
- **Engine:** [Specify the engine used]
- **Version:** [Specify the version]
- **Tool:** [Specify the currently used tool]
### Data:
*Paste used xml/xslt/json etc...*
## Additional Context
*Any other information that might help with this issue.*

10
issue_template/feature.md Normal file
View File

@@ -0,0 +1,10 @@
---
name: "Feature request template"
about: "This template is for requesting features"
title: "Feature request"
---
## Feature Request
*Describe the feature youd like to see and why its useful.*