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">
      var app = angular.module('recipe', ['ui.bootstrap', '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', '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
                });
            };
            $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}}{{ingredient.item.default_unit}}
                {{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"
                   size="3"
                   data-ng-model="nextAmount" />
          </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>
  </jsp:body>
</t:template>