Merge pull request #84 from kranrao/ux-ui

Applies UX improvements to application
supertitanoboa · Mar 7, 2015 · fdabab3 · fdabab3
2 parents 9825188 + 9a21cec
commit fdabab3
Show file tree

Hide file tree

Showing 8 changed files with 59 additions and 15 deletions.
diff --git a/client/www/app/core/alerts.service.js b/client/www/app/core/alerts.service.js
@@ -12,12 +12,12 @@
       showIncorrectPassword: showIncorrectPassword,
       showUserDoesNotExist: showUserDoesNotExist,
       showUserExists: showUserExists,
-      errorSavingMoment: errorSavingMoment
+      errorSavingMoment: errorSavingMoment,
+      errorSavingMemento: errorSavingMemento
     };
 
     return service;
 
-   // FIXME: need to add alerts of temporary div invalid password and emails    
    function showIncorrectPassword() {
      var alertPopup = $ionicPopup.alert({
        title: 'Incorrect Password',
@@ -45,6 +45,14 @@
        template: 'Whoops, there was an error saving your moment! Please try again'
      });
    };
+
+   function errorSavingMemento() {
+     var alertPopup = $ionicPopup.alert({
+       title: 'Error Saving Memento',
+       template: 'Whoops, there was an error saving your memento! Please try again'
+     });
+   };
+
   }
 
 })();

diff --git a/client/www/app/core/data/datahandler.js b/client/www/app/core/data/datahandler.js
@@ -91,7 +91,7 @@
     function saveMomentModel() {
       var user   = UserModel.get();
       var moment = MomentModel.get();
-      // TODO: Save to Local Storage first      
+      // TODO: Save to Local Storage first
       return dataservice.saveMoment(moment, user.sessionID);
     }
 

diff --git a/client/www/app/memento-create/memento.create.js b/client/www/app/memento-create/memento.create.js
@@ -6,23 +6,26 @@
     .controller('MementoCreate', MementoCreate);
 
   /* @ngInject */
-  function MementoCreate($state, DataHandler, $ionicHistory, Events) {
+  function MementoCreate($state, DataHandler, $ionicHistory, Events, $ionicLoading, Alerts) {
     /*jshint validthis: true */
     var vm = this;
     vm.title = 'Create Memento';
     vm.currentMemento = new DataHandler.memento.constructor();
+    vm.recipient          = '';
 
     vm.saveMemento        = saveMemento;
     vm.routeToMemento     = routeToMemento;
     vm.addMomentToMemento = addMomentToMemento;
     vm.addRecipient       = addRecipient;
     vm.removeRecipient    = removeRecipient;
-    vm.recipient          = '';
     vm.goBack             = goBack;
+    vm.showSaveProgress   = showSaveProgress;
+    vm.hideSaveProgress   = hideSaveProgress;
 
     ////////////////////////////////////////////////////////////
 
     function saveMemento(currentMemento) {
+      vm.showSaveProgress();
       var currentMoment = DataHandler.moment.get();
 
       DataHandler.memento.set(currentMemento);
@@ -37,6 +40,7 @@
       .then(function(updatedMemento) {        
 
         DataHandler.memento.set(updatedMemento);
+        vm.hideSaveProgress();
 
         if (currentMoment.hasOwnProperty('ID')) {          
           addMomentToMemento(currentMoment);
@@ -47,6 +51,8 @@
         } 
       })
       .catch(function(err) {
+        vm.hideSaveProgress();
+        Alerts.errorSavingMemento();
         console.error('Error creating memento');
         console.error(err);
       })
@@ -101,6 +107,16 @@
       return $ionicHistory.goBack()
     }
 
+    function showSaveProgress() {
+      return $ionicLoading.show({
+        template: 'Saving memento...'
+      });
+    }
+
+    function hideSaveProgress() {
+      return $ionicLoading.hide();
+    }
+
   }
 })();
 
diff --git a/client/www/app/memento/memento.html b/client/www/app/memento/memento.html
@@ -12,8 +12,8 @@
   <ion-content class="memento-wrap">
 
   <h1 class="memento-title-h1">{{vm.memento.title}}</h1>
-
-    <div ng-repeat="moment in vm.memento.moments | orderBy: 'releaseDate' " class="moment-in-memento">
+    
+    <div ng-repeat="moment in vm.memento.moments | orderBy: 'releaseDate'" class="moment-in-memento">
       <h2 class="moment-title-h2">{{moment.title}}</h2>
       <span class="moment-release-date">Release Date: {{moment.releaseDate | date: 'medium'}}</span>
 

diff --git a/client/www/app/memento/memento.js b/client/www/app/memento/memento.js
@@ -6,17 +6,34 @@
     .controller('Memento', Memento);
 
   /* @ngInject */
-  function Memento(DataHandler, $stateParams, $state, $ionicHistory) {
+  function Memento(DataHandler, $stateParams, $state, $ionicHistory, Events) {
     /*jshint validthis: true */
     var vm = this;
     vm.mementoID = Number($stateParams.ID);
-    vm.memento = DataHandler.mementos.get(vm.mementoID);
-
-    vm.goToMementos = goToMementos;
+    vm.memento = {};
+
+    vm.getMemento       = getMemento;
+    vm.goToMementos     = goToMementos;
     vm.goToMomentCreate = goToMomentCreate;
     vm.showLoadProgress = showLoadProgress;
     vm.hideLoadProgress = hideLoadProgress;
 
+    activate()
+
+    ////////////////////////////////////////////////////////////
+
+    function activate() {
+      vm.getMemento();
+
+      Events.on('newMoment', function() {
+        vm.getMemento();
+      })
+    }
+
+    function getMemento() {
+      vm.memento = DataHandler.mementos.get(vm.mementoID);
+    }
+
     function goToMementos () {
       $state.go('mementos');
     }

diff --git a/client/www/app/mementos-list/mementos.html b/client/www/app/mementos-list/mementos.html
@@ -11,7 +11,7 @@
     <ion-item class="mementos-title-bg" href="#/mementocreate" class="item-icon-left left-create-icon">
       <i class="icon ion-plus"></i>     Create a Memento</ion-item>
 
-    <ion-item ng-repeat="memento in vm.mementos.created" class="item-icon-left left-memento-icon" on-tap="vm.addMoment({{ memento }})">
+    <ion-item ng-repeat="memento in vm.mementos.created" class="item-icon-left left-memento-icon" on-tap="vm.addMoment({{ memento.ID }})">
       <i class="icon ion-ios7-moon memento-icon-created"></i>
       {{memento.title}}
     </ion-item>

diff --git a/client/www/app/mementos-list/mementos.js b/client/www/app/mementos-list/mementos.js
@@ -47,8 +47,9 @@
       vm.mementos = DataHandler.mementos.getAll();
     }
 
-    function addMoment(memento) {
-      vm.moment = DataHandler.moment.get();
+    function addMoment(mementoID) {
+      var memento = DataHandler.mementos.get(mementoID);
+      vm.moment   = DataHandler.moment.get();
 
       if (vm.moment.hasOwnProperty('ID')) {
         DataHandler.memento.set(memento);      
@@ -62,6 +63,7 @@
           // NOTE: reset moment back to an empty object
           vm.moment = DataHandler.moment.set({});
 
+          Events.trigger('newMoment');
           vm.goToMemento(updatedMemento.ID);
         })
         .catch(function(err) {

diff --git a/client/www/app/moment/moment.create.controller.js b/client/www/app/moment/moment.create.controller.js
@@ -47,7 +47,8 @@
 
         $state.go('mementos');
       })
-      .catch(function(err) {        
+      .catch(function(err) {
+        vm.hideSaveProgress();
         Alerts.errorSavingMoment();
         console.error('There was an error saving moment:', err);
       });