Changed value is sent to backend
This commit is contained in:
@@ -25,8 +25,8 @@ function remove() {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div :class=" isActive ? 'tab-active' : 'tab'" class="flex flex-row gap-3">
|
<div @click="activate" :class=" isActive ? 'tab-active' : 'tab'" class="flex flex-row gap-3 cursor-pointer">
|
||||||
<button @click="activate" class="hover:brightness-110"><slot /></button>
|
<button 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>
|
<button @click="remove" class="hover:brightness-110 hover:dark:bg-slate-400 hover:dark:text-black px-2 rounded-full">x</button>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@@ -6,7 +6,9 @@ import { ref } from 'vue'
|
|||||||
import CodeEditor from '../CodeEditorComponent.vue'
|
import CodeEditor from '../CodeEditorComponent.vue'
|
||||||
|
|
||||||
const newTabId = ref(0);
|
const newTabId = ref(0);
|
||||||
const activeTabId = ref(0)
|
const activeTabId = ref(0);
|
||||||
|
const prevActiveTabId = ref(-1);
|
||||||
|
|
||||||
const tabs = ref(new Array<TabData>);
|
const tabs = ref(new Array<TabData>);
|
||||||
tabs.value.push({
|
tabs.value.push({
|
||||||
id: newTabId.value++,
|
id: newTabId.value++,
|
||||||
@@ -60,12 +62,18 @@ function readFile(file : any) {
|
|||||||
|
|
||||||
const reader = new FileReader()
|
const reader = new FileReader()
|
||||||
reader.onloadend = () => {
|
reader.onloadend = () => {
|
||||||
var result = reader.result?.toString()
|
var result = reader.result!.toString();
|
||||||
if (typeof result == "string")
|
console.log(result);
|
||||||
sendNewValue(result)
|
sendNewValue(result);
|
||||||
|
|
||||||
}
|
}
|
||||||
reader.readAsText(file.target.files[0])
|
reader.readAsText(file.target.files[0]);
|
||||||
|
let activeIndex = findIndexWithID(activeTabId.value);
|
||||||
|
|
||||||
|
let filePath = inputFile.value.value.split("\\");
|
||||||
|
let fileName = filePath.at(filePath.length - 1);
|
||||||
|
|
||||||
|
tabs.value.at(activeIndex)!.name = fileName;
|
||||||
}
|
}
|
||||||
|
|
||||||
function changeActiveTab(id : number) {
|
function changeActiveTab(id : number) {
|
||||||
@@ -73,8 +81,11 @@ function changeActiveTab(id : number) {
|
|||||||
let newIndex = findIndexWithID(id);
|
let newIndex = findIndexWithID(id);
|
||||||
|
|
||||||
tabs.value.at(index)!.data = data.value;
|
tabs.value.at(index)!.data = data.value;
|
||||||
|
prevActiveTabId.value = activeTabId.value;
|
||||||
activeTabId.value = id;
|
activeTabId.value = id;
|
||||||
data.value = tabs.value.at(newIndex)!.data;
|
data.value = tabs.value.at(newIndex)!.data;
|
||||||
|
|
||||||
|
sendValue();
|
||||||
}
|
}
|
||||||
|
|
||||||
function addTab() {
|
function addTab() {
|
||||||
@@ -83,18 +94,24 @@ function addTab() {
|
|||||||
name: "XML" + newTabId.value,
|
name: "XML" + newTabId.value,
|
||||||
data: ""
|
data: ""
|
||||||
})
|
})
|
||||||
|
|
||||||
|
console.log(tabs.value);
|
||||||
}
|
}
|
||||||
|
|
||||||
function removeTab(id : number) {
|
function removeTab(id : number) {
|
||||||
if (tabs.value.length == 1)
|
if (tabs.value.length == 1)
|
||||||
return
|
return
|
||||||
|
|
||||||
let index = findIndexWithID(activeTabId.value);
|
let indexToRemove = findIndexWithID(id);
|
||||||
tabs.value.splice(index, 1);
|
let activeIndex = findIndexWithID(activeTabId.value);
|
||||||
if (activeTabId.value == id) {
|
|
||||||
activeTabId.value = tabs.value.at(0)!.id;
|
if (indexToRemove == activeIndex && activeIndex == 0)
|
||||||
data.value = tabs.value.at(0)!.data;
|
changeActiveTab(tabs.value.at(1)!.id)
|
||||||
}
|
else if (indexToRemove == activeIndex)
|
||||||
|
changeActiveTab(tabs.value.at(0)!.id)
|
||||||
|
|
||||||
|
|
||||||
|
tabs.value.splice(indexToRemove, 1);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user