Mercurial > gemma
changeset 4198:e3210c87f497 stylesconfig
client: implement basis layer-styles configurations
* refactor ColorSetting component
* set default layers styles
| author | Fadi Abbud <fadi.abbud@intevation.de> |
|---|---|
| date | Thu, 08 Aug 2019 16:23:17 +0200 |
| parents | 2ac52d89619e |
| children | 8509d80b85a1 |
| files | client/src/components/systemconfiguration/ColorSettings.vue client/src/components/systemconfiguration/defaults.js |
| diffstat | 2 files changed, 126 insertions(+), 37 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/systemconfiguration/ColorSettings.vue Wed Aug 07 15:23:41 2019 +0200 +++ b/client/src/components/systemconfiguration/ColorSettings.vue Thu Aug 08 16:23:17 2019 +0200 @@ -2,36 +2,44 @@ <div class="d-flex flex-column py-4"> <div class="px-3 container-fluid"> <div class="row"> - <div class="col-sm-2"> - <div class="card"> - <div class="card-header small"> - <translate>Bottleneck Fill Color</translate> - </div> - <div class="card-body p-0"> - <chrome-picker v-model="fillColor" /> + <div v-for="f in features" :key="f.key" class="column n ml-4"> + <div class="row-sm-2 mt-1"> + <div class="card"> + <div class="card-header small text-left"> + <translate>{{ f.name }} Fill Color</translate> + </div> + <div class="card-body p-0"> + <chrome-picker v-model="f.fillColor" /> + </div> </div> </div> - </div> - <div class="col-sm-2"> - <div class="card"> - <div class="card-header small"> - <translate>Bottleneck Border Color</translate> + <div class="row-sm-2 mt-1"> + <div class="card"> + <div class="card-header small font-weight text-left"> + <translate>{{ f.name }} Border Color</translate> + </div> + <div class="card-body p-0"> + <chrome-picker v-model="f.strokeColor" /> + </div> </div> - <div class="card-body p-0"> - <chrome-picker v-model="strokeColor" /> - </div> + </div> + <div class="mt-2"> + <a + @click.prevent="submit(f)" + class="btn btn-info btn-sm text-white" + > + <translate>Send</translate> + </a> + <a + @click.prevent="reset(f)" + class="btn btn-outline-info btn-sm ml-2" + > + <translate>Reset to defaults</translate> + </a> </div> </div> </div> </div> - <div class="mt-4 px-3"> - <a @click.prevent="submit" class="btn btn-info btn-sm text-white"> - <translate>Send</translate> - </a> - <a @click.prevent="reset" class="btn btn-outline-info btn-sm ml-2"> - <translate>Reset to defaults</translate> - </a> - </div> </div> </template> @@ -71,14 +79,47 @@ import { displayError, displayInfo } from "@/lib/errors"; import defaults from "./defaults"; +const initSColor = { r: 0, g: 0, b: 0, a: 1.0 }, + initFColor = { r: 0, g: 0, b: 0, a: 1.0 }; + export default { name: "colorsettings", data() { return { sent: false, - strokeColor: { r: 0, g: 0, b: 0, a: 1.0 }, - fillColor: { r: 0, g: 0, b: 0, a: 1.0 }, - currentConfig: null + currentConfig: null, + features: [ + { + name: "Bottlenecks", + fillColor: { r: 0, g: 0, b: 0, a: 1.0 }, + strokeColor: { r: 0, g: 0, b: 0, a: 1.0 } + }, + { + name: "Stretches", + fillColor: initFColor, + strokeColor: initSColor + }, + { + name: "Sections", + fillColor: initFColor, + strokeColor: initSColor + }, + { + name: "LOS_1", + fillColor: initFColor, + strokeColor: initSColor + }, + { + name: "LOS_2", + fillColor: initFColor, + strokeColor: initSColor + }, + { + name: "LOS_3", + fillColor: initFColor, + strokeColor: initSColor + } + ] }; }, components: { @@ -86,15 +127,51 @@ "compact-picker": Compact }, methods: { - reset() { - this.strokeColor = defaults.feature_colours_bottlenecks_stroke; - this.fillColor = defaults.feature_colours_bottlenecks_fill; + reset(feature) { + switch (feature.name) { + case "Bottlenecks": { + feature.strokeColor = defaults.feature_colours_bottlenecks_stroke; + feature.fillColor = defaults.feature_colours_bottlenecks_fill; + break; + } + case "Stretches": { + feature.strokeColor = defaults.feature_colours_stretches_stroke; + feature.fillColor = defaults.feature_colours_stretches_fill; + break; + } + case "Sections": { + feature.strokeColor = defaults.feature_colours_sections_stroke; + feature.fillColor = defaults.feature_colours_sections_fill; + break; + } + case "LOS_1": { + feature.strokeColor = + defaults.feature_colours_fairwaydimensionslos1_stroke; + feature.fillColor = + defaults.feature_colours_fairwaydimensionslos1_fill; + break; + } + case "LOS_2": { + feature.strokeColor = + defaults.feature_colours_fairwaydimensionslos2_stroke; + feature.fillColor = + defaults.feature_colours_fairwaydimensionslos2_fill; + break; + } + case "LOS_3": { + feature.strokeColor = + defaults.feature_colours_fairwaydimensionslos3_stroke; + feature.fillColor = + defaults.feature_colours_fairwaydimensionslos3_fill; + break; + } + } }, - submit() { + submit(feature) { Promise.all([ HTTP.put( - "/system/style/Bottlenecks/stroke", - this.strokeColor.rgba || this.strokeColor, + `/system/style/${feature.name}/stroke`, + feature.strokeColor.rgba || feature.strokeColor, { headers: { "X-Gemma-Auth": localStorage.getItem("token"), @@ -103,8 +180,8 @@ } ), HTTP.put( - "/system/style/Bottlenecks/fill", - this.fillColor.rgba || this.fillColor, + `/system/style/${feature.name}/fill`, + feature.fillColor.rgba || feature.fillColor, { headers: { "X-Gemma-Auth": localStorage.getItem("token"), @@ -128,6 +205,7 @@ } }, mounted() { + // For now we getting only the stored styles for bottlenecks HTTP.get("/system/style/Bottlenecks/stroke", { headers: { "X-Gemma-Auth": localStorage.getItem("token"), @@ -135,7 +213,7 @@ } }) .then(response => { - this.strokeColor = response.data.colour; + this.features[0].strokeColor = response.data.colour; }) .catch(error => { const { status, data } = error.response; @@ -152,7 +230,7 @@ } }) .then(response => { - this.fillColor = response.data.colour; + this.features[0].fillColor = response.data.colour; }) .catch(error => { const { status, data } = error.response;
--- a/client/src/components/systemconfiguration/defaults.js Wed Aug 07 15:23:41 2019 +0200 +++ b/client/src/components/systemconfiguration/defaults.js Thu Aug 08 16:23:17 2019 +0200 @@ -13,5 +13,16 @@ ecdis_wms_url: "https://service.d4d-portal.info/wms/", ecdis_wms_params: '{"LAYERS": "d4d", "VERSION": "1.1.1", "TILED": true}', feature_colours_bottlenecks_stroke: { r: 250, g: 40, b: 255, a: 1 }, - feature_colours_bottlenecks_fill: { r: 255, g: 37, b: 196, a: 0.14 } + feature_colours_bottlenecks_fill: { r: 255, g: 37, b: 196, a: 0.14 }, + feature_colours_stretches_stroke: { r: 250, g: 200, b: 0, a: 0.8 }, + feature_colours_stretches_fill: { r: 250, g: 200, b: 10, a: 0.3 }, + feature_colours_sections_stroke: { r: 255, g: 150, b: 10, a: 0.8 }, + feature_colours_sections_fill: { r: 255, g: 150, b: 0, a: 0.3 }, + feature_colours_fairwaydimensionslos1_stroke: { r: 0, g: 0, b: 255, a: 0.8 }, + feature_colours_fairwaydimensionslos1_fill: { r: 240, g: 230, b: 0, a: 0.2 }, + feature_colours_fairwaydimensionslos2_stroke: { r: 0, g: 0, b: 255, a: 0.9 }, + feature_colours_fairwaydimensionslos2_fill: { r: 240, g: 230, b: 0, a: 0.1 }, + feature_colours_fairwaydimensionslos3_stroke: { r: 0, g: 0, b: 255, a: 1.0 }, + feature_colours_fairwaydimensionslos3_fill: { r: 240, g: 230, b: 0, a: 0.4 }, + feature_colours_waterwayprofiles_stroke: { r: 0, g: 0, b: 255, a: 0.5 } };