Mercurial > gemma
changeset 3309:80037790032d
client: fully implemented sections
- added map layer with new style
- implemented in identify tool, map popup and fairway availability dialog
- added sidebar menu item
| author | Markus Kottlaender <markus@intevation.de> |
|---|---|
| date | Fri, 17 May 2019 12:45:13 +0200 |
| parents | 1128b29aed8b |
| children | e0dabe7b2fcf |
| files | client/src/components/Sidebar.vue client/src/components/fairway/AvailableFairwayDepthDialogue.vue client/src/components/identify/formatter.js client/src/components/layers/Layers.vue client/src/components/map/Map.vue client/src/components/map/MapPopup.vue client/src/components/map/layers.js client/src/components/map/styles.js client/src/store/map.js |
| diffstat | 9 files changed, 150 insertions(+), 27 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/Sidebar.vue Fri May 17 11:31:30 2019 +0200 +++ b/client/src/components/Sidebar.vue Fri May 17 12:45:13 2019 +0200 @@ -12,21 +12,17 @@ </div> <div class="menu text-nowrap text-left"> <router-link to="/"> - <font-awesome-icon - class="fa-fw mr-2" - fixed-width - icon="map-marked-alt" - /> + <font-awesome-icon class="mr-2" fixed-width icon="map-marked-alt" /> <span class="fix-trans-space" v-translate>Map</span> </router-link> <router-link to="/bottlenecks"> - <font-awesome-icon class="fa-fw mr-2" fixed-width icon="ship" /> + <font-awesome-icon class="mr-2" fixed-width icon="ship" /> <span class="fix-trans-space" v-translate>Bottlenecks</span> </router-link> <div v-if="isWaterwayAdmin"> <router-link to="/imports/overview" class="position-relative"> <font-awesome-icon - class="fa-fw mr-2" + class="mr-2" fixed-width icon="clipboard-check" /> @@ -38,13 +34,19 @@ </div> <div v-if="isSysAdmin"> <router-link to="/stretches"> - <font-awesome-icon class="fa-fw mr-2" fixed-width icon="road" /> + <font-awesome-icon class="mr-2" fixed-width icon="road" /> <span class="fix-trans-space" v-translate>Define stretches</span> </router-link> </div> <div v-if="isWaterwayAdmin"> + <router-link to="/sections"> + <font-awesome-icon class="mr-2" fixed-width icon="road" /> + <span class="fix-trans-space" v-translate>Define sections</span> + </router-link> + </div> + <div v-if="isWaterwayAdmin"> <router-link to="/imports/configuration"> - <font-awesome-icon class="fa-fw mr-2" fixed-width icon="clock" /> + <font-awesome-icon class="mr-2" fixed-width icon="clock" /> <translate class="fix-trans-space">Imports</translate> </router-link> <small class="text-muted pl-3"> @@ -54,29 +56,25 @@ </div> <div v-if="isSysAdmin"> <router-link to="/usermanagement"> - <font-awesome-icon - class="fa-fw mr-2" - fixed-width - icon="users-cog" - /> + <font-awesome-icon class="mr-2" fixed-width icon="users-cog" /> <span class="fix-trans-space" v-translate>Users</span> </router-link> </div> <div v-if="isWaterwayAdmin"> <router-link to="/systemconfiguration"> - <font-awesome-icon class="fa-fw mr-2" fixed-width icon="wrench" /> + <font-awesome-icon class="mr-2" fixed-width icon="wrench" /> <span class="fix-trans-space" v-translate>Configuration</span> </router-link> </div> <div v-if="isSysAdmin"> <router-link to="/logs"> - <font-awesome-icon class="fa-fw mr-2" fixed-width icon="book" /> + <font-awesome-icon class="mr-2" fixed-width icon="book" /> <span class="fix-trans-space" v-translate>Logs</span> </router-link> </div> <hr class="m-0" /> <a @click="logoff" href="#" class="logout"> - <font-awesome-icon class="fa-fw mr-2" fixed-width icon="power-off" /> + <font-awesome-icon class="mr-2" fixed-width icon="power-off" /> <span class="fix-trans-space" v-translate>Logout</span> {{ user }} </a> </div>
--- a/client/src/components/fairway/AvailableFairwayDepthDialogue.vue Fri May 17 11:31:30 2019 +0200 +++ b/client/src/components/fairway/AvailableFairwayDepthDialogue.vue Fri May 17 12:45:13 2019 +0200 @@ -253,6 +253,11 @@ .getLayer("STRETCHES") .setVisible(true); } + if (this.type === this.$options.SECTIONS) { + this.openLayersMap() + .getLayer("SECTIONS") + .setVisible(true); + } if (this.selectedFairwayAvailabilityFeature) { this.$store.dispatch("map/moveToFeauture", { feature: this.selectedFairwayAvailabilityFeature, @@ -276,6 +281,13 @@ "fairwayavailability/setSelectedFairwayAvailability", stretch ); + }, + setSelectedSection() { + const section = this.sections.find(x => x.id === this.selectedSectionId); + this.$store.commit( + "fairwayavailability/setSelectedFairwayAvailability", + section + ); } }, computed: { @@ -291,7 +303,12 @@ "frequency", "LOS" ]), - ...mapState("imports", ["stretches", "selectedStretchId"]), + ...mapState("imports", [ + "stretches", + "sections", + "selectedStretchId", + "selectedSectionId" + ]), ...mapState("bottlenecks", ["bottlenecksList", "selectedBottleneck"]), ...mapGetters("map", ["openLayersMap"]), ...mapGetters("bottlenecks", ["orderedBottlenecks"]), @@ -358,6 +375,7 @@ entries() { if (this.type === this.$options.BOTTLENECKS) return this.bottlenecksList; if (this.type === this.$options.STRETCHES) return this.stretches; + if (this.type === this.$options.SECTIONS) return this.sections; return []; }, label() { @@ -383,26 +401,37 @@ this.type === this.$options.STRETCHES && this.selectedStretchId ) { + this.openLayersMap() + .getLayer("STRETCHES") + .setVisible(true); this.setSelectedStretch(); + } else if ( + this.type === this.$options.SECTIONS && + this.selectedSectionId + ) { + this.openLayersMap() + .getLayer("SECTIONS") + .setVisible(true); + this.setSelectedSection(); } else { this.$store.commit( "fairwayavailability/setSelectedFairwayAvailability", null ); } - this.openLayersMap() - .getLayer("STRETCHES") - .setVisible(true); }, showFairwayDepth() { if (this.showFairwayDepth) { this.loading = true; - this.$store.dispatch("bottlenecks/loadBottlenecksList").then(() => { - this.$store.dispatch("imports/loadStretches").then(() => { - this.loading = false; + Promise.all([ + this.$store.dispatch("bottlenecks/loadBottlenecksList"), + this.$store.dispatch("imports/loadStretches"), + this.$store.dispatch("imports/loadSections") + ]) + .then(() => { if (this.selectedBottleneck) this.setSelectedBottleneck(); - }); - }); + }) + .finally(() => (this.loading = false)); } } },
--- a/client/src/components/identify/formatter.js Fri May 17 11:31:30 2019 +0200 +++ b/client/src/components/identify/formatter.js Fri May 17 12:45:13 2019 +0200 @@ -50,6 +50,9 @@ stretches_geoserver: { label: "Stretch" }, + sections_geoserver: { + label: "Section" + }, gauges_geoserver: { label: "Gauge" }
--- a/client/src/components/layers/Layers.vue Fri May 17 11:31:30 2019 +0200 +++ b/client/src/components/layers/Layers.vue Fri May 17 12:45:13 2019 +0200 @@ -22,6 +22,7 @@ <Layerselect layerId="INLANDECDIS" /> <Layerselect layerId="WATERWAYAREA" /> <Layerselect layerId="STRETCHES" /> + <Layerselect layerId="SECTIONS" /> <Layerselect layerId="FAIRWAYDIMENSIONSLOS3" /> <Layerselect layerId="FAIRWAYDIMENSIONSLOS2" /> <Layerselect layerId="FAIRWAYDIMENSIONSLOS1" />
--- a/client/src/components/map/Map.vue Fri May 17 11:31:30 2019 +0200 +++ b/client/src/components/map/Map.vue Fri May 17 12:45:13 2019 +0200 @@ -61,7 +61,7 @@ ...mapState("bottlenecks", ["selectedSurvey"]), ...mapState("fairwayprofile", ["additionalSurvey"]), ...mapState("application", ["paneSetup", "paneRotate"]), - ...mapState("imports", ["selectedStretchId"]), + ...mapState("imports", ["selectedStretchId", "selectedSectionId"]), layers() { return layers(); }, @@ -129,6 +129,18 @@ f.set("highlighted", true); } }); + }, + selectedSectionId(id) { + this.layers + .get("SECTIONS") + .getSource() + .getFeatures() + .forEach(f => { + f.set("highlighted", false); + if (id === f.getId()) { + f.set("highlighted", true); + } + }); } }, methods: {
--- a/client/src/components/map/MapPopup.vue Fri May 17 11:31:30 2019 +0200 +++ b/client/src/components/map/MapPopup.vue Fri May 17 12:45:13 2019 +0200 @@ -81,6 +81,7 @@ <button class="btn btn-xs btn-info" v-tooltip="fairwayAvailabilityLabel" + @click="openFairwayAvailabilityForSection(section)" > <font-awesome-icon icon="chart-line" fixed-width /> </button> @@ -229,6 +230,15 @@ zoom: 17 }); this.openFairwayAvailability(); + }, + openFairwayAvailabilityForSection(section) { + this.$store.commit("fairwayavailability/type", "sections"); + this.$store.commit("imports/selectedSectionId", section.getId()); + this.$store.dispatch("map/moveToFeauture", { + feature: section, + zoom: 17 + }); + this.openFairwayAvailability(); } }, mounted() {
--- a/client/src/components/map/layers.js Fri May 17 11:31:30 2019 +0200 +++ b/client/src/components/map/layers.js Fri May 17 12:45:13 2019 +0200 @@ -232,6 +232,32 @@ }); })(), (function() { + const source = new VectorSource({ strategy: bboxStrategy }); + source.setLoader( + buildVectorLoader( + { + featureTypes: ["sections_geoserver"], + geometryName: "area" + }, + source, + true, + (f, store) => { + if (f.getId() === store.state.imports.selectedSectionId) { + f.set("highlighted", true); + } + return f; + } + ) + ); + return new VectorLayer({ + id: "SECTIONS", + label: "Sections", + visible: false, + style: styles.sections, + source + }); + })(), + (function() { const source = new VectorSource(); source.setLoader( buildVectorLoader(
--- a/client/src/components/map/styles.js Fri May 17 11:31:30 2019 +0200 +++ b/client/src/components/map/styles.js Fri May 17 12:45:13 2019 +0200 @@ -61,6 +61,24 @@ color: "rgba(250, 240, 0, .7)" }) }), + orange1: new Style({ + stroke: new Stroke({ + color: "rgba(232, 177, 12, .8)", + width: 2 + }), + fill: new Fill({ + color: "rgba(232, 177, 0, .3)" + }) + }), + orange2: new Style({ + stroke: new Stroke({ + color: "rgba(255, 166, 10, .9)", + width: 5 + }), + fill: new Fill({ + color: "rgba(255, 166, 0, .7)" + }) + }), red1: new Style({ stroke: new Stroke({ color: "rgba(255, 0, 0, 1)", @@ -117,6 +135,13 @@ } return style; }, + sections(feature) { + let style = styles.orange1; + if (feature.get("highlighted")) { + style = styles.orange2; + } + return style; + }, fwd1() { return [styles.blue1, styles.textFW1]; },
--- a/client/src/store/map.js Fri May 17 11:31:30 2019 +0200 +++ b/client/src/store/map.js Fri May 17 12:45:13 2019 +0200 @@ -383,6 +383,25 @@ dispatch("moveToFeauture", { feature: stretches[0], zoom: 17 }); } } + if ( + sections.length === 1 && + !stretches.length && + !bottlenecks.length && + !gauges.length + ) { + if (rootState.imports.selectedSectionId === sections[0].getId()) { + commit("imports/selectedSectionId", null, { + root: true + }); + } else { + commit("application/showFairwayDepth", true, { root: true }); + commit("fairwayavailability/type", "sections", { root: true }); + commit("imports/selectedSectionId", sections[0].getId(), { + root: true + }); + dispatch("moveToFeauture", { feature: sections[0], zoom: 17 }); + } + } } // DEBUG output and example how to remove the GeometryName