Mercurial > gemma

comparison client/src/components/systemconfiguration/MorphologyClassbreaks.vue @ 3625:a688a478e35f configuration

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
implemented configuration backend and frontend
author Markus Kottlaender <markus@intevation.de>
date Fri, 07 Jun 2019 12:53:41 +0200
parents 30a9fdac70f0
children a1bb7c894058
comparison
equal deleted inserted replaced
3624:3012d0b3badc 3625:a688a478e35f
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 config.morphology_classbreaks" 11 v-for="(value, i) in morphologyClassbreaks"
12 :key="i" 12 :key="i"
13 > 13 >
14 <input 14 <input
15 v-model="config.morphology_classbreaks[i]" 15 v-model="morphologyClassbreaks[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="config.morphology_classbreaks.splice(i, 1)" 25 @click="morphologyClassbreaks.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 config.morphology_classbreaks.push( 34 morphologyClassbreaks.push(
35 config.morphology_classbreaks.length 35 morphologyClassbreaks.length
36 ? config.morphology_classbreaks[ 36 ? morphologyClassbreaks[morphologyClassbreaks.length - 1]
37 config.morphology_classbreaks.length - 1
38 ]
39 : 1 37 : 1
40 ) 38 )
41 " 39 "
42 > 40 >
43 <font-awesome-icon icon="plus" /> 41 <font-awesome-icon icon="plus" />
49 <translate>Sounding Result Comparison</translate> 47 <translate>Sounding Result Comparison</translate>
50 </h6> 48 </h6>
51 <div class="d-flex flex-wrap"> 49 <div class="d-flex flex-wrap">
52 <div 50 <div
53 class="input-group mb-3 mr-2 classbreak" 51 class="input-group mb-3 mr-2 classbreak"
54 v-for="(value, i) in config.morphology_classbreaks_compare" 52 v-for="(value, i) in morphologyClassbreaksCompare"
55 :key="i" 53 :key="i"
56 > 54 >
57 <input 55 <input
58 v-model="config.morphology_classbreaks_compare[i]" 56 v-model="morphologyClassbreaksCompare[i]"
59 type="number" 57 type="number"
60 step="0.1" 58 step="0.1"
61 class="form-control form-control-sm" 59 class="form-control form-control-sm"
62 /> 60 />
63 <div class="input-group-append"> 61 <div class="input-group-append">
64 <button 62 <button
65 class="btn btn-sm btn-outline-secondary" 63 class="btn btn-sm btn-outline-secondary"
66 type="button" 64 type="button"
67 @click="config.morphology_classbreaks_compare.splice(i, 1)" 65 @click="morphologyClassbreaksCompare.splice(i, 1)"
68 > 66 >
69 <font-awesome-icon icon="times" /> 67 <font-awesome-icon icon="times" />
70 </button> 68 </button>
71 </div> 69 </div>
72 </div> 70 </div>
73 <button 71 <button
74 class="btn btn-sm btn-success mb-3" 72 class="btn btn-sm btn-success mb-3"
75 @click=" 73 @click="
76 config.morphology_classbreaks_compare.push( 74 morphologyClassbreaksCompare.push(
77 config.morphology_classbreaks_compare.length 75 morphologyClassbreaksCompare.length
78 ? config.morphology_classbreaks_compare[ 76 ? morphologyClassbreaksCompare[
79 config.morphology_classbreaks_compare.length - 1 77 morphologyClassbreaksCompare.length - 1
80 ] 78 ]
81 : 1 79 : 1
82 ) 80 )
83 " 81 "
84 > 82 >
120 * Markus Kottländer <markus@intevation.de> 118 * Markus Kottländer <markus@intevation.de>
121 */ 119 */
122 import { mapState } from "vuex"; 120 import { mapState } from "vuex";
123 121
124 export default { 122 export default {
123 data() {
124 return {
125 morphologyClassbreaks: [],
126 morphologyClassbreaksCompare: []
127 };
128 },
125 computed: { 129 computed: {
126 ...mapState("application", ["config"]) 130 ...mapState("application", ["config"])
127 }, 131 },
128 methods: { 132 methods: {
129 submit() { 133 submit() {
130 this.$store.commit("application/config", this.config); 134 this.$store.dispatch("application/saveConfig", {
135 morphology_classbreaks: this.morphologyClassbreaks.join(","),
136 morphology_classbreaks_compare: this.morphologyClassbreaksCompare.join(
137 ","
138 )
139 });
131 } 140 }
141 },
142 mounted() {
143 this.morphologyClassbreaks = this.config.morphology_classbreaks
144 .split(",")
145 .map(n => Number(n));
146 this.morphologyClassbreaksCompare = this.config.morphology_classbreaks_compare
147 .split(",")
148 .map(n => Number(n));
132 } 149 }
133 }; 150 };
134 </script> 151 </script>