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

Implemented HTML Tools (#240)

Browse Source 
Co-authored-by: widlam <mikolaj.widla@gmail.com>
Reviewed-on: #240
Reviewed-by: Adam Bem <bema@noreply.example.com>
Co-authored-by: Mikolaj Widla <widlam@noreply.example.com>
Co-committed-by: Mikolaj Widla <widlam@noreply.example.com>
This commit is contained in:
Mikolaj Widla
2023-07-03 14:29:06 +02:00
committed by Adam Bem
parent 242f0fc025
commit 6319d7c427
7 changed files with 152 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
Frontend/src/assets/sampleHtml.html Normal file
View File

@@ -0,0 +1,14 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example Page</title>
</head>
<body>
<h1>Hello World!</h1>
<p>That's paragraph</p>
<br>
</body>
</html>

6
Frontend/src/components/common/InsertTemplateComponent.vue
View File

@@ -4,7 +4,7 @@ import sampleXML from "@/assets/sampleXml.xml?raw"
import sampleXSLT from "@/assets/sampleXslt.xml?raw"
import sampleXSD from "@/assets/sampleXsd.xml?raw"
import sampleXQuery from "@/assets/sampleXQuery.xquery?raw"
import sampleHTML from "@assets/sampleHtml.html?raw"
const props = defineProps(
{
@@ -32,7 +32,9 @@ function setDefault() {
case "xquery":
emit(emitName, sampleXQuery)
break;
case "html":
emit(emitName,sampleHTML);
break;
default:
emit(emitName, sampleXML)
break;

54
Frontend/src/components/formatter/HtmlButtonFormatterComponent.vue Normal file
View File

@@ -0,0 +1,54 @@
<script setup lang="ts">
const props = defineProps(
{
formatType: {type:String,required:true},
code: {type:String,required:true},
}
)
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 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>
<template>
<button class="tool-button" @click="process()">{{ formatType }}</button>
</template>

6
Frontend/src/router/index.ts
View File

@@ -5,6 +5,7 @@ const restMock = import("@views/RestMockView.vue")
const jsonFormatter = import("@views/JsonFormatterView.vue")
const xmlFormatter = import("@views/XmlFormatterView.vue")
const HtmlFormatterView = import("@views/HtmlFormatterView.vue")
const xsltTool = import("@views/XSLTView.vue")
const xsdTool = import("@views/XSDView.vue")
@@ -27,6 +28,11 @@ const routes = [
name: 'jsonFormatter',
component: () => jsonFormatter
},
{
path: '/format/html',
name: 'htmlFormatter',
component: () => HtmlFormatterView
},
{
path: '/xml/xpath',
name: 'xpath',

34
Frontend/src/views/HtmlFormatterView.vue Normal file
View File

@@ -0,0 +1,34 @@
<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('');
function clear() {
html.value = '';
}
function setTextFieldValue(data: string) {
html.value = data.toString()
}
</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">
<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'}" />
</div>
</template>