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

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

@@ -4,6 +4,7 @@ import XMLButtonFormatterComponent from '@components/formatter/XMLButtonFormatte
import CodeEditor from '@/components/common/CodeEditorComponent.vue'
import {ref} from 'vue'
import TabComponent from "@components/xml/TabComponent.vue";
const props = defineProps(
{
@@ -37,6 +38,10 @@ function canBeFormatted() {
props.stylizedName.toLowerCase() == 'xslt'
}
function addParameters() {
return props.stylizedName?.toLowerCase() == "xslt"
}
function readFile(file: any) {
const reader = new FileReader()
@@ -49,22 +54,52 @@ function readFile(file : any) {
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 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 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>
<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>
<CodeEditor @update:updated-code="updateData" v-model="data" :code="data" :config="{disabled:false, language:stylizedName}"></CodeEditor>
<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>