changeset 1635:ca48145dba9c

client: improve pdf generation * Add selection of paper size, now offering ISO A3 and A4. * Improve code to have the a3 and a4 paper sizes available in mm. * Fix translation of orientation so that the translated texts are shown, while the values will stay English for the selection code itself. * Add BER as author.
author Bernhard Reiter <bernhard@intevation.de>
date Thu, 20 Dec 2018 11:38:49 +0100
parents 05a2732cafac
children 37ee25bc2bbe
files client/src/components/Pdftool.vue
diffstat 1 files changed, 33 insertions(+), 3 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/components/Pdftool.vue	Thu Dec 20 10:41:56 2018 +0100
+++ b/client/src/components/Pdftool.vue	Thu Dec 20 11:38:49 2018 +0100
@@ -18,8 +18,12 @@
       <div class="p-3">
         <b><translate>Chose format:</translate></b>
         <select v-model="form.format" class="form-control d-block w-100">
-          <option><translate>landscape</translate></option>
-          <option><translate>portrait</translate></option>
+          <option value="landscape"><translate>landscape</translate></option>
+          <option value="portrait"><translate>portrait</translate></option>
+        </select>
+        <select v-model="form.paperSize" class="form-control d-block w-100">
+          <option value="a3"><translate>ISO A3</translate></option>
+          <option value="a4"><translate>ISO A4</translate></option>
         </select>
         <small class="d-block my-2">
           <input
@@ -66,16 +70,24 @@
  * Software engineering by Intevation GmbH
  *
  * Author(s):
- * Markus Kottländer <markus.kottlaender@intevation.de>
+ * * Markus Kottländer <markus.kottlaender@intevation.de>
+ * * Bernhard E. Reiter <bernhard@intevation.de>
  */
 import { mapState } from "vuex";
 
+var paperSizes = {
+  // in millimeter, landscape [width, height]
+  a3: [420, 297],
+  a4: [297, 210]
+};
+
 export default {
   name: "pdftool",
   data() {
     return {
       form: {
         format: "landscape",
+        paperSize: "a4",
         downloadType: "download"
       }
     };
@@ -86,7 +98,25 @@
   },
   methods: {
     download() {
+      console.log(
+        "will generate pdf with",
+        this.form.paperSize,
+        this.form.format
+      );
+
+      let width, height;
       // generate PDF and open it
+      if (this.form.format !== "portrait") {
+        // landscape, default
+        width = paperSizes[this.form.paperSize][0];
+        height = paperSizes[this.form.paperSize][1];
+      } else {
+        // switch width and height
+        width = paperSizes[this.form.paperSize][1];
+        height = paperSizes[this.form.paperSize][0];
+      }
+      console.log(width, height);
+
       // TODO: replace this src with an API reponse after actually generating PDFs
       let src =
         this.form.format === "landscape"