Mercurial > gemma
changeset 2145:ba43b29e8694
agm: staging diff POC
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Thu, 07 Feb 2019 17:15:33 +0100 |
parents | e22a354a2312 |
children | 7267f8168176 |
files | client/src/assets/application.scss client/src/components/staging/StagingDetail.vue |
diffstat | 2 files changed, 95 insertions(+), 6 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/assets/application.scss Thu Feb 07 16:01:12 2019 +0100 +++ b/client/src/assets/application.scss Thu Feb 07 17:15:33 2019 +0100 @@ -132,3 +132,7 @@ .headline { font-weight: bold; } + +.pointer { + cursor: pointer; +}
--- a/client/src/components/staging/StagingDetail.vue Thu Feb 07 16:01:12 2019 +0100 +++ b/client/src/components/staging/StagingDetail.vue Thu Feb 07 17:15:33 2019 +0100 @@ -4,6 +4,7 @@ <div class="mt-auto d-flex flex-row mb-auto small name text-left"> <a v-if="isSoundingResult(data.kind.toUpperCase())" + class="text-left pointer" @click="zoomTo()" href="#" >{{ data.summary.bottleneck }}</a @@ -13,12 +14,22 @@ data.summary.bottlenecks.length }})</span > - <span v-if="isFairwayDimension(data.kind.toUpperCase())" + <a + v-if="isApprovedGaugeMeasurement(data.kind.toUpperCase())" + class="text-left pointer" + ><translate>Approved Gauge Measurements</translate> ({{ + data.summary.length + }})</a + > + <span + class="text-left pointer" + v-if="isFairwayDimension(data.kind.toUpperCase())" >{{ data.summary["source-organization"] }} (LOS: {{ data.summary.los }})</span > <a href="#" + class="text-left pointer" @click="zoomToStretch(data.summary.stretch)" v-if="isStretch(data.kind.toUpperCase())" >{{ data.summary.stretch }}</a @@ -89,6 +100,23 @@ ></font-awesome-icon> </div> </div> + <div v-if="isApprovedGaugeMeasurement(data.kind.toUpperCase())"> + <div + @click="showAGMDetails = !showAGMDetails" + class="mt-auto mb-auto text-info text-left" + > + <font-awesome-icon + v-if="showAGMDetails" + icon="angle-up" + fixed-width + ></font-awesome-icon> + <font-awesome-icon + v-if="!showAGMDetails" + icon="angle-down" + fixed-width + ></font-awesome-icon> + </div> + </div> <div v-else class="empty"></div> </div> </div> @@ -104,23 +132,23 @@ bottleneck.properties.objnam }}</a> <div - @click="showFull = !showFull" + @click="showBottleneckDetails = !showBottleneckDetails" class="small mt-auto mb-auto text-info text-left" > <font-awesome-icon - v-if="showFull" + v-if="showBottleneckDetails" icon="angle-up" fixed-width ></font-awesome-icon> <font-awesome-icon - v-if="!showFull" + v-if="!showBottleneckDetails" icon="angle-down" fixed-width ></font-awesome-icon> </div> </div> - <div class="d-flex flex-row" v-if="showFull"> + <div class="d-flex flex-row" v-if="showBottleneckDetails"> <table> <tr v-for="(info, index) in Object.keys(bottleneck.properties)" @@ -137,6 +165,43 @@ </div> </div> </div> + <div v-if="showAGMDetails"> + <div class="pl-3 d-flex flex-row"> + <span class="condensed header agmcode text-left" + ><translate>ISRS Code</translate></span + > + <span class="condensed header agmdetail text-left" + ><translate>Date of measurement</translate></span + > + </div> + <div v-for="(result, index) in data.summary" :key="index"> + <div class="pl-3 d-flex flex-row"> + <span class="condensed agmcode text-left">{{ + result["fk-gauge-id"] + }}</span> + <span class="condensed agmdetail text-left">{{ + formatSurveyDate(result["measure-date"]) + }}</span> + </div> + <div class="pl-3 d-flex flex-row"> + <div> + <div + class="d-flex flex-row condensed pl-3 text-left" + v-for="(entry, index) in Object.keys(result.versions[0])" + :key="index" + > + <div class="agmdetailskeys">{{ entry }}</div> + <div class="agmdetailsvalues"> + {{ result.versions[0][entry] }} + </div> + <div v-if="result.versions.length == 2" class="agmdetailsvalues"> + {{ result.versions[1][entry] }} + </div> + </div> + </div> + </div> + </div> + </div> </div> </template> @@ -169,7 +234,8 @@ props: ["data"], data() { return { - showFull: false, + showAGMDetails: false, + showBottleneckDetails: false, show: false, loading: false, bottlenecks: [] @@ -281,6 +347,9 @@ isFairwayDimension(kind) { return kind === "FD"; }, + isApprovedGaugeMeasurement(kind) { + return kind === "AGM"; + }, isBottleneck(kind) { return kind === "BN"; }, @@ -377,4 +446,20 @@ .controls { width: 60px; } + +.agmcode { + width: 200px; +} + +.agmdate { + width: 100px; +} + +.agmdetailskeys { + width: 130px; +} + +.agmdetailsvalues { + width: 200px; +} </style>