R11/release11-tools
4
2
Fork 0
Code Issues 9 Pull Requests 4 Packages Projects Releases 6 Wiki Activity

File uploading and fixes (#261)

Browse Source 
Reviewed-on: #261
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>
This commit is contained in:
Adam Bem
2023-11-06 11:17:42 +01:00
committed by Adam Bem
parent 1913c292d2
commit 5febb10d22
24 changed files with 155 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
Frontend/package-lock.json generated
View File

@@ -3190,9 +3190,9 @@
} }
}, },
"node_modules/normalize-package-data/node_modules/semver": { "node_modules/normalize-package-data/node_modules/semver": {
"version": "5.7.1", "version": "5.7.2",
"resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz", "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
"integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==", "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
"dev": true, "dev": true,
"bin": { "bin": {
"semver": "bin/semver" "semver": "bin/semver"
@@ -3326,9 +3326,9 @@
} }
}, },
"node_modules/npm-run-all/node_modules/semver": { "node_modules/npm-run-all/node_modules/semver": {
"version": "5.7.1", "version": "5.7.2",
"resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz", "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
"integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==", "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
"dev": true, "dev": true,
"bin": { "bin": {
"semver": "bin/semver" "semver": "bin/semver"
@@ -3616,9 +3616,9 @@
} }
}, },
"node_modules/postcss": { "node_modules/postcss": {
"version": "8.4.24", "version": "8.4.31",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.24.tgz", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
"integrity": "sha512-M0RzbcI0sO/XJNucsGjvWU9ERWxb/ytp1w6dKtxTKgixdtQDq4rmx/g8W1hnaheq9jgwL/oyEdH5Bc4WwJKMqg==", "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
"funding": [ "funding": [
{ {
"type": "opencollective", "type": "opencollective",
@@ -6994,9 +6994,9 @@
}, },
"dependencies": { "dependencies": {
"semver": { "semver": {
"version": "5.7.1", "version": "5.7.2",
"resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz", "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
"integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==", "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
"dev": true "dev": true
} }
} }
@@ -7097,9 +7097,9 @@
"dev": true "dev": true
}, },
"semver": { "semver": {
"version": "5.7.1", "version": "5.7.2",
"resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz", "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
"integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==", "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
"dev": true "dev": true
}, },
"shebang-command": { "shebang-command": {
@@ -7302,9 +7302,9 @@
"dev": true "dev": true
}, },
"postcss": { "postcss": {
"version": "8.4.24", "version": "8.4.31",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.24.tgz", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
"integrity": "sha512-M0RzbcI0sO/XJNucsGjvWU9ERWxb/ytp1w6dKtxTKgixdtQDq4rmx/g8W1hnaheq9jgwL/oyEdH5Bc4WwJKMqg==", "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
"requires": { "requires": {
"nanoid": "^3.3.6", "nanoid": "^3.3.6",
"picocolors": "^1.0.0", "picocolors": "^1.0.0",

2
Frontend/src/App.vue
View File

@@ -6,7 +6,7 @@ import SidebarComponent from '@components/sidebar/SidebarComponent.vue';
</script> </script>
<template> <template>
<div id="layout" class="flex h-screen bg-gradient-to-r from-white to-sky-200 dark:from-slate-800 dark:to-indigo-950"> <div id="layout" class="font-sans flex h-screen bg-gradient-to-r from-white to-sky-200 dark:from-slate-800 dark:to-indigo-950">
<SidebarComponent /> <SidebarComponent />
<div class="relative p-4 w-full m-4 bg-blue-50 dark:bg-gray-700 rounded-2xl overflow-hidden shadow-lg"> <div class="relative p-4 w-full m-4 bg-blue-50 dark:bg-gray-700 rounded-2xl overflow-hidden shadow-lg">
<RouterView></RouterView> <RouterView></RouterView>

4
Frontend/src/assets/tooltips/xpath/xpathdiffs.json
View File

@@ -2,11 +2,11 @@
"universalInfo": "universalInfo":
[ [
{ {
"category":"What is XPath", "category":"What is XPath?",
"description":"XPath is a query language used for selecting nodes from XML and processing them. It may perform operations on strings, numbers and boolean values." "description":"XPath is a query language used for selecting nodes from XML and processing them. It may perform operations on strings, numbers and boolean values."
}, },
{ {
"category":"What's new in XPath?" "category":"What's new in XPath"
} }
], ],
"VersionDiffs": "VersionDiffs":

2
Frontend/src/assets/tooltips/xslt/xsltdiffs.json
View File

@@ -6,7 +6,7 @@
"description":"XSLT (Extensible Stylesheet Language Transformations) is a language for converting and manipulating XML data into various formats. It uses rules defined in stylesheets to transform XML documents into HTML, XML, or other text-based outputs." "description":"XSLT (Extensible Stylesheet Language Transformations) is a language for converting and manipulating XML data into various formats. It uses rules defined in stylesheets to transform XML documents into HTML, XML, or other text-based outputs."
}, },
{ {
"category":"What's differences between XSLT versions" "category":"Differences between XSLT versions"
} }
], ],
"VersionDiffs": "VersionDiffs":

24
Frontend/src/components/formatter/XMLButtonFormatterComponent.vue
View File

@@ -8,9 +8,9 @@ const props = defineProps({
const emit = defineEmits(["update:result"]) const emit = defineEmits(["update:result"])
function process() { function process() {
var request:Request = prepareRequest(); var request:Request = prepareRequest()
fetchRequest(request).then((data) => { fetchRequest(request).then((data) => {
sendProcessedData(data); sendProcessedData(data)
}) })
} }
@@ -18,36 +18,36 @@ function prepareRequest():Request {
var request = new Request(prepareURL(), { var request = new Request(prepareURL(), {
body: prepareRequestBody(), body: prepareRequestBody(),
method: "POST" method: "POST"
}); })
return request return request
} }
function prepareURL(): string { function prepareURL(): string {
var mode = "prettify"; var mode = "prettify"
if (props.isMinimizer) if (props.isMinimizer)
mode = "minimize"; mode = "minimize"
return document.location.protocol + "//" + document.location.hostname + "/libxml/" + mode; return document.location.protocol + "//" + document.location.hostname + "/libxml/" + mode
} }
function prepareRequestBody():string { function prepareRequestBody():string {
var requestBody = JSON.stringify({ var requestBody = JSON.stringify({
"data": props.xml, "data": props.xml,
"process": "N/A", "processorData": "N/A",
"processor": "libxml", "processor": "libxml",
"version": "1.0" "version": "1.0"
}); })
return requestBody; return requestBody
} }
async function fetchRequest(request: Request):Promise<JSON> { async function fetchRequest(request: Request):Promise<JSON> {
var responseBody = await fetch(request) var responseBody = await fetch(request)
.then(response => response.json()) .then(response => response.json())
.then((body) => body); .then((body) => body)
return responseBody; return responseBody
} }
function sendProcessedData(data: JSON) { function sendProcessedData(data: JSON) {
emit("update:result", data); emit("update:result", data)
} }
</script> </script>

2
Frontend/src/components/mock/HistoryComponent.vue
View File

@@ -34,7 +34,7 @@ function showHeaders(headers: object, index: number){
<template> <template>
<div class="w-full xl:w-2/5 flex flex-none flex-col gap-y-4"> <div class="flex flex-1 flex-col justify-items-stretch gap-y-4">
<HistoryRecords class="xl:h-1/3 overflow-y-scroll" @click:show-headers="showHeaders" @click:show-body="showBody"></HistoryRecords> <HistoryRecords class="xl:h-1/3 overflow-y-scroll" @click:show-headers="showHeaders" @click:show-body="showBody"></HistoryRecords>
<BodyDetailComponent :content-type="currentContentType" :data="currentShownData" v-if="shownDetail == 'body' "></BodyDetailComponent> <BodyDetailComponent :content-type="currentContentType" :data="currentShownData" v-if="shownDetail == 'body' "></BodyDetailComponent>
<HeadersDetailComponent :data="currentShownData" v-if="shownDetail == 'headers' "></HeadersDetailComponent> <HeadersDetailComponent :data="currentShownData" v-if="shownDetail == 'headers' "></HeadersDetailComponent>

6
Frontend/src/components/mock/HistoryRecords.vue
View File

@@ -45,12 +45,12 @@ function refreshHistory(){
</script> </script>
<template> <template>
<div> <div class="h-28 text-center text-grey-900 dark:text-white">
<table class="text-white h-28 w-full text-center"> <table class="w-full">
<tr> <tr>
<th>Time</th> <th>Time</th>
<th>HTTP Method</th> <th>HTTP Method</th>
<th>HTTP Headers</th> <th>Headers</th>
<th>Request Body</th> <th>Request Body</th>
<th class="text-2xl"><button @click="refreshHistory()">⟳</button></th> <th class="text-2xl"><button @click="refreshHistory()">⟳</button></th>
</tr> </tr>

4
Frontend/src/components/sidebar/SidebarComponent.vue
View File

@@ -29,8 +29,8 @@ onMounted( () => {
<a href="https://release11.com/"> <a href="https://release11.com/">
<img :src="logoR11" class="w-72 h-16 p-2 pt-0"/> <img :src="logoR11" class="w-72 h-16 p-2 pt-0"/>
</a> </a>
<div class="flex basis-full flex-col font-medium items-center"> <div class="flex basis-full flex-col font-normal items-center">
<sidebar-menu-element-component category-name="XML"> <sidebar-menu-element-component category-name="Parser">
<SidebarToolLinkComponent path-to="/xml/xpath" element-content="XPath" /> <SidebarToolLinkComponent path-to="/xml/xpath" element-content="XPath" />
<SidebarToolLinkComponent path-to="/xml/xquery" element-content="XQuery" /> <SidebarToolLinkComponent path-to="/xml/xquery" element-content="XQuery" />
<SidebarToolLinkComponent path-to="/xml/xsd" element-content="XSD" /> <SidebarToolLinkComponent path-to="/xml/xsd" element-content="XSD" />

4
Frontend/src/components/sidebar/SidebarMenuElementComponent.vue
View File

@@ -18,10 +18,10 @@ const props = defineProps(
<template> <template>
<div class="w-full mb-4 p-2 rounded-xl shadow-lg bg-gradient-to-r from-blue-400 to-blue-300 dark:from-sky-700 dark:to-sky-900"> <div class="w-full mb-4 p-2 rounded-xl shadow-lg bg-gradient-to-r from-blue-400 to-blue-300 dark:from-sky-700 dark:to-sky-900">
<button @click="switchHiddenElement()" type="button" :class="[isActive ? 'rounded-lg' : 'rounded-lg']" class="w-full p-2 text-lg font-bold text-gray-900 transition duration-75 hover:bg-blue-100 dark:text-gray-100 dark:hover:bg-slate-600"> <button @click="switchHiddenElement()" type="button" :class="[isActive ? 'rounded-lg' : 'rounded-lg']" class="w-full p-2 text-lg font-normal text-gray-900 transition duration-75 hover:bg-blue-100 dark:text-gray-100 dark:hover:bg-slate-600">
<span class="flex-1 whitespace-nowrap">{{props.categoryName}}</span> <span class="flex-1 whitespace-nowrap">{{props.categoryName}}</span>
</button> </button>
<div class="flex flex-col w-full py-2 bg-indigo-50 dark:bg-slate-800 rounded-xl font-thin overflow-hidden" :class="[isActive ? 'active' : 'hidden']"> <div class="flex flex-col w-full py-2 bg-indigo-50 dark:bg-slate-800 rounded-xl font-light overflow-hidden" :class="[isActive ? 'active' : 'hidden']">
<slot></slot> <slot></slot>
</div> </div>
</div> </div>

2
Frontend/src/components/sidebar/SidebarToolLinkComponent.vue
View File

@@ -17,6 +17,6 @@ const props = defineProps(
<style> <style>
.router-link-active { .router-link-active {
font-weight: 500; font-weight: 600;
} }
</style> </style>

37
Frontend/src/components/xml/XmlInputFieldComponent.vue
View File

@@ -1,10 +1,11 @@
<script setup lang="ts"> <script setup lang="ts">
import InsertTemplateComponent from '@components/common/InsertTemplateComponent.vue'; import InsertTemplateComponent from '@components/common/InsertTemplateComponent.vue'
import XMLButtonFormatterComponent from '@components/formatter/XMLButtonFormatterComponent.vue' import XMLButtonFormatterComponent from '@components/formatter/XMLButtonFormatterComponent.vue'
import { ref } from 'vue'; import { ref } from 'vue'
import CodeEditor from '../CodeEditorComponent.vue'; import CodeEditor from '../CodeEditorComponent.vue'
const data = ref('') const data = ref('')
const inputFile = ref()
const props = defineProps( const props = defineProps(
{ {
@@ -15,7 +16,6 @@ const props = defineProps(
const emit = defineEmits(['update']) const emit = defineEmits(['update'])
function sendValue() { function sendValue() {
console.log("input works")
emit('update', data.value) emit('update', data.value)
} }
@@ -25,18 +25,31 @@ function sendNewValue(newValue : string) {
} }
function updateData(newData: string) { function updateData(newData: string) {
data.value = newData; data.value = newData
sendValue(); inputFile.value.value = ''
sendValue()
} }
function clear() { function clear() {
updateData(''); updateData('')
} }
function canBeFormatted() { function canBeFormatted() {
return props.stylizedName.toLowerCase() == 'xml' || return props.stylizedName.toLowerCase() == 'xml' ||
props.stylizedName.toLowerCase() == 'xsd' || props.stylizedName.toLowerCase() == 'xsd' ||
props.stylizedName.toLowerCase() == 'xslt'; props.stylizedName.toLowerCase() == 'xslt'
}
function readFile(file : any) {
const reader = new FileReader()
reader.onloadend = () => {
var result = reader.result?.toString()
if (typeof result == "string")
sendNewValue(result)
}
reader.readAsText(file.target.files[0])
} }
</script> </script>
@@ -44,8 +57,12 @@ function canBeFormatted() {
<template> <template>
<div class="flex flex-col w-full h-1/2 lg:h-1/2 flex-none pr-4 pb-2"> <div class="flex flex-col w-full h-1/2 lg:h-1/2 flex-none pr-4 pb-2">
<div class="flex place-content-between w-full items-center"> <div class="flex place-content-between w-full items-center">
<span class="dark:text-white">{{ stylizedName }}</span> <span class="dark:text-white mr-2">{{ stylizedName }}</span>
<div class="flex space-x-2 pb-2"> <div class="flex space-x-2 pb-2 overflow-x-scroll">
<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="(data: string) => updateData(data)"></InsertTemplateComponent> <InsertTemplateComponent :stylized-name="props.stylizedName" @update:default-data="(data: string) => updateData(data)"></InsertTemplateComponent>
<XMLButtonFormatterComponent v-if="canBeFormatted()" :xml="data" @update:result="(data:any) => updateData(data.result)"></XMLButtonFormatterComponent> <XMLButtonFormatterComponent v-if="canBeFormatted()" :xml="data" @update:result="(data:any) => updateData(data.result)"></XMLButtonFormatterComponent>
<button class="tool-button" @click="clear">Clear</button> <button class="tool-button" @click="clear">Clear</button>

22
Frontend/src/components/xml/XmlInputFieldToolbarComponent.vue
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>

13
Frontend/src/components/xml/XmlOutputFieldComponent.vue
View File

@@ -47,6 +47,7 @@ function changeAvailableVersions() {
changeAvailableVersionsOfXSLT(); changeAvailableVersionsOfXSLT();
else if (props.tool == "xsd") else if (props.tool == "xsd")
versionsForCurrentEngine.value = ["N/A"]; versionsForCurrentEngine.value = ["N/A"];
else if (props.tool == "xpath") else if (props.tool == "xpath")
changeAvailableVersionsOfXPath(); changeAvailableVersionsOfXPath();
@@ -72,7 +73,7 @@ function selectDefaultEngine() {
} }
function selectDefaultVersion() { function selectDefaultVersion() {
const lastVersion = versionsForCurrentEngine.value.length - 1 const lastVersion = versionsForCurrentEngine.value.length - 1;
version.value = versionsForCurrentEngine.value[lastVersion]; version.value = versionsForCurrentEngine.value[lastVersion];
emitVersionChange(); emitVersionChange();
} }
@@ -126,17 +127,21 @@ function emitVersionChange() {
emit("update", version.value); emit("update", version.value);
} }
function isVersionSelectionAvailable() {
return !(props.tool == "xsd");
}
</script> </script>
<template> <template>
<div class="flex flex-col flex-none w-full lg:w-1/2 h-1/3 lg:h-full items-center pb-2 pr-2"> <div class="flex flex-col flex-none w-full 2xl:w-1/2 h-1/3 2xl:h-full items-center pb-2 pr-2">
<div class="flex place-content-between w-full items-center pb-2"> <div class="flex place-content-between w-full items-center pb-2">
<span class="dark:text-white">Result:</span> <span class="dark:text-white">Result:</span>
<div class="flex space-x-2"> <div class="flex space-x-2 overflow-x-scroll">
<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="changeAvailableVersions()" class="px-3 rounded-full border border-slate-400 bg-white dark:text-slate-100 dark:bg-gray-600">
<option v-for="engine in enginesForCurrentTool" :value="engine">{{ engine }}</option> <option v-for="engine in enginesForCurrentTool" :value="engine">{{ engine }}</option>
</select> </select>
<select v-model="version" name="version" @change="emitVersionChange()" class="px-3 rounded-full border border-slate-400 bg-white dark:text-slate-100 dark:bg-gray-600"> <select v-model="version" v-if="isVersionSelectionAvailable()" name="version" @change="emitVersionChange()" class="px-3 rounded-full border border-slate-400 bg-white dark:text-slate-100 dark:bg-gray-600">
<option v-for="version in versionsForCurrentEngine" :value="version">{{ version }}</option> <option v-for="version in versionsForCurrentEngine" :value="version">{{ version }}</option>
</select> </select>
<button class="tool-button" @click="clear">Clear</button> <button class="tool-button" @click="clear">Clear</button>

2
Frontend/src/components/xml/tooltips/TooltipComponent.vue
View File

@@ -58,7 +58,7 @@ function toggleTooltips() {
</script> </script>
<template> <template>
<div :class="areTooltipsHidden ? 'w-fit' : 'w-4/12'" class="hidden 2xl:flex shrink-0 items-stretch p-2 flex-row rounded-xl shadow-lg bg-gradient-to-r from-blue-400 to-blue-300 dark:from-sky-600 dark:to-sky-800 "> <div :class="areTooltipsHidden ? 'w-fit' : 'w-[26rem]'" class="hidden xl:flex shrink-0 items-stretch p-2 flex-row rounded-xl shadow-lg bg-gradient-to-r from-blue-400 to-blue-300 dark:from-sky-600 dark:to-sky-800 ">
<button :class="{'mr-2' : !areTooltipsHidden }" class="text-xl w-6 dark:text-slate-100" @click="toggleTooltips()"> <button :class="{'mr-2' : !areTooltipsHidden }" class="text-xl w-6 dark:text-slate-100" @click="toggleTooltips()">
T<br/>o<br/>o<br/>l<br/>t<br/>i<br/>p<br/>s T<br/>o<br/>o<br/>l<br/>t<br/>i<br/>p<br/>s
</button> </button>

26
Frontend/src/components/xml/tooltips/TooltipDiffsComponent.vue
View File

@@ -12,19 +12,19 @@ const props = defineProps({
function getDiffEntry(toolVersion : String) : string[] { function getDiffEntry(toolVersion : String) : string[] {
if ( props.toolName == "xpath" ){ if ( props.toolName == "xpath" ){
switch(toolVersion){ switch(toolVersion){
case "2.0" : { case "2.0" : {
return xpathDiffs.VersionDiffs[0].diffs return xpathDiffs.VersionDiffs[0].diffs
}
case "3.0" : {
return xpathDiffs.VersionDiffs[1].diffs
}
case "3.1" : {
return xpathDiffs.VersionDiffs[2].diffs
}
default: {
return xpathDiffs.VersionDiffs[2].diffs
}
} }
case "3.0" : {
return xpathDiffs.VersionDiffs[1].diffs
}
case "3.1" : {
return xpathDiffs.VersionDiffs[2].diffs
}
default: {
return xpathDiffs.VersionDiffs[2].diffs
}
}
} else if (props.toolName == "xslt") { } else if (props.toolName == "xslt") {
return ["XSLT 2.0"].concat(xsltDiffs.VersionDiffs[0].diffs).concat(["XSLT 3.0"]).concat(xsltDiffs.VersionDiffs[1].diffs) ; return ["XSLT 2.0"].concat(xsltDiffs.VersionDiffs[0].diffs).concat(["XSLT 3.0"]).concat(xsltDiffs.VersionDiffs[1].diffs) ;
} else{ } else{
@@ -56,7 +56,7 @@ function getInfo(num : number ){
</span> </span>
</TooltipCategoryComponent> </TooltipCategoryComponent>
<TooltipCategoryComponent v-if="toolVersion !== '1.0'" :name="getInfo(1).category"> <TooltipCategoryComponent v-if="toolVersion !== '1.0'" :name="getInfo(1).category + ' ' + toolVersion + '?'">
<span v-for=" diff in getDiffEntry(toolVersion)" v-bind:key="diff" class=" text-justify" > <span v-for=" diff in getDiffEntry(toolVersion)" v-bind:key="diff" class=" text-justify" >
<div class="w-full h-4 text-center" v-if="diff.includes('XSLT')"> <div class="w-full h-4 text-center" v-if="diff.includes('XSLT')">
------------ {{ diff }} ------------ ------------ {{ diff }} ------------

BIN
Frontend/src/fonts/Raleway-Variable.ttf Normal file
View File

Binary file not shown.

BIN
Frontend/src/fonts/Sono-Variable.ttf Normal file
View File

Binary file not shown.

16
Frontend/src/style.css
View File

@@ -2,14 +2,28 @@
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;
@font-face {
font-family: "Raleway";
src: url("fonts/Raleway-Variable.ttf");
}
@font-face {
font-family: "Sono";
src: url("fonts/Sono-Variable.ttf");
}
.inactive-button { .inactive-button {
@apply py-2 px-4 h-fit text-slate-400 border border-slate-400 rounded-full @apply py-2 px-4 h-fit text-slate-400 border border-slate-400 rounded-full
} }
.tool-button { .tool-button {
@apply hover:brightness-110 py-2 px-4 h-fit rounded-full bg-gradient-to-r from-blue-400 to-sky-300 dark:text-white dark:from-sky-600 dark:to-sky-800 hover:bg-blue-400 @apply hover:brightness-110 py-2 px-4 h-fit min-w-fit rounded-full bg-gradient-to-r from-blue-400 to-sky-300 dark:text-white dark:from-sky-600 dark:to-sky-800 hover:bg-blue-400
} }
.text-field { .text-field {
@apply w-full font-mono dark:text-slate-100 bg-slate-50 dark:bg-gray-600 border border-slate-400 p-2 rounded-lg @apply w-full font-mono dark:text-slate-100 bg-slate-50 dark:bg-gray-600 border border-slate-400 p-2 rounded-lg
}
.file-selector {
@apply block file:border-none file:font-sans file:text-base file:hover:brightness-110 file:py-2 file:px-4 file:h-full file:w-fit file:rounded-full file:bg-gradient-to-r file:from-blue-400 file:to-sky-300 file:dark:text-white file:dark:from-sky-600 file:dark:to-sky-800 file:hover:bg-blue-400 w-fit rounded-full text-sm text-gray-900 border border-gray-300 cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400
} }

50
Frontend/src/views/Base64EncoderView.vue
View File

@@ -1,26 +1,25 @@
<script setup lang="ts"> <script setup lang="ts">
import CodeEditorComponent from '@/components/CodeEditorComponent.vue'; import CodeEditorComponent from '@/components/CodeEditorComponent.vue'
import EncoderButton from '@/components/encoder/EncoderButtonComponent.vue' import EncoderButton from '@/components/encoder/EncoderButtonComponent.vue'
import { ref } from 'vue'; import { ref } from 'vue'
const data : any = ref("") const data : any = ref("")
const imageData = ref("") const imageData = ref("")
const DoshowImage = ref(false) const DoshowImage = ref(false)
const inputImage = ref(); const inputImage = ref()
function setTextFieldValue(newData: string) { function setTextFieldValue(newData: string) {
data.value = newData.toString() data.value = newData.toString()
DoshowImage.value = false; DoshowImage.value = false
} }
function showImage(newImage : string){ function showImage(newImage : string){
imageData.value = "data:image/jpeg;base64,"+newImage imageData.value = "data:image/jpeg;base64,"+newImage
DoshowImage.value = true; DoshowImage.value = true
} }
function convertImageToBase64(file : any){ function convertImageToBase64(file : any){
console.log(inputImage)
const reader = new FileReader() const reader = new FileReader()
reader.onloadend = () => (console.log(data.value = reader.result?.toString().split(',')[1])) reader.onloadend = () => (console.log(data.value = reader.result?.toString().split(',')[1]))
reader.readAsDataURL(file.target.files[0]) reader.readAsDataURL(file.target.files[0])
@@ -29,34 +28,41 @@ function convertImageToBase64(file : any){
function clear(){ function clear(){
data.value = "" data.value = ""
imageData.value = "" imageData.value = ""
DoshowImage.value = false; DoshowImage.value = false
inputImage.value.value = null inputImage.value.value = null
} }
</script> </script>
<template> <template>
<div id="layoutFull" class="w-full h-full flex"> <div id="layoutFull" class="w-full h-full flex flex-col xl:flex-row gap-4">
<div id="layoutLeft" class="flex flex-col w-1/2 h-full gap-4"> <div id="layoutLeft" class="flex flex-col w-full xl:w-1/2 h-1/3 xl:h-full gap-4">
<div class="w-4/5 flex flex-row-reverse gap-2 mt-12 ml-6"> <div class="w-full flex flex-row place-content-between items-center">
<EncoderButton @update:result="setTextFieldValue" :code="data" encode-type="Base64"></EncoderButton> <label class="dark:text-white text-center">Base64/Text</label>
<EncoderButton @update:result="setTextFieldValue" :code="data" encode-type="Text"></EncoderButton> <div class="flex flex-row items-center gap-2">
<EncoderButton @image:show="showImage" :code="data" encode-type="Image"></EncoderButton> <button class="tool-button" @click="clear()">Clear</button>
<button class="tool-button" @click="clear()">Clear</button> <label class="text-grey-900 dark:text-white">Convert to</label>
<EncoderButton @image:show="showImage" :code="data" encode-type="Image"></EncoderButton>
<EncoderButton @update:result="setTextFieldValue" :code="data" encode-type="Text"></EncoderButton>
<EncoderButton @update:result="setTextFieldValue" :code="data" encode-type="Base64"></EncoderButton>
</div>
</div> </div>
<div id="codeEditor" class="w-4/5 h-1/3 ml-6 flex flex-col"> <div id="codeEditor" class="w-full h-full xl:h-1/3 flex flex-col">
<label class="dark:text-white text-center w-full">Base64</label>
<CodeEditorComponent @update:updated-code="setTextFieldValue" :config="{language:'base64'}" :code="data"></CodeEditorComponent> <CodeEditorComponent @update:updated-code="setTextFieldValue" :config="{language:'base64'}" :code="data"></CodeEditorComponent>
</div> </div>
<div class="w-4/5 flex items-center flex-col ml-6" id="imageImporter"> <div class="flex flex-row justify-center w-full">
<label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white" for="file_input">Upload file</label> <div class="flex flex-col items-center w-fit" id="imageImporter">
<input id="imageLoader" ref="inputImage" class="block file:bg-inherit file:shadow-inherit dark:file:text-white file:border-inherit w-full text-sm text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400" type="file" @change="convertImageToBase64" /> <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white" for="file_input">Upload image</label>
<input id="imageLoader" ref="inputImage" class="file-selector" accept=".gif, .jpg, .jpeg, .png, .webm, image/gif, image/jpeg, image/png, image/webm" type="file" @change="convertImageToBase64" />
</div>
</div> </div>
</div> </div>
<div id="separator" class="bg-black h-full w-1" ></div>
<div id="layoutRight" class=" ml-6 w-2/5"> <div id="layoutRight" class="w-full xl:w-1/2 min-h-[66%] xl:h-full">
<div 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"/> <img :src="imageData"/>
</div> </div>

6
Frontend/src/views/XPathView.vue
View File

@@ -16,9 +16,9 @@ function updateVersion(newVersion: string) {
</script> </script>
<template> <template>
<div id="layout" class="flex flex-col lg:flex-row w-full h-full"> <div id="layout" class="flex flex-row w-full h-full">
<div class="flex flex-col lg:flex-row w-full lg:w-7/12 grow overflow-hide px-2"> <div class="flex flex-col 2xl:flex-row w-full 2xl:w-7/12 grow overflow-hide pr-2">
<div class="flex flex-col w-full lg:w-1/2 h-2/3 lg:h-full flex-none items-center"> <div class="flex flex-col w-full 2xl:w-1/2 h-2/3 2xl:h-full flex-none items-center">
<xmlInputFieldComponent stylized-name="XML" :data="xml" @update="(data) => {xml = data}"></xmlInputFieldComponent> <xmlInputFieldComponent stylized-name="XML" :data="xml" @update="(data) => {xml = data}"></xmlInputFieldComponent>
<xmlInputFieldComponent stylized-name="XPath" :data="query" @update="(data) => {query = data}"></xmlInputFieldComponent> <xmlInputFieldComponent stylized-name="XPath" :data="query" @update="(data) => {query = data}"></xmlInputFieldComponent>
</div> </div>

4
Frontend/src/views/XQueryView.vue
View File

@@ -10,8 +10,8 @@ const query = ref('');
</script> </script>
<template> <template>
<div id="layout" class="flex flex-col lg:flex-row w-full h-full"> <div id="layout" class="flex flex-col 2xl:flex-row w-full h-full">
<div class="flex flex-col w-full lg:w-1/2 h-2/3 lg:h-full flex-none items-center"> <div class="flex flex-col w-full 2xl:w-1/2 h-2/3 2xl:h-full flex-none items-center">
<xmlInputFieldComponent stylized-name="XML" @update="(data) => {xml = data}"></xmlInputFieldComponent> <xmlInputFieldComponent stylized-name="XML" @update="(data) => {xml = data}"></xmlInputFieldComponent>
<xmlInputFieldComponent stylized-name="XQuery" @update="(data) => {query = data}"></xmlInputFieldComponent> <xmlInputFieldComponent stylized-name="XQuery" @update="(data) => {query = data}"></xmlInputFieldComponent>
</div> </div>

4
Frontend/src/views/XSDView.vue
View File

@@ -10,8 +10,8 @@ const query = ref('');
</script> </script>
<template> <template>
<div id="layout" class="flex flex-col lg:flex-row w-full h-full"> <div id="layout" class="flex flex-col 2xl:flex-row w-full h-full">
<div class="flex flex-col w-full lg:w-1/2 h-2/3 lg:h-full flex-none items-center"> <div class="flex flex-col w-full 2xl:w-1/2 h-2/3 2xl:h-full flex-none items-center">
<xmlInputFieldComponent stylized-name="XML" @update="(data) => {xml = data}"></xmlInputFieldComponent> <xmlInputFieldComponent stylized-name="XML" @update="(data) => {xml = data}"></xmlInputFieldComponent>
<xmlInputFieldComponent stylized-name="XSD" @update="(data) => {query = data}"></xmlInputFieldComponent> <xmlInputFieldComponent stylized-name="XSD" @update="(data) => {query = data}"></xmlInputFieldComponent>
</div> </div>

16
Frontend/src/views/XSLTView.vue
View File

@@ -15,14 +15,14 @@ function updateVersion(newVersion: string) {
</script> </script>
<template> <template>
<div id="layout" class="flex flex-col lg:flex-row w-full h-full"> <div id="layout" class="flex flex-row w-full h-full">
<div class="flex flex-col lg:flex-row w-full lg:w-7/12 grow overflow-hide px-2"> <div class="flex flex-col 2xl:flex-row w-full 2xl:w-7/12 grow overflow-hide pr-2">
<div class="flex flex-col w-full lg:w-1/2 h-2/3 lg:h-full flex-none items-center"> <div class="flex flex-col w-full 2xl:w-1/2 h-2/3 2xl:h-full flex-none items-center">
<xmlInputFieldComponent stylized-name="XML" @update="(data) => {xml = data}"></xmlInputFieldComponent> <xmlInputFieldComponent stylized-name="XML" :data="xml" @update="(data) => {xml = data}"></xmlInputFieldComponent>
<xmlInputFieldComponent stylized-name="XSLT" @update="(data) => {query = data}"></xmlInputFieldComponent> <xmlInputFieldComponent stylized-name="XSLT" :data="query" @update="(data) => {query = data}"></xmlInputFieldComponent>
</div>
<xmlOutputFieldComponent tool="xslt" :xml="xml" :query="query" @update="(version) => updateVersion(version)"></xmlOutputFieldComponent>
</div> </div>
<xmlOutputFieldComponent tool="xslt" :xml="xml" :query="query" @update="(version) => updateVersion(version)"></xmlOutputFieldComponent> <tooltipComponent tool-type="xslt" :version="version"></tooltipComponent>
</div>
<TooltipComponent tool-type="xslt" :version="version"></TooltipComponent>
</div> </div>
</template> </template>

4
Frontend/tailwind.config.js
View File

@@ -6,6 +6,10 @@ export default {
], ],
theme: { theme: {
extend: {}, extend: {},
fontFamily: {
'sans': ['Raleway'],
'mono': ["Sono"],
}
}, },
plugins: [], plugins: [],
} }