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