Mercurial > gemma
view client/src/components/importoverview/ApprovedGaugeMeasurementDetail.vue @ 2608:13377f2a5c42
overview2: agm details prototype implemented
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Wed, 13 Mar 2019 09:45:29 +0100 |
parents | 5d0e5159190f |
children | 546ed93a9829 |
line wrap: on
line source
<template> <div class="diffs"> <div v-for="(result, index) in entry.summary" :key="index"> <div class="pl-3 d-flex flex-row"> <span v-if="result.versions.length == 1" class="agmcode text-left" ><small >{{ result["fk-gauge-id"] }} <translate>( New )</translate></small ></span > <span v-if="result.versions.length == 2" class="agmcode text-left" ><small>{{ result["fk-gauge-id"] }}</small></span > <span class="agmdetail text-left" ><small>{{ result["measure-date"] | dateTime }}</small></span > <div @click="toggleDiff(index)" class="small ml-auto mt-auto mb-auto text-info text-left" > <font-awesome-icon class="pointer" v-if="showDiff == index" icon="angle-up" fixed-width ></font-awesome-icon> <font-awesome-icon class="pointer" v-if="showDiff != index" icon="angle-down" fixed-width ></font-awesome-icon> </div> </div> <div v-if="showDiff == index" class="pl-3 d-flex flex-row"> <div> <div class="d-flex flex-row pl-3 text-left"> <div class="header border-bottom agmdetailskeys"> <small><translate>Value</translate></small> </div> <div v-if="result.versions.length == 2" class="header border-bottom agmdetailsvalues" > <small><translate>Old</translate></small> </div> <div class="header border-bottom agmdetailsvalues"> <small><translate>New</translate></small> </div> </div> <div class="d-flex flex-row pl-3 text-left" v-for="(entry, index) in Object.keys(result.versions[0])" :key="index" > <div v-if=" result.versions.length == 1 || result.versions[0][entry] != result.versions[1][entry] " class="agmdetailskeys" > <small>{{ entry }}</small> </div> <div v-if=" result.versions.length == 1 || result.versions[0][entry] != result.versions[1][entry] " class="agmdetailsvalues" > <small>{{ result.versions[0][entry] }}</small> </div> <div v-if=" result.versions.length == 2 && result.versions[0][entry] != result.versions[1][entry] " class="agmdetailsvalues" > <small>{{ result.versions[1][entry] }}</small> </div> </div> </div> </div> </div> </div> </template> <script> /* This is Free Software under GNU Affero General Public License v >= 3.0 * without warranty, see README.md and license for details. * * SPDX-License-Identifier: AGPL-3.0-or-later * License-Filename: LICENSES/AGPL-3.0.txt * * Copyright (C) 2018 by via donau * – Österreichische Wasserstraßen-Gesellschaft mbH * Software engineering by Intevation GmbH * * Author(s): * Thomas Junk <thomas.junk@intevation.de> */ const NODIFF = -1; export default { name: "agmdetails", props: ["entry"], data() { return { showDiff: NODIFF }; }, methods: { toggleDiff(number) { if (this.showDiff !== number || this.showDiff == NODIFF) { this.showDiff = number; } else { this.showDiff = NODIFF; } } } }; </script> <style lang="scss" scoped> .diffs { width: 615px; max-height: 20vh; overflow-y: auto; } </style>