Added documentation to angular components.

Also renamed food list to paginated table since there's no reason it
can only be used for food.

web/js/foodList.js

@@ -1,22 +0,0 @@
-(function() {
-    (function() {
-        try {return angular.module('ieat.ui')}
-        catch {return angular.module('ieat.ui', [])}}
-    )().component('foodList', {
-        templateUrl: 'static/templates/foodList.html',
-        bindings: {
-            tableData: '<',
-            structure: '<',
-            selectText: '<',
-            onSelect: '&'
-        },
-        controller: ['$scope', '$timeout', function($scope, $timeout) {
-            var self = this;
-            this.$onInit = function() {
-                self.selectText = self.selectText || "Add";
-                $scope.pageOffset = 0;
-                $scope.pageSize = "10";
-            };
-        }]
-    });
-})();

web/js/templates/foodList.html → web/js/paginatedTable.html

@@ -2,13 +2,13 @@
 <div>
   <table class="table table-striped table-hover table-responsive">
     <tr>
-      <th class="col-md-1"> </th>
+      <th class="col-md-1" data-ng-if="$ctrl.onSelect"> </th>
       <th data-ng-repeat="col in $ctrl.structure" class="col-md-{{::(col.size || 3)}}">
         {{::col.name}}
       </th>
     </tr>
     <tr data-ng-repeat="item in $ctrl.tableData | limitTo:pageSize:pageSize*(pageOffset-1)">
-      <td>
+      <td data-ng-if="$ctrl.onSelect">
         <input type="button"
                value="{{::$ctrl.selectText}}"
                data-ng-click="$ctrl.onSelect({item: item})"/>

web/js/paginatedTable.js

@@ -0,0 +1,38 @@
+/**
+ * Shows table data split into pages.
+ */
+(function() {
+    (function() {
+        try {return angular.module('ieat.ui')}
+        catch {return angular.module('ieat.ui', [])}}
+    )().component('paginatedTable', {
+        templateUrl: 'static/templates/paginatedTable.html',
+        bindings: {
+            /* Array of data to display in the table. */
+            tableData: '<',
+            /* 
+             * Array of columns to display
+             * Schema:
+             * name: Header for columns
+             * col: Property from table data objects to display
+             * size: Relative size in the table (default: 3)
+             */
+            structure: '<',
+            /* Text to display on select button. */
+            selectText: '<',
+            /* 
+             * Function to call when select button clicked.
+             * If not set, no button will appear.
+             */
+            onSelect: '&'
+        },
+        controller: ['$scope', '$timeout', function($scope, $timeout) {
+            var self = this;
+            this.$onInit = function() {
+                self.selectText = self.selectText || "Add";
+                $scope.pageOffset = 0;
+                $scope.pageSize = "10";
+            };
+        }]
+    });
+})();

web/js/searchBar.js

@@ -1,3 +1,6 @@
+/**
+ * A text field which calls a function whenever the input value changes.
+ */
 (function() {
     (function() {
         try {return angular.module('ieat.ui')}
@@ -5,9 +8,13 @@
     )().component('searchBar', {
         templateUrl: 'static/templates/searchBar.html',
         bindings: {
+            /* Sets default value to search */
             defaultValue: '@',
+            /* Minimum query length before search is called */
             minLength: '<',
+            /* Delay before search function is called */
             delay: '<',
+            /* Function to call when search value changes */
             onChange: '&'
         },
         controller: ['$scope', '$timeout', function($scope, $timeout) {

web/views/addFood.jsp

@@ -6,7 +6,7 @@
     <script type="text/javascript" src="static/ndbDatabase.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/foodList.js"></script>
+    <script type="text/javascript" src="static/paginatedTable.js"></script>
     <script type="text/javascript">
       var app = angular.module('ingredients', ['ndbDatabase', 'basicFoodEditor', 'ui.bootstrap', 'ieat.ui']);
       // TODO: Disable debug info in prod version
@@ -85,10 +85,10 @@
                     data-delay="100">
         </search-bar>
       </div>
-      <food-list data-table-data="searchResults"
-                 data-structure="table"
-                 data-on-select="promptWindow(item)">
-      </food-list>
+      <paginated-table data-table-data="searchResults"
+                       data-structure="table"
+                       data-on-select="promptWindow(item)">
+      </paginated-table>
     </div>
   </jsp:body>
 </t:template>

web/views/browseFood.jsp

@@ -6,7 +6,7 @@
     <script type="text/javascript" src="static/ndbDatabase.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/foodList.js"></script>
+    <script type="text/javascript" src="static/paginatedTable.js"></script>
     <script type="text/javascript">
       var app = angular.module('ingredients', ['basicFoodEditor', 'ui.bootstrap', 'ieat.ui']);
       app.controller('SearchController', ['$scope', '$timeout', '$uibModal', 'Food', 'BasicFood', 'Recipe',
@@ -63,11 +63,11 @@
         <label for="search">Search: </label>
         <search-bar id="search" data-on-change="searchFn(searchTerm);" data-delay="100" />
       </div>
-      <food-list data-table-data="searchResults"
-                 data-structure="table"
-                 data-select-text="Edit"
-                 data-on-select="promptWindow(item)">
-      </food-list>
+      <paginated-table data-table-data="searchResults"
+                       data-structure="table"
+                       data-select-text="Edit"
+                       data-on-select="promptWindow(item)">
+      </paginated-table>
     </div>
   </jsp:body>
 </t:template>