Replaced old HTML view with new one

This commit is contained in:
2023-11-16 09:59:58 +01:00
parent a4da80a6b1
commit 4ac017f536
3 changed files with 3 additions and 59 deletions

View File

@@ -34,7 +34,6 @@ function format(formatted: any) {
function setErrorOccurred(occurred: boolean) {
errorOccurred.value = occurred;
successOccurred.value = !(occurred);
console.log(occurred);
}
function setExample(data: string) {

View File

@@ -1,63 +1,8 @@
<script setup lang="ts">
import InsertTemplateComponent from '@components/common/InsertTemplateComponent.vue';
import CodeEditorComponent from '@/components/CodeEditorComponent.vue';
import { ref } from 'vue';
import HtmlButtonFormatterComponent from '@/components/formatter/HtmlButtonFormatterComponent.vue';
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])
}
import FormatterComponent from '@/components/formatter/FormatterComponent.vue';
</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">HTML Formatter</span>
<div 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="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 :class="{'text-field-error' : errorOccurred}" @update:updated-code="setTextFieldValue" :code="html" :config="{disabled:false,language:'html'}" />
</div>
<FormatterComponent formatter-language="HTML"></FormatterComponent>
</template>

View File

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