Mercurial > gemma
changeset 889:afd83fb3399d geo-style
Merged default into geo-style branch.
| author | Sascha L. Teichmann <teichmann@intevation.de> |
|---|---|
| date | Tue, 02 Oct 2018 11:45:16 +0200 |
| parents | 495fc3264265 (current diff) 2e2ac0b88af9 (diff) |
| children | 0a563fef64a9 |
| files | |
| diffstat | 11 files changed, 161 insertions(+), 73 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/application/Main.vue Mon Oct 01 09:20:26 2018 +0200 +++ b/client/src/application/Main.vue Tue Oct 02 11:45:16 2018 +0200 @@ -81,6 +81,7 @@ }, created() { window.addEventListener("resize", debounce(this.scaleFairwayProfile), 100); + window.addEventListener("onbeforeprint", this.test); }, updated() { this.scaleFairwayProfile(); @@ -89,6 +90,9 @@ window.removeEventListener("resize", debounce(this.scaleFairwayProfile)); }, methods: { + test(evt) { + console.log("test: ", evt); + }, scaleFairwayProfile() { if (!document.querySelector(".profile")) return; const clientHeight = document.querySelector(".profile").clientHeight;
--- a/client/src/application/Morphtool.vue Mon Oct 01 09:20:26 2018 +0200 +++ b/client/src/application/Morphtool.vue Tue Oct 02 11:45:16 2018 +0200 @@ -1,42 +1,49 @@ <template> - <div v-if="selectedBottleneck || selectedMorph"> - <div v-if="surveyList" class="ui-element card card-body shadow"> - <div class="headline"> - <h5>{{selectedBottleneck.get("objnam")}}</h5> - </div> - <ul class="list-group"> - <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 @click="clearSelection" - class="float-left ui-element d-flex shadow morphtoolminus"> - <i class="fa fa-minus morphtoolsminus"></i> - </div> + <div v-if="selectedBottleneck || selectedMorph" class="morphcontainer"> + <div v-if="surveyList" class="ui-element card card-body shadow"> + <div class="headline"> + <h5>{{selectedBottleneck.get("objnam")}}</h5> + </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 @click="clearSelection" class="float-left ui-element d-flex shadow morphtoolminus"> + <i class="fa fa-minus morphtoolsminus"></i> + </div> + </div> + <div v-else @click="clearSelection" class="float-right ui-element d-flex shadow morphtool"> + <i class="fa fa-object-ungroup"></i> + </div> </div> - <div v-else @click="clearSelection" class="float-right ui-element d-flex shadow morphtool"> - <i class="fa fa-object-ungroup"></i> - </div> - </div> </template> <style lang="scss"> +.morphcontainer { + position: relative; + margin-bottom: $offset; + margin-left: $offset; +} +.surveylist { + margin-bottom: $offset !important; + margin-left: $offset; + margin-right: $offset; +} .morphtool { position: relative; 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; } .morphtoolminus { - position: relative; + position: absolute; + bottom: 0; + left: 0; background-color: white; padding: $small-offset; border-radius: $border-radius;
--- a/client/src/application/Sidebar.vue Mon Oct 01 09:20:26 2018 +0200 +++ b/client/src/application/Sidebar.vue Tue Oct 02 11:45:16 2018 +0200 @@ -44,7 +44,8 @@ overlay: true, sidebarcollapsed: this.sidebarCollapsed, sidebarextended: !this.sidebarCollapsed, - shadow: true + shadow: true, + "d-print-none": true }; } }
--- a/client/src/application/Topbar.vue Mon Oct 01 09:20:26 2018 +0200 +++ b/client/src/application/Topbar.vue Tue Oct 02 11:45:16 2018 +0200 @@ -1,7 +1,7 @@ <template> <div class="topbar d-flex flex-row"> <div @click="toggleSidebar"> - <i class="ui-element menubutton fa fa-bars"></i> + <i class="ui-element menubutton d-print-none fa fa-bars"></i> </div> <div v-if="routeName == 'mainview'" :class="searchbarContainerStyle"> <div class="input-group-prepend shadow">
--- a/client/src/layers/Identify.vue Mon Oct 01 09:20:26 2018 +0200 +++ b/client/src/layers/Identify.vue Tue Oct 02 11:45:16 2018 +0200 @@ -11,7 +11,7 @@ <h4 class="card-title">Identified</h4> </div> <hr> - <div class="d-flex flex-column"> + <div class="d-flex flex-column features"> <div v-for="feature of identifiedFeatures" :key="feature.getId()"> <div v-if="feature.getId()"> {{ feature.getId().replace(/[.][^.]*$/,"") /* cut away everything from the last . to the end */}}: @@ -22,13 +22,11 @@ </div> </div> <div class="versioninfo"> - <hr/> - gemma <a href="https://hg.intevation.de/gemma/file/tip" - >source-code</a> - <br/> + <hr/> + gemma <a href="https://hg.intevation.de/gemma/file/tip">source-code</a> + <br/> Some data © - <a href="https://www.openstreetmap.org/copyright" - >OpenSteetMap</a> contributors + <a href="https://www.openstreetmap.org/copyright">OpenSteetMap</a> contributors </div> </div> @@ -37,8 +35,15 @@ </template> <style lang="scss"> +.features { + height: $identify-height; + overflow-y: scroll; + margin-bottom: $x-large-offset + $large-offset; +} .versioninfo { font-size: 60%; + position: absolute; + bottom: $large-offset; } .identifymenu { position: relative; @@ -52,7 +57,7 @@ } .identifycollapsed { - height: $icon-height; + min-height: $icon-height; width: $icon-width; transition: $transition-fast; }
--- a/client/src/layers/Layers.vue Mon Oct 01 09:20:26 2018 +0200 +++ b/client/src/layers/Layers.vue Tue Oct 02 11:45:16 2018 +0200 @@ -6,7 +6,7 @@ </div> </div> <div :class="layerSelectStyle"> - <div v-if="!collapsed" class="card-body"> + <div v-if="!collapsed" class="card-body layers"> <div class="headline"> <h4 class="card-title">Layers</h4> </div> @@ -31,13 +31,13 @@ } .layerselectioncollapsed { - height: $icon-height; + min-height: $icon-height; width: $icon-width; transition: $transition-fast; } .layerselectionexpanded { - height: $layerselect-height; + min-height: $layerselect-height; width: $layerselect-width; }
--- a/client/src/layers/LegendElement.vue Mon Oct 01 09:20:26 2018 +0200 +++ b/client/src/layers/LegendElement.vue Tue Oct 02 11:45:16 2018 +0200 @@ -18,6 +18,7 @@ props: ["layername", "layerindex"], data: function() { return { + myMap: null, mapLayer: null }; }, @@ -25,6 +26,22 @@ ...mapGetters("mapstore", ["getLayerByName"]), id() { return "legendelement" + this.layerindex; + }, + mstyle() { + if (this.mapLayer && this.mapLayer.data.getStyle) { + return this.mapLayer.data.getStyle(); + } + } + }, + watch: { + mstyle(newStyle, oldStyle) { + // only recreate if there already was a style before + if (oldStyle) { + let vector = this.createVectorLayer(); + + this.myMap.removeLayer(this.myMap.getLayers()[0]); + this.myMap.addLayer(vector); + } } }, mounted() { @@ -37,6 +54,21 @@ }, methods: { initMap() { + let vector = this.createVectorLayer(); + + this.myMap = new Map({ + layers: [vector], + target: this.id, + controls: [], + interactions: [], + view: new View({ + center: [0, 0], + zoom: 3, + projection: "EPSG:4326" + }) + }); + }, + createVectorLayer() { let mapStyle = this.mapLayer.data.getStyle(); let feature = new Feature({ @@ -60,25 +92,13 @@ // this.mapLayer["forLegendStyle"] for it. // FIXME, this is a special case for the Fairway Dimensions style feature.set("level_of_service", ""); - var vector = new VectorLayer({ + return new VectorLayer({ source: new VectorSource({ features: [feature], wrapX: false }), style: mapStyle }); - - new Map({ - layers: [vector], - target: this.id, - controls: [], - interactions: [], - view: new View({ - center: [0, 0], - zoom: 3, - projection: "EPSG:4326" - }) - }); } } };
--- a/client/src/logs/logs.vue Mon Oct 01 09:20:26 2018 +0200 +++ b/client/src/logs/logs.vue Tue Oct 02 11:45:16 2018 +0200 @@ -83,6 +83,10 @@ <script> import { mapGetters } from "vuex"; import { HTTP } from "../application/lib/http.js"; +import "../../node_modules/highlight.js/styles/paraiso-dark.css"; +import Vue from "vue"; +import VueHighlightJS from "vue-highlightjs"; +Vue.use(VueHighlightJS); const ACCESSLOG = "accesslog"; const ERRORLOG = "errorlog";
--- a/client/src/main.js Mon Oct 01 09:20:26 2018 +0200 +++ b/client/src/main.js Tue Oct 02 11:45:16 2018 +0200 @@ -13,8 +13,6 @@ import "../node_modules/cxlt-vue2-toastr/dist/css/cxlt-vue2-toastr.css"; import "../node_modules/highlight.js/styles/paraiso-dark.css"; import VTooltip from "v-tooltip"; -import VueHighlightJS from "vue-highlightjs"; -Vue.use(VueHighlightJS); Vue.use(VTooltip);
--- a/client/src/map/Maplayer.vue Mon Oct 01 09:20:26 2018 +0200 +++ b/client/src/map/Maplayer.vue Tue Oct 02 11:45:16 2018 +0200 @@ -10,6 +10,17 @@ .mapfull { height: 100vh; } + +@media print { + .mapfull { + width: 2000px; + heigth: 2828px; + } + .mapsplit { + width: 2000px; + heigth: 2828px; + } +} </style> <script> @@ -294,6 +305,34 @@ bottleneck_id + "'" }); + }, + onBeforePrint(/* evt */) { + // console.log("onBeforePrint(", evt ,")"); + // + // the following code shows how to get the current map canvas + // and change it, however this does not work well enough, as + // another mechanism seems to update the size again before the rendering + // for printing is done: + // console.log(this.openLayersMap.getViewport()); + // var canvas = this.openLayersMap.getViewport().getElementsByTagName("canvas")[0]; + // console.log(canvas); + // canvas.width=1000; + // canvas.height=1414; + // + // An experiment which also did not work: + // this.openLayersMap.setSize([1000, 1414]); // estimate portait DIN A4 + // + // according to documentation + // http://openlayers.org/en/latest/apidoc/module-ol_PluggableMap-PluggableMap.html#updateSize + // "Force a recalculation of the map viewport size. This should be called when third-party code changes the size of the map viewport." + // but did not help + // this.openLayersMap.updateSize(); + }, + onAfterPrint(/* evt */) { + // could be used to undo changes that have been done for printing + // though https://www.tjvantoll.com/2012/06/15/detecting-print-requests-with-javascript/ + // reported that this was not feasable (back then). + // console.log("onAfterPrint(", evt, ")"); } }, watch: { @@ -487,6 +526,9 @@ console.log(error); }); + window.addEventListener("beforeprint", this.onBeforePrint); + window.addEventListener("afterprint", this.onAfterPrint); + // so none is shown // this.updateBottleneckFilter("1999-10-01", "AT_Bottleneck_44"); // test date
--- a/client/src/systemconfiguration/systemconfiguration.vue Mon Oct 01 09:20:26 2018 +0200 +++ b/client/src/systemconfiguration/systemconfiguration.vue Tue Oct 02 11:45:16 2018 +0200 @@ -1,27 +1,37 @@ <template> - <div class="d-flex flex-row"> - <div class="card sysconfig"> - <div class="card-header shadow-sm text-white bg-info mb-6"> - Systemconfiguration - </div> - <div class="card-body"> - <h4>Bottleneck Areas stroke-color</h4> - <compact-picker v-model="strokeColor" /> - <h4>Bottleneck Areas fill-color</h4> - <chrome-picker v-model="fillColor" /> - <div class="sendbutton"> - <a @click.prevent="submit" class="btn btn-info">Send</a> + <div class="d-flex flex-row"> + <div class="card sysconfig"> + <div class="card-header shadow-sm text-white bg-info mb-6"> + Systemconfiguration + </div> + <div class="card-body config"> + <section class="configsection"> + <h4 class="card-title">Bottleneck Areas stroke-color</h4> + <compact-picker v-model="strokeColor" /> + </section> + <section> + <h4 class="card-title">Bottleneck Areas fill-color</h4> + <chrome-picker v-model="fillColor" /> + </section> + <div class="sendbutton"> + <a @click.prevent="submit" class="btn btn-info">Send</a> + </div> + </div> <!-- card-body --> </div> - </div> <!-- card-body --> </div> - </div> </template> -<style lang="scss"> +<style scoped lang="scss"> +.config { + text-align: left; +} +.configsection { + margin-bottom: $large-offset; +} .sendbutton { position: absolute; - right: $large-offset; - bottom: $large-offset; + right: $offset; + bottom: $offset; } .inputs { margin-left: auto; @@ -29,12 +39,9 @@ } .sysconfig { margin-top: $offset; - margin-left: 30vw; + margin-left: auto; margin-right: auto; - width: 60vw; - max-width: 500px; - mind-heigth: 500px; - height: 80vh; + width: 30vw; } </style>