Mercurial > gemma

comparison client/src/components/Statistics.vue @ 3191:c0cd5dfec153

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
statistics: persist fields to vuex
author Thomas Junk <thomas.junk@intevation.de>
date Wed, 08 May 2019 11:25:11 +0200
parents 505414dfe3e7
children b0328646e34f
comparison
equal deleted inserted replaced
3190:54a3e40cfbed 3191:c0cd5dfec153
47 <div class="d-flex flex-column mt-3"> 47 <div class="d-flex flex-column mt-3">
48 <div class="d-flex flex-column mb-3"> 48 <div class="d-flex flex-column mb-3">
49 <small class="my-auto text-muted" 49 <small class="my-auto text-muted"
50 ><translate>Type</translate></small 50 ><translate>Type</translate></small
51 > 51 >
52 <select class="form-control"> 52 <select v-model="selectedFrequency" class="form-control">
53 <option>Monthly</option> 53 <option
54 <option>Quaterly</option> 54 v-for="(option, index) in $options.FREQUENCIES"
55 <option>Yearly</option> 55 :value="option"
56 :key="index"
57 ><translate>{{ option }}</translate></option
58 >
56 </select> 59 </select>
57 </div> 60 </div>
58 <div class="d-flex flex-column mb-3"> 61 <div class="d-flex flex-column mb-3">
59 <small for="from" class="my-auto text-muted" 62 <small for="from" class="my-auto text-muted"
60 ><translate>Date from</translate></small 63 ><translate>Date from</translate></small
61 ><input id="from" class="form-control" type="date" /> 64 ><input
65 id="from"
66 v-model="fromDate"
67 class="form-control"
68 type="date"
69 />
62 </div> 70 </div>
63 <div class="d-flex flex-column"> 71 <div class="d-flex flex-column">
64 <small for="to" class="my-auto text-muted" 72 <small for="to" class="my-auto text-muted"
65 ><translate>Date to</translate></small 73 ><translate>Date to</translate></small
66 ><input id="to" class="form-control" type="date" /> 74 ><input id="to" v-model="toDate" class="form-control" type="date" />
67 </div> 75 </div>
68 </div> 76 </div>
69 <div class="mt-3"> 77 <div class="mt-3">
70 <button 78 <button
71 @click="openFairwaydepth" 79 @click="openFairwaydepth"
72 :disabled="selectedEntry == null" 80 :disabled="isComplete"
73 class="btn btn-info btn-sm w-100" 81 class="btn btn-info btn-sm w-100"
74 > 82 >
75 <translate>Available Fairway Depth</translate> 83 <translate>Available Fairway Depth</translate>
76 </button> 84 </button>
77 </div> 85 </div>
95 * Markus Kottländer <markus.kottlaender@intevation.de> 103 * Markus Kottländer <markus.kottlaender@intevation.de>
96 * Thomas Junk <thomas.junk@intevation.de> 104 * Thomas Junk <thomas.junk@intevation.de>
97 */ 105 */
98 106
99 import app from "@/main"; 107 import app from "@/main";
108 import { displayError } from "@/lib/errors";
100 import { mapState, mapGetters } from "vuex"; 109 import { mapState, mapGetters } from "vuex";
101 110
102 export default { 111 export default {
103 data() { 112 data() {
104 return { 113 return {
106 loading: false 115 loading: false
107 }; 116 };
108 }, 117 },
109 methods: { 118 methods: {
110 openFairwaydepth() { 119 openFairwaydepth() {
111 this.$store.commit("application/paneSetup", "AVAILABLEFAIRWAYDEPTH"); 120 this.loading = true;
121 this.$store
122 .dispatch("diagram/loadAvailableFairwayDepth", {
123 feature: this.selectedFairwayAvailabilityFeature,
124 from: this.from,
125 to: this.to,
126 frequency: this.frequency
127 })
128 .then(() => {
129 this.loading = false;
130 this.$store.commit("application/paneSetup", "AVAILABLEFAIRWAYDEPTH");
131 })
132 .catch(error => {
133 console.log(error);
134 const { status, data } = error.response;
135 displayError({
136 title: this.$gettext("Backend Error"),
137 message: `${status}: ${data.message || data}`
138 });
139 });
112 }, 140 },
113 close() { 141 close() {
114 this.$store.commit("application/showStatistics", false); 142 this.$store.commit("application/showStatistics", false);
115 }, 143 },
116 entrySelected() { 144 entrySelected() {
145 this.$store.commit("diagram/setSelectedFairwayAvailability", bn); 173 this.$store.commit("diagram/setSelectedFairwayAvailability", bn);
146 } 174 }
147 }, 175 },
148 computed: { 176 computed: {
149 ...mapState("application", ["showStatistics", "paneSetup", "showProfiles"]), 177 ...mapState("application", ["showStatistics", "paneSetup", "showProfiles"]),
150 ...mapState("diagram", ["selectedFairwayAvailabilityFeature"]), 178 ...mapState("diagram", [
179 "selectedFairwayAvailabilityFeature",
180 "from",
181 "to",
182 "frequency"
183 ]),
151 ...mapState("imports", ["stretches"]), 184 ...mapState("imports", ["stretches"]),
152 ...mapState("bottlenecks", ["bottlenecksList", "selectedBottleneck"]), 185 ...mapState("bottlenecks", ["bottlenecksList", "selectedBottleneck"]),
153 ...mapGetters("map", ["openLayersMap"]), 186 ...mapGetters("map", ["openLayersMap"]),
187 isComplete() {
188 return (
189 this.from == null ||
190 this.to == null ||
191 this.frequency == null ||
192 this.selectedFairwayAvailabilityFeature == null
193 );
194 },
195 fromDate: {
196 get() {
197 return this.from;
198 },
199 set(value) {
200 this.$store.commit("diagram/setFrom", value);
201 }
202 },
203 toDate: {
204 get() {
205 return this.to;
206 },
207 set(value) {
208 this.$store.commit("diagram/setTo", value);
209 }
210 },
211 selectedFrequency: {
212 get() {
213 return this.frequency;
214 },
215 set(value) {
216 this.$store.commit("diagram/setFrequency", value);
217 }
218 },
154 selectedEntry: { 219 selectedEntry: {
155 get() { 220 get() {
156 return this.selectedFairwayAvailabilityFeature; 221 return this.selectedFairwayAvailabilityFeature;
157 }, 222 },
158 set(feature) { 223 set(feature) {
203 } 268 }
204 }, 269 },
205 BOTTLENECKS: "bottlenecks", 270 BOTTLENECKS: "bottlenecks",
206 SECTIONS: "sections", 271 SECTIONS: "sections",
207 STRETCHES: "stretches", 272 STRETCHES: "stretches",
208 AVAILABLEFAIRWAYDEPTH: app.$gettext("Available Fairway Depth") 273 AVAILABLEFAIRWAYDEPTH: app.$gettext("Available Fairway Depth"),
274 FREQUENCIES: {
275 MONTHLY: "monthly",
276 QUARTERLY: "quarterly",
277 YEARLY: "yearly"
278 }
209 }; 279 };
210 </script> 280 </script>
211 281
212 <style></style> 282 <style></style>