From 3ce2197457133e0aeddfbde215dd823acae30c98 Mon Sep 17 00:00:00 2001
From: Michael Hoppe <Michael.Hoppe@gbtec.de>
Date: Thu, 4 Feb 2016 16:19:04 +0100
Subject: [PATCH] feat(uploadImage): init member image upload

---
 app.js                                |  2 +-
 public/bower.json                     |  1 +
 public/index.html                     | 37 +++++++++++++------------
 public/scripts/app.js                 | 40 +++++++++++++++++++++++----
 public/scripts/views/detail.tmpl.html | 11 ++++++++
 public/upload.html                    |  2 +-
 6 files changed, 68 insertions(+), 25 deletions(-)

diff --git a/app.js b/app.js
index 80eacf1..22ee1c3 100644
--- a/app.js
+++ b/app.js
@@ -53,7 +53,7 @@ app.use('/', setUser);
 app.use('/', updateUser);
 app.use('/', deleteUser);
 app.use('/', searchRoute);
-app.post('/user/:id/avatar', upload.single('avatar'), setUsersPicture);
+app.post('/user/:id/avatar', upload.single('file'), setUsersPicture);
 
 // catch 404 and forward to error handler
 app.use(function (req, res, next) {
diff --git a/public/bower.json b/public/bower.json
index 8205fc9..4bfcc62 100644
--- a/public/bower.json
+++ b/public/bower.json
@@ -13,6 +13,7 @@
   "dependencies": {
     "angular": "~1.4.9",
     "angular-material": "~1.0.3",
+    "ng-file-upload": "~11.2.3",
     "tinycolor": "~1.3.0"
   }
 }
diff --git a/public/index.html b/public/index.html
index f397ddf..63109b4 100644
--- a/public/index.html
+++ b/public/index.html
@@ -4,32 +4,33 @@
     <meta charset="UTF-8">
     <title>Angular Spotlight Directive | Examples</title>
 
-    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" type="text/css" rel="stylesheet">
+    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" type="text/css"
+          rel="stylesheet">
     <link rel="stylesheet" href="bower_components/angular-material/angular-material.min.css">
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
     <link href="spotlight/css/darkTheme.min.css" type="text/css" rel="stylesheet" id="angular-theme">
     <link rel="stylesheet" href="css/main.css">
 
 
-
-
 </head>
-<body >
-<div id="toaster"></div>
-<crew-list></crew-list>
-<spotlight-overlay></spotlight-overlay>
+<body>
+    <div id="toaster"></div>
+    <crew-list></crew-list>
+    <spotlight-overlay></spotlight-overlay>
+
+    <!-- Required Dependencies -->
+    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
+    <script src="bower_components/angular/angular.min.js"></script>
+    <script src="bower_components/angular-animate/angular-animate.min.js"></script>
+    <script src="bower_components/angular-aria/angular-aria.min.js"></script>
+    <script src="bower_components/angular-material/angular-material.min.js"></script>
+    <script src="bower_components/tinycolor/dist/tinycolor-min.js"></script>
+    <script src="bower_components/ng-file-upload/ng-file-upload.min.js"></script>
 
-<!-- Required Dependencies -->
-<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
-<script src="bower_components/angular/angular.min.js"></script>
-<script src="bower_components/angular-animate/angular-animate.min.js"></script>
-<script src="bower_components/angular-aria/angular-aria.min.js"></script>
-<script src="bower_components/angular-material/angular-material.min.js"></script>
-<script src="bower_components/tinycolor/dist/tinycolor-min.js"></script>
-<!-- Angular Spotlight -->
-<script src="spotlight/js/angularSpotlight.min.js"></script>
-<!-- App.js -->
-<script src="scripts/app.js"></script>
+    <!-- Angular Spotlight -->
+    <script src="spotlight/js/angularSpotlight.min.js"></script>
+    <!-- App.js -->
+    <script src="scripts/app.js"></script>
 
 </body>
 </html>
\ No newline at end of file
diff --git a/public/scripts/app.js b/public/scripts/app.js
index 7c5e277..efaf965 100644
--- a/public/scripts/app.js
+++ b/public/scripts/app.js
@@ -2,11 +2,12 @@
 
     angular.module('staffbook', [
         'ngMaterial',
-        'de.devjs.angular.spotlight'
+        'de.devjs.angular.spotlight',
+        'ngFileUpload'
     ]);
 
     angular.module('staffbook')
-        .directive('crewList', ['$mdDialog', '$mdToast', '$document', 'MemberService', crewList])
+        .directive('crewList', ['$mdDialog', '$mdToast', '$document', 'MemberService', 'Upload',  crewList])
         .directive("colorMe", function () {
             return {
                 restrict: 'EA',
@@ -77,11 +78,35 @@
                     });
 
                 scope.showDetail = function (member, ev) {
-                    function DialogController($scope, $mdDialog) {
+
+                    function DialogController($scope, $mdDialog, Upload) {
                         $scope.member = member;
                         $scope.hide = function () {
-                            $mdDialog.hide();
+                            $mdDialog.hide($scope.member);
+                        };
+
+                        $scope.submit = function() {
+                            if ($scope.avatar) {
+                                $scope.upload($scope.avatar);
+                            }
                         };
+
+                        // upload on file select or drop
+                        $scope.upload = function (file) {
+                            Upload.upload({
+                                url: 'user/' + $scope.member._id + '/avatar',
+                                data: {file: file, 'name': 'avatar'}
+                            }).then(function (resp) {
+                                $scope.member = resp.data;
+                                console.log('Success ' + resp.config.data.file.name + 'uploaded. Response: ' + resp.data);
+                            }, function (resp) {
+                                console.log('Error status: ' + resp.status);
+                            }, function (evt) {
+                                var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
+                                console.log('progress: ' + progressPercentage + '% ' + evt.config.data.file.name);
+                            });
+                        }
+
                     }
 
                     $mdDialog.show({
@@ -90,7 +115,12 @@
                         parent: angular.element(document.body),
                         targetEvent: ev,
                         clickOutsideToClose: true
-                    });
+                    })
+                    .then(function(_member) {
+                            //FIXME: update user after edit
+                            scope.users.push(_member);
+                            member.avatar = _member.avatar;
+                        });
                 };
 
 
diff --git a/public/scripts/views/detail.tmpl.html b/public/scripts/views/detail.tmpl.html
index 9ac0571..beb4a5c 100644
--- a/public/scripts/views/detail.tmpl.html
+++ b/public/scripts/views/detail.tmpl.html
@@ -2,7 +2,18 @@
     <form>
         <md-dialog-content layout="row">
             <div flex="40" layout="column" layout-align="bottom center" style="margin-top: 36px;">
+                <div flex>
+                    <form name="form">
+                        <div class="button" ngf-select ng-model="avatar" name="avatar" ngf-pattern="'image/*'"
+                             ngf-accept="'image/*'" ngf-max-size="20MB" ngf-min-height="100">Select</div>
+                        <br>
+                        <!--<div ngf-drop ng-model="file" class="drop-box">Drop</div>-->
+                        <button type="submit" ng-click="submit()">submit</button>
+                    </form>
+                </div>
                 <img flex src="../../img/user-icon.svg" width="100">
+
+
                 <div flex layout="row"  layout-align="center end">
                     <h2>{{member.name}} {{member.surname}}</h2>
                 </div>
diff --git a/public/upload.html b/public/upload.html
index f2f373e..4ded70f 100644
--- a/public/upload.html
+++ b/public/upload.html
@@ -7,7 +7,7 @@
 <body>
 <form id        =  "uploadForm"
       enctype   =  "multipart/form-data"
-      action    =  "/user/56b215cec9ae434841afa92e/avatar"
+      action    =  "/user/56b215cec9ae434841afa92f/avatar"
       method    =  "post"
 >
     <input type="file" name="avatar" />