From e074d9c3e970da673aa566a5288d787f8cee7a36 Mon Sep 17 00:00:00 2001 From: Pieter Vander Vennet Date: Thu, 30 Jul 2020 09:59:30 +0200 Subject: [PATCH] Small tweaks and more layouts --- Customizations/AllKnownLayouts.ts | 21 ++-- Customizations/LayerDefinition.ts | 8 +- Customizations/Layers/Artwork.ts | 130 ++++++++++++------------ Customizations/Layers/ClimbingTree.ts | 43 ++++++++ Customizations/Layout.ts | 4 +- Customizations/Layouts/Artworks.ts | 17 ++++ Customizations/Layouts/ClimbingTrees.ts | 21 ++++ Customizations/Layouts/Statues.ts | 27 ----- Customizations/Questions/Website.ts | 2 +- Customizations/TagRendering.ts | 4 +- Logic/FilteredLayer.ts | 7 +- Logic/Osm/Notes.ts | 9 -- UI/CenterMessageBox.ts | 2 +- UI/FeatureInfoBox.ts | 8 +- UI/ImageUploadFlow.ts | 2 +- UI/i18n/Translations.ts | 49 +++++++++ index.css | 13 ++- index.ts | 2 +- 18 files changed, 235 insertions(+), 134 deletions(-) create mode 100644 Customizations/Layers/ClimbingTree.ts create mode 100644 Customizations/Layouts/Artworks.ts create mode 100644 Customizations/Layouts/ClimbingTrees.ts delete mode 100644 Customizations/Layouts/Statues.ts delete mode 100644 Logic/Osm/Notes.ts diff --git a/Customizations/AllKnownLayouts.ts b/Customizations/AllKnownLayouts.ts index 249e884..f502730 100644 --- a/Customizations/AllKnownLayouts.ts +++ b/Customizations/AllKnownLayouts.ts @@ -1,18 +1,15 @@ -import { Groen } from "./Layouts/Groen"; -import { Toilets } from "./Layouts/Toilets"; -import { GRB } from "./Layouts/GRB"; -import { Statues } from "./Layouts/Statues"; -import { Bookcases } from "./Layouts/Bookcases"; +import {Groen} from "./Layouts/Groen"; +import {GRB} from "./Layouts/GRB"; +import {Artworks} from "./Layouts/Artworks"; +import {Bookcases} from "./Layouts/Bookcases"; import Cyclofix from "./Layouts/Cyclofix"; -import { WalkByBrussels } from "./Layouts/WalkByBrussels"; -import { All } from "./Layouts/All"; -import { Layout } from "./Layout"; +import {WalkByBrussels} from "./Layouts/WalkByBrussels"; +import {All} from "./Layouts/All"; +import {Layout} from "./Layout"; import {MetaMap} from "./Layouts/MetaMap"; -import {Widths} from "./Layers/Widths"; import {StreetWidth} from "./Layouts/StreetWidth"; -import {NatureReserves} from "./Layers/NatureReserves"; import {Natuurpunt} from "./Layouts/Natuurpunt"; -import Translations from "../UI/i18n/Translations"; +import {ClimbingTrees} from "./Layouts/ClimbingTrees"; export class AllKnownLayouts { public static allSets = AllKnownLayouts.AllLayouts(); @@ -27,6 +24,8 @@ export class AllKnownLayouts { new MetaMap(), new StreetWidth(), new Natuurpunt(), + new ClimbingTrees(), + new Artworks() /*new Toilets(), new Statues(), */ diff --git a/Customizations/LayerDefinition.ts b/Customizations/LayerDefinition.ts index abfdaa2..1431c1a 100644 --- a/Customizations/LayerDefinition.ts +++ b/Customizations/LayerDefinition.ts @@ -1,11 +1,5 @@ import {Tag, TagsFilter} from "../Logic/TagsFilter"; import {UIElement} from "../UI/UIElement"; -import {Basemap} from "../Logic/Basemap"; -import {ElementStorage} from "../Logic/ElementStorage"; -import {UIEventSource} from "../UI/UIEventSource"; -import {FilteredLayer} from "../Logic/FilteredLayer"; -import {Changes} from "../Logic/Changes"; -import {UserDetails} from "../Logic/OsmConnection"; import {TagRenderingOptions} from "./TagRendering"; import {TagDependantUIElementConstructor} from "./UIElementConstructor"; @@ -61,7 +55,7 @@ export class LayerDefinition { /** * This UIElement is rendered as title element in the popup */ - title: TagRenderingOptions; + title: TagRenderingOptions | UIElement | string; /** * These are the questions/shown attributes in the popup */ diff --git a/Customizations/Layers/Artwork.ts b/Customizations/Layers/Artwork.ts index eb65dc5..3535201 100644 --- a/Customizations/Layers/Artwork.ts +++ b/Customizations/Layers/Artwork.ts @@ -1,86 +1,88 @@ import {LayerDefinition} from "../LayerDefinition"; -import {QuestionDefinition} from "../../Logic/Question"; import {Tag} from "../../Logic/TagsFilter"; import L from "leaflet"; +import {ImageCarouselWithUploadConstructor} from "../../UI/Image/ImageCarouselWithUpload"; +import Translations from "../../UI/i18n/Translations"; +import {TagRenderingOptions} from "../TagRendering"; +import Website from "../Questions/Website"; +import FixedText from "../Questions/FixedText"; export class Artwork extends LayerDefinition { constructor() { super(); - this.name = "artwork"; - this.newElementTags = [new Tag("tourism", "artwork")]; - this.icon = "./assets/statue.svg"; - this.overpassFilter = new Tag("tourism", "artwork"); - this.minzoom = 13; - this.questions = [ - QuestionDefinition.radioAndTextQuestion("What kind of artwork is this?", 10, "artwork_type", - [ - {text: "A statue", value: "statue"}, - {text: "A bust (thus a statue, but only of the head and shoulders)", value: "bust"}, - {text: "A sculpture", value: "sculpture"}, - {text: "A mural painting", value: "mural"}, - {text: "A painting", value: "painting"}, - {text: "A graffiti", value: "graffiti"}, - {text: "A relief", value: "relief"}, - {text: "An installation", value: "installation"}]), - QuestionDefinition.textQuestion("Whom or what is depicted in this statue?", "subject", 20).addUnrequiredTag("subject:wikidata","*"), - QuestionDefinition.textQuestion("Is there an inscription on this artwork?", "inscription", 16), - QuestionDefinition.textQuestion("What is the name of this artwork? If there is no explicit name, skip the question", "name", 15), - - + const t = Translations.t.artwork; + this.title = t.title; + const tag = new Tag("tourism", "artwork"); + this.presets = [ + { + title: this.title, + tags: [tag] + } ]; + this.icon = "./assets/statue.svg"; + this.overpassFilter = tag; + this.minzoom = 13; + + + const to = Translations.t.artwork.type; + const artworkType = new TagRenderingOptions({ + priority: 5, + question: to.question, + freeform: { + key: "artwork_type", + extraTags: new Tag("fixme", "Freeform artwork_type= tag used: possibly a wrong value"), + template: to.template.txt, + renderTemplate: to.render.txt, + placeholder: Translations.t.cyclofix.freeFormPlaceholder, + }, + mappings: [ + {k: new Tag("artwork_type", "architecture"), txt: to.architecture}, + {k: new Tag("artwork_type", "mural"), txt: to.mural}, + {k: new Tag("artwork_type", "painting"), txt: to.painting}, + {k: new Tag("artwork_type", "sculpture"), txt: to.sculpture}, + {k: new Tag("artwork_type", "statue"), txt: to.statue}, + {k: new Tag("artwork_type", "bust"), txt: to.bust}, + {k: new Tag("artwork_type", "stone"), txt: to.stone}, + {k: new Tag("artwork_type", "installation"), txt: to.installation}, + {k: new Tag("artwork_type", "graffiti"), txt: to.graffiti}, + {k: new Tag("artwork_type", "relief"), txt: to.relief}, + {k: new Tag("artwork_type", "azulejo"), txt: to.azulejo}, + {k: new Tag("artwork_type", "tilework"), txt: to.tilework} + ] + }); + + + const artistQuestion = new TagRenderingOptions({ + question: t.artist.question, + freeform: { + key: "artist", + template: "$$$", + renderTemplate: "{artist}" + } + }); + + this.elementsToShow = [ + + new ImageCarouselWithUploadConstructor(), + artworkType, + artistQuestion, + new Website(t.title) + ]; + this.style = function (tags) { return { - icon: new L.icon({ - iconUrl: "assets/statue.svg", + icon: { + iconUrl: "./assets/statue.svg", iconSize: [40, 40], text: "hi" - }), + }, color: "#0000ff" }; } - - this.elementsToShow = [ - - - new TagMappingOptions( - { - key: "name", - template: "

Artwork '{name}'

", - missing: "Artwork" - }), - new TagMappingOptions({ - key: "artwork_type", - template: "This artwork is a {artwork_type}" - }), - new TagMappingOptions({ - key: "artist_name", - template: "This artwork was made by {artist_name}" - }), - new TagMappingOptions({ - key: "subject", - template: "This artwork depicts {subject}" - }), - - new TagMappingOptions({ - key: "subject:wikidata", - template: "See more data about the subject" - }), - - new TagMappingOptions({ - key: "website", - template: "Website of the statue" - }), - - - - - new TagMappingOptions({key: "image", template: "image"}) - - ]; } diff --git a/Customizations/Layers/ClimbingTree.ts b/Customizations/Layers/ClimbingTree.ts new file mode 100644 index 0000000..9b0de43 --- /dev/null +++ b/Customizations/Layers/ClimbingTree.ts @@ -0,0 +1,43 @@ +import {LayerDefinition} from "../LayerDefinition"; +import Translations from "../../UI/i18n/Translations"; +import FixedText from "../Questions/FixedText"; +import {And, Tag} from "../../Logic/TagsFilter"; +import {ImageCarouselWithUploadConstructor} from "../../UI/Image/ImageCarouselWithUpload"; + +export class ClimbingTree extends LayerDefinition { + + + constructor() { + super(); + const t = Translations.t.climbingTrees.layer; + this.title = new FixedText(t.title); + const icon = "assets/walkbybrussels/tree.svg"; + this.icon = icon; + this.description = t.description; + this.style = (tags) => { + return { + color: "#00aa00", + icon: { + iconUrl: icon, + iconSize: [50, 50] + } + } + } + const tags = [new Tag("natural","tree"),new Tag("sport","climbing")]; + this.overpassFilter = new And(tags); + this.presets = [ + { + title: t.title, + description: t.description, + tags: tags + } + ] + this.minzoom = 12; + this.elementsToShow = [ + new ImageCarouselWithUploadConstructor() + ] + + + } + +} \ No newline at end of file diff --git a/Customizations/Layout.ts b/Customizations/Layout.ts index a5c1c96..6fb79a4 100644 --- a/Customizations/Layout.ts +++ b/Customizations/Layout.ts @@ -5,8 +5,8 @@ import Translation from "../UI/i18n/Translation"; import Translations from "../UI/i18n/Translations"; import Locale from "../UI/i18n/Locale"; import {VariableUiElement} from "../UI/Base/VariableUIElement"; -import {OsmConnection, UserDetails} from "../Logic/OsmConnection"; import {UIEventSource} from "../UI/UIEventSource"; +import {OsmConnection, UserDetails} from "../Logic/Osm/OsmConnection"; /** * A layout is a collection of settings of the global view (thus: welcome text, title, selection of layers). @@ -114,10 +114,12 @@ export class WelcomeMessage extends UIElement { let loginStatus = ""; if (this.userDetails !== undefined) { loginStatus = (this.userDetails.data.loggedIn ? this.welcomeBack : this.plzLogIn).Render(); + loginStatus = loginStatus + "
" } return "" + this.description.Render() + + "
" + loginStatus + this.tail.Render() + "
" + diff --git a/Customizations/Layouts/Artworks.ts b/Customizations/Layouts/Artworks.ts new file mode 100644 index 0000000..9618d98 --- /dev/null +++ b/Customizations/Layouts/Artworks.ts @@ -0,0 +1,17 @@ +import {Layout} from "../Layout"; +import {Artwork} from "../Layers/Artwork"; + +export class Artworks extends Layout{ + constructor() { + super( "artworks", + ["en","nl","fr"], + "Open Artwork Map", + [new Artwork()], + 10, + 50.8435, + 4.3688, + "

Open Artwork Map

"); + this.icon = "./assets/statue.svg" + } + +} \ No newline at end of file diff --git a/Customizations/Layouts/ClimbingTrees.ts b/Customizations/Layouts/ClimbingTrees.ts new file mode 100644 index 0000000..fabf8e8 --- /dev/null +++ b/Customizations/Layouts/ClimbingTrees.ts @@ -0,0 +1,21 @@ +import {LayerDefinition} from "../LayerDefinition"; +import Translations from "../../UI/i18n/Translations"; +import {Layout} from "../Layout"; +import {ClimbingTree} from "../Layers/ClimbingTree"; + +export class ClimbingTrees extends Layout { + constructor() { + super( + "climbing_trees", + ["nl"], + Translations.t.climbingTrees.layout.title, + [new ClimbingTree()], + 12, + 50.8435, + 4.3688, + Translations.t.climbingTrees.layout.welcome + ); + this.icon = "./assets/walkbybrussels/tree.svg" + this.hideFromOverview = true; + } +} \ No newline at end of file diff --git a/Customizations/Layouts/Statues.ts b/Customizations/Layouts/Statues.ts deleted file mode 100644 index 90740bb..0000000 --- a/Customizations/Layouts/Statues.ts +++ /dev/null @@ -1,27 +0,0 @@ -import {Layout} from "../Layout"; -import {Artwork} from "../Layers/Artwork"; - -export class Statues extends Layout{ - constructor() { - super( "statues", - ["en"], - "Open Artwork Map", - [new Artwork()], - 10, - 50.8435, - 4.3688, - - - "

Open Statue Map

\n" + - "\n" + - "

" + - "Help with creating a map of all statues all over the world!" - - , - "

Start by creating an account\n" + - " or by " + - " logging in.

", - "Start by clicking a pin and answering the questions"); - } - -} \ No newline at end of file diff --git a/Customizations/Questions/Website.ts b/Customizations/Questions/Website.ts index ac0b67c..c03f63d 100644 --- a/Customizations/Questions/Website.ts +++ b/Customizations/Questions/Website.ts @@ -9,7 +9,7 @@ export default class Website extends TagRenderingOptions { question: Translations.t.general.questions.websiteOf.Subs({category: category}), freeform: { renderTemplate: Translations.t.general.questions.websiteIs, - template: "website", + template: "$$$", key: "website" } }); diff --git a/Customizations/TagRendering.ts b/Customizations/TagRendering.ts index a111a46..c31c04b 100644 --- a/Customizations/TagRendering.ts +++ b/Customizations/TagRendering.ts @@ -3,11 +3,11 @@ import {UIEventSource} from "../UI/UIEventSource"; import {And, Tag, TagsFilter, TagUtils} from "../Logic/TagsFilter"; import {FixedUiElement} from "../UI/Base/FixedUiElement"; import {SaveButton} from "../UI/SaveButton"; -import {Changes} from "../Logic/Changes"; +import {Changes} from "../Logic/Osm/Changes"; import {VariableUiElement} from "../UI/Base/VariableUIElement"; import {TagDependantUIElement, TagDependantUIElementConstructor} from "./UIElementConstructor"; import {OnlyShowIfConstructor} from "./OnlyShowIf"; -import {UserDetails} from "../Logic/OsmConnection"; +import {UserDetails} from "../Logic/Osm/OsmConnection"; import {TextField} from "../UI/Input/TextField"; import {InputElement} from "../UI/Input/InputElement"; import {InputElementWrapper} from "../UI/Input/InputElementWrapper"; diff --git a/Logic/FilteredLayer.ts b/Logic/FilteredLayer.ts index df8c6cf..1872b92 100644 --- a/Logic/FilteredLayer.ts +++ b/Logic/FilteredLayer.ts @@ -1,14 +1,15 @@ -import {Basemap} from "./Basemap"; import {TagsFilter, TagUtils} from "./TagsFilter"; import {UIEventSource} from "../UI/UIEventSource"; import {ElementStorage} from "./ElementStorage"; -import {Changes} from "./Changes"; import L from "leaflet" import {GeoOperations} from "./GeoOperations"; import {UIElement} from "../UI/UIElement"; import {LayerDefinition} from "../Customizations/LayerDefinition"; -import {UserDetails} from "./OsmConnection"; import codegrid from "codegrid-js"; +import {Changes} from "./Osm/Changes"; +import {UserDetails} from "./Osm/OsmConnection"; +import {Basemap} from "./Leaflet/Basemap"; + /*** * A filtered layer is a layer which offers a 'set-data' function * It is initialized with a tagfilter. diff --git a/Logic/Osm/Notes.ts b/Logic/Osm/Notes.ts deleted file mode 100644 index a3a3e0c..0000000 --- a/Logic/Osm/Notes.ts +++ /dev/null @@ -1,9 +0,0 @@ -import {Bounds} from "../Bounds"; - -export class Notes { - - - queryGeoJson(bounds: Bounds, continuation: ((any) => void), onFail: ((reason) => void)): void { - - } -} \ No newline at end of file diff --git a/UI/CenterMessageBox.ts b/UI/CenterMessageBox.ts index 25ca95c..833a46b 100644 --- a/UI/CenterMessageBox.ts +++ b/UI/CenterMessageBox.ts @@ -1,6 +1,6 @@ import {UIElement} from "./UIElement"; import {UIEventSource} from "./UIEventSource"; -import {OsmConnection} from "../Logic/OsmConnection"; +import {OsmConnection} from "../Logic/Osm/OsmConnection"; import Translations from "./i18n/Translations"; export class CenterMessageBox extends UIElement { diff --git a/UI/FeatureInfoBox.ts b/UI/FeatureInfoBox.ts index 34913a4..ca4aab7 100644 --- a/UI/FeatureInfoBox.ts +++ b/UI/FeatureInfoBox.ts @@ -10,6 +10,7 @@ import {TagDependantUIElement, TagDependantUIElementConstructor} from "../Custom import Translations from "./i18n/Translations"; import {Changes} from "../Logic/Osm/Changes"; import {UserDetails} from "../Logic/Osm/OsmConnection"; +import {FixedUiElement} from "./Base/FixedUiElement"; export class FeatureInfoBox extends UIElement { @@ -38,7 +39,7 @@ export class FeatureInfoBox extends UIElement { constructor( feature: any, tagsES: UIEventSource, - title: TagRenderingOptions | UIElement, + title: TagRenderingOptions | UIElement | string, elementsToShow: TagDependantUIElementConstructor[], changes: Changes, userDetails: UIEventSource @@ -78,8 +79,9 @@ export class FeatureInfoBox extends UIElement { mappings: [{k: new And([]), txt: ""}] } ) - - if (title instanceof UIElement) { + if (typeof (title) == "string") { + this._title = new FixedUiElement(title); + } else if (title instanceof UIElement) { this._title = title; } else { this._title = new TagRenderingOptions(title.options).construct(deps); diff --git a/UI/ImageUploadFlow.ts b/UI/ImageUploadFlow.ts index 94b4f72..25c8e22 100644 --- a/UI/ImageUploadFlow.ts +++ b/UI/ImageUploadFlow.ts @@ -2,7 +2,7 @@ import {UIElement} from "./UIElement"; import {UIEventSource} from "./UIEventSource"; import $ from "jquery" import {Imgur} from "../Logic/Imgur"; -import {UserDetails} from "../Logic/OsmConnection"; +import {UserDetails} from "../Logic/Osm/OsmConnection"; import {DropDown} from "./Input/DropDown"; import {VariableUiElement} from "./Base/VariableUIElement"; import Translations from "./i18n/Translations"; diff --git a/UI/i18n/Translations.ts b/UI/i18n/Translations.ts index 696659d..9613c1a 100644 --- a/UI/i18n/Translations.ts +++ b/UI/i18n/Translations.ts @@ -571,6 +571,55 @@ export default class Translations { } + }, + climbingTrees: { + layer: { + + title: new T({ + nl: "Klimbomen" + }), + description: new T({ + nl: "Een klimboom is een mooie boom waar men in kan klimmen, al dan niet officieel" + }) + }, + layout: { + title: new T({nl: "Open Klimbomenkaart"}), + welcome: new T({nl: "Markeer je favoriete klimboom"}) + } + + }, + + artwork: { + name: new T({ en: 'Artwork', nl: 'Kunstwerk', fr: "Oeuvre d'art" }), + title: new T({ en: 'Artwork', nl: 'Kunstwerk', fr: "Oeuvre d'art" }), + type: { + render: new T({ + en: 'This is artwork of the type: {artwork_type}', + nl: 'Dit is een kunstwerk van het type: {artwork_type}', + fr: "Ceci est un travail d'art de type: {artwork_type}" + }), + template: new T({ en: 'Some other type: $$$', nl: 'Een ander type: $$$', fr: 'Un autre type: $$$' }), + question: new T({ + en: 'What is the type of this artwork?', + nl: 'Wat voor type kunstwerk is dit?', + fr: "Quel est le type de cette oeuvre d'art?" + }), + architecture: new T({ en: "architecture", nl: "architectuur", fr: "architecture" }), + mural: new T({ en: "mural", nl: "muurschildering", fr: "mural" }), + painting: new T({ en: "painting", nl: "schilderij", fr: "peinture" }), + sculpture: new T({ en: "sculpture", nl: "beeldhouwwerk", fr: "sculpture" }), + statue: new T({ en: "statue", nl: "standbeeld", fr: "statue" }), + bust: new T({ en: "bust", nl: "buste", fr: "buste" }), + stone: new T({ en: "stone", nl: "steen", fr: "rocher" }), + installation: new T({ en: "installation", nl: "installatie", fr: "installation" }), + graffiti: new T({ en: "graffiti", nl: "graffiti", fr: "graffiti" }), + relief: new T({ en: "relief", nl: "verlichting", fr: "relief" }), + azulejo: new T({ en: "azulejo", nl: "azulejo", fr: "azulejo" }), + tilework: new T({ en: "tilework", nl: "tegelwerk", fr: "carrelage" }) + }, artist: { + question: new T({en:"Which artist created this artwork?"}) + } + }, image: { diff --git a/index.css b/index.css index 990c308..e1e3b47 100644 --- a/index.css +++ b/index.css @@ -1144,20 +1144,27 @@ form { .tab-single-header { border-top-left-radius: 1em; border-top-right-radius: 1em; - box-shadow: 0 0 10px black; z-index: 5000; - border-bottom: 1px solid white; - padding-bottom: 1px; + padding-bottom: 0; + margin-bottom: 0; } .tab-active { background-color: white; z-index: 5001; + box-shadow: 0 0 10px black; + border-bottom: 1px solid white; + border-left: 1px solid black; + border-right:1px solid black; + border-top: 1px solid black; } .tab-non-active { background-color: #e5f5ff; opacity: 0.5; + border-left: 1px solid gray; + border-right:1px solid gray; + border-top: 1px solid gray; border-bottom: 1px solid lightgray; } diff --git a/index.ts b/index.ts index b280a7d..5231583 100644 --- a/index.ts +++ b/index.ts @@ -109,7 +109,7 @@ const lon = QueryParameters.GetQueryParameter("lon", undefined) .syncWith(LocalStorageSource.Get("lon")); function featSw(key: string, deflt: boolean): UIEventSource { - return QueryParameters.GetQueryParameter("fs-userbadge", "" + deflt).map((str) => { + return QueryParameters.GetQueryParameter(key, "" + deflt).map((str) => { return str !== "false"; }); }