iEat2/web/views/addFood.jsp

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib prefix="t" tagdir="/WEB-INF/tags" %>
<t:template>
  <jsp:attribute name="title">Add Food</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('ingredients', ['ndbDatabase', 'basicFoodEditor', 'ui.bootstrap']);
      app.controller('SearchController', ['$scope', '$timeout', '$uibModal', 'NDBSearch', 'NDBReport',
        function($scope, $timeout, $uibModal, NDBSearch, NDBReport) {
              $scope.searchTerm = "";
              $scope.searchOffset = 1;
              $scope.searchSize = "10";
              $scope.searchResults = [];
              
              var searchTimeout = false;
              $scope.$watchGroup(['searchTerm', 'searchOffset'], function(newValues, oldValues, scope) {
                  if (searchTimeout)
                  {
                      $timeout.cancel(searchTimeout);
                  }
                  if ($scope.searchTerm.length >= 3)
                  {
                      searchTimeout = $timeout(function() {//{ndb.api.key}
                          // TODO: Replace with properties file key.
                          NDBSearch.get({key: "CfiHcUnSf0RX0jBuqiWjDK2d2ziOmoZG15CTdhQn",
                                         "query": $scope.searchTerm
                                        }, function(data) {
                                            console.debug(data);
                                            $scope.searchResults = data;
                                        }, function (err) {
                                            console.error(err);
                                        });
                      }, 100);
                  }
              });
              
              var ndbToIeat = function(foodData) {
                  return {
                      ndbno: parseInt(foodData.ndbno),
                      name: foodData.name,
                      food_group: foodData.fg,
                      default_unit: foodData.ru,
                      calories_p_hundred: foodData.nutrients.find(function (nutrient) {
                          // TODO: Replace 208 with soft-loaded value from database
                          // 208 is the id for kCalories
                          return nutrient.nutrient_id == 208;
                      }).value   
                  }
              };
              
            $scope.promptWindow = function(ndbno) {// {ndb.api.key}
                var foodRequest = NDBReport.get(
                    {// TODO: Replace with properties file key.
                        "key": "CfiHcUnSf0RX0jBuqiWjDK2d2ziOmoZG15CTdhQn",
                        "ndbno": ndbno,
                        "type": "f"
                    }).$promise.then(function(data) {
                        return ndbToIeat(data)
                    }, function (err) {
                        // TODO: Proper error handling
                        console.error(err);
                    });
                $uibModal.open({
                    // TODO: Figure out what these are and how they work
                    //ariaLabelledBy: 'modal-title',
                    //ariaDescribedBy: 'modal-body',
                    templateUrl: 'static/templates/editBasicFood.html',
                    controller: 'BasicFoodEditorController',
                    size: "md",
                    resolve: {
                        foodData: function() {return foodRequest;}
                    }
                });
            };
          }]);
    </script>
  </jsp:attribute>
  <jsp:body>
    <div class="section container" data-ng-app="ingredients" data-ng-controller="SearchController">
      <h2>Ingredient Querier</h2>
      <div class="form-group">
        <label for="search">Search: </label>
        <input type="text" class="form-control input-sm" id="search" data-ng-model="searchTerm" />
      </div>
      <table class="table table-striped table-hover table-responsive">
        <tr>
          <th class="col-md-1"> </th>
          <th class="col-md-1">NDB #</th>
          <th class="col-md-6">Name</th>
          <th class="col-md-3">Group</th>
          <th class="col-md-3">Manufacturer</th>
        </tr>
        <tr data-ng-repeat="item in searchResults | limitTo:searchSize:searchSize*(searchOffset-1)"
            data-ng-click="item.checked = !item.checked">
          <th><input type="button"
                     value="Add"
                     class="checkbox-inline"
                     data-ng-click="promptWindow(item.ndbno)"></th>
          <td>{{ ::item.ndbno }}</td>
          <td>{{ ::item.name }}</td>
          <td>{{ ::item.group }}</td>
          <td>{{ ::item.manu }}</td>
        </tr>
      </table>
      <div class="form-group col-xs-5">
        <ul class="pagination-sm"
            style="margin: 0;"
            data-uib-pagination=""
            data-boundary-links="true"
            force-ellipses="true"
            data-total-items="searchResults.length"
            data-ng-model="searchOffset"
            data-items-per-page="searchSize"></ul>
      </div>
      <div class="form-group form-group-sm col-xs-2 pull-right">
        <select id="sizeSelector" class="form-control input-sm" data-ng-model="searchSize">
          <option>10</option>
          <option>20</option>
          <option>30</option>
          <option>40</option>
        </select>
      </div>
    </div>
  </jsp:body>
</t:template>