tflucke
/
Recipie-Book


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
							@*
 * This template is called from the `index` template. This template
 * handles the rendering of the page header and body tags. It takes
 * two arguments, a `String` for the title of the page and an `Html`
 * object to insert into the body of the page.
 *@
@()

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Ingredients</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" type="text/css" href="@routes.Assets.versioned("stylesheets/main.css")" />
    <link rel="stylesheet" type="text/css" href="@routes.Assets.versioned("lib/bootstrap/css/bootstrap.min.css")" />
    <link rel="shortcut icon" type="image/png" href="@routes.Assets.versioned("images/favicon.png")" />
    <script type="text/javascript" src="@routes.Assets.versioned("lib/angularjs/angular.min.js")"></script>
    <script type="text/javascript" src="@routes.Assets.versioned("lib/angularjs/angular-resource.min.js")"></script>
    <script type="text/javascript"
            src="@routes.Assets.versioned("lib/angular-ui-bootstrap/ui-bootstrap-tpls.min.js")"></script>
    <script type="text/javascript" src="@routes.Assets.versioned("javascripts/ndbDatabase.js")"></script>
    <script type="text/javascript">
      var app = angular.module('ingredients', ['ndbDatabase', 'ui.bootstrap']);
      app.controller('SearchController', ['$scope', '$timeout', 'NDBSearch', function($scope, $timeout, NDBSearch) {
          $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() {
                      NDBSearch.get({key: "CfiHcUnSf0RX0jBuqiWjDK2d2ziOmoZG15CTdhQn",
                                     "query": $scope.searchTerm
                                    }, function(data) {
                                        console.log(data);
                                        $scope.searchResults = data;
                                    }, function (err) {
                                        console.error(err);
                                    });
                  }, 100);
              }
          });
          
          $scope.focusItem = function(ndbno) {
              
          };
      }]);
    </script>
  </head>
  <body data-ng-app="ingredients">
    <div class="section container" 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="checkbox" class="checkbox-inline" data-ng-model="item.checked"></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-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>
  </body>
</html>