|
|
@@ -0,0 +1,119 @@
|
|
|
+<%@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', ['basicFoodEditor', 'ui.bootstrap']);
|
|
|
+ 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>
|