comparison client/src/components/systemconfiguration/MorphologyClassbreaks.vue @ 3622:30a9fdac70f0

client: configuration: prepared fetching morphology classbreaks and ecdis url from backend
author Markus Kottlaender <markus@intevation.de>
date Wed, 05 Jun 2019 16:38:26 +0200
parents 2055b689be54
children a688a478e35f
comparison
equal deleted inserted replaced
3620:7e7a2b501595 3622:30a9fdac70f0
6 <div class="px-3"> 6 <div class="px-3">
7 <h6 class="font-weight-bold"><translate>Sounding Result</translate></h6> 7 <h6 class="font-weight-bold"><translate>Sounding Result</translate></h6>
8 <div class="d-flex flex-wrap"> 8 <div class="d-flex flex-wrap">
9 <div 9 <div
10 class="input-group mb-3 mr-2 classbreak" 10 class="input-group mb-3 mr-2 classbreak"
11 v-for="(value, i) in classbreaks" 11 v-for="(value, i) in config.morphology_classbreaks"
12 :key="i" 12 :key="i"
13 > 13 >
14 <input 14 <input
15 v-model="classbreaks[i]" 15 v-model="config.morphology_classbreaks[i]"
16 type="number" 16 type="number"
17 min="0" 17 min="0"
18 step="0.1" 18 step="0.1"
19 class="form-control form-control-sm" 19 class="form-control form-control-sm"
20 /> 20 />
21 <div class="input-group-append"> 21 <div class="input-group-append">
22 <button 22 <button
23 class="btn btn-sm btn-outline-secondary" 23 class="btn btn-sm btn-outline-secondary"
24 type="button" 24 type="button"
25 @click="classbreaks.splice(i, 1)" 25 @click="config.morphology_classbreaks.splice(i, 1)"
26 > 26 >
27 <font-awesome-icon icon="times" /> 27 <font-awesome-icon icon="times" />
28 </button> 28 </button>
29 </div> 29 </div>
30 </div> 30 </div>
31 <button 31 <button
32 class="btn btn-sm btn-success mb-3" 32 class="btn btn-sm btn-success mb-3"
33 @click=" 33 @click="
34 classbreaks.push( 34 config.morphology_classbreaks.push(
35 classbreaks.length ? classbreaks[classbreaks.length - 1] : 1 35 config.morphology_classbreaks.length
36 ? config.morphology_classbreaks[
37 config.morphology_classbreaks.length - 1
38 ]
39 : 1
36 ) 40 )
37 " 41 "
38 > 42 >
39 <font-awesome-icon icon="plus" /> 43 <font-awesome-icon icon="plus" />
40 </button> 44 </button>
45 <translate>Sounding Result Comparison</translate> 49 <translate>Sounding Result Comparison</translate>
46 </h6> 50 </h6>
47 <div class="d-flex flex-wrap"> 51 <div class="d-flex flex-wrap">
48 <div 52 <div
49 class="input-group mb-3 mr-2 classbreak" 53 class="input-group mb-3 mr-2 classbreak"
50 v-for="(value, i) in compareClassbreaks" 54 v-for="(value, i) in config.morphology_classbreaks_compare"
51 :key="i" 55 :key="i"
52 > 56 >
53 <input 57 <input
54 v-model="compareClassbreaks[i]" 58 v-model="config.morphology_classbreaks_compare[i]"
55 type="number" 59 type="number"
56 step="0.1" 60 step="0.1"
57 class="form-control form-control-sm" 61 class="form-control form-control-sm"
58 /> 62 />
59 <div class="input-group-append"> 63 <div class="input-group-append">
60 <button 64 <button
61 class="btn btn-sm btn-outline-secondary" 65 class="btn btn-sm btn-outline-secondary"
62 type="button" 66 type="button"
63 @click="classbreaks.splice(i, 1)" 67 @click="config.morphology_classbreaks_compare.splice(i, 1)"
64 > 68 >
65 <font-awesome-icon icon="times" /> 69 <font-awesome-icon icon="times" />
66 </button> 70 </button>
67 </div> 71 </div>
68 </div> 72 </div>
69 <button 73 <button
70 class="btn btn-sm btn-success mb-3" 74 class="btn btn-sm btn-success mb-3"
71 @click=" 75 @click="
72 compareClassbreaks.push( 76 config.morphology_classbreaks_compare.push(
73 compareClassbreaks.length 77 config.morphology_classbreaks_compare.length
74 ? compareClassbreaks[compareClassbreaks.length - 1] 78 ? config.morphology_classbreaks_compare[
79 config.morphology_classbreaks_compare.length - 1
80 ]
75 : 1 81 : 1
76 ) 82 )
77 " 83 "
78 > 84 >
79 <font-awesome-icon icon="plus" /> 85 <font-awesome-icon icon="plus" />
111 * Software engineering by Intevation GmbH 117 * Software engineering by Intevation GmbH
112 * 118 *
113 * Author(s): 119 * Author(s):
114 * Markus Kottländer <markus@intevation.de> 120 * Markus Kottländer <markus@intevation.de>
115 */ 121 */
122 import { mapState } from "vuex";
116 123
117 export default { 124 export default {
118 data() { 125 computed: {
119 return { 126 ...mapState("application", ["config"])
120 classbreaks: [
121 1,
122 1.5,
123 1.7,
124 1.9,
125 2.1,
126 2.3,
127 2.5,
128 2.7,
129 2.9,
130 3.1,
131 3.3,
132 3.5,
133 4.0,
134 4.5,
135 5,
136 5.5,
137 6,
138 6.5,
139 7
140 ],
141 compareClassbreaks: [
142 -2,
143 -1.9,
144 -1.8,
145 -1.7,
146 -1.6,
147 -1.5,
148 -1.4,
149 -1.3,
150 -1.2,
151 -1.1,
152 -1,
153 -0.9,
154 -0.8,
155 -0.7,
156 -0.6,
157 -0.5,
158 -0.4,
159 -0.3,
160 -0.2,
161 -0.1,
162 0,
163 0.1,
164 0.2,
165 0.3,
166 0.4,
167 0.5,
168 0.6,
169 0.7,
170 0.8,
171 0.9,
172 1,
173 1.1,
174 1.2,
175 1.3,
176 1.4,
177 1.5,
178 1.6,
179 1.7,
180 1.8,
181 1.9,
182 2
183 ]
184 };
185 }, 127 },
186 methods: { 128 methods: {
187 submit() {} 129 submit() {
130 this.$store.commit("application/config", this.config);
131 }
188 } 132 }
189 }; 133 };
190 </script> 134 </script>