Mercurial > gemma
changeset 962:d7f34791b18d
refac: moved linetool and morphtool
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Wed, 17 Oct 2018 15:22:21 +0200 |
parents | e23ae2c83427 |
children | e0825645f00e |
files | client/src/App.vue client/src/application/Linetool.vue client/src/application/Morphtool.vue client/src/linetool/Linetool.vue client/src/morphtool/Morphtool.vue |
diffstat | 5 files changed, 211 insertions(+), 211 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/App.vue Wed Oct 17 12:23:39 2018 +0200 +++ b/client/src/App.vue Wed Oct 17 15:22:21 2018 +0200 @@ -22,7 +22,7 @@ </div> </div> <div class="d-flex flex-column"> - <router-view/> + <router-view /> </div> </div> </template> @@ -89,8 +89,8 @@ import Topbar from "./application/Topbar"; import { mapGetters } from "vuex"; import Userbar from "./application/Userbar"; -import Linetool from "./application/Linetool"; -import Morphtool from "./application/Morphtool"; +import Linetool from "./linetool/Linetool"; +import Morphtool from "./morphtool/Morphtool"; export default { name: "app",
--- a/client/src/application/Linetool.vue Wed Oct 17 12:23:39 2018 +0200 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 @@ -1,52 +0,0 @@ -<template> - <div @click="drawLine" class="ui-element d-flex shadow drawtool"> - <i :class="icon"></i> - </div> -</template> - -<style lang="scss"> -.drawtool { - position: absolute; - bottom: 0; - right: 0; - background-color: white; - padding: $small-offset; - border-radius: $border-radius; - margin-left: $offset; - height: $icon-width; - width: $icon-height; - margin-bottom: $offset; - margin-right: $offset; - z-index: 2; -} - -.inverted { - color: #0077ff; -} -</style> - -<script> -import { mapGetters, mapState } from "vuex"; - -export default { - name: "linetool", - methods: { - drawLine() { - this.$store.commit("application/toggleDrawModeLine"); - } - }, - computed: { - ...mapGetters("application", ["drawMode"]), - ...mapState("mapstore", ["identifiedFeatures", "selectedMorph"]), - icon() { - return { - fa: true, - "fa-pencil": !this.selectedMorph, - "fa-pencil inverted": !this.selectedMorph && this.drawMode, - "fa-cut": this.selectedMorph, - "fa-cut inverted": this.selectedMorph && this.drawMode - }; - } - } -}; -</script>
--- a/client/src/application/Morphtool.vue Wed Oct 17 12:23:39 2018 +0200 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 @@ -1,156 +0,0 @@ -<template> - <div v-if="selectedBottleneck || selectedMorph" class="morphcontainer"> - <div v-if="surveyList && !drawMode" class="ui-element card card-body shadow"> - <div class="headline"> - <h4>{{selectedBottleneck.get("objnam")}}</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 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>{{selectedBottleneck.get("objnam")}} <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> -import { mapGetters, mapState } from "vuex"; - -import { displayError } from "../application/lib/errors.js"; -import { HTTP } from "../application/lib/http"; - -export default { - name: "morphtool", - data() { - return { - surveyList: null - }; - }, - computed: { - ...mapGetters("application", ["drawMode"]), - ...mapState("mapstore", ["identifiedFeatures", "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("mapstore/setSelectedMorph", null); - return feature; - } - } - } - return null; - } - }, - watch: { - selectedBottleneck: function(bottleneckFeature) { - if (bottleneckFeature) { - let bottleneckName = bottleneckFeature.get("objnam"); - if (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; - }) - .catch(error => { - this.surveyList = null; - const { status, data } = error.response; - displayError({ - title: "Backend Error", - message: `${status}: ${data.message || data}` - }); - }); - }, - selectSurvey(survey) { - this.$store.commit("mapstore/setSelectedMorph", survey); - this.surveyList = null; - }, - clearSelection() { - this.$store.commit("mapstore/setIdentifiedFeatures", []); - this.$store.commit("mapstore/setSelectedMorph", null); - this.surveyList = null; - if (this.drawMode) { - this.$store.commit("application/toggleDrawModeLine"); - } - } - } -}; -</script>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/client/src/linetool/Linetool.vue Wed Oct 17 15:22:21 2018 +0200 @@ -0,0 +1,52 @@ +<template> + <div @click="drawLine" class="ui-element d-flex shadow drawtool"> + <i :class="icon"></i> + </div> +</template> + +<style lang="scss"> +.drawtool { + position: absolute; + bottom: 0; + right: 0; + background-color: white; + padding: $small-offset; + border-radius: $border-radius; + margin-left: $offset; + height: $icon-width; + width: $icon-height; + margin-bottom: $offset; + margin-right: $offset; + z-index: 2; +} + +.inverted { + color: #0077ff; +} +</style> + +<script> +import { mapGetters, mapState } from "vuex"; + +export default { + name: "linetool", + methods: { + drawLine() { + this.$store.commit("application/toggleDrawModeLine"); + } + }, + computed: { + ...mapGetters("application", ["drawMode"]), + ...mapState("mapstore", ["identifiedFeatures", "selectedMorph"]), + icon() { + return { + fa: true, + "fa-pencil": !this.selectedMorph, + "fa-pencil inverted": !this.selectedMorph && this.drawMode, + "fa-cut": this.selectedMorph, + "fa-cut inverted": this.selectedMorph && this.drawMode + }; + } + } +}; +</script>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/client/src/morphtool/Morphtool.vue Wed Oct 17 15:22:21 2018 +0200 @@ -0,0 +1,156 @@ +<template> + <div v-if="selectedBottleneck || selectedMorph" class="morphcontainer"> + <div v-if="surveyList && !drawMode" class="ui-element card card-body shadow"> + <div class="headline"> + <h4>{{selectedBottleneck.get("objnam")}}</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 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>{{selectedBottleneck.get("objnam")}} <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> +import { mapGetters, mapState } from "vuex"; + +import { displayError } from "../application/lib/errors.js"; +import { HTTP } from "../application/lib/http"; + +export default { + name: "morphtool", + data() { + return { + surveyList: null + }; + }, + computed: { + ...mapGetters("application", ["drawMode"]), + ...mapState("mapstore", ["identifiedFeatures", "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("mapstore/setSelectedMorph", null); + return feature; + } + } + } + return null; + } + }, + watch: { + selectedBottleneck: function(bottleneckFeature) { + if (bottleneckFeature) { + let bottleneckName = bottleneckFeature.get("objnam"); + if (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; + }) + .catch(error => { + this.surveyList = null; + const { status, data } = error.response; + displayError({ + title: "Backend Error", + message: `${status}: ${data.message || data}` + }); + }); + }, + selectSurvey(survey) { + this.$store.commit("mapstore/setSelectedMorph", survey); + this.surveyList = null; + }, + clearSelection() { + this.$store.commit("mapstore/setIdentifiedFeatures", []); + this.$store.commit("mapstore/setSelectedMorph", null); + this.surveyList = null; + if (this.drawMode) { + this.$store.commit("application/toggleDrawModeLine"); + } + } + } +}; +</script>