iEat2/web/views/addRecipe.jsp

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib prefix="t" tagdir="/WEB-INF/tags" %>
<t:template>
  <jsp:attribute name="title">Add Recipe</jsp:attribute>
  <jsp:attribute name="head">
    <script type="text/javascript" src="static/ieat-ui.js"></script>
    <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" src="static/nutritionLabel.js"></script>
    <base href="/ieat-2.0.0/" />
    <script type="text/javascript">
      var app = angular.module('recipe',
                               ['ui.bootstrap', 'Food', 'ieat.ui', 'ndbDatabase',
                                'ieat.ui.editors'])
      .config(['$locationProvider', function($locationProvider) {
          $locationProvider.html5Mode(true);
      }]);
      app.controller('SearchController',
                     ['$scope', '$location', '$uibModal', '$q',
                      'Food', 'Recipe', 'Unit', 'NDBList',
                      function($scope, $location, $uibModal, $q,
                               Food, Recipe, Unit, NDBList) {
             var loadRecipe = function(id) {
                 return Recipe.get({"id": id}, function(r) {
                     r.ingredients = r.ingredients.map(function(pair) {
                         return {
                             amount: pair.amount,
                             item: Food.get({"id": pair.item})
                         };
                     });
                     $scope.amount = r.result_amount;
                 });
             };
             var id = $location.search()["id"];
             $scope.recipe = id? loadRecipe(id) : new Recipe({
                 steps: [],
                 ingredients: []
             });
             var ingredientSum = {calories: 0, grams: 0, nutrition: {}};
             var toGrams = function (amount, food) {
                 switch (food.unit_type) {
                 case "mass":
                     return amount;
                 case "volume":
                     return amount * food.density;
                 case "count":
                     throw "Not yet implemented!";
                     //return amount * food.mass_p_unit;
                 }
             };
             var updateNutritionInfo = function() {
                 var grams = 0, calories = 0, nutrition = {};
                 $scope.recipe.ingredients.forEach(function(i) {
                     grams += toGrams(i.amount, i.item);
                     calories += i.amount * i.item.calories_p_100;
                     for (var n in i.item.nutrients) {
                         nutrition[n] = i.amount * i.item.nutrients[n] +
                             (nutrition[n] || 0);
                     }
                 });
                 var rGrams = toGrams($scope.recipe.result_amount, $scope.recipe);
                 $scope.recipe.calories_p_100 = calories / rGrams;
                 $scope.recipe.nutrients = {};
                 for (var n in nutrition) {
                     $scope.recipe.nutrients[n] = nutrition[n] / rGrams;
                 }
             };
             $scope.updateResultAmount = function() {
                 $scope.recipe.result_amount =
                     $scope.unit.normalize($scope.recipe, $scope.amount);
                 updateNutritionInfo();
             };
             $scope.categories = NDBList.get({
                 key: "${ndbKey}",
                 type: "g"
             });
             $scope.queryFoods = function(q) {
                 return Food.query({query: q}).$promise;
             };
             var primeUnits = $scope.primeUnits = {};
             var unitList = Unit.query(function(units) {
                 $scope.unit = units.find(function(u) {
                     return u.symbol == "";
                 });
                 $scope.recipe.unit_type = $scope.recipe.unit_type
                     || $scope.unit.type;
                 $scope.unitList = units;
                 units.forEach(function(u) {
                     if (u.conversion == 1) {
                         $scope.primeUnits[u.type] = u;
                     }
                 });
             });
             $q.all([unitList.$promise, $scope.recipe.$promise]).then(function() {
                 $scope.unit = primeUnits[$scope.recipe.unit_type];
             });
             var newIngredientCtrl = [
                 '$scope', '$uibModalInstance', 'food', 'units',
                 function($scope, $uibModalInstance, food, units) {
                     $scope.food = food;
                     $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
                     });
                     updateNutritionInfo();
                  }, function(reason) {
                      console.debug(reason);
                  });
            };
            $scope.removeIngredient = function(index) {
                $scope.recipe.ingredients.splice(index, 1);
                updateNutritionInfo();
            };

            $scope.addStep = function(step) {
                $scope.recipe.steps.push(step);
                
            };
            $scope.removeStep = function(index) {
                $scope.recipe.steps.splice(index, 1);
            };
            
            $scope.saveRecipe = function() {
                var recipe = new Recipe($scope.recipe);
                recipe.ingredients = recipe.ingredients.map(function(pair) {
                    return {amount: pair.amount, item: pair.item.id};
                });
                recipe.$save(function () {
                    window.location = "/ieat-2.0.0";
                }, function (err) {
                    // TODO: Proper error handling
                    console.error(err);
                });
            };
            
            $scope.deleteRecipe = function() {
                $scope.recipe.$delete(function () {
                    window.location = "/ieat-2.0.0/browseFood";
                }, function (err) {
                    // TODO: Proper error handling
                    console.error(err);
                });
            };
          }]);
    </script>
  </jsp:attribute>
  <jsp:body>
    <div class="section container" data-ng-app="recipe"
         data-ng-controller="SearchController">
      <h2>Add Recipe</h2>
      <div>
        <label for="recipeName">Name:</label>
        <input id="recipeName" type="text" data-ng-model="recipe.name" />
      </div>
      <div style="float: right;">
        <nutrition-label food="recipe"></nutrition-label>
      </div>
      <div>
        <label for="amount">Creates:</label>
        <input id="amount" type="number" data-ng-model="amount"
               data-ng-change="updateResultAmount();" />
        <select data-ng-model="unit"
                data-ng-change="recipe.dry = unit.type != 'volume';
                                recipe.unit_type = unit.type;
                                updateResultAmount();"
                data-ng-options="u as u.symbol for u in unitList">
        </select>
      </div>
      <div>
        <label for="group">Food Group:</label>
        <select id="group" data-ng-model="recipe.food_group"
                data-ng-options="c.name.trim() as c.name.trim()
                                 for c in categories">
        </select>
      </div>
      <div class="checkbox">
        <label for="dry">
          <input id="dry" type="checkbox" data-ng-model="recipe.dry" />
          Dry
        </label>
      </div>
      <div>
        <label for="density">Density (g/ml):</label>
        <input id="density" type="number" data-ng-model="recipe.density" />
      </div>
      <input type="button" value="Add" class="btn"
             data-ng-click="saveRecipe()" />
      <input type="button" value="Delete" class="btn btn-danger"
             data-ng-show="recipe.id" data-ng-click="deleteRecipe()" />
      <table style="width: 100%;">
        <tr>
          <td style="width: 50%;">
            <ol>
              <li data-ng-repeat="step in recipe.steps track by $index">
                {{step}}
                <span class="glyphicon glyphicon-remove"
                      data-ng-click="removeStep($index);"></span>
              </li>
            </ol>
          </td>
          <td style="width: 50%;" colspan="2">
            <ul>
              <li data-ng-repeat="ingredient in recipe.ingredients">
                {{::ingredient.amount | number:0}}
                {{primeUnits[ingredient.item.unit_type].symbol}}
                {{::ingredient.item.name}}
                <span class="glyphicon glyphicon-remove"
                      data-ng-click="removeIngredient($index);"></span>
              </li>
            </ul>
          </td>
        </tr>
        <tr>
          <td>
            <input type="text"
                   style="width: 100%;"
                   placeholder="Next step..."
                   data-ng-model="nextStep"
                   data-my-on-enter="addStep(nextStep); nextStep='';" />
          </td>
          <td>
            <input type="text"
                   class="form-control"
                   placeholder="Next ingredient..."
                   data-ng-model="nextIngredient"
                   data-uib-typeahead="food.name for food in queryFoods($viewValue)"
                   data-typeahead-editable="false"
                   data-typeahead-min-length="3"
                   data-typeahead-on-select="addIngredient($item)"
                   data-typeahead-loading="loadingFoods"
                   data-typeahead-no-results="ingredientNotFound" />
            <i ng-show="loadingFoods" class="glyphicon glyphicon-refresh"></i>
            <div ng-show="ingredientNotFound">
              <i class="glyphicon glyphicon-remove"></i> No Results Found
            </div>
          </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.name}}: </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(food, amount));">
            Submit
          </button>
          <button type="button" class="btn" data-ng-click="dismiss();">
            Cancel
          </button>
        </div>
      </script>
  </jsp:body>
</t:template>