Replaced old HTML view with new one
This commit is contained in:
		| @@ -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) { | ||||
|   | ||||
| @@ -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> | ||||
| @@ -4,5 +4,5 @@ import FormatterComponent from '@/components/formatter/FormatterComponent.vue'; | ||||
| </script> | ||||
|  | ||||
| <template> | ||||
|     <FormatterComponent formatter-language="HTML"></FormatterComponent> | ||||
|     <FormatterComponent formatter-language="XML"></FormatterComponent> | ||||
| </template> | ||||
		Reference in New Issue
	
	Block a user