Mercurial > gemma
comparison client/src/components/systemconfiguration/MorphologyClassbreaks.vue @ 3606:a8190a570b71
client: configuration: prepared morphology classbreaks UI
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Wed, 05 Jun 2019 12:02:23 +0200 |
parents | |
children | 81473293cd9a |
comparison
equal
deleted
inserted
replaced
3605:d02d4e31491b | 3606:a8190a570b71 |
---|---|
1 <template> | |
2 <div class="d-flex flex-column pb-4 border-bottom"> | |
3 <h5 class="py-2 px-3 mb-2 m-0"> | |
4 <translate>Bottleneck Morphology Classbreaks</translate> | |
5 </h5> | |
6 <div class="px-3"> | |
7 <h6 class="font-weight-bold"><translate>Sounding Result</translate></h6> | |
8 <div class="d-flex flex-wrap"> | |
9 <div | |
10 class="input-group mb-3 mr-2 classbreak" | |
11 v-for="(value, i) in classbreaks" | |
12 :key="i" | |
13 > | |
14 <select class="form-control form-control-sm"> | |
15 <option><</option> | |
16 <option>≤</option> | |
17 <option>></option> | |
18 <option>≥</option> | |
19 </select> | |
20 <input | |
21 v-model="classbreaks[i]" | |
22 type="number" | |
23 min="0" | |
24 step="0.1" | |
25 class="form-control form-control-sm" | |
26 /> | |
27 <div class="input-group-append"> | |
28 <button | |
29 class="btn btn-sm btn-danger" | |
30 type="button" | |
31 @click="classbreaks.splice(i, 1)" | |
32 > | |
33 <font-awesome-icon icon="trash" /> | |
34 </button> | |
35 </div> | |
36 </div> | |
37 <button | |
38 class="btn btn-sm btn-success mb-3" | |
39 @click="classbreaks.unshift(classbreaks.length ? classbreaks[0] : 1)" | |
40 > | |
41 <font-awesome-icon icon="plus" /> | |
42 </button> | |
43 </div> | |
44 </div> | |
45 <div class="px-3"> | |
46 <h6 class="font-weight-bold"> | |
47 <translate>Sounding Result Comparison</translate> | |
48 </h6> | |
49 <div class="d-flex flex-wrap"> | |
50 <div | |
51 class="input-group mb-3 mr-2 classbreak" | |
52 v-for="(value, i) in compareClassbreaks" | |
53 :key="i" | |
54 > | |
55 <select class="form-control form-control-sm"> | |
56 <option><</option> | |
57 <option>≤</option> | |
58 <option>></option> | |
59 <option>≥</option> | |
60 </select> | |
61 <input | |
62 v-model="compareClassbreaks[i]" | |
63 type="number" | |
64 step="0.1" | |
65 class="form-control form-control-sm" | |
66 /> | |
67 <div class="input-group-append"> | |
68 <button | |
69 class="btn btn-sm btn-danger" | |
70 type="button" | |
71 @click="classbreaks.splice(i, 1)" | |
72 > | |
73 <font-awesome-icon icon="trash" /> | |
74 </button> | |
75 </div> | |
76 </div> | |
77 <button | |
78 class="btn btn-sm btn-success mb-3" | |
79 @click=" | |
80 compareClassbreaks.unshift( | |
81 compareClassbreaks.length ? compareClassbreaks[0] : 1 | |
82 ) | |
83 " | |
84 > | |
85 <font-awesome-icon icon="plus" /> | |
86 </button> | |
87 </div> | |
88 </div> | |
89 <div class="mt-4 px-3"> | |
90 <a @click.prevent="submit" class="btn btn-info btn-sm text-white"> | |
91 <translate>Send</translate> | |
92 </a> | |
93 </div> | |
94 </div> | |
95 </template> | |
96 | |
97 <style lang="sass" scoped> | |
98 .classbreak | |
99 width: 130px | |
100 input | |
101 width: 30px | |
102 </style> | |
103 | |
104 <script> | |
105 /* This is Free Software under GNU Affero General Public License v >= 3.0 | |
106 * without warranty, see README.md and license for details. | |
107 * | |
108 * SPDX-License-Identifier: AGPL-3.0-or-later | |
109 * License-Filename: LICENSES/AGPL-3.0.txt | |
110 * | |
111 * Copyright (C) 2018 by via donau | |
112 * – Österreichische Wasserstraßen-Gesellschaft mbH | |
113 * Software engineering by Intevation GmbH | |
114 * | |
115 * Author(s): | |
116 * Markus Kottländer <markus@intevation.de> | |
117 */ | |
118 | |
119 export default { | |
120 data() { | |
121 return { | |
122 classbreaks: [], | |
123 compareClassbreaks: [] | |
124 }; | |
125 }, | |
126 methods: { | |
127 submit() {} | |
128 } | |
129 }; | |
130 </script> |