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

Merged HTML formatter and implemented success signalling

Browse Source
This commit is contained in:
Adam Bem
2023-11-16 09:56:31 +01:00
parent 3b2140236d
commit 29079c0ffb
4 changed files with 34 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
Frontend/src/components/formatter/FormatterComponent.vue
View File

@@ -1,6 +1,8 @@
<script setup lang="ts">
import XMLButtonFormatterComponent from '@/components/formatter/XMLButtonFormatterComponent.vue';
import JsonButtonFormatterComponent from '@/components/formatter/JsonButtonFormatterComponent.vue';
import HtmlButtonFormatterComponent from '@/components/formatter/HtmlButtonFormatterComponent.vue';
import InsertTemplateComponent from '@components/common/InsertTemplateComponent.vue';
import CodeEditorComponent from '@/components/CodeEditorComponent.vue';
import { ref } from 'vue';
@@ -13,7 +15,7 @@ const errorOccurred = ref(false);
const successOccurred = ref(false);
const props = defineProps({
formatterType: {
formatterLanguage: {
type: String,
required: true
}
@@ -32,6 +34,7 @@ function format(formatted: any) {
function setErrorOccurred(occurred: boolean) {
errorOccurred.value = occurred;
successOccurred.value = !(occurred);
console.log(occurred);
}
function setExample(data: string) {
@@ -72,27 +75,41 @@ function highlightTextField() {
<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"> {{ formatterType.toUpperCase() }} Formatter</span>
<div v-if="formatterType == 'xml'" class="flex flex-wrap gap-2 justify-center">
<span class="dark:text-slate-100"> {{ formatterLanguage }} Formatter</span>
<!-- XML Formatter Toolbar -->
<div v-if="formatterLanguage.toLowerCase() == 'xml'" class="flex flex-wrap gap-2 justify-center">
<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 @update:error="setErrorOccurred" is-minimizer :xml="data" @update:result="(data: any) => format(data)"></XMLButtonFormatterComponent>
<XMLButtonFormatterComponent @update:error="setErrorOccurred" :xml="data" @update:result="(data: any) => format(data)"></XMLButtonFormatterComponent>
<XMLButtonFormatterComponent @update:error="setErrorOccurred" is-minimizer :xml="data" @update:result="format"></XMLButtonFormatterComponent>
<XMLButtonFormatterComponent @update:error="setErrorOccurred" :xml="data" @update:result="format"></XMLButtonFormatterComponent>
</div>
<div v-if="formatterType == 'json'" class="flex flex-wrap gap-2 justify-center">
<!-- JSON Formatter Toolbar -->
<div v-if="formatterLanguage.toLowerCase() == 'json'" class="flex flex-wrap gap-2 justify-center">
<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="data" @update:result="(data: any) => format(data)" @update:error="setErrorOccurred"></JsonButtonFormatterComponent>
<JsonButtonFormatterComponent :json="data" @update:result="(data: any) => format(data)" @update:error="setErrorOccurred"></JsonButtonFormatterComponent>
<JsonButtonFormatterComponent isMinimizer :json="data" @update:result="format" @update:error="setErrorOccurred"></JsonButtonFormatterComponent>
<JsonButtonFormatterComponent :json="data" @update:result="format" @update:error="setErrorOccurred"></JsonButtonFormatterComponent>
</div>
<!-- HTML Formatter Toolbar -->
<div v-if="formatterLanguage.toLowerCase() == 'html'" class="flex flex-wrap gap-2 justify-center">
<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="format" @update:error="setErrorOccurred" :code="data" format-type="Minimize" />
<HtmlButtonFormatterComponent @update:result="format" @update:error="setErrorOccurred" :code="data" format-type="Prettify" />
<HtmlButtonFormatterComponent @update:result="format" @update:error="setErrorOccurred" :code="data" format-type="HTML -> XML" />
</div>
</div>
<CodeEditorComponent :class="highlightTextField()" @update:updated-code="setTextFieldValue" :code="data" :config="{disabled:false,language:formatterType}" />
<CodeEditorComponent :class="highlightTextField()" @update:updated-code="setTextFieldValue" :code="data" :config="{disabled:false,language:formatterLanguage.toLowerCase()}" />
</div>
</template>

12
Frontend/src/components/formatter/HtmlButtonFormatterComponent.vue
View File

@@ -47,16 +47,16 @@ function createBody(){
const fetchLink = document.location.protocol + "//" + document.location.hostname + "/libxml/html/" + chooseType(props.formatType);
function processResponse(formattedCode : any){
var result = formattedCode.result;
emit("update:error", formattedCode.status == "ERR")
return result
}
function process(){
fetch(fetchLink, {body:createBody(), method: "POST"})
.then( response => response.json() )
.then( formattedCode => emit('update:result', processResponse(formattedCode) ) )
.then( formattedCode => processResponse(formattedCode) )
}
function processResponse(formattedCode : any){
emit('update:result', formattedCode )
emit("update:error", formattedCode.status == "ERR")
}
</script>

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

@@ -4,5 +4,5 @@ import FormatterComponent from '@/components/formatter/FormatterComponent.vue';
</script>
<template>
<FormatterComponent formatter-type="json"></FormatterComponent>
<FormatterComponent formatter-language="JSON"></FormatterComponent>
</template>

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

@@ -4,5 +4,5 @@ import FormatterComponent from '@/components/formatter/FormatterComponent.vue';
</script>
<template>
<FormatterComponent formatter-type="xml"></FormatterComponent>
<FormatterComponent formatter-language="HTML"></FormatterComponent>
</template>