Mercurial > gemma

comparison client/src/components/fairway/Fairwayprofile.vue @ 4595:998f4d7d9626

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: mark diagram strings for translation(fairwayprofile)
author Fadi Abbud <fadi.abbud@intevation.de>
date Wed, 09 Oct 2019 14:40:56 +0200
parents 63fceb662047
children e9a99e81f723
comparison
equal deleted inserted replaced
4593:3632cfc44b69 4595:998f4d7d9626
5 <DiagramLegend> 5 <DiagramLegend>
6 <div class="legend"> 6 <div class="legend">
7 <span 7 <span
8 style="background-color: #5995ff; width: 20px; height: 20px;" 8 style="background-color: #5995ff; width: 20px; height: 20px;"
9 ></span> 9 ></span>
10 Water 10 <span class="fix-trans-space" style="display:inline;" v-translate
11 >Water</span
12 >
11 </div> 13 </div>
12 <div class="legend"> 14 <div class="legend">
13 <span 15 <span
14 :style=" 16 :style="
15 'width: 16px; height: 16px; background-color:' + 17 'width: 16px; height: 16px; background-color:' +
18 '); border: dotted 2px ' + 20 '); border: dotted 2px ' +
19 this.getLayerStyle(1).strokeColor + 21 this.getLayerStyle(1).strokeColor +
20 '; background-clip: padding-box; box-sizing: content-box;' 22 '; background-clip: padding-box; box-sizing: content-box;'
21 " 23 "
22 ></span> 24 ></span>
23 Fairway (LOS 1) 25 <span class="fix-trans-space" style="display:inline;" v-translate
26 >Fairway (LOS 1)</span
27 >
24 </div> 28 </div>
25 <div class="legend"> 29 <div class="legend">
26 <span 30 <span
27 :style=" 31 :style="
28 'width: 16px; height: 16px; background-color:' + 32 'width: 16px; height: 16px; background-color:' +
31 '); border: dashed 2px ' + 35 '); border: dashed 2px ' +
32 this.getLayerStyle(2).strokeColor + 36 this.getLayerStyle(2).strokeColor +
33 '; background-clip: padding-box; box-sizing: content-box;' 37 '; background-clip: padding-box; box-sizing: content-box;'
34 " 38 "
35 ></span> 39 ></span>
36 Fairway (LOS 2) 40 <span class="fix-trans-space" style="display:inline;" v-translate
41 >Fairway (LOS 2)</span
42 >
37 </div> 43 </div>
38 <div class="legend"> 44 <div class="legend">
39 <span 45 <span
40 :style=" 46 :style="
41 'width: 16px; height: 16px; background-color:' + 47 'width: 16px; height: 16px; background-color:' +
44 '); border: solid 2px ' + 50 '); border: solid 2px ' +
45 this.getLayerStyle(3).strokeColor + 51 this.getLayerStyle(3).strokeColor +
46 '; background-clip: padding-box; box-sizing: content-box;' 52 '; background-clip: padding-box; box-sizing: content-box;'
47 " 53 "
48 ></span> 54 ></span>
49 Fairway (LOS 3) 55 <span class="fix-trans-space" style="display:inline;" v-translate
56 >Fairway (LOS 3)</span
57 >
50 </div> 58 </div>
51 <div class="legend"> 59 <div class="legend">
52 <span 60 <span
53 style="width: 14px; height: 14px; background-color: #4a2f06; border: solid 3px black; background-clip: padding-box; box-sizing: content-box;" 61 style="width: 14px; height: 14px; background-color: #4a2f06; border: solid 3px black; background-clip: padding-box; box-sizing: content-box;"
54 ></span> 62 ></span>
55 Sediment 63 <span class="fix-trans-space" style="display:inline;" v-translate
64 >Sediment</span
65 >
56 </div> 66 </div>
57 <div class="legend"> 67 <div class="legend">
58 <span 68 <span
59 style="width: 14px; height: 14px; background-color: rgba(74, 47, 6, 0.6); border: solid 3px #943007; background-clip: padding-box; box-sizing: content-box;" 69 style="width: 14px; height: 14px; background-color: rgba(74, 47, 6, 0.6); border: solid 3px #943007; background-clip: padding-box; box-sizing: content-box;"
60 ></span> 70 ></span>
61 Sediment (Compare) 71 <span class="fix-trans-space" style="display:inline;" v-translate
72 >Sediment (Compare)</span
73 >
62 </div> 74 </div>
63 <div> 75 <div>
64 <select 76 <select
65 v-model="form.template" 77 v-model="form.template"
66 @change="applyChange" 78 @change="applyChange"
347 359
348 this.pdf.doc.setTextColor(color); 360 this.pdf.doc.setTextColor(color);
349 this.pdf.doc.setDrawColor("#5995ff"); 361 this.pdf.doc.setDrawColor("#5995ff");
350 this.pdf.doc.setFillColor("#5995ff"); 362 this.pdf.doc.setFillColor("#5995ff");
351 this.pdf.doc.circle(x, y, 2, "FD"); 363 this.pdf.doc.circle(x, y, 2, "FD");
352 this.pdf.doc.text(x + 3, y + 1, "Water"); 364 this.pdf.doc.text(x + 3, y + 1, this.$gettext("Water"));
353 365
354 this.pdf.doc.setLineDashPattern([0.8], 0); 366 this.pdf.doc.setLineDashPattern([0.8], 0);
355 this.pdf.doc.setDrawColor("#0000ff"); 367 this.pdf.doc.setDrawColor("#0000ff");
356 this.pdf.doc.setFillColor("#fcfacc"); 368 this.pdf.doc.setFillColor("#fcfacc");
357 this.pdf.doc.circle(x, y + 5, 2, "FD"); 369 this.pdf.doc.circle(x, y + 5, 2, "FD");
358 this.pdf.doc.text(x + 3, y + 6, "Fairway (LOS 1)"); 370 this.pdf.doc.text(x + 3, y + 6, this.$gettext("Fairway (LOS 1)"));
359 371
360 this.pdf.doc.setLineDashPattern([1.8], 0); 372 this.pdf.doc.setLineDashPattern([1.8], 0);
361 this.pdf.doc.setFillColor("#fdfce5"); 373 this.pdf.doc.setFillColor("#fdfce5");
362 this.pdf.doc.circle(x, y + 10, 2, "FD"); 374 this.pdf.doc.circle(x, y + 10, 2, "FD");
363 this.pdf.doc.text(x + 3, y + 11, "Fairway (LOS 2)"); 375 this.pdf.doc.text(x + 3, y + 11, this.$gettext("Fairway (LOS 2)"));
364 376
365 this.pdf.doc.setLineDashPattern([], 0); 377 this.pdf.doc.setLineDashPattern([], 0);
366 this.pdf.doc.setFillColor("#ffffff"); 378 this.pdf.doc.setFillColor("#ffffff");
367 this.pdf.doc.circle(x, y + 15, 2, "FD"); 379 this.pdf.doc.circle(x, y + 15, 2, "FD");
368 this.pdf.doc.text(x + 3, y + 16, "Fairway (LOS 3)"); 380 this.pdf.doc.text(x + 3, y + 16, this.$gettext("Fairway (LOS 3)"));
369 381
370 this.pdf.doc.setDrawColor("black"); 382 this.pdf.doc.setDrawColor("black");
371 this.pdf.doc.setFillColor("#4a2e06"); 383 this.pdf.doc.setFillColor("#4a2e06");
372 this.pdf.doc.circle(x, y + 20, 2, "FD"); 384 this.pdf.doc.circle(x, y + 20, 2, "FD");
373 this.pdf.doc.text(x + 3, y + 21, "Sediment"); 385 this.pdf.doc.text(x + 3, y + 21, this.$gettext("Sediment"));
374 386
375 this.pdf.doc.setDrawColor("#943007"); 387 this.pdf.doc.setDrawColor("#943007");
376 this.pdf.doc.setFillColor("#928269"); 388 this.pdf.doc.setFillColor("#928269");
377 this.pdf.doc.circle(x, y + 25, 2, "FD"); 389 this.pdf.doc.circle(x, y + 25, 2, "FD");
378 this.pdf.doc.text(x + 3, y + 26, "Sediment (Compare)"); 390 this.pdf.doc.text(x + 3, y + 26, this.$gettext("Sediment (Compare)"));
379 }, 391 },
380 getPrintLayout(svgHeight, svgWidth) { 392 getPrintLayout(svgHeight, svgWidth) {
381 return { 393 return {
382 main: { 394 main: {
383 top: Math.floor(0.08 * svgHeight), 395 top: Math.floor(0.08 * svgHeight),
483 .attr("transform", ["rotate(-90)"]) 495 .attr("transform", ["rotate(-90)"])
484 .attr("y", dimensions.width + Math.floor(0.06 * dimensions.width)) 496 .attr("y", dimensions.width + Math.floor(0.06 * dimensions.width))
485 .attr("x", -dimensions.mainHeight / 2) 497 .attr("x", -dimensions.mainHeight / 2)
486 .attr("fill", "black") 498 .attr("fill", "black")
487 .style("text-anchor", "middle") 499 .style("text-anchor", "middle")
488 .text("Depth [m]"); 500 .text(this.$gettext("Depth [m]"));
489 graph 501 graph
490 .append("text") 502 .append("text")
491 .attr("transform", ["rotate(-90)"]) 503 .attr("transform", ["rotate(-90)"])
492 .attr("y", -1 * Math.floor(0.065 * dimensions.width)) 504 .attr("y", -1 * Math.floor(0.065 * dimensions.width))
493 .attr("x", -dimensions.mainHeight / 2) 505 .attr("x", -dimensions.mainHeight / 2)
494 .attr("fill", "black") 506 .attr("fill", "black")
495 .style("text-anchor", "middle") 507 .style("text-anchor", "middle")
496 .text("Waterlevel [m]"); 508 .text(this.$gettext("Waterlevel [m]"));
497 graph 509 graph
498 .append("text") 510 .append("text")
499 .attr("y", 0) 511 .attr("y", 0)
500 .attr("x", 0) 512 .attr("x", 0)
501 .attr("dy", "1em") 513 .attr("dy", "1em")
503 .style("text-anchor", "middle") 515 .style("text-anchor", "middle")
504 .attr("transform", [ 516 .attr("transform", [
505 `translate(${dimensions.width / 2} ${dimensions.mainHeight})`, 517 `translate(${dimensions.width / 2} ${dimensions.mainHeight})`,
506 "rotate(0)" 518 "rotate(0)"
507 ]) 519 ])
508 .text("Width [m]"); 520 .text(this.$gettext("Width [m]"));
509 }, 521 },
510 generateScalesAndGraph({ svg, height, width, dimensions, offsetY }) { 522 generateScalesAndGraph({ svg, height, width, dimensions, offsetY }) {
511 let xScale = d3 523 let xScale = d3
512 .scaleLinear() 524 .scaleLinear()
513 .domain([0, this.totalLength]) 525 .domain([0, this.totalLength])