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

Implemented HTML Tools

Browse Source
This commit is contained in:
Mikolaj Widla
2023-07-03 12:29:09 +02:00
parent fe605ec6e0
commit 40f1b2caf8
5 changed files with 81 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
Frontend/src/assets/sampleHtml.html
View File

@@ -9,5 +9,6 @@
<body>
<h1>Hello World!</h1>
<p>That's paragraph</p>
<br>
</body>
</html>

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

@@ -6,12 +6,45 @@ const props = defineProps(
}
)
function chooseType(formatType: String){
if (formatType == "XML Converter"){
return "convert";
}
return formatType.toLowerCase();
}
function getTypeInfo(){
if( props.code.startsWith("<!DOCTYPE") ){
return "html"
}else{
return "xml"
}
}
function createBody(){
return JSON.stringify({
"data": props.code,
"process": getTypeInfo(),
"processor": "libxml",
"version": "1.0"
});
}
const fetchLink = document.location.protocol + "//" + document.location.hostname + "/libxml/html/" + chooseType(props.formatType);
const emit = defineEmits([
'update:result'
])
function process(){
function processResponse(formattedCode : any){
var result = formattedCode.result;
return result
}
function process(){
fetch(fetchLink, {body:createBody(), method: "POST"})
.then( response => response.json() )
.then( formattedCode => emit('update:result', processResponse(formattedCode) ) )
}
</script>

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

@@ -2,6 +2,7 @@
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('');
@@ -11,7 +12,7 @@ function clear() {
}
function setTextFieldValue(data: string) {
html.value = data
html.value = data.toString()
}
</script>
@@ -21,8 +22,11 @@ function setTextFieldValue(data: string) {
<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">
<InsertTemplateComponent stylized-name="HTML" @update:defaultData="(data: string) => setTextFieldValue(data)"></InsertTemplateComponent>
<InsertTemplateComponent stylized-name="HTML" @update:defaultData="setTextFieldValue"></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" />
</div>
</div>
<CodeEditorComponent @update:updated-code="setTextFieldValue" :code="html" :config="{disabled:false,language:'html'}" />