sync imap on footer click

src/js/controller/mail-list.js

@@ -13,6 +13,10 @@ define(function(require) {
         $scope.folder = 'INBOX';
         emailDao = appController._emailDao;
 
+        //
+        // scope functions
+        //
+
         $scope.select = function(email) {
             email.bodyDisplayParts = email.body.split('\n');
             $scope.selected = email;
@@ -20,6 +24,26 @@ define(function(require) {
             $scope.$parent.selected = $scope.selected;
         };
 
+        $scope.synchronize = function() {
+            updateStatus('Syncing ...');
+
+            // sync from imap to local db
+            syncImapFolder({
+                folder: $scope.folder,
+                offset: -num,
+                num: offset
+            }, function() {
+                // list again from local db after syncing
+                listLocalMessages({
+                    folder: $scope.folder,
+                    offset: offset,
+                    num: num
+                }, function() {
+                    updateStatus('Last update: ', new Date());
+                });
+            });
+        };
+
         // production... in chrome packaged app
         if (window.chrome && chrome.identity) {
             initList();
@@ -32,30 +56,29 @@ define(function(require) {
             $scope.select($scope.emails[0]);
         });
 
+        //
+        // helper functions
+        //
+
         function initList() {
+            updateStatus('Read cache ...');
+
             // list messaged from local db
             listLocalMessages({
                 folder: $scope.folder,
                 offset: offset,
                 num: num
             }, function() {
+                updateStatus('Login ...');
+                $scope.$apply();
+
                 // login to imap
                 loginImap(function() {
-                    // sync from imap to local db
-                    syncImapFolder({
-                        folder: $scope.folder,
-                        offset: -num,
-                        num: offset
-                    }, function() {
-                        // list again from local db after syncing
-                        listLocalMessages({
-                            folder: $scope.folder,
-                            offset: offset,
-                            num: num
-                        }, function() {
-                            console.log('Syncing ' + $scope.folder + ' complete.');
-                        });
-                    });
+                    updateStatus('Syncing ...');
+                    $scope.$apply();
+
+                    // sync imap folder to local db
+                    $scope.synchronize();
                 });
             });
         }
@@ -67,14 +90,11 @@ define(function(require) {
                     return;
                 }
 
-                console.log('Logged in to IMAP.');
                 callback();
             });
         }
 
         function syncImapFolder(options, callback) {
-            console.log('Syncing IMAP...');
-            // sync if emails are empty
             emailDao.imapSync(options, function(err) {
                 if (err) {
                     console.error(err);
@@ -91,13 +111,20 @@ define(function(require) {
                     console.error(err);
                     return;
                 }
-                // add display dates
-                displayEmails(emails);
 
                 callback(emails);
+                // add display dates
+                displayEmails(emails);
             });
         }
 
+        function updateStatus(lbl, time) {
+            $scope.lastUpdateLbl = lbl;
+            $scope.lastUpdate = (time) ? time : '';
+            $scope.$parent.lastUpdateLbl = $scope.lastUpdateLbl;
+            $scope.$parent.lastUpdate = $scope.lastUpdate;
+        }
+
         function displayEmails(emails) {
             if (!emails || emails.length < 1) {
                 return;

src/sass/views/_mail-list.scss

@@ -41,6 +41,7 @@
     }
 
     footer {
+        cursor: pointer;
         position: absolute;
         bottom: 0px;
         left: 0px;

src/tpl/mail-list.html

@@ -14,6 +14,6 @@
   </li>
 </ul><!--/.mail-list-->
 
-<footer>
-  Last update: 12:22 PM
+<footer ng-click="synchronize()">
+  {{lastUpdateLbl}} {{lastUpdate | date:'shortTime'}}
 </footer>

src/tpl/navigation.html

@@ -34,6 +34,6 @@
     <li><a href="#">Help</a></li>
   </ul>
   <footer>
-    Last update: 12:22 PM
+    {{lastUpdateLbl}} {{lastUpdate | date:'shortTime'}}
   </footer>
 </div>