|
|
@@ -0,0 +1,103 @@
|
|
|
+<%@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', ['basicFoodEditor', 'ui.bootstrap']);
|
|
|
+ app.controller('SearchController', ['$scope', '$timeout', '$uibModal', 'BasicFood',
|
|
|
+ function($scope, $timeout, $uibModal, BasicFood) {
|
|
|
+ $scope.searchTerm = "";
|
|
|
+ $scope.searchOffset = 1;
|
|
|
+ $scope.searchSize = "10";
|
|
|
+ $scope.searchResults = BasicFood.query();
|
|
|
+
|
|
|
+ var searchTimeout = false;
|
|
|
+ var searchFn = function() {
|
|
|
+ BasicFood.query({
|
|
|
+ "query": $scope.searchTerm
|
|
|
+ }, function(data) {
|
|
|
+ console.debug(data);
|
|
|
+ $scope.searchResults = data;
|
|
|
+ }, function (err) {
|
|
|
+ console.error(err);
|
|
|
+ });
|
|
|
+ };
|
|
|
+ $scope.$watchGroup(['searchTerm', 'searchOffset'], function(newValues, oldValues, scope) {
|
|
|
+ if (searchTimeout)
|
|
|
+ {
|
|
|
+ $timeout.cancel(searchTimeout);
|
|
|
+ }
|
|
|
+ if ($scope.searchTerm.length >= 3)
|
|
|
+ {
|
|
|
+ searchTimeout = $timeout(searchFn, 100);
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ $scope.promptWindow = function(id) {
|
|
|
+ var item = $scope.searchResults.find(function (canidate) {
|
|
|
+ return canidate.id == id;
|
|
|
+ });
|
|
|
+ $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 item;}
|
|
|
+ }
|
|
|
+ }).result.then(searchFn);
|
|
|
+ };
|
|
|
+ }]);
|
|
|
+ </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>
|
|
|
+ <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-6">Name</th>
|
|
|
+ <th class="col-md-3">Group</th>
|
|
|
+ <th class="col-md-3">Calories</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="Edit"
|
|
|
+ class="checkbox-inline"
|
|
|
+ data-ng-click="promptWindow(item.id)"></th>
|
|
|
+ <td>{{ ::item.name }}</td>
|
|
|
+ <td>{{ ::item.food_group }}</td>
|
|
|
+ <td>{{ ::item.calories_p_100 }}</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>
|