Implemented XML Formatter and simplified structure of XML tools (#229)
Co-authored-by: Adam Bem <adam.bem@zoho.eu> Reviewed-on: #229 Reviewed-by: Mikolaj Widla <widlam@noreply.example.com>
This commit is contained in:
@@ -8,6 +8,7 @@ server {
|
|||||||
location / {
|
location / {
|
||||||
root /usr/share/nginx/html;
|
root /usr/share/nginx/html;
|
||||||
index index.html index.htm;
|
index index.html index.htm;
|
||||||
|
try_files $uri $uri/ /index.html;
|
||||||
expires -1;
|
expires -1;
|
||||||
add_header Cache-Control "private, no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0";
|
add_header Cache-Control "private, no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0";
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -6,9 +6,9 @@ import SidebarComponent from '@components/sidebar/SidebarComponent.vue';
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div id="layout" class="flex bg-gradient-to-r from-white to-blue-200 dark:from-slate-800 dark:to-indigo-950">
|
<div id="layout" class="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-6 w-full m-4 bg-indigo-50 dark:bg-gray-700 rounded-2xl shadow-md">
|
<div class="relative p-6 w-full m-4 bg-blue-50 dark:bg-gray-700 rounded-2xl shadow-lg">
|
||||||
<RouterView></RouterView>
|
<RouterView></RouterView>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
@@ -1,33 +0,0 @@
|
|||||||
<?xml version="1.0" encoding="utf-8"?>
|
|
||||||
<library>
|
|
||||||
<libraryName>City library</libraryName>
|
|
||||||
<libraryID>345123</libraryID>
|
|
||||||
<readerList>
|
|
||||||
<person>
|
|
||||||
<readerID>7321</readerID>
|
|
||||||
<name>Adam</name>
|
|
||||||
<surname>Choke</surname>
|
|
||||||
</person>
|
|
||||||
<person>
|
|
||||||
<readerID>5123</readerID>
|
|
||||||
<name>Lauren</name>
|
|
||||||
<surname>Wong</surname>
|
|
||||||
</person>
|
|
||||||
</readerList>
|
|
||||||
<bookList>
|
|
||||||
<book>
|
|
||||||
<bookID>6422</bookID>
|
|
||||||
<title>Harry Potter</title>
|
|
||||||
<readerID>7542</readerID>
|
|
||||||
</book>
|
|
||||||
<book>
|
|
||||||
<bookID>1234</bookID>
|
|
||||||
<title>Macbeth</title>
|
|
||||||
<readerID>5123</readerID>
|
|
||||||
</book>
|
|
||||||
<book>
|
|
||||||
<bookID>9556</bookID>
|
|
||||||
<title>Romeo and Juliet</title>
|
|
||||||
</book>
|
|
||||||
</bookList>
|
|
||||||
</library>
|
|
||||||
@@ -1,7 +1,5 @@
|
|||||||
declare namespace p="http://www.release11.com/person";
|
declare default element namespace "http://www.release11.com/schemas/Sample.xsd";
|
||||||
declare namespace b="http://www.release11.com/book";
|
declare namespace u = "http://www.release11.com/schemas/Sample.xsd";
|
||||||
declare namespace l="http://www.release11.com/library";
|
|
||||||
|
|
||||||
|
for $x in /u:root/u:UserList[@Id = 'a']/u:User
|
||||||
for $x in //p:person
|
return string($x/u:Name)
|
||||||
return string($x/p:name)
|
|
||||||
@@ -1,33 +1,62 @@
|
|||||||
<?xml version="1.0" encoding="utf-8"?>
|
<?xml version = "1.0" encoding = "UTF-8"?>
|
||||||
<l:library xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://www.release11.com" xmlns:l="http://www.release11.com/library" xmlns:p="http://www.release11.com/person" xmlns:b="http://www.release11.com/book">
|
<u:root xmlns:u = "http://www.release11.com/schemas/Sample.xsd" xmlns:xsi = "http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation = "http://www.tibco.com/schemas/Shemy4tools/Folder/Schema.xsd Schema4tools.xsd">
|
||||||
<l:libraryName>City library</l:libraryName>
|
<u:UserList Id = "a">
|
||||||
<l:libraryID>345123</l:libraryID>
|
<u:User Id = "1">
|
||||||
<l:readerList>
|
<u:Name>John</u:Name>
|
||||||
<p:person>
|
<u:Surname>Wick</u:Surname>
|
||||||
<p:readerID>7321</p:readerID>
|
<u:DateOfDeath>2023-10-10</u:DateOfDeath>
|
||||||
<p:name>Adam</p:name>
|
</u:User>
|
||||||
<p:surname>Choke</p:surname>
|
<u:User Id = "2">
|
||||||
</p:person>
|
<u:Name>Martha</u:Name>
|
||||||
<p:person>
|
<u:Surname>Whane</u:Surname>
|
||||||
<p:readerID>5123</p:readerID>
|
<u:DateOfDeath>1970-06-13</u:DateOfDeath>
|
||||||
<p:name>Lauren</p:name>
|
</u:User>
|
||||||
<p:surname>Wong</p:surname>
|
<u:User Id = "3">
|
||||||
</p:person>
|
<u:Name>Bruce</u:Name>
|
||||||
</l:readerList>
|
<u:Surname>Lee</u:Surname>
|
||||||
<l:bookList>
|
<u:DateOfDeath>1985-01-24</u:DateOfDeath>
|
||||||
<b:book>
|
</u:User>
|
||||||
<b:bookID>6422</b:bookID>
|
<u:User Id = "4">
|
||||||
<b:title>Harry Potter</b:title>
|
<u:Name>John</u:Name>
|
||||||
<p:readerID>7542</p:readerID>
|
<u:Surname>Rambo</u:Surname>
|
||||||
</b:book>
|
<u:DateOfDeath>2024-06-19</u:DateOfDeath>
|
||||||
<b:book>
|
</u:User>
|
||||||
<b:bookID>1234</b:bookID>
|
<u:NameList>FirstList</u:NameList>
|
||||||
<b:title>Macbeth</b:title>
|
</u:UserList>
|
||||||
<p:readerID>5123</p:readerID>
|
<u:UserList Id = "b">
|
||||||
</b:book>
|
<u:User Id = "1">
|
||||||
<b:book>
|
<u:Name>Jack</u:Name>
|
||||||
<b:bookID>9556</b:bookID>
|
<u:Surname>Wicker</u:Surname>
|
||||||
<b:title>Romeo and Juliet</b:title>
|
<u:DateOfDeath>2023-10-10</u:DateOfDeath>
|
||||||
</b:book>
|
</u:User>
|
||||||
</l:bookList>
|
<u:NameList>SecondList</u:NameList>
|
||||||
</l:library>
|
</u:UserList>
|
||||||
|
<u:UserList Id = "c">
|
||||||
|
<u:User Id = "1">
|
||||||
|
<u:Name>New</u:Name>
|
||||||
|
<u:Surname>Folder</u:Surname>
|
||||||
|
<u:DateOfDeath>2023-11-10</u:DateOfDeath>
|
||||||
|
</u:User>
|
||||||
|
<u:User Id = "2">
|
||||||
|
<u:Name>Newer</u:Name>
|
||||||
|
<u:Surname>Folder</u:Surname>
|
||||||
|
<u:DateOfDeath>2023-11-11</u:DateOfDeath>
|
||||||
|
</u:User>
|
||||||
|
<u:User Id = "3">
|
||||||
|
<u:Name>Newest</u:Name>
|
||||||
|
<u:Surname>Folder</u:Surname>
|
||||||
|
<u:DateOfDeath>2023-11-12</u:DateOfDeath>
|
||||||
|
</u:User>
|
||||||
|
<u:User Id = "4">
|
||||||
|
<u:Name>New</u:Name>
|
||||||
|
<u:Surname>Folder2</u:Surname>
|
||||||
|
<u:DateOfDeath>2023-11-13</u:DateOfDeath>
|
||||||
|
</u:User>
|
||||||
|
<u:User Id = "5">
|
||||||
|
<u:Name>New</u:Name>
|
||||||
|
<u:Surname>Folder-Final</u:Surname>
|
||||||
|
<u:DateOfDeath>2023-11-14</u:DateOfDeath>
|
||||||
|
</u:User>
|
||||||
|
<u:NameList>ThirdList</u:NameList>
|
||||||
|
</u:UserList>
|
||||||
|
</u:root>
|
||||||
@@ -1,42 +1,41 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
<xsd:schema xmlns:xsd="http://www.w3.org/2001/XMLSchema" elementFormDefault="qualified"
|
|
||||||
targetNamespace="">
|
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema"
|
||||||
<xsd:element name="library">
|
xmlns:u="http://www.release11.com/schemas/Sample.xsd"
|
||||||
<xsd:complexType mixed="true">
|
targetNamespace="http://www.release11.com/schemas/Sample.xsd"
|
||||||
<xsd:sequence>
|
elementFormDefault="qualified"
|
||||||
<xsd:element minOccurs="0" name="libraryName" type="xsd:string" />
|
attributeFormDefault="unqualified">
|
||||||
<xsd:element minOccurs="0" name="libraryID" type="xsd:int" />
|
<xs:element name="root">
|
||||||
<xsd:element minOccurs="0" name="readerList">
|
<xs:complexType>
|
||||||
<xsd:complexType mixed="true">
|
<xs:sequence>
|
||||||
<xsd:sequence>
|
<xs:element ref="u:UserList" maxOccurs="unbounded"/>
|
||||||
<xsd:element maxOccurs="unbounded" name="person">
|
</xs:sequence>
|
||||||
<xsd:complexType mixed="true">
|
</xs:complexType>
|
||||||
<xsd:sequence>
|
</xs:element>
|
||||||
<xsd:element minOccurs="0" name="readerID" type="xsd:int" />
|
<xs:element name="UserList">
|
||||||
<xsd:element minOccurs="0" name="name" type="xsd:normalizedString" />
|
<xs:complexType mixed="true">
|
||||||
<xsd:element minOccurs="0" name="surname" type="xsd:normalizedString" />
|
<xs:sequence>
|
||||||
</xsd:sequence>
|
<xs:element ref="u:User" maxOccurs="unbounded"/>
|
||||||
</xsd:complexType>
|
<xs:element ref="u:NameList"/>
|
||||||
</xsd:element>
|
</xs:sequence>
|
||||||
</xsd:sequence>
|
<xs:attribute name="Id" type="xs:string" use="required"/>
|
||||||
</xsd:complexType>
|
</xs:complexType>
|
||||||
</xsd:element>
|
</xs:element>
|
||||||
<xsd:element minOccurs="0" name="bookList">
|
<xs:simpleType name="User">
|
||||||
<xsd:complexType mixed="true">
|
<xs:restriction base="xs:string"/>
|
||||||
<xsd:sequence>
|
</xs:simpleType>
|
||||||
<xsd:element maxOccurs="unbounded" name="book">
|
<xs:element name="User">
|
||||||
<xsd:complexType mixed="true">
|
<xs:complexType>
|
||||||
<xsd:sequence>
|
<xs:sequence>
|
||||||
<xsd:element minOccurs="0" name="bookID" type="xsd:int" />
|
<xs:element ref="u:Name"/>
|
||||||
<xsd:element minOccurs="0" name="title" type="xsd:string" />
|
<xs:element ref="u:Surname"/>
|
||||||
<xsd:element minOccurs="0" name="readerID" type="xsd:int" />
|
<xs:element ref="u:DateOfDeath"/>
|
||||||
</xsd:sequence>
|
</xs:sequence>
|
||||||
</xsd:complexType>
|
<xs:attribute name="Id" type="xs:int" use="required"/>
|
||||||
</xsd:element>
|
</xs:complexType>
|
||||||
</xsd:sequence>
|
</xs:element>
|
||||||
</xsd:complexType>
|
<xs:element name="Name" type="xs:string"/>
|
||||||
</xsd:element>
|
<xs:element name="Surname" type="xs:string"/>
|
||||||
</xsd:sequence>
|
<xs:element name="DateOfDeath" type="xs:date"/>
|
||||||
</xsd:complexType>
|
<xs:element name="NameList" type="xs:string"/>
|
||||||
</xsd:element>
|
</xs:schema>
|
||||||
</xsd:schema>
|
|
||||||
@@ -1,14 +1,17 @@
|
|||||||
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
|
<?xml version = "1.0" encoding = "UTF-8"?>
|
||||||
xmlns:b="http://www.release11.com/book" xmlns:p="http://www.release11.com/person"
|
<xsl:stylesheet version="1.0" xmlns:u = "http://www.release11.com/schemas/Sample.xsd"
|
||||||
xmlns:l="http://www.release11.com/library">
|
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
|
||||||
<xsl:template match="/">
|
<xsl:template match="/">
|
||||||
<Library>
|
<UserLists>
|
||||||
<ReaderCount>
|
<UserListCount>
|
||||||
<xsl:value-of select="count(//p:person)" />
|
<xsl:value-of select="count(/u:root/u:UserList)" />
|
||||||
</ReaderCount>
|
</UserListCount>
|
||||||
<BookCount>
|
<xsl:for-each select="/u:root/u:UserList">
|
||||||
<xsl:value-of select="count(/l:library/l:bookList/b:book)" />
|
<UserListStats>
|
||||||
</BookCount>
|
<Name><xsl:value-of select="u:NameList" /></Name>
|
||||||
</Library>
|
<UserCount><xsl:value-of select="count(u:User)" /></UserCount>
|
||||||
|
</UserListStats>
|
||||||
|
</xsl:for-each>
|
||||||
|
</UserLists>
|
||||||
</xsl:template>
|
</xsl:template>
|
||||||
</xsl:stylesheet>
|
</xsl:stylesheet>
|
||||||
47
Frontend/src/components/common/InsertTemplateComponent.vue
Normal file
47
Frontend/src/components/common/InsertTemplateComponent.vue
Normal file
@@ -0,0 +1,47 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
|
||||||
|
import sampleXML from "@/assets/sampleXml.xml?raw"
|
||||||
|
import sampleXSLT from "@/assets/sampleXslt.xml?raw"
|
||||||
|
import sampleXSD from "@/assets/sampleXsd.xml?raw"
|
||||||
|
import sampleXQuery from "@/assets/sampleXQuery.xquery?raw"
|
||||||
|
|
||||||
|
|
||||||
|
const props = defineProps(
|
||||||
|
{
|
||||||
|
stylizedName: {type: String, required: true}
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
const emit = defineEmits(['update:defaultData'])
|
||||||
|
|
||||||
|
function setDefault() {
|
||||||
|
const emitName = "update:defaultData";
|
||||||
|
switch (props.stylizedName.toLowerCase()) {
|
||||||
|
case "json":
|
||||||
|
emit(emitName, "{'message': 'Here we have to add some proper message', 'answer': 'Ya, definitely'}")
|
||||||
|
break;
|
||||||
|
case "xpath":
|
||||||
|
emit(emitName, "/u:root/u:UserList/u:User[../u:NameList = 'FirstList']")
|
||||||
|
break;
|
||||||
|
case "xsd":
|
||||||
|
emit(emitName, sampleXSD)
|
||||||
|
break;
|
||||||
|
case "xslt":
|
||||||
|
emit(emitName, sampleXSLT)
|
||||||
|
break;
|
||||||
|
case "xquery":
|
||||||
|
emit(emitName, sampleXQuery)
|
||||||
|
break;
|
||||||
|
|
||||||
|
default:
|
||||||
|
emit(emitName, sampleXML)
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<button class="tool-button" @click="setDefault()">Default {{ stylizedName }}</button>
|
||||||
|
</template>
|
||||||
@@ -1,10 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<h1>Formatter</h1>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped></style>
|
|
||||||
@@ -0,0 +1,54 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
json: {type: String, required: true},
|
||||||
|
isMinimizer: {type: Boolean}
|
||||||
|
})
|
||||||
|
|
||||||
|
const emit = defineEmits(["update:result"])
|
||||||
|
|
||||||
|
function process() {
|
||||||
|
var request:Request = prepareRequest();
|
||||||
|
fetchRequest(request).then((data) => {
|
||||||
|
sendProcessedData(data);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
function prepareRequest():Request {
|
||||||
|
var request = new Request(prepareURL(), {
|
||||||
|
body: prepareRequestBody(),
|
||||||
|
method: "POST"
|
||||||
|
});
|
||||||
|
return request;
|
||||||
|
}
|
||||||
|
|
||||||
|
function prepareURL(): string {
|
||||||
|
var mode = "formatting";
|
||||||
|
if (props.isMinimizer)
|
||||||
|
mode = "minimize";
|
||||||
|
return document.location.protocol + "//" + document.location.hostname + "/java/json/" + mode;
|
||||||
|
}
|
||||||
|
|
||||||
|
function prepareRequestBody():string {
|
||||||
|
var requestBody = props.json;
|
||||||
|
return requestBody;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function fetchRequest(request: Request):Promise<JSON> {
|
||||||
|
var responseBody = await fetch(request)
|
||||||
|
.then(response => response.json())
|
||||||
|
.then((body) => body);
|
||||||
|
console.log(responseBody);
|
||||||
|
return responseBody;
|
||||||
|
}
|
||||||
|
|
||||||
|
function sendProcessedData(data: JSON) {
|
||||||
|
emit("update:result", data);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<button class="tool-button" @click="process()">{{ props.isMinimizer ? "Minimize" : "Format" }}</button>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped></style>
|
||||||
@@ -0,0 +1,58 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
xml: {type: String, required: true},
|
||||||
|
isMinimizer: {type: Boolean}
|
||||||
|
})
|
||||||
|
|
||||||
|
const emit = defineEmits(["update:result"])
|
||||||
|
|
||||||
|
function process() {
|
||||||
|
var request:Request = prepareRequest();
|
||||||
|
fetchRequest(request).then((data) => {
|
||||||
|
sendProcessedData(data);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
function prepareRequest():Request {
|
||||||
|
var request = 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;
|
||||||
|
}
|
||||||
|
|
||||||
|
function prepareRequestBody():string {
|
||||||
|
var requestBody = JSON.stringify({
|
||||||
|
"data": props.xml,
|
||||||
|
"process": "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) => body);
|
||||||
|
return responseBody;
|
||||||
|
}
|
||||||
|
|
||||||
|
function sendProcessedData(data: JSON) {
|
||||||
|
emit("update:result", data);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<button class="tool-button" @click="process()">{{ props.isMinimizer ? "Minimize" : "Format" }}</button>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped></style>
|
||||||
@@ -3,7 +3,16 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<h1 class="text-3xl underline">Landing</h1>
|
<div class="dark:text-slate-100">
|
||||||
|
<h1 class="text-3xl mb-4">Welcome to Release11 Tools</h1>
|
||||||
|
<h2 class="text-xl">Our toolset is split to three main categories:</h2>
|
||||||
|
<ol class="list-decimal ml-5">
|
||||||
|
<li><strong>XML</strong> - containing various tools that allow to validate and transform any XML</li>
|
||||||
|
<li><strong>Formatter</strong> - containing tools for formatting text files in various formats</li>
|
||||||
|
<li><strong>REST</strong> - consist of Mock that allows to create mocked REST endpoint</li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped></style>
|
<style scoped></style>
|
||||||
|
|||||||
15
Frontend/src/components/sidebar/FooterComponent.vue
Normal file
15
Frontend/src/components/sidebar/FooterComponent.vue
Normal file
@@ -0,0 +1,15 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="flex flex-col gap-4 text-center font-thin text-slate-600 dark:text-slate-400 ">
|
||||||
|
<div class="flex flex-col">
|
||||||
|
<a href="mailto:bugs@release11.com">Found a bug?</a>
|
||||||
|
<a href="#" class="hidden">Privacy Policy</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<span>Copyright 2023 <br/> Release11</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
@@ -2,6 +2,7 @@
|
|||||||
import { ref , onMounted} from 'vue'
|
import { ref , onMounted} from 'vue'
|
||||||
import SidebarToolLinkComponent from './SidebarToolLinkComponent.vue';
|
import SidebarToolLinkComponent from './SidebarToolLinkComponent.vue';
|
||||||
import SidebarMenuElementComponent from './SidebarMenuElementComponent.vue';
|
import SidebarMenuElementComponent from './SidebarMenuElementComponent.vue';
|
||||||
|
import FooterComponent from './FooterComponent.vue';
|
||||||
import logoDark from '@assets/logo_biale.svg';
|
import logoDark from '@assets/logo_biale.svg';
|
||||||
import logoWhite from '@assets/logo_czarne.svg';
|
import logoWhite from '@assets/logo_czarne.svg';
|
||||||
|
|
||||||
@@ -24,11 +25,11 @@ onMounted( () => {
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<aside class="relative flex-shrink-0 top-0 left-0 z-40 w-48 h-screen" >
|
<aside class="relative flex-shrink-0 top-0 left-0 z-40 w-48 h-screen" >
|
||||||
<div class="h-full px-3 pt-2 pb-4 overflow-y-auto">
|
<div class="flex flex-col h-full px-3 pt-2 pb-4 overflow-y-auto">
|
||||||
<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 flex-col font-medium items-center">
|
<div class="flex basis-full flex-col font-medium items-center">
|
||||||
<sidebar-menu-element-component category-name="XML">
|
<sidebar-menu-element-component category-name="XML">
|
||||||
<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" />
|
||||||
@@ -37,9 +38,9 @@ onMounted( () => {
|
|||||||
</sidebar-menu-element-component>
|
</sidebar-menu-element-component>
|
||||||
|
|
||||||
<sidebar-menu-element-component category-name="Formatter">
|
<sidebar-menu-element-component category-name="Formatter">
|
||||||
<SidebarToolLinkComponent path-to="/format/HTML" element-content="HTML Formatter" />
|
<SidebarToolLinkComponent path-to="/format/HTML" element-content="HTML" />
|
||||||
<SidebarToolLinkComponent path-to="/format/JSON" element-content="JSON Formatter" />
|
<SidebarToolLinkComponent path-to="/format/JSON" element-content="JSON" />
|
||||||
<SidebarToolLinkComponent path-to="/format/XML" element-content="XML Formatter" />
|
<SidebarToolLinkComponent path-to="/format/XML" element-content="XML" />
|
||||||
</sidebar-menu-element-component>
|
</sidebar-menu-element-component>
|
||||||
|
|
||||||
|
|
||||||
@@ -48,6 +49,7 @@ onMounted( () => {
|
|||||||
</sidebar-menu-element-component>
|
</sidebar-menu-element-component>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
<FooterComponent></FooterComponent>
|
||||||
</div>
|
</div>
|
||||||
</aside>
|
</aside>
|
||||||
</template>
|
</template>
|
||||||
@@ -17,7 +17,7 @@ const props = defineProps(
|
|||||||
|
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="w-full mb-4 p-2 rounded-xl shadow-md bg-gradient-to-r from-blue-400 to-blue-200 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-bold 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>
|
||||||
|
|||||||
@@ -1,47 +1,49 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import xmlInputFieldToolbarComponent from '@/components/xml/XmlInputFieldToolbarComponent.vue';
|
import InsertTemplateComponent from '@components/common/InsertTemplateComponent.vue';
|
||||||
|
import XMLButtonFormatterComponent from '@components/formatter/XMLButtonFormatterComponent.vue'
|
||||||
import { ref } from 'vue';
|
import { ref } from 'vue';
|
||||||
|
|
||||||
const xml = ref('')
|
const data = ref('')
|
||||||
const query = ref('')
|
|
||||||
|
|
||||||
const props = defineProps(
|
const props = defineProps(
|
||||||
{
|
{
|
||||||
prettyName: {type: String, required: true},
|
stylizedName: {type: String, required: true},
|
||||||
xmlData: {type: String},
|
data: {type: String},
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
const emit = defineEmits(['update:xml', 'update:transform'])
|
const emit = defineEmits(['update'])
|
||||||
|
|
||||||
function sendXml() {
|
function sendValue() {
|
||||||
emit('update:xml', xml.value)
|
emit('update', data.value)
|
||||||
}
|
}
|
||||||
|
|
||||||
function sendTransform() {
|
function updateData(newData: string) {
|
||||||
emit('update:transform', query.value)
|
data.value = newData;
|
||||||
|
sendValue();
|
||||||
}
|
}
|
||||||
|
|
||||||
function setToDefaultXML(data: string) {
|
function clear() {
|
||||||
xml.value = data;
|
updateData('');
|
||||||
sendXml();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function setToDefaultQuery(data: string) {
|
function canBeFormatted() {
|
||||||
query.value = data;
|
return props.stylizedName.toLowerCase() == 'xml' ||
|
||||||
sendTransform();
|
props.stylizedName.toLowerCase() == 'xsd' ||
|
||||||
|
props.stylizedName.toLowerCase() == 'xslt';
|
||||||
}
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="flex flex-col w-full lg:w-1/2 h-full items-center gap-4">
|
<div class="flex flex-col w-full h-1/2">
|
||||||
<div class="flex flex-col w-full h-1/2">
|
<div class="flex place-content-between w-full pr-2 items-center m-2">
|
||||||
<xmlInputFieldToolbarComponent prettyName="XML" @update:defaultData="(data) => setToDefaultXML(data)"></xmlInputFieldToolbarComponent>
|
<span class="dark:text-white">{{ stylizedName }}</span>
|
||||||
<textarea id="xmlField" v-model="xml" @input="sendXml()" class="w-full h-full resize-none dark:text-slate-100 dark:bg-gray-600 border border-slate-400 p-2 rounded-md"></textarea>
|
<div class="flex space-x-2">
|
||||||
</div>
|
<InsertTemplateComponent :stylized-name="props.stylizedName" @update:default-data="(data: string) => updateData(data)"></InsertTemplateComponent>
|
||||||
<div class="flex flex-col w-full h-1/2">
|
<XMLButtonFormatterComponent v-if="canBeFormatted()" :xml="data" @update:result="(data:any) => updateData(data.result)"></XMLButtonFormatterComponent>
|
||||||
<xmlInputFieldToolbarComponent :prettyName="$props.prettyName" @update:defaultData="(data) => setToDefaultQuery(data)"></xmlInputFieldToolbarComponent>
|
<button class="tool-button" @click="clear">Clear</button>
|
||||||
<textarea id="transformField" v-model="query" @input="sendTransform()" class="w-full h-full resize-none dark:text-slate-100 dark:bg-gray-600 border border-slate-400 p-2 rounded-md"></textarea>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<textarea id="xmlField" v-model="data" @input="sendValue()" class="text-field"></textarea>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@@ -1,10 +1,6 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
|
||||||
import sampleXML from "@/assets/sampleXml.xml?raw"
|
import InsertTemplateComponent from '@components/common/InsertTemplateComponent.vue'
|
||||||
import sampleXSLT from "@/assets/sampleXslt.xml?raw"
|
|
||||||
import sampleXSD from "@/assets/sampleXsd.xml?raw"
|
|
||||||
import sampleXQuery from "@/assets/sampleXQuery.xquery?raw"
|
|
||||||
|
|
||||||
|
|
||||||
const props = defineProps(
|
const props = defineProps(
|
||||||
{
|
{
|
||||||
@@ -14,37 +10,13 @@ const props = defineProps(
|
|||||||
|
|
||||||
const emit = defineEmits(['update:defaultData'])
|
const emit = defineEmits(['update:defaultData'])
|
||||||
|
|
||||||
function setDefault() {
|
function setDefault(data: string) {
|
||||||
const emitName = "update:defaultData";
|
const emitName = "update:defaultData";
|
||||||
switch (props.prettyName.toLowerCase()) {
|
emit(emitName, data)
|
||||||
case "xpath":
|
|
||||||
emit(emitName, "string(/l:library/l:libraryName)")
|
|
||||||
break;
|
|
||||||
case "xsd":
|
|
||||||
emit(emitName, sampleXSD)
|
|
||||||
break;
|
|
||||||
case "xslt":
|
|
||||||
emit(emitName, sampleXSLT)
|
|
||||||
break;
|
|
||||||
case "xquery":
|
|
||||||
emit(emitName, sampleXQuery)
|
|
||||||
break;
|
|
||||||
|
|
||||||
default:
|
|
||||||
emit(emitName, sampleXML)
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="flex place-content-between w-full pr-2 items-center m-2">
|
|
||||||
<span class="dark:text-white">{{ prettyName }}</span>
|
|
||||||
<div class="flex space-x-2">
|
|
||||||
<button class="tool-button" @click="setDefault()">Insert default {{ prettyName }}</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
@@ -1,6 +1,5 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import xmlOutputFieldToolbarComponent from '@/components/xml/XmlOutputFieldToolbarComponent.vue';
|
import { onMounted, ref } from 'vue';
|
||||||
import { ref } from 'vue';
|
|
||||||
|
|
||||||
|
|
||||||
const props = defineProps(
|
const props = defineProps(
|
||||||
@@ -13,18 +12,132 @@ const props = defineProps(
|
|||||||
|
|
||||||
const result = ref('');
|
const result = ref('');
|
||||||
|
|
||||||
function parseResult(data: any) {
|
var enginesForCurrentTool = ref(["saxon", "xalan", "libxml"]);
|
||||||
|
|
||||||
|
const allVersions = ["1.0", "2.0", "3.0", "3.1"];
|
||||||
|
var versionsForCurrentEngine = ref([""]);
|
||||||
|
|
||||||
|
const engine = ref('');
|
||||||
|
const version = ref('');
|
||||||
|
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
changeAvailableEngines();
|
||||||
|
changeAvailableVersions();
|
||||||
|
})
|
||||||
|
|
||||||
|
function changeAvailableEngines() {
|
||||||
|
if (props.tool == "xsd") {
|
||||||
|
enginesForCurrentTool.value = ["xalan", "libxml"]
|
||||||
|
}
|
||||||
|
else if (props.tool == "xquery") {
|
||||||
|
enginesForCurrentTool.value = ["saxon"]
|
||||||
|
}
|
||||||
|
|
||||||
|
selectDefaultEngine();
|
||||||
|
}
|
||||||
|
|
||||||
|
function changeAvailableVersions() {
|
||||||
|
if (props.tool == "xquery")
|
||||||
|
versionsForCurrentEngine.value = ["3.1"];
|
||||||
|
else if (props.tool == "xslt")
|
||||||
|
changeAvailableVersionsOfXSLT();
|
||||||
|
else if (props.tool == "xsd")
|
||||||
|
versionsForCurrentEngine.value = ["N/A"];
|
||||||
|
else if (props.tool == "xpath")
|
||||||
|
changeAvailableVersionsOfXPath();
|
||||||
|
|
||||||
|
selectDefaultVersion();
|
||||||
|
}
|
||||||
|
|
||||||
|
function changeAvailableVersionsOfXSLT() {
|
||||||
|
if(engine.value == "saxon")
|
||||||
|
versionsForCurrentEngine.value = ["3.0"];
|
||||||
|
else
|
||||||
|
versionsForCurrentEngine.value = ["1.0"];
|
||||||
|
}
|
||||||
|
|
||||||
|
function changeAvailableVersionsOfXPath() {
|
||||||
|
if(engine.value == "xalan" || engine.value == "libxml")
|
||||||
|
versionsForCurrentEngine.value = ["1.0"];
|
||||||
|
else if (engine.value == "saxon")
|
||||||
|
versionsForCurrentEngine.value = allVersions;
|
||||||
|
}
|
||||||
|
|
||||||
|
function selectDefaultEngine() {
|
||||||
|
engine.value = enginesForCurrentTool.value[0];
|
||||||
|
}
|
||||||
|
|
||||||
|
function selectDefaultVersion() {
|
||||||
|
const lastVersion = versionsForCurrentEngine.value.length - 1
|
||||||
|
version.value = versionsForCurrentEngine.value[lastVersion];
|
||||||
|
}
|
||||||
|
|
||||||
|
function process() {
|
||||||
|
var request:Request = prepareRequest();
|
||||||
|
fetchRequest(request).then((data) => {
|
||||||
|
updateOutputField(data);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
function prepareRequest():Request {
|
||||||
|
var request = new Request(prepareURL(), {
|
||||||
|
body: prepareRequestBody(),
|
||||||
|
method: "POST"
|
||||||
|
});
|
||||||
|
return request
|
||||||
|
}
|
||||||
|
|
||||||
|
function prepareURL(): string {
|
||||||
|
const engineEndpoint = engine.value == "libxml" ? "libxml" : "java";
|
||||||
|
return document.location.protocol + "//" + document.location.hostname + "/" + engineEndpoint + "/" + props.tool;
|
||||||
|
}
|
||||||
|
|
||||||
|
function prepareRequestBody():string {
|
||||||
|
var requestBody = JSON.stringify({
|
||||||
|
"data": props.xml,
|
||||||
|
"process": props.query,
|
||||||
|
"processor": engine.value,
|
||||||
|
"version": version.value
|
||||||
|
});
|
||||||
|
return requestBody;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function fetchRequest(request: Request):Promise<JSON> {
|
||||||
|
var responseBody = await fetch(request)
|
||||||
|
.then(response => response.json())
|
||||||
|
.then((body) => body);
|
||||||
|
return responseBody;
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateOutputField(data: any) {
|
||||||
result.value = data.result;
|
result.value = data.result;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function clear() {
|
||||||
|
result.value = "";
|
||||||
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="flex flex-col w-full lg:w-1/2 h-full items-center">
|
<div class="flex flex-col w-full lg:w-1/2 h-1/2 lg:h-full items-center">
|
||||||
<xmlOutputFieldToolbarComponent :xml="$props.xml" :query="$props.query" :tool="$props.tool" @update:result="(data) => parseResult(data)"></xmlOutputFieldToolbarComponent>
|
<div class="flex place-content-between w-full items-center m-2">
|
||||||
<div class="w-full h-full p-2 overflow-scroll border border-slate-400 rounded-md text-left bg-white dark:text-slate-100 dark:bg-gray-600">
|
<span class="dark:text-white">Result:</span>
|
||||||
<pre class="break-words"><code>{{ result }}</code></pre>
|
<div class="flex space-x-2">
|
||||||
|
<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" 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>
|
||||||
|
<button class="tool-button" @click="process">Process</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-field overflow-scroll h-full w-full">
|
||||||
|
<pre class="whitespace-pre-wrap"><code>{{ result }}</code></pre>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@@ -1,112 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
import { onMounted, ref } from 'vue';
|
|
||||||
|
|
||||||
var engines = ["saxon", "xalan", "libxml"];
|
|
||||||
var versions = ["1.0", "2.0", "3.0", "3.1"];
|
|
||||||
|
|
||||||
const props = defineProps(
|
|
||||||
{
|
|
||||||
tool: {type: String, required: true},
|
|
||||||
xml: {type: String},
|
|
||||||
query: {type: String},
|
|
||||||
}
|
|
||||||
)
|
|
||||||
|
|
||||||
const emit = defineEmits(['update:result'])
|
|
||||||
|
|
||||||
const engine = ref('');
|
|
||||||
const version = ref('');
|
|
||||||
|
|
||||||
const isSaxonHidden = ref(false);
|
|
||||||
const isXalanHidden = ref(false);
|
|
||||||
const isLibXMLHidden = ref(false);
|
|
||||||
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
selectAvailableEngines();
|
|
||||||
selectAvailableVersions();
|
|
||||||
selectDefaults();
|
|
||||||
})
|
|
||||||
|
|
||||||
function selectAvailableEngines() {
|
|
||||||
if (props.tool == "xsd") {
|
|
||||||
engines = ["xalan", "libxml"]
|
|
||||||
}
|
|
||||||
else if (props.tool == "xquery") {
|
|
||||||
engines = ["saxon"]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function selectAvailableVersions() {
|
|
||||||
if (props.tool == "xquery")
|
|
||||||
versions = ["3.1"];
|
|
||||||
else if (props.tool == "xsd")
|
|
||||||
versions = ["N/A"];
|
|
||||||
}
|
|
||||||
|
|
||||||
function selectDefaults() {
|
|
||||||
version.value = versions[versions.length - 1];
|
|
||||||
engine.value = engines[0];
|
|
||||||
}
|
|
||||||
|
|
||||||
function process() {
|
|
||||||
var request:Request = prepareRequest();
|
|
||||||
fetchRequest(request).then((data) => {
|
|
||||||
sendProcessedData(data);
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
function prepareRequest():Request {
|
|
||||||
var request = new Request(prepareURL(), {
|
|
||||||
body: prepareRequestBody(),
|
|
||||||
method: "POST"
|
|
||||||
});
|
|
||||||
return request
|
|
||||||
}
|
|
||||||
|
|
||||||
function prepareURL(): string {
|
|
||||||
const engineEndpoint = engine.value == "libxml" ? "libxml" : "java";
|
|
||||||
return document.location.protocol + "//" + document.location.hostname + "/" + engineEndpoint + "/" + props.tool;
|
|
||||||
}
|
|
||||||
|
|
||||||
function prepareRequestBody():string {
|
|
||||||
var requestBody = JSON.stringify({
|
|
||||||
"data": props.xml,
|
|
||||||
"process": props.query,
|
|
||||||
"processor": engine.value,
|
|
||||||
"version": version.value
|
|
||||||
});
|
|
||||||
return requestBody;
|
|
||||||
}
|
|
||||||
|
|
||||||
async function fetchRequest(request: Request):Promise<JSON> {
|
|
||||||
var responseBody = await fetch(request)
|
|
||||||
.then(response => response.json())
|
|
||||||
.then((body) => body);
|
|
||||||
return responseBody;
|
|
||||||
}
|
|
||||||
|
|
||||||
function sendProcessedData(data: JSON) {
|
|
||||||
emit("update:result", data);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div class="flex place-content-between w-full items-center m-2">
|
|
||||||
<span class="dark:text-white">Result:</span>
|
|
||||||
<div class="flex space-x-2">
|
|
||||||
<select v-model="engine" name="engine" class="px-3 rounded-full border border-slate-400 bg-white dark:text-slate-100 dark:bg-gray-600">
|
|
||||||
<option v-for="engine in engines" :value="engine">{{ engine }}</option>
|
|
||||||
</select>
|
|
||||||
<select v-model="version" name="version" class="px-3 rounded-full border border-slate-400 bg-white dark:text-slate-100 dark:bg-gray-600">
|
|
||||||
<option v-for="version in versions" :value="version">{{ version }}</option>
|
|
||||||
</select>
|
|
||||||
<button class="tool-button">Clear</button>
|
|
||||||
<button class="tool-button" @click="process">Process</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
@@ -3,6 +3,9 @@ import { createRouter, createWebHistory } from 'vue-router'
|
|||||||
const landingPage = import("@views/LandingView.vue")
|
const landingPage = import("@views/LandingView.vue")
|
||||||
const restMock = import("@views/RestMockView.vue")
|
const restMock = import("@views/RestMockView.vue")
|
||||||
|
|
||||||
|
const jsonFormatter = import("@views/JsonFormatterView.vue")
|
||||||
|
const xmlFormatter = import("@views/XmlFormatterView.vue")
|
||||||
|
|
||||||
const xsltTool = import("@views/XSLTView.vue")
|
const xsltTool = import("@views/XSLTView.vue")
|
||||||
const xsdTool = import("@views/XSDView.vue")
|
const xsdTool = import("@views/XSDView.vue")
|
||||||
const xpathTool = import("@views/XPathView.vue")
|
const xpathTool = import("@views/XPathView.vue")
|
||||||
@@ -14,6 +17,16 @@ const routes = [
|
|||||||
name: 'landing',
|
name: 'landing',
|
||||||
component: () => landingPage
|
component: () => landingPage
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: '/format/xml',
|
||||||
|
name: 'xmlFormatter',
|
||||||
|
component: () => xmlFormatter
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/format/json',
|
||||||
|
name: 'jsonFormatter',
|
||||||
|
component: () => jsonFormatter
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: '/xml/xpath',
|
path: '/xml/xpath',
|
||||||
name: 'xpath',
|
name: 'xpath',
|
||||||
|
|||||||
@@ -3,5 +3,9 @@
|
|||||||
@tailwind utilities;
|
@tailwind utilities;
|
||||||
|
|
||||||
.tool-button {
|
.tool-button {
|
||||||
@apply py-1 px-4 rounded-full bg-gradient-to-r from-blue-300 to-sky-200 dark:text-white dark:from-sky-600 dark:to-sky-800 hover:bg-blue-400
|
@apply py-1 px-4 rounded-full w-fit bg-gradient-to-r from-blue-400 to-blue-300 dark:text-white dark:from-sky-600 dark:to-sky-800 hover:bg-blue-400
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-field {
|
||||||
|
@apply w-full h-full resize-none font-mono bg-white dark:text-slate-100 dark:bg-gray-600 border border-slate-400 p-2 rounded-md
|
||||||
}
|
}
|
||||||
36
Frontend/src/views/JsonFormatterView.vue
Normal file
36
Frontend/src/views/JsonFormatterView.vue
Normal file
@@ -0,0 +1,36 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import JsonButtonFormatterComponent from '@/components/formatter/JsonButtonFormatterComponent.vue';
|
||||||
|
import InsertTemplateComponent from '@components/common/InsertTemplateComponent.vue';
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
|
||||||
|
const json = ref('');
|
||||||
|
|
||||||
|
function setTextFieldValue(data: string) {
|
||||||
|
json.value = data
|
||||||
|
}
|
||||||
|
|
||||||
|
function format(formattedXml: any) {
|
||||||
|
json.value = formattedXml.data;
|
||||||
|
}
|
||||||
|
|
||||||
|
function clear() {
|
||||||
|
json.value = '';
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div id="layout" class="flex flex-col w-full h-full gap-4">
|
||||||
|
<div id="toolbar" class= "flex flex-col gap-4 items-center lg:flex-row place-content-between">
|
||||||
|
<span class="dark:text-slate-100">JSON Formatter</span>
|
||||||
|
<div class="flex flex-wrap gap-2 justify-center">
|
||||||
|
<InsertTemplateComponent stylized-name="JSON" @update:defaultData="(data: string) => setTextFieldValue(data)"></InsertTemplateComponent>
|
||||||
|
<button class="tool-button" @click="clear()">Clear</button>
|
||||||
|
<JsonButtonFormatterComponent isMinimizer :json="json" @update:result="(data: any) => format(data)"></JsonButtonFormatterComponent>
|
||||||
|
<JsonButtonFormatterComponent :json="json" @update:result="(data: any) => format(data)"></JsonButtonFormatterComponent>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<textarea name="data" id="data" :value="json" class="text-field"></textarea>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
@@ -11,8 +11,10 @@ const query = ref('');
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div id="layout" class="flex flex-col lg:flex-row w-full h-full gap-4">
|
<div id="layout" class="flex flex-col lg:flex-row w-full h-full gap-4">
|
||||||
<xmlInputFieldComponent prettyName="XPath" @update:xml="(data) => {xml = data}" @update:transform="(data) => {query = data}"></xmlInputFieldComponent>
|
<div class="flex flex-col w-full lg:w-1/2 h-full items-center gap-4">
|
||||||
|
<xmlInputFieldComponent stylized-name="XML" :data="xml" @update="(data) => {xml = data}"></xmlInputFieldComponent>
|
||||||
|
<xmlInputFieldComponent stylized-name="XPath" :data="query" @update="(data) => {query = data}"></xmlInputFieldComponent>
|
||||||
|
</div>
|
||||||
<xmlOutputFieldComponent tool="xpath" :xml="xml" :query="query"></xmlOutputFieldComponent>
|
<xmlOutputFieldComponent tool="xpath" :xml="xml" :query="query"></xmlOutputFieldComponent>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@@ -11,8 +11,10 @@ const query = ref('');
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div id="layout" class="flex flex-col lg:flex-row w-full h-full gap-4">
|
<div id="layout" class="flex flex-col lg:flex-row w-full h-full gap-4">
|
||||||
<xmlInputFieldComponent prettyName="XQuery" @update:xml="(data) => {xml = data}" @update:transform="(data) => {query = data}"></xmlInputFieldComponent>
|
<div class="flex flex-col w-full lg:w-1/2 h-full items-center gap-4">
|
||||||
|
<xmlInputFieldComponent stylized-name="XML" @update="(data) => {xml = data}"></xmlInputFieldComponent>
|
||||||
|
<xmlInputFieldComponent stylized-name="XQuery" @update="(data) => {query = data}"></xmlInputFieldComponent>
|
||||||
|
</div>
|
||||||
<xmlOutputFieldComponent tool="xquery" :xml="xml" :query="query"></xmlOutputFieldComponent>
|
<xmlOutputFieldComponent tool="xquery" :xml="xml" :query="query"></xmlOutputFieldComponent>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@@ -11,8 +11,10 @@ const query = ref('');
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div id="layout" class="flex flex-col lg:flex-row w-full h-full gap-4">
|
<div id="layout" class="flex flex-col lg:flex-row w-full h-full gap-4">
|
||||||
<xmlInputFieldComponent prettyName="XSD" @update:xml="(data) => {xml = data}" @update:transform="(data) => {query = data}"></xmlInputFieldComponent>
|
<div class="flex flex-col w-full lg:w-1/2 h-full items-center gap-4">
|
||||||
|
<xmlInputFieldComponent stylized-name="XML" @update="(data) => {xml = data}"></xmlInputFieldComponent>
|
||||||
|
<xmlInputFieldComponent stylized-name="XSD" @update="(data) => {query = data}"></xmlInputFieldComponent>
|
||||||
|
</div>
|
||||||
<xmlOutputFieldComponent tool="xsd" :xml="xml" :query="query"></xmlOutputFieldComponent>
|
<xmlOutputFieldComponent tool="xsd" :xml="xml" :query="query"></xmlOutputFieldComponent>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@@ -11,8 +11,10 @@ const query = ref('');
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div id="layout" class="flex flex-col lg:flex-row w-full h-full gap-4">
|
<div id="layout" class="flex flex-col lg:flex-row w-full h-full gap-4">
|
||||||
<xmlInputFieldComponent prettyName="XSLT" @update:xml="(data) => {xml = data}" @update:transform="(data) => {query = data}"></xmlInputFieldComponent>
|
<div class="flex flex-col w-full lg:w-1/2 h-full items-center gap-4">
|
||||||
|
<xmlInputFieldComponent stylized-name="XML" @update="(data) => {xml = data}"></xmlInputFieldComponent>
|
||||||
|
<xmlInputFieldComponent stylized-name="XSLT" @update="(data) => {query = data}"></xmlInputFieldComponent>
|
||||||
|
</div>
|
||||||
<xmlOutputFieldComponent tool="xslt" :xml="xml" :query="query"></xmlOutputFieldComponent>
|
<xmlOutputFieldComponent tool="xslt" :xml="xml" :query="query"></xmlOutputFieldComponent>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
36
Frontend/src/views/XmlFormatterView.vue
Normal file
36
Frontend/src/views/XmlFormatterView.vue
Normal file
@@ -0,0 +1,36 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import XMLButtonFormatterComponent from '@/components/formatter/XMLButtonFormatterComponent.vue';
|
||||||
|
import InsertTemplateComponent from '@components/common/InsertTemplateComponent.vue';
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
|
||||||
|
const xml = ref('');
|
||||||
|
|
||||||
|
function setTextFieldValue(data: string) {
|
||||||
|
xml.value = data
|
||||||
|
}
|
||||||
|
|
||||||
|
function format(formattedXml: any) {
|
||||||
|
xml.value = formattedXml.result;
|
||||||
|
}
|
||||||
|
|
||||||
|
function clear() {
|
||||||
|
xml.value = '';
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div id="layout" class="flex flex-col w-full h-full gap-4">
|
||||||
|
<div id="toolbar" class= "flex flex-col gap-4 items-center lg:flex-row place-content-between">
|
||||||
|
<span class="dark:text-slate-100">XML Formatter</span>
|
||||||
|
<div class="flex flex-wrap gap-2 justify-center">
|
||||||
|
<InsertTemplateComponent stylized-name="XML" @update:defaultData="(data: string) => setTextFieldValue(data)"></InsertTemplateComponent>
|
||||||
|
<button class="tool-button" @click="clear()">Clear</button>
|
||||||
|
<XMLButtonFormatterComponent is-minimizer :xml="xml" @update:result="(data: any) => format(data)"></XMLButtonFormatterComponent>
|
||||||
|
<XMLButtonFormatterComponent :xml="xml" @update:result="(data: any) => format(data)"></XMLButtonFormatterComponent>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<textarea name="data" id="data" :value="xml" class="text-field"></textarea>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
Reference in New Issue
Block a user