Mercurial > gemma
comparison 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 |
comparison
equal
deleted
inserted
replaced
1557:62171cd9a42b | 1558:0ded4c56978e |
---|---|
1 <template> | |
2 <div | |
3 :class="[ | |
4 'box ui-element rounded bg-white text-nowrap', | |
5 { expanded: showPdfTool } | |
6 ]" | |
7 > | |
8 <div style="width: 20rem"> | |
9 <h6 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center"> | |
10 <font-awesome-icon icon="file-pdf" class="mr-2"></font-awesome-icon | |
11 ><translate>Generate PDF</translate> | |
12 <font-awesome-icon | |
13 icon="times" | |
14 class="ml-auto text-muted" | |
15 @click="$store.commit('application/showPdfTool', false)" | |
16 ></font-awesome-icon> | |
17 </h6> | |
18 <div class="p-3"> | |
19 <b><translate>Chose format:</translate></b> | |
20 <select v-model="form.format" class="form-control d-block w-100"> | |
21 <option><translate>landscape</translate></option> | |
22 <option><translate>portrait</translate></option> | |
23 </select> | |
24 <small class="d-block my-2"> | |
25 <input | |
26 type="radio" | |
27 id="pdfexport-downloadtype-download" | |
28 value="download" | |
29 v-model="form.downloadType" | |
30 selected | |
31 /> | |
32 <label for="pdfexport-downloadtype-download" class="ml-1 mr-2" | |
33 ><translate>Download</translate></label | |
34 > | |
35 <input | |
36 type="radio" | |
37 id="pdfexport-downloadtype-open" | |
38 value="open" | |
39 v-model="form.downloadType" | |
40 /> | |
41 <label for="pdfexport-downloadtype-open" class="ml-1" | |
42 ><translate>Open in new window</translate></label | |
43 > | |
44 </small> | |
45 <button | |
46 @click="download" | |
47 type="button" | |
48 class="btn btn-sm btn-info d-block w-100" | |
49 > | |
50 <translate>Generate PDF</translate> | |
51 </button> | |
52 </div> | |
53 </div> | |
54 </div> | |
55 </template> | |
56 | |
57 <script> | |
58 /* This is Free Software under GNU Affero General Public License v >= 3.0 | |
59 * without warranty, see README.md and license for details. | |
60 * | |
61 * SPDX-License-Identifier: AGPL-3.0-or-later | |
62 * License-Filename: LICENSES/AGPL-3.0.txt | |
63 * | |
64 * Copyright (C) 2018 by via donau | |
65 * – Österreichische Wasserstraßen-Gesellschaft mbH | |
66 * Software engineering by Intevation GmbH | |
67 * | |
68 * Author(s): | |
69 * Markus Kottländer <markus.kottlaender@intevation.de> | |
70 */ | |
71 import { mapState } from "vuex"; | |
72 //import { HTTP } from "../application/lib/http"; | |
73 | |
74 export default { | |
75 name: "pdftool", | |
76 data() { | |
77 return { | |
78 form: { | |
79 format: "landscape", | |
80 downloadType: "download" | |
81 } | |
82 }; | |
83 }, | |
84 computed: { | |
85 ...mapState("application", ["showPdfTool"]), | |
86 ...mapState("bottlenecks", ["selectedSurvey"]) | |
87 }, | |
88 methods: { | |
89 download() { | |
90 // generate PDF and open it | |
91 // TODO: replace this src with an API reponse after actually generating PDFs | |
92 let src = | |
93 this.form.format === "landscape" | |
94 ? "/img/PrintTemplate-Var2-Landscape.pdf" | |
95 : "/img/PrintTemplate-Var2-Portrait.pdf"; | |
96 | |
97 let a = document.createElement("a"); | |
98 a.href = src; | |
99 | |
100 if (this.form.downloadType === "download") | |
101 a.download = src.substr(src.lastIndexOf("/") + 1); | |
102 else a.target = "_blank"; | |
103 | |
104 document.body.appendChild(a); | |
105 a.click(); | |
106 document.body.removeChild(a); | |
107 } | |
108 } | |
109 }; | |
110 </script> |