HYBRID4: Accessing Native Capabilities of Devices: Cordova and ngCordova

- Add image picker to register - Add vibrate to delete favorite
yogykwan · May 19, 2017 · f12a7e4 · f12a7e4
1 parent 620e0fc
commit f12a7e4
Show file tree

Hide file tree

Showing 6 changed files with 146 additions and 81 deletions.
diff --git a/conFusion-Ionic/README.md b/conFusion-Ionic/README.md
@@ -34,6 +34,9 @@ ionic cordova resources
 ```
 ionic cordova plugin add de.appplant.cordova.plugin.local-notification
 ionic cordova plugin add https://github.com/EddyVerbruggen/Toast-PhoneGap-Plugin.git
+ionic cordova plugin add cordova-plugin-camera
+ionic cordova plugin add cordova-plugin-image-picker
+ionic cordova plugin add cordova-plugin-vibration
 ```
 
 ## IOS

diff --git a/conFusion-Ionic/config.xml b/conFusion-Ionic/config.xml
@@ -86,8 +86,12 @@
     </plugin>
     <plugin name="cordova-plugin-console" spec="^1.0.5" />
     <plugin name="cordova-plugin-device" spec="^1.1.4" />
+    <plugin name="cordova-plugin-image-picker" spec="^1.1.3">
+        <variable name="PHOTO_LIBRARY_USAGE_DESCRIPTION" value=" " />
+    </plugin>
     <plugin name="cordova-plugin-splashscreen" spec="^4.0.3" />
     <plugin name="cordova-plugin-statusbar" spec="^2.2.1" />
+    <plugin name="cordova-plugin-vibration" spec="^2.1.5" />
     <plugin name="cordova-plugin-whitelist" spec="^1.3.1" />
     <plugin name="cordova-plugin-x-toast" spec="git+https://github.com/EddyVerbruggen/Toast-PhoneGap-Plugin.git" />
     <plugin name="de.appplant.cordova.plugin.local-notification" spec="^0.8.4" />

diff --git a/conFusion-Ionic/package.json b/conFusion-Ionic/package.json
@@ -10,8 +10,10 @@
         "cordova-plugin-compat": "^1.1.0",
         "cordova-plugin-console": "^1.0.5",
         "cordova-plugin-device": "^1.1.4",
+        "cordova-plugin-image-picker": "^1.1.3",
         "cordova-plugin-splashscreen": "^4.0.3",
         "cordova-plugin-statusbar": "^2.2.1",
+        "cordova-plugin-vibration": "^2.1.5",
         "cordova-plugin-whitelist": "^1.3.1",
         "cordova-plugin-x-toast": "git+https://github.com/EddyVerbruggen/Toast-PhoneGap-Plugin.git",
         "de.appplant.cordova.plugin.local-notification": "^0.8.4",
@@ -42,7 +44,11 @@
             "cordova-plugin-camera": {
                 "CAMERA_USAGE_DESCRIPTION": " ",
                 "PHOTOLIBRARY_USAGE_DESCRIPTION": " "
-            }
+            },
+            "cordova-plugin-image-picker": {
+                "PHOTO_LIBRARY_USAGE_DESCRIPTION": " "
+            },
+            "cordova-plugin-vibration": {}
         },
         "platforms": [
             "android",

diff --git a/conFusion-Ionic/www/js/controllers.js b/conFusion-Ionic/www/js/controllers.js
@@ -2,7 +2,8 @@
 
 angular.module('conFusion.controllers', [])
 
-  .controller('AppCtrl', function ($scope, $ionicModal, $timeout, $localStorage, $ionicPlatform, $cordovaCamera) {
+  .controller('AppCtrl', function ($scope, $ionicModal, $timeout, $localStorage,
+                                   $ionicPlatform, $cordovaCamera, $cordovaImagePicker) {
 
     // With the new view caching in Ionic, Controllers are only called
     // when they are recreated or on app start, instead of every page change.
@@ -125,6 +126,25 @@ angular.module('conFusion.controllers', [])
         $scope.registerform.show();
 
       };
+
+      var pickoptions = {
+        maximumImagesCount: 1,
+        width: 100,
+        height: 100,
+        quality: 50
+      };
+
+      $scope.pickImage = function () {
+        $cordovaImagePicker.getPictures(pickoptions)
+          .then(function (results) {
+            for (var i = 0; i < results.length; i++) {
+              console.log('Image URI: ' + results[i]);
+              $scope.registration.imgSrc = results[0];
+            }
+          }, function (error) {
+            // error getting photos
+          });
+      };
     });
 
   })
@@ -229,76 +249,100 @@ angular.module('conFusion.controllers', [])
     };
   }])
 
-  .controller('DishDetailController', ['$scope', '$stateParams', 'dish', 'menuFactory', 'favoriteFactory', 'baseURL', '$ionicModal', '$ionicPopover', function ($scope, $stateParams, dish, menuFactory, favoriteFactory, baseURL, $ionicModal, $ionicPopover) {
+  .controller('DishDetailController', ['$scope', '$stateParams', 'dish', 'menuFactory', 'favoriteFactory', 'baseURL',
+    '$ionicModal', '$ionicPopover', '$ionicPlatform', '$cordovaLocalNotification',
+    '$cordovaToast', function ($scope, $stateParams, dish, menuFactory, favoriteFactory, baseURL, $ionicModal,
+                               $ionicPopover, $ionicPlatform, $cordovaLocalNotification, $cordovaToast) {
 
-    $scope.baseURL = baseURL;
-    $scope.orderText = '';
+      $scope.baseURL = baseURL;
+      $scope.orderText = '';
 
-    $scope.dish = dish;
+      $scope.dish = dish;
 
-    $ionicPopover.fromTemplateUrl('templates/dishdetailpopover.html', {
-      scope: $scope
-    }).then(function (popover) {
-      $scope.popover = popover;
-    });
+      $ionicPopover.fromTemplateUrl('templates/dishdetailpopover.html', {
+        scope: $scope
+      }).then(function (popover) {
+        $scope.popover = popover;
+      });
 
-    $scope.openPopover = function ($event) {
-      $scope.popover.show($event);
-    };
-    $scope.closePopover = function () {
-      $scope.popover.hide();
-    };
-    //Cleanup the popover when we're done with it!
-    $scope.$on('$destroy', function () {
-      $scope.popover.remove();
-    });
-    // Execute action on hide popover
-    $scope.$on('popover.hidden', function () {
-      // Execute action
-    });
-    // Execute action on remove popover
-    $scope.$on('popover.removed', function () {
-      // Execute action
-    });
+      $scope.openPopover = function ($event) {
+        $scope.popover.show($event);
+      };
+      $scope.closePopover = function () {
+        $scope.popover.hide();
+      };
+      //Cleanup the popover when we're done with it!
+      $scope.$on('$destroy', function () {
+        $scope.popover.remove();
+      });
+      // Execute action on hide popover
+      $scope.$on('popover.hidden', function () {
+        // Execute action
+      });
+      // Execute action on remove popover
+      $scope.$on('popover.removed', function () {
+        // Execute action
+      });
 
-    $scope.addFavorite = function () {
-      favoriteFactory.addToFavorites(parseInt($stateParams.id, 10));
-      $scope.popover.hide();
-    };
+      $scope.addFavorite = function () {
+        favoriteFactory.addToFavorites(parseInt($stateParams.id, 10));
+        $scope.popover.hide();
 
+        $ionicPlatform.ready(function () {
+          $cordovaLocalNotification.schedule({
+            id: 1,
+            title: "Added Favorite",
+            text: $scope.dish.name
+          }).then(function () {
+              console.log('Added Favorite ' + $scope.dish.name);
+            },
+            function () {
+              console.log('Failed to add Notification ');
+            });
 
-    $ionicModal.fromTemplateUrl('templates/dishcomment.html', {
-      scope: $scope
-    }).then(function (modal) {
-      $scope.commentForm = modal;
-    });
+          $cordovaToast
+            .show('Added Favorite ' + $scope.dish.name, 'long', 'bottom')
+            .then(function (success) {
+              // success
+            }, function (error) {
+              // error
+            });
+        });
+      };
 
-    $scope.closeCommentForm = function () {
-      $scope.commentForm.hide();
-      $scope.popover.hide();
-    };
 
-    $scope.showCommentForm = function () {
-      $scope.commentForm.show();
-    };
+      $ionicModal.fromTemplateUrl('templates/dishcomment.html', {
+        scope: $scope
+      }).then(function (modal) {
+        $scope.commentForm = modal;
+      });
 
-    $scope.dishComment = {
-      author: "", rating: 5, comment: "", date: ""
-    };
+      $scope.closeCommentForm = function () {
+        $scope.commentForm.hide();
+        $scope.popover.hide();
+      };
 
-    $scope.submitComment = function () {
+      $scope.showCommentForm = function () {
+        $scope.commentForm.show();
+      };
 
-      $scope.dishComment.date = new Date().toISOString();
+      $scope.dishComment = {
+        author: "", rating: 5, comment: "", date: ""
+      };
 
-      $scope.dish.comments.push($scope.dishComment);
-      menuFactory.update({id: $scope.dish.id}, $scope.dish);
+      $scope.submitComment = function () {
 
-      $scope.closeCommentForm();
+        $scope.dishComment.date = new Date().toISOString();
 
-      $scope.dishComment = {author: "", rating: 5, comment: "", date: ""};
-    };
+        $scope.dish.comments.push($scope.dishComment);
+        menuFactory.update({id: $scope.dish.id}, $scope.dish);
 
-  }])
+        $scope.closeCommentForm();
+
+        $scope.dishComment = {author: "", rating: 5, comment: "", date: ""};
+      };
+
+    }])
 
 
   .controller('IndexController', ['$scope', 'dish', 'promotion', 'leader', 'baseURL', function ($scope, dish, promotion, leader, baseURL) {
@@ -313,34 +357,37 @@ angular.module('conFusion.controllers', [])
     $scope.leaders = leaders;
   }])
 
-  .controller('FavoritesController', ['$scope', 'dishes', 'favorites', 'favoriteFactory', 'baseURL', '$ionicPopup', '$ionicLoading', '$timeout', function ($scope, dishes, favorites, favoriteFactory, baseURL, $ionicPopup, $ionicLoading, $timeout) {
-    $scope.baseURL = baseURL;
-    $scope.shouldShowDelete = false;
+  .controller('FavoritesController', ['$scope', 'dishes', 'favorites', 'favoriteFactory', 'baseURL', '$ionicPopup',
+    '$ionicLoading', '$timeout', '$cordovaVibration', function ($scope, dishes, favorites, favoriteFactory, baseURL,
+                                                                $ionicPopup, $ionicLoading, $timeout, $cordovaVibration) {
+      $scope.baseURL = baseURL;
+      $scope.shouldShowDelete = false;
 
-    $scope.favorites = favorites;
-    $scope.dishes = dishes;
+      $scope.favorites = favorites;
+      $scope.dishes = dishes;
 
-    $scope.toggleDelete = function () {
-      $scope.shouldShowDelete = !$scope.shouldShowDelete;
-    };
+      $scope.toggleDelete = function () {
+        $scope.shouldShowDelete = !$scope.shouldShowDelete;
+      };
 
-    $scope.deleteFavorite = function (index) {
-      var confirmPopup = $ionicPopup.confirm({
-        title: 'Confirm Delete',
-        template: 'Are you sure you want to delete this item?'
-      });
+      $scope.deleteFavorite = function (index) {
+        var confirmPopup = $ionicPopup.confirm({
+          title: 'Confirm Delete',
+          template: 'Are you sure you want to delete this item?'
+        });
 
-      confirmPopup.then(function (res) {
-        if (res) {
-          console.log('Ok to delete');
-          favoriteFactory.deleteFromFavorites(index);
-        } else {
-          console.log('Canceled delete');
-        }
-      });
-      $scope.shouldShowDelete = false;
-    };
+        confirmPopup.then(function (res) {
+          if (res) {
+            console.log('Ok to delete');
+            favoriteFactory.deleteFromFavorites(index);
+            $cordovaVibration.vibrate(100);
+          } else {
+            console.log('Canceled delete');
+          }
+        });
+        $scope.shouldShowDelete = false;
+      };
 
-  }])
+    }])
 
 ;
diff --git a/conFusion-Ionic/www/js/services.js b/conFusion-Ionic/www/js/services.js
@@ -43,7 +43,7 @@ angular.module('conFusion.services', ['ngResource'])
     };
 
     favFac.getFavorites = function () {
-      favorites = $localStorage.getObject('favorites');
+      favorites = $localStorage.getObject('favorites', '[]');
       return favorites;
     };
 

diff --git a/conFusion-Ionic/www/templates/register.html b/conFusion-Ionic/www/templates/register.html
@@ -19,6 +19,11 @@ <h1 class="title">Register</h1>
             Take Picture
           </button>
         </label>
+        <label class="item item-input">
+          <button class="button button-block button-balanced" type="button" ng-click="pickImage()">
+            Gallery
+          </button>
+        </label>
         <label class="item item-input">
           <span class="input-label">First Name</span>
           <input type="text" ng-model="registration.firstname">