Mercurial > gemma

comparison client/src/components/fairway/AvailableFairwayDepthLNWL.vue @ 3474:a39795393c7c

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
legend
author Thomas Junk <thomas.junk@intevation.de>
date Mon, 27 May 2019 12:16:45 +0200
parents 48d09fb1d6c7
children 45104cc6fd50
comparison
equal deleted inserted replaced
3473:d66cae5be0a1 3474:a39795393c7c
3 <UIBoxHeader icon="chart-area" :title="title" :closeCallback="close" /> 3 <UIBoxHeader icon="chart-area" :title="title" :closeCallback="close" />
4 <UISpinnerOverlay v-if="loading" /> 4 <UISpinnerOverlay v-if="loading" />
5 <div class="d-flex flex-fill"> 5 <div class="d-flex flex-fill">
6 <DiagramLegend> 6 <DiagramLegend>
7 <div v-for="(entry, index) in legendLNWL" :key="index" class="legend"> 7 <div v-for="(entry, index) in legendLNWL" :key="index" class="legend">
8 <span
9 :style="
10 `${legendStyle(
11 index
12 )}; border-radius: 0.25rem; width: 40px; height: 20px;`
13 "
14 ></span>
8 {{ entry }} 15 {{ entry }}
9 </div> 16 </div>
10 <div> 17 <div>
11 <select 18 <select
12 @change="applyChange" 19 @change="applyChange"
230 spaceBetween() { 237 spaceBetween() {
231 return this.widthPerItem * 0.2; 238 return this.widthPerItem * 0.2;
232 } 239 }
233 }, 240 },
234 methods: { 241 methods: {
242 legendStyle(index) {
243 const style = {
244 0: `background-color: ${this.$options.LWNLCOLORS.LDC};`,
245 1: `background-color: ${this.$options.AFDCOLORS[0]};`,
246 2: `background-color: ${this.$options.AFDCOLORS[1]};`,
247 3: `background-color: ${this.$options.LWNLCOLORS.HDC};`
248 };
249 return style[index];
250 },
235 applyChange() { 251 applyChange() {
236 if (this.form.template.hasOwnProperty("properties")) { 252 if (this.form.template.hasOwnProperty("properties")) {
237 this.templateData = this.defaultTemplate; 253 this.templateData = this.defaultTemplate;
238 return; 254 return;
239 } 255 }