From 35cdb49b4dd0fc2140e4d1a630e787262c87ca72 Mon Sep 17 00:00:00 2001 From: pietervdvn Date: Sun, 17 Oct 2021 03:35:13 +0200 Subject: [PATCH] Add a 'featured this week'-theme and calendar --- UI/AllThemesGui.ts | 16 +++- UI/BigComponents/FeaturedMessage.ts | 88 +++++++++++++++++++++ UI/BigComponents/FullWelcomePaneWithTabs.ts | 7 +- UI/BigComponents/MoreScreen.ts | 10 +-- assets/welcome_message.json | 53 +++++++++++++ css/index-tailwind-output.css | 60 ++++++++------ index.css | 4 + langs/en.json | 3 +- test.ts | 29 +------ 9 files changed, 207 insertions(+), 63 deletions(-) create mode 100644 UI/BigComponents/FeaturedMessage.ts create mode 100644 assets/welcome_message.json diff --git a/UI/AllThemesGui.ts b/UI/AllThemesGui.ts index ceb1fa33b..be4e0d6e4 100644 --- a/UI/AllThemesGui.ts +++ b/UI/AllThemesGui.ts @@ -5,12 +5,24 @@ import Translations from "./i18n/Translations"; import Constants from "../Models/Constants"; import UserRelatedState from "../Logic/State/UserRelatedState"; import {Utils} from "../Utils"; +import LanguagePicker from "./LanguagePicker"; +import IndexText from "./BigComponents/IndexText"; +import {feature} from "@turf/turf"; +import FeaturedMessage from "./BigComponents/FeaturedMessage"; export default class AllThemesGui { constructor() { new FixedUiElement("").AttachTo("centermessage") - const state = new UserRelatedState(undefined); - new Combine([new MoreScreen(state, true), + const state = new UserRelatedState(undefined); + const intro = new Combine([ + LanguagePicker.CreateLanguagePicker(Translations.t.index.title.SupportedLanguages()) + .SetClass("absolute top-2 right-3"), + new IndexText() + ]); + new Combine([ + intro, + new FeaturedMessage(), + new MoreScreen(state, true), Translations.t.general.aboutMapcomplete .Subs({"osmcha_link": Utils.OsmChaLinkFor(7)}) .SetClass("link-underline"), diff --git a/UI/BigComponents/FeaturedMessage.ts b/UI/BigComponents/FeaturedMessage.ts new file mode 100644 index 000000000..4c369b175 --- /dev/null +++ b/UI/BigComponents/FeaturedMessage.ts @@ -0,0 +1,88 @@ +import Combine from "../Base/Combine"; +import * as welcome_messages from "../../assets/welcome_message.json" +import BaseUIElement from "../BaseUIElement"; +import {FixedUiElement} from "../Base/FixedUiElement"; +import MoreScreen from "./MoreScreen"; +import {AllKnownLayouts} from "../../Customizations/AllKnownLayouts"; +import Translations from "../i18n/Translations"; +import Title from "../Base/Title"; + +export default class FeaturedMessage extends Combine { + + + constructor() { + const now = new Date() + let welcome_message = undefined; + for (const wm of FeaturedMessage.WelcomeMessages()) { + if (wm.start_date >= now) { + continue + } + if (wm.end_date <= now) { + continue + } + + if (welcome_message !== undefined) { + console.warn("Multiple applicable messages today:", welcome_message.featured_theme) + } + welcome_message = wm; + } + welcome_message = welcome_message ?? undefined + + super([FeaturedMessage.CreateFeaturedBox(welcome_message)]); + } + + public static WelcomeMessages(): { start_date: Date, end_date: Date, message: string, featured_theme?: string }[] { + const all_messages: { start_date: Date, end_date: Date, message: string, featured_theme?: string }[] = [] + console.log("Constructing the list...", welcome_messages) + for (const i in welcome_messages) { + console.log(i) + if (isNaN(Number(i))) { + continue + } + console.log("> ", i) + const wm = welcome_messages[i] + console.log(wm) + + if (wm === null) { + continue + } + if (AllKnownLayouts.allKnownLayouts.get(wm.featured_theme) === undefined) { + console.error("Unkown featured theme for ", wm) + continue + } + + if (!wm.message) { + console.error("Featured message is missing for", wm) + continue + } + + all_messages.push({ + start_date: new Date(wm.start_date), + end_date: new Date(wm.end_date), + message: wm.message, + featured_theme: wm.featured_theme + }) + + } + return all_messages + } + + public static CreateFeaturedBox(welcome_message: { message: string, featured_theme?: string }): BaseUIElement { + const els: BaseUIElement[] = [] + if (welcome_message === undefined) { + return undefined; + } + const title = new Title(Translations.t.index.featuredThemeTitle.Clone()) + const msg = new FixedUiElement(welcome_message.message).SetClass("link-underline font-lg") + els.push(new Combine([title, msg]).SetClass("m-4")) + if (welcome_message.featured_theme !== undefined) { + els.push(MoreScreen.createLinkButton({}, AllKnownLayouts.allKnownLayouts.get(welcome_message.featured_theme)) + .SetClass("m-4 self-center md:w-160") + .SetStyle("height: min-content;")) + + + } + return new Combine(els).SetClass("border-2 border-grey-400 rounded-xl flex flex-col md:flex-row"); + } + +} \ No newline at end of file diff --git a/UI/BigComponents/FullWelcomePaneWithTabs.ts b/UI/BigComponents/FullWelcomePaneWithTabs.ts index 3f6a8bf4d..8dc7cf668 100644 --- a/UI/BigComponents/FullWelcomePaneWithTabs.ts +++ b/UI/BigComponents/FullWelcomePaneWithTabs.ts @@ -59,10 +59,13 @@ export default class FullWelcomePaneWithTabs extends ScrollableFullScreen { } if (state.featureSwitchMoreQuests.data) { - tabs.push({ header: Svg.add_img, - content: new MoreScreen(state) + content: + new Combine([ + Translations.t.general.morescreen.intro.Clone(), + new MoreScreen(state) + ]).SetClass("flex flex-col") }); } diff --git a/UI/BigComponents/MoreScreen.ts b/UI/BigComponents/MoreScreen.ts index f154a2cdc..c59766f28 100644 --- a/UI/BigComponents/MoreScreen.ts +++ b/UI/BigComponents/MoreScreen.ts @@ -26,22 +26,14 @@ export default class MoreScreen extends Combine { layoutToUse?: LayoutConfig }, onMainScreen: boolean = false) { const tr = Translations.t.general.morescreen; - let intro: BaseUIElement = tr.intro.Clone(); let themeButtonStyle = "" let themeListStyle = "" if (onMainScreen) { - intro = new Combine([ - LanguagePicker.CreateLanguagePicker(Translations.t.index.title.SupportedLanguages()) - .SetClass("absolute top-2 right-3"), - new IndexText() - ]); - themeButtonStyle = "h-32 min-h-32 max-h-32 overflow-ellipsis overflow-hidden" themeListStyle = "md:grid md:grid-flow-row md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-g4 gap-4" } super([ - intro, MoreScreen.createOfficialThemesList(state, themeButtonStyle).SetClass(themeListStyle), MoreScreen.createPreviouslyVistedHiddenList(state, themeButtonStyle, themeListStyle), MoreScreen.createUnofficialThemeList(themeButtonStyle, state, themeListStyle), @@ -157,7 +149,7 @@ export default class MoreScreen extends Combine { * Creates a button linking to the given theme * @private */ - private static createLinkButton( + public static createLinkButton( state: { locationControl?: UIEventSource, layoutToUse?: LayoutConfig diff --git a/assets/welcome_message.json b/assets/welcome_message.json new file mode 100644 index 000000000..db7807222 --- /dev/null +++ b/assets/welcome_message.json @@ -0,0 +1,53 @@ +[ + { + "start_date": "2022-04-18", + "end_date": "2022-04-24", + "message": "The 23rd of april is World Book Day. Go grab a book in a public bookcase (which is a piece of street furniture containing books where books can be taken and exchanged). Or alternative, search and map all of them in your neighbourhood!", + "featured_theme": "bookcases" + }, + { + "start_date": "2022-04-11", + "end_date": "2022-04-17", + "message": "The 15th of april is World Art Day - the ideal moment to go out, enjoy some artwork and add missing artwork to the map. And of course, you can snap some pictures", + "featured_theme": "artwork" + }, + { + "start_date": "2022-03-24", + "end_date": "2022-01-30", + "message": "The 22nd of March is World Water Day. Time to go out and find all the public drinking water spots!", + "featured_theme": "drinking_water" + }, + { + "start_date": "2022-01-24", + "end_date": "2022-01-30", + "message": "The 28th of January is International Privacy Day. Do you want to know where all the surveillance cameras are? Go find out!", + "featured_theme": "surveillance" + }, + { + "start_date": "2021-12-27", + "end_date": "2021-12-30", + "message": "In more normal circumstances, there would be a very cool gathering in Leipzig around this time with thousands of tech-minded people. However, due to some well-known circumstances, it is a virtual-only event this year as well. However, there might be a local hackerspace nearby to fill in this void", + "featured_theme": "hackerspaces" + }, + + + + { + "start_date": "2021-11-01", + "end_date": "2021-11-07", + "message": "The first days of november is, in many European traditions, a moment that we remember our deceased. That is why this week the ghost bikes are featured. A ghost bike is a memorial in the form of a bicycle painted white which is placed to remember a cyclist whom was killed in a traffic accident. The ghostbike-theme shows such memorials. Even though there are already too much such memorials on the map, please add missing ones if you encounter them.", + "featured_theme": "ghostbikes" + }, + { + "start_date": "2021-10-25", + "end_date": "2021-10-31", + "message": "Did you know you could link OpenStreetMap with Wikidata? With name:etymology:wikidata, it is even possible to link to whom or what a feature is named after. Quite some volunteers have done this - because it is interesting or for the Equal Street Names-project. For this, a new theme has been created which shows the Wikipedia page and Wikimedia-images of this tag and which makes it easy to link them both with the search box. Give it a try!", + "featured_theme": "etymology" + }, + { + "start_date": "2021-10-17", + "end_date": "2021-10-24", + "message": "

Hi all!

Thanks for using MapComplete. It has been quite a ride since it's inception, a bit over a year ago. MapComplete has grown significantly recently, which you can read more about on in my diary entry.

Furthermore, NicoleLaine made a really cool new theme about postboxes, so make sure to check it out!

", + "featured_theme": "postboxes" + } +] \ No newline at end of file diff --git a/css/index-tailwind-output.css b/css/index-tailwind-output.css index a53874c2e..63c10a8d0 100644 --- a/css/index-tailwind-output.css +++ b/css/index-tailwind-output.css @@ -740,6 +740,14 @@ video { top: 14rem; } +.top-2 { + top: 0.5rem; +} + +.right-3 { + right: 0.75rem; +} + .top-0 { top: 0px; } @@ -752,14 +760,6 @@ video { right: 0px; } -.top-2 { - top: 0.5rem; -} - -.right-3 { - right: 0.75rem; -} - .bottom-0 { bottom: 0px; } @@ -816,6 +816,10 @@ video { margin: 0.5rem; } +.m-4 { + margin: 1rem; +} + .m-3 { margin: 0.75rem; } @@ -824,10 +828,6 @@ video { margin: 1.5rem; } -.m-4 { - margin: 1rem; -} - .m-px { margin: 1px; } @@ -968,14 +968,14 @@ video { display: none; } -.h-full { - height: 100%; -} - .h-24 { height: 6rem; } +.h-full { + height: 100%; +} + .h-10 { height: 2.5rem; } @@ -1204,6 +1204,10 @@ video { gap: 1rem; } +.self-center { + align-self: center; +} + .overflow-auto { overflow: auto; } @@ -1362,14 +1366,6 @@ video { background-color: rgba(254, 202, 202, var(--tw-bg-opacity)); } -.p-1\.5 { - padding: 0.375rem; -} - -.p-1 { - padding: 0.25rem; -} - .p-3 { padding: 0.75rem; } @@ -1378,6 +1374,14 @@ video { padding: 1rem; } +.p-1\.5 { + padding: 0.375rem; +} + +.p-1 { + padding: 0.25rem; +} + .p-2 { padding: 0.5rem; } @@ -2414,6 +2418,10 @@ li::marker { grid-template-columns: repeat(2, minmax(0, 1fr)); } + .md\:flex-row { + flex-direction: row; + } + .md\:p-0 { padding: 0px; } @@ -2457,6 +2465,10 @@ li::marker { --tw-shadow: 0 0 #0000; box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } + + .md\:w-160 { + width: 40rem; + } } @media (min-width: 1024px) { diff --git a/index.css b/index.css index 9111b847d..6eb113abc 100644 --- a/index.css +++ b/index.css @@ -20,6 +20,10 @@ .z-above-controls { z-index: 10001 } + + .w-160 { + width: 40rem; + } } .btn { diff --git a/langs/en.json b/langs/en.json index 4054cb8ef..8fd307d98 100644 --- a/langs/en.json +++ b/langs/en.json @@ -25,7 +25,8 @@ "index": { "#": "These texts are shown above the theme buttons when no theme is loaded", "title": "Welcome to MapComplete", - "intro": "MapComplete is an OpenStreetMap-viewer and editor, which shows you information about a specific theme.", + "featuredThemeTitle": "Featured this week", + "intro": "MapComplete is an OpenStreetMap-viewer and editor, which shows you information about features of a specific theme and allows to update it.", "pickTheme": "Pick a theme below to get started." }, "split": { diff --git a/test.ts b/test.ts index 8dc3bf034..bb4fc949a 100644 --- a/test.ts +++ b/test.ts @@ -1,26 +1,5 @@ -import MinimapImplementation from "./UI/Base/MinimapImplementation"; -import Minimap from "./UI/Base/Minimap"; -import ShowOverlayLayer from "./UI/ShowDataLayer/ShowOverlayLayer"; -import TilesourceConfig from "./Models/ThemeConfig/TilesourceConfig"; -import Loc from "./Models/Loc"; -import {UIEventSource} from "./Logic/UIEventSource"; +import FeaturedMessage from "./UI/BigComponents/FeaturedMessage"; +import Combine from "./UI/Base/Combine"; -MinimapImplementation.initialize() - -const map = Minimap.createMiniMap({ - location: new UIEventSource({ - zoom: 19, - lat: 51.51896, - lon: -0.11267 - }) - -}) -map.SetStyle("height: 50rem") -map.AttachTo("maindiv") - -new ShowOverlayLayer(new TilesourceConfig({ - "source": "https://tiles.osmuk.org/PropertyBoundaries/{z}/{x}/{y}.png", - "isOverlay": true, - minZoom: 18, - maxZoom: 20 -}), map) \ No newline at end of file +new FeaturedMessage().AttachTo("maindiv") +new Combine(FeaturedMessage.WelcomeMessages().map(wm => FeaturedMessage.CreateFeaturedBox(wm))).AttachTo("extradiv") \ No newline at end of file