File uploading and fixes #261
36
Frontend/package-lock.json
generated
36
Frontend/package-lock.json
generated
@@ -3190,9 +3190,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/normalize-package-data/node_modules/semver": {
|
||||
"version": "5.7.1",
|
||||
"resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
|
||||
"integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
|
||||
"version": "5.7.2",
|
||||
"resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
|
||||
"integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
|
||||
"dev": true,
|
||||
"bin": {
|
||||
"semver": "bin/semver"
|
||||
@@ -3326,9 +3326,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/npm-run-all/node_modules/semver": {
|
||||
"version": "5.7.1",
|
||||
"resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
|
||||
"integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
|
||||
"version": "5.7.2",
|
||||
"resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
|
||||
"integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
|
||||
"dev": true,
|
||||
"bin": {
|
||||
"semver": "bin/semver"
|
||||
@@ -3616,9 +3616,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/postcss": {
|
||||
"version": "8.4.24",
|
||||
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.24.tgz",
|
||||
"integrity": "sha512-M0RzbcI0sO/XJNucsGjvWU9ERWxb/ytp1w6dKtxTKgixdtQDq4rmx/g8W1hnaheq9jgwL/oyEdH5Bc4WwJKMqg==",
|
||||
"version": "8.4.31",
|
||||
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
|
||||
"integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
|
||||
"funding": [
|
||||
{
|
||||
"type": "opencollective",
|
||||
@@ -6994,9 +6994,9 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"semver": {
|
||||
"version": "5.7.1",
|
||||
"resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
|
||||
"integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
|
||||
"version": "5.7.2",
|
||||
"resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
|
||||
"integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
@@ -7097,9 +7097,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"semver": {
|
||||
"version": "5.7.1",
|
||||
"resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
|
||||
"integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
|
||||
"version": "5.7.2",
|
||||
"resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
|
||||
"integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
|
||||
"dev": true
|
||||
},
|
||||
"shebang-command": {
|
||||
@@ -7302,9 +7302,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"postcss": {
|
||||
"version": "8.4.24",
|
||||
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.24.tgz",
|
||||
"integrity": "sha512-M0RzbcI0sO/XJNucsGjvWU9ERWxb/ytp1w6dKtxTKgixdtQDq4rmx/g8W1hnaheq9jgwL/oyEdH5Bc4WwJKMqg==",
|
||||
"version": "8.4.31",
|
||||
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
|
||||
"integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
|
||||
"requires": {
|
||||
"nanoid": "^3.3.6",
|
||||
"picocolors": "^1.0.0",
|
||||
|
||||
@@ -6,7 +6,7 @@ import SidebarComponent from '@components/sidebar/SidebarComponent.vue';
|
||||
</script>
|
||||
|
||||
<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 />
|
||||
<div class="relative p-4 w-full m-4 bg-blue-50 dark:bg-gray-700 rounded-2xl overflow-hidden shadow-lg">
|
||||
<RouterView></RouterView>
|
||||
|
||||
@@ -2,11 +2,11 @@
|
||||
"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."
|
||||
},
|
||||
{
|
||||
"category":"What's new in XPath?"
|
||||
"category":"What's new in XPath"
|
||||
}
|
||||
],
|
||||
"VersionDiffs":
|
||||
|
||||
@@ -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."
|
||||
},
|
||||
{
|
||||
"category":"What's differences between XSLT versions"
|
||||
"category":"Differences between XSLT versions"
|
||||
}
|
||||
],
|
||||
"VersionDiffs":
|
||||
|
||||
@@ -8,9 +8,9 @@ const props = defineProps({
|
||||
const emit = defineEmits(["update:result"])
|
||||
|
||||
function process() {
|
||||
var request:Request = prepareRequest();
|
||||
var request:Request = prepareRequest()
|
||||
fetchRequest(request).then((data) => {
|
||||
sendProcessedData(data);
|
||||
sendProcessedData(data)
|
||||
})
|
||||
}
|
||||
|
||||
@@ -18,36 +18,36 @@ function prepareRequest():Request {
|
||||
var request = new Request(prepareURL(), {
|
||||
body: prepareRequestBody(),
|
||||
method: "POST"
|
||||
});
|
||||
})
|
||||
return request
|
||||
}
|
||||
|
||||
function prepareURL(): string {
|
||||
var mode = "prettify";
|
||||
var mode = "prettify"
|
||||
if (props.isMinimizer)
|
||||
mode = "minimize";
|
||||
return document.location.protocol + "//" + document.location.hostname + "/libxml/" + mode;
|
||||
mode = "minimize"
|
||||
return document.location.protocol + "//" + document.location.hostname + "/libxml/" + mode
|
||||
}
|
||||
|
||||
function prepareRequestBody():string {
|
||||
var requestBody = JSON.stringify({
|
||||
"data": props.xml,
|
||||
"process": "N/A",
|
||||
"processorData": "N/A",
|
||||
"processor": "libxml",
|
||||
"version": "1.0"
|
||||
});
|
||||
return requestBody;
|
||||
})
|
||||
return requestBody
|
||||
}
|
||||
|
||||
async function fetchRequest(request: Request):Promise<JSON> {
|
||||
var responseBody = await fetch(request)
|
||||
.then(response => response.json())
|
||||
.then((body) => body);
|
||||
return responseBody;
|
||||
.then((body) => body)
|
||||
return responseBody
|
||||
}
|
||||
|
||||
function sendProcessedData(data: JSON) {
|
||||
emit("update:result", data);
|
||||
emit("update:result", data)
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@@ -34,7 +34,7 @@ function showHeaders(headers: object, index: number){
|
||||
|
||||
|
||||
<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>
|
||||
<BodyDetailComponent :content-type="currentContentType" :data="currentShownData" v-if="shownDetail == 'body' "></BodyDetailComponent>
|
||||
<HeadersDetailComponent :data="currentShownData" v-if="shownDetail == 'headers' "></HeadersDetailComponent>
|
||||
|
||||
@@ -45,12 +45,12 @@ function refreshHistory(){
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<table class="text-white h-28 w-full text-center">
|
||||
<div class="h-28 text-center text-grey-900 dark:text-white">
|
||||
<table class="w-full">
|
||||
<tr>
|
||||
<th>Time</th>
|
||||
<th>HTTP Method</th>
|
||||
<th>HTTP Headers</th>
|
||||
<th>Headers</th>
|
||||
<th>Request Body</th>
|
||||
<th class="text-2xl"><button @click="refreshHistory()">⟳</button></th>
|
||||
</tr>
|
||||
|
||||
@@ -29,8 +29,8 @@ onMounted( () => {
|
||||
<a href="https://release11.com/">
|
||||
<img :src="logoR11" class="w-72 h-16 p-2 pt-0"/>
|
||||
</a>
|
||||
<div class="flex basis-full flex-col font-medium items-center">
|
||||
<sidebar-menu-element-component category-name="XML">
|
||||
<div class="flex basis-full flex-col font-normal items-center">
|
||||
<sidebar-menu-element-component category-name="Parser">
|
||||
<SidebarToolLinkComponent path-to="/xml/xpath" element-content="XPath" />
|
||||
<SidebarToolLinkComponent path-to="/xml/xquery" element-content="XQuery" />
|
||||
<SidebarToolLinkComponent path-to="/xml/xsd" element-content="XSD" />
|
||||
|
||||
@@ -18,10 +18,10 @@ const props = defineProps(
|
||||
|
||||
<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">
|
||||
<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>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -17,6 +17,6 @@ const props = defineProps(
|
||||
|
||||
<style>
|
||||
.router-link-active {
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
}
|
||||
</style>
|
||||
@@ -1,10 +1,11 @@
|
||||
<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 { ref } from 'vue';
|
||||
import CodeEditor from '../CodeEditorComponent.vue';
|
||||
import { ref } from 'vue'
|
||||
import CodeEditor from '../CodeEditorComponent.vue'
|
||||
|
||||
const data = ref('')
|
||||
const inputFile = ref()
|
||||
|
||||
const props = defineProps(
|
||||
{
|
||||
@@ -15,7 +16,6 @@ const props = defineProps(
|
||||
const emit = defineEmits(['update'])
|
||||
|
||||
function sendValue() {
|
||||
console.log("input works")
|
||||
emit('update', data.value)
|
||||
}
|
||||
|
||||
@@ -25,18 +25,31 @@ function sendNewValue(newValue : string) {
|
||||
}
|
||||
|
||||
function updateData(newData: string) {
|
||||
data.value = newData;
|
||||
sendValue();
|
||||
data.value = newData
|
||||
inputFile.value.value = ''
|
||||
sendValue()
|
||||
}
|
||||
|
||||
function clear() {
|
||||
updateData('');
|
||||
updateData('')
|
||||
}
|
||||
|
||||
function canBeFormatted() {
|
||||
return props.stylizedName.toLowerCase() == 'xml' ||
|
||||
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>
|
||||
@@ -44,8 +57,12 @@ function canBeFormatted() {
|
||||
<template>
|
||||
<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">
|
||||
<span class="dark:text-white">{{ stylizedName }}</span>
|
||||
<div class="flex space-x-2 pb-2">
|
||||
<span class="dark:text-white mr-2">{{ stylizedName }}</span>
|
||||
<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>
|
||||
<XMLButtonFormatterComponent v-if="canBeFormatted()" :xml="data" @update:result="(data:any) => updateData(data.result)"></XMLButtonFormatterComponent>
|
||||
<button class="tool-button" @click="clear">Clear</button>
|
||||
|
||||
@@ -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>
|
||||
@@ -47,6 +47,7 @@ function changeAvailableVersions() {
|
||||
changeAvailableVersionsOfXSLT();
|
||||
else if (props.tool == "xsd")
|
||||
versionsForCurrentEngine.value = ["N/A"];
|
||||
|
||||
else if (props.tool == "xpath")
|
||||
changeAvailableVersionsOfXPath();
|
||||
|
||||
@@ -72,7 +73,7 @@ function selectDefaultEngine() {
|
||||
}
|
||||
|
||||
function selectDefaultVersion() {
|
||||
const lastVersion = versionsForCurrentEngine.value.length - 1
|
||||
const lastVersion = versionsForCurrentEngine.value.length - 1;
|
||||
version.value = versionsForCurrentEngine.value[lastVersion];
|
||||
emitVersionChange();
|
||||
}
|
||||
@@ -126,17 +127,21 @@ function emitVersionChange() {
|
||||
emit("update", version.value);
|
||||
}
|
||||
|
||||
function isVersionSelectionAvailable() {
|
||||
return !(props.tool == "xsd");
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<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">
|
||||
<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">
|
||||
<option v-for="engine in enginesForCurrentTool" :value="engine">{{ engine }}</option>
|
||||
</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>
|
||||
</select>
|
||||
<button class="tool-button" @click="clear">Clear</button>
|
||||
|
||||
@@ -58,7 +58,7 @@ function toggleTooltips() {
|
||||
</script>
|
||||
|
||||
<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()">
|
||||
T<br/>o<br/>o<br/>l<br/>t<br/>i<br/>p<br/>s
|
||||
</button>
|
||||
|
||||
@@ -12,19 +12,19 @@ const props = defineProps({
|
||||
function getDiffEntry(toolVersion : String) : string[] {
|
||||
if ( props.toolName == "xpath" ){
|
||||
switch(toolVersion){
|
||||
case "2.0" : {
|
||||
return xpathDiffs.VersionDiffs[0].diffs
|
||||
case "2.0" : {
|
||||
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") {
|
||||
return ["XSLT 2.0"].concat(xsltDiffs.VersionDiffs[0].diffs).concat(["XSLT 3.0"]).concat(xsltDiffs.VersionDiffs[1].diffs) ;
|
||||
} else{
|
||||
@@ -56,7 +56,7 @@ function getInfo(num : number ){
|
||||
</span>
|
||||
</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" >
|
||||
<div class="w-full h-4 text-center" v-if="diff.includes('XSLT')">
|
||||
------------ {{ diff }} ------------
|
||||
|
||||
BIN
Frontend/src/fonts/Raleway-Variable.ttf
Normal file
BIN
Frontend/src/fonts/Raleway-Variable.ttf
Normal file
Binary file not shown.
BIN
Frontend/src/fonts/Sono-Variable.ttf
Normal file
BIN
Frontend/src/fonts/Sono-Variable.ttf
Normal file
Binary file not shown.
@@ -2,14 +2,28 @@
|
||||
@tailwind components;
|
||||
@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 {
|
||||
@apply py-2 px-4 h-fit text-slate-400 border border-slate-400 rounded-full
|
||||
}
|
||||
|
||||
.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 {
|
||||
@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
|
||||
}
|
||||
@@ -1,26 +1,25 @@
|
||||
<script setup lang="ts">
|
||||
import CodeEditorComponent from '@/components/CodeEditorComponent.vue';
|
||||
import CodeEditorComponent from '@/components/CodeEditorComponent.vue'
|
||||
import EncoderButton from '@/components/encoder/EncoderButtonComponent.vue'
|
||||
import { ref } from 'vue';
|
||||
import { ref } from 'vue'
|
||||
|
||||
|
||||
const data : any = ref("")
|
||||
const imageData = ref("")
|
||||
const DoshowImage = ref(false)
|
||||
const inputImage = ref();
|
||||
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){
|
||||
console.log(inputImage)
|
||||
const reader = new FileReader()
|
||||
reader.onloadend = () => (console.log(data.value = reader.result?.toString().split(',')[1]))
|
||||
reader.readAsDataURL(file.target.files[0])
|
||||
@@ -29,34 +28,41 @@ function convertImageToBase64(file : any){
|
||||
function clear(){
|
||||
data.value = ""
|
||||
imageData.value = ""
|
||||
DoshowImage.value = false;
|
||||
DoshowImage.value = false
|
||||
inputImage.value.value = null
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div id="layoutFull" class="w-full h-full flex">
|
||||
<div id="layoutLeft" class="flex flex-col w-1/2 h-full gap-4">
|
||||
<div class="w-4/5 flex flex-row-reverse gap-2 mt-12 ml-6">
|
||||
<EncoderButton @update:result="setTextFieldValue" :code="data" encode-type="Base64"></EncoderButton>
|
||||
<EncoderButton @update:result="setTextFieldValue" :code="data" encode-type="Text"></EncoderButton>
|
||||
<EncoderButton @image:show="showImage" :code="data" encode-type="Image"></EncoderButton>
|
||||
<button class="tool-button" @click="clear()">Clear</button>
|
||||
<div id="layoutFull" class="w-full h-full flex flex-col xl:flex-row 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-full flex flex-row place-content-between items-center">
|
||||
<label class="dark:text-white text-center">Base64/Text</label>
|
||||
<div class="flex flex-row items-center gap-2">
|
||||
<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 id="codeEditor" class="w-4/5 h-1/3 ml-6 flex flex-col">
|
||||
<label class="dark:text-white text-center w-full">Base64</label>
|
||||
<div id="codeEditor" class="w-full h-full xl:h-1/3 flex flex-col">
|
||||
|
||||
<CodeEditorComponent @update:updated-code="setTextFieldValue" :config="{language:'base64'}" :code="data"></CodeEditorComponent>
|
||||
</div>
|
||||
<div class="w-4/5 flex items-center flex-col ml-6" id="imageImporter">
|
||||
<label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white" for="file_input">Upload file</label>
|
||||
<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" />
|
||||
<div class="flex flex-row justify-center w-full">
|
||||
<div class="flex flex-col items-center w-fit" id="imageImporter">
|
||||
<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 id="separator" class="bg-black h-full w-1" ></div>
|
||||
|
||||
<div id="layoutRight" class=" ml-6 w-2/5">
|
||||
<div v-on="DoshowImage">
|
||||
</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">
|
||||
<img :src="imageData"/>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -16,9 +16,9 @@ function updateVersion(newVersion: string) {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div id="layout" class="flex flex-col lg: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 w-full lg:w-1/2 h-2/3 lg:h-full flex-none items-center">
|
||||
<div id="layout" class="flex flex-row w-full h-full">
|
||||
<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 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="XPath" :data="query" @update="(data) => {query = data}"></xmlInputFieldComponent>
|
||||
</div>
|
||||
|
||||
@@ -10,8 +10,8 @@ const query = ref('');
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div id="layout" class="flex flex-col lg: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 id="layout" class="flex flex-col 2xl:flex-row w-full h-full">
|
||||
<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="XQuery" @update="(data) => {query = data}"></xmlInputFieldComponent>
|
||||
</div>
|
||||
|
||||
@@ -10,8 +10,8 @@ const query = ref('');
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div id="layout" class="flex flex-col lg: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 id="layout" class="flex flex-col 2xl:flex-row w-full h-full">
|
||||
<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="XSD" @update="(data) => {query = data}"></xmlInputFieldComponent>
|
||||
</div>
|
||||
|
||||
@@ -15,14 +15,14 @@ function updateVersion(newVersion: string) {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div id="layout" class="flex flex-col lg: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 w-full lg:w-1/2 h-2/3 lg:h-full flex-none items-center">
|
||||
<xmlInputFieldComponent stylized-name="XML" @update="(data) => {xml = data}"></xmlInputFieldComponent>
|
||||
<xmlInputFieldComponent stylized-name="XSLT" @update="(data) => {query = data}"></xmlInputFieldComponent>
|
||||
<div id="layout" class="flex flex-row w-full h-full">
|
||||
<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 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="XSLT" :data="query" @update="(data) => {query = data}"></xmlInputFieldComponent>
|
||||
</div>
|
||||
<xmlOutputFieldComponent tool="xslt" :xml="xml" :query="query" @update="(version) => updateVersion(version)"></xmlOutputFieldComponent>
|
||||
</div>
|
||||
<xmlOutputFieldComponent tool="xslt" :xml="xml" :query="query" @update="(version) => updateVersion(version)"></xmlOutputFieldComponent>
|
||||
</div>
|
||||
<TooltipComponent tool-type="xslt" :version="version"></TooltipComponent>
|
||||
<tooltipComponent tool-type="xslt" :version="version"></tooltipComponent>
|
||||
</div>
|
||||
</template>
|
||||
@@ -6,6 +6,10 @@ export default {
|
||||
],
|
||||
theme: {
|
||||
extend: {},
|
||||
fontFamily: {
|
||||
'sans': ['Raleway'],
|
||||
'mono': ["Sono"],
|
||||
}
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
Reference in New Issue
Block a user