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

created UI for adding parameters

Browse Source
This commit is contained in:
Wojciech Szewczyk
2025-01-07 13:20:45 +01:00
parent ea83e95a00
commit e834229cae
1 changed files with 71 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
Frontend/src/components/xml/XmlInputFieldComponent.vue
View File

@@ -3,12 +3,13 @@ import InsertTemplateComponent from '@components/common/InsertTemplateComponent.
import XMLButtonFormatterComponent from '@components/formatter/XMLButtonFormatterComponent.vue'
import CodeEditor from '@/components/common/CodeEditorComponent.vue'
import { ref } from 'vue'
import {ref} from 'vue'
import TabComponent from "@components/xml/TabComponent.vue";
const props = defineProps(
{
stylizedName: {type: String, required: true},
data: {type: String},
stylizedName: {type: String, required: true},
data: {type: String},
}
)
const emit = defineEmits(['update:modelValue'])
@@ -17,54 +18,88 @@ const data = ref('')
const inputFile = ref()
function sendValue() {
emit('update:modelValue', data.value)
emit('update:modelValue', data.value)
}
function updateData(newData: string, clearFileSelector: boolean = true) {
data.value = newData
if (clearFileSelector)
inputFile.value.value = '';
sendValue()
data.value = newData
if (clearFileSelector)
inputFile.value.value = '';
sendValue()
}
function clear() {
updateData('')
updateData('')
}
function canBeFormatted() {
return props.stylizedName.toLowerCase() == 'xml' ||
props.stylizedName.toLowerCase() == 'xsd' ||
props.stylizedName.toLowerCase() == 'xslt'
return props.stylizedName.toLowerCase() == 'xml' ||
props.stylizedName.toLowerCase() == 'xsd' ||
props.stylizedName.toLowerCase() == 'xslt'
}
function readFile(file : any) {
const reader = new FileReader()
reader.onloadend = () => {
let result = reader.result?.toString()
if (typeof result == "string")
updateData(result, false);
}
reader.readAsText(file.target.files[0])
function addParameters() {
return props.stylizedName?.toLowerCase() == "xslt"
}
function readFile(file: any) {
const reader = new FileReader()
reader.onloadend = () => {
let result = reader.result?.toString()
if (typeof result == "string")
updateData(result, false);
}
reader.readAsText(file.target.files[0])
}
</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 place-content-between w-full items-center">
<span class="dark:text-white mr-2">{{ stylizedName }}</span>
<div class="flex space-x-2 pb-2 overflow-x-auto">
<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>
<InsertTemplateComponent :stylized-name="props.stylizedName" @update:default-data="updateData"></InsertTemplateComponent>
<XMLButtonFormatterComponent v-if="canBeFormatted()" :xml="data" @update:result="(data:any) => updateData(data.result)"></XMLButtonFormatterComponent>
<button class="tool-button" @click="clear">Clear</button>
</div>
</div>
<CodeEditor @update:updated-code="updateData" v-model="data" :code="data" :config="{disabled:false, language:stylizedName}"></CodeEditor>
<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>
<div class="flex place-content-between w-full items-center">
<span class="dark:text-white mr-2">{{ stylizedName }}</span>
<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>
<div class="flex space-x-2 pb-2 overflow-x-auto">
<InsertTemplateComponent :stylized-name="props.stylizedName" @update:default-data="updateData"></InsertTemplateComponent>
<XMLButtonFormatterComponent v-if="canBeFormatted()" :xml="data" @update:result="(data:any) => updateData(data.result)"></XMLButtonFormatterComponent>
<button class="tool-button" @click="clear">Clear</button>
</div>
</div>
<div class="flex place-content-between w-full items-center">
<div v-if="addParameters()" class="flex justify-end space-x-2 pb-2 overflow-x-auto ml-auto">
<select id = "myList" onchange = "favTutorial()" class = "w-full rounded-3xl" >
<option> ---Choose tutorial--- </option>
<option> w3schools </option>
<option> Javatpoint </option>
<option> tutorialspoint </option>
<option> geeksforgeeks </option>
</select>
<input
id="textInput1"
class="text-input px-2 py-1 border rounded-3xl w-1/3"
type="text"
placeholder="Input 1"
/>
<input
id="textInput2"
class="text-input px-2 py-1 border rounded-3xl w-1/3"
type="text"
placeholder="Input 2"
/>
<button class="tool-button" @click="clear">Add Variable</button>
</div>
</div>
<CodeEditor @update:updated-code="updateData" v-model="data" :code="data"
:config="{disabled:false, language:stylizedName}"></CodeEditor>
</div>
</template>