diff client/src/components/Pdftool.vue @ 1558:0ded4c56978e

refac: component filestructure. remove admin/map hierarchy
author Thomas Junk <thomas.junk@intevation.de>
date Wed, 12 Dec 2018 09:22:20 +0100
parents client/src/components/map/Pdftool.vue@9b81ac91a43e
children f2d24dceecc7
line wrap: on
line diff
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/Pdftool.vue	Wed Dec 12 09:22:20 2018 +0100
@@ -0,0 +1,110 @@
+<template>
+  <div
+    :class="[
+      'box ui-element rounded bg-white text-nowrap',
+      { expanded: showPdfTool }
+    ]"
+  >
+    <div style="width: 20rem">
+      <h6 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center">
+        <font-awesome-icon icon="file-pdf" class="mr-2"></font-awesome-icon
+        ><translate>Generate PDF</translate>
+        <font-awesome-icon
+          icon="times"
+          class="ml-auto text-muted"
+          @click="$store.commit('application/showPdfTool', false)"
+        ></font-awesome-icon>
+      </h6>
+      <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>
+        </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"
+            ><translate>Download</translate></label
+          >
+          <input
+            type="radio"
+            id="pdfexport-downloadtype-open"
+            value="open"
+            v-model="form.downloadType"
+          />
+          <label for="pdfexport-downloadtype-open" class="ml-1"
+            ><translate>Open in new window</translate></label
+          >
+        </small>
+        <button
+          @click="download"
+          type="button"
+          class="btn btn-sm btn-info d-block w-100"
+        >
+          <translate>Generate PDF</translate>
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<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 {
+      form: {
+        format: "landscape",
+        downloadType: "download"
+      }
+    };
+  },
+  computed: {
+    ...mapState("application", ["showPdfTool"]),
+    ...mapState("bottlenecks", ["selectedSurvey"])
+  },
+  methods: {
+    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>