iEat2/web/views/browseFood.jsp

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib prefix="t" tagdir="/WEB-INF/tags" %>
<t:template>
  <jsp:attribute name="title">Manage Food</jsp:attribute>
  <jsp:attribute name="head">
    <script type="text/javascript" src="static/ndbDatabase.js"></script>
    <script type="text/javascript" src="static/units.js"></script>
    <script type="text/javascript" src="static/basicFoodEditor.js"></script>
    <script type="text/javascript" src="static/searchBar.js"></script>
    <script type="text/javascript" src="static/paginatedTable.js"></script>
    <script type="text/javascript">
      var app = angular.module('ingredients', ['ui.bootstrap', 'Food', 'ieat.ui', 'ieat.ui.editors']);
      app.controller('SearchController', ['$scope', '$timeout', '$uibModal', 'Food', 'BasicFood', 'Recipe',
          function($scope, $timeout, $uibModal, Food, BasicFood, Recipe) {
              $scope.searchFn = function(searchTerm) {
                  if (searchTerm) {
                      this.searchTerm = searchTerm;
                  }
                  Food.query({
                      "query": this.searchTerm
                  }, function(data) {
                      $scope.searchResults = data;
                  }, function (err) {
                      // TODO: Actual error handling
                      console.error(err);
                  })
              };
              $scope.searchFn("");
              
              var modalCtrl = ['$scope', '$uibModalInstance', 'food', function($scope, $uibModalInstance, food) {
                  $scope.food = food;
                  $scope.submit = $uibModalInstance.close;
                  $scope.dismiss = $uibModalInstance.dismiss;
              }];
              var promptWindow = function(item) {
                  $uibModal.open({
                      // TODO: Figure out what these are and how they work
                      //ariaLabelledBy: 'modal-title',
                      //ariaDescribedBy: 'modal-body',
                      templateUrl: "modal",
                      resolve: {
                          food: function() {return item.cast();}
                      },
                      controller: modalCtrl,
                      size: "md"
                  }).result.then(function(food) {
                      food.$save(function() {
                          $scope.searchFn();
                      }, function(err) {
                          // TODO: Error handling
                          console.error(err);
                      });
                  }, function(reason) {
                      if (reason == "delete") {
                          item.$delete(function() {
                              $scope.searchFn();
                          }, function(err) {
                              // TODO: Error handling
                              console.error(err);
                          });
                      }
                      else {
                          console.debug("Dismissed");
                      }
                  });
              };
              
              $scope.table = [{
                  defaultValue: "Edit",
                  onClick: function(item) {
                      if (item.type == "BasicFood") {
                          promptWindow(item);
                      }
                      else {
                          window.location = "/ieat-2.0.0/addRecipe?id=" +
                              item.id;
                      }
                  },
                  size: 1
              }, {
                  name: "Name",
                  col: "name",
                  size: 6
              }, {
                  name: "Group",
                  col: "food_group"
              }, {
                  name: "Calories",
                  col: "calories_p_100"
              }
            ];
          }]);
    </script>
  </jsp:attribute>
  <jsp:body>
    <div class="section container" data-ng-app="ingredients" data-ng-controller="SearchController">
      <h2>Ingredients</h2>
      <div class="form-group">
        <label for="search">Search: </label>
        <search-bar id="search" data-on-change="searchFn(searchTerm);" data-delay="100" />
      </div>
      <paginated-table data-table-data="searchResults" data-structure="table">
      </paginated-table>

      <script type="text/ng-template" id="modal">
        <basic-food-editor data-ndb-key="${ndbKey}" data-food="food"></basic-food-editor>
        <div style="width: 100%; text-align: right; padding-right: 1em; padding-bottom: 1em;">
          <button type="button"
                  class="btn btn-success"
                  data-ng-click="submit(food);">Submit</button>
          <button type="button" class="btn" data-ng-click="dismiss();">Cancel</button>
          <button type="button"
                  class="btn btn-danger"
                  data-ng-click="dismiss('delete');">Delete</button>
        </div>
      </script>
    </div>
  </jsp:body>
</t:template>