midgard/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

More work on the flyer

Browse source
This commit is contained in:
pietervdvn 2022-09-17 21:35:56 +02:00
parent 6e1431d520
commit 1f87728782
6 changed files with 291 additions and 273 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
Utils/svgToPdf.ts
View file

@ -12,7 +12,6 @@ import Translations from "../UI/i18n/Translations";
import {Utils} from "../Utils"; import {Utils} from "../Utils";
import Locale from "../UI/i18n/Locale"; import Locale from "../UI/i18n/Locale";
import Constants from "../Models/Constants"; import Constants from "../Models/Constants";
import {QueryParameters} from "../Logic/Web/QueryParameters";
import Hash from "../Logic/Web/Hash"; import Hash from "../Logic/Web/Hash";
class SvgToPdfInternals { class SvgToPdfInternals {
@ -213,13 +212,13 @@ class SvgToPdfInternals {
} }
private extractTranslation(text: string) { private extractTranslation(text: string) {
if(text === "$version"){
return new Date().toISOString().substring("2022-01-02THH:MM".length )+" - v"+Constants.vNumber
}
const pathPart = text.match(/\$(([_a-zA-Z0-9?]+\.)+[_a-zA-Z0-9?]+)(.*)/) const pathPart = text.match(/\$(([_a-zA-Z0-9?]+\.)+[_a-zA-Z0-9?]+)(.*)/)
if (pathPart === null) { if (pathPart === null) {
return text return text
} }
if(text === "$version"){
return new Date().toISOString()+" "+Constants.vNumber
}
let t: any = Translations.t let t: any = Translations.t
const path = pathPart[1].split(".") const path = pathPart[1].split(".")
if (this._importedTranslations[path[0]]) { if (this._importedTranslations[path[0]]) {
@ -673,7 +672,6 @@ export class SvgToPdfPage {
history.replaceState(null, "", "") history.replaceState(null, "", "")
const state = new FeaturePipelineState(layout) const state = new FeaturePipelineState(layout)
state.locationControl.addCallbackAndRunD(l => console.trace("Location is",l))
state.locationControl.setData({ state.locationControl.setData({
zoom, zoom,
lat: this.options?.overrideLocation?.lat ?? Number(params["lat"] ?? 51.05016), lat: this.options?.overrideLocation?.lat ?? Number(params["lat"] ?? 51.05016),
@ -784,12 +782,15 @@ export class SvgToPdfPage {
export class SvgToPdf { export class SvgToPdf {
public static readonly templates : Record<string, {pages: string[], description: string | Translation}>= { public static readonly templates : Record<string, {pages: string[], description: string | Translation}>= {
flyer_a4:{pages: ["/assets/templates/MapComplete-flyer.svg","/assets/templates/MapComplete-flyer.back.svg"], description: Translations.t.flyer.description} flyer_a4:{pages: ["/assets/templates/MapComplete-flyer.svg","/assets/templates/MapComplete-flyer.back.svg"], description: Translations.t.flyer.description},
poster_a2: {pages: ["/assets/templates/MapComplete-poster-a2.svg"], description: "A basic A2 poster (similar to the flyer)"}
} }
private readonly _title: string;
private readonly _pages: SvgToPdfPage[] private readonly _pages: SvgToPdfPage[]
constructor(pages: string[], options?: SvgToPdfOptions) { constructor(title: string, pages: string[], options?: SvgToPdfOptions) {
this._title = title;
options = options ?? <SvgToPdfOptions>{} options = options ?? <SvgToPdfOptions>{}
options.textSubstitutions = options.textSubstitutions ?? {} options.textSubstitutions = options.textSubstitutions ?? {}
const mapCount = "" + Array.from(AllKnownLayouts.allKnownLayouts.values()).filter(th => !th.hideFromOverview).length; const mapCount = "" + Array.from(AllKnownLayouts.allKnownLayouts.values()).filter(th => !th.hideFromOverview).length;
@ -799,7 +800,7 @@ export class SvgToPdf {
} }
public async ConvertSvg(saveAs: string, language: string): Promise<void> { public async ConvertSvg(language: string): Promise<void> {
const firstPage = this._pages[0]._svgRoot const firstPage = this._pages[0]._svgRoot
const width = SvgToPdfInternals.attrNumber(firstPage, "width") const width = SvgToPdfInternals.attrNumber(firstPage, "width")
const height = SvgToPdfInternals.attrNumber(firstPage, "height") const height = SvgToPdfInternals.attrNumber(firstPage, "height")
@ -812,11 +813,15 @@ export class SvgToPdf {
} }
Locale.language.setData(language) Locale.language.setData(language)
const doc = new jsPDF(mode) const doc = new jsPDF(mode, undefined, [width, height])
doc.advancedAPI(advancedApi => { doc.advancedAPI(advancedApi => {
for (let i = 0; i < this._pages.length; i++) { for (let i = 0; i < this._pages.length; i++) {
if (i > 0) { if (i > 0) {
advancedApi.addPage() const page = this._pages[i]._svgRoot
const width = SvgToPdfInternals.attrNumber(page, "width")
const height = SvgToPdfInternals.attrNumber(page, "height")
advancedApi.addPage([width, height])
const mediabox: { bottomLeftX: number, bottomLeftY: number, topRightX: number, topRightY: number } = advancedApi.getCurrentPageInfo().pageContext.mediaBox const mediabox: { bottomLeftX: number, bottomLeftY: number, topRightX: number, topRightY: number } = advancedApi.getCurrentPageInfo().pageContext.mediaBox
const targetWidth = 297 const targetWidth = 297
const targetHeight = 210 const targetHeight = 210
@ -827,7 +832,7 @@ export class SvgToPdf {
this._pages[i].drawPage(advancedApi, i, language) this._pages[i].drawPage(advancedApi, i, language)
} }
}) })
await doc.save(saveAs); await doc.save(this._title+"."+language+".pdf");
} }

176
assets/templates/MapComplete-flyer.back.svg
View file

@ -26,9 +26,9 @@
showgrid="false" showgrid="false"
showguides="true" showguides="true"
inkscape:guide-bbox="true" inkscape:guide-bbox="true"
inkscape:zoom="1.9704628" inkscape:zoom="2.0156476"
inkscape:cx="1058.3808" inkscape:cx="420.46041"
inkscape:cy="146.15856" inkscape:cy="393.42195"
inkscape:window-width="1920" inkscape:window-width="1920"
inkscape:window-height="1007" inkscape:window-height="1007"
inkscape:window-x="0" inkscape:window-x="0"
@ -59,6 +59,12 @@
</sodipodi:namedview> </sodipodi:namedview>
<defs <defs
id="defs2"> id="defs2">
<rect
x="1082.1387"
y="440.97953"
width="153.90692"
height="16.164941"
id="rect4214" />
<marker <marker
style="overflow:visible" style="overflow:visible"
id="Arrow2Lstart" id="Arrow2Lstart"
@ -447,14 +453,14 @@
style="font-style:normal;font-weight:normal;font-size:40px;line-height:1.25;font-family:sans-serif;white-space:pre;shape-inside:url(#rect21432-8);display:inline;fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:0.264848;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"><tspan style="font-style:normal;font-weight:normal;font-size:40px;line-height:1.25;font-family:sans-serif;white-space:pre;shape-inside:url(#rect21432-8);display:inline;fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:0.264848;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"><tspan
x="28.759766" x="28.759766"
y="697.7954" y="697.7954"
id="tspan43984"><tspan id="tspan8299"><tspan
style="font-size:18.6667px;-inkscape-font-specification:'sans-serif, Normal'" style="font-size:18.6667px;-inkscape-font-specification:'sans-serif, Normal'"
id="tspan43982">$map(theme:aed,z:14,lat:</tspan></tspan><tspan id="tspan8297">$map(theme:aed,z:14,lat:</tspan></tspan><tspan
x="28.759766" x="28.759766"
y="747.7954" y="747.7954"
id="tspan43988"><tspan id="tspan8303"><tspan
style="font-size:18.6667px;-inkscape-font-specification:'sans-serif, Normal'" style="font-size:18.6667px;-inkscape-font-specification:'sans-serif, Normal'"
id="tspan43986">51.2098,lon:3.2284)</tspan></tspan></text> id="tspan8301">51.2098,lon:3.2284)</tspan></tspan></text>
<text <text
xml:space="preserve" xml:space="preserve"
transform="matrix(0.26458333,0,0,0.26458333,1.3325782,-88.396258)" transform="matrix(0.26458333,0,0,0.26458333,1.3325782,-88.396258)"
@ -462,9 +468,9 @@
style="font-style:normal;font-weight:normal;font-size:40px;line-height:1.25;font-family:sans-serif;white-space:pre;shape-inside:url(#rect13433);fill:#000000;fill-opacity:1;stroke:none"><tspan style="font-style:normal;font-weight:normal;font-size:40px;line-height:1.25;font-family:sans-serif;white-space:pre;shape-inside:url(#rect13433);fill:#000000;fill-opacity:1;stroke:none"><tspan
x="28.759766" x="28.759766"
y="697.7954" y="697.7954"
id="tspan43992"><tspan id="tspan8307"><tspan
style="font-size:16px;-inkscape-font-specification:'sans-serif, Normal'" style="font-size:16px;-inkscape-font-specification:'sans-serif, Normal'"
id="tspan43990">$flyer.toerisme_vlaanderen</tspan></tspan></text> id="tspan8305">$flyer.toerisme_vlaanderen</tspan></tspan></text>
<rect <rect
style="fill:#deadff;fill-opacity:1;stroke:#000000;stroke-width:0.0182753;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" style="fill:#deadff;fill-opacity:1;stroke:#000000;stroke-width:0.0182753;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect11121" id="rect11121"
@ -476,31 +482,31 @@
xml:space="preserve" xml:space="preserve"
transform="matrix(0.26458333,0,0,0.26458333,3.1668997,-43.500981)" transform="matrix(0.26458333,0,0,0.26458333,3.1668997,-43.500981)"
id="text17151" id="text17151"
style="font-style:normal;font-weight:normal;font-size:40px;line-height:0.25;font-family:sans-serif;white-space:pre;fill:#000000;fill-opacity:1;stroke:none;shape-inside:url(#rect17153)"><tspan style="font-style:normal;font-weight:normal;font-size:40px;line-height:0.25;font-family:sans-serif;white-space:pre;shape-inside:url(#rect17153);fill:#000000;fill-opacity:1;stroke:none"><tspan
x="28.759766" x="28.759766"
y="677.7954" y="677.7954"
id="tspan43996"><tspan id="tspan8311"><tspan
style="font-size:18.6667px;-inkscape-font-specification:'sans-serif, Normal'" style="font-size:18.6667px;-inkscape-font-specification:'sans-serif, Normal'"
id="tspan43994">$map(theme:toerisme_vlaandere</tspan></tspan><tspan id="tspan8309">$map(theme:toerisme_vlaandere</tspan></tspan><tspan
x="28.759766" x="28.759766"
y="691.20604" y="691.20604"
id="tspan44002"><tspan id="tspan8317"><tspan
style="font-size:18.6667px;-inkscape-font-specification:'sans-serif, Normal'" style="font-size:18.6667px;-inkscape-font-specification:'sans-serif, Normal'"
id="tspan43998">n,layers:none</tspan><tspan id="tspan8313">n,layers:none</tspan><tspan
style="font-size:18.6667px;-inkscape-font-specification:'sans-serif, Normal'" style="font-size:18.6667px;-inkscape-font-specification:'sans-serif, Normal'"
id="tspan44000">,layer-</tspan></tspan><tspan id="tspan8315">,layer-</tspan></tspan><tspan
x="28.759766" x="28.759766"
y="704.61669" y="704.61669"
id="tspan44006"><tspan id="tspan8321"><tspan
style="font-size:18.6667px;-inkscape-font-specification:'sans-serif, Normal'" style="font-size:18.6667px;-inkscape-font-specification:'sans-serif, Normal'"
id="tspan44004">charging_station_ebikes:force,lat:</tspan></tspan><tspan id="tspan8319">charging_station_ebikes:force,lat:</tspan></tspan><tspan
x="28.759766" x="28.759766"
y="718.02733" y="718.02733"
id="tspan44012"><tspan id="tspan8327"><tspan
style="font-size:18.6667px;-inkscape-font-specification:'sans-serif, Normal'" style="font-size:18.6667px;-inkscape-font-specification:'sans-serif, Normal'"
id="tspan44008">50.8552</tspan><tspan id="tspan8323">50.8552</tspan><tspan
style="font-size:18.6667px;-inkscape-font-specification:'sans-serif, Normal'" style="font-size:18.6667px;-inkscape-font-specification:'sans-serif, Normal'"
id="tspan44010">,lon:4.3156, z:10)</tspan></tspan></text> id="tspan8325">,lon:4.3156, z:10)</tspan></tspan></text>
<rect <rect
style="fill:#cccccc;fill-opacity:1;stroke:#000000;stroke-width:0.0161075;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" style="fill:#cccccc;fill-opacity:1;stroke:#000000;stroke-width:0.0161075;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect11459" id="rect11459"
@ -515,34 +521,34 @@
style="font-style:normal;font-weight:normal;font-size:40px;line-height:0.25;font-family:sans-serif;white-space:pre;shape-inside:url(#rect21432);fill:#000000;fill-opacity:1;stroke:none"><tspan style="font-style:normal;font-weight:normal;font-size:40px;line-height:0.25;font-family:sans-serif;white-space:pre;shape-inside:url(#rect21432);fill:#000000;fill-opacity:1;stroke:none"><tspan
x="28.759766" x="28.759766"
y="677.7954" y="677.7954"
id="tspan44016"><tspan id="tspan8331"><tspan
style="font-size:13.3333px;-inkscape-font-specification:'sans-serif, Normal'" style="font-size:13.3333px;-inkscape-font-specification:'sans-serif, Normal'"
id="tspan44014">$map(theme:cyclofix,z:14,lat:51.05016,lon:</tspan></tspan><tspan id="tspan8329">$map(theme:cyclofix,z:14,lat:51.05016,lon:</tspan></tspan><tspan
x="28.759766" x="28.759766"
y="692.05876" y="692.05876"
id="tspan44020"><tspan id="tspan8335"><tspan
style="font-size:13.3333px;-inkscape-font-specification:'sans-serif, Normal'" style="font-size:13.3333px;-inkscape-font-specification:'sans-serif, Normal'"
id="tspan44018">3.717842,layers:none,layer-</tspan></tspan><tspan id="tspan8333">3.717842,layers:none,layer-</tspan></tspan><tspan
x="28.759766" x="28.759766"
y="706.32213" y="706.32213"
id="tspan44024"><tspan id="tspan8339"><tspan
style="font-size:13.3333px;-inkscape-font-specification:'sans-serif, Normal'" style="font-size:13.3333px;-inkscape-font-specification:'sans-serif, Normal'"
id="tspan44022">bike_repair_station:true,layer-</tspan></tspan><tspan id="tspan8337">bike_repair_station:true,layer-</tspan></tspan><tspan
x="28.759766" x="28.759766"
y="720.5855" y="720.5855"
id="tspan44028"><tspan id="tspan8343"><tspan
style="font-size:13.3333px;-inkscape-font-specification:'sans-serif, Normal'" style="font-size:13.3333px;-inkscape-font-specification:'sans-serif, Normal'"
id="tspan44026">drinking_water:true,layer-</tspan></tspan><tspan id="tspan8341">drinking_water:true,layer-</tspan></tspan><tspan
x="28.759766" x="28.759766"
y="734.84886" y="734.84886"
id="tspan44032"><tspan id="tspan8347"><tspan
style="font-size:13.3333px;-inkscape-font-specification:'sans-serif, Normal'" style="font-size:13.3333px;-inkscape-font-specification:'sans-serif, Normal'"
id="tspan44030">bike_cafe:true,layer-</tspan></tspan><tspan id="tspan8345">bike_cafe:true,layer-</tspan></tspan><tspan
x="28.759766" x="28.759766"
y="749.11223" y="749.11223"
id="tspan44036"><tspan id="tspan8351"><tspan
style="font-size:13.3333px;-inkscape-font-specification:'sans-serif, Normal'" style="font-size:13.3333px;-inkscape-font-specification:'sans-serif, Normal'"
id="tspan44034">bicycle_tube_vending_machine: true)</tspan></tspan></text> id="tspan8349">bicycle_tube_vending_machine: true)</tspan></tspan></text>
<rect <rect
style="fill:#733034;fill-opacity:1;stroke:#000000;stroke-width:0.0661458;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" style="fill:#733034;fill-opacity:1;stroke:#000000;stroke-width:0.0661458;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect11543" id="rect11543"
@ -564,14 +570,14 @@
style="font-style:normal;font-weight:normal;font-size:40px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;white-space:pre;shape-inside:url(#rect20457);display:inline;fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:0.264848;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"><tspan style="font-style:normal;font-weight:normal;font-size:40px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;white-space:pre;shape-inside:url(#rect20457);display:inline;fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:0.264848;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"><tspan
x="28.759766" x="28.759766"
y="697.7954" y="697.7954"
id="tspan44040"><tspan id="tspan8355"><tspan
style="font-size:18.6667px;-inkscape-font-specification:'sans-serif, Normal'" style="font-size:18.6667px;-inkscape-font-specification:'sans-serif, Normal'"
id="tspan44038">$map(theme:artwork,z:15,lat:51.2098,lon:</tspan></tspan><tspan id="tspan8353">$map(theme:artwork,z:15,lat:51.2098,lon:</tspan></tspan><tspan
x="28.759766" x="28.759766"
y="747.7954" y="747.7954"
id="tspan44044"><tspan id="tspan8359"><tspan
style="font-size:18.6667px;-inkscape-font-specification:'sans-serif, Normal'" style="font-size:18.6667px;-inkscape-font-specification:'sans-serif, Normal'"
id="tspan44042">3.2284,background:AGIV)</tspan></tspan></text> id="tspan8357">3.2284,background:AGIV)</tspan></tspan></text>
<rect <rect
style="fill:#cccccc;fill-opacity:1;stroke:#000000;stroke-width:0.0700743;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" style="fill:#cccccc;fill-opacity:1;stroke:#000000;stroke-width:0.0700743;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect11647" id="rect11647"
@ -583,25 +589,25 @@
xml:space="preserve" xml:space="preserve"
transform="matrix(0.26458333,0,0,0.26458333,210.02275,-141.45522)" transform="matrix(0.26458333,0,0,0.26458333,210.02275,-141.45522)"
id="text3237" id="text3237"
style="font-style:normal;font-weight:normal;font-size:40px;line-height:1.25;font-family:sans-serif;white-space:pre;display:inline;fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:0.264848;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;shape-inside:url(#rect3239)"><tspan style="font-style:normal;font-weight:normal;font-size:40px;line-height:1.25;font-family:sans-serif;white-space:pre;shape-inside:url(#rect3239);display:inline;fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:0.264848;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"><tspan
x="28.759766" x="28.759766"
y="697.7954" y="697.7954"
id="tspan44048"><tspan id="tspan8363"><tspan
style="font-size:18.6667px;-inkscape-font-specification:'sans-serif, Normal'" style="font-size:18.6667px;-inkscape-font-specification:'sans-serif, Normal'"
id="tspan44046">$map(theme:cyclestreets,</tspan></tspan><tspan id="tspan8361">$map(theme:cyclestreets,</tspan></tspan><tspan
x="28.759766" x="28.759766"
y="747.7954" y="747.7954"
id="tspan44052"><tspan id="tspan8367"><tspan
style="font-size:18.6667px;-inkscape-font-specification:'sans-serif, Normal'" style="font-size:18.6667px;-inkscape-font-specification:'sans-serif, Normal'"
id="tspan44050">z:15,lat:51.02802,lon:</tspan></tspan><tspan id="tspan8365">z:15,lat:51.02702,lon:</tspan></tspan><tspan
x="28.759766" x="28.759766"
y="797.7954" y="797.7954"
id="tspan44056"><tspan id="tspan8371"><tspan
style="font-size:18.6667px;-inkscape-font-specification:'sans-serif, Normal'" style="font-size:18.6667px;-inkscape-font-specification:'sans-serif, Normal'"
id="tspan44054">4.48029, scaling:3)</tspan></tspan></text> id="tspan8369">4.48029, scaling:3)</tspan></tspan></text>
<g <g
id="g1367" id="g1367"
transform="matrix(1,0,0.20502864,-1,-20.554711,213.09746)"> transform="matrix(-1,0,-0.20502864,-1,112.68819,218.91305)">
<path <path
style="color:#000000;fill:#000000;stroke-width:1.35478;-inkscape-stroke:none" style="color:#000000;fill:#000000;stroke-width:1.35478;-inkscape-stroke:none"
d="m 10.773987,88.413041 c -6.7214066,3.665424 -8.0818381,7.903356 -7.7053042,11.206038 0.3765338,3.302671 2.4528904,5.665201 2.4528904,5.665201 l 0.2698975,-0.2355 c 0,0 -2.0036724,-2.29509 -2.3655708,-5.469396 -0.2226277,-1.952726 0.1624065,-4.239546 2.0370665,-6.553174 1.1727415,-1.447349 2.9284401,-2.905188 5.4830146,-4.298289 z" d="m 10.773987,88.413041 c -6.7214066,3.665424 -8.0818381,7.903356 -7.7053042,11.206038 0.3765338,3.302671 2.4528904,5.665201 2.4528904,5.665201 l 0.2698975,-0.2355 c 0,0 -2.0036724,-2.29509 -2.3655708,-5.469396 -0.2226277,-1.952726 0.1624065,-4.239546 2.0370665,-6.553174 1.1727415,-1.447349 2.9284401,-2.905188 5.4830146,-4.298289 z"
@ -631,14 +637,14 @@
style="font-style:normal;font-weight:normal;font-size:40px;line-height:1.25;font-family:sans-serif;white-space:pre;shape-inside:url(#rect890);display:inline;fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:0.264848;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"><tspan style="font-style:normal;font-weight:normal;font-size:40px;line-height:1.25;font-family:sans-serif;white-space:pre;shape-inside:url(#rect890);display:inline;fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:0.264848;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"><tspan
x="28.759766" x="28.759766"
y="697.7954" y="697.7954"
id="tspan44060"><tspan id="tspan8375"><tspan
style="font-size:18.6667px;-inkscape-font-specification:'sans-serif, Normal'" style="font-size:18.6667px;-inkscape-font-specification:'sans-serif, Normal'"
id="tspan44058">$map(theme:benches,z:14,lat:51.2098,lon:</tspan></tspan><tspan id="tspan8373">$map(theme:benches,z:14,lat:51.2098,lon:</tspan></tspan><tspan
x="28.759766" x="28.759766"
y="747.7954" y="747.7954"
id="tspan44064"><tspan id="tspan8379"><tspan
style="font-size:18.6667px;-inkscape-font-specification:'sans-serif, Normal'" style="font-size:18.6667px;-inkscape-font-specification:'sans-serif, Normal'"
id="tspan44062">3.2284, layers:none, layer-bench:force)</tspan></tspan></text> id="tspan8377">3.2284, layers:none, layer-bench:force)</tspan></tspan></text>
<text <text
xml:space="preserve" xml:space="preserve"
transform="matrix(0.26458333,0,0,0.26458333,205.99418,0.58092297)" transform="matrix(0.26458333,0,0,0.26458333,205.99418,0.58092297)"
@ -646,9 +652,9 @@
style="font-style:normal;font-weight:normal;font-size:40px;line-height:1.25;font-family:sans-serif;white-space:pre;shape-inside:url(#rect6468);fill:#000000;fill-opacity:1;stroke:none"><tspan style="font-style:normal;font-weight:normal;font-size:40px;line-height:1.25;font-family:sans-serif;white-space:pre;shape-inside:url(#rect6468);fill:#000000;fill-opacity:1;stroke:none"><tspan
x="28.759766" x="28.759766"
y="697.7954" y="697.7954"
id="tspan44068"><tspan id="tspan8383"><tspan
style="font-size:16px;-inkscape-font-specification:'sans-serif, Normal'" style="font-size:16px;-inkscape-font-specification:'sans-serif, Normal'"
id="tspan44066">$flyer.aerial</tspan></tspan></text> id="tspan8381">$flyer.aerial</tspan></tspan></text>
<text <text
xml:space="preserve" xml:space="preserve"
transform="matrix(0.26458333,0,0,0.26458333,-1.7998979,-153.42245)" transform="matrix(0.26458333,0,0,0.26458333,-1.7998979,-153.42245)"
@ -656,9 +662,9 @@
style="font-style:normal;font-weight:normal;font-size:40px;line-height:1.25;font-family:sans-serif;white-space:pre;shape-inside:url(#rect3512);fill:#000000;fill-opacity:1;stroke:none"><tspan style="font-style:normal;font-weight:normal;font-size:40px;line-height:1.25;font-family:sans-serif;white-space:pre;shape-inside:url(#rect3512);fill:#000000;fill-opacity:1;stroke:none"><tspan
x="28.759766" x="28.759766"
y="697.7954" y="697.7954"
id="tspan44072"><tspan id="tspan8387"><tspan
style="font-size:18.6667px;-inkscape-font-specification:'sans-serif, Normal'" style="font-size:18.6667px;-inkscape-font-specification:'sans-serif, Normal'"
id="tspan44070">$flyer.examples</tspan></tspan></text> id="tspan8385">$flyer.examples</tspan></tspan></text>
<g <g
id="path15616" id="path15616"
transform="matrix(-1,0,0,1,497.66957,-0.86523396)"> transform="matrix(-1,0,0,1,497.66957,-0.86523396)">
@ -726,9 +732,9 @@
style="font-style:normal;font-weight:normal;font-size:40px;line-height:1.25;font-family:sans-serif;white-space:pre;shape-inside:url(#rect5917);fill:#000000;fill-opacity:1;stroke:none"><tspan style="font-style:normal;font-weight:normal;font-size:40px;line-height:1.25;font-family:sans-serif;white-space:pre;shape-inside:url(#rect5917);fill:#000000;fill-opacity:1;stroke:none"><tspan
x="28.759766" x="28.759766"
y="697.7954" y="697.7954"
id="tspan44076"><tspan id="tspan8391"><tspan
style="font-size:16px;-inkscape-font-specification:'sans-serif, Normal'" style="font-size:16px;-inkscape-font-specification:'sans-serif, Normal'"
id="tspan44074">$flyer.lines_too</tspan></tspan></text> id="tspan8389">$flyer.lines_too</tspan></tspan></text>
<rect <rect
style="fill:#cccccc;fill-opacity:1;stroke:#000000;stroke-width:0.0161075;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" style="fill:#cccccc;fill-opacity:1;stroke:#000000;stroke-width:0.0161075;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect5197" id="rect5197"
@ -740,29 +746,39 @@
xml:space="preserve" xml:space="preserve"
transform="matrix(0.26458333,0,0,0.26458333,102.47417,-27.370445)" transform="matrix(0.26458333,0,0,0.26458333,102.47417,-27.370445)"
id="text5201" id="text5201"
style="font-style:normal;font-weight:normal;font-size:40px;line-height:0.25;font-family:sans-serif;white-space:pre;fill:#000000;fill-opacity:1;stroke:none;shape-inside:url(#rect5203)"><tspan style="font-style:normal;font-weight:normal;font-size:40px;line-height:0.25;font-family:sans-serif;white-space:pre;shape-inside:url(#rect5203);fill:#000000;fill-opacity:1;stroke:none"><tspan
x="28.759766" x="28.759766"
y="677.7954" y="677.7954"
id="tspan44080"><tspan id="tspan8395"><tspan
style="font-size:13.3333px;-inkscape-font-specification:'sans-serif, Normal'" style="font-size:13.3333px;-inkscape-font-specification:'sans-serif, Normal'"
id="tspan44078">$map(theme:onwheels,z:18,lat:50.86622,lon:</tspan></tspan><tspan id="tspan8393">$map(theme:onwheels,z:19,lat:50.86622,lon:</tspan></tspan><tspan
x="28.759766" x="28.759766"
y="692.05876" y="692.05876"
id="tspan44086"><tspan id="tspan8401"><tspan
style="font-size:13.3333px;-inkscape-font-specification:'sans-serif, Normal'" style="font-size:13.3333px;-inkscape-font-specification:'sans-serif, Normal'"
id="tspan44082">4.35012</tspan><tspan id="tspan8397">4.35012</tspan><tspan
style="font-size:13.3333px;-inkscape-font-specification:'sans-serif, Normal'" style="font-size:13.3333px;-inkscape-font-specification:'sans-serif, Normal'"
id="tspan44084">,layer-governments:false)</tspan></tspan></text> id="tspan8399">,layer-governments:false,layer-</tspan></tspan><tspan
x="28.759766"
y="706.32213"
id="tspan8405"><tspan
style="font-size:13.3333px;-inkscape-font-specification:'sans-serif, Normal'"
id="tspan8403">parking:false,layer-toilet:false,layer-</tspan></tspan><tspan
x="28.759766"
y="720.5855"
id="tspan8409"><tspan
style="font-size:13.3333px;-inkscape-font-specification:'sans-serif, Normal'"
id="tspan8407">cafe_pub:false,layer-food:false,scaling:1.5)</tspan></tspan></text>
<text <text
xml:space="preserve" xml:space="preserve"
transform="matrix(0.26458333,0,0,0.26458333,99.365194,-43.160062)" transform="matrix(0.26458333,0,0,0.26458333,99.365194,-41.995408)"
id="text23036" id="text23036"
style="font-style:normal;font-weight:normal;font-size:40px;line-height:0.25;font-family:sans-serif;white-space:pre;shape-inside:url(#rect23050);fill:#000000;fill-opacity:1;stroke:none"><tspan style="font-style:normal;font-weight:normal;font-size:40px;line-height:0.25;font-family:sans-serif;white-space:pre;shape-inside:url(#rect23050);fill:#000000;fill-opacity:1;stroke:none"><tspan
x="28.759766" x="28.759766"
y="677.7954" y="677.7954"
id="tspan44090"><tspan id="tspan8413"><tspan
style="font-size:16px;-inkscape-font-specification:'sans-serif, Normal'" style="font-size:16px;-inkscape-font-specification:'sans-serif, Normal'"
id="tspan44088">$flyer.onwheels</tspan></tspan></text> id="tspan8411">$flyer.onwheels</tspan></tspan></text>
<g <g
id="g23048" id="g23048"
transform="matrix(0.99953426,0.03051675,0.2354499,-0.99327745,75.052107,241.32304)"> transform="matrix(0.99953426,0.03051675,0.2354499,-0.99327745,75.052107,241.32304)">
@ -790,35 +806,45 @@
</g> </g>
<text <text
xml:space="preserve" xml:space="preserve"
transform="matrix(0.26458333,0,0,0.26458333,99.091208,-57.205081)" transform="matrix(0.26458333,0,0,0.26458333,99.091208,-58.185055)"
id="text28358" id="text28358"
style="font-style:normal;font-weight:normal;font-size:40px;line-height:0.25;font-family:sans-serif;white-space:pre;shape-inside:url(#rect28360);fill:#000000;fill-opacity:1;stroke:none"><tspan style="font-style:normal;font-weight:normal;font-size:40px;line-height:0.25;font-family:sans-serif;white-space:pre;shape-inside:url(#rect28360);fill:#000000;fill-opacity:1;stroke:none"><tspan
x="28.759766" x="28.759766"
y="677.7954" y="677.7954"
id="tspan44094"><tspan id="tspan8417"><tspan
style="font-size:16px;-inkscape-font-specification:'sans-serif, Normal'" style="font-size:16px;-inkscape-font-specification:'sans-serif, Normal'"
id="tspan44092">$flyer.cyclofix</tspan></tspan></text> id="tspan8415">$flyer.cyclofix</tspan></tspan></text>
<text
xml:space="preserve"
transform="matrix(0,-0.26458333,0.26458333,0,165.86686,413.77896)"
id="text4212"
style="font-style:normal;font-weight:normal;font-size:40px;line-height:0;font-family:sans-serif;white-space:pre;shape-inside:url(#rect4214);fill:#000000;fill-opacity:1;stroke:none"><tspan
x="1082.1387"
y="452.37548"
id="tspan8421"><tspan
style="font-size:8px;-inkscape-font-specification:'sans-serif, Normal'"
id="tspan8419">$version</tspan></tspan></text>
<g <g
id="g29134" id="g7940"
transform="matrix(-1,0,-0.20502864,1,211.57633,16.855536)"> transform="matrix(0.97797993,0.20869898,-0.00818509,1.0207692,100.41144,13.334379)">
<path <path
style="color:#000000;fill:#000000;stroke-width:1.35478;-inkscape-stroke:none" style="color:#000000;fill:#000000;stroke-width:1.35478;-inkscape-stroke:none"
d="m 10.773987,88.413041 c -6.7214066,3.665424 -8.0818381,7.903356 -7.7053042,11.206038 0.3765338,3.302671 2.4528904,5.665201 2.4528904,5.665201 l 0.2698975,-0.2355 c 0,0 -2.0036724,-2.29509 -2.3655708,-5.469396 -0.2226277,-1.952726 0.1624065,-4.239546 2.0370665,-6.553174 1.1727415,-1.447349 2.9284401,-2.905188 5.4830146,-4.298289 z" d="m 10.773987,88.413041 c -6.7214066,3.665424 -8.0818381,7.903356 -7.7053042,11.206038 0.3765338,3.302671 2.4528904,5.665201 2.4528904,5.665201 l 0.2698975,-0.2355 c 0,0 -2.0036724,-2.29509 -2.3655708,-5.469396 -0.2226277,-1.952726 0.1624065,-4.239546 2.0370665,-6.553174 1.1727415,-1.447349 2.9284401,-2.905188 5.4830146,-4.298289 z"
id="path29124" id="path7930"
sodipodi:nodetypes="csccsscc" /> sodipodi:nodetypes="csccsscc" />
<g <g
id="g29132" id="g7938"
transform="matrix(1.3547788,0,0,1.3547788,-1.268197,-38.166165)"> transform="matrix(1.3547788,0,0,1.3547788,-1.268197,-38.166165)">
<g <g
id="g29130"> id="g7936">
<path <path
style="color:#000000;fill:#000000;fill-rule:evenodd;stroke-width:0.181901;stroke-linejoin:round;-inkscape-stroke:none" style="color:#000000;fill:#000000;fill-rule:evenodd;stroke-width:0.181901;stroke-linejoin:round;-inkscape-stroke:none"
d="m 5.9062068,93.870487 3.351582,-0.495843 -2.2319045,2.549032 C 7.1413596,95.074353 6.6865692,94.246503 5.9062068,93.870487 Z" d="m 5.9062068,93.870487 3.351582,-0.495843 -2.2319045,2.549032 C 7.1413596,95.074353 6.6865692,94.246503 5.9062068,93.870487 Z"
id="path29126" /> id="path7932" />
<path <path
style="color:#000000;fill:#000000;fill-rule:evenodd;stroke-linejoin:round;-inkscape-stroke:none" style="color:#000000;fill:#000000;fill-rule:evenodd;stroke-linejoin:round;-inkscape-stroke:none"
d="M 9.2441406,93.285156 5.8925781,93.78125 c -0.088278,0.01373 -0.1059275,0.133203 -0.025391,0.171875 0.7457822,0.359354 1.1784769,1.149068 1.0683594,1.958984 -0.011715,0.0889 0.098674,0.139328 0.1582031,0.07227 l 2.2324219,-2.550781 c 0.053217,-0.06373 2.437e-4,-0.159586 -0.082031,-0.148438 z" d="M 9.2441406,93.285156 5.8925781,93.78125 c -0.088278,0.01373 -0.1059275,0.133203 -0.025391,0.171875 0.7457822,0.359354 1.1784769,1.149068 1.0683594,1.958984 -0.011715,0.0889 0.098674,0.139328 0.1582031,0.07227 l 2.2324219,-2.550781 c 0.053217,-0.06373 2.437e-4,-0.159586 -0.082031,-0.148438 z"
id="path29128" id="path7934"
sodipodi:nodetypes="ccccccsc" /> sodipodi:nodetypes="ccccccsc" />
</g> </g>
</g> </g>
@ -857,9 +883,9 @@
style="font-style:normal;font-weight:normal;font-size:40px;line-height:1.25;font-family:sans-serif;white-space:pre;shape-inside:url(#rect135032);fill:#000000;fill-opacity:1;stroke:none"><tspan style="font-style:normal;font-weight:normal;font-size:40px;line-height:1.25;font-family:sans-serif;white-space:pre;shape-inside:url(#rect135032);fill:#000000;fill-opacity:1;stroke:none"><tspan
x="8.7285156" x="8.7285156"
y="42.098132" y="42.098132"
id="tspan44098"><tspan id="tspan8425"><tspan
style="font-weight:bold;font-size:34.6667px;-inkscape-font-specification:'sans-serif, Bold'" style="font-weight:bold;font-size:34.6667px;-inkscape-font-specification:'sans-serif, Bold'"
id="tspan44096">$flyer.title</tspan></tspan></text> id="tspan8423">$flyer.title</tspan></tspan></text>
<text <text
xml:space="preserve" xml:space="preserve"
style="font-style:normal;font-weight:normal;font-size:10.5833px;line-height:1.25;font-family:sans-serif;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.264583" style="font-style:normal;font-weight:normal;font-size:10.5833px;line-height:1.25;font-family:sans-serif;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.264583"

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 54 KiB

After

Width:  |  Height:  |  Size: 56 KiB

272
assets/templates/MapComplete-flyer.svg
View file

File diff suppressed because one or more lines are too long
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.6 MiB

After

Width:  |  Height:  |  Size: 1.6 MiB

2
langs/en.json
View file

@ -48,7 +48,7 @@
"intro": "The user is greeted by a map with feature. Upon selecting one, the information about that feature is shown. A simplified example of what this looks like for a nature reserve is shown below.", "intro": "The user is greeted by a map with feature. Upon selecting one, the information about that feature is shown. A simplified example of what this looks like for a nature reserve is shown below.",
"title": "What does the interface look like?" "title": "What does the interface look like?"
}, },
"examples": "There are many thematic maps available of which a few are printed here, namely the maps with AED's, artwork, cyclestreets, benches and cyclepumps.\n\nThere are many more thematic maps online: about healthcare, indoor navigation, wheelchair accessibility, waste facilities, public bookcases, pedestrian crossings with a rainbow-painting,... Discover them all on mapcomplete.osm.be ", "examples": "There are many thematic maps available of which a few are printed here.\n\nThere are many more thematic maps online: about healthcare, indoor navigation, wheelchair accessibility, waste facilities, public bookcases, pedestrian crossings with a rainbow-painting,... Discover them all on mapcomplete.osm.be ",
"fakeui": { "fakeui": {
"add_images": "Add images with a few clicks", "add_images": "Add images with a few clicks",
"attributes": "Shows attributes in a friendly way", "attributes": "Shows attributes in a friendly way",

12
langs/nl.json
View file

@ -42,24 +42,24 @@
"flyer": { "flyer": {
"aerial": "Deze kaart gebruikt luchtfoto's van het Agentschap Informatie Vlaanderen als achtergrond.\nOok het GRB is beschikbaar als achtergrondlaag.", "aerial": "Deze kaart gebruikt luchtfoto's van het Agentschap Informatie Vlaanderen als achtergrond.\nOok het GRB is beschikbaar als achtergrondlaag.",
"callToAction": "Probeer het uit op mapcomplete.osm.be", "callToAction": "Probeer het uit op mapcomplete.osm.be",
"cyclofix": "Fietspompen, drinkwaterkraantjes, bandenautomaten en fietswinkels vind je op Cyclofix", "cyclofix": "Fietspompen, -winkels, -bandenautomaten en drinkwaterkraantjes vind je op Cyclofix",
"editing": { "editing": {
"intro": "De gebruiker krijgt eerst een kaart met interesspunten te zien. Wanneer er op een punt geklikt wordt, wordt een interface met informatie geopend. Een (vereenvoudigd) voorbeeld voor een natuurgebied wordt hieronder getoond:", "intro": "De gebruiker krijgt eerst een kaart met interesspunten te zien. Klik je op een punt, dan wordt de interface met informatie geopend.\nEen (vereenvoudigd) voorbeeld voor een natuurgebied wordt hieronder getoond:",
"title": "Hoe ziet de interface eruit?" "title": "Hoe ziet de interface eruit?"
}, },
"examples": "Er zijn veel thematische kaarten beschikbaar, enkele voorbeelden zijn hier geprint.\n\nOnline zijn er nog kaarten met diverse thema's, zoals gezondheidszorg, binnenruimtes, rolstoeltoegankelijkheid, afvalcontainers, boekenruilkasten, regenboog-zebrapaden,... Ontdek ze allemaal op mapcomplete.osm.be ", "examples": "Online zijn verschillende kaarten met diverse thema's beschikbaar, zoals gezondheidszorg, binnenruimtes, rolstoeltoegankelijkheid, afvalcontainers, boekenruilkasten, regenboog-zebrapaden,...\nEnkele zijn hier afgeprint.\n\nOntdek ze allemaal op mapcomplete.osm.be",
"fakeui": { "fakeui": {
"add_images": "Voeg foto's toe met een paar klikken", "add_images": "Voeg foto's toe met een paar klikken",
"attributes": "Attributen worden getoond op begrijpbare wijze", "attributes": "Attributen worden getoond op begrijpbare wijze",
"edit": "Foute of verouderde gegevens? Aanpassen kan hier", "edit": "Foute of verouderde gegevens? Aanpassen kan hier",
"question": "Is een attribuut nog niet gekend? MapComplete toont een vraag", "question": "Is een attribuut nog niet gekend? MapComplete toont een vraag",
"see_images": "Toont afbeeldingen van eerdere bijdragers, Wikipedia, Mapillary, ...", "see_images": "Toont afbeeldingen van eerdere bijdragers, Wikipedia, Mapillary, ...",
"wikipedia": "Gelinkte Wikipedia-artikels worden getoond" "wikipedia": "Gelinkte Wikipedia-artikelen worden getoond"
}, },
"frontParagraph": "MapComplete is een web-applicatie om OpenStreetMap-data te tonen en aan te passen op basis van thematische kaarten. Het maakt het mogelijk om open geodata te crowdsourcen en te managen op een makkelijke manier.\n\nNieuwe categorieën en attributen kunnen op vraag worden toegevoegd.", "frontParagraph": "MapComplete is een web-applicatie om OpenStreetMap-data te tonen en aan te passen op basis van thematische kaarten. Het maakt het mogelijk om open geodata te crowdsourcen en te managen op een makkelijke manier.\n\nNieuwe categorieën en attributen kunnen op vraag worden toegevoegd.",
"lines_too": "Lijnobjecten en polygonen worden ook getoond, waarvan afbeeldingen en attributen toegevoegd en aangepast kunnen worden.", "lines_too": "Lijnobjecten en polygonen worden ook getoond. Afbeeldingen en attributen daarvan kunnen toegevoegd en aangepast worden.",
"mapcomplete": { "mapcomplete": {
"customize": "Wil je een versie op maat? Wil je een versie in jullie huisstijl?\nWil je een nieuwe kaartlaag of functionaliteit? Wil je een crowdsourcing-campagne opzetten?\nNeem contact op met pietervdvn@posteo.net voor meer info.", "customize": "Wil je een versie op maat?\nWil je een versie in jullie huisstijl?\nWil je een nieuwe kaartlaag of functionaliteit?\nWil je een crowdsourcing-campagne opzetten?\nNeem contact op met pietervdvn@posteo.net voor meer info.",
"intro": "MapComplete is een website met {mapCount} interactieve kaarten - er komen regelmatig kaarten bij. Iedere kaart toont items binnen een interessegebied waar gebruikers data zien en updaten.", "intro": "MapComplete is een website met {mapCount} interactieve kaarten - er komen regelmatig kaarten bij. Iedere kaart toont items binnen een interessegebied waar gebruikers data zien en updaten.",
"li0": "Toon waar interessepunten zijn", "li0": "Toon waar interessepunten zijn",
"li1": "Voeg nieuwe punten toe en update informatie van reeds bestaande punten", "li1": "Voeg nieuwe punten toe en update informatie van reeds bestaande punten",

75
test.ts
View file

@ -1,10 +1,5 @@
import MinimapImplementation from "./UI/Base/MinimapImplementation"; import MinimapImplementation from "./UI/Base/MinimapImplementation";
import {Utils} from "./Utils"; import {Utils} from "./Utils";
import {AllKnownLayouts} from "./Customizations/AllKnownLayouts";
import LayerConfig from "./Models/ThemeConfig/LayerConfig";
import Constants from "./Models/Constants";
import {And} from "./Logic/Tags/And";
import {Tag} from "./Logic/Tags/Tag";
import {FlowPanelFactory, FlowStep} from "./UI/ImportFlow/FlowStep"; import {FlowPanelFactory, FlowStep} from "./UI/ImportFlow/FlowStep";
import Title from "./UI/Base/Title"; import Title from "./UI/Base/Title";
import Combine from "./UI/Base/Combine"; import Combine from "./UI/Base/Combine";
@ -24,6 +19,7 @@ import Loading from "./UI/Base/Loading";
import Minimap from "./UI/Base/Minimap"; import Minimap from "./UI/Base/Minimap";
import {FixedUiElement} from "./UI/Base/FixedUiElement"; import {FixedUiElement} from "./UI/Base/FixedUiElement";
import SearchAndGo from "./UI/BigComponents/SearchAndGo"; import SearchAndGo from "./UI/BigComponents/SearchAndGo";
import {SubtleButton} from "./UI/Base/SubtleButton";
MinimapImplementation.initialize() MinimapImplementation.initialize()
@ -36,47 +32,31 @@ function createElement(): string {
return div.id return div.id
} }
async function main() { class SelectTemplate extends Combine implements FlowStep<{ title: string, pages: string[] }> {
{
// Dirty hack!
// Make the charging-station layer simpler to allow querying it by overpass
const bikechargingStationLayer: LayerConfig = AllKnownLayouts.allKnownLayouts.get("toerisme_vlaanderen").layers.find(l => l.id === "charging_station_ebikes")
bikechargingStationLayer.source.osmTags = new And([new Tag("amenity", "charging_station"), new Tag("bicycle", "yes")])
Constants.defaultOverpassUrls.splice(0, 1) // remove overpass-api.de for this run
}
const svg = await Utils.download(window.location.protocol + "//" + window.location.host + "/assets/templates/MapComplete-flyer.svg")
const svgBack = await Utils.download(window.location.protocol + "//" + window.location.host + "/assets/templates/MapComplete-flyer.back.svg")
const options = <SvgToPdfOptions>{
getFreeDiv: createElement,
disableMaps: false
}
const front = await new SvgToPdf([svg, svgBack], options)
await front.ConvertSvg("Flyer-nl.pdf", "nl")
await front.ConvertSvg("Flyer-en.pdf", "en")
}
class SelectTemplate extends Combine implements FlowStep<string[]> {
readonly IsValid: Store<boolean>; readonly IsValid: Store<boolean>;
readonly Value: Store<string[]>; readonly Value: Store<{ title: string, pages: string[] }>;
constructor() { constructor() {
const elements: InputElement<{ pages: string[] }>[] = [] const elements: InputElement<{ templateName: string, pages: string[] }>[] = []
for (const templateName in SvgToPdf.templates) { for (const templateName in SvgToPdf.templates) {
const template = SvgToPdf.templates[templateName] const template = SvgToPdf.templates[templateName]
elements.push(new FixedInputElement(template.description, new UIEventSource(template))) elements.push(new FixedInputElement(
new Combine([new FixedUiElement(templateName).SetClass("font-bold pr-2"),
template.description
])
, new UIEventSource({templateName, pages: template.pages})))
} }
const radio = new RadioButton(elements, {selectFirstAsDefault: true}) const radio = new RadioButton(elements, {selectFirstAsDefault: true})
const loaded: Store<{ success: string[] } | { error: any }> = radio.GetValue().bind(template => { const loaded: Store<{ success: { title: string, pages: string[] } } | { error: any }> = radio.GetValue().bind(template => {
if (template === undefined) { if (template === undefined) {
return undefined return undefined
} }
const urls = template.pages.map(p => SelectTemplate.ToUrl(p)) const urls = template.pages.map(p => SelectTemplate.ToUrl(p))
const dloadAll: Promise<string[]> = Promise.all(urls.map(url => Utils.download(url))) const dloadAll: Promise<{ title: string, pages: string[] }> = Promise.all(urls.map(url => Utils.download(url))).then(pages => ({
pages,
title: template.templateName
}))
return UIEventSource.FromPromiseWithErr(dloadAll) return UIEventSource.FromPromiseWithErr(dloadAll)
}) })
@ -89,7 +69,7 @@ class SelectTemplate extends Combine implements FlowStep<string[]> {
return new FixedUiElement("Loading preview failed: " + pages["err"]).SetClass("alert") return new FixedUiElement("Loading preview failed: " + pages["err"]).SetClass("alert")
} }
const els: BaseUIElement[] = [] const els: BaseUIElement[] = []
for (const pageSrc of pages["success"]) { for (const pageSrc of pages["success"].pages) {
const el = new Img(pageSrc, true) const el = new Img(pageSrc, true)
.SetClass("w-96 m-2 border-black border-2") .SetClass("w-96 m-2 border-black border-2")
els.push(el) els.push(el)
@ -117,15 +97,15 @@ class SelectTemplate extends Combine implements FlowStep<string[]> {
} }
class SelectPdfOptions extends Combine implements FlowStep<{ pages: string[], options: SvgToPdfOptions }> { class SelectPdfOptions extends Combine implements FlowStep<{ title: string, pages: string[], options: SvgToPdfOptions }> {
readonly IsValid: Store<boolean>; readonly IsValid: Store<boolean>;
readonly Value: Store<{ pages: string[], options: SvgToPdfOptions }>; readonly Value: Store<{ title: string, pages: string[], options: SvgToPdfOptions }>;
constructor(pages: string[], getFreeDiv: () => string) { constructor(title: string, pages: string[], getFreeDiv: () => string) {
const dummy = new CheckBox("Don't add data to the map (to quickly preview the PDF)", false) const dummy = new CheckBox("Don't add data to the map (to quickly preview the PDF)", false)
const overrideMapLocation = new CheckBox("Override map location: use a selected location instead of the location set in the template", false) const overrideMapLocation = new CheckBox("Override map location: use a selected location instead of the location set in the template", false)
const locationInput = Minimap.createMiniMap().SetClass("block w-full") const locationInput = Minimap.createMiniMap().SetClass("block w-full")
const searchField = new SearchAndGo( {leafletMap: locationInput.leafletMap}) const searchField = new SearchAndGo({leafletMap: locationInput.leafletMap})
const selectLocation = const selectLocation =
new Combine([ new Combine([
new Toggle(new Combine([new Title("Select override location"), searchField]).SetClass("flex"), undefined, overrideMapLocation.GetValue()), new Toggle(new Combine([new Title("Select override location"), searchField]).SetClass("flex"), undefined, overrideMapLocation.GetValue()),
@ -139,6 +119,7 @@ class SelectPdfOptions extends Combine implements FlowStep<{ pages: string[], op
this.Value = dummy.GetValue().map((disableMaps) => { this.Value = dummy.GetValue().map((disableMaps) => {
return { return {
pages, pages,
title,
options: <SvgToPdfOptions>{ options: <SvgToPdfOptions>{
disableMaps, disableMaps,
getFreeDiv, getFreeDiv,
@ -155,8 +136,8 @@ class PreparePdf extends Combine implements FlowStep<{ svgToPdf: SvgToPdf, langu
readonly IsValid: Store<boolean>; readonly IsValid: Store<boolean>;
readonly Value: Store<{ svgToPdf: SvgToPdf, languages: string[] }>; readonly Value: Store<{ svgToPdf: SvgToPdf, languages: string[] }>;
constructor(pages: string[], options: SvgToPdfOptions) { constructor(title: string, pages: string[], options: SvgToPdfOptions) {
const svgToPdf = new SvgToPdf(pages, options) const svgToPdf = new SvgToPdf(title, pages, options)
const languageOptions = [ const languageOptions = [
new FixedInputElement("Nederlands", "nl"), new FixedInputElement("Nederlands", "nl"),
new FixedInputElement("English", "en") new FixedInputElement("English", "en")
@ -181,10 +162,13 @@ class PreparePdf extends Combine implements FlowStep<{ svgToPdf: SvgToPdf, langu
if (isPrepped["success"] !== undefined) { if (isPrepped["success"] !== undefined) {
const svgToPdf = isPrepped["success"] const svgToPdf = isPrepped["success"]
const langs = languages.GetValue().data.map(i => languageOptions[i].GetValue().data) const langs = languages.GetValue().data.map(i => languageOptions[i].GetValue().data)
if (langs.length === 0) {
return undefined
}
return {svgToPdf, languages: langs} return {svgToPdf, languages: langs}
} }
return undefined; return undefined;
}, [languages.GetValue()]) }, [languages.GetValue()])
this.IsValid = this.Value.map(v => v !== undefined) this.IsValid = this.Value.map(v => v !== undefined)
} }
@ -200,7 +184,7 @@ class SavePdf extends Combine {
new List(languages.map(lng => new Toggle( new List(languages.map(lng => new Toggle(
lng + " is done!", lng + " is done!",
new Loading("Creating pdf for " + lng), new Loading("Creating pdf for " + lng),
UIEventSource.FromPromiseWithErr(svgToPdf.ConvertSvg("Template" + "_" + lng + ".pdf", lng).then(() => true)) UIEventSource.FromPromiseWithErr(svgToPdf.ConvertSvg(lng).then(() => true))
.map(x => x !== undefined && x["success"] === true) .map(x => x !== undefined && x["success"] === true)
))) )))
]); ]);
@ -209,10 +193,11 @@ class SavePdf extends Combine {
const {flow, furthestStep, titles} = FlowPanelFactory.start( const {flow, furthestStep, titles} = FlowPanelFactory.start(
new Title("Select template"), new SelectTemplate() new Title("Select template"), new SelectTemplate()
).then(new Title("Select options"), (pages) => new SelectPdfOptions(pages, createElement)) ).then(new Title("Select options"), ({title, pages}) => new SelectPdfOptions(title, pages, createElement))
.then("Generate maps...", ({pages, options}) => new PreparePdf(pages, options)) .then("Generate maps...", ({title, pages, options}) => new PreparePdf(title, pages, options))
.finish("Generating...", ({svgToPdf, languages}) => new SavePdf(svgToPdf, languages)) .finish("Generating...", ({svgToPdf, languages}) => new SavePdf(svgToPdf, languages))
const toc = new List( const toc = new List(
titles.map( titles.map(
(title, i) => (title, i) =>