ilja_space/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:
Pieter Vander Vennet 2022-09-17 21:35:56 +02:00
parent 6e1431d520
commit 1f87728782
6 changed files with 291 additions and 273 deletions
Download patch file Download diff file Expand all files Collapse all files

75
test.ts
View file

@ -1,10 +1,5 @@
import MinimapImplementation from "./UI/Base/MinimapImplementation";
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 Title from "./UI/Base/Title";
import Combine from "./UI/Base/Combine";
@ -24,6 +19,7 @@ import Loading from "./UI/Base/Loading";
import Minimap from "./UI/Base/Minimap";
import {FixedUiElement} from "./UI/Base/FixedUiElement";
import SearchAndGo from "./UI/BigComponents/SearchAndGo";
import {SubtleButton} from "./UI/Base/SubtleButton";
MinimapImplementation.initialize()
@ -36,47 +32,31 @@ function createElement(): string {
return div.id
}
async function main() {
{
// 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[]> {
class SelectTemplate extends Combine implements FlowStep<{ title: string, pages: string[] }> {
readonly IsValid: Store<boolean>;
readonly Value: Store<string[]>;
readonly Value: Store<{ title: string, pages: string[] }>;
constructor() {
const elements: InputElement<{ pages: string[] }>[] = []
const elements: InputElement<{ templateName: string, pages: string[] }>[] = []
for (const templateName in SvgToPdf.templates) {
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 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) {
return undefined
}
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)
})
@ -89,7 +69,7 @@ class SelectTemplate extends Combine implements FlowStep<string[]> {
return new FixedUiElement("Loading preview failed: " + pages["err"]).SetClass("alert")
}
const els: BaseUIElement[] = []
for (const pageSrc of pages["success"]) {
for (const pageSrc of pages["success"].pages) {
const el = new Img(pageSrc, true)
.SetClass("w-96 m-2 border-black border-2")
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 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 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 searchField = new SearchAndGo( {leafletMap: locationInput.leafletMap})
const searchField = new SearchAndGo({leafletMap: locationInput.leafletMap})
const selectLocation =
new Combine([
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) => {
return {
pages,
title,
options: <SvgToPdfOptions>{
disableMaps,
getFreeDiv,
@ -155,8 +136,8 @@ class PreparePdf extends Combine implements FlowStep<{ svgToPdf: SvgToPdf, langu
readonly IsValid: Store<boolean>;
readonly Value: Store<{ svgToPdf: SvgToPdf, languages: string[] }>;
constructor(pages: string[], options: SvgToPdfOptions) {
const svgToPdf = new SvgToPdf(pages, options)
constructor(title: string, pages: string[], options: SvgToPdfOptions) {
const svgToPdf = new SvgToPdf(title, pages, options)
const languageOptions = [
new FixedInputElement("Nederlands", "nl"),
new FixedInputElement("English", "en")
@ -181,10 +162,13 @@ class PreparePdf extends Combine implements FlowStep<{ svgToPdf: SvgToPdf, langu
if (isPrepped["success"] !== undefined) {
const svgToPdf = isPrepped["success"]
const langs = languages.GetValue().data.map(i => languageOptions[i].GetValue().data)
if (langs.length === 0) {
return undefined
}
return {svgToPdf, languages: langs}
}
return undefined;
}, [languages.GetValue()])
}, [languages.GetValue()])
this.IsValid = this.Value.map(v => v !== undefined)
}
@ -200,7 +184,7 @@ class SavePdf extends Combine {
new List(languages.map(lng => new Toggle(
lng + " is done!",
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)
)))
]);
@ -209,10 +193,11 @@ class SavePdf extends Combine {
const {flow, furthestStep, titles} = FlowPanelFactory.start(
new Title("Select template"), new SelectTemplate()
).then(new Title("Select options"), (pages) => new SelectPdfOptions(pages, createElement))
.then("Generate maps...", ({pages, options}) => new PreparePdf(pages, options))
).then(new Title("Select options"), ({title, pages}) => new SelectPdfOptions(title, pages, createElement))
.then("Generate maps...", ({title, pages, options}) => new PreparePdf(title, pages, options))
.finish("Generating...", ({svgToPdf, languages}) => new SavePdf(svgToPdf, languages))
const toc = new List(
titles.map(
(title, i) =>