Implemented HTML Tools (#240)

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>

Frontend/src/components/common/InsertTemplateComponent.vue

@@ -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;

Frontend/src/components/formatter/HtmlButtonFormatterComponent.vue

@@ -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>