Mercurial > gemma

comparison client/src/components/fairway/Fairwayprofile.vue @ 3146:b6cc4838d2c0

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: implemented pane mechanic for diagrams regressions: diagrams are currently not collapsible anymore, animations were removed
author Markus Kottlaender <markus@intevation.de>
date Fri, 03 May 2019 10:33:51 +0200
parents 136b86794453
children a90091aaef67
comparison
equal deleted inserted replaced
3145:d33a5c1522dc 3146:b6cc4838d2c0
1 <template> 1 <template>
2 <div class="d-flex flex-fill"> 2 <div class="d-flex flex-column flex-fill">
3 <DiagramLegend> 3 <UIBoxHeader icon="chart-area" :title="title" :closeCallback="close" />
4 <div class="legend"> 4 <div class="d-flex flex-fill">
5 <span style="background-color: #5995ff"></span> Water 5 <DiagramLegend>
6 </div> 6 <div class="legend">
7 <div class="legend"> 7 <span style="background-color: #5995ff"></span> Water
8 <span style="background-color: #1f4fff"></span> Fairway 8 </div>
9 </div> 9 <div class="legend">
10 <div class="legend"> 10 <span style="background-color: #1f4fff"></span> Fairway
11 <span style="background-color: #4a2f06"></span> 11 </div>
12 Ground 12 <div class="legend">
13 </div> 13 <span style="background-color: #4a2f06"></span>
14 <div> 14 Ground
15 <button 15 </div>
16 @click="downloadPDF" 16 <div>
17 type="button" 17 <button
18 class="btn btn-sm btn-info d-block w-100 mt-2" 18 @click="downloadPDF"
19 > 19 type="button"
20 <translate>Export to PDF</translate> 20 class="btn btn-sm btn-info d-block w-100 mt-2"
21 </button> 21 >
22 </div> 22 <translate>Export to PDF</translate>
23 </DiagramLegend> 23 </button>
24 <div 24 </div>
25 ref="diagramContainer" 25 </DiagramLegend>
26 class="d-flex flex-fill justify-content-center align-items-center diagram-container" 26 <div
27 > 27 ref="diagramContainer"
28 <div v-if="!fairwayData"> 28 class="d-flex flex-fill justify-content-center align-items-center diagram-container"
29 <translate>No data available.</translate> 29 >
30 <div v-if="!fairwayData">
31 <translate>No data available.</translate>
32 </div>
30 </div> 33 </div>
31 </div> 34 </div>
32 </div> 35 </div>
33 </template> 36 </template>
34 37
84 "maxAlt", 87 "maxAlt",
85 "referenceWaterLevel", 88 "referenceWaterLevel",
86 "selectedWaterLevel", 89 "selectedWaterLevel",
87 "waterLevels" 90 "waterLevels"
88 ]), 91 ]),
92 ...mapState("application", ["paneSetup"]),
93 title() {
94 let dates = [this.selectedSurvey.date_info];
95 if (this.additionalSurvey) dates.push(this.additionalSurvey.date_info);
96 dates.map(d => this.$options.filters.dateTime(d, true));
97 return `${this.$gettext("Fairwayprofile")}: ${
98 this.selectedBottleneck
99 } (${dates.join(", ")})`;
100 },
89 selectedSurvey: { 101 selectedSurvey: {
90 get() { 102 get() {
91 return this.$store.state.bottlenecks.selectedSurvey; 103 return this.$store.state.bottlenecks.selectedSurvey;
92 } 104 }
93 }, 105 },
149 fairwayData() { 161 fairwayData() {
150 this.drawDiagram(); 162 this.drawDiagram();
151 } 163 }
152 }, 164 },
153 methods: { 165 methods: {
166 close() {
167 this.$store.commit(
168 "application/paneSetup",
169 this.paneSetup === "COMPARESURVEYS_FAIRWAYPROFILE"
170 ? "COMPARESURVEYS"
171 : "DEFAULT"
172 );
173 this.$store.dispatch("fairwayprofile/clearCurrentProfile");
174 },
154 downloadPDF() { 175 downloadPDF() {
155 var svg = this.$refs.diagramContainer.innerHTML; 176 var svg = this.$refs.diagramContainer.innerHTML;
156 if (svg) { 177 if (svg) {
157 svg = svg.replace(/\r?\n|\r/g, "").trim(); 178 svg = svg.replace(/\r?\n|\r/g, "").trim();
158 } 179 }