Replaced old HTML view with new one
This commit is contained in:
		| @@ -34,7 +34,6 @@ function format(formatted: any) { | |||||||
| function setErrorOccurred(occurred: boolean) { | function setErrorOccurred(occurred: boolean) { | ||||||
|     errorOccurred.value = occurred; |     errorOccurred.value = occurred; | ||||||
|     successOccurred.value = !(occurred); |     successOccurred.value = !(occurred); | ||||||
|     console.log(occurred); |  | ||||||
| } | } | ||||||
|  |  | ||||||
| function setExample(data: string) { | function setExample(data: string) { | ||||||
|   | |||||||
| @@ -1,63 +1,8 @@ | |||||||
| <script setup lang="ts"> | <script setup lang="ts"> | ||||||
| import InsertTemplateComponent from '@components/common/InsertTemplateComponent.vue'; | import FormatterComponent from '@/components/formatter/FormatterComponent.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]) |  | ||||||
| } |  | ||||||
|  |  | ||||||
| </script> | </script> | ||||||
|  |  | ||||||
| <template> | <template> | ||||||
|     <div id="layout" class="flex flex-col w-full h-full gap-4"> |     <FormatterComponent formatter-language="HTML"></FormatterComponent> | ||||||
|         <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> |  | ||||||
| </template> | </template> | ||||||
| @@ -4,5 +4,5 @@ import FormatterComponent from '@/components/formatter/FormatterComponent.vue'; | |||||||
| </script> | </script> | ||||||
|  |  | ||||||
| <template> | <template> | ||||||
|     <FormatterComponent formatter-language="HTML"></FormatterComponent> |     <FormatterComponent formatter-language="XML"></FormatterComponent> | ||||||
| </template> | </template> | ||||||
		Reference in New Issue
	
	Block a user