Resolves #1653 - Improve "background" text

IsraelHiking.Web/src/application/application.module.ts

@@ -172,6 +172,7 @@ import { CategoriesGroupComponent } from "./components/sidebar/categories-group.
 import { MainMenuComponent } from "./components/main-menu.component";
 import { CenterMeComponent } from "./components/center-me.component";
 import { PhotoSwpieComponent } from "./components/photoswipe.component";
+import { BackgroundTextComponent } from "./components/background-text.component";
 
 // variables and functions
 import { routes } from "./routes";
@@ -349,6 +350,7 @@ const initializeApplication = (injector: Injector) => async () => {
             FilesSharesDialogComponent,
             AddSimplePoiDialogComponent,
             FacebookWarningDialogComponent,
+            BackgroundTextComponent,
             NameInUseValidatorDirective,
             ImageCaptureDirective,
             OfflineImagePipe,

IsraelHiking.Web/src/application/components/background-text.component.html

@@ -0,0 +1,4 @@
+<div class="background-text">
+    <p>{{resources.ifYouManageToReadThis}} <i class="fa fa-lg icon-bars"></i></p>
+    <p>{{text}}</p>
+</div>

IsraelHiking.Web/src/application/components/background-text.component.scss

@@ -0,0 +1,7 @@
+.background-text {
+    position: absolute;
+    top: 75%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    text-align: center;
+}

IsraelHiking.Web/src/application/components/background-text.component.ts

@@ -0,0 +1,47 @@
+import { Component } from "@angular/core";
+import { Observable } from "rxjs";
+
+import { BaseMapComponent } from "./base-map.component";
+import { ResourcesService } from "../services/resources.service";
+import { NgRedux, select } from "../reducers/infra/ng-redux.module";
+import type { ApplicationState, Language } from "../models/models";
+
+@Component({
+    selector: "background-text",
+    templateUrl: "./background-text.component.html",
+    styleUrls: ["./background-text.component.scss"]
+})
+export class BackgroundTextComponent extends BaseMapComponent {
+
+    @select((state: ApplicationState) => state.offlineState.isOfflineAvailable)
+    public isOfflineAvailable$: Observable<boolean>;
+
+    @select((state: ApplicationState) => state.offlineState.lastModifiedDate)
+    public lastModifiedDate$: Observable<boolean>;
+
+    @select((state: ApplicationState) => state.configuration.language)
+    public language$: Observable<Language>;
+
+    public text: string;
+
+    constructor(resources: ResourcesService,
+        private readonly ngRedux: NgRedux<ApplicationState>) {
+        super(resources);
+
+        this.text = "";
+        this.isOfflineAvailable$.subscribe(() => this.updateText());
+        this.lastModifiedDate$.subscribe(() => this.updateText());
+        this.language$.subscribe(() => this.updateText());
+    }
+
+    private updateText() {
+        let offlineState = this.ngRedux.getState().offlineState;
+        if (offlineState.isOfflineAvailable && offlineState.lastModifiedDate != null) {
+            this.text = this.resources.youNeedToToggleOfflineMaps;
+        } else if (offlineState.isOfflineAvailable && offlineState.lastModifiedDate == null) {
+            this.text = this.resources.youNeedToDownloadOfflineMaps;
+        } else if (!offlineState.isOfflineAvailable) {
+            this.text = this.resources.youNeedToPurchaseOfflineMaps;
+        }
+    }
+}

IsraelHiking.Web/src/application/components/map/main-map.component.html

@@ -1,5 +1,6 @@
 <ng-progress [ngStyle]="{'z-index':1500}"></ng-progress>
 <sidebar></sidebar>
+<background-text></background-text>
 <div fxLayout="row" style="height: 100%">
     <div fxFlex>
         <mgl-map [zoom]="[location.zoom]"

IsraelHiking.Web/src/application/services/resources.service.ts

@@ -235,6 +235,10 @@ export class ResourcesService {
     public screenOn: string;
     public screenOff: string;
     public screenDark: string;
+    public ifYouManageToReadThis: string;
+    public youNeedToPurchaseOfflineMaps: string;
+    public youNeedToDownloadOfflineMaps: string;
+    public youNeedToToggleOfflineMaps: string;
     // Toasts: Errors/Warnings/Success
     public unableToGetSearchResults: string;
     public pleaseSelectFrom: string;
@@ -467,7 +471,7 @@ export class ResourcesService {
     }
 
     private async setLanguageInternal(language: Language): Promise<void> {
-        await this.gettextCatalog.loadRemote(Urls.translations + language.code + ".json?sign=1637440747439");
+        await this.gettextCatalog.loadRemote(Urls.translations + language.code + ".json?sign=1637446303836");
         this.about = this.gettextCatalog.getString("About");
         this.legend = this.gettextCatalog.getString("Legend");
         this.clear = this.gettextCatalog.getString("Clear");
@@ -686,6 +690,10 @@ export class ResourcesService {
         this.screenOn = this.gettextCatalog.getString("Keep screen on");
         this.screenOff = this.gettextCatalog.getString("Allow turning off the screen");
         this.screenDark = this.gettextCatalog.getString("Darken the screen");
+        this.ifYouManageToReadThis = this.gettextCatalog.getString("If you manage to read this click the main menu button and then click layers:");
+        this.youNeedToDownloadOfflineMaps = this.gettextCatalog.getString("Background text: You need to download offline maps");
+        this.youNeedToToggleOfflineMaps = this.gettextCatalog.getString("Background text: You need to toggle offline maps");
+        this.youNeedToPurchaseOfflineMaps = this.gettextCatalog.getString("Background text: You need to purchase offline maps");
         // Toasts: Errors/Warnings/Success
         this.unableToGetSearchResults = this.gettextCatalog.getString("Unable to get search results...");
         this.pleaseSelectFrom = this.gettextCatalog.getString("Please select from...");

IsraelHiking.Web/src/index.html

@@ -131,19 +131,6 @@
     <div class="preloader">
         <img src="content/logo.png" />
         <div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div>
-        <br/>
-        <div id="delayed" style="display:none">
-            <p dir="rtl">אם אתם מספיקים לקרוא את כל מה שבפסקה הזו יש שתי אפשרויות:</p>
-            <ol class="text-start" dir="rtl">
-                <li>שאתם מנסים להשתמש במפות ללא חיבור לרשת, ואת זה ניתן לפתור ע״י רכישת מנוי למפות לא מקוונות בתפריט של מפות ושכבות</li>
-                <li>שיש בעיה עם אחת השכבות שלכם - במקרה כזה אנחנו ממליצים לכבות את כל השכבות השקופות ולמחוק את זו שעושה בעיות</li>
-            </ol>
-            <p>If you manage to read this paragraph there are two options:</p>
-            <ol class="text-start">
-                <li>That you are trying to use the map without a network connection, this can be solved by purchasing a subscription to offline maps in the layer menu</li>
-                <li>That there's a problem with one of your layers - in such case we reccomend turning off all the overlay layers and delete the one that's causing the issue</li>
-            </ol>
-        </div>
     </div>
     <main-map></main-map>
     <script>
@@ -154,9 +141,6 @@
                 window.externalUrl = url;
             }
         }
-        setTimeout(() => {
-            document.getElementById("delayed").style.display = null;
-        }, 7000);
     </script>
     <script type="text/javascript" src="cordova.js"></script>
 </body>

IsraelHiking.Web/src/translations/en-US.json

@@ -37,6 +37,9 @@
     "Automatic upload of recording": "Automatic upload of recording",
     "Average speed": "Average speed",
     "Back": "Back",
+    "Background text: You need to download offline maps": "Offline maps were purchased but were not downloaded yet, please download them, probably not now since the reception isn't great...",
+    "Background text: You need to purchase offline maps": "If you would like to see the maps while offline, you'll need to purchase them first...",
+    "Background text: You need to toggle offline maps": "You can toggle the offline maps in cases of poor reception by clicking the cloud icon next to the map",
     "Barriers": "Barriers",
     "Base layer and overlay are overlapping.": "Base layer and overlay are overlapping.",
     "Base Layer Properties": "Base Layer Properties",
@@ -153,6 +156,7 @@
     "Holy Place": "Holy Place",
     "hr": "hr",
     "I have read and agree to the terms": "I have read and agree to the terms",
+    "If you manage to read this click the main menu button and then click layers:": "If you manage to read this click the main menu button and then click layers:",
     "Information Center": "Travel Information",
     "Installation Instructions": "Installation Instructions",
     "Installation instructions for Locus on desktop - surround each new line with <li></li>": "<li>\nSurf to this site from your mobile device and follow the instructions<br>\n- OR -\n</li>\n<li>Click on 'Start Download' and wait for the zip file to finish downloading.</li>\n<li>Connect the Android device to your PC.</li>\n<li>If needed, change your Android device USB connection mode from 'USB for charging' to 'File transfers'.</li>\n<li>On your PC:</li>\n<ul>\n<li>Open the downloaded zip file and copy the directory it contains to a temporary location, such as your Desktop.</li>\n<li>Move this directory into the 'Locus/maps' directory of the connected Android device.</li>\n</ul>",

IsraelHiking.Web/src/translations/he.json

@@ -37,6 +37,9 @@
     "Automatic upload of recording": "העלאה אוטומטית של הקלטה",
     "Average speed": "מהירות ממוצעת",
     "Back": "חזור",
+    "Background text: You need to download offline maps": "המפות נרכשו אך עדיין לא הורדו, אנא הורידו אותן, כנראה לא עכשיו כי אין קליטה טובה...",
+    "Background text: You need to purchase offline maps": "אם ברצונכם לראות מפות ללא חיבור לרשת יש לרכוש אותן ראשית...",
+    "Background text: You need to toggle offline maps": "אתם יכולים לאפשר את המפות הלא מקוונות בתנאי קליטה גרועים ע״י לחיצה על סמליל הענן ליד השכבה המתאימה.",
     "Barriers": "מחסומים",
     "Base layer and overlay are overlapping.": "שכבת הבסיס והשכבה מעל חופפות.",
     "Base Layer Properties": "מאפייני מפת בסיס",
@@ -153,6 +156,7 @@
     "Holy Place": "מקום קדוש",
     "hr": "ש'",
     "I have read and agree to the terms": "קראתי ואני מאשר\\ת את התנאים",
+    "If you manage to read this click the main menu button and then click layers:": "אם אתם מצליחים לקרוא את זה כדאי לפתוח את התפריט הראשי וללחוץ על מסלולים - מפות - שכבות:",
     "Information Center": "מידע למטייל",
     "Installation Instructions": "הוראות התקנה",
     "Installation instructions for Locus on desktop - surround each new line with <li></li>": "<li>אם OruxMaps מותקנת במכשיר האנדרואיד שלכם, אין צורך להוריד את המפות בנפרד עבור Locus Maps!  קראו את ההוראות למטה.</li>\n\n<li>\nההתקנה הנוחה ביותר עבור Locus Maps היא על ידי פתיחת דף זה מהטלפון הנייד ומעקב אחר ההוראות שם.</li>\n\n<li>\nלהתקנה דרך המחשב האישי:\n<ul>\n<li>לחצו על התחילו בהורדה והמתינו לסיום הורדת קובץ ה- zip.</li>\n<li>חברו את מכשיר האנדרואיד עם כבל USB.</li>\n<li>במידת הצורך, במכשיר האנדרואיד שנו את מצב חיבור ה- USB מ'טעינה' ל'העברת קבצים'.</li>\n<li>פתחו את קובץ ה- zip והעתיקו את התיקיה שהוא מכיל למקום זמני כגון שולחן העבודה שלכם.</li>\n<li>העבירו את התיקיה שהעתקתם לתיקית 'Locus/maps' שבמכשיר האנדרואיד.</li>\n</ul>\n</li>\n\n<li>שיתוף של מפות עם OruxMaps על ידי הוספת תיקיית המפות של OruxMaps לרשימת התיקיות של Lucus Maps:\n<ul>\n<li>Menu (<u>=</u>) &larr; Maps &larr; Offline &larr; + &larr; External maps &larr; + \n<li>תפריט &larr; storages &larr; נווטו לתיקיית המפות. למשל: oruxmaps/mapfiles &larr; אישור</li>\n</ul>\n</li>",