Mercurial > gemma

comparison client/src/components/Pdftool.vue @ 2212:733cfc3db48a pdf-export

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
started pdf template administration moved templates to vuex store, to have them available in pdf box and systen configuration.
author Markus Kottlaender <markus@intevation.de>
date Wed, 06 Feb 2019 16:19:16 +0100
parents da902f0dac88
children 5a4b0c85e7a8
comparison
equal deleted inserted replaced
2211:e901f509bfcd 2212:733cfc3db48a
19 <select 19 <select
20 @change="applyTemplateToForm" 20 @change="applyTemplateToForm"
21 v-model="form.template" 21 v-model="form.template"
22 class="form-control d-block mb-2 w-100 font-weight-bold" 22 class="form-control d-block mb-2 w-100 font-weight-bold"
23 > 23 >
24 <option :value="null"><translate>Chose preset</translate></option>
25 <option 24 <option
26 v-for="template in templates" 25 v-for="template in pdfTemplates"
27 :value="template.name" 26 :value="template.name"
28 :key="template.name" 27 :key="template.name"
29 > 28 >
30 <translate>{{ template.name }}</translate> 29 <translate>{{ template.name }}</translate>
31 </option> 30 </option>
137 format: "landscape", 136 format: "landscape",
138 paperSize: "a4", 137 paperSize: "a4",
139 downloadType: "download", 138 downloadType: "download",
140 resolution: "120" 139 resolution: "120"
141 }, 140 },
142 templates: [
143 {
144 name: "Template 1",
145 properties: {
146 format: "landscape",
147 resolution: "80",
148 paperSize: "a4"
149 },
150 elements: [
151 {
152 type: "docinfo",
153 x_coordinate: 0,
154 y_coordinate: 0,
155 elementWidth: 118,
156 elementHeight: 8,
157 textSize: 9
158 },
159 {
160 type: "image",
161 imageType: "PNG",
162 imageUrl: "",
163 x_coordinate: 30,
164 y_coordinate: 297,
165 imageWidth: 50,
166 imageHeight: 23
167 },
168 {
169 type: "scalebar",
170 x_coordinate: 226.5,
171 y_coordinate: 204
172 //elementsize: 50
173 },
174 {
175 type: "textbox",
176 x_coordinate: 50,
177 y_coordinate: 190,
178 elementSize: 8,
179 text: "textfrom template",
180 color: "black"
181 },
182 {
183 type: "aboutbox"
184 //x_coordinate: 0,
185 //y_coordinate: 210 - 20
186 }
187 ]
188 },
189 {
190 name: "Template 2",
191 properties: {
192 format: "portrait",
193 resolution: "120",
194 paperSize: "a3"
195 },
196 elements: [
197 {
198 type: "docinfo",
199 x_coordinate: 0,
200 y_coordinate: 0,
201 elementWidth: 118,
202 elementHeight: 8,
203 textSize: 9
204 },
205 {
206 type: "image",
207 imageType: "PNG",
208 imageUrl: "",
209 x_coordinate: 30,
210 y_coordinate: 297,
211 imageWidth: 50,
212 imageHeight: 23
213 },
214 {
215 type: "scalebar",
216 x_coordinate: 247.3,
217 y_coordinate: 414
218 //elementsize: 50
219 },
220 {
221 type: "textbox",
222 x_coordinate: 50,
223 y_coordinate: 50,
224 elementSize: 22,
225 text: "from template",
226 color: "black"
227 },
228 {
229 type: "aboutbox"
230 //x_coordinate: 0,
231 //y_coordinate: 210 - 20
232 }
233 ]
234 }
235 ],
236 logoImageForPDF: null, // a HTMLImageElement instance 141 logoImageForPDF: null, // a HTMLImageElement instance
237 readyToGenerate: true // if the user is allowed to press the button 142 readyToGenerate: true // if the user is allowed to press the button
238 }; 143 };
239 }, 144 },
240 computed: { 145 computed: {
241 ...mapState("application", ["showPdfTool", "logoForPDF"]), 146 ...mapState("application", ["showPdfTool", "logoForPDF", "pdfTemplates"]),
242 ...mapState("bottlenecks", ["selectedSurvey"]), 147 ...mapState("bottlenecks", ["selectedSurvey"]),
243 ...mapState("map", ["openLayersMap", "isolinesLegendImgDataURL"]), 148 ...mapState("map", ["openLayersMap", "isolinesLegendImgDataURL"]),
244 ...mapGetters("map", ["getLayerByName"]), 149 ...mapGetters("map", ["getLayerByName"]),
245 ...mapState("user", ["user"]) 150 ...mapState("user", ["user"])
246 }, 151 },
247 methods: { 152 methods: {
248 // When a template is chosen from the dropdown, its propoerties are 153 // When a template is chosen from the dropdown, its propoerties are
249 // applied to the rest of the form. 154 // applied to the rest of the form.
250 applyTemplateToForm() { 155 applyTemplateToForm() {
251 let template = this.templates.find(t => t.name === this.form.template); 156 let template = this.pdfTemplates.find(t => t.name === this.form.template);
252 if (template) { 157 if (template) {
253 this.form.format = template.properties.format; 158 this.form.format = template.properties.format;
254 this.form.paperSize = template.properties.paperSize; 159 this.form.paperSize = template.properties.paperSize;
255 this.form.resolution = template.properties.resolution; 160 this.form.resolution = template.properties.resolution;
256 } 161 }
257 }, 162 },
258 // If there's a template that matches all the form values, this template 163 // If there's a template that matches all the form values, this template
259 // will be set in the dropdown. 164 // will be set in the dropdown.
260 compareFormWithTemplates() { 165 compareFormWithTemplates() {
261 this.form.template = null; 166 this.form.template = null;
262 this.templates.forEach(t => { 167 this.pdfTemplates.forEach(t => {
263 if ( 168 if (
264 this.form.format === t.properties.format && 169 this.form.format === t.properties.format &&
265 this.form.paperSize === t.properties.paperSize && 170 this.form.paperSize === t.properties.paperSize &&
266 this.form.resolution === t.properties.resolution 171 this.form.resolution === t.properties.resolution
267 ) { 172 ) {
268 this.form.template = t.name; 173 this.form.template = t.name;
269 } 174 }
270 }); 175 });
271 }, 176 },
272 download() { 177 download() {
273 let template = this.templates.find(t => t.name === this.form.template); 178 let template = this.pdfTemplates.find(t => t.name === this.form.template);
274 // disable button while working on it 179 // disable button while working on it
275 this.readyToGenerate = false; 180 this.readyToGenerate = false;
276 181
277 console.log( 182 console.log(
278 "will generate pdf with", 183 "will generate pdf with",
623 let aspectRatio = legendImage.width / legendImage.height; 528 let aspectRatio = legendImage.width / legendImage.height;
624 529
625 this.addRoundedBox(doc, docWidth - 54, 0, 54, 50 / aspectRatio + 4); 530 this.addRoundedBox(doc, docWidth - 54, 0, 54, 50 / aspectRatio + 4);
626 doc.addImage(legendImage, docWidth - 52, 2, 50, 50 / aspectRatio); 531 doc.addImage(legendImage, docWidth - 52, 2, 50, 50 / aspectRatio);
627 } 532 }
533 },
534 mounted() {
535 this.$store.dispatch("application/loadPdfTemplates").then(() => {
536 this.form.template = this.pdfTemplates[0].name;
537 });
628 } 538 }
629 }; 539 };
630 </script> 540 </script>