Mercurial > gemma
view client/src/components/importoverview/AGMLogItem.vue @ 4356:5356fd2ea3f6
Identify: legend shows reference values from Nash Sutcliffe
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Mon, 09 Sep 2019 15:54:48 +0200 |
parents | 6ebe42af392d |
children | 84d01a536bec |
line wrap: on
line source
<template> <div class="d-flex flex-column"> <div class="px-2 d-flex justify-content-between"> <div class="d-flex"> <div @click="toggleShow(index)" class="my-auto text-left"> <UISpinnerButton :state="show" :icons="['angle-right', 'angle-down']" classes="text-info" /> </div> <div> {{ line["fk-gauge-id"] }} <sup v-if="isNew(line)" class="text-success"> (<translate>New</translate>) </sup> </div> </div> <div>{{ line["measure-date"] | dateTime }}</div> </div> <div v-if="show" class="compare-table"> <div class="row no-gutters px-4 text-left font-weight-bold"> <div :class="isNew(line) ? 'col-6' : 'col-4'"> <translate>Value</translate> </div> <div v-if="isOld(line)" class="col-4"> <translate>Old</translate> </div> <div :class="isNew(line) ? '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(line.versions[0])" :key="index" v-if="isNew(line) || isDifferent(line, entry)" > <div :class="isNew(line) ? 'col-6' : 'col-4'"> {{ entry }} </div> <div :class="isNew(line) ? 'col-6' : 'col-4'"> <span :class="line.versions[1] ? '' : 'text-danger'">{{ line.versions[0][entry] }}</span> </div> <div v-if="isOld(line) && isDifferent(line, entry)" :class="isNew(line) ? 'col-6' : 'col-4'" > {{ line.versions[1] ? line.versions[1][entry] : $options.DELETED }} </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, 2019 by via donau * – Österreichische Wasserstraßen-Gesellschaft mbH * Software engineering by Intevation GmbH * * Author(s): * * Thomas Junk <thomas.junk@intevation.de> * * Markus Kottländer <markus.kottlaender@intevation.de> * * Fadi Abbud <fadi.abbud@intevation.de> */ import app from "@/main"; export default { props: ["line", "index", "showDiff"], computed: { show() { return this.index === this.showDiff; } }, methods: { toggleShow(index) { this.$emit("openDiff", index); }, isNew(result) { return result && result.versions && result.versions.length === 1; }, isOld(result) { return !this.isNew(result); }, isDifferent(result, entry) { if (!result.versions[1]) return true; return ( this.isOld(result) && result.versions[0][entry] != result.versions[1][entry] ); } }, DELETED: app.$gettext("deleted") }; </script> <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>