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

Improved legibility of REST Mock interface and various fixes (#266)

Browse Source 
Reviewed-on: #266
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-15 07:54:14 +01:00
committed by Adam Bem
parent 5febb10d22
commit 252cadea16
21 changed files with 193 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -21,8 +21,12 @@ function showImage(newImage : string){
function convertImageToBase64(file : any){
const reader = new FileReader()
reader.onloadend = () => (console.log(data.value = reader.result?.toString().split(',')[1]))
reader.onloadend = () => {
data.value = reader.result?.toString().split(',')[1]
showImage(data.value)
}
reader.readAsDataURL(file.target.files[0])
}
function clear(){
@@ -38,18 +42,17 @@ function clear(){
<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">
<label class="dark:text-white text-center">Base64 Encoder</label>
<div class="flex flex-row items-center gap-2 overflow-x-auto">
<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>
<EncoderButton @image:show="showImage" :code="data" operation-type="Show Image"></EncoderButton>
<div class="w-2"></div>
<EncoderButton @update:result="setTextFieldValue" :code="data" operation-type="Encode"></EncoderButton>
<EncoderButton @update:result="setTextFieldValue" :code="data" operation-type="Decode"></EncoderButton>
</div>
</div>
<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="flex flex-row justify-center w-full">

39
Frontend/src/views/HtmlFormatterView.vue
View File

@@ -6,15 +6,41 @@ import HtmlButtonFormatterComponent from '@/components/formatter/HtmlButtonForma
const html = ref('');
const inputFile = ref()
const errorOccurred = ref(false);
function clear() {
html.value = '';
errorOccurred.value = false
inputFile.value.value = ''
}
function setTextFieldValue(data: string) {
html.value = data.toString()
}
function setErrorOccurred(occurred: boolean) {
errorOccurred.value = occurred
}
function setExample(data: string) {
inputFile.value.value = ''
setTextFieldValue(data)
}
function readFile(file : any) {
const reader = new FileReader()
reader.onloadend = () => {
var result = reader.result?.toString()
if (typeof result == "string")
setTextFieldValue(result);
}
reader.readAsText(file.target.files[0])
}
</script>
<template>
@@ -22,13 +48,16 @@ function setTextFieldValue(data: string) {
<div id="toolbar" class="flex flex-col gap-4 items-center lg:flex-row place-content-between">
<span class="dark:text-slate-100">HTML Formatter</span>
<div class="flex flex-wrap gap-2 justify-center">
<InsertTemplateComponent stylized-name="HTML" @update:defaultData="setTextFieldValue"></InsertTemplateComponent>
<div class="flex items-stretch w-64">
<input id="fileLoader" ref="inputFile" class="file-selector" type="file" accept=".xml,.html,.htm,text/xml,text/plain,text/html" @change="readFile" />
</div>
<InsertTemplateComponent stylized-name="HTML" @update:defaultData="setExample"></InsertTemplateComponent>
<button class="tool-button" @click="clear()">Clear</button>
<HtmlButtonFormatterComponent @update:result="setTextFieldValue" :code="html" format-type="Minimize" />
<HtmlButtonFormatterComponent @update:result="setTextFieldValue" :code="html" format-type="Prettify" />
<HtmlButtonFormatterComponent @update:result="setTextFieldValue" :code="html" format-type="XML Converter" />
<HtmlButtonFormatterComponent @update:result="setTextFieldValue" @update:error="setErrorOccurred" :code="html" format-type="Minimize" />
<HtmlButtonFormatterComponent @update:result="setTextFieldValue" @update:error="setErrorOccurred" :code="html" format-type="Prettify" />
<HtmlButtonFormatterComponent @update:result="setTextFieldValue" @update:error="setErrorOccurred" :code="html" format-type="HTML -> XML" />
</div>
</div>
<CodeEditorComponent @update:updated-code="setTextFieldValue" :code="html" :config="{disabled:false,language:'html'}" />
<CodeEditorComponent :class="{'text-field-error' : errorOccurred}" @update:updated-code="setTextFieldValue" :code="html" :config="{disabled:false,language:'html'}" />
</div>
</template>

38
Frontend/src/views/JsonFormatterView.vue
View File

@@ -6,17 +6,44 @@ import { ref } from 'vue';
const json = ref('');
const inputFile = ref()
const errorOccurred = ref(false);
function setTextFieldValue(data: string) {
json.value = data
}
function setExample(data: string) {
inputFile.value.value = ''
setTextFieldValue(data)
}
function setErrorOccurred(occurred: boolean) {
errorOccurred.value = occurred
}
function format(formattedXml: any) {
json.value = formattedXml.data;
}
function clear() {
json.value = '';
errorOccurred.value = false
inputFile.value.value = ''
}
function readFile(file : any) {
const reader = new FileReader()
reader.onloadend = () => {
var result = reader.result?.toString()
if (typeof result == "string")
setTextFieldValue(result);
}
reader.readAsText(file.target.files[0])
}
</script>
@@ -26,12 +53,15 @@ function clear() {
<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>
<div class="flex items-stretch w-64">
<input id="fileLoader" ref="inputFile" class="file-selector" type="file" accept=".json,text/xml,text/plain,text/json,application/json" @change="readFile" />
</div>
<InsertTemplateComponent stylized-name="JSON" @update:defaultData="(data: string) => setExample(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>
<JsonButtonFormatterComponent isMinimizer :json="json" @update:result="(data: any) => format(data)" @update:error="setErrorOccurred"></JsonButtonFormatterComponent>
<JsonButtonFormatterComponent :json="json" @update:result="(data: any) => format(data)" @update:error="setErrorOccurred"></JsonButtonFormatterComponent>
</div>
</div>
<CodeEditorComponent @update:updated-code="setTextFieldValue" :code="json" :config="{disabled:false,language:'json'}" />
<CodeEditorComponent :class="{'text-field-error' : errorOccurred}" @update:updated-code="setTextFieldValue" :code="json" :config="{disabled:false,language:'json'}" />
</div>
</template>

2
Frontend/src/views/RestMockView.vue
View File

@@ -6,7 +6,7 @@ import HistoryComponent from '@components/mock/HistoryComponent.vue'
<template>
<div class="flex flex-col xl:flex-row gap-6 w-full overflow-y-scroll overflow-x-hidden h-full">
<div class="flex flex-col xl:flex-row gap-6 w-full overflow-y-auto overflow-x-hidden h-full">
<RestMockMessageComponent></RestMockMessageComponent>
<HistoryComponent></HistoryComponent>
</div>

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

@@ -17,7 +17,7 @@ function updateVersion(newVersion: string) {
<template>
<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 2xl:flex-row w-full xl:w-7/12 grow overflow-hide xl: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>

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

@@ -16,13 +16,13 @@ function updateVersion(newVersion: string) {
<template>
<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 2xl:flex-row w-full xl:w-7/12 grow overflow-hide pr-2">
<div class="flex flex-col w-full 2xl:w-1/2 h-2/3 2xl:h-full flex-none items-center">
<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>
<tooltipComponent tool-type="xslt" :version="version"></tooltipComponent>
<TooltipComponent tool-type="xslt" :version="version"></TooltipComponent>
</div>
</template>

37
Frontend/src/views/XmlFormatterView.vue
View File

@@ -6,6 +6,9 @@ import { ref } from 'vue';
const xml = ref('');
const inputFile = ref()
const errorOccurred = ref(false);
function setTextFieldValue(data: string) {
xml.value = data
@@ -15,8 +18,31 @@ function format(formattedXml: any) {
xml.value = formattedXml.result;
}
function setErrorOccurred(occurred: boolean) {
errorOccurred.value = occurred
}
function setExample(data: string) {
inputFile.value.value = ''
setTextFieldValue(data)
}
function clear() {
xml.value = '';
errorOccurred.value = false
inputFile.value.value = ''
}
function readFile(file : any) {
const reader = new FileReader()
reader.onloadend = () => {
var result = reader.result?.toString()
if (typeof result == "string")
setTextFieldValue(result);
}
reader.readAsText(file.target.files[0])
}
</script>
@@ -26,12 +52,15 @@ function clear() {
<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>
<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="XML" @update:defaultData="(data: string) => setExample(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>
<XMLButtonFormatterComponent @update:error="setErrorOccurred" is-minimizer :xml="xml" @update:result="(data: any) => format(data)"></XMLButtonFormatterComponent>
<XMLButtonFormatterComponent @update:error="setErrorOccurred" :xml="xml" @update:result="(data: any) => format(data)"></XMLButtonFormatterComponent>
</div>
</div>
<CodeEditorComponent @update:updated-code="setTextFieldValue" :code="xml" :config="{disabled:false,language:'xml'}" />
<CodeEditorComponent :class="{'text-field-error' : errorOccurred}" @update:updated-code="setTextFieldValue" :code="xml" :config="{disabled:false,language:'xml'}" />
</div>
</template>