Merge pull request #25 from qjd2413/service_hour_date

Service hour date

bower.json

@@ -16,6 +16,7 @@
   ],
   "dependencies": {
     "angular": "~1.3.15",
-    "angular-ui-router": "~0.2.13"
+    "angular-ui-router": "~0.2.13",
+    "angularjs-datepicker": "^2.1.6"
   }
 }

public/app/app.module.js

@@ -102,6 +102,7 @@
 
     angular.module('KDRPoints', [
         'ui.router',
+        '720kb.datepicker'
     ])
     .config(['$stateProvider', '$urlRouterProvider', KDRPoints]);
 })();

public/app/directives/dateInput.drctv.js

@@ -0,0 +1,61 @@
+(function() {
+  var months = [
+    { id: 1, name: 'January' }, { id: 2, name: 'February' }, 
+    { id: 3, name: 'March' }, { id: 4, name: 'April' },
+    { id: 5, name: 'May' }, { id: 6, name: 'June' },
+    { id: 7, name: 'July' }, { id: 8, name: 'August' },
+    { id: 9, name: 'September' }, { id: 10, name: 'October' },
+    { id: 11, name: 'November' }, { id: 12, name: 'December' }
+  ];
+
+  var monthToDays = function(month, year) {
+    if(month === 2) {
+      return (year % 4) ? 28 : 29;
+    } else if(month < 8) {
+      return 30 + month % 2;
+    } else {
+      return 30 + (month+1) % 2;
+    }
+  };
+
+  var verifyDate = function(date) {
+    date.min = parseInt(date.min);
+    var validHour = date.hour <= 12 && date.hour >= 1;
+    var validMin = date.min <=59 && date.min >= 0;
+    var validDay = date.day < monthToDays(date.month, date.year);
+    var currentDate = new Date();
+    return (currentDate >= revParseDate(date)) && validHour && validMin && validDay;
+  };
+
+  var revParseDate = function(date) {
+    return new Date(date.year, date.month-1, date.day, date.hour, date.min);
+  };
+
+  var dateInputDirective = function() {
+    return {
+      restrict: 'E',
+      replace: false,
+      scope: {
+        date: '=',
+        notify: '=',
+        changeFn: '&'
+      },
+      templateUrl: 'app/directives/templates/dateInput.html',
+      link: function(scope) {
+        scope.months = months;
+        scope.changeFunction = function() {
+          scope.notify = {};
+          if(!verifyDate(scope.date)) {
+            scope.notify.error = 'Invalid Date.';
+            return;
+          }
+          if(scope.changeFn) scope.notify.error = scope.changeFn();
+        };
+
+      }
+    }
+  };
+
+  angular.module('KDRPoints')
+    .directive('dateInput', dateInputDirective);
+})();

public/app/directives/templates/dateInput.html

@@ -0,0 +1,14 @@
+<div class="date-input">
+   <select ng-model="date.month" ng-options="s_month.id as s_month.name for s_month in months" ng-change="changeFunction()" >
+  </select>
+  <input type="number" ng-model="date.day" placeholder="Day" max="31" ng-change="changeFunction()" />
+  <input type="number" ng-model="date.year" placeholder="Year" max="2020" ng-change="changeFunction()" /><br />
+  <input type="text" ng-model="date.hour" maxlength="2" ng-change="changeFunction()" />
+  :
+  <input type="text" ng-model="date.min" maxlength="2" ng-change="changeFunction()" />
+  <select ng-model="date.cycle" ng-change="changeFunction()" >
+    <option value="AM">AM</option>
+    <option value="PM">PM</option>
+  </select>
+</div>
+

public/app/services/service.service.js

@@ -22,7 +22,65 @@
         });
     };
 
+    var toDateObj = function(date) {
+      var newDate = date.date + ' ' + date.hour + ':' + date.min + ' ' + date.cycle;
+      newDate = new Date(Date.parse(newDate));
+      return newDate.toString() !== 'Invalid Date' ? newDate : false;
+    };
+
+    var submitInProgress = false;
+
     return {
+      cleanHour: function(hour, type) {
+        var cleanHour = {};
+        cleanHour.description = hour.description;
+        if(!cleanHour.description) {
+          return 'Description is required.';
+        };
+        if(type === 'Hour') {
+          cleanHour.startTime = toDateObj(hour.start);
+          cleanHour.endTime = toDateObj(hour.end); 
+          if(!cleanHour.startTime || !cleanHour.endTime) {
+            return 'Invalid Date';
+          }
+        } else {
+          cleanHour.amount = hour.amount;
+          if(cleanHour.amount < 0) {
+            return 'Amount must be greater than zero.';
+          }
+        }
+        return cleanHour;
+      },
+      calculateHourEquivalent: function(amount) {
+        var amountToMinutes = amount / (5/60);
+        if(amountToMinutes < 0) {
+          return 'Amount must be greater than zero.';
+        }
+        duration = {
+          hours: Math.floor(amountToMinutes / 60),
+          minutes: amountToMinutes % 60
+        };
+        if(duration.minutes < 10) {
+          duration.minutes = '0' + duration.minutes;
+        }
+        return duration;
+      },
+      calculateDuration: function(startDate, endDate) {
+        startDate = toDateObj(startDate);
+        endDate = toDateObj(endDate);
+        var diffMinutes = (endDate - startDate) / 60000;
+        if(diffMinutes < 0) {
+          return 'Start date must be before end date.';
+        }
+        var duration = {
+          hours: Math.floor(diffMinutes / 60),
+          minutes: diffMinutes % 60
+        };
+        if(duration.minutes < 10) {
+          duration.minutes = '0' + duration.minutes;
+        }
+        return duration;
+      },
       submit: function(hour) {
         return postHttp('/service/submit', hour);
       },

public/app/submitService/submitService.ctrl.js

@@ -1,31 +1,91 @@
 
 (function() {
 
+  var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July',
+                'August', 'September', 'October', 'November', 'December'];
+  var hours = ['1','2','3','4','5','6','7','8','9','10','11','12'];
+  var minutes = ['00','15','30','45'];
+
+  var parseDate = function(date) {
+    var month = months[date.getMonth()];
+    var day = date.getDate();
+    var year = date.getFullYear();
+    var min = date.getMinutes();
+    min = minutes[Math.floor(min / 15)];
+    var hour = date.getHours();
+    return {
+      date: month + ' ' + day + ', ' + year,
+      hour: (hour % 12).toString(),
+      min: min,
+      cycle: hour / 12 < 1 ? 'AM' : 'PM'
+    }
+  };
+
   var submitServiceCtrl = function($scope, serviceService) {
     $scope.type = 'Hour';
-    $scope.hour = {};
+    $scope.notify = {};
+
+    $scope.hours = hours;
+    $scope.minutes = minutes;
 
+
+    var submitInProgress = false;
     $scope.submit = function() {
-      var cleanHour = {};
-      var hour = $scope.hour;
-      cleanHour.description = hour.description;
-      if($scope.type === 'Hour') {
-        cleanHour.startTime = hour.startTime;
-        cleanHour.endTime = hour.endTime;
-      } else {
-        cleanHour.amount = hour.amount;
+      if(submitInProgress) {
+        return;
+      }
+      submitInProgress = true; 
+      var cleanHour = serviceService.cleanHour($scope.hour, $scope.type);
+      if(typeof cleanHour === 'string') {
+        submitInProgress = false;
+        $scope.notify.error = cleanHour;
+        return;
       }
       serviceService.submit(cleanHour)
-        .then(function() {
-          $scope.hour = {};
-          $scope.success = true;
+        .then(function(success) {
+          submitInProgress = false;
+          if(success) {
+            resetData();
+          } else {
+            $scope.notify.error = 'Submission failed.';
+            $scope.notify.success = null;
+          }
         });
+
+    };
+
+    $scope.calculateDuration = function() {
+      var duration = serviceService.calculateDuration($scope.hour.start,
+                                                      $scope.hour.end);
+      if(typeof duration === 'string') {
+        $scope.notify.error = duration;
+        return;
+      }
+      $scope.hour.duration = duration;
     };
 
-    //remove success when new service hour is input
-    $scope.$watch('hour', function() {
-      $scope.success = false;
-    }, true);
+    $scope.calculateEquivalent = function() {
+      var duration = serviceService.calculateHourEquivalent($scope.hour.amount);
+      if(typeof duration === 'string') {
+        $scope.notify.error = duration;
+        return;
+      }
+      $scope.hour.equivalent = duration;
+    };
+
+    var resetData = function() {
+      $scope.hour = {};
+      var endDate = new Date();
+      var startDate = new Date(endDate.getTime() - 15 * 60000); 
+
+      $scope.hour.start = parseDate(startDate);
+      $scope.hour.end = parseDate(endDate);
+      $scope.hour.amount = 0;
+
+      $scope.calculateDuration(); 
+      $scope.calculateEquivalent();
+    };
+    resetData();
   }
 
   angular.module('KDRPoints')

public/app/submitService/submitService.html

@@ -1,23 +1,53 @@
 <div id="submit-service">
-  <select ng-model="type">
+  <select ng-model="type" ng-change="calculateDuration(); calculateEquivalent()" >
     <option>Hour</option>
     <option>Donation</option>
   </select>
   <br />
 
-  Description:
-  <input type="text" ng-model="hour.description" />
-
-  <div ng-show="type === 'Hour'">
-    Start Time: <input type="text" ng-model="hour.startTime" /><br />
-    End Time: <input type="text" ng-model="hour.endTime" /><br />
-  </div>
+  <form name="hourForm">
+    Description:
+    <input type="text" ng-model="hour.description" />
 
-  <div ng-show="type === 'Donation'">
-    Amount: <input type="text" ng-model="hour.amount" />
-  </div>
+    <div ng-show="type === 'Hour'">
+      Start:
+      <datepicker date-format="MMMM d, yyyy" date-typer="true" >
+        <input ng-model="hour.start.date" type="text" ng-change="calculateDuration()" />
+      </datepicker><br />
+      <select ng-model="hour.start.hour" ng-options="hr for hr in hours"></select>
+      :
+      <select ng-model="hour.start.min" ng-options="min for min in minutes"></select>
+      <select ng-model="hour.start.cycle" ng-change="changeFunction()" >
+        <option value="AM">AM</option>
+        <option value="PM">PM</option>
+      </select><br />
+
+      End:
+      <datepicker date-format="MMMM d, yyyy" date-typer="true" >
+        <input ng-model="hour.end.date" type="text" ng-change="calculateDuration()" />
+      </datepicker><br />
+      <select ng-model="hour.end.hour" ng-options="hr for hr in hours"></select>
+      :
+      <select ng-model="hour.end.min" ng-options="min for min in minutes"></select>
+      <select ng-model="hour.end.cycle" ng-change="changeFunction()" >
+        <option value="AM">AM</option>
+        <option value="PM">PM</option>
+      </select><br />
 
-  <button ng-click="submit()">Submit</button>
+      <div class="duration">
+        Duration: {{hour.duration.hours}}:{{hour.duration.minutes}}
+      </div>
+    </div>
 
-  <div ng-show="success">Hour successfully submitted.</div>
+    <div ng-show="type === 'Donation'">
+      Amount: $<input type="number" ng-model="hour.amount" ng-change="calculateEquivalent()" /><br />
+      Hour Equivalent: {{hour.equivalent.hours}}:{{hour.equivalent.minutes}}
+    </div>
+
+    <button ng-click="submit()">Submit</button>
+
+    <div ng-show="notify.success">{{type}} successfully submitted.</div>
+    <div ng-show="notify.error">{{notify.error}}</div>
+
+  </form>
 </div>