Mercurial > gemma
view client/src/components/systemconfiguration/MorphologyClassbreaks.vue @ 3855:4a2a778f35da
client: configuration: classbreaks: fixed databinding issue and added possibility to add classbreaks at any position
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Tue, 09 Jul 2019 13:31:13 +0200 |
parents | 0d0e52612c32 |
children | 0b8b62fd8cea |
line wrap: on
line source
<template> <div class="d-flex flex-column pb-4 border-bottom"> <h5 class="py-2 px-3 mb-2 m-0"> <translate>Bottleneck Morphology Classbreaks</translate> </h5> <div class="px-3"> <h6 class="font-weight-bold"><translate>Sounding Result</translate></h6> <div class="d-flex flex-wrap"> <div class="input-group mb-3 mr-2 classbreak" v-for="(value, i) in morphologyClassbreaks" :key="i" > <div class="input-group-prepend"> <button class="btn btn-sm btn-outline-secondary" :style=" 'width: 20px; background-color: ' + (morphologyClassbreaks[i][1] || 'transparent') " type="button" @click="showColorPicker('sounding-' + i)" ></button> <div class="color-picker card shadow-sm" v-if="activeColorPicker === 'sounding-' + i" > <UIBoxHeader :title="colorPickerTitle" icon="paint-brush" :closeCallback="() => (activeColorPicker = null)" :actions="[ { callback: () => { morphologyClassbreaks[i][1] = '#ffffff'; activeColorPicker = null; }, icon: 'trash' } ]" /> <chrome-picker v-model="morphologyClassbreaks[i][1]" @input="color => (morphologyClassbreaks[i][1] = color.hex)" /> </div> </div> <input v-model="morphologyClassbreaks[i][0]" type="number" min="0" step="0.1" class="form-control form-control-sm" /> <div class="input-group-append"> <button class="btn btn-sm btn-outline-secondary" type="button" @click="morphologyClassbreaks.splice(i, 1)" > <font-awesome-icon icon="times" /> </button> <button class="btn btn-sm btn-outline-secondary" @click="addClassbreak(morphologyClassbreaks, i)" > <font-awesome-icon icon="plus" /> </button> </div> </div> <button v-if="!morphologyClassbreaks.length" class="btn btn-sm btn-success mb-3" @click="addClassbreak(morphologyClassbreaks, 0)" > <font-awesome-icon icon="plus" /> </button> </div> </div> <div class="px-3"> <h6 class="font-weight-bold"> <translate>Sounding Result Comparison</translate> </h6> <div class="d-flex flex-wrap"> <div class="input-group mb-3 mr-2 classbreak" v-for="(value, i) in morphologyClassbreaksCompare" :key="i" > <div class="input-group-prepend"> <button class="btn btn-sm btn-outline-secondary" :style=" 'width: 20px; background-color: ' + (morphologyClassbreaksCompare[i][1] || 'transparent') " type="button" @click="showColorPicker('compare-' + i)" ></button> <div class="color-picker card shadow-sm" v-if="activeColorPicker === 'compare-' + i" > <UIBoxHeader :title="colorPickerTitle" icon="paint-brush" :closeCallback="() => (activeColorPicker = null)" :actions="[ { callback: () => { morphologyClassbreaksCompare[i][1] = '#ffffff'; activeColorPicker = null; }, icon: 'trash' } ]" /> <chrome-picker v-model="morphologyClassbreaksCompare[i][1]" @input=" color => (morphologyClassbreaksCompare[i][1] = color.hex) " /> </div> </div> <input v-model="morphologyClassbreaksCompare[i][0]" type="number" step="0.1" class="form-control form-control-sm" /> <div class="input-group-append"> <button class="btn btn-sm btn-outline-secondary" type="button" @click="morphologyClassbreaksCompare.splice(i, 1)" > <font-awesome-icon icon="times" /> </button> <button class="btn btn-sm btn-outline-secondary" @click="addClassbreak(morphologyClassbreaksCompare, i)" > <font-awesome-icon icon="plus" /> </button> </div> </div> <button v-if="!morphologyClassbreaksCompare.length" class="btn btn-sm btn-success mb-3" @click="addClassbreak(morphologyClassbreaksCompare, 0)" > <font-awesome-icon icon="plus" /> </button> </div> </div> <div class="mt-4 px-3"> <a @click.prevent="submit" class="btn btn-info btn-sm text-white"> <translate>Send</translate> </a> </div> </div> </template> <style lang="sass" scoped> .classbreak width: 135px .btn-outline-secondary border-color: #ccc color: #ccc &:hover background: #eee color: #dc3545 &:last-child:hover color: #28a745 .color-picker position: absolute top: -4px left: 19px z-index: 9 overflow: hidden border-top-left-radius: 0 !important .btn border-radius: 0 !important .vc-chrome box-shadow: none /deep/ .vc-chrome-alpha-wrap display: none !important .vc-chrome-hue-wrap margin-top: 10px .vc-chrome-saturation-wrap border-radius: 0 </style> <script> /* This is Free Software under GNU Affero General Public License v >= 3.0 * without warranty, see README.md and license for details. * * SPDX-License-Identifier: AGPL-3.0-or-later * License-Filename: LICENSES/AGPL-3.0.txt * * Copyright (C) 2018 by via donau * – Österreichische Wasserstraßen-Gesellschaft mbH * Software engineering by Intevation GmbH * * Author(s): * Markus Kottländer <markus@intevation.de> */ import { mapState } from "vuex"; import { Chrome } from "vue-color"; export default { components: { "chrome-picker": Chrome }, data() { return { morphologyClassbreaks: [], morphologyClassbreaksCompare: [], activeColorPicker: null, closeColorPickerListener: null }; }, computed: { ...mapState("application", ["config"]), colorPickerTitle() { return this.$gettext("Choose color"); } }, methods: { addClassbreak(classbreaks, i) { classbreaks.splice( i, 0, classbreaks.length > i ? [classbreaks[i][0], classbreaks[i][1]] // create new array! : [1, "#ffffff"] ); }, showColorPicker(id) { this.activeColorPicker = this.activeColorPicker === id ? null : id; }, submit() { this.$store .dispatch("application/saveConfig", { morphology_classbreaks: this.morphologyClassbreaks .map(cb => (cb[1] === "#ffffff" ? cb[0] : cb.join(":"))) .join(","), morphology_classbreaks_compare: this.morphologyClassbreaksCompare .map(cb => (cb[1] === "#ffffff" ? cb[0] : cb.join(":"))) .join(",") }) .finally(() => this.$store.dispatch("application/loadConfig")); } }, mounted() { this.morphologyClassbreaks = this.config.morphology_classbreaks .split(",") .map(cb => cb.split(":")) .map(cb => { cb[0] = Number(cb[0]); cb[1] = cb[1] || "#ffffff"; return cb; }); this.morphologyClassbreaksCompare = this.config.morphology_classbreaks_compare .split(",") .map(cb => cb.split(":")) .map(cb => { cb[0] = Number(cb[0]); cb[1] = cb[1] || "#ffffff"; return cb; }); this.closeColorPickerListener = e => { // Escape if (e.keyCode === 27) { this.activeColorPicker = null; } }; window.addEventListener("keydown", this.closeColorPickerListener); }, destroyed() { window.removeEventListener("keydown", this.closeColorPickerListener); } }; </script>