Mercurial > gemma
changeset 3523:b0c655e605ee import_review
reviewdetails for stretches
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Wed, 29 May 2019 15:07:24 +0200 |
parents | 9538a0aeacde |
children | 40bc7e3bc561 |
files | client/src/components/importoverview/StretchDetails.vue |
diffstat | 1 files changed, 59 insertions(+), 5 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/importoverview/StretchDetails.vue Wed May 29 12:30:04 2019 +0200 +++ b/client/src/components/importoverview/StretchDetails.vue Wed May 29 15:07:24 2019 +0200 @@ -1,11 +1,60 @@ <template> - <div> - <a @click="zoomToStretch()" class="text-info pointer">{{ - details.summary.stretch - }}</a> + <div + :class="{ + full: !showLogs, + split: showLogs + }" + > + <div class="d-flex"> + <UISpinnerButton + @click="showDetails = !showDetails" + :state="showDetails" + :icons="['angle-right', 'angle-down']" + classes="text-info" + /> + <a @click="zoomToStretch()" class="text-info pointer" + >{{ details.summary.objnam }} ( + {{ details.summary.countries.join(", ") }} )</a + > + </div> + <div> + <div v-if="showDetails"> + <div + v-for="(entry, index) in Object.keys(details.summary)" + :key="index" + class="comparison row no-gutters px-4 text-left" + > + <span class="col-4">{{ entry }}</span> + <span v-if="entry === 'countries'" class="col-4">{{ + details.summary[entry].join(", ") + }}</span> + <span v-else class="col-4">{{ details.summary[entry] }}</span> + </div> + </div> + </div> </div> </template> +<style lang="scss" scoped> +.comparison { + width: 668px; + border-top: dashed 1px #dee2e6; +} + +.comparison:nth-child(odd) { + background-color: #f8f9fa; +} + +.split { + max-height: 35vh; +} + +.full { + max-height: 70vh; +} +</style> + + <script> /* This is Free Software under GNU Affero General Public License v >= 3.0 * without warranty, see README.md and license for details. @@ -24,12 +73,17 @@ import { mapState, mapGetters } from "vuex"; export default { + data() { + return { + showDetails: false + }; + }, props: ["entry"], mounted() { this.$store.commit("imports/hideAdditionalInfo"); }, computed: { - ...mapState("imports", ["showAdditional", "details"]), + ...mapState("imports", ["showAdditional", "showLogs", "details"]), ...mapGetters("map", ["openLayersMap"]) }, methods: {