Mercurial > gemma
changeset 1033:fd7059f7cbdc
added UI for PDF export (with static PDFs)
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Wed, 24 Oct 2018 15:35:50 +0200 |
parents | 957613a71b35 |
children | 4299f9c1f191 |
files | client/src/App.vue client/src/pdftool/Pdftool.vue |
diffstat | 2 files changed, 138 insertions(+), 1 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/App.vue Wed Oct 24 11:20:30 2018 +0200 +++ b/client/src/App.vue Wed Oct 24 15:35:50 2018 +0200 @@ -19,6 +19,7 @@ <Userbar></Userbar> <Morphtool v-if="routeName == 'mainview'"></Morphtool> <Linetool v-if="routeName == 'mainview'"></Linetool> + <Pdftool v-if="routeName == 'mainview'"></Pdftool> </div> </div> <div class="d-flex flex-column"> @@ -105,6 +106,7 @@ import Userbar from "./application/Userbar"; import Linetool from "./linetool/Linetool"; import Morphtool from "./morphtool/Morphtool"; +import Pdftool from "./pdftool/Pdftool"; export default { name: "app", @@ -120,7 +122,8 @@ Topbar, Userbar, Linetool, - Morphtool + Morphtool, + Pdftool } }; </script>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/client/src/pdftool/Pdftool.vue Wed Oct 24 15:35:50 2018 +0200 @@ -0,0 +1,134 @@ +<template> + <div class="pdftool"> + <div @click="collapse" class="d-flex flex-column ui-element minimizer"> + <i :class="['fa', 'mt-1', {'fa-file-pdf-o': collapsed}, {'fa-close': !collapsed}]"></i> + </div> + <div :class="style"> + <div v-if="!collapsed" class="card-body"> + <div class="headline"> + <h4 class="card-title">Generate PDF</h4> + </div> + <hr> + <b>Chose format:</b><br> + <select v-model="form.format" class="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> + +<style lang="scss" scoped> +.pdftool { + position: relative; + margin-right: $offset; + margin-bottom: $offset; + bottom: 48px; + right: 0; +} + +.inner { + background-color: white; + margin-left: $small-offset; + opacity: $slight-transparent; + text-align: left; +} + +.pdftoolcollapsed { + min-height: $icon-height; + width: $icon-width; + transition: $transition-fast; +} + +.pdftoolexpanded { + width: $identify-width; +} + +.minimizer { + position: absolute; + z-index: 2; + right: 0; + top: 0; + margin-top: $x-small-offset; + border-radius: $border-radius; + height: $icon-width; + width: $icon-height; +} +</style> + +<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 { + collapsed: true, + form: { + format: "landscape", + downloadType: "download" + } + }; + }, + computed: { + ...mapState("application", ["showPrintDialog"]), + style() { + return { + "ui-element": true, + card: true, + inner: true, + shadow: true, + pdftoolexpanded: !this.collapsed, + pdftoolcollapsed: this.collapsed + }; + }, + }, + methods: { + collapse() { + this.collapsed = !this.collapsed; + }, + 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>