- Bottleneck Fill Color -

- +

+ {{ f.name }} Fill Color +

+ +

- Bottleneck Border Color +

+ {{ f.name }} Border Color +

+ +

- -

+ + Send + + + Reset to defaults +

- - Send - - - Reset to defaults - -

@@ -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; diff -r 2ac52d89619e -r e3210c87f497 client/src/components/systemconfiguration/defaults.js --- 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 } };