Mercurial > gemma
view client/src/morphtool/Morphtool.vue @ 1115:1b160eda22cf store-refactoring
moved drawMode to map store
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Mon, 05 Nov 2018 14:05:01 +0100 |
parents | f106aee673e7 |
children | 7e788814cbde |
line wrap: on
line source
<template> <div class="morphcontainer"> <div v-if="selectedBottleneck && surveys && !selectedSurvey" class="ui-element card card-body shadow"> <div class="headline"> <h4>{{ selectedBottleneck }}</h4> <hr> <div @click="clearSelection" class="float-left ui-element d-flex morphtoolminus" > <i class="fa fa-close morphtoolsminus"></i> </div> </div> <ul class="list-group surveylist"> <li v-for="survey of surveys" :key="survey.data_info" class="list-group-item" @click.prevent="$store.commit('bottlenecks/setSelectedSurvey', survey)" > <a href="#" @click.prevent>{{ survey.date_info }}</a> </li> </ul> </div> <div v-if="selectedSurvey" @click="clearSelection" class="ui-element shadow morphtool"> <div class="d-flex flex-row justify-content-between"> <i class="fa fa-close text-danger"></i> <small>Bottleneck: </small> <h6> {{ selectedBottleneck }} <small>( {{ selectedSurvey.date_info }} )</small> </h6> </div> </div> </div> </template> <style scoped lang="scss"> .headline { margin-right: $offset; margin-left: $offset; } .morphcontainer { margin-bottom: $offset; margin-left: auto; margin-right: $large-offset + $icon-width; border-radius: $border-radius; } .surveylist { text-align: left; margin-bottom: $offset !important; margin-left: $offset; margin-right: $offset; } .surveylist li { margin-left: auto; margin-right: auto; border-style: none; padding-bottom: 0rem; } .morphtool { position: relative; background-color: white; padding: $small-offset; border-radius: $border-radius; height: $icon-width; margin-right: $offset; margin-top: auto; margin-bottom: auto; z-index: 2; } .morphcontainer i { margin-right: $small-offset; } .morphtoolminus { position: absolute; top: 0; right: 0; background-color: white; padding: $small-offset; border-radius: $border-radius; height: $icon-width; width: $icon-height; z-index: 2; } </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): * Thomas Junk <thomas.junk@intevation.de> */ import { mapState, mapGetters } from "vuex"; import { displayError } from "../application/lib/errors.js"; import { HTTP } from "../application/lib/http"; export default { name: "morphtool", computed: { ...mapState("map", ["drawMode"]), ...mapState("bottlenecks", ["selectedBottleneck", "surveys", "selectedSurvey"]) }, methods: { clearSelection() { this.$store.dispatch("bottlenecks/setSelectedBottleneck", null); this.$store.commit("application/closeSplitScreen"); if (this.drawMode) { this.$store.commit("map/toggleDrawModeLine"); } } } }; </script>