changeset 1033:fd7059f7cbdc

added UI for PDF export (with static PDFs)
author Markus Kottlaender <markus@intevation.de>
date Wed, 24 Oct 2018 15:35:50 +0200
parents 957613a71b35
children 4299f9c1f191
files client/src/App.vue client/src/pdftool/Pdftool.vue
diffstat 2 files changed, 138 insertions(+), 1 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/App.vue	Wed Oct 24 11:20:30 2018 +0200
+++ b/client/src/App.vue	Wed Oct 24 15:35:50 2018 +0200
@@ -19,6 +19,7 @@
                 <Userbar></Userbar>
                 <Morphtool v-if="routeName == 'mainview'"></Morphtool>
                 <Linetool v-if="routeName == 'mainview'"></Linetool>
+                <Pdftool v-if="routeName == 'mainview'"></Pdftool>
             </div>
         </div>
         <div class="d-flex flex-column">
@@ -105,6 +106,7 @@
 import Userbar from "./application/Userbar";
 import Linetool from "./linetool/Linetool";
 import Morphtool from "./morphtool/Morphtool";
+import Pdftool from "./pdftool/Pdftool";
 
 export default {
   name: "app",
@@ -120,7 +122,8 @@
     Topbar,
     Userbar,
     Linetool,
-    Morphtool
+    Morphtool,
+    Pdftool
   }
 };
 </script>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/pdftool/Pdftool.vue	Wed Oct 24 15:35:50 2018 +0200
@@ -0,0 +1,134 @@
+<template>
+    <div class="pdftool">
+        <div @click="collapse" class="d-flex flex-column ui-element minimizer">
+            <i :class="['fa', 'mt-1', {'fa-file-pdf-o': collapsed}, {'fa-close': !collapsed}]"></i>
+        </div>
+        <div :class="style">
+            <div v-if="!collapsed" class="card-body">
+                <div class="headline">
+                    <h4 class="card-title">Generate PDF</h4>
+                </div>
+                <hr>
+                <b>Chose format:</b><br>
+                <select v-model="form.format" class="d-block w-100">
+                    <option>landscape</option>
+                    <option>portrait</option>
+                </select>
+                <small class="d-block my-2">
+                    <input type="radio" id="pdfexport-downloadtype-download" value="download" v-model="form.downloadType" selected />
+                    <label for="pdfexport-downloadtype-download" class="ml-1 mr-2">Download</label>
+                    <input type="radio" id="pdfexport-downloadtype-open" value="open" v-model="form.downloadType" />
+                    <label for="pdfexport-downloadtype-open" class="ml-1">Open in new window</label>
+                </small>
+                <button @click="download" type="button" class="btn btn-sm btn-info d-block w-100">Generate PDF</button>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.pdftool {
+  position: relative;
+  margin-right: $offset;
+  margin-bottom: $offset;
+  bottom: 48px;
+  right: 0;
+}
+
+.inner {
+  background-color: white;
+  margin-left: $small-offset;
+  opacity: $slight-transparent;
+  text-align: left;
+}
+
+.pdftoolcollapsed {
+  min-height: $icon-height;
+  width: $icon-width;
+  transition: $transition-fast;
+}
+
+.pdftoolexpanded {
+  width: $identify-width;
+}
+
+.minimizer {
+  position: absolute;
+  z-index: 2;
+  right: 0;
+  top: 0;
+  margin-top: $x-small-offset;
+  border-radius: $border-radius;
+  height: $icon-width;
+  width: $icon-height;
+}
+</style>
+
+<script>
+/*
+ * This is Free Software under GNU Affero General Public License v >= 3.0
+ * without warranty, see README.md and license for details.
+ * 
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ * License-Filename: LICENSES/AGPL-3.0.txt
+ * 
+ * Copyright (C) 2018 by via donau 
+ *   – Österreichische Wasserstraßen-Gesellschaft mbH
+ * Software engineering by Intevation GmbH
+ * 
+ * Author(s):
+ * Markus Kottländer <markus.kottlaender@intevation.de>
+ */
+import { mapState } from "vuex";
+import { HTTP } from "../application/lib/http";
+
+export default {
+  name: "pdftool",
+  data() {
+    return {
+      collapsed: true,
+      form: {
+        format: "landscape",
+        downloadType: "download"
+      }
+    };
+  },
+  computed: {
+    ...mapState("application", ["showPrintDialog"]),
+    style() {
+      return {
+        "ui-element": true,
+        card: true,
+        inner: true,
+        shadow: true,
+        pdftoolexpanded: !this.collapsed,
+        pdftoolcollapsed: this.collapsed
+      };
+    },
+  },
+  methods: {
+    collapse() {
+      this.collapsed = !this.collapsed;
+    },
+    download() {
+      // generate PDF and open it
+      // TODO: replace this src with an API reponse after actually generating PDFs
+      let src = this.form.format === "landscape"
+       ? "/img/PrintTemplate-Var2-Landscape.pdf"
+       : "/img/PrintTemplate-Var2-Portrait.pdf"
+
+      let a = document.createElement("a");
+      a.href = src;
+
+      if (this.form.downloadType === "download")
+        a.download = src.substr(src.lastIndexOf("/") + 1);
+      else
+        a.target = "_blank";
+
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+    }
+  }
+};
+</script>