changeset 3061:563176194d74

client: add infos and diagram legend for the generated pdf(Fairway profiles)
author Fadi Abbud <fadi.abbud@intevation.de>
date Tue, 16 Apr 2019 12:39:55 +0200
parents cebbc1a8987b
children 87e0422cffa7
files client/src/components/fairway/Fairwayprofile.vue
diffstat 1 files changed, 31 insertions(+), 1 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/components/fairway/Fairwayprofile.vue	Tue Apr 16 11:22:32 2019 +0200
+++ b/client/src/components/fairway/Fairwayprofile.vue	Tue Apr 16 12:39:55 2019 +0200
@@ -86,6 +86,16 @@
       "selectedWaterLevel",
       "waterLevels"
     ]),
+    selectedSurvey: {
+      get() {
+        return this.$store.state.bottlenecks.selectedSurvey;
+      }
+    },
+    selectedBottleneck: {
+      get() {
+        return this.$store.state.bottlenecks.selectedBottleneck;
+      }
+    },
     ...mapState("bottlenecks", ["selectedSurvey"]),
     relativeWaterLevelDelta() {
       return this.selectedWaterLevel.value - this.referenceWaterLevel;
@@ -143,6 +153,8 @@
   methods: {
     downloadPDF() {
       var svg = this.$refs.diagramContainer.innerHTML;
+      var fairwayInfo =
+        this.selectedBottleneck + " (" + this.selectedSurvey.date_info + ")";
       if (svg) {
         svg = svg.replace(/\r?\n|\r/g, "").trim();
       }
@@ -157,7 +169,25 @@
       });
       var imgData = canvas.toDataURL("image/png");
       pdf.addImage(imgData, "PNG", 40, 60, 380, 130);
-      pdf.save("Fairwayprofile-diagram");
+      // Fairway profile info for the pdf title
+      pdf.setTextColor("steelblue");
+      pdf.setFontSize(22);
+      pdf.setFontStyle("bold");
+      pdf.text(fairwayInfo, 140, 30);
+      // Diagram legend
+      pdf.setFontSize(10);
+      pdf.setTextColor("black");
+      pdf.setDrawColor("white");
+      pdf.setFillColor("#5995ff");
+      pdf.circle(60, 190, 2, "FD");
+      pdf.text(63, 191, "Water");
+      pdf.setFillColor("#1f4fff");
+      pdf.circle(60, 195, 2, "FD");
+      pdf.text(63, 196, "Fairway");
+      pdf.setFillColor("#4a2f06");
+      pdf.circle(60, 200, 2, "FD");
+      pdf.text(63, 201, "Ground");
+      pdf.save("Fairwayprofile diagram");
     },
     calcRelativeDepth(depth) {
       /* takes a depth value and substracts the delta of the relative waterlevel