Mercurial > gemma
view client/src/pdftool/Pdftool.vue @ 1191:b23622905a3f
switched entirely to sass instead of scss
for cleaner code/less lines, just removed all ; and {}
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Fri, 16 Nov 2018 14:37:07 +0100 |
parents | 2e06bc53b002 |
children | 4f666dbb9abd |
line wrap: on
line source
<template> <div class="pdftool" :style="selectedSurvey ? 'bottom: 140px' : ''"> <div @click="$store.commit('application/showPdfTool', !showPdfTool)" class="d-flex flex-column ui-element minimizer"> <i :class="['fa', 'mt-1', {'fa-file-pdf-o': !showPdfTool}, {'fa-close': showPdfTool}]"></i> </div> <div :class="style"> <div v-if="showPdfTool" 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="sass" scoped> .pdftool position: absolute margin-right: $offset margin-bottom: $offset bottom: 96px 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 { form: { format: "landscape", downloadType: "download" } }; }, computed: { ...mapState("application", ["showPdfTool"]), ...mapState("bottlenecks", ["selectedSurvey"]), style() { return { "ui-element": true, card: true, inner: true, shadow: true, pdftoolexpanded: this.showPdfTool, pdftoolcollapsed: !this.showPdfTool }; } }, 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>