Mercurial > gemma
view client/src/components/importoverview/ApprovedGaugeMeasurementDetail.vue @ 2774:6c1c4f55d99b
sidebar: only update when user is logged in
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Fri, 22 Mar 2019 12:45:53 +0100 |
parents | 0ab7985ef008 |
children | c40540889b53 |
line wrap: on
line source
<template> <div :class="{ diffs: true, full: showLogs === $options.NODETAILS, split: showLogs !== $options.NODETAILS }" > <div v-for="(result, index) in details.summary" :key="index"> <div class="pl-2 d-flex flex-row"> <div @click="toggleDiff(index)" class="small mt-auto mb-auto text-info text-left" > <font-awesome-icon class="pointer" v-if="showDiff == index" icon="angle-down" fixed-width ></font-awesome-icon> <font-awesome-icon class="pointer" v-if="showDiff != index" icon="angle-right" fixed-width ></font-awesome-icon> </div> <span v-if="result.versions.length == 1" class="agmcode text-left" ><div> {{ result["fk-gauge-id"] }} <translate>( New )</translate> </div></span > <span v-if="result.versions.length == 2" class="agmcode text-left" ><div>{{ result["fk-gauge-id"] }}</div></span > <span class="text-left" ><div>{{ result["measure-date"] | dateTime }}</div></span > </div> <div v-if="showDiff == index" class="pl-3 d-flex flex-row"> <div class="w-100"> <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> */ import { mapState } from "vuex"; const NODIFF = -1; export default { name: "agmdetails", props: ["entry"], data() { return { showDiff: NODIFF }; }, computed: { ...mapState("imports", ["showLogs", "details"]) }, methods: { toggleDiff(number) { if (this.showDiff !== number || this.showDiff == NODIFF) { this.showDiff = number; } else { this.showDiff = NODIFF; } } }, NODETAILS: -1 }; </script> <style lang="scss" scoped> .diffs { width: 615px; max-height: 20vh; overflow-y: auto; } .agmcode { width: 35%; } .agmdetailskeys { width: 33%; } .agmdetailsvalues { width: 33%; } .split { max-height: 35vh; } .full { max-height: 70vh; } </style>