Mercurial > gemma
changeset 2944:73f537379203
client: importoverview: improved style
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Fri, 05 Apr 2019 10:29:01 +0200 |
parents | 78affd725ba5 |
children | ab771ea5e4fe |
files | client/src/components/importoverview/ApprovedGaugeMeasurementDetail.vue client/src/components/importoverview/BottleneckDetail.vue client/src/components/importoverview/LogDetail.vue |
diffstat | 3 files changed, 92 insertions(+), 99 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/importoverview/ApprovedGaugeMeasurementDetail.vue Thu Apr 04 18:46:17 2019 +0200 +++ b/client/src/components/importoverview/ApprovedGaugeMeasurementDetail.vue Fri Apr 05 10:29:01 2019 +0200 @@ -7,74 +7,53 @@ }" > <div v-for="(result, index) in details.summary" :key="index"> - <div class="pl-2 d-flex"> - <div @click="toggleDiff(index)" class="my-auto text-left"> - <UISpinnerButton - :state="showDiff === index" - :icons="['angle-right', 'angle-down']" - classes="text-info" - /> + <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> - <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 + <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)" > - <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 w-95"> - <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 :class="isNew(result) ? 'col-6' : 'col-4'"> + {{ entry }} + </div> + <div :class="isNew(result) ? 'col-6' : 'col-4'"> + {{ result.versions[0][entry] }} </div> <div - class="line d-flex flex-row pl-3 text-left w-95" - v-for="(entry, index) in Object.keys(result.versions[0])" - :key="index" + v-if="isOld(result) && isDifferent(result, entry)" + :class="isNew(result) ? 'col-6' : 'col-4'" > - <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> + {{ result.versions[1][entry] }} </div> </div> </div> @@ -90,18 +69,21 @@ border-top: dashed 1px #dee2e6 &:first-child border-top: none - -.line:nth-child(odd) - background: #f8f8f8 - -.agmcode - width: 35% - -.agmdetailskeys - width: 33% - -.agmdetailsvalues - width: 33% + .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 @@ -127,8 +109,6 @@ import { mapState } from "vuex"; export default { - name: "agmdetails", - props: ["entry"], data() { return { showDiff: 0 // open first item by default @@ -144,6 +124,18 @@ } 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] + ); } } };
--- a/client/src/components/importoverview/BottleneckDetail.vue Thu Apr 04 18:46:17 2019 +0200 +++ b/client/src/components/importoverview/BottleneckDetail.vue Fri Apr 05 10:29:01 2019 +0200 @@ -6,12 +6,8 @@ split: showLogs }" > - <div - v-for="(bottleneck, index) in bottlenecks" - :key="index" - class="d-flex flex-column w-100" - > - <div class="d-flex flex-row pl-2"> + <div v-for="(bottleneck, index) in bottlenecks" :key="index"> + <div class="d-flex pl-2"> <div @click="showBottleneckDetails(index)" class="mt-auto mb-auto text-info text-left" @@ -27,15 +23,14 @@ </a> </div> - <div class="ml-3 d-flex flex-row" v-if="showBottleneckDetail === index"> - <table> + <div class="d-flex properties" v-if="showBottleneckDetail === index"> + <table class="w-100"> <tr v-for="(info, index) in Object.keys(bottleneck.properties)" :key="index" - class="mr-1 condensed text-muted" > - <td class="text-left">{{ info }}</td> - <td class="pl-3 text-left"> + <td class="pl-4">{{ info }}</td> + <td> {{ bottleneck.properties[info] }} </td> </tr> @@ -46,13 +41,6 @@ </template> <style lang="sass" scoped> - -table - width: 100% - -tr:nth-child(even) - background: #f8f8f8 - .bottleneckdetails width: 100% overflow-y: auto @@ -60,6 +48,21 @@ border-top: dashed 1px #dee2e6 &:first-child border-top: none + .properties + 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) + tr + font-size: 0.7rem + &:nth-child(odd) + background-color: #f8f9fa .split max-height: 35vh @@ -91,8 +94,6 @@ import { mapState } from "vuex"; export default { - name: "bottleneckdetails", - props: ["entry"], data() { return { bottlenecks: [],
--- a/client/src/components/importoverview/LogDetail.vue Thu Apr 04 18:46:17 2019 +0200 +++ b/client/src/components/importoverview/LogDetail.vue Fri Apr 05 10:29:01 2019 +0200 @@ -34,8 +34,8 @@ v-if="entry.id === showAdditional && isPending && (isFD || isAGM || isBN)" class="d-flex border-bottom" > - <FairwayDimensionDetail :entry="entry" v-if="isFD" /> - <ApprovedGaugeMeasurementDetail :entry="entry" v-if="isAGM" /> + <FairwayDimensionDetail v-if="isFD" /> + <ApprovedGaugeMeasurementDetail v-if="isAGM" /> <BottleneckDetail :entry="entry" v-if="isBN" /> </div> <div class="d-flex" style="padding-left: 3px;">