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

File uploading and fixes (#261)

Browse Source 
Reviewed-on: #261
Reviewed-by: Mikolaj Widla <widlam@noreply.example.com>
Co-authored-by: Adam Bem <adam.bem@zoho.eu>
Co-committed-by: Adam Bem <adam.bem@zoho.eu>
This commit is contained in:
Adam Bem
2023-11-06 11:17:42 +01:00
committed by Adam Bem
parent 1913c292d2
commit 5febb10d22
24 changed files with 155 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
Frontend/src/views/Base64EncoderView.vue
View File

@@ -1,26 +1,25 @@
<script setup lang="ts">
import CodeEditorComponent from '@/components/CodeEditorComponent.vue';
import CodeEditorComponent from '@/components/CodeEditorComponent.vue'
import EncoderButton from '@/components/encoder/EncoderButtonComponent.vue'
import { ref } from 'vue';
import { ref } from 'vue'
const data : any = ref("")
const imageData = ref("")
const DoshowImage = ref(false)
const inputImage = ref();
const inputImage = ref()
function setTextFieldValue(newData: string) {
data.value = newData.toString()
DoshowImage.value = false;
DoshowImage.value = false
}
function showImage(newImage : string){
imageData.value = "data:image/jpeg;base64,"+newImage
DoshowImage.value = true;
DoshowImage.value = true
}
function convertImageToBase64(file : any){
console.log(inputImage)
const reader = new FileReader()
reader.onloadend = () => (console.log(data.value = reader.result?.toString().split(',')[1]))
reader.readAsDataURL(file.target.files[0])
@@ -29,34 +28,41 @@ function convertImageToBase64(file : any){
function clear(){
data.value = ""
imageData.value = ""
DoshowImage.value = false;
DoshowImage.value = false
inputImage.value.value = null
}
</script>
<template>
<div id="layoutFull" class="w-full h-full flex">
<div id="layoutLeft" class="flex flex-col w-1/2 h-full gap-4">
<div class="w-4/5 flex flex-row-reverse gap-2 mt-12 ml-6">
<EncoderButton @update:result="setTextFieldValue" :code="data" encode-type="Base64"></EncoderButton>
<EncoderButton @update:result="setTextFieldValue" :code="data" encode-type="Text"></EncoderButton>
<EncoderButton @image:show="showImage" :code="data" encode-type="Image"></EncoderButton>
<button class="tool-button" @click="clear()">Clear</button>
<div id="layoutFull" class="w-full h-full flex flex-col xl:flex-row gap-4">
<div id="layoutLeft" class="flex flex-col w-full xl:w-1/2 h-1/3 xl:h-full gap-4">
<div class="w-full flex flex-row place-content-between items-center">
<label class="dark:text-white text-center">Base64/Text</label>
<div class="flex flex-row items-center gap-2">
<button class="tool-button" @click="clear()">Clear</button>
<label class="text-grey-900 dark:text-white">Convert to</label>
<EncoderButton @image:show="showImage" :code="data" encode-type="Image"></EncoderButton>
<EncoderButton @update:result="setTextFieldValue" :code="data" encode-type="Text"></EncoderButton>
<EncoderButton @update:result="setTextFieldValue" :code="data" encode-type="Base64"></EncoderButton>
</div>
</div>
<div id="codeEditor" class="w-4/5 h-1/3 ml-6 flex flex-col">
<label class="dark:text-white text-center w-full">Base64</label>
<div id="codeEditor" class="w-full h-full xl:h-1/3 flex flex-col">
<CodeEditorComponent @update:updated-code="setTextFieldValue" :config="{language:'base64'}" :code="data"></CodeEditorComponent>
</div>
<div class="w-4/5 flex items-center flex-col ml-6" id="imageImporter">
<label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white" for="file_input">Upload file</label>
<input id="imageLoader" ref="inputImage" class="block file:bg-inherit file:shadow-inherit dark:file:text-white file:border-inherit w-full text-sm text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400" type="file" @change="convertImageToBase64" />
<div class="flex flex-row justify-center w-full">
<div class="flex flex-col items-center w-fit" id="imageImporter">
<label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white" for="file_input">Upload image</label>
<input id="imageLoader" ref="inputImage" class="file-selector" accept=".gif, .jpg, .jpeg, .png, .webm, image/gif, image/jpeg, image/png, image/webm" type="file" @change="convertImageToBase64" />
</div>
</div>
</div>
<div id="separator" class="bg-black h-full w-1" ></div>
<div id="layoutRight" class=" ml-6 w-2/5">
<div v-on="DoshowImage">
<div id="layoutRight" class="w-full xl:w-1/2 min-h-[66%] xl:h-full">
<div class="border-2 rounded-lg border-gray-300 dark:border-gray-600 min-h-[50%]" v-on="DoshowImage">
<img :src="imageData"/>
</div>

6
Frontend/src/views/XPathView.vue
View File

@@ -16,9 +16,9 @@ function updateVersion(newVersion: string) {
</script>
<template>
<div id="layout" class="flex flex-col lg:flex-row w-full h-full">
<div class="flex flex-col lg:flex-row w-full lg:w-7/12 grow overflow-hide px-2">
<div class="flex flex-col w-full lg:w-1/2 h-2/3 lg:h-full flex-none items-center">
<div id="layout" class="flex flex-row w-full h-full">
<div class="flex flex-col 2xl:flex-row w-full 2xl:w-7/12 grow overflow-hide pr-2">
<div class="flex flex-col w-full 2xl:w-1/2 h-2/3 2xl:h-full flex-none items-center">
<xmlInputFieldComponent stylized-name="XML" :data="xml" @update="(data) => {xml = data}"></xmlInputFieldComponent>
<xmlInputFieldComponent stylized-name="XPath" :data="query" @update="(data) => {query = data}"></xmlInputFieldComponent>
</div>

4
Frontend/src/views/XQueryView.vue
View File

@@ -10,8 +10,8 @@ const query = ref('');
</script>
<template>
<div id="layout" class="flex flex-col lg:flex-row w-full h-full">
<div class="flex flex-col w-full lg:w-1/2 h-2/3 lg:h-full flex-none items-center">
<div id="layout" class="flex flex-col 2xl:flex-row w-full h-full">
<div class="flex flex-col w-full 2xl:w-1/2 h-2/3 2xl:h-full flex-none items-center">
<xmlInputFieldComponent stylized-name="XML" @update="(data) => {xml = data}"></xmlInputFieldComponent>
<xmlInputFieldComponent stylized-name="XQuery" @update="(data) => {query = data}"></xmlInputFieldComponent>
</div>

4
Frontend/src/views/XSDView.vue
View File

@@ -10,8 +10,8 @@ const query = ref('');
</script>
<template>
<div id="layout" class="flex flex-col lg:flex-row w-full h-full">
<div class="flex flex-col w-full lg:w-1/2 h-2/3 lg:h-full flex-none items-center">
<div id="layout" class="flex flex-col 2xl:flex-row w-full h-full">
<div class="flex flex-col w-full 2xl:w-1/2 h-2/3 2xl:h-full flex-none items-center">
<xmlInputFieldComponent stylized-name="XML" @update="(data) => {xml = data}"></xmlInputFieldComponent>
<xmlInputFieldComponent stylized-name="XSD" @update="(data) => {query = data}"></xmlInputFieldComponent>
</div>

16
Frontend/src/views/XSLTView.vue
View File

@@ -15,14 +15,14 @@ function updateVersion(newVersion: string) {
</script>
<template>
<div id="layout" class="flex flex-col lg:flex-row w-full h-full">
<div class="flex flex-col lg:flex-row w-full lg:w-7/12 grow overflow-hide px-2">
<div class="flex flex-col w-full lg:w-1/2 h-2/3 lg:h-full flex-none items-center">
<xmlInputFieldComponent stylized-name="XML" @update="(data) => {xml = data}"></xmlInputFieldComponent>
<xmlInputFieldComponent stylized-name="XSLT" @update="(data) => {query = data}"></xmlInputFieldComponent>
<div id="layout" class="flex flex-row w-full h-full">
<div class="flex flex-col 2xl:flex-row w-full 2xl:w-7/12 grow overflow-hide pr-2">
<div class="flex flex-col w-full 2xl:w-1/2 h-2/3 2xl:h-full flex-none items-center">
<xmlInputFieldComponent stylized-name="XML" :data="xml" @update="(data) => {xml = data}"></xmlInputFieldComponent>
<xmlInputFieldComponent stylized-name="XSLT" :data="query" @update="(data) => {query = data}"></xmlInputFieldComponent>
</div>
<xmlOutputFieldComponent tool="xslt" :xml="xml" :query="query" @update="(version) => updateVersion(version)"></xmlOutputFieldComponent>
</div>
<xmlOutputFieldComponent tool="xslt" :xml="xml" :query="query" @update="(version) => updateVersion(version)"></xmlOutputFieldComponent>
</div>
<TooltipComponent tool-type="xslt" :version="version"></TooltipComponent>
<tooltipComponent tool-type="xslt" :version="version"></tooltipComponent>
</div>
</template>