Mercurial > gemma
changeset 3474:a39795393c7c
legend
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Mon, 27 May 2019 12:16:45 +0200 |
parents | d66cae5be0a1 |
children | 45104cc6fd50 |
files | client/src/components/fairway/AvailableFairwayDepthLNWL.vue |
diffstat | 1 files changed, 16 insertions(+), 0 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/fairway/AvailableFairwayDepthLNWL.vue Mon May 27 12:15:35 2019 +0200 +++ b/client/src/components/fairway/AvailableFairwayDepthLNWL.vue Mon May 27 12:16:45 2019 +0200 @@ -5,6 +5,13 @@ <div class="d-flex flex-fill"> <DiagramLegend> <div v-for="(entry, index) in legendLNWL" :key="index" class="legend"> + <span + :style=" + `${legendStyle( + index + )}; border-radius: 0.25rem; width: 40px; height: 20px;` + " + ></span> {{ entry }} </div> <div> @@ -232,6 +239,15 @@ } }, methods: { + legendStyle(index) { + const style = { + 0: `background-color: ${this.$options.LWNLCOLORS.LDC};`, + 1: `background-color: ${this.$options.AFDCOLORS[0]};`, + 2: `background-color: ${this.$options.AFDCOLORS[1]};`, + 3: `background-color: ${this.$options.LWNLCOLORS.HDC};` + }; + return style[index]; + }, applyChange() { if (this.form.template.hasOwnProperty("properties")) { this.templateData = this.defaultTemplate;