Mercurial > gemma

comparison client/src/components/Statistics.vue @ 3172:975efa874acf

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
statistic: choice between bottlenecks and stretches implemented
author Thomas Junk <thomas.junk@intevation.de>
date Mon, 06 May 2019 16:54:46 +0200
parents 4f4905b57fcf
children 1287b031424c
comparison
equal deleted inserted replaced
3171:c8ded555c2a8 3172:975efa874acf
7 > 7 >
8 <div style="width: 18rem"> 8 <div style="width: 18rem">
9 <UIBoxHeader icon="chart-line" :title="label" :closeCallback="close" /> 9 <UIBoxHeader icon="chart-line" :title="label" :closeCallback="close" />
10 <div class="box-body"> 10 <div class="box-body">
11 <UISpinnerOverlay v-if="loading" /> 11 <UISpinnerOverlay v-if="loading" />
12 <div class="mb-3 d-flex flex-row justify-content-between">
13 <div>
14 <input :value="$options.BOTTLENECKS" type="radio" v-model="type" />
15 <small class="ml-1 text-muted">
16 <translate>Bottlenecks</translate>
17 </small>
18 </div>
19 <div>
20 <input :value="$options.STRETCHES" type="radio" v-model="type" />
21 <small class="ml-1 text-muted">
22 <translate>Stretches</translate>
23 </small>
24 </div>
25 <div>
26 <input :value="$options.SECTIONS" type="radio" v-model="type" />
27 <small class="ml-1 text-muted">
28 <translate>Sections</translate>
29 </small>
30 </div>
31 </div>
12 <div class="d-flex flex-column"> 32 <div class="d-flex flex-column">
13 <select class="form-control font-weight-bold" v-model="type"> 33 <select
14 <option :value="null">{{ $options.TYPES.EMPTY }}</option> 34 @change="entrySelected"
15 <option>{{ $options.TYPES.AVAILABLEFAIRWAYDEPTH }}</option> 35 class="form-control font-weight-bold"
36 v-model="selectedEntry"
37 >
38 <option :value="null">{{ empty }}</option>
39 <option
40 v-for="(entry, index) in entries"
41 :value="index"
42 :key="index"
43 >{{ entry.properties.name }}</option
44 >
16 </select> 45 </select>
46 </div>
47 <div class="mt-3">
48 <button :disabled="selectedEntry == null" class="btn btn-info w-100">
49 <translate>Available Fairway Depth</translate>
50 </button>
17 </div> 51 </div>
18 </div> 52 </div>
19 </div> 53 </div>
20 </div> 54 </div>
21 </template> 55 </template>
35 * Markus Kottländer <markus.kottlaender@intevation.de> 69 * Markus Kottländer <markus.kottlaender@intevation.de>
36 * Thomas Junk <thomas.junk@intevation.de> 70 * Thomas Junk <thomas.junk@intevation.de>
37 */ 71 */
38 72
39 import app from "@/main"; 73 import app from "@/main";
40 import { mapState } from "vuex"; 74 import { mapState, mapGetters } from "vuex";
41 75
42 export default { 76 export default {
43 data() { 77 data() {
44 return { 78 return {
45 type: null, 79 type: this.$options.BOTTLENECKS,
80 selectedEntry: null,
46 loading: false 81 loading: false
47 }; 82 };
48 }, 83 },
49 methods: { 84 methods: {
50 close() { 85 close() {
51 this.$store.commit("application/showStatistics", false); 86 this.$store.commit("application/showStatistics", false);
87 },
88 entrySelected() {
89 let feature = null;
90 if (this.type === this.$options.BOTTLENECKS) {
91 feature = this.bottlenecksList[this.selectedEntry];
92 this.openLayersMap()
93 .getLayer("BOTTLENECKS")
94 .setVisible(true);
95 }
96 if (this.type === this.$options.STRETCHES) {
97 feature = this.stretches[this.selectedEntry];
98 this.openLayersMap()
99 .getLayer("STRETCHES")
100 .setVisible(true);
101 }
102 if (feature) {
103 this.$store.dispatch("map/moveToFeauture", {
104 feature: feature,
105 zoom: 17,
106 preventZoomOut: true
107 });
108 }
52 } 109 }
53 }, 110 },
54 computed: { 111 computed: {
55 ...mapState("application", ["showStatistics", "paneSetup"]), 112 ...mapState("application", ["showStatistics", "paneSetup"]),
113 ...mapState("imports", ["stretches"]),
114 ...mapState("bottlenecks", ["bottlenecksList"]),
115 ...mapGetters("map", ["openLayersMap"]),
116 entries() {
117 if (this.type === this.$options.BOTTLENECKS) return this.bottlenecksList;
118 if (this.type === this.$options.STRETCHES) return this.stretches;
119 return [];
120 },
56 label() { 121 label() {
57 return this.$gettext("Statistics"); 122 return this.$gettext("Statistics");
123 },
124 empty() {
125 if (this.type === this.$options.BOTTLENECKS)
126 return this.$gettext("Please choose a bottleneck");
127 if (this.type === this.$options.STRETCHES)
128 return this.$gettext("Please choose a strectch");
129 return this.$gettext("Please choose a section");
58 } 130 }
59 }, 131 },
60 TYPES: { 132 watch: {
61 AVAILABLEFAIRWAYDEPTH: app.$gettext("Available Fairway Depth"), 133 type() {
62 EMPTY: app.$gettext("Please choose statistic") 134 this.selectedEntry = null;
63 } 135 this.openLayersMap()
136 .getLayer("STRETCHES")
137 .setVisible(true);
138 },
139 showStatistics() {
140 if (this.showStatistics) {
141 this.loading = true;
142 this.$store.dispatch("bottlenecks/loadBottlenecksList").then(() => {
143 this.$store.dispatch("imports/loadStretches").then(() => {
144 this.loading = false;
145 });
146 });
147 }
148 }
149 },
150 BOTTLENECKS: "bottlenecks",
151 SECTIONS: "sections",
152 STRETCHES: "stretches",
153 AVAILABLEFAIRWAYDEPTH: app.$gettext("Available Fairway Depth")
64 }; 154 };
65 </script> 155 </script>
66 156
67 <style></style> 157 <style></style>