Mercurial > gemma
view client/src/components/importoverview/ApprovedGaugeMeasurementDetail.vue @ 3325:496cf0474e29
fairway_availability_dialogue: extracted frequencies
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Mon, 20 May 2019 12:13:14 +0200 |
parents | 73f537379203 |
children | 96ee62fb88fd |
line wrap: on
line source
<template> <div :class="{ diffs: true, full: !showLogs, split: showLogs }" > <div v-for="(result, index) in details.summary" :key="index"> <div class="px-2 d-flex justify-content-between"> <div class="d-flex"> <div @click="toggleDiff(index)" class="my-auto text-left"> <UISpinnerButton :state="showDiff === index" :icons="['angle-right', 'angle-down']" classes="text-info" /> </div> <div> {{ result["fk-gauge-id"] }} <sup v-if="isNew(result)" class="text-success"> (<translate>New</translate>) </sup> </div> </div> <div>{{ result["measure-date"] | dateTime }}</div> </div> <div v-if="showDiff === index" class="compare-table"> <div class="row no-gutters px-4 text-left font-weight-bold"> <div :class="isNew(result) ? 'col-6' : 'col-4'"> <translate>Value</translate> </div> <div v-if="isOld(result)" class="col-4"> <translate>Old</translate> </div> <div :class="isNew(result) ? 'col-6' : 'col-4'"> <translate>New</translate> </div> </div> <div class="row no-gutters px-4 text-left" v-for="(entry, index) in Object.keys(result.versions[0])" :key="index" v-if="isNew(result) || isDifferent(result, entry)" > <div :class="isNew(result) ? 'col-6' : 'col-4'"> {{ entry }} </div> <div :class="isNew(result) ? 'col-6' : 'col-4'"> {{ result.versions[0][entry] }} </div> <div v-if="isOld(result) && isDifferent(result, entry)" :class="isNew(result) ? 'col-6' : 'col-4'" > {{ result.versions[1][entry] }} </div> </div> </div> </div> </div> </template> <style lang="sass" scoped> .diffs width: 100% overflow-y: auto > div border-top: dashed 1px #dee2e6 &:first-child border-top: none .compare-table position: relative overflow: hidden &::after content: '' position: absolute top: 0 right: -5px bottom: 0 left: -5px box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.4) > div font-size: 0.7rem &: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. * * 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> */ import { mapState } from "vuex"; export default { data() { return { showDiff: 0 // open first item by default }; }, computed: { ...mapState("imports", ["showLogs", "details"]) }, methods: { toggleDiff(number) { if (this.showDiff !== number) { this.showDiff = number; } else { this.showDiff = false; } }, isNew(result) { return result && result.versions && result.versions.length === 1; }, isOld(result) { return !this.isNew(result); }, isDifferent(result, entry) { return ( this.isOld(result) && result.versions[0][entry] != result.versions[1][entry] ); } } }; </script>