Mercurial > gemma
changeset 1350:58d41573e530
staging: now with real data from backend
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Mon, 26 Nov 2018 14:42:48 +0100 |
parents | 6720d683f7ca |
children | 89d013d55ec9 58113365c51d |
files | client/src/components/map/contextbox/Bottlenecks.vue client/src/components/map/contextbox/ImportSoundingresults.vue client/src/components/map/contextbox/Staging.vue client/src/store/imports.js |
diffstat | 4 files changed, 78 insertions(+), 118 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/map/contextbox/Bottlenecks.vue Mon Nov 26 12:53:15 2018 +0100 +++ b/client/src/components/map/contextbox/Bottlenecks.vue Mon Nov 26 14:42:48 2018 +0100 @@ -1,83 +1,64 @@ <template> - <div> - <h6 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center"> - <font-awesome-icon icon="ship" class="mr-2"></font-awesome-icon> - Bottlenecks - </h6> - <div class="row p-2 text-left small"> - <div class="col-5"> - <a href="#" @click="sortBy('name')" class="sort-link">Name</a> - <font-awesome-icon - :icon="sortIcon" - class="ml-1" - v-if="sortColumn === 'name'" - ></font-awesome-icon> - </div> - <div class="col-2"> - <a - href="#" - @click="sortBy('latestMeasurement')" - class="sort-link" - >Latest<br>Measurement</a> - <font-awesome-icon - :icon="sortIcon" - class="ml-1" - v-if="sortColumn === 'latestMeasurement'" - ></font-awesome-icon> - </div> - <div class="col-3"> - <a href="#" @click="sortBy('chainage')" class="sort-link">Chainage</a> - <font-awesome-icon - :icon="sortIcon" - class="ml-1" - v-if="sortColumn === 'chainage'" - ></font-awesome-icon> - </div> - <div class="col-2"></div> + <div> + <h6 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center"> + <font-awesome-icon icon="ship" class="mr-2"></font-awesome-icon>Bottlenecks + </h6> + <div class="row p-2 text-left small"> + <div class="col-5"> + <a href="#" @click="sortBy('name')" class="sort-link">Name</a> + <font-awesome-icon :icon="sortIcon" class="ml-1" v-if="sortColumn === 'name'"></font-awesome-icon> + </div> + <div class="col-2"> + <a href="#" @click="sortBy('latestMeasurement')" class="sort-link">Latest + <br>Measurement + </a> + <font-awesome-icon :icon="sortIcon" class="ml-1" v-if="sortColumn === 'latestMeasurement'"></font-awesome-icon> + </div> + <div class="col-3"> + <a href="#" @click="sortBy('chainage')" class="sort-link">Chainage</a> + <font-awesome-icon :icon="sortIcon" class="ml-1" v-if="sortColumn === 'chainage'"></font-awesome-icon> + </div> + <div class="col-2"></div> + </div> + <div class="bottleneck-list small text-left" v-if="filteredAndSortedBottlenecks().length"> + <div + v-for="bottleneck in filteredAndSortedBottlenecks()" + :key="bottleneck.properties.name" + class="border-top row mx-0 py-2" + > + <div class="col-5 text-left"> + <a + href="#" + class="d-block" + @click="moveToBottleneck(bottleneck)" + >{{ bottleneck.properties.name }}</a> </div> - <div class="bottleneck-list small text-left" v-if="filteredAndSortedBottlenecks().length"> - <div - v-for="bottleneck in filteredAndSortedBottlenecks()" - :key="bottleneck.properties.name" - class="border-top row mx-0 py-2" - > - <div class="col-5 text-left"> - <a - href="#" - class="d-block" - @click="moveToBottleneck(bottleneck)" - >{{ bottleneck.properties.name }}</a> - </div> - <div class="col-2">{{ displayCurrentSurvey(bottleneck.properties.current) }}</div> - <div - class="col-3" - >{{ displayCurrentChainage(bottleneck.properties.from, bottleneck.properties.from) }}</div> - <div class="col-2 text-right"> - <button - type="button" - class="btn btn-sm btn-outline-secondary" - @click="toggleBottleneck(bottleneck.properties.name)" - > - <font-awesome-icon icon="angle-down"></font-awesome-icon> - </button> - </div> - <div - :class="['col-12', 'surveys', {open: openBottleneck === bottleneck.properties.name}]" - > - <a - href="#" - class="d-block p-2" - v-for="(survey, index) in openBottleneckSurveys" - :key="index" - @click="selectSurvey(survey, bottleneck)" - >{{ survey.date_info }}</a> - </div> - </div> + <div class="col-2">{{ displayCurrentSurvey(bottleneck.properties.current) }}</div> + <div + class="col-3" + >{{ displayCurrentChainage(bottleneck.properties.from, bottleneck.properties.from) }}</div> + <div class="col-2 text-right"> + <button + type="button" + class="btn btn-sm btn-outline-secondary" + @click="toggleBottleneck(bottleneck.properties.name)" + > + <font-awesome-icon icon="angle-down"></font-awesome-icon> + </button> </div> - <div v-else class="small text-center py-3 border-top"> - No results. + <div :class="['col-12', 'surveys', {open: openBottleneck === bottleneck.properties.name}]"> + <a + href="#" + class="d-block p-2" + v-for="(survey, index) in openBottleneckSurveys" + :key="index" + @click="selectSurvey(survey, bottleneck)" + >{{ survey.date_info }}</a> </div> + </div> </div> + <div v-else class="small text-center py-3 border-top">No results.</div> + </div> </template> <script>
--- a/client/src/components/map/contextbox/ImportSoundingresults.vue Mon Nov 26 12:53:15 2018 +0100 +++ b/client/src/components/map/contextbox/ImportSoundingresults.vue Mon Nov 26 14:42:48 2018 +0100 @@ -80,7 +80,7 @@ * SPDX-License-Identifier: AGPL-3.0-or-later * License-Filename: LICENSES/AGPL-3.0.txt * - * Copyright (C) 2018 by via donau + * Copyright (C) 2018 by via donau * – Österreichische Wasserstraßen-Gesellschaft mbH * Software engineering by Intevation GmbH *
--- a/client/src/components/map/contextbox/Staging.vue Mon Nov 26 12:53:15 2018 +0100 +++ b/client/src/components/map/contextbox/Staging.vue Mon Nov 26 14:42:48 2018 +0100 @@ -6,10 +6,10 @@ <table class="table mb-0"> <thead> <tr> - <th>Name</th> + <th>id</th> <th>Datatype</th> <th>Importdate</th> - <th>ImportID</th> + <th>Username</th> <th> </th> <th> </th> </tr> @@ -17,11 +17,11 @@ <tbody v-if="filteredData.length"> <tr v-for="data in filteredData" :key="data.id"> <td> - <a @click="zoomTo(data.location)" href="#">{{ data.name }}</a> + <a @click="zoomTo(data.location)" href="#">{{ data.id }}</a> </td> - <td>{{ data.type }}</td> - <td>{{ data.date }}</td> - <td>{{ data.importID }}</td> + <td>{{ data.kind }}</td> + <td>{{ data.enqueued }}</td> + <td>{{ data.user }}</td> <td> <button @click="toggleApproval(data.id, $options.STATES.APPROVED)" @@ -59,7 +59,7 @@ * SPDX-License-Identifier: AGPL-3.0-or-later * License-Filename: LICENSES/AGPL-3.0.txt * - * Copyright (C) 2018 by via donau + * Copyright (C) 2018 by via donau * – Österreichische Wasserstraßen-Gesellschaft mbH * Software engineering by Intevation GmbH * @@ -88,44 +88,19 @@ ...mapState("imports", ["staging"]), filteredData() { return this.staging.filter(data => { - const nameFound = data.name - .toLowerCase() - .includes(this.searchQuery.toLowerCase()); - const dateFound = data.date - .toLowerCase() - .includes(this.searchQuery.toLowerCase()); - const locationFound = data.location.find(coord => { - return coord - .toString() - .toLowerCase() - .includes(this.searchQuery.toLowerCase()); - }); - const statusFound = data.status - .toLowerCase() - .includes(this.searchQuery.toLowerCase()); - const importIDFound = data.importID - .toLowerCase() - .includes(this.searchQuery.toLowerCase()); - const typeFound = data.type - .toLowerCase() - .includes(this.searchQuery.toLowerCase()); - - return ( - nameFound || - dateFound || - locationFound || - statusFound || - importIDFound || - typeFound + const result = [data.id + "", data.enqueued, data.kind, data.user].some( + x => x.toLowerCase().includes(this.searchQuery.toLowerCase()) ); + return result; }); } }, + STATES: STATES, methods: { confirmReview() { - const message = this.demodata + const message = this.staging .map(x => { - return x.name + ": " + x.status; + return x.id + ": " + x.status; }) .join("\n"); displayInfo({ @@ -143,6 +118,7 @@ return item.status === STATES.APPROVED; }, zoomTo(coordinates) { + if (!coordinates) return; this.$store.commit("map/moveMap", { coordinates: coordinates, zoom: 17, @@ -159,8 +135,8 @@ }; </script> -<style lang="sass" scoped> - +<style lang="sass" scoped> + .table th, td font-size: 0.9rem
--- a/client/src/store/imports.js Mon Nov 26 12:53:15 2018 +0100 +++ b/client/src/store/imports.js Mon Nov 26 14:42:48 2018 +0100 @@ -40,12 +40,15 @@ state.imports = imports; }, setStaging: (state, staging) => { - state.staging = staging; + const enriched = staging.map(x => { + return { ...x, status: STATES.NEEDSAPPROVAL }; + }); + state.staging = enriched; }, toggleApproval: (state, change) => { const { id, newStatus } = change; - const stagedResult = this.state.staging.find(e => { + const stagedResult = state.staging.find(e => { return e.id === id; }); if (stagedResult.status === newStatus) {