Mercurial > gemma

comparison client/src/components/systemconfiguration/MorphologyClassbreaks.vue @ 3606:a8190a570b71

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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>&lt;</option>
16 <option>&le;</option>
17 <option>&gt;</option>
18 <option>&ge;</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>&lt;</option>
57 <option>&le;</option>
58 <option>&gt;</option>
59 <option>&ge;</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>