Mercurial > gemma
comparison client/src/components/systemconfiguration/MorphologyClassbreaks.vue @ 3625:a688a478e35f configuration
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> |