ryanlanciaux/Food.js

## Food.js
/*---------------------
  :: Food
  -> model
---------------------*/
module.exports = {
  attributes  : {
    name: 'STRING',
    type: 'STRING',
    expiration: 'DATE',
    quantity: 'STRING',
    percentRemaining: 'INTEGER'
  }
};

## index.ejs
<h1 id="header">
   Food Inventory
</h1>
<div id="content" ng-controller="FoodController">
    <table>
      <thead>
        <tr class="row">
          <th>Name</th>
          <th>Type</th>
          <th>Expiration</th>
          <th>Quantity</th>
          <th>Percent Remaining</th>
        </tr>
      </thead>
      <tbody>
        <tr class="row" ng-repeat="f in food">
            <td>{{f.name}}</td>
            <td>{{f.type}}</td>
            <td>{{f.expiration}}</td>
            <td>{{f.quantity}}</td>
            <td class="progress"><div class="bar" style="width: {{f.percentRemaining}}%"</td>
        </tr>
      </tbody>
    </table>

  <button ng-click="toggleForm()" ng-hide="isFormActive">Add One</button>
  <button ng-click="toggleForm()" ng-show="isFormActive">Hide Form</button>
  <form ng-show="isFormActive">
      <hr />
      <label for="name">Name:</label>
      <input name="name" ng-model="editableFood.name" />
      <br />

      <label for="type">Type:</label>
      <input name="type" ng-model="editableFood.type" />
      <br />

      <label for="expiration">Expiration</label>
      <input name="expiration" ng-model="editableFood.expiration" />
      <br />

      <label for="quantity">Quantity</label>
      <input name="quantity" ng-model="editableFood.quantity" />
      <br />

      <label for="percentRemaining">Percent Remaining</label>
      <input name="percentRemaining" ng-model="editableFood.percentRemaining" /><br />

        <div class="span4 text-right">
          <div class="row">
            <button ng-click="toggleForm()">Cancel</button>
            <button ng-click="addFood()">Add</button>
          </div>
        </div>
  </form>
</div>
<div id="footer">
    <a target="_blank" href="http://sailsjs.com" class="copyright">Built with Sails.js</a>
</div>

<style type="text/css">
  label { width: 150px; display:inline-block; text-align:right; }
  button { margin-right: 10px;}
  .text-right { text-align: right;}
</style>

<script type='text/javascript'>
    var foodApp = angular.module('foodApp', ['ngResource']);

    foodApp.factory('Food', ['$resource', function($resource){
        return $resource('/food/:id', {id:'@id'});
    }]);

    function FoodController($scope, Food){
      $scope.food = Food.query();

      $scope.isFormActive = false;

      $scope.toggleForm = function(){
        if ($scope.isFormActive){
            $scope.isFormActive = false;
            return;
        }

        $scope.isFormActive = true;
        $scope.editableFood = new Food();
      };

      $scope.addFood = function(){
            $scope.editableFood.$save();
            $scope.food.push($scope.editableFood);
            $scope.toggleForm();
      };
    };
</script>

## layout.ejs
<!DOCTYPE html>
<html ng-app="foodApp">
	<head>
		<title><%- title %></title>

		<!-- Viewport mobile tag for sensible mobile support -->
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

		<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">

		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
	  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
	  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular-resource.min.js"></script>

		<!-- JavaScript and stylesheets from your assets folder are included here -->
		<%- assets.css() %>
		<%- assets.js() %>
	</head>

	<body>
		<%- body %>

		<!-- Templates from your view path are included here -->
		<%- assets.templateLibrary() %>
	</body>
</html>
	/*---------------------
	:: Food
	-> model
	---------------------*/
	module.exports = {
	attributes : {
	name: 'STRING',
	type: 'STRING',
	expiration: 'DATE',
	quantity: 'STRING',
	percentRemaining: 'INTEGER'
	}
	};
	<h1 id="header">
	Food Inventory
	</h1>
	<div id="content" ng-controller="FoodController">
	<table>
	<thead>
	<tr class="row">
	<th>Name</th>
	<th>Type</th>
	<th>Expiration</th>
	<th>Quantity</th>
	<th>Percent Remaining</th>
	</tr>
	</thead>
	<tbody>
	<tr class="row" ng-repeat="f in food">
	<td>{{f.name}}</td>
	<td>{{f.type}}</td>
	<td>{{f.expiration}}</td>
	<td>{{f.quantity}}</td>
	<td class="progress"><div class="bar" style="width: {{f.percentRemaining}}%"</td>
	</tr>
	</tbody>
	</table>

	<button ng-click="toggleForm()" ng-hide="isFormActive">Add One</button>
	<button ng-click="toggleForm()" ng-show="isFormActive">Hide Form</button>
	<form ng-show="isFormActive">
	<hr />
	<label for="name">Name:</label>
	<input name="name" ng-model="editableFood.name" />
	<br />

	<label for="type">Type:</label>
	<input name="type" ng-model="editableFood.type" />
	<br />

	<label for="expiration">Expiration</label>
	<input name="expiration" ng-model="editableFood.expiration" />
	<br />

	<label for="quantity">Quantity</label>
	<input name="quantity" ng-model="editableFood.quantity" />
	<br />

	<label for="percentRemaining">Percent Remaining</label>
	<input name="percentRemaining" ng-model="editableFood.percentRemaining" /><br />

	<div class="span4 text-right">
	<div class="row">
	<button ng-click="toggleForm()">Cancel</button>
	<button ng-click="addFood()">Add</button>
	</div>
	</div>
	</form>
	</div>
	<div id="footer">
	<a target="_blank" href="http://sailsjs.com" class="copyright">Built with Sails.js</a>
	</div>

	<style type="text/css">
	label { width: 150px; display:inline-block; text-align:right; }
	button { margin-right: 10px;}
	.text-right { text-align: right;}
	</style>

	<script type='text/javascript'>
	var foodApp = angular.module('foodApp', ['ngResource']);

	foodApp.factory('Food', ['$resource', function($resource){
	return $resource('/food/:id', {id:'@id'});
	}]);

	function FoodController($scope, Food){
	$scope.food = Food.query();

	$scope.isFormActive = false;

	$scope.toggleForm = function(){
	if ($scope.isFormActive){
	$scope.isFormActive = false;
	return;
	}

	$scope.isFormActive = true;
	$scope.editableFood = new Food();
	};

	$scope.addFood = function(){
	$scope.editableFood.$save();
	$scope.food.push($scope.editableFood);
	$scope.toggleForm();
	};
	};
	</script>
	<!DOCTYPE html>
	<html ng-app="foodApp">
	<head>
	<title><%- title %></title>

	<!-- Viewport mobile tag for sensible mobile support -->
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

	<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular-resource.min.js"></script>

	<!-- JavaScript and stylesheets from your assets folder are included here -->
	<%- assets.css() %>
	<%- assets.js() %>
	</head>

	<body>
	<%- body %>

	<!-- Templates from your view path are included here -->
	<%- assets.templateLibrary() %>
	</body>
	</html>