Add a 'featured this week'-theme and calendar

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"),

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");
+    }
+
+}

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")
             });
         }
 

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<Loc>,
             layoutToUse?: LayoutConfig

assets/welcome_message.json

@@ -0,0 +1,53 @@
+[
+  {
+    "start_date": "2022-04-18",
+    "end_date": "2022-04-24",
+    "message": "The 23rd of april is <b><a href=https://en.wikipedia.org/wiki/World_Book_Day' target='_blank'>World Book Day</a></b>. 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 <b><a href=https://en.wikipedia.org/wiki/World_Art_Day' target='_blank'>World Art Day</a></b> - 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 <b><a href='https://www.un.org/en/observances/water-day' target='_blank'>World Water Day</a></b>. 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 <b><a href='https://en.wikipedia.org/wiki/Data_Privacy_Day' target='_blank'>International Privacy Day</a></b>. 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 <b>ghost bikes</b> 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 <i>name:etymology:wikidata</i>, it is even possible to link to whom or what a feature is <i>named after</i>. Quite some volunteers have done this - because it is interesting or for the <a href='https://equalstreetnames.org/' target='_blank'>Equal Street Names-project</a>. 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": "<p>Hi all!</p><p>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 <a href='https://www.openstreetmap.org/user/Pieter%20Vander%20Vennet/diary/397796' target='_blank'>in my diary entry</a>.<p>Furthermore, <a target='_blank' href='https://www.openstreetmap.org/user/Nicolelaine'>NicoleLaine</a> made a really cool new theme about postboxes, so make sure to check it out!</p>",
+    "featured_theme": "postboxes"
+  }
+]

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) {

index.css

@@ -20,6 +20,10 @@
         .z-above-controls {
             z-index: 10001
         }
+        
+        .w-160 {
+            width: 40rem;
+        }
     }
 
     .btn {

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": {

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<Loc>({
-        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)
+new FeaturedMessage().AttachTo("maindiv")
+new Combine(FeaturedMessage.WelcomeMessages().map(wm => FeaturedMessage.CreateFeaturedBox(wm))).AttachTo("extradiv")