Mercurial > gemma
changeset 1147:c84dbc608b85
merge
| author | Markus Kottlaender <markus@intevation.de> |
|---|---|
| date | Tue, 13 Nov 2018 11:12:54 +0100 |
| parents | 74e180ad3d6b (diff) 2d34715dd52e (current diff) |
| children | 67c45d2d1aad |
| files | client/src/App.vue |
| diffstat | 8 files changed, 138 insertions(+), 201 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/App.vue Mon Nov 12 17:41:41 2018 +0100 +++ b/client/src/App.vue Tue Nov 13 11:12:54 2018 +0100 @@ -13,7 +13,6 @@ <div class="rightcontainer"></div> </div> <div class="bottomcontainer d-flex flex-row align-items-end"> - <Userbar></Userbar> <Morphtool v-if="routeName == 'mainview'"></Morphtool> <Pdftool v-if="routeName == 'mainview'"></Pdftool> <Drawtool v-if="routeName == 'mainview'"></Drawtool> @@ -103,7 +102,6 @@ Sidebar: () => import("./application/Sidebar"), Bottlenecks: () => import("./bottlenecks/Bottlenecks"), Topbar: () => import("./application/Topbar"), - Userbar: () => import("./application/Userbar"), Drawtool: () => import("./drawtool/Drawtool"), Morphtool: () => import("./morphtool/Morphtool"), Pdftool: () => import("./pdftool/Pdftool"),
--- a/client/src/application/Main.vue Mon Nov 12 17:41:41 2018 +0100 +++ b/client/src/application/Main.vue Tue Nov 13 11:12:54 2018 +0100 @@ -1,27 +1,18 @@ <template> <div class="main d-flex flex-column"> <Maplayer :split="showSplitscreen" :lat="6155376" :long="1819178" :zoom="11"></Maplayer> - <div v-if="showSplitscreen" class="profile d-flex flex-row"> - <FairwayProfile - :additionalSurveys="additionalSurveys" - :height="height" - :width="width" - :xScale="xAxis" - :yScaleLeft="yAxisLeft" - :yScaleRight="yAxisRight" - :margin="margins" - ></FairwayProfile> - </div> + <FairwayProfile + :additionalSurveys="additionalSurveys" + :height="height" + :width="width" + :xScale="xAxis" + :yScaleLeft="yAxisLeft" + :yScaleRight="yAxisRight" + :margin="margins" + ></FairwayProfile> </div> </template> -<style lang="scss" scoped> -.profile { - background-color: white; - height: 50vh; -} -</style> - <script> /* * This is Free Software under GNU Affero General Public License v >= 3.0 @@ -122,12 +113,13 @@ console.log("test: ", evt); }, scaleFairwayProfile() { - if (!document.querySelector(".profile")) return; - const clientHeight = document.querySelector(".profile").clientHeight; - const clientWidth = document.querySelector(".profile").clientWidth; + if (!document.querySelector(".fairwayprofile")) return; + const clientHeight = document.querySelector(".fairwayprofile") + .clientHeight; + const clientWidth = document.querySelector(".fairwayprofile").clientWidth; if (!clientHeight || !clientWidth) return; - this.height = document.querySelector(".profile").clientHeight - 25; - this.width = document.querySelector(".profile").clientWidth - 220; + this.height = clientHeight; + this.width = clientWidth; } } };
--- a/client/src/application/Sidebar.vue Mon Nov 12 17:41:41 2018 +0100 +++ b/client/src/application/Sidebar.vue Tue Nov 13 11:12:54 2018 +0100 @@ -30,6 +30,10 @@ <i class="fa fa-book align-self-center navicon"></i>Systeminformation </router-link> </div> + <hr> + <a href="#" @click="logoff" class="text-body d-flex flex-row nav-link"> + <i class="fa fa-power-off align-self-center navicon"></i> Logout {{ user }} + </a> </div> </div> </div> @@ -58,6 +62,7 @@ props: ["routeName"], computed: { ...mapGetters("user", ["isSysAdmin"]), + ...mapState("user", ["user"]), ...mapState("application", ["showSidebar", "showBottlenecks"]), menuStyle() { return { @@ -77,6 +82,15 @@ "d-print-none": true }; } + }, + methods: { + logoff() { + this.$store.commit("user/clearAuth"); + this.$store.commit("application/showSidebar", false); + this.$store.commit("application/showUsermenu", false); + this.$store.commit("application/showSplitscreen", false); + this.$router.push("/login"); + } } }; </script>
--- a/client/src/application/Topbar.vue Mon Nov 12 17:41:41 2018 +0100 +++ b/client/src/application/Topbar.vue Tue Nov 13 11:12:54 2018 +0100 @@ -18,9 +18,6 @@ </ul> </div> </div> - <div v-if="routeName == 'mainview' && Object.keys(currentProfile).length" class="splitbutton"> - <i @click="$store.commit('application/showSplitscreen', !showSplitscreen)" class="ui-element splitscreen fa fa-window-restore shadow"></i> - </div> <div class=""> <Layers v-if="routeName == 'mainview'"></Layers> </div>
--- a/client/src/application/Userbar.vue Mon Nov 12 17:41:41 2018 +0100 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 @@ -1,94 +0,0 @@ -<template> - <div> - <img @click="$store.commit('application/showUsermenu', !showUsermenu)" class="ui-element userpic shadow" src="../application/assets/user.png"> - <div :class="userManagementStyle"> - <span v-if="showUsermenu" class="username align-self-center">{{ user }}</span> - <span v-if="showUsermenu" class="logout align-self-center" @click="logoff"> - <i class="fa fa-power-off"></i> - </span> - </div> - </div> -</template> - -<style lang="scss" scoped> -.userpic { - background: white; - position: absolute; - bottom: $offset; - left: $offset; - height: $icon-width; - width: $icon-height; - border-radius: $border-radius; -} - -.username { - margin-left: 40px; -} - -.usermanagement { - background: white; - margin-left: $offset; - padding: $offset; - border-radius: $border-radius; - margin-bottom: $offset; - height: $icon-height; -} - -.usermanagementcollapsed { - transition: 0.3s; - width: $icon-width; -} - -.usermanagementexpanded { - width: $sidebar-width; -} -</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"; -export default { - name: "user", - data() { - return {}; - }, - methods: { - logoff() { - this.$store.commit("user/clearAuth"); - this.$store.commit("application/showSidebar", false); - this.$store.commit("application/showUsermenu", false); - this.$store.commit("application/showSplitscreen", false); - this.$router.push("/login"); - } - }, - computed: { - ...mapState("user", ["user"]), - ...mapState("application", ["showUsermenu"]), - userManagementStyle() { - return { - "ui-element": true, - "d-flex": true, - "flex-row": true, - "justify-content-around": true, - usermanagement: true, - usermanagementcollapsed: !this.showUsermenu, - usermanagementexpanded: this.showUsermenu, - shadow: true - }; - } - } -}; -</script>
--- a/client/src/fairway/Fairwayprofile.vue Mon Nov 12 17:41:41 2018 +0100 +++ b/client/src/fairway/Fairwayprofile.vue Tue Nov 13 11:12:54 2018 +0100 @@ -1,66 +1,98 @@ <template> - <div class="profiledisplay d-flex flex-row"> - <div class="fairwayprofile"></div> - <div class="additionalsurveys d-flex flex-column"> - <small class="label">Available Additional Surveys</small> - <select v-model="additionalSurvey"> - <option value="">None</option> - <option - v-for="survey in additionalSurveys" - :key="survey.date_info" - :value="survey" - >{{survey.date_info}}</option> - </select> - <small class="mt-2"> - <b>Start:</b> - <br> - Lat: {{ startPoint[1] }} - <br> - Lon: {{ startPoint[0] }} - <br> - <b>End:</b> - <br> - Lat: {{ endPoint[1] }} - <br> - Lon: {{ endPoint[0] }} - <br> - </small> + <div :class="['position-relative', {show: showSplitscreen}]" v-if="Object.keys(currentProfile).length"> + <button + class="rounded bg-white border-0 position-absolute splitscreen-toggle shadow" + @click="$store.commit('application/showSplitscreen', false)" + v-if="showSplitscreen"> + <i class="fa fa-angle-down"></i> + </button> + <button + class="rounded bg-white border-0 position-absolute clear-selection shadow" + @click="$store.dispatch('fairwayprofile/clearSelection');" + v-if="showSplitscreen"> + <i class="fa fa-times text-danger"></i> + </button> + <div class="profile d-flex flex-column"> + <h5 class="mb-0 mt-2">{{ selectedBottleneck }} ({{ selectedSurvey.date_info }})</h5> + <div class="d-flex flex-fill"> + <div class="fairwayprofile flex-fill"></div> + <div class="additionalsurveys d-flex flex-column"> + <small class="label">Available Additional Surveys</small> + <select v-model="additionalSurvey"> + <option value="">None</option> + <option + v-for="survey in additionalSurveys" + :key="survey.date_info" + :value="survey" + >{{survey.date_info}}</option> + </select> + <small class="mt-2"> + <b>Start:</b> + <br> + Lat: {{ startPoint[1] }} + <br> + Lon: {{ startPoint[0] }} + <br> + <b>End:</b> + <br> + Lat: {{ endPoint[1] }} + <br> + Lon: {{ endPoint[0] }} + <br> + </small> + </div> + </div> </div> </div> </template> -<style scoped lang="scss"> -.label { - margin-bottom: $small-offset; -} -.waterlevelselection { - margin-top: $large-offset; - margin-right: $large-offset; -} +<style lang="sass" scoped> +.profile + background-color: white + width: 100vw + height: 0 + overflow: hidden + position: relative + z-index: 2 + +.splitscreen-toggle, +.clear-selection + top: -$icon-height + right: $icon-width + $offset + $offset + width: $icon-width + height: $icon-height + margin-top: 2px + z-index: 1 + outline: none + +.clear-selection + right: $offset -.additionalsurveys { - width: 300px; - margin-top: $large-offset; - margin-bottom: auto; - margin-right: $large-offset; - margin-left: auto; -} +.show + .profile + height: 50vh -.additionalsurveys input { - margin-right: $small-offset; -} +.label + margin-bottom: $small-offset + +.waterlevelselection + margin-top: $large-offset + margin-right: $large-offset -.profiledisplay { - width: 100vw; -} +.additionalsurveys + width: 200px + margin-top: $large-offset + margin-bottom: auto + margin-right: $large-offset + margin-left: auto -.fairwayprofile { - background-color: white; - margin-left: auto; - margin-right: $offset; - margin-top: auto; - margin-bottom: auto; -} +.additionalsurveys input + margin-right: $small-offset + +.fairwayprofile + background-color: white + margin: $offset + margin-top: 0 </style> <script> @@ -96,6 +128,7 @@ "additionalSurveys" ], computed: { + ...mapState("application", ["showSplitscreen"]), ...mapState("fairwayprofile", [ "startPoint", "endPoint", @@ -107,7 +140,7 @@ "waterLevels", "selectedWaterLevel" ]), - ...mapState("bottlenecks", ["selectedSurvey"]), + ...mapState("bottlenecks", ["selectedBottleneck", "selectedSurvey"]), additionalSurvey: { get() { return this.$store.getters["fairwayprofile/additionalSurvey"]; @@ -146,6 +179,9 @@ }; }, watch: { + showSplitscreen() { + this.drawDiagram(); + }, currentData() { this.drawDiagram(); },
--- a/client/src/morphtool/Morphtool.vue Mon Nov 12 17:41:41 2018 +0100 +++ b/client/src/morphtool/Morphtool.vue Tue Nov 13 11:12:54 2018 +0100 @@ -5,7 +5,7 @@ <h4>{{ selectedBottleneck }}</h4> <hr> <div - @click="clearSelection" + @click="$store.dispatch('fairwayprofile/clearSelection');" class="float-left ui-element d-flex morphtoolminus" > <i class="fa fa-close morphtoolsminus"></i> @@ -22,14 +22,14 @@ </li> </ul> </div> - <div v-if="selectedSurvey" @click="clearSelection" class="ui-element shadow morphtool"> + <div v-if="selectedSurvey && !showSplitscreen" 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> + <h6 class="my-auto px-2"> {{ selectedBottleneck }} - <small>( {{ selectedSurvey.date_info }} )</small> + ({{ selectedSurvey.date_info }}) </h6> + <i class="fa fa-angle-up py-2 px-2 border-left" @click="$store.commit('application/showSplitscreen', true)" v-if="Object.keys(currentProfile).length"></i> + <i class="fa fa-close text-danger py-2 px-2 border-left" @click="$store.dispatch('fairwayprofile/clearSelection');"></i> </div> </div> </div> @@ -43,7 +43,6 @@ .morphcontainer { margin-bottom: $offset; margin-left: auto; - margin-right: $large-offset + $icon-width; border-radius: $border-radius; } .surveylist { @@ -63,19 +62,13 @@ .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; @@ -111,22 +104,13 @@ computed: { ...mapGetters("map", ["getLayerByName"]), ...mapState("map", ["openLayersMap", "cutTool"]), + ...mapState("application", ["showSplitscreen"]), + ...mapState("fairwayprofile", ["currentProfile"]), ...mapState("bottlenecks", [ "selectedBottleneck", "surveys", "selectedSurvey" ]) - }, - methods: { - clearSelection() { - this.$store.dispatch("bottlenecks/setSelectedBottleneck", null); - this.$store.commit("application/showSplitscreen", false); - this.$store.commit("map/cutMode", false); - this.getLayerByName("Cut Tool") - .data.getSource() - .clear(); - this.openLayersMap.removeInteraction(this.cutTool); - } } }; </script>
--- a/client/src/store/fairway.js Mon Nov 12 17:41:41 2018 +0100 +++ b/client/src/store/fairway.js Tue Nov 13 11:12:54 2018 +0100 @@ -93,6 +93,16 @@ } }, actions: { + clearSelection({ commit, dispatch, rootGetters, rootState }) { + dispatch("bottlenecks/setSelectedBottleneck", null, { root: true }); + commit("clearCurrentProfile"); + commit("application/showSplitscreen", false, { root: true }); + commit("map/cutMode", false, { root: true }); + rootGetters["map/getLayerByName"]("Cut Tool") + .data.getSource() + .clear(); + rootState.map.openLayersMap.removeInteraction(rootState.map.cutTool); + }, loadProfile({ commit, state }, survey) { return new Promise((resolve, reject) => { const profileLine = new LineString([state.startPoint, state.endPoint]);