Mercurial > gemma

annotate client/src/components/systemconfiguration/MorphologyClassbreaks.vue @ 3856:0b8b62fd8cea

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: configuration: added tint icon to classbreak color selection
author Markus Kottlaender <markus@intevation.de>
date Tue, 09 Jul 2019 14:22:01 +0200
parents 4a2a778f35da
children d1901366676a
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
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 :closeCallback="() => (activeColorPicker = null)"
a1bb7c894058 client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents: 3625
diff changeset
37 :actions="[
a1bb7c894058 client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents: 3625
diff changeset
38 {
a1bb7c894058 client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents: 3625
diff changeset
39 callback: () => {
a1bb7c894058 client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents: 3625
diff changeset
40 morphologyClassbreaks[i][1] = '#ffffff';
a1bb7c894058 client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents: 3625
diff changeset
41 activeColorPicker = null;
a1bb7c894058 client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents: 3625
diff changeset
42 },
a1bb7c894058 client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents: 3625
diff changeset
43 icon: 'trash'
a1bb7c894058 client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents: 3625
diff changeset
44 }
a1bb7c894058 client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents: 3625
diff changeset
45 ]"
a1bb7c894058 client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents: 3625
diff changeset
46 />
a1bb7c894058 client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents: 3625
diff changeset
47 <chrome-picker
a1bb7c894058 client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents: 3625
diff changeset
48 v-model="morphologyClassbreaks[i][1]"
a1bb7c894058 client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents: 3625
diff changeset
49 @input="color => (morphologyClassbreaks[i][1] = color.hex)"
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 </div>
a1bb7c894058 client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents: 3625
diff changeset
52 </div>
3606
a8190a570b71 client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
53 <input
3763
a1bb7c894058 client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents: 3625
diff changeset
54 v-model="morphologyClassbreaks[i][0]"
3606
a8190a570b71 client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
55 type="number"
a8190a570b71 client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
56 min="0"
a8190a570b71 client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
57 step="0.1"
a8190a570b71 client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
58 class="form-control form-control-sm"
a8190a570b71 client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
59 />
a8190a570b71 client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
60 <div class="input-group-append">
a8190a570b71 client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
61 <button
3612
c48b1e0fccd0 client: configuration: morphology: changed delete button color, to be less flashy
Markus Kottlaender <markus@intevation.de>
parents: 3611
diff changeset
62 class="btn btn-sm btn-outline-secondary"
3606
a8190a570b71 client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
63 type="button"
3625
a688a478e35f implemented configuration backend and frontend
Markus Kottlaender <markus@intevation.de>
parents: 3622
diff changeset
64 @click="morphologyClassbreaks.splice(i, 1)"
3606
a8190a570b71 client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
65 >
3614
2055b689be54 client: configuration: morphology: even less flashy delete button style
Markus Kottlaender <markus@intevation.de>
parents: 3612
diff changeset
66 <font-awesome-icon icon="times" />
3606
a8190a570b71 client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
67 </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
68 <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
69 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
70 @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
71 >
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
72 <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
73 </button>
3606
a8190a570b71 client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
74 </div>
a8190a570b71 client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
75 </div>
a8190a570b71 client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
76 <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
77 v-if="!morphologyClassbreaks.length"
3606
a8190a570b71 client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
78 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
79 @click="addClassbreak(morphologyClassbreaks, 0)"
3606
a8190a570b71 client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
80 >
a8190a570b71 client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
81 <font-awesome-icon icon="plus" />
a8190a570b71 client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
82 </button>
a8190a570b71 client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
83 </div>
a8190a570b71 client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
84 </div>
a8190a570b71 client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
85 <div class="px-3">
a8190a570b71 client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
86 <h6 class="font-weight-bold">
a8190a570b71 client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
87 <translate>Sounding Result Comparison</translate>
a8190a570b71 client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
88 </h6>
a8190a570b71 client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
89 <div class="d-flex flex-wrap">
a8190a570b71 client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
90 <div
a8190a570b71 client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
91 class="input-group mb-3 mr-2 classbreak"
3625
a688a478e35f implemented configuration backend and frontend
Markus Kottlaender <markus@intevation.de>
parents: 3622
diff changeset
92 v-for="(value, i) in morphologyClassbreaksCompare"
3606
a8190a570b71 client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
93 :key="i"
a8190a570b71 client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
94 >
3763
a1bb7c894058 client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents: 3625
diff changeset
95 <div class="input-group-prepend">
a1bb7c894058 client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents: 3625
diff changeset
96 <button
3856
0b8b62fd8cea client: configuration: added tint icon to classbreak color selection
Markus Kottlaender <markus@intevation.de>
parents: 3855
diff changeset
97 :class="[
0b8b62fd8cea client: configuration: added tint icon to classbreak color selection
Markus Kottlaender <markus@intevation.de>
parents: 3855
diff changeset
98 '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
99 { hasColor: morphologyClassbreaksCompare[i][1] !== '#ffffff' }
0b8b62fd8cea client: configuration: added tint icon to classbreak color selection
Markus Kottlaender <markus@intevation.de>
parents: 3855
diff changeset
100 ]"
3763
a1bb7c894058 client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents: 3625
diff changeset
101 :style="
3856
0b8b62fd8cea client: configuration: added tint icon to classbreak color selection
Markus Kottlaender <markus@intevation.de>
parents: 3855
diff changeset
102 'width: 28px; background-color: ' +
3763
a1bb7c894058 client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents: 3625
diff changeset
103 (morphologyClassbreaksCompare[i][1] || 'transparent')
a1bb7c894058 client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents: 3625
diff changeset
104 "
a1bb7c894058 client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents: 3625
diff changeset
105 type="button"
a1bb7c894058 client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents: 3625
diff changeset
106 @click="showColorPicker('compare-' + i)"
3856
0b8b62fd8cea client: configuration: added tint icon to classbreak color selection
Markus Kottlaender <markus@intevation.de>
parents: 3855
diff changeset
107 >
0b8b62fd8cea client: configuration: added tint icon to classbreak color selection
Markus Kottlaender <markus@intevation.de>
parents: 3855
diff changeset
108 <font-awesome-icon icon="tint" />
0b8b62fd8cea client: configuration: added tint icon to classbreak color selection
Markus Kottlaender <markus@intevation.de>
parents: 3855
diff changeset
109 </button>
3763
a1bb7c894058 client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents: 3625
diff changeset
110 <div
a1bb7c894058 client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents: 3625
diff changeset
111 class="color-picker card shadow-sm"
a1bb7c894058 client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents: 3625
diff changeset
112 v-if="activeColorPicker === 'compare-' + i"
a1bb7c894058 client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents: 3625
diff changeset
113 >
a1bb7c894058 client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents: 3625
diff changeset
114 <UIBoxHeader
a1bb7c894058 client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents: 3625
diff changeset
115 :title="colorPickerTitle"
a1bb7c894058 client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents: 3625
diff changeset
116 icon="paint-brush"
a1bb7c894058 client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents: 3625
diff changeset
117 :closeCallback="() => (activeColorPicker = null)"
a1bb7c894058 client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents: 3625
diff changeset
118 :actions="[
a1bb7c894058 client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents: 3625
diff changeset
119 {
a1bb7c894058 client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents: 3625
diff changeset
120 callback: () => {
a1bb7c894058 client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents: 3625
diff changeset
121 morphologyClassbreaksCompare[i][1] = '#ffffff';
a1bb7c894058 client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents: 3625
diff changeset
122 activeColorPicker = null;
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 icon: 'trash'
a1bb7c894058 client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents: 3625
diff changeset
125 }
a1bb7c894058 client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents: 3625
diff changeset
126 ]"
a1bb7c894058 client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents: 3625
diff changeset
127 />
a1bb7c894058 client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents: 3625
diff changeset
128 <chrome-picker
a1bb7c894058 client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents: 3625
diff changeset
129 v-model="morphologyClassbreaksCompare[i][1]"
a1bb7c894058 client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents: 3625
diff changeset
130 @input="
a1bb7c894058 client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents: 3625
diff changeset
131 color => (morphologyClassbreaksCompare[i][1] = color.hex)
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 />
a1bb7c894058 client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents: 3625
diff changeset
134 </div>
a1bb7c894058 client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents: 3625
diff changeset
135 </div>
3606
a8190a570b71 client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
136 <input
3763
a1bb7c894058 client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents: 3625
diff changeset
137 v-model="morphologyClassbreaksCompare[i][0]"
3606
a8190a570b71 client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
138 type="number"
a8190a570b71 client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
139 step="0.1"
a8190a570b71 client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
140 class="form-control form-control-sm"
a8190a570b71 client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
141 />
a8190a570b71 client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
142 <div class="input-group-append">
a8190a570b71 client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
143 <button
3612
c48b1e0fccd0 client: configuration: morphology: changed delete button color, to be less flashy
Markus Kottlaender <markus@intevation.de>
parents: 3611
diff changeset
144 class="btn btn-sm btn-outline-secondary"
3606
a8190a570b71 client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
145 type="button"
3625
a688a478e35f implemented configuration backend and frontend
Markus Kottlaender <markus@intevation.de>
parents: 3622
diff changeset
146 @click="morphologyClassbreaksCompare.splice(i, 1)"
3606
a8190a570b71 client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
147 >
3614
2055b689be54 client: configuration: morphology: even less flashy delete button style
Markus Kottlaender <markus@intevation.de>
parents: 3612
diff changeset
148 <font-awesome-icon icon="times" />
3606
a8190a570b71 client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
149 </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
150 <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
151 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
152 @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
153 >
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
154 <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
155 </button>
3606
a8190a570b71 client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
156 </div>
a8190a570b71 client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
157 </div>
a8190a570b71 client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
158 <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
159 v-if="!morphologyClassbreaksCompare.length"
3606
a8190a570b71 client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
160 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
161 @click="addClassbreak(morphologyClassbreaksCompare, 0)"
3606
a8190a570b71 client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
162 >
a8190a570b71 client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
163 <font-awesome-icon icon="plus" />
a8190a570b71 client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
164 </button>
a8190a570b71 client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
165 </div>
a8190a570b71 client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
166 </div>
a8190a570b71 client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
167 <div class="mt-4 px-3">
a8190a570b71 client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
168 <a @click.prevent="submit" class="btn btn-info btn-sm text-white">
a8190a570b71 client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
169 <translate>Send</translate>
a8190a570b71 client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
170 </a>
a8190a570b71 client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
171 </div>
a8190a570b71 client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
172 </div>
a8190a570b71 client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
173 </template>
a8190a570b71 client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
174
a8190a570b71 client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
175 <style lang="sass" scoped>
a8190a570b71 client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
176 .classbreak
3856
0b8b62fd8cea client: configuration: added tint icon to classbreak color selection
Markus Kottlaender <markus@intevation.de>
parents: 3855
diff changeset
177 width: 142px
3614
2055b689be54 client: configuration: morphology: even less flashy delete button style
Markus Kottlaender <markus@intevation.de>
parents: 3612
diff changeset
178 .btn-outline-secondary
2055b689be54 client: configuration: morphology: even less flashy delete button style
Markus Kottlaender <markus@intevation.de>
parents: 3612
diff changeset
179 border-color: #ccc
2055b689be54 client: configuration: morphology: even less flashy delete button style
Markus Kottlaender <markus@intevation.de>
parents: 3612
diff changeset
180 color: #ccc
3856
0b8b62fd8cea client: configuration: added tint icon to classbreak color selection
Markus Kottlaender <markus@intevation.de>
parents: 3855
diff changeset
181 &:hover:not(.hasColor)
0b8b62fd8cea client: configuration: added tint icon to classbreak color selection
Markus Kottlaender <markus@intevation.de>
parents: 3855
diff changeset
182 background: #eee !important
0b8b62fd8cea client: configuration: added tint icon to classbreak color selection
Markus Kottlaender <markus@intevation.de>
parents: 3855
diff changeset
183 .input-group-prepend
0b8b62fd8cea client: configuration: added tint icon to classbreak color selection
Markus Kottlaender <markus@intevation.de>
parents: 3855
diff changeset
184 .btn-outline-secondary.hasColor
0b8b62fd8cea client: configuration: added tint icon to classbreak color selection
Markus Kottlaender <markus@intevation.de>
parents: 3855
diff changeset
185 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
186 .input-group-append
0b8b62fd8cea client: configuration: added tint icon to classbreak color selection
Markus Kottlaender <markus@intevation.de>
parents: 3855
diff changeset
187 .btn-outline-secondary
0b8b62fd8cea client: configuration: added tint icon to classbreak color selection
Markus Kottlaender <markus@intevation.de>
parents: 3855
diff changeset
188 &:hover
0b8b62fd8cea client: configuration: added tint icon to classbreak color selection
Markus Kottlaender <markus@intevation.de>
parents: 3855
diff changeset
189 color: #dc3545
0b8b62fd8cea client: configuration: added tint icon to classbreak color selection
Markus Kottlaender <markus@intevation.de>
parents: 3855
diff changeset
190 &:last-child:hover
0b8b62fd8cea client: configuration: added tint icon to classbreak color selection
Markus Kottlaender <markus@intevation.de>
parents: 3855
diff changeset
191 color: #28a745
3763
a1bb7c894058 client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents: 3625
diff changeset
192 .color-picker
a1bb7c894058 client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents: 3625
diff changeset
193 position: absolute
a1bb7c894058 client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents: 3625
diff changeset
194 top: -4px
a1bb7c894058 client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents: 3625
diff changeset
195 left: 19px
a1bb7c894058 client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents: 3625
diff changeset
196 z-index: 9
a1bb7c894058 client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents: 3625
diff changeset
197 overflow: hidden
a1bb7c894058 client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents: 3625
diff changeset
198 border-top-left-radius: 0 !important
a1bb7c894058 client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents: 3625
diff changeset
199 .btn
a1bb7c894058 client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents: 3625
diff changeset
200 border-radius: 0 !important
a1bb7c894058 client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents: 3625
diff changeset
201 .vc-chrome
a1bb7c894058 client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents: 3625
diff changeset
202 box-shadow: none
a1bb7c894058 client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents: 3625
diff changeset
203 /deep/
a1bb7c894058 client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents: 3625
diff changeset
204 .vc-chrome-alpha-wrap
a1bb7c894058 client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents: 3625
diff changeset
205 display: none !important
a1bb7c894058 client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents: 3625
diff changeset
206 .vc-chrome-hue-wrap
a1bb7c894058 client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents: 3625
diff changeset
207 margin-top: 10px
a1bb7c894058 client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents: 3625
diff changeset
208 .vc-chrome-saturation-wrap
a1bb7c894058 client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents: 3625
diff changeset
209 border-radius: 0
3606
a8190a570b71 client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
210 </style>
a8190a570b71 client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
211
a8190a570b71 client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
212 <script>
a8190a570b71 client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
213 /* 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
214 * without warranty, see README.md and license for details.
a8190a570b71 client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
215 *
a8190a570b71 client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
216 * SPDX-License-Identifier: AGPL-3.0-or-later
a8190a570b71 client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
217 * License-Filename: LICENSES/AGPL-3.0.txt
a8190a570b71 client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
218 *
a8190a570b71 client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
219 * Copyright (C) 2018 by via donau
a8190a570b71 client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
220 * – Österreichische Wasserstraßen-Gesellschaft mbH
a8190a570b71 client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
221 * Software engineering by Intevation GmbH
a8190a570b71 client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
222 *
a8190a570b71 client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
223 * Author(s):
a8190a570b71 client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
224 * Markus Kottländer <markus@intevation.de>
a8190a570b71 client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
225 */
3622
30a9fdac70f0 client: configuration: prepared fetching morphology classbreaks and ecdis url from backend
Markus Kottlaender <markus@intevation.de>
parents: 3614
diff changeset
226 import { mapState } from "vuex";
3763
a1bb7c894058 client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents: 3625
diff changeset
227 import { Chrome } from "vue-color";
3606
a8190a570b71 client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
228
a8190a570b71 client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
229 export default {
3763
a1bb7c894058 client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents: 3625
diff changeset
230 components: {
a1bb7c894058 client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents: 3625
diff changeset
231 "chrome-picker": Chrome
a1bb7c894058 client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents: 3625
diff changeset
232 },
3625
a688a478e35f implemented configuration backend and frontend
Markus Kottlaender <markus@intevation.de>
parents: 3622
diff changeset
233 data() {
a688a478e35f implemented configuration backend and frontend
Markus Kottlaender <markus@intevation.de>
parents: 3622
diff changeset
234 return {
a688a478e35f implemented configuration backend and frontend
Markus Kottlaender <markus@intevation.de>
parents: 3622
diff changeset
235 morphologyClassbreaks: [],
3763
a1bb7c894058 client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents: 3625
diff changeset
236 morphologyClassbreaksCompare: [],
a1bb7c894058 client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents: 3625
diff changeset
237 activeColorPicker: null,
a1bb7c894058 client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents: 3625
diff changeset
238 closeColorPickerListener: null
3625
a688a478e35f implemented configuration backend and frontend
Markus Kottlaender <markus@intevation.de>
parents: 3622
diff changeset
239 };
a688a478e35f implemented configuration backend and frontend
Markus Kottlaender <markus@intevation.de>
parents: 3622
diff changeset
240 },
3622
30a9fdac70f0 client: configuration: prepared fetching morphology classbreaks and ecdis url from backend
Markus Kottlaender <markus@intevation.de>
parents: 3614
diff changeset
241 computed: {
3763
a1bb7c894058 client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents: 3625
diff changeset
242 ...mapState("application", ["config"]),
a1bb7c894058 client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents: 3625
diff changeset
243 colorPickerTitle() {
a1bb7c894058 client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents: 3625
diff changeset
244 return this.$gettext("Choose color");
a1bb7c894058 client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents: 3625
diff changeset
245 }
3606
a8190a570b71 client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
246 },
a8190a570b71 client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
247 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
248 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
249 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
250 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
251 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
252 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
253 ? [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
254 : [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
255 );
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
256 },
3763
a1bb7c894058 client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents: 3625
diff changeset
257 showColorPicker(id) {
a1bb7c894058 client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents: 3625
diff changeset
258 this.activeColorPicker = this.activeColorPicker === id ? null : id;
a1bb7c894058 client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents: 3625
diff changeset
259 },
3622
30a9fdac70f0 client: configuration: prepared fetching morphology classbreaks and ecdis url from backend
Markus Kottlaender <markus@intevation.de>
parents: 3614
diff changeset
260 submit() {
3850
0d0e52612c32 client: reload config right after saving it to make sure everything is updated
Markus Kottlaender <markus@intevation.de>
parents: 3763
diff changeset
261 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
262 .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
263 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
264 .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
265 .join(","),
0d0e52612c32 client: reload config right after saving it to make sure everything is updated
Markus Kottlaender <markus@intevation.de>
parents: 3763
diff changeset
266 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
267 .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
268 .join(",")
0d0e52612c32 client: reload config right after saving it to make sure everything is updated
Markus Kottlaender <markus@intevation.de>
parents: 3763
diff changeset
269 })
0d0e52612c32 client: reload config right after saving it to make sure everything is updated
Markus Kottlaender <markus@intevation.de>
parents: 3763
diff changeset
270 .finally(() => this.$store.dispatch("application/loadConfig"));
3622
30a9fdac70f0 client: configuration: prepared fetching morphology classbreaks and ecdis url from backend
Markus Kottlaender <markus@intevation.de>
parents: 3614
diff changeset
271 }
3625
a688a478e35f implemented configuration backend and frontend
Markus Kottlaender <markus@intevation.de>
parents: 3622
diff changeset
272 },
a688a478e35f implemented configuration backend and frontend
Markus Kottlaender <markus@intevation.de>
parents: 3622
diff changeset
273 mounted() {
a688a478e35f implemented configuration backend and frontend
Markus Kottlaender <markus@intevation.de>
parents: 3622
diff changeset
274 this.morphologyClassbreaks = this.config.morphology_classbreaks
a688a478e35f implemented configuration backend and frontend
Markus Kottlaender <markus@intevation.de>
parents: 3622
diff changeset
275 .split(",")
3763
a1bb7c894058 client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents: 3625
diff changeset
276 .map(cb => cb.split(":"))
a1bb7c894058 client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents: 3625
diff changeset
277 .map(cb => {
a1bb7c894058 client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents: 3625
diff changeset
278 cb[0] = Number(cb[0]);
a1bb7c894058 client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents: 3625
diff changeset
279 cb[1] = cb[1] || "#ffffff";
a1bb7c894058 client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents: 3625
diff changeset
280 return cb;
a1bb7c894058 client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents: 3625
diff changeset
281 });
3625
a688a478e35f implemented configuration backend and frontend
Markus Kottlaender <markus@intevation.de>
parents: 3622
diff changeset
282 this.morphologyClassbreaksCompare = this.config.morphology_classbreaks_compare
a688a478e35f implemented configuration backend and frontend
Markus Kottlaender <markus@intevation.de>
parents: 3622
diff changeset
283 .split(",")
3763
a1bb7c894058 client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents: 3625
diff changeset
284 .map(cb => cb.split(":"))
a1bb7c894058 client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents: 3625
diff changeset
285 .map(cb => {
a1bb7c894058 client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents: 3625
diff changeset
286 cb[0] = Number(cb[0]);
a1bb7c894058 client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents: 3625
diff changeset
287 cb[1] = cb[1] || "#ffffff";
a1bb7c894058 client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents: 3625
diff changeset
288 return cb;
a1bb7c894058 client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents: 3625
diff changeset
289 });
a1bb7c894058 client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents: 3625
diff changeset
290
a1bb7c894058 client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents: 3625
diff changeset
291 this.closeColorPickerListener = e => {
a1bb7c894058 client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents: 3625
diff changeset
292 // Escape
a1bb7c894058 client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents: 3625
diff changeset
293 if (e.keyCode === 27) {
a1bb7c894058 client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents: 3625
diff changeset
294 this.activeColorPicker = null;
a1bb7c894058 client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents: 3625
diff changeset
295 }
a1bb7c894058 client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents: 3625
diff changeset
296 };
a1bb7c894058 client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents: 3625
diff changeset
297 window.addEventListener("keydown", this.closeColorPickerListener);
a1bb7c894058 client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents: 3625
diff changeset
298 },
a1bb7c894058 client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents: 3625
diff changeset
299 destroyed() {
a1bb7c894058 client: configuration: morphology classbreaks: added color selection
Markus Kottlaender <markus@intevation.de>
parents: 3625
diff changeset
300 window.removeEventListener("keydown", this.closeColorPickerListener);
3606
a8190a570b71 client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
301 }
a8190a570b71 client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
302 };
a8190a570b71 client: configuration: prepared morphology classbreaks UI
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
303 </script>