Mercurial > gemma
changeset 5461:901741aa1678
Merged uiimprovements branch into default.
author | Sascha L. Teichmann <sascha.teichmann@intevation.de> |
---|---|
date | Thu, 15 Jul 2021 18:36:17 +0200 |
parents | d45d5fafdc5b (current diff) d6a547f3af71 (diff) |
children | fc01cdaf056d |
files | |
diffstat | 9 files changed, 131 insertions(+), 64 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/App.vue Thu Jul 15 18:15:08 2021 +0200 +++ b/client/src/components/App.vue Thu Jul 15 18:36:17 2021 +0200 @@ -2,7 +2,7 @@ <div id="app" class="main" style="overflow-x:scroll"> <div v-if="isAuthenticated" class="d-flex flex-column userinterface"> <div class="boxes d-flex p-2"> - <div class="mr-auto d-flex"> + <div class="d-flex"> <Sidebar /> <div :class="searchContainer"> <Search v-if="isMapVisible" />
--- a/client/src/components/Bottlenecks.vue Thu Jul 15 18:15:08 2021 +0200 +++ b/client/src/components/Bottlenecks.vue Thu Jul 15 18:36:17 2021 +0200 @@ -13,12 +13,12 @@ title: `${countryLabel}`, width: '100px' }, + { id: 'properties.from', title: `${chainageLabel}`, width: '155px' }, { id: 'properties.current', title: `${latestmeasurementLabel}`, width: '150px' - }, - { id: 'properties.from', title: `${chainageLabel}`, width: '135px' } + } ]" /> <UITableBody @@ -33,20 +33,22 @@ }}</a> </div> <div class="table-cell text-center" style="width: 100px"> - {{ bottleneck.properties.responsible_country }} + <span class="mx-auto">{{ + bottleneck.properties.responsible_country + }}</span> </div> - <div class="table-cell" style="width: 150px"> - {{ bottleneck.properties.current | surveyDate }} - </div> - <div class="table-cell" style="width: 135px"> - {{ + <div class="table-cell" style="flex-grow:1;"> + <span class="mx-auto">{{ displayCurrentChainage( bottleneck.properties.from, bottleneck.properties.to ) - }} + }}</span> </div> - <div class="table-cell center" style="flex-grow: 1"> + <div class="table-cell" style="width: 150px"> + <span class="ml-auto">{{ + bottleneck.properties.current | surveyDate + }}</span> <UISpinnerButton @click="loadSurveys(bottleneck)" :loading="loading === bottleneck"
--- a/client/src/components/Contextbox.vue Thu Jul 15 18:15:08 2021 +0200 +++ b/client/src/components/Contextbox.vue Thu Jul 15 18:36:17 2021 +0200 @@ -1,13 +1,31 @@ <template> <div :class="style"> - <Bottlenecks v-if="contextBoxContent === 'bottlenecks'" /> + <Bottlenecks + style="min-width: 650px" + v-if="contextBoxContent === 'bottlenecks'" + /> <keep-alive> - <Staging v-if="contextBoxContent === 'staging'" /> - <Stretches v-if="contextBoxContent === 'stretches'" /> - <Sections v-if="contextBoxContent === 'sections'" /> - <ImportConfiguration v-if="contextBoxContent === 'importconfiguration'" /> + <Staging + style="min-width: 850px" + v-if="contextBoxContent === 'staging'" + /> + <Stretches + style="min-width: 850px" + v-if="contextBoxContent === 'stretches'" + /> + <Sections + style="min-width: 850px" + v-if="contextBoxContent === 'sections'" + /> + <ImportConfiguration + style="min-width: 850px" + v-if="contextBoxContent === 'importconfiguration'" + /> </keep-alive> - <ImportOverview v-if="contextBoxContent === 'importoverview'" /> + <ImportOverview + style="min-width: 850px" + v-if="contextBoxContent === 'importoverview'" + /> </div> </template> @@ -47,7 +65,10 @@ "ui-element shadow-xs contextbox", { contextboxcollapsed: !this.showContextBox, - contextboxextended: this.showContextBox, + contextboxextended: + this.showContextBox && this.contextBoxContent !== "bottlenecks", + contextboxbottlenecks: + this.showContextBox && this.contextBoxContent === "bottlenecks", "rounded-bottom": this.contextBoxContent !== "imports", rounded: this.contextBoxContent === "imports" } @@ -79,9 +100,6 @@ overflow: hidden; background: #fff; } -.contextbox > div:last-child { - width: 860px; -} .contextboxcollapsed { max-width: 0; @@ -89,7 +107,15 @@ } .contextboxextended { - max-width: 860px; + max-width: 858px; + transition: 0.1s; + transition-timing-function: ease; +} + +.contextboxbottlenecks { + max-width: 650px; + transition: 0.1s; + transition-timing-function: ease; } .close-contextbox {
--- a/client/src/components/KeyboardHandler.vue Thu Jul 15 18:15:08 2021 +0200 +++ b/client/src/components/KeyboardHandler.vue Thu Jul 15 18:36:17 2021 +0200 @@ -1,7 +1,7 @@ <template> <transition name="fade"> <div class="notice" v-if="showNotice"> - <span>{{ noticeText }}</span> + <span @click="stopOperation">{{ noticeText }}</span> </div> </transition> </template> @@ -70,28 +70,37 @@ } } }, + methods: { + closeCompareView() { + this.$store.commit("fairwayprofile/additionalSurvey", null); + }, + stopDrawing() { + this.$store.commit("map/lineToolEnabled", false); + this.$store.commit("map/polygonToolEnabled", false); + this.$store.commit("map/cutToolEnabled", false); + this.$store.commit("map/setCurrentMeasurement", null); + this.openLayersMaps.forEach(m => { + m.getLayer("DRAWTOOL") + .getSource() + .clear(); + }); + }, + stopOperation() { + if ( + this.lineToolEnabled || + this.polygonToolEnabled || + this.cutToolEnabled + ) { + this.stopDrawing(); + } else if (this.paneSetup.includes("COMPARESURVEYS")) { + this.closeCompareView(); + } + } + }, mounted() { window.addEventListener("keydown", e => { // Escape - if (e.keyCode === 27) { - if ( - this.lineToolEnabled || - this.polygonToolEnabled || - this.cutToolEnabled - ) { - this.$store.commit("map/lineToolEnabled", false); - this.$store.commit("map/polygonToolEnabled", false); - this.$store.commit("map/cutToolEnabled", false); - this.$store.commit("map/setCurrentMeasurement", null); - this.openLayersMaps.forEach(m => { - m.getLayer("DRAWTOOL") - .getSource() - .clear(); - }); - } else if (this.paneSetup.includes("COMPARESURVEYS")) { - this.$store.commit("fairwayprofile/additionalSurvey", null); - } - } + if (e.key === "Esc" || e.key === "Escape") this.stopOperation(); }); } };
--- a/client/src/components/Pdftool.vue Thu Jul 15 18:15:08 2021 +0200 +++ b/client/src/components/Pdftool.vue Thu Jul 15 18:36:17 2021 +0200 @@ -334,7 +334,6 @@ this.generatePDF(soundingInfo); }) .catch(error => { - // console.log(error); let message = "Backend not reachable"; if (error.response) { const { status, data } = error.response;
--- a/client/src/components/Search.vue Thu Jul 15 18:15:08 2021 +0200 +++ b/client/src/components/Search.vue Thu Jul 15 18:36:17 2021 +0200 @@ -9,6 +9,10 @@ :class="[ 'searchgroup', { + searchgroupwidthbottlenecks: + this.showSearchbar && this.contextBoxContent === 'bottlenecks', + sgnobottlenecks: + this.showSearchbar && this.contextBoxContent !== 'bottlenecks', 'searchgroup-collapsed': !showSearchbar, big: showContextBox && @@ -85,7 +89,36 @@ <style lang="scss" scoped> .searchcontainer { opacity: 0.96; +} + +.searchcontainerwitdh { width: 860px; + transition: 0.1s; + transition-timing-function: ease; +} + +.searchcontainerwitdhbottlenecks { + width: 650px; + transition: 0.1s; + transition-timing-function: ease; +} + +.searchgroupwidth { + max-width: 860px; + transition: 0.1s; + transition-timing-function: ease; +} + +.sgnobottlenecks { + width: 817px; + transition: 0.1s; + transition-timing-function: ease; +} + +.searchgroupwidthbottlenecks { + width: 617px; + transition: 0.1s; + transition-timing-function: ease; } .searchcontainer .searchbar { @@ -94,7 +127,6 @@ } .searchgroup { - width: 827px; overflow: hidden; } @@ -218,7 +250,15 @@ { "d-flex": this.contextBoxContent !== "imports", "d-none": this.contextBoxContent === "imports" && this.showContextBox, - smallbox: !this.showSearchbar + smallbox: !this.showSearchbar, + searchcontainerwidth: + this.showSearchbar && this.contextBoxContent !== "bottlenecks", + searchgroupwidth: + this.showSearchbar && this.contextBoxContent !== "bottlenecks", + searchcontainerwidthbottlenecks: + this.showSearchbar && this.contextBoxContent === "bottlenecks", + searchgroupwidthbottleneks: + this.showSearchbar && this.contextBoxContent === "bottlenecks" } ]; },
--- a/client/src/components/importoverview/ImportOverview.vue Thu Jul 15 18:15:08 2021 +0200 +++ b/client/src/components/importoverview/ImportOverview.vue Thu Jul 15 18:36:17 2021 +0200 @@ -280,7 +280,6 @@ saveAs(csvFile, "log.csv"); }) .catch(error => { - console.log(error); const { status, data } = error.response; app.$snotify.clear(); displayError({
--- a/client/src/components/layers/layers.js Thu Jul 15 18:15:08 2021 +0200 +++ b/client/src/components/layers/layers.js Thu Jul 15 18:36:17 2021 +0200 @@ -79,13 +79,10 @@ } vectorSource.addFeatures(features); } catch (error) { - console.log(error); - console.log("Loading failed for:", vectorSource); vectorSource.addFeatures([]); } }) - .catch(error => { - console.log(error); + .catch(() => { vectorSource.removeLoadedExtent(extent); store.dispatch("application/reportBackendError"); }); @@ -400,8 +397,7 @@ .then(response => { tile.getImage().src = URL.createObjectURL(response.data); }) - .catch(error => { - console.log(error); + .catch(() => { store.dispatch("application/reportBackendError"); }); } // TODO tile.setState(TileState.ERROR); @@ -431,8 +427,7 @@ .then(response => { tile.getImage().src = URL.createObjectURL(response.data); }) - .catch(error => { - console.log(error); + .catch(() => { store.dispatch("application/reportBackendError"); }); } // TODO tile.setState(TileState.ERROR); @@ -561,8 +556,7 @@ .then(response => { tile.getImage().src = URL.createObjectURL(response.data); }) - .catch(error => { - console.log(error); + .catch(() => { store.dispatch("application/reportBackendError"); }); } // TODO tile.setState(TileState.ERROR); @@ -693,8 +687,7 @@ .then(response => { tile.getImage().src = URL.createObjectURL(response.data); }) - .catch(error => { - console.log(error); + .catch(() => { store.dispatch("application/reportBackendError"); }); } // TODO tile.setState(TileState.ERROR); @@ -768,8 +761,7 @@ .then(response => { tile.getImage().src = URL.createObjectURL(response.data); }) - .catch(error => { - console.log(error); + .catch(() => { store.dispatch("application/reportBackendError"); }); } // TODO tile.setState(TileState.ERROR);
--- a/client/src/components/map/Map.vue Thu Jul 15 18:15:08 2021 +0200 +++ b/client/src/components/map/Map.vue Thu Jul 15 18:36:17 2021 +0200 @@ -35,6 +35,9 @@ * * Thomas Junk <thomas.junk@intevation.de> * * Bernhard E. Reiter <bernhard.reiter@intevation.de> */ + +/*eslint no-unused-vars: ["error", { "argsIgnorePattern": "_" }]*/ + import { HTTP } from "@/lib/http"; import { mapState } from "vuex"; import { Map, View } from "ol"; @@ -46,8 +49,6 @@ import { styles } from "@/components/layers/styles"; import "ol/ol.css"; -/* for the sake of debugging */ -/* eslint-disable no-console */ export default { mixins: [pane], components: { @@ -292,9 +293,8 @@ crossOrigin: "anonymous", params: JSON.parse(this.config.ecdis_wms_params) }); - source.on("imageloaderror", error => { + source.on("imageloaderror", _ => { if (this.ongoingPDFExport) { - console.log(error); displayError({ title: this.$gettext("Loading Error"), message: this.$gettext(