Add notification manager to home page

www/js/home.js

@@ -16,7 +16,7 @@ function loadHomePage(reload) {
     }, function (data) {
         if (data.status === 'OK') {
             if (!reload) {
-                loadingProgressDialog.setProgress(80);
+                loadingProgressDialog.setProgress(70);
             }
             var appcards = [];
             Object.keys(data.apps).forEach(function (k) {
@@ -37,30 +37,53 @@ function loadHomePage(reload) {
                     color: app.card.color
                 });
             });
-            if (reload) {
-                // Make it seem like it's doing something on fast connections
-                setTimeout(function () {
-                    app.ptr.done();
+            if (!reload) {
+                loadingProgressDialog.setProgress(80);
+                loadingProgressDialog.setText('Notifications');
+            }
+            getNotifications(function (notifs) {
+                notifications = [];
+                if (notifs != false) {
+                    Object.keys(notifs).forEach(function (k) {
+                        var notif = notifs[k];
+                        if (!notif.seen) {
+                            notifications.push(notif);
+                        }
+                    });
+                }
+                if (notifications == []) {
+                    notifications = false;
+                }
+                if (reload) {
+                    // Make it seem like it's doing something on fast connections
+                    setTimeout(function () {
+                        app.ptr.done();
+                        router.navigate("/home", {
+                            context: {
+                                appcards: appcards,
+                                notifications: notifications,
+                                unreadnotifications: (notifications != false && notifications != [])
+                            },
+                            reloadCurrent: true
+                        });
+                    }, 500);
+                } else {
+                    loadingProgressDialog.setText('Home');
+                    loadingProgressDialog.setProgress(90);
                     router.navigate("/home", {
                         context: {
-                            appcards: appcards
-                        },
-                        reloadCurrent: true
+                            appcards: appcards,
+                            notifications: notifications,
+                            unreadnotifications: (notifications != false && notifications != [])
+                        }
                     });
-                }, 500);
-            } else {
-                loadingProgressDialog.setProgress(90);
-                router.navigate("/home", {
-                    context: {
-                        appcards: appcards
-                    }
-                });
-                $(".view-main").on("click", "#applist .applist-item", function () {
-                    launchapp($(this).data("api"), $(this).data("url"), $(this).data("icon"), $(this).data("title"));
-                });
-                loadingProgressDialog.setProgress(100);
-                loadingProgressDialog.close();
-            }
+                    $(".view-main").on("click", "#applist .applist-item", function () {
+                        launchapp($(this).data("api"), $(this).data("url"), $(this).data("icon"), $(this).data("title"));
+                    });
+                    loadingProgressDialog.setProgress(100);
+                    loadingProgressDialog.close();
+                }
+            });
         } else {
             if (reload) {
                 app.ptr.done();
@@ -83,4 +106,9 @@ function loadHomePage(reload) {
 
 $(".view-main").on("ptr:refresh", ".ptr-content", function () {
     loadHomePage(true);
+});
+
+$(".view-main").on("swipeout:deleted", ".notificationlist-item", function () {
+    var id = $(this).data("id");
+    deleteNotification(id);
 });

www/js/notifications.js

@@ -4,8 +4,8 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-
-function displayNotifications(callback) {
+function getNotifications(callback) {
+    var notifications = [];
     $.post(localStorage.getItem("syncurl"), {
         username: localStorage.getItem("username"),
         key: localStorage.getItem("key"),
@@ -14,30 +14,76 @@ function displayNotifications(callback) {
         if (data.status === 'OK') {
             for (var i = 0; i < data.notifications.length; i++) {
                 var n = data.notifications[i];
+                notifications.push({
+                    id: n.id,
+                    title: n.title,
+                    text: n.content,
+                    sensitive: n.sensitive,
+                    seen: n.seen
+                });
+            }
+            callback(notifications);
+            return;
+        }
+        if (typeof callback == 'function') {
+            callback(false);
+        }
+    }, "json").fail(function () {
+        if (typeof callback == 'function') {
+            callback(false);
+        }
+    });
+}
+
+function displayNotifications(callback) {
+    getNotifications(function (notifications) {
+        if (notifications != false) {
+            for (var i = 0; i < notifications.length; i++) {
+                var n = notifications[i];
                 if (n.seen || shown_notifications.includes(n.id)) {
                     continue;
                 }
 
                 cordova.plugins.notification.local.schedule([{
                         title: n.title,
-                        text: n.content,
-                        actions: [
-                            {id: 'mark_read', title: "Mark Read"}
-                        ],
+                        text: n.text,
+//                        actions: [
+//                            {id: 'mark_read', title: "Mark Read"}
+//                        ],
                         id: n.id,
                         lockscreen: !n.sensitive
                     }]);
 
                 shown_notifications.push(n.id);
             }
+            if (typeof callback == 'function') {
+                callback();
+            }
+            return;
         }
         if (typeof callback == 'function') {
             callback();
         }
-    }, "json").fail(function () {
-        if (typeof callback == 'function') {
-            callback();
-        }
+    });
+}
+
+function deleteNotification(id) {
+    $.post(localStorage.getItem("syncurl"), {
+        username: localStorage.getItem("username"),
+        key: localStorage.getItem("key"),
+        password: localStorage.getItem("password"),
+        action: "deletenotification",
+        id: id
+    });
+}
+
+function readNotification(id) {
+    $.post(localStorage.getItem("syncurl"), {
+        username: localStorage.getItem("username"),
+        key: localStorage.getItem("key"),
+        password: localStorage.getItem("password"),
+        action: "readnotification",
+        id: id
     });
 }
 

www/pages/home.html

@@ -25,6 +25,38 @@
             <div class="ptr-arrow"></div>
         </div>
 
+        {{#if unreadnotifications}}
+        <div class="card">
+            <div class="card-header">Notifications</div>
+            <div class="card-content">
+                <div class="list media-list">
+                    <ul id="notificationlist">
+                        {{#each notifications}}
+                        <li class="swipeout notificationlist-item" data-id="{{id}}">
+                            <div class="swipeout-content">
+                                <div class="item-content">
+                                    <div class="item-inner">
+                                        <div class="item-title-row">
+                                            <div class="item-title">{{title}}</div>
+                                        </div>
+                                        <div class="item-text">{{text}}</div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="swipeout-actions-left">
+                                <a href="#" class="swipeout-delete">Delete</a>
+                            </div>
+                            <div class="swipeout-actions-right">
+                                <a href="#" class="swipeout-delete">Delete</a>
+                            </div>
+                        </li>
+                        {{/each}}
+                    </ul>
+                </div>
+            </div>
+        </div>
+        {{/if}}
+
         <div class="card">
             <div class="card-header">Apps</div>
             <div class="card-content">