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

Frontend for HTML tools implemented

Browse Source
This commit is contained in:
Mikolaj Widla
2023-07-03 09:48:32 +02:00
parent 99ea6367e8
commit fe605ec6e0
5 changed files with 74 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -0,0 +1,13 @@
<!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>
</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;

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

@@ -0,0 +1,21 @@
<script setup lang="ts">
const props = defineProps(
{
formatType: {type:String,required:true},
code: {type:String,required:true},
}
)
const emit = defineEmits([
'update:result'
])
function process(){
}
</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',

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

@@ -0,0 +1,30 @@
<script setup lang="ts">
import InsertTemplateComponent from '@components/common/InsertTemplateComponent.vue';
import CodeEditorComponent from '@/components/CodeEditorComponent.vue';
import { ref } from 'vue';
const html = ref('');
function clear() {
html.value = '';
}
function setTextFieldValue(data: string) {
html.value = data
}
</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="(data: string) => setTextFieldValue(data)"></InsertTemplateComponent>
<button class="tool-button" @click="clear()">Clear</button>
</div>
</div>
<CodeEditorComponent @update:updated-code="setTextFieldValue" :code="html" :config="{disabled:false,language:'html'}" />
</div>
</template>