Skip to content

Commit

Permalink
ui/ux(vue): Improve several aspects of the donation interface (new fo…
Browse files Browse the repository at this point in the history 
…nt, new instructions slider).
  • Loading branch information
@Nico-AP
Nico-AP committed Jul 18, 2024
1 parent 88e9295 commit 0b90ea2
Show file tree
Hide file tree
Showing 4 changed files with 115 additions and 54 deletions.
2 changes: 1 addition & 1 deletion frontend/UploaderApp/src/UploaderApp.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -269,7 +269,7 @@ export default {

<style>
#uapp {
font-family: Avenir, Helvetica, Arial, sans-serif;
font-family: Nunito Sans, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #2c3e50;
Expand Down
80 changes: 60 additions & 20 deletions frontend/UploaderApp/src/components/DonationInstructions.vue
View file
Original file line number Diff line number Diff line change
@@ -1,33 +1,34 @@
<template>
<div :id="'carousel-' + componentId" class="carousel carousel-dark slide" data-bs-interval="false" data-bs-ride="carousel">
<div :id="'carousel-' + componentId" class="carousel carousel-dark slide" data-bs-interval="false" data-bs-ride="carousel" data-bs-wrap="false" >

<div class="carousel-inner">
<div
v-for="(i, index) in instructions"
:key="index"
class="carousel-item"
:class="{ 'active': index === 0 }"
:class="{ 'active': index === currentStep }"
v-html="i.text">
</div>
</div>
<button class="carousel-control-prev" type="button" :data-bs-target="'#carousel-' + componentId" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" :data-bs-target="'#carousel-' + componentId" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
<div class="carousel-indicators">
<button
v-for="(i, index) in instructions"
:key="index"

<div class="d-flex justify-content-between align-items-center slide-area">
<div>
<button class="slide-control-arrow" type="button" :data-bs-target="'#carousel-' + componentId" @click="stepDown">‹</button>
</div>
<div v-for="(i, index) in instructions" :key="index">
<button
type="button"
:data-bs-target="'#carousel-' + componentId"
:data-bs-slide-to="index"
:aria-label="'Step ' + index"
:class="{ 'active': index === 0 }"
:aria-current="index === 0"
></button>
:class="{ 'active active-item': index === currentStep }"
:aria-current="index === currentStep"
class="step-indicator d-hide"
@click="currentStep = index"
>•</button>
</div>
<div>
<button class="slide-control-arrow" type="button" :data-bs-target="'#carousel-' + componentId" @click="stepUp">›</button>
</div>
</div>
</div>
</template>
Expand All @@ -40,9 +41,22 @@ export default {
componentId: Number
},
data() {
return {}
return {
currentStep: 0,
}
},
methods: {}
methods: {
stepDown() {
if (this.currentStep > 0) {
this.currentStep -= 1;
}
},
stepUp() {
if (this.currentStep < (this.instructions.length - 1)) {
this.currentStep += 1;
}
}
}
}
</script>

Expand Down Expand Up @@ -76,4 +90,30 @@ export default {
position: static;
padding-top: 20px;
}
.step-indicator {
background: none;
border: none;
font-size: 1.5rem;
color: darkgray;
}
.active-item {
color: #545454;
}
.slide-control-arrow {
background: none;
border: none;
font-size: 1.5rem;
color: darkgray;
font-weight: bold;
}
.slide-area {
margin-left: 33%;
margin-right: 33%;
background-color: #f5f5f5;
border-radius: 50px;
height: 20px;
margin-bottom: 25px;
padding-left: 10px;
padding-right: 10px;
}
</style>
69 changes: 43 additions & 26 deletions frontend/UploaderApp/src/components/FileUploader.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -162,30 +162,41 @@
</div>
<div class="data-donation-container pb-3 pt-3 fs-09">
<div :id="'donation-container-'+bp.id.toString()" class="ul-data-container ul-data-condensed bg-white">
<table :id="'ul-result-' + bp.id.toString()" class="table table-sm">
<thead>
<tr>
<th v-for="value in blueprintData[bp.id.toString()].extracted_fields.values()" :key="value">{{ value }}</th>
</tr>
</thead>
<tbody>
<tr v-for="row in blueprintData[bp.id.toString()].extracted_data.slice(blueprintData[bp.id.toString()].fb_pos_lower, blueprintData[bp.id.toString()].fb_pos_upper)" :key="row">
<template v-for="key in blueprintData[bp.id.toString()].extracted_fields.keys()" :key="key">
<td v-if="key in row" :key="row">{{ row[key] }}</td>
<td v-else>–</td>
</template>
</tr>

</tbody>
</table>
<div class="pb-2">
<a class="btn btn-secondary btn-sm me-2" v-if="blueprintData[bp.id.toString()].fb_pos_lower > 14" v-on:click="updateFbPos(bp.id.toString(), 'down')" >Vorherige Seite</a>
<a class="btn btn-secondary btn-sm" v-if="blueprintData[bp.id.toString()].fb_pos_upper < blueprintData[bp.id.toString()].extracted_data.length" v-on:click="updateFbPos(bp.id.toString(), 'up')" >Nächste Seite</a>
<div class="data-donation-table">
<table :id="'ul-result-' + bp.id.toString()" class="table table-sm">
<thead>
<tr>
<th v-for="value in blueprintData[bp.id.toString()].extracted_fields.values()" :key="value">{{ value }}</th>
</tr>
</thead>
<tbody>
<tr v-for="row in blueprintData[bp.id.toString()].extracted_data.slice(blueprintData[bp.id.toString()].fb_pos_lower, blueprintData[bp.id.toString()].fb_pos_upper)" :key="row">
<template v-for="key in blueprintData[bp.id.toString()].extracted_fields.keys()" :key="key">
<td v-if="key in row" :key="row">{{ row[key] }}</td>
<td v-else>–</td>
</template>
</tr>

</tbody>
</table>
</div>
<div class="data-table-navigation">
<div class="pb-2">
<a class="btn btn-secondary btn-sm me-2" v-if="blueprintData[bp.id.toString()].fb_pos_lower > 14" v-on:click="updateFbPos(bp.id.toString(), 'down')" >{{ $t('previous-page') }}</a>
<span class="btn-secondary btn-sm me-2 btn-light text-muted user-select-none btn-muted" v-if="blueprintData[bp.id.toString()].fb_pos_lower <= 14">{{ $t('previous-page') }}</span>
<a class="btn btn-secondary btn-sm" v-if="blueprintData[bp.id.toString()].fb_pos_upper < blueprintData[bp.id.toString()].extracted_data.length" v-on:click="updateFbPos(bp.id.toString(), 'up')" >{{ $t('next-page') }}</a>
<span class="btn-secondary btn-sm btn-light text-muted user-select-none btn-muted" v-if="blueprintData[bp.id.toString()].fb_pos_upper >= blueprintData[bp.id.toString()].extracted_data.length">{{ $t('next-page') }}</span>
</div>

<div class="pb-3">
<p class="pb-3">
{{ $t('extraction-disclaimer', { lower: blueprintData[bp.id.toString()].fb_pos_lower + 1, upper: blueprintData[bp.id.toString()].fb_pos_upper, total: blueprintData[bp.id.toString()].extracted_data.length }) }}
</p>
</div>
</div>
</div>
<div>

<p class="pb-3">
{{ $t('extraction-disclaimer', { lower: blueprintData[bp.id.toString()].fb_pos_lower + 1, upper: blueprintData[bp.id.toString()].fb_pos_upper, total: blueprintData[bp.id.toString()].extracted_data.length }) }}
</p>
</div>
<div :id="'expansion-control-'+bp.id.toString()" class="ul-data-expansion-control control-condensed"><a class="text-decoration-none fw-bold" :id="'collapse-toggle-'+bp.id.toString()" v-on:click="showHideData(bp.id.toString())"><span :id="'donation-container-'+ bp.id.toString() + '-toggle-label'">{{ $t('show-extracted-data') }}</span></a></div>
</div>
Expand Down Expand Up @@ -990,6 +1001,7 @@ export default {
z-index: 1;
background-color: white !important;
box-shadow: 0px 1px black;
min-width: 200px;
}
.ul-data-expansion-control {
text-align: center;
Expand Down Expand Up @@ -1042,15 +1054,20 @@ export default {
}
.ul-data-container table {
background: #e3e3e31c;
table-layout: fixed;
max-width: 1000px;
width: 1000px;
table-layout: auto;
min-width: 100%;
}
.ul-data-container table td {
max-width: 33%;
word-break: break-all;
}
.btn-secondary:hover {
.data-donation-table {
width: 100%;
overflow-x: scroll;
margin-bottom: 15px;
display: block;
}
.btn-secondary:not(.btn-muted):hover {
color: white !important;
}
</style>
18 changes: 11 additions & 7 deletions frontend/UploaderApp/src/translations/file_uploader.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
"upload-success": "Upload was successful",
"upload-failed": "Upload failed",
"choose-different-file": "select a different file",
"choose-file": "Select file",
"choose-file": "Select File",
"file-is-being-uploaded": "file is being uploaded",
"extracted-files": "Extracted files",
"upload-success-short": "Successfully Uploaded",
Expand All @@ -18,7 +18,7 @@
"donation-question": "Do you agree to donate and submit the data listed above?",
"donation-agree": "Yes, I agree to submit these data",
"donation-disagree": "No, I do not want to submit these data",
"extracted-data-intro": "The following data have been extracted and will be transmitted to the researchers with your consent",
"extracted-data-intro": "The following data have been extracted and will be submitted to the researchers with your consent",
"file": "file",
"error-multiple-files": "More than one file uploaded, but only one is expected.",
"error-not-zip": "A zip-file is expected but another file type was uploaded.",
Expand All @@ -42,8 +42,10 @@
"ul-partial-modal-body": "<p>Only parts of the data could be uploaded successfully.</p><p>In the 'Data Donation' section you will find more information on which file a problem occurred. This information may help you to identify and fix the problem.</p><p>If not, you can inspect the uploaded data, indicate whether you want to donate the data or not, and continue.</p>",
"ul-nothing-extracted-modal-title": "Upload Successful but No Data Extracted",
"ul-nothing-extracted-modal-body": "<p>The data was successfully uploaded but no data were extracted. It is possible, that your data file did not contain any information relevant to this research project.</p><p>If you think you chose the wrong file, you can try the upload again. Otherwise, you can continue by clicking on 'submit data'.</p>",
"extracted-data": "The following data were extracted:",
"extraction-disclaimer": "The rows {lower} to {upper} from a total of {total} extracted data entries are displayed."
"extracted-data": "If you consent to the donation, the following data will be submitted:",
"extraction-disclaimer": "The rows {lower} to {upper} from a total of {total} extracted data entries are displayed.",
"previous-page": "previous page",
"next-page": "next page"
},
"de": {
"instructions": "Instruktionen",
Expand Down Expand Up @@ -79,7 +81,7 @@
"extraction-failed": "Es konnten nicht alle erwarteten Dateien ausgelesen werden.",
"partial-upload-status": "Nur teilweise hochgeladen",
"partial-upload-message": "Der Zip-Container wurde erfolgreich hochgeladen, aber es wurden nicht alle Daten erfolgreich extrahiert (siehe unten)",
"data-extraction-intro": "Die folgenden Informationen werden aus dem ausgewählten File ausgelesen",
"data-extraction-intro": "Die folgenden Informationen werden aus der ausgewählten Datei ausgelesen",
"ul-success-modal-title": "Upload abgeschlossen",
"ul-success-modal-body": "Alle Daten wurden erfolgreich hochgeladen. Bitte schauen Sie sich die hochgeladenen Daten an und geben Sie jeweils an, ob Sie die Daten spenden möchten oder nicht.",
"ul-failed-modal-title": "Es ist ein Fehler aufgetreten",
Expand All @@ -88,7 +90,9 @@
"ul-partial-modal-body": "<p>Es konnte nur ein Teil der Daten erfolgreich hochgeladen werden.</p><p>Im Bereich 'Datenspende' finden Sie weitere Informationen dazu, bei welchen Daten ein Problem aufgetreten ist. Gegebenenfalls helfen Ihnen diese Informationen das Problem zu identifizieren und zu beheben.</p><p>Falls nicht, können Sie sich die erfolgreich hochgeladenen Daten anschauen und entscheiden, ob Sie diese Daten spenden möchten oder nicht.</p>",
"ul-nothing-extracted-modal-title": "Upload erfolgreich, jedoch wurden keine Daten ausgelesen",
"ul-nothing-extracted-modal-body": "<p>Die Daten wurden erfolgreich verarbeitet, aber es wurden keine Daten extrahiert. Es ist möglich, dass Ihre Datei keine für dieses Forschungsprojekt relevanten Informationen enthält.</p><p>Wenn Sie denken, dass Sie die falsche Datei ausgewählt haben, können Sie den Upload erneut versuchen.</p><p>Andernfalls können Sie fortfahren, indem Sie auf 'Daten übermitteln' klicken.</p>",
"extracted-data": "Die folgenden Daten wurden ausgelesen:",
"extraction-disclaimer": "Es werden die Zeilen {lower} bis {upper} von insgesamt {total} ausgelesenen Einträgen angezeigt."
"extracted-data": "Wenn Sie der Datenspende zustimmen, werden die folgenden Daten übermittelt:",
"extraction-disclaimer": "Es werden die Zeilen {lower} bis {upper} von insgesamt {total} ausgelesenen Einträgen angezeigt.",
"previous-page": "vorherige Seite",
"next-page": "nächste Seite"
}
}

0 comments on commit 0b90ea2

Please sign in to comment.