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/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', 'Food', 'ieat.ui.editors']);
      app.directive('myOnEnter', function () {
          return function (scope, element, attrs) {
              element.bind("keydown keypress", function (event) {
                  if(event.which === 13) {
                      scope.$apply(function (){
                          scope.$eval(attrs.myOnEnter);
                      });
                      event.preventDefault();
                  }
              });
          };
      });
      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);
            };

            $scope.addStep = function(step) {
                $scope.recipe.steps.push(step);
            };
            $scope.removeStep = function(index) {
                $scope.recipe.steps.splice(index, 1);
            };
            
            $scope.saveRecipe = function(index) {
                $scope.recipe.$save(function () {
                    window.location = "/ieat-2.0.0";
                }, 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>
      <label for="recipeName">Name:</label>
      <input id="recipeName" type="text" data-ng-model="recipe.name" />
      <input type="button" value="Add" class="checkbox-inline" data-ng-click="saveRecipe()" />
      <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}}
                {{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}}: </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>