Mercurial > gemma
changeset 3239:a7d44d1ae57d
available_fairway_depth: legend
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Fri, 10 May 2019 11:56:57 +0200 |
parents | 94e966ebef35 |
children | 5240f5440b62 |
files | client/src/components/fairway/AvailableFairwayDepth.vue |
diffstat | 1 files changed, 14 insertions(+), 3 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/fairway/AvailableFairwayDepth.vue Fri May 10 11:45:39 2019 +0200 +++ b/client/src/components/fairway/AvailableFairwayDepth.vue Fri May 10 11:56:57 2019 +0200 @@ -3,14 +3,19 @@ <UIBoxHeader icon="chart-area" :title="title" :closeCallback="close" /> <UISpinnerOverlay v-if="loading" /> <div class="mt-3 d-flex flex-row my-auto"> - <div class="my-auto"> + <div class="my-auto mx-auto"> <ul class="list-group"> - <li class="text-left list-item" v-for="entry in legend" :key="entry"> + <li + :style="legendStyle(index)" + class="text-left list-group-item" + v-for="(entry, index) in legend" + :key="index" + > {{ entry }} </li> </ul> </div> - <div :id="containerId" class="ml-auto diagram-container"></div> + <div :id="containerId" class="mx-auto my-auto diagram-container"></div> </div> </div> </template> @@ -96,6 +101,12 @@ } }, methods: { + legendStyle(index) { + if (index == 0) return `background-color: ${this.$options.COLORS.LDC};`; + if (index < 4) + return `background-color: ${this.$options.COLORS.REST[index - 1]};`; + return `background-color: ${this.$options.COLORS.HIGHEST};`; + }, close() { this.$store.commit("application/paneSetup", "DEFAULT"); },