Skip to content
Snippets Groups Projects
Commit 0a90482c authored by Lars Kollmann's avatar Lars Kollmann
Browse files

Merge branch 'feature/149-ms1-afterburner-ui-changes' into 'develop' 

Resolve "MS1 Nachbrenner: Low UI Änderungen"

Closes #149

See merge request rdm/biome/frontend!154
parents 4d752105 e1482ca5
No related branches found
No related tags found
2 merge requests!174Merge develop into master,!154Resolve "MS1 Nachbrenner: Low UI Änderungen"
Pipeline #420094 passed
Stage: build
Stage: test
Hide whitespace changes
Inline Side-by-side
Showing
with 198 additions and 34 deletions
app/src/components/TransectInspectionTable.ts
+ 53
− 6
View file @ 0a90482c
......@@ -19,6 +19,9 @@ export default class TransectInspectionTable extends Vue {
return "";
},
}) private sectionEventId!: string;
private currentSortCol = "art";
private currentSortDir = "asc";
private pageNumber = 0;
private isAddTableRowLoading = false;
private fileUploadMode: FileUploadMode = {
single: false,
......@@ -39,11 +42,11 @@ export default class TransectInspectionTable extends Vue {
egg: false,
};
private tableHeaders = [
{ text: i18n.t("transektbegehung.mainData.art"), align: "start", sortable: true, value: "art" },
{ text: i18n.t("transektbegehung.mainData.imago"), sortable: true, value: "imago" },
{ text: i18n.t("transektbegehung.mainData.female"), sortable: true, value: "female" },
{ text: i18n.t("transektbegehung.mainData.male"), sortable: true, value: "male" },
{ text: i18n.t("transektbegehung.mainData.delete"), value: "delete", sortable: false },
{ text: i18n.t("transektbegehung.mainData.art"), align: "start", sortable: true, value: "art", tooltip: i18n.t("transektbegehung.mainData.art") },
{ text: i18n.t("transektbegehung.mainData.imago"), sortable: true, value: "imago", tooltip: i18n.t("transektbegehung.alerts.imago") },
{ text: i18n.t("transektbegehung.mainData.female"), sortable: true, value: "female", tooltip: i18n.t("transektbegehung.mainData.female") },
{ text: i18n.t("transektbegehung.mainData.male"), sortable: true, value: "male", tooltip: i18n.t("transektbegehung.mainData.male") },
{ text: i18n.t("transektbegehung.mainData.delete"), value: "delete", sortable: false, tooltip: i18n.t("transektbegehung.mainData.delete") },
];
private tableItems: Array<ObservationTableRow> = [];
private selectedSpecies = null;
......@@ -161,6 +164,48 @@ export default class TransectInspectionTable extends Vue {
this.isNullInspection();
}
private sort(col) {
this.pageNumber = 0;
if (this.currentSortCol === col) {
this.currentSortDir = this.currentSortDir === "asc" ? "desc" : "asc";
} else {
this.currentSortCol = col;
}
this.tableItems.sort(this.sortBy(col, this.currentSortDir));
}
private sortBy(property, order) {
this.currentSortDir = order;
return (a, b) => {
const firstValue =
typeof a[property] === "string"
? a[property].toUpperCase()
: a[property];
const secondValue =
typeof b[property] === "string"
? b[property].toUpperCase()
: b[property];
let comparison = 0;
if (property === "art") {
if (firstValue.selectedSpeciesItem.species > secondValue.selectedSpeciesItem.species) {
comparison = 1;
} else if (firstValue.selectedSpeciesItem.species < secondValue.selectedSpeciesItem.species) {
comparison = -1;
}
} else {
const firstNumber = Number(firstValue.abundance);
const secondNumber = Number(secondValue.abundance);
if (firstNumber > secondNumber) {
comparison = 1;
} else if (firstNumber < secondNumber) {
comparison = -1;
}
}
return order === "desc" ? comparison * -1 : comparison;
};
}
private isNullInspection() {
this.$emit("isNullInspection", this.tableItems.length === 0);
}
......@@ -184,7 +229,9 @@ export default class TransectInspectionTable extends Vue {
private checkAttribute(attribute: boolean, attributeName: TranslateResult, attributeValue: string) {
if (attribute) {
this.tableHeaders.push({text: attributeName, sortable: true, value: attributeValue});
attributeValue === "imago" ?
this.tableHeaders.push({text: attributeName, sortable: true, value: attributeValue, tooltip: i18n.t("transektbegehung.alerts.imago")}) :
this.tableHeaders.push({text: attributeName, sortable: true, value: attributeValue, tooltip: attributeName});
}
}
......
app/src/components/TransectInspectionTable.vue
+ 33
− 14
View file @ 0a90482c
......@@ -13,7 +13,26 @@
:no-data-text="$t('basic.errors.noDataAvailable')"
class="elevation-1 col-12"
sort-by="art"
hide-default-header
>
<template v-slot:header="{ props: { headers } }">
<thead>
<tr>
<th class="text-start"
v-for="header in headers" :key="header.text" v-on:click="sort(header.value)">
<v-tooltip bottom>
<template v-slot:activator="{ on }">
<span v-on="on">{{header.text}}</span>
</template>
<span>{{header.tooltip}}</span>
</v-tooltip>
<v-icon small v-if="currentSortDir ==='asc'" >mdi-arrow-down</v-icon>
<v-icon small v-else>mdi-arrow-up</v-icon>
</th>
</tr>
</thead>
</template>
<template v-slot:top>
<v-dialog v-model="dialogDelete" max-width="500px">
<v-card>
......@@ -80,7 +99,7 @@
<template v-slot:input>
<v-card>
<v-card-title>Update Art</v-card-title>
<v-card-title>{{ $t('transektbegehung.mainData.updateSpeciesTitle') }}</v-card-title>
<v-card-text>
<v-container>
<v-row align="center">
......@@ -104,7 +123,7 @@
<v-col cols="12">
<v-textarea
v-model="props.item.art.comment"
:label="$t('transektbegehung.mainData.comment')"
:label="$t('transektbegehung.mainData.speciesComment')"
outlined
></v-textarea>
</v-col>
......@@ -150,7 +169,7 @@
<template v-slot:input>
<v-card>
<v-card-title>Update Imago</v-card-title>
<v-card-title>{{ $t('transektbegehung.mainData.updateImagoTitle') }}</v-card-title>
<v-card-text>
<v-container>
<v-row align="center">
......@@ -181,7 +200,7 @@
<v-col cols="12">
<v-textarea
v-model="props.item.imago.comment"
:label="$t('transektbegehung.mainData.comment')"
:label="$t('transektbegehung.mainData.fundComment')"
outlined
></v-textarea>
</v-col>
......@@ -227,7 +246,7 @@
<template v-slot:input>
<v-card>
<v-card-title>Update female</v-card-title>
<v-card-title>{{ $t('transektbegehung.mainData.updateFemaleTitle') }}</v-card-title>
<v-card-text>
<v-container>
<v-row align="center">
......@@ -258,7 +277,7 @@
<v-col cols="12">
<v-textarea
v-model="props.item.female.comment"
:label="$t('transektbegehung.mainData.comment')"
:label="$t('transektbegehung.mainData.fundComment')"
outlined
></v-textarea>
</v-col>
......@@ -304,7 +323,7 @@
<template v-slot:input>
<v-card>
<v-card-title>Update female</v-card-title>
<v-card-title>{{ $t('transektbegehung.mainData.updateMaleTitle') }}</v-card-title>
<v-card-text>
<v-container>
<v-row align="center">
......@@ -335,7 +354,7 @@
<v-col cols="12">
<v-textarea
v-model="props.item.male.comment"
:label="$t('transektbegehung.mainData.comment')"
:label="$t('transektbegehung.mainData.fundComment')"
outlined
></v-textarea>
</v-col>
......@@ -381,7 +400,7 @@
<template v-slot:input>
<v-card>
<v-card-title>Update cocoon</v-card-title>
<v-card-title>{{ $t('transektbegehung.mainData.updateCocoonTitle') }}</v-card-title>
<v-card-text>
<v-container>
<v-row align="center">
......@@ -412,7 +431,7 @@
<v-col cols="12">
<v-textarea
v-model="props.item.cocoon.comment"
:label="$t('transektbegehung.mainData.comment')"
:label="$t('transektbegehung.mainData.fundComment')"
outlined
></v-textarea>
</v-col>
......@@ -458,7 +477,7 @@
<template v-slot:input>
<v-card>
<v-card-title>Update caterpillar</v-card-title>
<v-card-title>{{ $t('transektbegehung.mainData.updateCaterpillarTitle') }}</v-card-title>
<v-card-text>
<v-container>
<v-row align="center">
......@@ -489,7 +508,7 @@
<v-col cols="12">
<v-textarea
v-model="props.item.caterpillar.comment"
:label="$t('transektbegehung.mainData.comment')"
:label="$t('transektbegehung.mainData.fundComment')"
outlined
></v-textarea>
</v-col>
......@@ -535,7 +554,7 @@
<template v-slot:input>
<v-card>
<v-card-title>Update caterpillar</v-card-title>
<v-card-title>{{ $t('transektbegehung.mainData.updateEggTitle') }}</v-card-title>
<v-card-text>
<v-container>
<v-row align="center">
......@@ -566,7 +585,7 @@
<v-col cols="12">
<v-textarea
v-model="props.item.egg.comment"
:label="$t('transektbegehung.mainData.comment')"
:label="$t('transektbegehung.mainData.fundComment')"
outlined
></v-textarea>
</v-col>
......
app/src/components/TransectInspectionTableSummary.ts
+ 64
− 7
View file @ 0a90482c
......@@ -17,16 +17,73 @@ export default class TransectInspectionTableSummary extends Vue {
},
}) private section!: Section;
private tableHeaders = [
{ text: i18n.t("transektbegehung.mainData.art"), align: "start", sortable: true, value: "art" },
{ text: i18n.t("transektbegehung.mainData.imago"), sortable: true, value: "imago" },
{ text: i18n.t("transektbegehung.mainData.female"), sortable: true, value: "female" },
{ text: i18n.t("transektbegehung.mainData.male"), sortable: true, value: "male" },
{ text: i18n.t("transektbegehung.mainData.cocoon"), sortable: true, value: "cocoon" },
{ text: i18n.t("transektbegehung.mainData.caterpillar"), sortable: true, value: "caterpillar" },
{ text: i18n.t("transektbegehung.mainData.egg"), sortable: true, value: "egg" },
{ text: i18n.t("transektbegehung.mainData.art"), align: "start", sortable: true, value: "art", tooltip: i18n.t("transektbegehung.mainData.art") },
{ text: i18n.t("transektbegehung.mainData.imago"), sortable: true, value: "imago", tooltip: i18n.t("transektbegehung.alerts.imago") },
{ text: i18n.t("transektbegehung.mainData.female"), sortable: true, value: "female", tooltip: i18n.t("transektbegehung.mainData.female") },
{ text: i18n.t("transektbegehung.mainData.male"), sortable: true, value: "male", tooltip: i18n.t("transektbegehung.mainData.male") },
{ text: i18n.t("transektbegehung.mainData.cocoon"), sortable: true, value: "cocoon", tooltip: i18n.t("transektbegehung.mainData.cocoon") },
{ text: i18n.t("transektbegehung.mainData.caterpillar"), sortable: true, value: "caterpillar", tooltip: i18n.t("transektbegehung.mainData.caterpillar") },
{ text: i18n.t("transektbegehung.mainData.egg"), sortable: true, value: "egg", tooltip: i18n.t("transektbegehung.mainData.egg") },
];
private currentSortCol = "art";
private currentSortDir = "asc";
private pageNumber = 0;
private showCommentIcon(comment: string) {
return comment === "" ? false : true;
}
private sort(col) {
this.pageNumber = 0;
if (this.currentSortCol === col) {
this.currentSortDir = this.currentSortDir === "asc" ? "desc" : "asc";
} else {
this.currentSortCol = col;
}
this.section.sectionEvent.observationTableRows.sort(this.sortBy(col, this.currentSortDir));
}
private sortBy(property, order) {
this.currentSortDir = order;
return (a, b) => {
const firstValue =
typeof a[property] === "string"
? a[property].toUpperCase()
: a[property];
const secondValue =
typeof b[property] === "string"
? b[property].toUpperCase()
: b[property];
let comparison;
if (property === "art") {
comparison = this.sortTypes(firstValue, secondValue);
} else {
comparison = this.sortTableNumbers(firstValue, secondValue);
}
return order === "desc" ? comparison * -1 : comparison;
};
}
private sortTypes(firstValue: any, secondValue: any) {
if (firstValue.selectedSpeciesItem.species > secondValue.selectedSpeciesItem.species) {
return 1;
} else if (firstValue.selectedSpeciesItem.species < secondValue.selectedSpeciesItem.species) {
return -1;
} else {
return 0;
}
}
private sortTableNumbers(firstValue: any, secondValue: any) {
const firstNumber = Number(firstValue.abundance);
const secondNumber = Number(secondValue.abundance);
if (firstNumber > secondNumber) {
return 1;
} else if (firstNumber < secondNumber) {
return -1;
} else {
return 0;
}
}
}
app/src/components/TransectInspectionTableSummary.vue
+ 19
− 0
View file @ 0a90482c
......@@ -8,7 +8,26 @@
:no-data-text="$t('basic.errors.noDataAvailable')"
class="elevation-1 col-12"
sort-by="art"
hide-default-header
>
<template v-slot:header="{ props: { headers } }">
<thead>
<tr>
<th class="text-start"
v-for="header in headers" :key="header.text" v-on:click="sort(header.value)">
<v-tooltip bottom>
<template v-slot:activator="{ on }">
<span v-on="on">{{header.text}}</span>
</template>
<span>{{header.tooltip}}</span>
</v-tooltip>
<v-icon small v-if="currentSortDir ==='asc'" >mdi-arrow-down</v-icon>
<v-icon small v-else>mdi-arrow-up</v-icon>
</th>
</tr>
</thead>
</template>
<template v-slot:item.art="props">
<div style="min-width: 250px">
<v-row align="center">
......
app/src/i18n/deutsch.json
+ 13
− 3
View file @ 0a90482c
......@@ -62,7 +62,9 @@
},
"mainData": {
"title": "Funde der Begehung",
"comment": "Kommentar",
"comment": "Kommentar zum Abschnitt",
"speciesComment": "Kommentar zur Art",
"fundComment": "Kommentar zum Fund",
"editAttributes": "Weitere Attribute anzeigen",
"chooseAttributes": "Attribute auswählen",
"section": "Abschnitt",
......@@ -84,14 +86,21 @@
"species": "Art",
"numberOfOccurrences": "Anzahl der Vorkommen",
"state": "Lebend",
"outOfMethod": "Außerhalb"
"outOfMethod": "Außerhalb",
"updateSpeciesTitle": "Details zur Art",
"updateImagoTitle": "Details zu Imago",
"updateFemaleTitle": "Details zu Weibchen",
"updateMaleTitle": "Details zu Männchen",
"updateCocoonTitle": "Details zu Puppe",
"updateCaterpillarTitle": "Details zu Raupe",
"updateEggTitle": "Details zu Ei"
},
"footerData": {
"title": "Fußdaten der Begehung",
"windForce": "Windstärke",
"clouds": "Bewölkung",
"temperature": "Temperatur",
"comment": "Kommentar",
"comment": "Kommentar zur Begehung",
"endDate": "Enddatum der Begehung",
"endTime": "Endzeit der Begehung",
"invalidWindForce": "Die Windstärke muß ein Wert zwischen 0 und 12 sein.",
......@@ -107,6 +116,7 @@
"createTransectInspection": "Bitte melden Sie sich zuerst an, um eine neue Transektbegehung zu erstellen",
"listInspections": "Bitte melden Sie sich zuerst an, um die Begehungen anzuzeigen"
},
"imago": "Falter ohne Geschlechtsbestimmungen",
"windForce": "Die Windstärke bitte nach folgendem Schema abschätzen: {0} 1 = Wind an Rauchfahnen sichtbar, Windfahnen bewegen sich noch nicht. {0} 2 = Windfahnen bewegen sich, Wind am Gesicht fühlbar. {0} 3 = Blätter und Zweige fortdauernd in Bewegung. {0} 4 = Kleine Äste bewegen sich, Stoff und Papier wirbelt hoch. {0} 5 = Wellenbildung auf Wasseroberflächen (Kräuseln), große Äste bewegen sich. {0} Kartiert wird nur bis Windstärke 4 (20 km/h), ab Windstärke 5 wird nicht mehr gezählt.",
"clouds": "Die Bedeckung des Himmels bitte in Prozent abschätzen und als Zahlenwert eintragen (10 %-Schritte).",
"temperature": "Die Lufttemperatur in Grad Celsius wird zu Beginn der Begehung gemessen und eingetragen. {0} Hat man kein Thermometer zur Hand, sind auch die Angaben zum lokalen Tageswetter aus Internet, Radio oder Zeitung verwendbar."
......
app/src/i18n/english.json
+ 13
− 3
View file @ 0a90482c
......@@ -62,7 +62,9 @@
},
"mainData": {
"title": "Finds of the inspection",
"comment": "Comment",
"comment": "Comment on the section",
"speciesComment": "Comment on the species",
"fundComment": "Comment on finding",
"editAttributes": "Show other attributes",
"chooseAttributes": "Choose attributes",
"section": "Section",
......@@ -84,14 +86,21 @@
"species": "Species",
"numberOfOccurrences": "Number of occurrences",
"state": "Is alive",
"outOfMethod": "Out of method"
"outOfMethod": "Out of method",
"updateSpeciesTitle": "Details about type",
"updateImagoTitle": "Details about imago",
"updateFemaleTitle": "Details about female",
"updateMaleTitle": "Details about male",
"updateCocoonTitle": "Details about cocoon",
"updateCaterpillarTitle": "Details about caterpillar",
"updateEggTitle": "Details about egg"
},
"footerData": {
"title": "Footer data",
"windForce": "Wind force",
"clouds": "Clouds",
"temperature": "Temperature",
"comment": "Comment",
"comment": "Comment on the inspection",
"endDate": "End date",
"endTime": "End time",
"invalidWindForce": "Wind force needs to be value between 0 and 12.",
......@@ -107,6 +116,7 @@
"createTransectInspection": "Please log in first to create a new transect inspection",
"listInspections": "Please log in first to view transect inspections"
},
"imago": "Moths without sex determinations",
"windForce": "Please estimate the wind strength according to the following scheme: {0} 1 = wind visible on smoke plumes, wind vanes not yet moving. {0} 2 = wind vanes are moving, wind can be felt on the face. {0} 3 = Leaves and branches constantly moving. {0} 4 = Small branches move, cloth and paper swirl upwards. {0} 5 = Ripples on water surfaces (ripples), large branches move. {0} Mapping is only done up to wind force 4 (20 km/h), from wind force 5 onwards no more counting is done.",
"clouds": "Please estimate the coverage of the sky in percent and enter it as a numerical value (10 % steps).",
"temperature": "The air temperature in degrees Celsius is measured and recorded at the beginning of the walk. {0} If you do not have a thermometer at hand, you can also use the local daily weather data from the internet, radio or newspaper."
......
app/src/views/TransectInspection.vue
+ 3
− 1
View file @ 0a90482c
......@@ -3,7 +3,7 @@
<v-row v-if="$auth.isAuthenticated">
<v-col class="col-12">
<v-stepper v-model="selectedStepper" data-testid='stepper' non-linear>
<v-stepper-header>
<v-stepper-header class="stepper-header-font-size">
<v-hover v-slot="{ hover }">
<v-stepper-step :class="{ 'on-hover': hover }"
step="1"
......@@ -252,6 +252,8 @@
</script>
<style lang="sass" scoped>
.stepper-header-font-size
font-size: larger
.on-hover
cursor: pointer
background-color: #BDBDBD
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

A HIFIS Service | Privacy | Imprint | Support | Documentation | Changelog