Mercurial > gemma

comparison client/src/components/fairway/AvailableFairwayDepth.vue @ 3239:a7d44d1ae57d

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
available_fairway_depth: legend
author Thomas Junk <thomas.junk@intevation.de>
date Fri, 10 May 2019 11:56:57 +0200
parents 0c5a28ffe9ee
children b07b4cca5e34
comparison
equal deleted inserted replaced
3238:94e966ebef35 3239:a7d44d1ae57d
1 <template> 1 <template>
2 <div class="d-flex flex-column flex-fill"> 2 <div class="d-flex flex-column flex-fill">
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="mt-3 d-flex flex-row my-auto"> 5 <div class="mt-3 d-flex flex-row my-auto">
6 <div class="my-auto"> 6 <div class="my-auto mx-auto">
7 <ul class="list-group"> 7 <ul class="list-group">
8 <li class="text-left list-item" v-for="entry in legend" :key="entry"> 8 <li
9 :style="legendStyle(index)"
10 class="text-left list-group-item"
11 v-for="(entry, index) in legend"
12 :key="index"
13 >
9 {{ entry }} 14 {{ entry }}
10 </li> 15 </li>
11 </ul> 16 </ul>
12 </div> 17 </div>
13 <div :id="containerId" class="ml-auto diagram-container"></div> 18 <div :id="containerId" class="mx-auto my-auto diagram-container"></div>
14 </div> 19 </div>
15 </div> 20 </div>
16 </template> 21 </template>
17 22
18 <style></style> 23 <style></style>
94 featureName() { 99 featureName() {
95 return this.selectedFairwayAvailabilityFeature.properties.name; 100 return this.selectedFairwayAvailabilityFeature.properties.name;
96 } 101 }
97 }, 102 },
98 methods: { 103 methods: {
104 legendStyle(index) {
105 if (index == 0) return `background-color: ${this.$options.COLORS.LDC};`;
106 if (index < 4)
107 return `background-color: ${this.$options.COLORS.REST[index - 1]};`;
108 return `background-color: ${this.$options.COLORS.HIGHEST};`;
109 },
99 close() { 110 close() {
100 this.$store.commit("application/paneSetup", "DEFAULT"); 111 this.$store.commit("application/paneSetup", "DEFAULT");
101 }, 112 },
102 drawDiagram() { 113 drawDiagram() {
103 this.dimensions = this.getDimensions({ 114 this.dimensions = this.getDimensions({