Mercurial > gemma

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