view client/src/components/map/Pdftool.vue @ 1274:dc3fb8ad8f86

further improved box header style
author Markus Kottlaender <markus@intevation.de>
date Thu, 22 Nov 2018 07:23:14 +0100
parents bc55ffaeb639
children e9fb72fa6bae
line wrap: on
line source

<template>
    <div :class="['box ui-element rounded bg-white mb-auto text-nowrap', { expanded: showPdfTool }]">
        <div style="width: 15rem">
            <h6 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center">
              <i class="fa fa-file-pdf-o mr-2"></i>
              Generate PDF
              <i class="fa fa-times ml-auto text-muted" @click="$store.commit('application/showPdfTool', false)"></i>
            </h6>
            <div class="p-3">
                <b>Chose format:</b>
                <select v-model="form.format" class="form-control 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>

<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>