Added basic functionality

Frontend/src/components/xml/TabComponent.vue

@@ -8,25 +8,25 @@ const props = defineProps({
     isActive: {
         type: Boolean,
         default: false,
-        required: true
+        required: false
     }
 })
 
-const emit = defineEmits(["activate", "remove"])
+const emit = defineEmits(["click:activate", "click:remove"])
 
-function click() {
-    emit("activate", props.id);
+function activate() {
+    emit("click:activate", props.id);
 }
 
 function remove() {
-    emit("remove", props.id);
+    emit("click:remove", props.id);
 }
 
 </script>
 
 <template>
     <div :class=" isActive ? 'tab-active' : 'tab'" class="flex flex-row gap-3">
-        <button @click="click" class="hover:brightness-110"><slot /></button>
-        <button @click="remove" class="hover:brightness-110">x</button>
+        <button @click="activate" class="hover:brightness-110"><slot /></button>
+        <button @click="remove" class="hover:brightness-110 hover:dark:bg-slate-400 hover:dark:text-black px-2 rounded-full">x</button>
     </div>
 </template>

Frontend/src/components/xml/TabbedInputComponent.vue

@@ -38,7 +38,7 @@ function addTab() {
     <div class="flex flex-col justify-stretch items-stretch rounded-2xl mr-2">
         <div class="flex flex-row justify-between ml-4">
             <div class="flex flex-row h-1/12 grow-0 gap-2">
-                <TabComponent v-for="item in tabs" :id="tabs.indexOf(item)" @activate="changeActiveTab" @remove="removeTab" :active-tab-id="activeTabId">{{ item }}</TabComponent>
+                <!-- <TabComponent v-for="item in tabs" :id="tabs.indexOf(item)" @activate="changeActiveTab" @remove="removeTab" :active-tab-id="activeTabId">{{ item }}</TabComponent> -->
             </div>
             <div>
                 <button @click="addTab" class="tool-button">New</button>

Frontend/src/components/xml/XmlTabbedInputComponent.vue

@@ -5,6 +5,15 @@ import XMLButtonFormatterComponent from '@components/formatter/XMLButtonFormatte
 import { ref } from 'vue'
 import CodeEditor from '../CodeEditorComponent.vue'
 
+const newTabId = ref(0);
+const activeTabId = ref(0)
+const tabs = ref(new Array<TabData>);
+tabs.value.push({
+    id: newTabId.value++,
+    name: "XML1",
+    data: "",
+})
+
 const data = ref('')
 const inputFile = ref()
 
@@ -16,6 +25,12 @@ const props = defineProps(
 )
 const emit = defineEmits(['update'])
 
+interface TabData {
+    id: number;
+    name: string;
+    data: string;
+}
+
 function sendValue() {
     emit('update', data.value)
 }
@@ -53,21 +68,57 @@ function readFile(file : any) {
     reader.readAsText(file.target.files[0])
 }
 
+function changeActiveTab(id : number) {
+    let index = findIndexWithID(activeTabId.value);
+    let newIndex = findIndexWithID(id);
+    
+    tabs.value.at(index)!.data = data.value;
+    activeTabId.value = id;
+    data.value = tabs.value.at(newIndex)!.data;
+}
+
+function addTab() {
+    tabs.value.push({
+        id: newTabId.value++,
+        name: "XML" + newTabId.value,
+        data: ""
+    })
+}
+
+function removeTab(id : number) {
+    if (tabs.value.length == 1)
+        return
+
+    let index = findIndexWithID(activeTabId.value);
+    tabs.value.splice(index, 1);
+    if (activeTabId.value == id) {
+        activeTabId.value = tabs.value.at(0)!.id;
+        data.value = tabs.value.at(0)!.data;
+    }
+    
+}
+
+function findIndexWithID(id : number) : number {
+    for (let i = 0; tabs.value.length; i++) 
+        if (tabs.value.at(i)!.id == id)
+            return i;
+    
+    return -1;
+}
+
 </script>
 
 <template>
     <div class="flex flex-col w-full h-1/2 lg:h-1/2 flex-none xl:pr-2 2xl:pr-4 pb-2">
         <div class="flex justify-between mb-2">
-            <div class="flex gap-2">
-                <TabComponent id="1" isActive>Karta 1</TabComponent>
-                <TabComponent id="2">Karta 2</TabComponent>
-                <TabComponent id="3">Karta 3</TabComponent>
+            <div class="flex gap-2 overflow-x-auto">
+                <TabComponent @click:activate="changeActiveTab" @click:remove="removeTab" v-for="tab in tabs" :id="tab.id" :isActive="tab.id == activeTabId">{{ tab.name }}</TabComponent>
             </div>
             <div class="flex gap-2">
                 <div class="flex items-stretch w-64">
                     <input id="fileLoader" ref="inputFile" class="file-selector" type="file" accept=".xml,.xql,.xquery,.xslt,text/xml,text/plain" @change="readFile" />
                 </div>
-                <button class="tool-button">New</button>
+                <button class="tool-button" @click="addTab">New</button>
             </div>
         </div>
         

Frontend/src/components/xml/XmlToolComponent.vue

@@ -1,83 +0,0 @@
-<script setup lang="ts">
-import { onMounted, ref, watch } from 'vue';
-
-const xml = ref('');
-const transform = ref('');
-const transformPlaceholder = ref('');
-const engine = ref('');
-const result = ref('');
-
-const activeXmlTool = ref('');
-
-async function submit() {
-  const engineEndpoint = engine.value == "libxml" ? "libxml" : "java";
-  const url = document.location.protocol + "//" + document.location.hostname + "/" + engineEndpoint + "/" + activeXmlTool.value;
-
-  var version = "1.0";
-  if (engine.value == "saxon")
-    version = "3.0"
-
-  var requestBody = JSON.stringify({
-    "data": xml.value,
-    "process": transform.value,
-    "processor": engine.value,
-    "version": version
-  });
-
-  var request = new Request(url, {
-    body: requestBody,
-    method: "POST"
-  });
-
-
-  var responseBody = await fetch(request)
-    .then(response => response.json())
-    .then((body) => body);
-
-  result.value = responseBody.result;
-}
-
-watch(activeXmlTool, (tool) => {
-  if (tool == "xpath")
-    transformPlaceholder.value = "XPath";
-  if (tool == "xsd")
-    transformPlaceholder.value = "XSD";
-  if (tool == "xslt")
-    transformPlaceholder.value = "XSLT";
-  if (tool == "xquery")
-    transformPlaceholder.value = "XQuery";
-  
-    transform.value = "";
-})
-
-onMounted(() => {
-  activeXmlTool.value = "xpath";
-});
-</script>
-
-<template>
-  <label for="xpath">XPath</label>
-  <input v-model="activeXmlTool" type="radio" id="xpath" name="xmltool" value="xpath" />
-
-  <label for="xslt">XSLT</label>
-  <input v-model="activeXmlTool" type="radio" id="xslt" name="xmltool" value="xslt" />
-
-  <label for="xsd">XSD</label>
-  <input v-model="activeXmlTool" type="radio" id="xsd" name="xmltool" value="xsd" />
-  
-  <label for="xquery">XQuery</label>
-  <input v-model="activeXmlTool" type="radio" id="xquery" name="xmltool" value="xquery" />
-  <br /><br />
-  <select name="engine" v-model="engine">
-    <option value="saxon" selected>Saxon</option>
-    <option value="xalan">Xalan</option>
-    <option value="libxml">libXML</option>
-  </select>
-  <br />
-  <textarea v-model="xml" id="xml" placeholder="XML"></textarea>
-  <textarea v-model="transform" id="transform" :placeholder="transformPlaceholder"></textarea><br />
-  <button @click="submit">Submit</button><br />
-  <pre><code>{{ result }}</code></pre>
-</template>
-
-<style scoped></style>