Implemented XML Formatter and simplified structure of XML tools (#229)

Co-authored-by: Adam Bem <adam.bem@zoho.eu>
Reviewed-on: #229
Reviewed-by: Mikolaj Widla <widlam@noreply.example.com>

Frontend/src/components/formatter/FormatterComponent.vue

@@ -1,10 +0,0 @@
-<script setup lang="ts">
-
-
-</script>
-
-<template>
-  <h1>Formatter</h1>
-</template>
-
-<style scoped></style>

Frontend/src/components/formatter/JsonButtonFormatterComponent.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+
+const props = defineProps({
+    json: {type: String, required: true},
+    isMinimizer: {type: Boolean}
+})
+
+const emit = defineEmits(["update:result"])
+
+function process() {
+    var request:Request = prepareRequest();
+    fetchRequest(request).then((data) => {
+        sendProcessedData(data);
+    })
+}
+
+function prepareRequest():Request {
+    var request = new Request(prepareURL(), {
+        body: prepareRequestBody(),
+        method: "POST"
+    });
+    return request;
+}
+
+function prepareURL(): string {
+    var mode = "formatting";
+    if (props.isMinimizer)
+        mode = "minimize";
+    return document.location.protocol + "//" + document.location.hostname + "/java/json/" + mode;
+}
+
+function prepareRequestBody():string {
+    var requestBody = props.json;
+    return requestBody;
+}
+
+async function fetchRequest(request: Request):Promise<JSON> {
+    var responseBody = await fetch(request)
+    .then(response => response.json())
+    .then((body) => body);
+    console.log(responseBody);
+    return responseBody;
+}
+
+function sendProcessedData(data: JSON) {
+    emit("update:result", data);
+}
+</script>
+
+<template>
+    <button class="tool-button" @click="process()">{{ props.isMinimizer ? "Minimize" : "Format" }}</button>
+</template>
+
+<style scoped></style>

Frontend/src/components/formatter/XMLButtonFormatterComponent.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+
+const props = defineProps({
+    xml: {type: String, required: true},
+    isMinimizer: {type: Boolean}
+})
+
+const emit = defineEmits(["update:result"])
+
+function process() {
+    var request:Request = prepareRequest();
+    fetchRequest(request).then((data) => {
+        sendProcessedData(data);
+    })
+}
+
+function prepareRequest():Request {
+    var request = new Request(prepareURL(), {
+        body: prepareRequestBody(),
+        method: "POST"
+    });
+    return request
+}
+
+function prepareURL(): string {
+    var mode = "prettify";
+    if (props.isMinimizer)
+        mode = "minimize";
+    return document.location.protocol + "//" + document.location.hostname + "/libxml/" + mode;
+}
+
+function prepareRequestBody():string {
+    var requestBody = JSON.stringify({
+        "data": props.xml,
+        "process": "N/A",
+        "processor": "libxml",
+        "version": "1.0"
+    });
+    return requestBody;
+}
+
+async function fetchRequest(request: Request):Promise<JSON> {
+    var responseBody = await fetch(request)
+    .then(response => response.json())
+    .then((body) => body);
+    return responseBody;
+}
+
+function sendProcessedData(data: JSON) {
+    emit("update:result", data);
+}
+</script>
+
+<template>
+    <button class="tool-button" @click="process()">{{ props.isMinimizer ? "Minimize" : "Format" }}</button>
+</template>
+
+<style scoped></style>