Mercurial > gemma

comparison client/src/pdftool/Pdftool.vue @ 1033:fd7059f7cbdc

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
added UI for PDF export (with static PDFs)
author Markus Kottlaender <markus@intevation.de>
date Wed, 24 Oct 2018 15:35:50 +0200
parents
children c576b5d59c58
comparison
equal deleted inserted replaced
1021:957613a71b35 1033:fd7059f7cbdc
1 <template>
2 <div class="pdftool">
3 <div @click="collapse" class="d-flex flex-column ui-element minimizer">
4 <i :class="['fa', 'mt-1', {'fa-file-pdf-o': collapsed}, {'fa-close': !collapsed}]"></i>
5 </div>
6 <div :class="style">
7 <div v-if="!collapsed" class="card-body">
8 <div class="headline">
9 <h4 class="card-title">Generate PDF</h4>
10 </div>
11 <hr>
12 <b>Chose format:</b><br>
13 <select v-model="form.format" class="d-block w-100">
14 <option>landscape</option>
15 <option>portrait</option>
16 </select>
17 <small class="d-block my-2">
18 <input type="radio" id="pdfexport-downloadtype-download" value="download" v-model="form.downloadType" selected />
19 <label for="pdfexport-downloadtype-download" class="ml-1 mr-2">Download</label>
20 <input type="radio" id="pdfexport-downloadtype-open" value="open" v-model="form.downloadType" />
21 <label for="pdfexport-downloadtype-open" class="ml-1">Open in new window</label>
22 </small>
23 <button @click="download" type="button" class="btn btn-sm btn-info d-block w-100">Generate PDF</button>
24 </div>
25 </div>
26 </div>
27 </template>
28
29 <style lang="scss" scoped>
30 .pdftool {
31 position: relative;
32 margin-right: $offset;
33 margin-bottom: $offset;
34 bottom: 48px;
35 right: 0;
36 }
37
38 .inner {
39 background-color: white;
40 margin-left: $small-offset;
41 opacity: $slight-transparent;
42 text-align: left;
43 }
44
45 .pdftoolcollapsed {
46 min-height: $icon-height;
47 width: $icon-width;
48 transition: $transition-fast;
49 }
50
51 .pdftoolexpanded {
52 width: $identify-width;
53 }
54
55 .minimizer {
56 position: absolute;
57 z-index: 2;
58 right: 0;
59 top: 0;
60 margin-top: $x-small-offset;
61 border-radius: $border-radius;
62 height: $icon-width;
63 width: $icon-height;
64 }
65 </style>
66
67 <script>
68 /*
69 * This is Free Software under GNU Affero General Public License v >= 3.0
70 * without warranty, see README.md and license for details.
71 *
72 * SPDX-License-Identifier: AGPL-3.0-or-later
73 * License-Filename: LICENSES/AGPL-3.0.txt
74 *
75 * Copyright (C) 2018 by via donau
76 * – Österreichische Wasserstraßen-Gesellschaft mbH
77 * Software engineering by Intevation GmbH
78 *
79 * Author(s):
80 * Markus Kottländer <markus.kottlaender@intevation.de>
81 */
82 import { mapState } from "vuex";
83 import { HTTP } from "../application/lib/http";
84
85 export default {
86 name: "pdftool",
87 data() {
88 return {
89 collapsed: true,
90 form: {
91 format: "landscape",
92 downloadType: "download"
93 }
94 };
95 },
96 computed: {
97 ...mapState("application", ["showPrintDialog"]),
98 style() {
99 return {
100 "ui-element": true,
101 card: true,
102 inner: true,
103 shadow: true,
104 pdftoolexpanded: !this.collapsed,
105 pdftoolcollapsed: this.collapsed
106 };
107 },
108 },
109 methods: {
110 collapse() {
111 this.collapsed = !this.collapsed;
112 },
113 download() {
114 // generate PDF and open it
115 // TODO: replace this src with an API reponse after actually generating PDFs
116 let src = this.form.format === "landscape"
117 ? "/img/PrintTemplate-Var2-Landscape.pdf"
118 : "/img/PrintTemplate-Var2-Portrait.pdf"
119
120 let a = document.createElement("a");
121 a.href = src;
122
123 if (this.form.downloadType === "download")
124 a.download = src.substr(src.lastIndexOf("/") + 1);
125 else
126 a.target = "_blank";
127
128 document.body.appendChild(a);
129 a.click();
130 document.body.removeChild(a);
131 }
132 }
133 };
134 </script>