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

Implemeted error signal in HTML and JSON formatter

Browse Source
This commit is contained in:
Adam Bem
2023-11-09 11:24:38 +01:00
parent 6bce4a9557
commit aecbcefc31
4 changed files with 60 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,8 +1,18 @@
<script setup lang="ts">
const props = defineProps(
{
formatType: {type:String,required:true},
code: {type:String,required:true},
formatType: {
type:String,
required:true
},
code: {
type:String,
required:true
},
isError: {
type:Boolean,
required:false
},
}
)
@@ -24,7 +34,7 @@ function getTypeInfo(){
function createBody(){
return JSON.stringify({
"data": props.code,
"process": getTypeInfo(),
"processorData": getTypeInfo(),
"processor": "libxml",
"version": "1.0"
});
@@ -33,11 +43,13 @@ function createBody(){
const fetchLink = document.location.protocol + "//" + document.location.hostname + "/libxml/html/" + chooseType(props.formatType);
const emit = defineEmits([
'update:result'
'update:result',
'update:error'
])
function processResponse(formattedCode : any){
var result = formattedCode.result;
emit("update:error", formattedCode.status == "ERR")
return result
}

9
Frontend/src/components/formatter/JsonButtonFormatterComponent.vue
View File

@@ -5,12 +5,12 @@ const props = defineProps({
isMinimizer: {type: Boolean}
})
const emit = defineEmits(["update:result"])
const emit = defineEmits(["update:result", "update:error"])
function process() {
var request:Request = prepareRequest();
fetchRequest(request).then((data) => {
sendProcessedData(data);
sendProcessedData(data);
})
}
@@ -36,7 +36,10 @@ function prepareRequestBody():string {
async function fetchRequest(request: Request):Promise<JSON> {
var responseBody = await fetch(request)
.then(response => response.json())
.then(response => {
emit('update:error', response.status != 200)
return response.json()
})
.then((body) => body);
console.log(responseBody);
return responseBody;

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

@@ -6,15 +6,29 @@ 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()
@@ -37,13 +51,13 @@ function readFile(file : any) {
<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="setTextFieldValue"></InsertTemplateComponent>
<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>

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

@@ -6,17 +6,32 @@ 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) {
@@ -41,12 +56,12 @@ function readFile(file : any) {
<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) => setTextFieldValue(data)"></InsertTemplateComponent>
<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>