Merge branch 'master' into tgpetrov/examples-dataform

Author: tgpetrov

.gitignore

@@ -14,4 +14,7 @@ hooks/
 *.apk
 *.ipa
 
-Telerik.keystore
+Telerik.keystore
+
+GoogleService-Info.plist
+google-services.json

.vscode/settings.json

@@ -1,3 +1,4 @@
 // Place your settings in this file to overwrite default and user settings.
 {
+    "typescript.tsdk": "./node_modules/typescript/lib"
 }

FIREBASE.ms

@@ -0,0 +1,15 @@
+Updating the news in firebase manually:
+Update the firebase-database.json with the added articles and "import" in firebase.
+
+Sending push notifications from the firebase console:
+Make sure to set:
+ - Message text: the message text
+ - Message label: message title displayed in firebase
+In the Advanced:
+ - Title: the message title (this is important!)
+ - In custom data add the fields:
+    - inAppTitle: repeat the "Title"
+    - inAppBody: repeat the "Message text"
+    - url: link to the page to be opened on tap (best matched with the news article)
+    - id: the id of the news 
+

app/App_Resources/Android/drawable-hdpi/ic_menu_main_new.png

@@ -3,8 +3,138 @@ import * as utils from "utils/utils";
 import * as dialogs from "ui/dialogs";
 import {isAndroid, isIOS} from "platform";
 import * as settings from "application-settings";
+import { Observable } from "data/observable";
+import * as navigator from "../common/navigator";
 
-const enabled = false;
+const enabled = true;
+
+interface FirebaseArticle {
+    readonly id: string;
+    readonly title: string;
+    readonly body: string;
+    readonly url: string;
+    readonly date: string;
+}
+
+const FIREBASE_NEWS_INITAL = "firebase:news:inital";
+const FIREBASE_NEWS_READ_KEY = "firebase:news:read";
+let _readArticles;
+function loadReadArticles() {
+    if (_readArticles) {
+        return _readArticles;
+    }
+
+    const str = settings.getString(FIREBASE_NEWS_READ_KEY, "{}");
+    try {
+        _readArticles = JSON.parse(str);
+    } catch(e) {
+        console.log("Failed to parse read firebase articles.");
+        _readArticles = {};
+    }
+
+    return _readArticles;
+}
+
+function saveReadArticles() {
+    try {
+        settings.setString(FIREBASE_NEWS_READ_KEY, JSON.stringify(loadReadArticles()));
+    } catch(e) {
+        console.log("Failed to persist read articles: " + e);
+    }
+}
+
+function getIsArticleRead(id: string): boolean {
+    return !!loadReadArticles()[id];
+}
+
+function markAsRead(id: string) {
+    loadReadArticles()[id] = true;
+    saveReadArticles();
+}
+function markAllAsRead() {
+    let readArticles = loadReadArticles();
+    viewModel.news.filter(n => n && n.id).forEach(n => readArticles[n.id] = true);
+    console.log("Maked as read: " + JSON.stringify(readArticles));
+    saveReadArticles();
+    viewModel.updateHasUnreadNews();
+}
+function markAsUnread(id: string) {
+    loadReadArticles()[id] = false;
+    saveReadArticles();
+}
+function markAllAsReadOnFirstRun() {
+    const isInitalRun = settings.getBoolean(FIREBASE_NEWS_INITAL, true);
+    if (isInitalRun) {
+        markAllAsRead();
+        settings.setBoolean(FIREBASE_NEWS_INITAL, false);
+    }
+}
+
+export class Article extends Observable {
+    readonly id: string;
+    readonly title: string;
+    readonly body: string;
+    readonly url: string;
+    readonly date: string;
+
+    constructor(base: FirebaseArticle) {
+        super();
+        this.id = base.id;
+        this.title = base.title;
+        this.body = base.body;
+        this.url = base.url;
+        this.date = base.date;
+    }
+
+    get isRead(): boolean {
+        return !!(this.id && getIsArticleRead(this.id));
+    }
+    set isRead(value: boolean) {
+        if (value && this.id) {
+            markAsRead(this.id);
+        } else {
+            markAsUnread(this.id);
+        }
+        this.notifyPropertyChange("isRead", value);
+        viewModel.updateHasUnreadNews();
+    }
+}
+
+export class ViewModel extends Observable {
+    news: Article[];
+    hasNews: boolean = false;
+    hasUnreadNews: boolean = false;
+
+    constructor() {
+        super();
+        this.updateNews([]);
+    }
+
+    updateNews(updates: FirebaseArticle[]) {
+        this.news = updates.filter(fb => !!fb).map(fb => new Article(fb));
+        this.updateHasNews();
+        this.updateHasUnreadNews();
+        this.notifyPropertyChange("news", this.news);
+    }
+
+    updateHasNews() {
+        let newValue = this.news && this.news.length > 0;
+        if (newValue != this.hasNews) {
+            this.hasNews = newValue;
+            this.notifyPropertyChange("hasNews", newValue);
+        }
+    }
+
+    updateHasUnreadNews() {
+        let newValue = this.news && this.news.length > 0 && this.news.some(args => !args.isRead);
+        if (newValue != this.hasUnreadNews) {
+            this.hasUnreadNews = newValue;
+            this.notifyPropertyChange("hasUnreadNews", newValue);
+            console.log("hasUnreadNews: " + this.hasUnreadNews);
+        }
+    }
+}
+export const viewModel = new ViewModel();
 
 var firebase;
 var lastHandledData;
@@ -42,26 +172,33 @@ function firebaseInit() {
     console.log("Firebase init!!!");
 
     firebase.init({
+        persist: true,
         onMessageReceivedCallback(message) {
             console.log("Got message!");
             console.log(JSON.stringify(message));
 
             let url = (<any>message).url;
+            let id = (<any>message).id;
             if (url) {
                 if (message.foreground) {
                     dialogs.confirm({
                         title: (<any>message).inAppTitle,
                         message: (<any>message).inAppBody,
-                        okButtonText: "Open",
-                        cancelButtonText: "Close"
+                        okButtonText: isAndroid ? "OPEN" : "Open",
+                        cancelButtonText: isAndroid ? "OK" : "OK"
                     }).then(result => {
                         if (result) {
                             utils.openUrl(url);
+                            if (id) {
+                                markAsRead(id);
+                                viewModel.news.filter(a => a.id === a.id).forEach(a => a.isRead = true);
+                            }
+                            navigator.navigateToWhatIsNew();
                         }
                     });
                 } else {
                     if (lastHandledData != url) {
-                        utils.openUrl(url);
+                        navigator.navigateToWhatIsNew();
                         lastHandledData = url;
                     }
                 }
@@ -73,7 +210,19 @@ function firebaseInit() {
             settings.setBoolean("user-granted-push", true);
         }
     }).then(value => {
-        console.log("Firebase init done!");
+        firebase.addValueEventListener((result) => {
+            if (!result.error) {
+                console.log("Update news: " + JSON.stringify(result.value))
+                viewModel.updateNews(result.value || []);
+                markAllAsReadOnFirstRun();
+            } else {
+                console.log(JSON.stringify(result));
+            }
+        }, "/news").then((listenerWrapper) => {
+            const path = listenerWrapper.path;
+            const listeners = listenerWrapper.listeners
+            console.log("Listening for firebase data. path: " + path + ", listeners: " + listeners);
+        });
     }).catch(e => {
         console.log("Failed to init firebase. " + e);
         console.log("stack:\n" + e.stack);

app/App_Resources/Android/drawable-hdpi/ic_notification.png

@@ -124,6 +124,13 @@ export function navigateToAbout() {
     }
 }
 
+export function navigateToWhatIsNew() {
+    var topmost = frame.topmost();
+    if (topmost.currentEntry.moduleName !== "views/what-is-new") {
+        frame.topmost().navigate(traceNavigateTo("views/what-is-new"));
+    }
+}
+
 export function navigateBack() {
     frame.goBack();
 }

app/App_Resources/Android/drawable-mdpi/ic_menu_main_new.png

@@ -208,7 +208,7 @@ export class SelectionViewModel extends Observable {
         if (this.isSelectionActive === true || this.isReorderActive === true) {
             return;
         }
-        this.CurrentItem = (<ObservableArray<BlogPostItemData>>this._owner.items).getItem(args.itemIndex);
+        this.CurrentItem = (<any>this._owner.items).getItem(args.itemIndex);
         this._currentItemIndex = args.itemIndex;
         topmostFrame().navigate({
             moduleName: "examples/listview/selection/detail-page",

app/App_Resources/Android/drawable-mdpi/ic_notification.png

@@ -1,8 +1,14 @@
 import examplesVM = require("./examples-model");
 import observable = require("data/observable");
 import paltfrom = require("platform");
+import { viewModel } from "../common/firebase";
 
 export class MainPageViewModel extends observable.Observable {
+
+	get firebase() {
+		return viewModel;
+	}
+
 	get exampleGroups(): Array<examplesVM.ExampleGroup> {
 		return examplesVM.groups;
 	}

app/App_Resources/Android/drawable-xhdpi/ic_menu_main_new.png

@@ -19,7 +19,7 @@ import { LayoutBase } from "ui/layouts/layout-base";
 import { RadSideDrawer } from "nativescript-telerik-ui-pro/sidedrawer";
 import {onAfterIntro} from "../../common/firebase";
 
-export function pageLoaded(args){
+export function pageLoaded(args) {
     prof.stop("main-page");
     let page = <pages.Page>(<View>args.object).page;
     setTimeout(() => (<any>page).canEnter = true, 3500);

app/App_Resources/Android/drawable-xhdpi/ic_notification.png

@@ -21,16 +21,13 @@
     <sdp:DrawerPage.actionBar>
         <ActionBar automationText="ActionBar" android:opacity="0">
             <android>
-                <NavigationButton icon="res://ic_menu_main" tap="showSlideout" automationText="SidebarMenu" />
+                <NavigationButton icon="{{ firebase.hasUnreadNews, firebase.hasUnreadNews ? 'res://ic_menu_main_new' : 'res://ic_menu_main' }}" tap="showSlideout" automationText="SidebarMenu" />
             </android>
-            <iOS>
-                <NavigationButton icon="res://ic_back" />
-            </iOS>
             <ActionBar.actionItems>
                 <iOS>
                     <ActionItem id="actionbar-menu" ios.position="left" tap="showSlideout" automationText="SidebarMenu">
                         <ActionItem.actionView>
-                            <Image src="res://ic_menu_main" width="22" height="22" margin="0, 8, 0, -8" />
+                            <Image src="{{ firebase.hasUnreadNews, firebase.hasUnreadNews ? 'res://ic_menu_main_new' : 'res://ic_menu_main' }}" width="22" height="22" margin="0, 8, 0, -8" />
                         </ActionItem.actionView>
                     </ActionItem>
                 </iOS>

app/App_Resources/Android/drawable-xxhdpi/ic_menu_main_new.png

@@ -22,10 +22,13 @@
     border-color: #3D5AFE;
 }
 
-.drawer-external-link {
+.drawer-external-link,
+.drawer-news-link {
     height: 44;
 }
-.drawer-external-link:highlighted {
+
+.drawer-external-link:highlighted,
+.drawer-news-link:highlighted {
     background-color: #516BFE;
 }
 .drawer-external-icon {
@@ -35,6 +38,14 @@
     horizontal-align: center;
     padding: 0 36;
 }
+.drawer-news-icon {
+    background-position: 0% 50%;
+    background-repeat: no-repeat;
+    horizontal-align: center;
+    padding: 0 36;
+}
+
+.drawer-news-label,
 .drawer-external-label {
     font-size: 13;
     color: white;

app/App_Resources/Android/drawable-xxhdpi/ic_notification.png

@@ -3,12 +3,20 @@ import { GroupPageViewModel } from "../../view-models/group-page-view-model"
 import * as navigator from "../../common/navigator"
 import * as gestures from "ui/gestures";
 import { groups } from "../../view-models/examples-model"
+import * as firebase from "../../common/firebase";
 import { topmost } from "ui/frame"
 import { grayTouch } from "../../common/effects";
 import * as application from "application";
+import * as applicationSettings from "application-settings";
+import { Observable } from "data/observable";
+
+class SidedrawerViewModel extends Observable {
+    public groups = groups;
+    public firebase = firebase.viewModel;
+}
 
 export function onLoaded(args) {
-    args.object.bindingContext = groups;
+    args.object.bindingContext = new SidedrawerViewModel();
 }
 
 export function tileTouch(args: gestures.TouchGestureEventData) {
@@ -58,6 +66,15 @@ export function tapAbout(args) {
     }
 }
 
+export function tapWhatIsNew() {
+    closeDrawer();
+    if (application.android) {
+        setTimeout(() => navigator.navigateToWhatIsNew(), 600);
+    } else {
+        navigator.navigateToWhatIsNew();
+    }
+}
+
 export function tapDrawerLink(args) {
     closeDrawer();
     navigator.openLink(args.object);

app/App_Resources/Android/drawable-xxxhdpi/ic_menu_main_new.png

@@ -1,10 +1,17 @@
 <ScrollView class="drawer-content">
-    <StackLayout loaded="onLoaded">
+    <StackLayout loaded="onLoaded" unloaded="onUnloaded">
         <Image src="res://logo_main_nav" margin="40 0 24 0" horizontalAlignment="center" stretch="none" />
 
         <Button text="Home" tap="tapHome" class="drawer-button" />
         <Button text="About" tap="tapAbout" class="drawer-button" />
 
+        <GridLayout class="drawer-news-link" tap="tapWhatIsNew">
+            <GridLayout class="drawer-news-icon">
+                <Image src="res://ic_notification" opacity="{{ firebase.hasUnreadNews, (firebase && firebase.hasUnreadNews) ? 1 : 0 }}" width="10" height="10" horizontalAlignment="left" />
+                <Label text="What's new" class="drawer-news-label" margin="0 18" />
+            </GridLayout>
+        </GridLayout>
+
         <GridLayout class="drawer-external-link" tap="tapDrawerLink" tag="http://docs.nativescript.org/getting-started">
             <GridLayout class="drawer-external-icon">
                 <Label text="Getting started" class="drawer-external-label" />