Mercurial > gemma

comparison client/src/components/systemconfiguration/ColorSettings.vue @ 4238:fe24cdde614d

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
styles-config: prepare components for WMS-Layer styling and set default color values
author Fadi Abbud <fadi.abbud@intevation.de>
date Wed, 21 Aug 2019 17:21:14 +0200
parents fec07ba0fa60
children a4f76e170290
comparison
equal deleted inserted replaced
4237:c831dcad8a10 4238:fe24cdde614d
1 <template> 1 <template>
2 <div class="d-flex flex-column py-4"> 2 <div class="d-flex flex-column py-3">
3 <div class="px-3 container-fluid"> 3 <div class="px-3 container-fluid">
4 <div class="row"> 4 <div class="row">
5 <div v-for="f in features" :key="f.key" class="col-sm-2 mt-2"> 5 <div v-for="f in features" :key="f.key" class="col-sm-2 mt-2">
6 <div v-if="f.fillColor" class="card"> 6 <div v-if="f.fillColor" class="card mt-3">
7 <div class="card-header small text-center"> 7 <div class="card-header small text-center">
8 <span v-translate="{ layerName: f.name }" 8 <span v-translate="{ layerName: f.name }"
9 >%{layerName} Fill Color</span 9 >%{layerName} Fill Color</span
10 > 10 >
11 </div> 11 </div>
12 <div class="card-body p-0"> 12 <div class="card-body p-0">
13 <chrome-picker v-model="f.fillColor" /> 13 <chrome-picker v-model="f.fillColor" />
14 </div> 14 </div>
15 </div> 15 </div>
16 <div class="mt-2"> 16 <div class="mt-3">
17 <div v-if="f.strokeColor" class="card"> 17 <div v-if="f.strokeColor" class="card">
18 <div class="card-header small text-center"> 18 <div class="card-header small text-center">
19 <span v-translate="{ layerName: f.name }" 19 <span v-translate="{ layerName: f.name }"
20 >%{layerName} Border Color</span 20 >%{layerName} Border Color</span
21 > 21 >
137 name: "Distance Marks", 137 name: "Distance Marks",
138 strokeColor: initSColor, 138 strokeColor: initSColor,
139 fillColor: initSColor 139 fillColor: initSColor
140 }, 140 },
141 { 141 {
142 name: "Distance Marks, Axis",
143 strokeColor: initSColor,
144 fillColor: initSColor
145 },
146 {
142 name: "Waterway profiles", 147 name: "Waterway profiles",
148 strokeColor: initSColor
149 },
150 {
151 name: "Waterway Axis",
152 strokeColor: initSColor
153 },
154 {
155 name: "Waterway Area",
143 strokeColor: initSColor 156 strokeColor: initSColor
144 } 157 }
145 ] 158 ]
146 }; 159 };
147 }, 160 },
204 case "Waterway profiles": { 217 case "Waterway profiles": {
205 feature.strokeColor = 218 feature.strokeColor =
206 defaults.feature_colours_waterwayprofiles_stroke; 219 defaults.feature_colours_waterwayprofiles_stroke;
207 break; 220 break;
208 } 221 }
222 case "Waterway Axis": {
223 feature.strokeColor = defaults.feature_colours_waterway_axis_stroke;
224 break;
225 }
226 case "Waterway Area": {
227 feature.strokeColor = defaults.feature_colours_waterway_area_stroke;
228 break;
229 }
209 case "Distance Marks": { 230 case "Distance Marks": {
210 feature.strokeColor = defaults.feature_colours_distancemarks_stroke; 231 feature.strokeColor = defaults.feature_colours_distancemarks_stroke;
211 feature.fillColor = defaults.feature_colours_distancemarks_fill; 232 feature.fillColor = defaults.feature_colours_distancemarks_fill;
233 break;
234 }
235 case "Distance Marks, Axis": {
236 feature.strokeColor =
237 defaults.feature_colours_distancemarks_axis_stroke;
238 feature.fillColor = defaults.feature_colours_distancemarks_axis_fill;
239 break;
212 } 240 }
213 } 241 }
214 }, 242 },
215 submit(feature) { 243 submit(feature) {
216 let strokeC = feature.strokeColor.hex8 || feature.strokeColor, 244 let strokeC = feature.strokeColor.hex8 || feature.strokeColor,
333 } else { 361 } else {
334 noChangeMsg(feature.name); 362 noChangeMsg(feature.name);
335 } 363 }
336 break; 364 break;
337 } 365 }
366 case "Waterway Axis": {
367 if (strokeC !== this.config.waterway_axis_stroke) {
368 this.$store
369 .dispatch("application/saveConfig", {
370 waterway_axis_stroke:
371 feature.strokeColor.hex || feature.strokeColor
372 })
373 .finally(() => {
374 this.$store.dispatch("application/loadConfig");
375 });
376 } else {
377 noChangeMsg(feature.name);
378 }
379 break;
380 }
381 case "Waterway Area": {
382 if (strokeC !== this.config.waterway_area_stroke) {
383 this.$store
384 .dispatch("application/saveConfig", {
385 waterway_area_stroke:
386 feature.strokeColor.hex || feature.strokeColor
387 })
388 .finally(() => {
389 this.$store.dispatch("application/loadConfig");
390 });
391 } else {
392 noChangeMsg(feature.name);
393 }
394 break;
395 }
338 case "Distance Marks": { 396 case "Distance Marks": {
339 if ( 397 if (
340 strokeC !== this.config.distance_marks_stroke || 398 strokeC !== this.config.distance_marks_stroke ||
341 fillC !== this.config.distance_marks_fill 399 fillC !== this.config.distance_marks_fill
342 ) { 400 ) {
343 this.$store 401 this.$store
344 .dispatch("application/saveConfig", { 402 .dispatch("application/saveConfig", {
345 distance_marks_stroke: 403 distance_marks_stroke:
346 feature.strokeColor.hex || feature.strokeColor, 404 feature.strokeColor.hex || feature.strokeColor,
347 distance_marks_fill: feature.fillColor.hex || feature.fillColor 405 distance_marks_fill: feature.fillColor.hex || feature.fillColor
406 })
407 .finally(() => this.$store.dispatch("application/loadConfig"));
408 } else {
409 noChangeMsg(feature.name);
410 }
411 break;
412 }
413 case "Distance Marks, Axis": {
414 if (
415 strokeC !== this.config.distance_marks_axis_stroke ||
416 fillC !== this.config.distance_marks_axis_fill
417 ) {
418 this.$store
419 .dispatch("application/saveConfig", {
420 distance_marks_axis_stroke:
421 feature.strokeColor.hex || feature.strokeColor,
422 distance_marks_axis_fill:
423 feature.fillColor.hex || feature.fillColor
348 }) 424 })
349 .finally(() => this.$store.dispatch("application/loadConfig")); 425 .finally(() => this.$store.dispatch("application/loadConfig"));
350 } else { 426 } else {
351 noChangeMsg(feature.name); 427 noChangeMsg(feature.name);
352 } 428 }
354 } 430 }
355 } 431 }
356 } 432 }
357 }, 433 },
358 mounted() { 434 mounted() {
359 this.features[0].strokeColor = this.config.bottlenecks_stroke; 435 this.features[0].strokeColor = this.config.bottlenecks_stroke || initSColor;
360 this.features[0].fillColor = this.config.bottlenecks_fill; 436 this.features[0].fillColor = this.config.bottlenecks_fill || initFColor;
361 this.features[1].strokeColor = this.config.stretches_stroke; 437 this.features[1].strokeColor = this.config.stretches_stroke || initSColor;
362 this.features[1].fillColor = this.config.stretches_fill; 438 this.features[1].fillColor = this.config.stretches_fill || initFColor;
363 this.features[2].strokeColor = this.config.sections_stroke; 439 this.features[2].strokeColor = this.config.sections_stroke || initSColor;
364 this.features[2].fillColor = this.config.sections_fill; 440 this.features[2].fillColor = this.config.sections_fill || initFColor;
365 this.features[3].strokeColor = this.config.fairwaydimensionslos1_stroke; 441 this.features[3].strokeColor = this.config.fairwaydimensionslos1_stroke;
366 this.features[3].fillColor = this.config.fairwaydimensionslos1_fill; 442 this.features[3].fillColor =
367 this.features[4].strokeColor = this.config.fairwaydimensionslos2_stroke; 443 this.config.fairwaydimensionslos1_fill || initFColor;
368 this.features[4].fillColor = this.config.fairwaydimensionslos2_fill; 444 this.features[4].strokeColor =
369 this.features[5].strokeColor = this.config.fairwaydimensionslos3_stroke; 445 this.config.fairwaydimensionslos2_stroke || initSColor;
370 this.features[5].fillColor = this.config.fairwaydimensionslos3_fill; 446 this.features[4].fillColor =
371 this.features[6].strokeColor = this.config.distance_marks_stroke; 447 this.config.fairwaydimensionslos2_fill || initFColor;
372 this.features[6].fillColor = this.config.distance_marks_fill; 448 this.features[5].strokeColor =
373 this.features[7].strokeColor = this.config.waterwayprofiles_stroke; 449 this.config.fairwaydimensionslos3_stroke || initSColor;
450 this.features[5].fillColor =
451 this.config.fairwaydimensionslos3_fill || initFColor;
452 this.features[6].strokeColor =
453 this.config.distance_marks_stroke || initSColor;
454 this.features[6].fillColor = this.config.distance_marks_fill || initFColor;
455 this.features[7].strokeColor =
456 this.config.distance_marks_axis_stroke || initSColor;
457 this.features[7].fillColor =
458 this.config.distance_marks_axis_fill || initFColor;
459 this.features[8].strokeColor = this.config.waterwayprofiles_stroke;
460 this.features[9].strokeColor =
461 this.config.waterway_axis_stroke || initSColor;
462 this.features[10].strokeColor =
463 this.config.waterway_area_stroke || initSColor;
374 } 464 }
375 }; 465 };
376 </script> 466 </script>