Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

1.2.1 #6

Merged
merged 11 commits into from
Jun 25, 2024
Merged

1.2.1 #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
8fed93b
Fix NULL appearing in exported files as lemma/pos
PrinsINT Jun 20, 2024
4e03b92
Fill in CMDI template with xpaths
PrinsINT Jun 21, 2024
18ae80e
Fixed some warnings
PrinsINT Jun 21, 2024
3cff7bf
Add spaces between <w> tags if not present
PrinsINT Jun 21, 2024
d4fcaff
Added file drag & drop to upload
PrinsINT Jun 24, 2024
d776e7c
Also match <w>-tags when merging if a single PUNCT differs
PrinsINT Jun 24, 2024
9e2a53d
Fixed OTHER_POS regex not matching strings longer than 1 char
PrinsINT Jun 24, 2024
b4b9bb2
Fix not finding cmdi template in jar
PrinsINT Jun 24, 2024
5c054f7
Make docker compose file buildable
PrinsINT Jun 24, 2024
1eac0e0
Check for empty strings in truncated PC match
PrinsINT Jun 24, 2024
0fa6242
Updated home screen text
PrinsINT Jun 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
648 changes: 324 additions & 324 deletions client/src/components/GTabs.vue
View file
Open in desktop

Large diffs are not rendered by default.

256 changes: 150 additions & 106 deletions client/src/components/input/UploadDocuments.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,107 +1,151 @@
<template>
<div>

<!-- Styled label for input -->
<label for="file-upload" class="custom-file-upload">
<svg class="svg-icon" aria-hidden="true" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg"
width="20" height="12" viewBox="0 0 20 12">
<polygon class="st0" points="10,4.2 2.2,12 0.1,9.9 10,0 19.9,9.9 17.8,12 "></polygon>
</svg>
Select file(s)
</label>
<!-- Actual input -->
<input type="file" ref="uploadInput" name="filefield" multiple id="file-upload" style="display: none;"
accept=".xml, .tsv, .txt, .zip, .conllu, .naf"
@change="e => filesToUpload = Object.values(e.target.files as FileList)" />


<!-- List of currently selected files. -->
<ul v-if="filesToUpload.length > 0">
<!-- First 5 file names are shown-->
<li v-for="file in filesToUpload.slice(0, 4)" :key="file.name">{{ file.name }}</li>
<!-- Overflow -->
<li v-if="filesToUpload.length > 4">
+ {{ filesToUpload.length - 4 }} more {{ filesToUpload.length == 5 ? "file" : "files" }}
</li>
</ul>

<!-- Confirmation and clear buttons after a selection has been made -->
<template v-if="filesToUpload.length != 0">
<GButton green @click="documentsStore.uploadAll(); $refs.uploadInput.value = null">
Upload
</GButton>
<GButton plain @click="filesToUpload = []; $refs.uploadInput.value = null">
&#10006;&nbsp;clear
</GButton>
</template>

<!-- Error for illegal selection -->
<GInfo error v-if="illegalFiles.length > 0">
You have selected some filetype(s) that are not supported in GaLAHaD:
<ul>
<li v-for="file in illegalFiles" :key="file.name">
{{ file.name }}
</li>
</ul>

Do you want to upload the text? You can:
<ol>
<li>copy-paste it to NotePad</li>
<li>save as .txt</li>
<li>upload it to GaLAHaD</li>
</ol>
</GInfo>

<!-- upload busy info -->
<GInfo v-show="uploadBusyCount > 0" spinner>
Upload will continue in the background, please don't close the browser. Currently uploading:
{{ uploadBusyCount }}
</GInfo>

<!-- Errors for files that could not be parsed by the server (e.g. broken xml tags)-->
<GInfo error v-show="uploadErrorCount > 0">
<div v-for="(value, key) in uploading" :key="key">
<span v-if="value.status == 'error'">{{ key }}: {{ value.message }}</span>
</div>
</GInfo>
</div>
</template>

<script setup lang='ts'>
// Libraries & stores
import stores from '@/stores'
import { storeToRefs } from 'pinia'
// Components
import { GButton, GInfo } from '@/components'

// Stores
const documentsStore = stores.useDocuments()
const { filesToUpload, illegalFiles, uploadBusyCount, uploadErrorCount, uploading } = storeToRefs(documentsStore)
</script>

<style scoped>
.custom-file-upload {
border: 0px solid #ccc;
background-color: var(--int-theme);
display: inline-block;
padding: 10px 12px;
cursor: pointer;
margin-right: 10px;
font-style: normal;

&:hover {
background-color: var(--int-theme-hover);
}

&:active {
background-color: var(--int-theme-active);
}
}

ul,
ol {
width: fit-content;
text-align: left;
margin: 1em auto;
}
<template>
<div>
<!-- Drag and drop from https://codepen.io/nekobog/pen/JjoZvBm -->
<div id="dropZone"></div>

<!-- Styled label for input -->
<label for="file-upload" class="custom-file-upload">
<svg class="svg-icon" aria-hidden="true" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg"
width="20" height="12" viewBox="0 0 20 12">
<polygon class="st0" points="10,4.2 2.2,12 0.1,9.9 10,0 19.9,9.9 17.8,12 "></polygon>
</svg>
Select file(s) or drag & drop
</label>
<!-- Actual input -->
<input type="file" ref="uploadInput" name="filefield" multiple id="file-upload" style="display: none;"
accept=".xml, .tsv, .txt, .zip, .conllu, .naf"
@change="e => filesToUpload = Object.values(e.target.files as FileList)" />


<!-- List of currently selected files. -->
<ul v-if="filesToUpload.length > 0">
<!-- First 5 file names are shown-->
<li v-for="file in filesToUpload.slice(0, 4)" :key="file.name">{{ file.name }}</li>
<!-- Overflow -->
<li v-if="filesToUpload.length > 4">
+ {{ filesToUpload.length - 4 }} more {{ filesToUpload.length == 5 ? "file" : "files" }}
</li>
</ul>

<!-- Confirmation and clear buttons after a selection has been made -->
<template v-if="filesToUpload.length != 0">
<GButton green @click="documentsStore.uploadAll(); $refs.uploadInput.value = null">
Upload
</GButton>
<GButton plain @click="filesToUpload = []; $refs.uploadInput.value = null">
&#10006;&nbsp;clear
</GButton>
</template>

<!-- Error for illegal selection -->
<GInfo error v-if="illegalFiles.length > 0">
You have selected some filetype(s) that are not supported in GaLAHaD:
<ul>
<li v-for="file in illegalFiles" :key="file.name">
{{ file.name }}
</li>
</ul>

Do you want to upload the text? You can:
<ol>
<li>copy-paste it to NotePad</li>
<li>save as .txt</li>
<li>upload it to GaLAHaD</li>
</ol>
</GInfo>

<!-- upload busy info -->
<GInfo v-show="uploadBusyCount > 0" spinner>
Upload will continue in the background, please don't close the browser. Currently uploading:
{{ uploadBusyCount }}
</GInfo>

<!-- Errors for files that could not be parsed by the server (e.g. broken xml tags)-->
<GInfo error v-show="uploadErrorCount > 0">
<div v-for="(value, key) in uploading" :key="key">
<span v-if="value.status == 'error'">{{ key }}: {{ value.message }}</span>
</div>
</GInfo>
</div>
</template>

<script setup lang='ts'>
// Libraries & stores
import { onMounted, ref } from 'vue'
import stores from '@/stores'
import { storeToRefs } from 'pinia'
// Components
import { GButton, GInfo } from '@/components'

// Stores
const documentsStore = stores.useDocuments()
const { filesToUpload, illegalFiles, uploadBusyCount, uploadErrorCount, uploading } = storeToRefs(documentsStore)

// Fields
var dropZone = ref(null as any as HTMLElement);

// Methods
function showDropZone(e: DragEvent) {
if (e.dataTransfer!.types.includes('Files')) {
dropZone.value.style.display = "block"
}
}
function hideDropZone() {
dropZone.value.style.display = "none";
}
function handleDrop(e: DragEvent) {
e.preventDefault();
hideDropZone();
filesToUpload.value = [...e.dataTransfer!.files]
}

// Watches & mounts
onMounted(() => {
dropZone.value = document.getElementById('dropZone') as HTMLElement;
// Register drag events
window.addEventListener('dragenter', showDropZone)
dropZone.value.addEventListener('dragleave', hideDropZone)
dropZone.value.addEventListener('drop', handleDrop)
// Apparently, this is needed to prevent the browser from opening the file.
dropZone.value.addEventListener('dragover', e => e.preventDefault())
})
</script>

<style scoped lang="scss">
.custom-file-upload {
border: 0px solid #ccc;
background-color: var(--int-theme);
display: inline-block;
padding: 10px 12px;
cursor: pointer;
margin-right: 10px;
font-style: normal;

&:hover {
background-color: var(--int-theme-hover);
}

&:active {
background-color: var(--int-theme-active);
}
}

ul,
ol {
width: fit-content;
text-align: left;
margin: 1em auto;
}

#dropZone {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--int-theme);
opacity: 0.4;
z-index: 3;
}
</style>
Loading
Loading