Mercurial > gemma
annotate client/src/components/systemconfiguration/MorphologyClassbreaks.vue @ 3861:704f853b9c37
client: configuration: reset morphology classbreaks
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Tue, 09 Jul 2019 15:29:56 +0200 |
parents | 9a7a27301720 |
children | d37f44c4d531 |
rev | line source |
---|---|
3606
a8190a570b71
client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
1 <template> |
a8190a570b71
client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
2 <div class="d-flex flex-column pb-4 border-bottom"> |
a8190a570b71
client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
3 <h5 class="py-2 px-3 mb-2 m-0"> |
a8190a570b71
client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
4 <translate>Bottleneck Morphology Classbreaks</translate> |
a8190a570b71
client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
5 </h5> |
a8190a570b71
client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
6 <div class="px-3"> |
a8190a570b71
client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
7 <h6 class="font-weight-bold"><translate>Sounding Result</translate></h6> |
a8190a570b71
client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
8 <div class="d-flex flex-wrap"> |
a8190a570b71
client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
9 <div |
a8190a570b71
client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
10 class="input-group mb-3 mr-2 classbreak" |
3625
a688a478e35f
implemented configuration backend and frontend
Markus Kottlaender <markus@intevation.de>
parents:
3622
diff
changeset
|
11 v-for="(value, i) in morphologyClassbreaks" |
3606
a8190a570b71
client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
12 :key="i" |
a8190a570b71
client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
13 > |
3763
a1bb7c894058
client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents:
3625
diff
changeset
|
14 <div class="input-group-prepend"> |
a1bb7c894058
client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents:
3625
diff
changeset
|
15 <button |
3856
0b8b62fd8cea
client: configuration: added tint icon to classbreak color selection
Markus Kottlaender <markus@intevation.de>
parents:
3855
diff
changeset
|
16 :class="[ |
0b8b62fd8cea
client: configuration: added tint icon to classbreak color selection
Markus Kottlaender <markus@intevation.de>
parents:
3855
diff
changeset
|
17 'btn btn-sm btn-outline-secondary', |
0b8b62fd8cea
client: configuration: added tint icon to classbreak color selection
Markus Kottlaender <markus@intevation.de>
parents:
3855
diff
changeset
|
18 { hasColor: morphologyClassbreaks[i][1] !== '#ffffff' } |
0b8b62fd8cea
client: configuration: added tint icon to classbreak color selection
Markus Kottlaender <markus@intevation.de>
parents:
3855
diff
changeset
|
19 ]" |
3763
a1bb7c894058
client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents:
3625
diff
changeset
|
20 :style=" |
3856
0b8b62fd8cea
client: configuration: added tint icon to classbreak color selection
Markus Kottlaender <markus@intevation.de>
parents:
3855
diff
changeset
|
21 'width: 28px; background-color: ' + |
3763
a1bb7c894058
client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents:
3625
diff
changeset
|
22 (morphologyClassbreaks[i][1] || 'transparent') |
a1bb7c894058
client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents:
3625
diff
changeset
|
23 " |
a1bb7c894058
client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents:
3625
diff
changeset
|
24 type="button" |
a1bb7c894058
client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents:
3625
diff
changeset
|
25 @click="showColorPicker('sounding-' + i)" |
3856
0b8b62fd8cea
client: configuration: added tint icon to classbreak color selection
Markus Kottlaender <markus@intevation.de>
parents:
3855
diff
changeset
|
26 > |
0b8b62fd8cea
client: configuration: added tint icon to classbreak color selection
Markus Kottlaender <markus@intevation.de>
parents:
3855
diff
changeset
|
27 <font-awesome-icon icon="tint" /> |
0b8b62fd8cea
client: configuration: added tint icon to classbreak color selection
Markus Kottlaender <markus@intevation.de>
parents:
3855
diff
changeset
|
28 </button> |
3763
a1bb7c894058
client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents:
3625
diff
changeset
|
29 <div |
a1bb7c894058
client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents:
3625
diff
changeset
|
30 class="color-picker card shadow-sm" |
a1bb7c894058
client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents:
3625
diff
changeset
|
31 v-if="activeColorPicker === 'sounding-' + i" |
a1bb7c894058
client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents:
3625
diff
changeset
|
32 > |
a1bb7c894058
client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents:
3625
diff
changeset
|
33 <UIBoxHeader |
a1bb7c894058
client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents:
3625
diff
changeset
|
34 :title="colorPickerTitle" |
a1bb7c894058
client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents:
3625
diff
changeset
|
35 icon="paint-brush" |
a1bb7c894058
client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents:
3625
diff
changeset
|
36 :actions="[ |
a1bb7c894058
client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents:
3625
diff
changeset
|
37 { |
a1bb7c894058
client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents:
3625
diff
changeset
|
38 callback: () => { |
a1bb7c894058
client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents:
3625
diff
changeset
|
39 morphologyClassbreaks[i][1] = '#ffffff'; |
a1bb7c894058
client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents:
3625
diff
changeset
|
40 activeColorPicker = null; |
a1bb7c894058
client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents:
3625
diff
changeset
|
41 }, |
a1bb7c894058
client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents:
3625
diff
changeset
|
42 icon: 'trash' |
3859
d1901366676a
client: configuration: replaced icon to close colorpicker for classbreaks
Markus Kottlaender <markus@intevation.de>
parents:
3856
diff
changeset
|
43 }, |
d1901366676a
client: configuration: replaced icon to close colorpicker for classbreaks
Markus Kottlaender <markus@intevation.de>
parents:
3856
diff
changeset
|
44 { |
d1901366676a
client: configuration: replaced icon to close colorpicker for classbreaks
Markus Kottlaender <markus@intevation.de>
parents:
3856
diff
changeset
|
45 callback: () => { |
d1901366676a
client: configuration: replaced icon to close colorpicker for classbreaks
Markus Kottlaender <markus@intevation.de>
parents:
3856
diff
changeset
|
46 activeColorPicker = null; |
d1901366676a
client: configuration: replaced icon to close colorpicker for classbreaks
Markus Kottlaender <markus@intevation.de>
parents:
3856
diff
changeset
|
47 }, |
d1901366676a
client: configuration: replaced icon to close colorpicker for classbreaks
Markus Kottlaender <markus@intevation.de>
parents:
3856
diff
changeset
|
48 icon: 'check' |
3763
a1bb7c894058
client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents:
3625
diff
changeset
|
49 } |
a1bb7c894058
client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents:
3625
diff
changeset
|
50 ]" |
a1bb7c894058
client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents:
3625
diff
changeset
|
51 /> |
a1bb7c894058
client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents:
3625
diff
changeset
|
52 <chrome-picker |
a1bb7c894058
client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents:
3625
diff
changeset
|
53 v-model="morphologyClassbreaks[i][1]" |
a1bb7c894058
client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents:
3625
diff
changeset
|
54 @input="color => (morphologyClassbreaks[i][1] = color.hex)" |
a1bb7c894058
client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents:
3625
diff
changeset
|
55 /> |
a1bb7c894058
client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents:
3625
diff
changeset
|
56 </div> |
a1bb7c894058
client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents:
3625
diff
changeset
|
57 </div> |
3606
a8190a570b71
client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
58 <input |
3763
a1bb7c894058
client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents:
3625
diff
changeset
|
59 v-model="morphologyClassbreaks[i][0]" |
3606
a8190a570b71
client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
60 type="number" |
a8190a570b71
client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
61 min="0" |
a8190a570b71
client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
62 step="0.1" |
a8190a570b71
client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
63 class="form-control form-control-sm" |
a8190a570b71
client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
64 /> |
a8190a570b71
client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
65 <div class="input-group-append"> |
a8190a570b71
client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
66 <button |
3612
c48b1e0fccd0
client: configuration: morphology: changed delete button color, to be less flashy
Markus Kottlaender <markus@intevation.de>
parents:
3611
diff
changeset
|
67 class="btn btn-sm btn-outline-secondary" |
3606
a8190a570b71
client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
68 type="button" |
3625
a688a478e35f
implemented configuration backend and frontend
Markus Kottlaender <markus@intevation.de>
parents:
3622
diff
changeset
|
69 @click="morphologyClassbreaks.splice(i, 1)" |
3606
a8190a570b71
client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
70 > |
3614
2055b689be54
client: configuration: morphology: even less flashy delete button style
Markus Kottlaender <markus@intevation.de>
parents:
3612
diff
changeset
|
71 <font-awesome-icon icon="times" /> |
3606
a8190a570b71
client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
72 </button> |
3855
4a2a778f35da
client: configuration: classbreaks: fixed databinding issue and added possibility to add classbreaks at any position
Markus Kottlaender <markus@intevation.de>
parents:
3850
diff
changeset
|
73 <button |
4a2a778f35da
client: configuration: classbreaks: fixed databinding issue and added possibility to add classbreaks at any position
Markus Kottlaender <markus@intevation.de>
parents:
3850
diff
changeset
|
74 class="btn btn-sm btn-outline-secondary" |
4a2a778f35da
client: configuration: classbreaks: fixed databinding issue and added possibility to add classbreaks at any position
Markus Kottlaender <markus@intevation.de>
parents:
3850
diff
changeset
|
75 @click="addClassbreak(morphologyClassbreaks, i)" |
4a2a778f35da
client: configuration: classbreaks: fixed databinding issue and added possibility to add classbreaks at any position
Markus Kottlaender <markus@intevation.de>
parents:
3850
diff
changeset
|
76 > |
4a2a778f35da
client: configuration: classbreaks: fixed databinding issue and added possibility to add classbreaks at any position
Markus Kottlaender <markus@intevation.de>
parents:
3850
diff
changeset
|
77 <font-awesome-icon icon="plus" /> |
4a2a778f35da
client: configuration: classbreaks: fixed databinding issue and added possibility to add classbreaks at any position
Markus Kottlaender <markus@intevation.de>
parents:
3850
diff
changeset
|
78 </button> |
3606
a8190a570b71
client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
79 </div> |
a8190a570b71
client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
80 </div> |
a8190a570b71
client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
81 <button |
3855
4a2a778f35da
client: configuration: classbreaks: fixed databinding issue and added possibility to add classbreaks at any position
Markus Kottlaender <markus@intevation.de>
parents:
3850
diff
changeset
|
82 v-if="!morphologyClassbreaks.length" |
3606
a8190a570b71
client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
83 class="btn btn-sm btn-success mb-3" |
3855
4a2a778f35da
client: configuration: classbreaks: fixed databinding issue and added possibility to add classbreaks at any position
Markus Kottlaender <markus@intevation.de>
parents:
3850
diff
changeset
|
84 @click="addClassbreak(morphologyClassbreaks, 0)" |
3606
a8190a570b71
client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
85 > |
a8190a570b71
client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
86 <font-awesome-icon icon="plus" /> |
a8190a570b71
client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
87 </button> |
a8190a570b71
client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
88 </div> |
a8190a570b71
client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
89 </div> |
3860
9a7a27301720
client: configuration: save sounding result classbreaks and comparison classbreaks separately
Markus Kottlaender <markus@intevation.de>
parents:
3859
diff
changeset
|
90 <div class="mb-4 px-3"> |
9a7a27301720
client: configuration: save sounding result classbreaks and comparison classbreaks separately
Markus Kottlaender <markus@intevation.de>
parents:
3859
diff
changeset
|
91 <a |
9a7a27301720
client: configuration: save sounding result classbreaks and comparison classbreaks separately
Markus Kottlaender <markus@intevation.de>
parents:
3859
diff
changeset
|
92 @click.prevent="submitClassbreaks" |
9a7a27301720
client: configuration: save sounding result classbreaks and comparison classbreaks separately
Markus Kottlaender <markus@intevation.de>
parents:
3859
diff
changeset
|
93 class="btn btn-info btn-sm text-white" |
9a7a27301720
client: configuration: save sounding result classbreaks and comparison classbreaks separately
Markus Kottlaender <markus@intevation.de>
parents:
3859
diff
changeset
|
94 > |
9a7a27301720
client: configuration: save sounding result classbreaks and comparison classbreaks separately
Markus Kottlaender <markus@intevation.de>
parents:
3859
diff
changeset
|
95 <translate>Send</translate> |
9a7a27301720
client: configuration: save sounding result classbreaks and comparison classbreaks separately
Markus Kottlaender <markus@intevation.de>
parents:
3859
diff
changeset
|
96 </a> |
3861
704f853b9c37
client: configuration: reset morphology classbreaks
Markus Kottlaender <markus@intevation.de>
parents:
3860
diff
changeset
|
97 <a |
704f853b9c37
client: configuration: reset morphology classbreaks
Markus Kottlaender <markus@intevation.de>
parents:
3860
diff
changeset
|
98 @click.prevent="resetClassbreaks" |
704f853b9c37
client: configuration: reset morphology classbreaks
Markus Kottlaender <markus@intevation.de>
parents:
3860
diff
changeset
|
99 class="btn btn-outline-info btn-sm ml-2" |
704f853b9c37
client: configuration: reset morphology classbreaks
Markus Kottlaender <markus@intevation.de>
parents:
3860
diff
changeset
|
100 > |
704f853b9c37
client: configuration: reset morphology classbreaks
Markus Kottlaender <markus@intevation.de>
parents:
3860
diff
changeset
|
101 <translate>Reset to defaults</translate> |
704f853b9c37
client: configuration: reset morphology classbreaks
Markus Kottlaender <markus@intevation.de>
parents:
3860
diff
changeset
|
102 </a> |
3860
9a7a27301720
client: configuration: save sounding result classbreaks and comparison classbreaks separately
Markus Kottlaender <markus@intevation.de>
parents:
3859
diff
changeset
|
103 </div> |
3606
a8190a570b71
client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
104 <div class="px-3"> |
a8190a570b71
client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
105 <h6 class="font-weight-bold"> |
a8190a570b71
client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
106 <translate>Sounding Result Comparison</translate> |
a8190a570b71
client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
107 </h6> |
a8190a570b71
client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
108 <div class="d-flex flex-wrap"> |
a8190a570b71
client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
109 <div |
a8190a570b71
client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
110 class="input-group mb-3 mr-2 classbreak" |
3625
a688a478e35f
implemented configuration backend and frontend
Markus Kottlaender <markus@intevation.de>
parents:
3622
diff
changeset
|
111 v-for="(value, i) in morphologyClassbreaksCompare" |
3606
a8190a570b71
client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
112 :key="i" |
a8190a570b71
client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
113 > |
3763
a1bb7c894058
client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents:
3625
diff
changeset
|
114 <div class="input-group-prepend"> |
a1bb7c894058
client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents:
3625
diff
changeset
|
115 <button |
3856
0b8b62fd8cea
client: configuration: added tint icon to classbreak color selection
Markus Kottlaender <markus@intevation.de>
parents:
3855
diff
changeset
|
116 :class="[ |
0b8b62fd8cea
client: configuration: added tint icon to classbreak color selection
Markus Kottlaender <markus@intevation.de>
parents:
3855
diff
changeset
|
117 'btn btn-sm btn-outline-secondary', |
0b8b62fd8cea
client: configuration: added tint icon to classbreak color selection
Markus Kottlaender <markus@intevation.de>
parents:
3855
diff
changeset
|
118 { hasColor: morphologyClassbreaksCompare[i][1] !== '#ffffff' } |
0b8b62fd8cea
client: configuration: added tint icon to classbreak color selection
Markus Kottlaender <markus@intevation.de>
parents:
3855
diff
changeset
|
119 ]" |
3763
a1bb7c894058
client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents:
3625
diff
changeset
|
120 :style=" |
3856
0b8b62fd8cea
client: configuration: added tint icon to classbreak color selection
Markus Kottlaender <markus@intevation.de>
parents:
3855
diff
changeset
|
121 'width: 28px; background-color: ' + |
3763
a1bb7c894058
client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents:
3625
diff
changeset
|
122 (morphologyClassbreaksCompare[i][1] || 'transparent') |
a1bb7c894058
client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents:
3625
diff
changeset
|
123 " |
a1bb7c894058
client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents:
3625
diff
changeset
|
124 type="button" |
a1bb7c894058
client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents:
3625
diff
changeset
|
125 @click="showColorPicker('compare-' + i)" |
3856
0b8b62fd8cea
client: configuration: added tint icon to classbreak color selection
Markus Kottlaender <markus@intevation.de>
parents:
3855
diff
changeset
|
126 > |
0b8b62fd8cea
client: configuration: added tint icon to classbreak color selection
Markus Kottlaender <markus@intevation.de>
parents:
3855
diff
changeset
|
127 <font-awesome-icon icon="tint" /> |
0b8b62fd8cea
client: configuration: added tint icon to classbreak color selection
Markus Kottlaender <markus@intevation.de>
parents:
3855
diff
changeset
|
128 </button> |
3763
a1bb7c894058
client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents:
3625
diff
changeset
|
129 <div |
a1bb7c894058
client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents:
3625
diff
changeset
|
130 class="color-picker card shadow-sm" |
a1bb7c894058
client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents:
3625
diff
changeset
|
131 v-if="activeColorPicker === 'compare-' + i" |
a1bb7c894058
client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents:
3625
diff
changeset
|
132 > |
a1bb7c894058
client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents:
3625
diff
changeset
|
133 <UIBoxHeader |
a1bb7c894058
client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents:
3625
diff
changeset
|
134 :title="colorPickerTitle" |
a1bb7c894058
client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents:
3625
diff
changeset
|
135 icon="paint-brush" |
a1bb7c894058
client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents:
3625
diff
changeset
|
136 :actions="[ |
a1bb7c894058
client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents:
3625
diff
changeset
|
137 { |
a1bb7c894058
client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents:
3625
diff
changeset
|
138 callback: () => { |
a1bb7c894058
client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents:
3625
diff
changeset
|
139 morphologyClassbreaksCompare[i][1] = '#ffffff'; |
a1bb7c894058
client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents:
3625
diff
changeset
|
140 activeColorPicker = null; |
a1bb7c894058
client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents:
3625
diff
changeset
|
141 }, |
a1bb7c894058
client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents:
3625
diff
changeset
|
142 icon: 'trash' |
3859
d1901366676a
client: configuration: replaced icon to close colorpicker for classbreaks
Markus Kottlaender <markus@intevation.de>
parents:
3856
diff
changeset
|
143 }, |
d1901366676a
client: configuration: replaced icon to close colorpicker for classbreaks
Markus Kottlaender <markus@intevation.de>
parents:
3856
diff
changeset
|
144 { |
d1901366676a
client: configuration: replaced icon to close colorpicker for classbreaks
Markus Kottlaender <markus@intevation.de>
parents:
3856
diff
changeset
|
145 callback: () => { |
d1901366676a
client: configuration: replaced icon to close colorpicker for classbreaks
Markus Kottlaender <markus@intevation.de>
parents:
3856
diff
changeset
|
146 activeColorPicker = null; |
d1901366676a
client: configuration: replaced icon to close colorpicker for classbreaks
Markus Kottlaender <markus@intevation.de>
parents:
3856
diff
changeset
|
147 }, |
d1901366676a
client: configuration: replaced icon to close colorpicker for classbreaks
Markus Kottlaender <markus@intevation.de>
parents:
3856
diff
changeset
|
148 icon: 'check' |
3763
a1bb7c894058
client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents:
3625
diff
changeset
|
149 } |
a1bb7c894058
client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents:
3625
diff
changeset
|
150 ]" |
a1bb7c894058
client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents:
3625
diff
changeset
|
151 /> |
a1bb7c894058
client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents:
3625
diff
changeset
|
152 <chrome-picker |
a1bb7c894058
client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents:
3625
diff
changeset
|
153 v-model="morphologyClassbreaksCompare[i][1]" |
a1bb7c894058
client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents:
3625
diff
changeset
|
154 @input=" |
a1bb7c894058
client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents:
3625
diff
changeset
|
155 color => (morphologyClassbreaksCompare[i][1] = color.hex) |
a1bb7c894058
client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents:
3625
diff
changeset
|
156 " |
a1bb7c894058
client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents:
3625
diff
changeset
|
157 /> |
a1bb7c894058
client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents:
3625
diff
changeset
|
158 </div> |
a1bb7c894058
client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents:
3625
diff
changeset
|
159 </div> |
3606
a8190a570b71
client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
160 <input |
3763
a1bb7c894058
client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents:
3625
diff
changeset
|
161 v-model="morphologyClassbreaksCompare[i][0]" |
3606
a8190a570b71
client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
162 type="number" |
a8190a570b71
client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
163 step="0.1" |
a8190a570b71
client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
164 class="form-control form-control-sm" |
a8190a570b71
client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
165 /> |
a8190a570b71
client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
166 <div class="input-group-append"> |
a8190a570b71
client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
167 <button |
3612
c48b1e0fccd0
client: configuration: morphology: changed delete button color, to be less flashy
Markus Kottlaender <markus@intevation.de>
parents:
3611
diff
changeset
|
168 class="btn btn-sm btn-outline-secondary" |
3606
a8190a570b71
client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
169 type="button" |
3625
a688a478e35f
implemented configuration backend and frontend
Markus Kottlaender <markus@intevation.de>
parents:
3622
diff
changeset
|
170 @click="morphologyClassbreaksCompare.splice(i, 1)" |
3606
a8190a570b71
client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
171 > |
3614
2055b689be54
client: configuration: morphology: even less flashy delete button style
Markus Kottlaender <markus@intevation.de>
parents:
3612
diff
changeset
|
172 <font-awesome-icon icon="times" /> |
3606
a8190a570b71
client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
173 </button> |
3855
4a2a778f35da
client: configuration: classbreaks: fixed databinding issue and added possibility to add classbreaks at any position
Markus Kottlaender <markus@intevation.de>
parents:
3850
diff
changeset
|
174 <button |
4a2a778f35da
client: configuration: classbreaks: fixed databinding issue and added possibility to add classbreaks at any position
Markus Kottlaender <markus@intevation.de>
parents:
3850
diff
changeset
|
175 class="btn btn-sm btn-outline-secondary" |
4a2a778f35da
client: configuration: classbreaks: fixed databinding issue and added possibility to add classbreaks at any position
Markus Kottlaender <markus@intevation.de>
parents:
3850
diff
changeset
|
176 @click="addClassbreak(morphologyClassbreaksCompare, i)" |
4a2a778f35da
client: configuration: classbreaks: fixed databinding issue and added possibility to add classbreaks at any position
Markus Kottlaender <markus@intevation.de>
parents:
3850
diff
changeset
|
177 > |
4a2a778f35da
client: configuration: classbreaks: fixed databinding issue and added possibility to add classbreaks at any position
Markus Kottlaender <markus@intevation.de>
parents:
3850
diff
changeset
|
178 <font-awesome-icon icon="plus" /> |
4a2a778f35da
client: configuration: classbreaks: fixed databinding issue and added possibility to add classbreaks at any position
Markus Kottlaender <markus@intevation.de>
parents:
3850
diff
changeset
|
179 </button> |
3606
a8190a570b71
client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
180 </div> |
a8190a570b71
client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
181 </div> |
a8190a570b71
client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
182 <button |
3855
4a2a778f35da
client: configuration: classbreaks: fixed databinding issue and added possibility to add classbreaks at any position
Markus Kottlaender <markus@intevation.de>
parents:
3850
diff
changeset
|
183 v-if="!morphologyClassbreaksCompare.length" |
3606
a8190a570b71
client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
184 class="btn btn-sm btn-success mb-3" |
3855
4a2a778f35da
client: configuration: classbreaks: fixed databinding issue and added possibility to add classbreaks at any position
Markus Kottlaender <markus@intevation.de>
parents:
3850
diff
changeset
|
185 @click="addClassbreak(morphologyClassbreaksCompare, 0)" |
3606
a8190a570b71
client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
186 > |
a8190a570b71
client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
187 <font-awesome-icon icon="plus" /> |
a8190a570b71
client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
188 </button> |
a8190a570b71
client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
189 </div> |
a8190a570b71
client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
190 </div> |
3860
9a7a27301720
client: configuration: save sounding result classbreaks and comparison classbreaks separately
Markus Kottlaender <markus@intevation.de>
parents:
3859
diff
changeset
|
191 <div class="px-3"> |
9a7a27301720
client: configuration: save sounding result classbreaks and comparison classbreaks separately
Markus Kottlaender <markus@intevation.de>
parents:
3859
diff
changeset
|
192 <a |
9a7a27301720
client: configuration: save sounding result classbreaks and comparison classbreaks separately
Markus Kottlaender <markus@intevation.de>
parents:
3859
diff
changeset
|
193 @click.prevent="submitClassbreaksCompare" |
9a7a27301720
client: configuration: save sounding result classbreaks and comparison classbreaks separately
Markus Kottlaender <markus@intevation.de>
parents:
3859
diff
changeset
|
194 class="btn btn-info btn-sm text-white" |
9a7a27301720
client: configuration: save sounding result classbreaks and comparison classbreaks separately
Markus Kottlaender <markus@intevation.de>
parents:
3859
diff
changeset
|
195 > |
3606
a8190a570b71
client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
196 <translate>Send</translate> |
a8190a570b71
client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
197 </a> |
3861
704f853b9c37
client: configuration: reset morphology classbreaks
Markus Kottlaender <markus@intevation.de>
parents:
3860
diff
changeset
|
198 <a |
704f853b9c37
client: configuration: reset morphology classbreaks
Markus Kottlaender <markus@intevation.de>
parents:
3860
diff
changeset
|
199 @click.prevent="resetClassbreaksCompare" |
704f853b9c37
client: configuration: reset morphology classbreaks
Markus Kottlaender <markus@intevation.de>
parents:
3860
diff
changeset
|
200 class="btn btn-outline-info btn-sm ml-2" |
704f853b9c37
client: configuration: reset morphology classbreaks
Markus Kottlaender <markus@intevation.de>
parents:
3860
diff
changeset
|
201 > |
704f853b9c37
client: configuration: reset morphology classbreaks
Markus Kottlaender <markus@intevation.de>
parents:
3860
diff
changeset
|
202 <translate>Reset to defaults</translate> |
704f853b9c37
client: configuration: reset morphology classbreaks
Markus Kottlaender <markus@intevation.de>
parents:
3860
diff
changeset
|
203 </a> |
3606
a8190a570b71
client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
204 </div> |
a8190a570b71
client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
205 </div> |
a8190a570b71
client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
206 </template> |
a8190a570b71
client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
207 |
a8190a570b71
client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
208 <style lang="sass" scoped> |
a8190a570b71
client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
209 .classbreak |
3856
0b8b62fd8cea
client: configuration: added tint icon to classbreak color selection
Markus Kottlaender <markus@intevation.de>
parents:
3855
diff
changeset
|
210 width: 142px |
3614
2055b689be54
client: configuration: morphology: even less flashy delete button style
Markus Kottlaender <markus@intevation.de>
parents:
3612
diff
changeset
|
211 .btn-outline-secondary |
2055b689be54
client: configuration: morphology: even less flashy delete button style
Markus Kottlaender <markus@intevation.de>
parents:
3612
diff
changeset
|
212 border-color: #ccc |
2055b689be54
client: configuration: morphology: even less flashy delete button style
Markus Kottlaender <markus@intevation.de>
parents:
3612
diff
changeset
|
213 color: #ccc |
3856
0b8b62fd8cea
client: configuration: added tint icon to classbreak color selection
Markus Kottlaender <markus@intevation.de>
parents:
3855
diff
changeset
|
214 &:hover:not(.hasColor) |
0b8b62fd8cea
client: configuration: added tint icon to classbreak color selection
Markus Kottlaender <markus@intevation.de>
parents:
3855
diff
changeset
|
215 background: #eee !important |
0b8b62fd8cea
client: configuration: added tint icon to classbreak color selection
Markus Kottlaender <markus@intevation.de>
parents:
3855
diff
changeset
|
216 .input-group-prepend |
0b8b62fd8cea
client: configuration: added tint icon to classbreak color selection
Markus Kottlaender <markus@intevation.de>
parents:
3855
diff
changeset
|
217 .btn-outline-secondary.hasColor |
0b8b62fd8cea
client: configuration: added tint icon to classbreak color selection
Markus Kottlaender <markus@intevation.de>
parents:
3855
diff
changeset
|
218 color: rgba(255, 255, 255, 0.5) |
0b8b62fd8cea
client: configuration: added tint icon to classbreak color selection
Markus Kottlaender <markus@intevation.de>
parents:
3855
diff
changeset
|
219 .input-group-append |
0b8b62fd8cea
client: configuration: added tint icon to classbreak color selection
Markus Kottlaender <markus@intevation.de>
parents:
3855
diff
changeset
|
220 .btn-outline-secondary |
0b8b62fd8cea
client: configuration: added tint icon to classbreak color selection
Markus Kottlaender <markus@intevation.de>
parents:
3855
diff
changeset
|
221 &:hover |
0b8b62fd8cea
client: configuration: added tint icon to classbreak color selection
Markus Kottlaender <markus@intevation.de>
parents:
3855
diff
changeset
|
222 color: #dc3545 |
0b8b62fd8cea
client: configuration: added tint icon to classbreak color selection
Markus Kottlaender <markus@intevation.de>
parents:
3855
diff
changeset
|
223 &:last-child:hover |
0b8b62fd8cea
client: configuration: added tint icon to classbreak color selection
Markus Kottlaender <markus@intevation.de>
parents:
3855
diff
changeset
|
224 color: #28a745 |
3763
a1bb7c894058
client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents:
3625
diff
changeset
|
225 .color-picker |
a1bb7c894058
client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents:
3625
diff
changeset
|
226 position: absolute |
a1bb7c894058
client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents:
3625
diff
changeset
|
227 top: -4px |
a1bb7c894058
client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents:
3625
diff
changeset
|
228 left: 19px |
a1bb7c894058
client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents:
3625
diff
changeset
|
229 z-index: 9 |
a1bb7c894058
client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents:
3625
diff
changeset
|
230 overflow: hidden |
a1bb7c894058
client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents:
3625
diff
changeset
|
231 border-top-left-radius: 0 !important |
a1bb7c894058
client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents:
3625
diff
changeset
|
232 .btn |
a1bb7c894058
client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents:
3625
diff
changeset
|
233 border-radius: 0 !important |
a1bb7c894058
client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents:
3625
diff
changeset
|
234 .vc-chrome |
a1bb7c894058
client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents:
3625
diff
changeset
|
235 box-shadow: none |
a1bb7c894058
client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents:
3625
diff
changeset
|
236 /deep/ |
a1bb7c894058
client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents:
3625
diff
changeset
|
237 .vc-chrome-alpha-wrap |
a1bb7c894058
client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents:
3625
diff
changeset
|
238 display: none !important |
a1bb7c894058
client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents:
3625
diff
changeset
|
239 .vc-chrome-hue-wrap |
a1bb7c894058
client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents:
3625
diff
changeset
|
240 margin-top: 10px |
a1bb7c894058
client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents:
3625
diff
changeset
|
241 .vc-chrome-saturation-wrap |
a1bb7c894058
client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents:
3625
diff
changeset
|
242 border-radius: 0 |
3606
a8190a570b71
client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
243 </style> |
a8190a570b71
client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
244 |
a8190a570b71
client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
245 <script> |
a8190a570b71
client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
246 /* This is Free Software under GNU Affero General Public License v >= 3.0 |
a8190a570b71
client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
247 * without warranty, see README.md and license for details. |
a8190a570b71
client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
248 * |
a8190a570b71
client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
249 * SPDX-License-Identifier: AGPL-3.0-or-later |
a8190a570b71
client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
250 * License-Filename: LICENSES/AGPL-3.0.txt |
a8190a570b71
client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
251 * |
a8190a570b71
client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
252 * Copyright (C) 2018 by via donau |
a8190a570b71
client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
253 * – Österreichische Wasserstraßen-Gesellschaft mbH |
a8190a570b71
client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
254 * Software engineering by Intevation GmbH |
a8190a570b71
client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
255 * |
a8190a570b71
client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
256 * Author(s): |
a8190a570b71
client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
257 * Markus Kottländer <markus@intevation.de> |
a8190a570b71
client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
258 */ |
3622
30a9fdac70f0
client: configuration: prepared fetching morphology classbreaks and ecdis url from backend
Markus Kottlaender <markus@intevation.de>
parents:
3614
diff
changeset
|
259 import { mapState } from "vuex"; |
3763
a1bb7c894058
client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents:
3625
diff
changeset
|
260 import { Chrome } from "vue-color"; |
3606
a8190a570b71
client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
261 |
3861
704f853b9c37
client: configuration: reset morphology classbreaks
Markus Kottlaender <markus@intevation.de>
parents:
3860
diff
changeset
|
262 const DEFAULT_CLASSBREAKS = |
704f853b9c37
client: configuration: reset morphology classbreaks
Markus Kottlaender <markus@intevation.de>
parents:
3860
diff
changeset
|
263 "1:#ff00dd,1.5,1.7,1.9,2.1,2.3,2.5:#f25f20,2.7,2.9,3.1:#f7e40e,3.3,3.5,4:#8ad51a,4.5,5,5.5,6,6.5,7:#1414ff"; |
704f853b9c37
client: configuration: reset morphology classbreaks
Markus Kottlaender <markus@intevation.de>
parents:
3860
diff
changeset
|
264 const DEFAULT_CLASSBREAKS_COMPARE = |
704f853b9c37
client: configuration: reset morphology classbreaks
Markus Kottlaender <markus@intevation.de>
parents:
3860
diff
changeset
|
265 "-2:#06b100,-1.9,-1.8,-1.7,-1.6,-1.5,-1.4,-1.3,-1.2,-1.1,-1:#1cc68e,-0.9,-0.8,-0.7,-0.6,-0.5,-0.4,-0.3,-0.2,-0.1,0:#c2c2c2,0.1,0.2,0.3,0.4,0.5,0.6,0.7,0.8,0.9,1:#fff01a,1.1,1.2,1.3,1.4,1.5,1.6,1.7,1.8,1.9,2:#f80012"; |
704f853b9c37
client: configuration: reset morphology classbreaks
Markus Kottlaender <markus@intevation.de>
parents:
3860
diff
changeset
|
266 |
3606
a8190a570b71
client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
267 export default { |
3763
a1bb7c894058
client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents:
3625
diff
changeset
|
268 components: { |
a1bb7c894058
client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents:
3625
diff
changeset
|
269 "chrome-picker": Chrome |
a1bb7c894058
client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents:
3625
diff
changeset
|
270 }, |
3625
a688a478e35f
implemented configuration backend and frontend
Markus Kottlaender <markus@intevation.de>
parents:
3622
diff
changeset
|
271 data() { |
a688a478e35f
implemented configuration backend and frontend
Markus Kottlaender <markus@intevation.de>
parents:
3622
diff
changeset
|
272 return { |
a688a478e35f
implemented configuration backend and frontend
Markus Kottlaender <markus@intevation.de>
parents:
3622
diff
changeset
|
273 morphologyClassbreaks: [], |
3763
a1bb7c894058
client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents:
3625
diff
changeset
|
274 morphologyClassbreaksCompare: [], |
a1bb7c894058
client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents:
3625
diff
changeset
|
275 activeColorPicker: null, |
a1bb7c894058
client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents:
3625
diff
changeset
|
276 closeColorPickerListener: null |
3625
a688a478e35f
implemented configuration backend and frontend
Markus Kottlaender <markus@intevation.de>
parents:
3622
diff
changeset
|
277 }; |
a688a478e35f
implemented configuration backend and frontend
Markus Kottlaender <markus@intevation.de>
parents:
3622
diff
changeset
|
278 }, |
3622
30a9fdac70f0
client: configuration: prepared fetching morphology classbreaks and ecdis url from backend
Markus Kottlaender <markus@intevation.de>
parents:
3614
diff
changeset
|
279 computed: { |
3763
a1bb7c894058
client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents:
3625
diff
changeset
|
280 ...mapState("application", ["config"]), |
a1bb7c894058
client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents:
3625
diff
changeset
|
281 colorPickerTitle() { |
a1bb7c894058
client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents:
3625
diff
changeset
|
282 return this.$gettext("Choose color"); |
a1bb7c894058
client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents:
3625
diff
changeset
|
283 } |
3606
a8190a570b71
client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
284 }, |
a8190a570b71
client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
285 methods: { |
3855
4a2a778f35da
client: configuration: classbreaks: fixed databinding issue and added possibility to add classbreaks at any position
Markus Kottlaender <markus@intevation.de>
parents:
3850
diff
changeset
|
286 addClassbreak(classbreaks, i) { |
4a2a778f35da
client: configuration: classbreaks: fixed databinding issue and added possibility to add classbreaks at any position
Markus Kottlaender <markus@intevation.de>
parents:
3850
diff
changeset
|
287 classbreaks.splice( |
4a2a778f35da
client: configuration: classbreaks: fixed databinding issue and added possibility to add classbreaks at any position
Markus Kottlaender <markus@intevation.de>
parents:
3850
diff
changeset
|
288 i, |
4a2a778f35da
client: configuration: classbreaks: fixed databinding issue and added possibility to add classbreaks at any position
Markus Kottlaender <markus@intevation.de>
parents:
3850
diff
changeset
|
289 0, |
4a2a778f35da
client: configuration: classbreaks: fixed databinding issue and added possibility to add classbreaks at any position
Markus Kottlaender <markus@intevation.de>
parents:
3850
diff
changeset
|
290 classbreaks.length > i |
4a2a778f35da
client: configuration: classbreaks: fixed databinding issue and added possibility to add classbreaks at any position
Markus Kottlaender <markus@intevation.de>
parents:
3850
diff
changeset
|
291 ? [classbreaks[i][0], classbreaks[i][1]] // create new array! |
4a2a778f35da
client: configuration: classbreaks: fixed databinding issue and added possibility to add classbreaks at any position
Markus Kottlaender <markus@intevation.de>
parents:
3850
diff
changeset
|
292 : [1, "#ffffff"] |
4a2a778f35da
client: configuration: classbreaks: fixed databinding issue and added possibility to add classbreaks at any position
Markus Kottlaender <markus@intevation.de>
parents:
3850
diff
changeset
|
293 ); |
4a2a778f35da
client: configuration: classbreaks: fixed databinding issue and added possibility to add classbreaks at any position
Markus Kottlaender <markus@intevation.de>
parents:
3850
diff
changeset
|
294 }, |
3763
a1bb7c894058
client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents:
3625
diff
changeset
|
295 showColorPicker(id) { |
a1bb7c894058
client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents:
3625
diff
changeset
|
296 this.activeColorPicker = this.activeColorPicker === id ? null : id; |
a1bb7c894058
client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents:
3625
diff
changeset
|
297 }, |
3860
9a7a27301720
client: configuration: save sounding result classbreaks and comparison classbreaks separately
Markus Kottlaender <markus@intevation.de>
parents:
3859
diff
changeset
|
298 submitClassbreaks() { |
3850
0d0e52612c32
client: reload config right after saving it to make sure everything is updated
Markus Kottlaender <markus@intevation.de>
parents:
3763
diff
changeset
|
299 this.$store |
0d0e52612c32
client: reload config right after saving it to make sure everything is updated
Markus Kottlaender <markus@intevation.de>
parents:
3763
diff
changeset
|
300 .dispatch("application/saveConfig", { |
0d0e52612c32
client: reload config right after saving it to make sure everything is updated
Markus Kottlaender <markus@intevation.de>
parents:
3763
diff
changeset
|
301 morphology_classbreaks: this.morphologyClassbreaks |
0d0e52612c32
client: reload config right after saving it to make sure everything is updated
Markus Kottlaender <markus@intevation.de>
parents:
3763
diff
changeset
|
302 .map(cb => (cb[1] === "#ffffff" ? cb[0] : cb.join(":"))) |
3860
9a7a27301720
client: configuration: save sounding result classbreaks and comparison classbreaks separately
Markus Kottlaender <markus@intevation.de>
parents:
3859
diff
changeset
|
303 .join(",") |
9a7a27301720
client: configuration: save sounding result classbreaks and comparison classbreaks separately
Markus Kottlaender <markus@intevation.de>
parents:
3859
diff
changeset
|
304 }) |
9a7a27301720
client: configuration: save sounding result classbreaks and comparison classbreaks separately
Markus Kottlaender <markus@intevation.de>
parents:
3859
diff
changeset
|
305 .finally(() => this.$store.dispatch("application/loadConfig")); |
9a7a27301720
client: configuration: save sounding result classbreaks and comparison classbreaks separately
Markus Kottlaender <markus@intevation.de>
parents:
3859
diff
changeset
|
306 }, |
9a7a27301720
client: configuration: save sounding result classbreaks and comparison classbreaks separately
Markus Kottlaender <markus@intevation.de>
parents:
3859
diff
changeset
|
307 submitClassbreaksCompare() { |
9a7a27301720
client: configuration: save sounding result classbreaks and comparison classbreaks separately
Markus Kottlaender <markus@intevation.de>
parents:
3859
diff
changeset
|
308 this.$store |
9a7a27301720
client: configuration: save sounding result classbreaks and comparison classbreaks separately
Markus Kottlaender <markus@intevation.de>
parents:
3859
diff
changeset
|
309 .dispatch("application/saveConfig", { |
3850
0d0e52612c32
client: reload config right after saving it to make sure everything is updated
Markus Kottlaender <markus@intevation.de>
parents:
3763
diff
changeset
|
310 morphology_classbreaks_compare: this.morphologyClassbreaksCompare |
0d0e52612c32
client: reload config right after saving it to make sure everything is updated
Markus Kottlaender <markus@intevation.de>
parents:
3763
diff
changeset
|
311 .map(cb => (cb[1] === "#ffffff" ? cb[0] : cb.join(":"))) |
0d0e52612c32
client: reload config right after saving it to make sure everything is updated
Markus Kottlaender <markus@intevation.de>
parents:
3763
diff
changeset
|
312 .join(",") |
0d0e52612c32
client: reload config right after saving it to make sure everything is updated
Markus Kottlaender <markus@intevation.de>
parents:
3763
diff
changeset
|
313 }) |
0d0e52612c32
client: reload config right after saving it to make sure everything is updated
Markus Kottlaender <markus@intevation.de>
parents:
3763
diff
changeset
|
314 .finally(() => this.$store.dispatch("application/loadConfig")); |
3861
704f853b9c37
client: configuration: reset morphology classbreaks
Markus Kottlaender <markus@intevation.de>
parents:
3860
diff
changeset
|
315 }, |
704f853b9c37
client: configuration: reset morphology classbreaks
Markus Kottlaender <markus@intevation.de>
parents:
3860
diff
changeset
|
316 resetClassbreaks() { |
704f853b9c37
client: configuration: reset morphology classbreaks
Markus Kottlaender <markus@intevation.de>
parents:
3860
diff
changeset
|
317 this.morphologyClassbreaks = this.parseClassbreakString( |
704f853b9c37
client: configuration: reset morphology classbreaks
Markus Kottlaender <markus@intevation.de>
parents:
3860
diff
changeset
|
318 DEFAULT_CLASSBREAKS |
704f853b9c37
client: configuration: reset morphology classbreaks
Markus Kottlaender <markus@intevation.de>
parents:
3860
diff
changeset
|
319 ); |
704f853b9c37
client: configuration: reset morphology classbreaks
Markus Kottlaender <markus@intevation.de>
parents:
3860
diff
changeset
|
320 }, |
704f853b9c37
client: configuration: reset morphology classbreaks
Markus Kottlaender <markus@intevation.de>
parents:
3860
diff
changeset
|
321 resetClassbreaksCompare() { |
704f853b9c37
client: configuration: reset morphology classbreaks
Markus Kottlaender <markus@intevation.de>
parents:
3860
diff
changeset
|
322 this.morphologyClassbreaksCompare = this.parseClassbreakString( |
704f853b9c37
client: configuration: reset morphology classbreaks
Markus Kottlaender <markus@intevation.de>
parents:
3860
diff
changeset
|
323 DEFAULT_CLASSBREAKS_COMPARE |
704f853b9c37
client: configuration: reset morphology classbreaks
Markus Kottlaender <markus@intevation.de>
parents:
3860
diff
changeset
|
324 ); |
704f853b9c37
client: configuration: reset morphology classbreaks
Markus Kottlaender <markus@intevation.de>
parents:
3860
diff
changeset
|
325 }, |
704f853b9c37
client: configuration: reset morphology classbreaks
Markus Kottlaender <markus@intevation.de>
parents:
3860
diff
changeset
|
326 parseClassbreakString(str) { |
704f853b9c37
client: configuration: reset morphology classbreaks
Markus Kottlaender <markus@intevation.de>
parents:
3860
diff
changeset
|
327 return str |
704f853b9c37
client: configuration: reset morphology classbreaks
Markus Kottlaender <markus@intevation.de>
parents:
3860
diff
changeset
|
328 .split(",") |
704f853b9c37
client: configuration: reset morphology classbreaks
Markus Kottlaender <markus@intevation.de>
parents:
3860
diff
changeset
|
329 .map(cb => cb.split(":")) |
704f853b9c37
client: configuration: reset morphology classbreaks
Markus Kottlaender <markus@intevation.de>
parents:
3860
diff
changeset
|
330 .map(cb => { |
704f853b9c37
client: configuration: reset morphology classbreaks
Markus Kottlaender <markus@intevation.de>
parents:
3860
diff
changeset
|
331 cb[0] = Number(cb[0]); |
704f853b9c37
client: configuration: reset morphology classbreaks
Markus Kottlaender <markus@intevation.de>
parents:
3860
diff
changeset
|
332 cb[1] = cb[1] || "#ffffff"; |
704f853b9c37
client: configuration: reset morphology classbreaks
Markus Kottlaender <markus@intevation.de>
parents:
3860
diff
changeset
|
333 return cb; |
704f853b9c37
client: configuration: reset morphology classbreaks
Markus Kottlaender <markus@intevation.de>
parents:
3860
diff
changeset
|
334 }); |
3622
30a9fdac70f0
client: configuration: prepared fetching morphology classbreaks and ecdis url from backend
Markus Kottlaender <markus@intevation.de>
parents:
3614
diff
changeset
|
335 } |
3625
a688a478e35f
implemented configuration backend and frontend
Markus Kottlaender <markus@intevation.de>
parents:
3622
diff
changeset
|
336 }, |
a688a478e35f
implemented configuration backend and frontend
Markus Kottlaender <markus@intevation.de>
parents:
3622
diff
changeset
|
337 mounted() { |
3861
704f853b9c37
client: configuration: reset morphology classbreaks
Markus Kottlaender <markus@intevation.de>
parents:
3860
diff
changeset
|
338 this.morphologyClassbreaks = this.parseClassbreakString( |
704f853b9c37
client: configuration: reset morphology classbreaks
Markus Kottlaender <markus@intevation.de>
parents:
3860
diff
changeset
|
339 this.config.morphology_classbreaks |
704f853b9c37
client: configuration: reset morphology classbreaks
Markus Kottlaender <markus@intevation.de>
parents:
3860
diff
changeset
|
340 ); |
704f853b9c37
client: configuration: reset morphology classbreaks
Markus Kottlaender <markus@intevation.de>
parents:
3860
diff
changeset
|
341 this.morphologyClassbreaksCompare = this.parseClassbreakString( |
704f853b9c37
client: configuration: reset morphology classbreaks
Markus Kottlaender <markus@intevation.de>
parents:
3860
diff
changeset
|
342 this.config.morphology_classbreaks_compare |
704f853b9c37
client: configuration: reset morphology classbreaks
Markus Kottlaender <markus@intevation.de>
parents:
3860
diff
changeset
|
343 ); |
3763
a1bb7c894058
client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents:
3625
diff
changeset
|
344 |
a1bb7c894058
client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents:
3625
diff
changeset
|
345 this.closeColorPickerListener = e => { |
a1bb7c894058
client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents:
3625
diff
changeset
|
346 // Escape |
a1bb7c894058
client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents:
3625
diff
changeset
|
347 if (e.keyCode === 27) { |
a1bb7c894058
client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents:
3625
diff
changeset
|
348 this.activeColorPicker = null; |
a1bb7c894058
client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents:
3625
diff
changeset
|
349 } |
a1bb7c894058
client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents:
3625
diff
changeset
|
350 }; |
a1bb7c894058
client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents:
3625
diff
changeset
|
351 window.addEventListener("keydown", this.closeColorPickerListener); |
a1bb7c894058
client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents:
3625
diff
changeset
|
352 }, |
a1bb7c894058
client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents:
3625
diff
changeset
|
353 destroyed() { |
a1bb7c894058
client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents:
3625
diff
changeset
|
354 window.removeEventListener("keydown", this.closeColorPickerListener); |
3606
a8190a570b71
client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
355 } |
a8190a570b71
client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
356 }; |
a8190a570b71
client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
357 </script> |