Mercurial > gemma
view client/src/morphtool/Morphtool.vue @ 1096:aa1f5daf6fc9
refac: centralized stores
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Tue, 30 Oct 2018 16:55:29 +0100 |
parents | 907321455f39 |
children | f106aee673e7 |
line wrap: on
line source
<template> <div class="morphcontainer"> <div v-if="selectedBottleneck"> <div v-if="surveyList && !drawMode" class="ui-element card card-body shadow"> <div class="headline"> <h4>{{bottleneckName}}</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 surveyList.surveys" :key="survey.data_info" class="list-group-item" @click.prevent="selectSurvey(survey)" > <a href="#" @click.prevent>{{survey.date_info}}</a> </li> </ul> </div> </div> <div v-if="selectedMorph" @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> {{bottleneckName}} <small>( {{selectedMorph.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 } from "vuex"; import { displayError } from "../application/lib/errors.js"; import { HTTP } from "../application/lib/http"; export default { name: "morphtool", data() { return { surveyList: null, bottleneckName: "" }; }, computed: { ...mapState("application", ["drawMode"]), ...mapState("identifystore", ["identifiedFeatures"]), ...mapState("fairwayprofile", ["selectedMorph"]), selectedBottleneck: function() { if (this.identifiedFeatures && !this.drawMode) { for (let feature of this.identifiedFeatures) { let id = feature.getId(); // RegExp.prototype.test() works with number, str and undefined if (/^bottlenecks\./.test(id)) { this.$store.commit("fairwayprofile/setSelectedMorph", null); return feature; } } } return null; } }, watch: { selectedBottleneck: function(bottleneckFeature) { if (bottleneckFeature) { let bottleneckName = bottleneckFeature.get("objnam"); if (bottleneckName) { this.bottleneckName = bottleneckName; this.queryBottleneck(bottleneckName); } } } }, methods: { queryBottleneck(name) { // DEBUG console.log("starting to query bottleneck", name); HTTP.get("/surveys/" + name, { headers: { "X-Gemma-Auth": localStorage.getItem("token"), "Content-type": "text/xml; charset=UTF-8" } }) .then(response => { this.surveyList = response.data; this.$store.commit( "fairwayprofile/setAvailableSurveys", response.data ); }) .catch(error => { this.surveyList = null; const { status, data } = error.response; displayError({ title: "Backend Error", message: `${status}: ${data.message || data}` }); }); }, selectSurvey(survey) { this.$store.commit("fairwayprofile/setSelectedMorph", survey); this.surveyList = null; }, clearSelection() { this.$store.commit("identifystore/setIdentifiedFeatures", []); this.$store.commit("fairwayprofile/setSelectedMorph", null); this.$store.commit("fairwayprofile/clearCurrentProfile"); this.$store.commit("application/closeSplitScreen"); this.surveyList = null; if (this.drawMode) { this.$store.commit("application/toggleDrawModeLine"); } } } }; </script>