Added unit picking to recipe input.

Still need to properly convert between mass and volume.

web/WEB-INF/tags/template.tag

@@ -13,8 +13,9 @@
     <link type="text/css" href="static/bootstrap/css/bootstrap.min.css" type="text/css" rel="stylesheet"/>
     <script type="text/javascript" src="static/jquery/jquery.min.js"></script>
     <script type="text/javascript" src="static/bootstrap/js/bootstrap.min.js"></script>
-    <script type="text/javascript" src="static/angularjs/angular.min.js"></script>
-    <script type="text/javascript" src="static/angularjs/angular-resource.min.js"></script>
+    <!-- TODO: Use minified -->
+    <script type="text/javascript" src="static/angularjs/angular.js"></script>
+    <script type="text/javascript" src="static/angularjs/angular-resource.js"></script>
     <script type="text/javascript" src="static/angular-ui-bootstrap/ui-bootstrap.min.js"></script>
     <script type="text/javascript" src="static/angular-ui-bootstrap/ui-bootstrap-tpls.min.js"></script>
     <script type="text/javascript" src="static/Food.js"></script>

web/js/units.js

@@ -24,14 +24,16 @@
      * Methods:
      * get: Gets information for a unit by id
      * query: Get a list of all units
+     * queryType: Get a list of all units of a type
      * delete: Deletes a unit with an id
      * create: Creates a unit
      * update: Updates a unit
+     * normalize: Converts from the given unit amount to the primary unit
      * save: Creates a new unit or updates an existing unit
      */
         .factory('Unit', ['$resource', function($resource) {
-            return restResource($resource)("unit/:id", {id: "@id"}, {
-                "query": {
+            var res = restResource($resource)("unit/:id", {id: "@id"}, {
+                "queryType": {
                     method: 'GET',
                     isArray: true,
                     url: "unit/type/:type"
@@ -42,5 +44,9 @@
                     url: "unit/primary/:type"
                 }
             });
+            res.prototype.normalize = function(amount) {
+                return amount * this.conversion;
+            };
+            return res;
         }]);
 })();

web/views/addRecipe.jsp

@@ -5,8 +5,12 @@
   <jsp:attribute name="head">
     <script type="text/javascript" src="static/ndbDatabase.js"></script>
     <script type="text/javascript" src="static/basicFoodEditor.js"></script>
+    <script type="text/javascript" src="static/Food.js"></script>
+    <script type="text/javascript" src="static/units.js"></script>
+    <script type="text/javascript" src="static/searchBar.js"></script>
     <script type="text/javascript">
-      var app = angular.module('recipe', ['ui.bootstrap', 'ieat.ui.editors']);
+      var app = angular.module('recipe',
+                               ['ui.bootstrap', 'Food', 'ieat.ui.editors']);
       app.directive('myOnEnter', function () {
           return function (scope, element, attrs) {
               element.bind("keydown keypress", function (event) {
@@ -19,21 +23,53 @@
               });
           };
       });
-      app.controller('SearchController', ['$scope', 'Food', 'Recipe',
-         function($scope, Food, Recipe) {
-            $scope.recipe = new Recipe({
-                steps: [],
-                ingredients: []
-            });
-            $scope.queryFoods = function(q) {
-                return Food.query({query: q}).$promise;
-            };
-
-            $scope.addIngredient = function($item) {
-                $scope.recipe.ingredients.push({
-                    amount: parseFloat($scope.nextAmount),
-                    item: $item
-                });
+      app.controller('SearchController',
+                     ['$scope', '$uibModal', 'Food', 'Recipe', 'Unit',
+         function($scope, $uibModal, Food, Recipe, Unit) {
+             $scope.recipe = new Recipe({
+                 steps: [],
+                 ingredients: []
+             });
+             $scope.queryFoods = function(q) {
+                 return Food.query({query: q}).$promise;
+             };
+             var primeUnits = $scope.primeUnits = {};
+             var unitList = Unit.query(function(units) {
+                 units.forEach(function(u) {
+                     if (u.conversion == 1) {
+                         $scope.primeUnits[u.type] = u;
+                     }
+                 });
+             });
+             var newIngredientCtrl = [
+                 '$scope', '$uibModalInstance', 'food', 'units',
+                 function($scope, $uibModalInstance, food, units) {
+                     $scope.food = food.name;
+                     $scope.units = units;
+                     $scope.unit = primeUnits[food.unit_type];
+                     $scope.submit = $uibModalInstance.close;
+                     $scope.dismiss = $uibModalInstance.dismiss;
+                 }];
+             $scope.addIngredient = function($item) {
+                 $uibModal.open({
+                      // TODO: Figure out what these are and how they work
+                      //ariaLabelledBy: 'modal-title',
+                      //ariaDescribedBy: 'modal-body',
+                      templateUrl: "newIngredient",
+                      resolve: {
+                          food: function() {return $item;},
+                          units: function() {return unitList;}
+                      },
+                      controller: newIngredientCtrl,
+                      size: "md"
+                 }).result.then(function(amount) {
+                     $scope.recipe.ingredients.push({
+                         amount: parseFloat(amount),
+                         item: $item
+                     });
+                  }, function(reason) {
+                      console.debug(reason);
+                  });
             };
             $scope.removeIngredient = function(index) {
                 $scope.recipe.ingredients.splice(index, 1);
@@ -76,9 +112,11 @@
           <td style="width: 50%;" colspan="2">
             <ul>
               <li data-ng-repeat="ingredient in recipe.ingredients">
-                {{ingredient.amount}}{{ingredient.item.default_unit}}
-                {{ingredient.item.name}}
-                <span class="glyphicon glyphicon-remove" data-ng-click="removeIngredient($index);"></span>
+                {{::ingredient.amount}}
+                {{primeUnits[ingredient.item.unit_type].symbol}}
+                {{::ingredient.item.name}}
+                <span class="glyphicon glyphicon-remove"
+                      data-ng-click="removeIngredient($index);"></span>
               </li>
             </ul>
           </td>
@@ -91,12 +129,6 @@
                    data-ng-model="nextStep"
                    data-my-on-enter="addStep(nextStep); nextStep='';" />
           </td>
-          <td>
-            <input type="text"
-                   class="form-control"
-                   size="3"
-                   data-ng-model="nextAmount" />
-          </td>
           <td>
             <input type="text"
                    class="form-control"
@@ -115,5 +147,21 @@
           </td>
         </tr>
       </table>
+      <script type="text/ng-template" id="newIngredient">
+        <div style="width: 100%; text-align: center; padding: 0 1em 1em 0;">
+          <span style="font-weight: bold;">{{::food}}: </span>
+          <input type="number" min="0" required="required"
+                 data-ng-model="amount" />
+          <select required="required" data-ng-model="unit"
+                  data-ng-options="u.name for u in units">
+          </select>
+          <button type="button"
+                  class="btn btn-success"
+                  data-ng-click="submit(unit.normalize(amount));">Submit</button>
+          <button type="button" class="btn" data-ng-click="dismiss();">
+            Cancel
+          </button>
+        </div>
+      </script>
   </jsp:body>
 </t:template>

web/views/units.jsp

@@ -15,7 +15,7 @@
           '$scope', '$uibModal', 'Unit',
           function($scope, $uibModal, Unit) {
               var loadUnitList = function(type) {
-                  type.list = Unit.query({"type": type.name.toLowerCase()});
+                  type.list = Unit.queryType({"type": type.name.toLowerCase()});
               }
               
               var promptWindow = function(newUnit) {