sbussard/estimator.css

## estimator.css
* {
	box-sizing: border-box;
}
body {
	font-family: sans-serif;
	margin: 0;
	padding: 0;
	background-color: #f0f0f0;
}
#logo {
	padding: 15px 50px;
	background-color: #00599c;
    color: #fff;
    font-size: 2em;
}
form {
	background-color: #fff;
	margin: 50px auto;
	width: 400px;
	font-family: sans-serif;
	font-size: 0.8em;
	line-height: 2.5em;
	box-shadow: 0 10px 20px #ddd;
}
select,
input {
	padding: 0;
	margin: 0;
	text-align: left;
	vertical-align: middle;
}
input[type="number"] {
	width: 55px;
}
input[type="text"],
select {
	width: 150px;
}
.item {
	width: 112px;
}
input[type="text"] {
	padding: .5em .6em;
	display: inline-block;
	border: 1px solid hsl(0, 0%, 80%);
	box-shadow: inset 0 1px 3px hsl(0, 0%, 87%);
	border-radius: 4px;
}
input[type="submit"] {
	display: block;
	margin: auto;
}
label {
	display: inline-block;
	text-align: left;
	width: 100px;
	padding: 0 25px;
}

## estimator.html
<!-- http://jsbin.com/UWasolE/1/edit -->
<html ng-app="estimate">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>Estimator</title>
		<meta name="description" content="">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" type="text/css" href="estimator.css">
		<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
		<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.min.js"></script>
		<script type="text/javascript" src="estimator.js"></script>
	</head>
	<body>
		<form ng-controller="EstimateController">
			<div id="logo">New Estimate</div>
			<br>

			<span ng-repeat="s in selectedItems track by $index">
				<label>Item</label>
				<select autofocus class="item" ng-options="i.name group by i.category for i in items | options: this:$index" ng-model="selectedItems[$index]" ng-change="selectItem($index)"></select>
				<input type="number" min="0" ng-model="selectedItems[$index]['quantity']" ng-change="updateQuantity($index)">
				x [[ selectedItems[$index]['amount'] ]] = [[ total[$index] ]]
				<br>
			</span>

			<label>Subtotal</label>
			[[ subtotal ]]

			<br><br>
		</form>
	</body>
</html>

## estimator.js
function p(m) { console.log(JSON.stringify(m)); }
function round(n) { return Math.round(100 * n) / 100;}

var app = angular.module('estimate', []);

// change the start/end symbols so that it can work with django
angular.module('estimate').config(function($interpolateProvider) {
	$interpolateProvider.startSymbol('[[');
	$interpolateProvider.endSymbol(']]');
});

function EstimateController($scope) {
	$scope.items = [];
	$scope.quantity = 0;
	$scope.selectedItems = [0];
	$scope.subtotal = 0;
	$scope.total = [];

	function calculate() {
		var subtotal = 0;
		var si = $scope.selectedItems;

		for(var i = 0; i < si.length; i++) {
			if(si[i] !== -1) {
				$scope.total[i] = si[i].amount * si[i].quantity;
				subtotal += $scope.total[i];
			}
		}

		$scope.subtotal = round(subtotal);
	}

	$scope.selectItem = function($index) {
		var $seli = $scope.selectedItems;
		var $item = $seli[$index];
		$item.quantity = 1;
		$scope.updateQuantity($index);
		if($index == $seli.length - 1 && $index != $scope.items.length - 1)
			$seli.push(-1);
	};

	$scope.updateQuantity = function($index) {
		if($scope.selectedItems[$index].quantity === 0)
			$scope.selectedItems.splice($index, 1);
		calculate();
	};

    /*
    sample rate sheet:
    https://docs.google.com/a/stephenbussard.com/spreadsheet/ccc?key=0AtHXkXMHcLK8dEtkcm0wUkVxeDV2aEdORVB6alNZTkE#gid=0
    */

    var key = '0AtHXkXMHcLK8dEtkcm0wUkVxeDV2aEdORVB6alNZTkE';
    var url = 'http://cors.io/spreadsheets.google.com/feeds/list/' + key + '/od6/public/values?alt=json';
	$.ajax({
      url: url,
		dataType: 'json',
		async: false,
		success: function(data) {
			for(var i = 0; i < data.feed.entry.length; i++) {
				var e = data.feed.entry[i];
				$scope.items.push({
					id: i,
					name: e.gsx$item.$t,
					amount: e.gsx$amount.$t,
					category: e.gsx$category.$t
				});
			}
		}
	});
}

/*
loop through the available items and remove the ones that have been selected
except the one that corrosponds to the one currently being selected
*/
app.filter('options', function() {
	return function(list, $scope, $index) {
		var result = [];
		var item;
		for(var i = 0; i < $scope.items.length; i++) {
			item = $scope.items[i];
			if($scope.selectedItems.indexOf(item) == -1 || $scope.selectedItems[$index] == item)
				result.push(item);
		}
		return result;
	};
});
	* {
	box-sizing: border-box;
	}
	body {
	font-family: sans-serif;
	margin: 0;
	padding: 0;
	background-color: #f0f0f0;
	}
	#logo {
	padding: 15px 50px;
	background-color: #00599c;
	color: #fff;
	font-size: 2em;
	}
	form {
	background-color: #fff;
	margin: 50px auto;
	width: 400px;
	font-family: sans-serif;
	font-size: 0.8em;
	line-height: 2.5em;
	box-shadow: 0 10px 20px #ddd;
	}
	select,
	input {
	padding: 0;
	margin: 0;
	text-align: left;
	vertical-align: middle;
	}
	input[type="number"] {
	width: 55px;
	}
	input[type="text"],
	select {
	width: 150px;
	}
	.item {
	width: 112px;
	}
	input[type="text"] {
	padding: .5em .6em;
	display: inline-block;
	border: 1px solid hsl(0, 0%, 80%);
	box-shadow: inset 0 1px 3px hsl(0, 0%, 87%);
	border-radius: 4px;
	}
	input[type="submit"] {
	display: block;
	margin: auto;
	}
	label {
	display: inline-block;
	text-align: left;
	width: 100px;
	padding: 0 25px;
	}
	<!-- http://jsbin.com/UWasolE/1/edit -->
	<html ng-app="estimate">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>Estimator</title>
	<meta name="description" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" type="text/css" href="estimator.css">
	<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
	<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.min.js"></script>
	<script type="text/javascript" src="estimator.js"></script>
	</head>
	<body>
	<form ng-controller="EstimateController">
	<div id="logo">New Estimate</div>
	<br>

	<span ng-repeat="s in selectedItems track by $index">
	<label>Item</label>
	<select autofocus class="item" ng-options="i.name group by i.category for i in items \| options: this:$index" ng-model="selectedItems[$index]" ng-change="selectItem($index)"></select>
	<input type="number" min="0" ng-model="selectedItems[$index]['quantity']" ng-change="updateQuantity($index)">
	x [[ selectedItems[$index]['amount'] ]] = [[ total[$index] ]]
	<br>
	</span>

	<label>Subtotal</label>
	[[ subtotal ]]

	<br><br>
	</form>
	</body>
	</html>
	function p(m) { console.log(JSON.stringify(m)); }
	function round(n) { return Math.round(100 * n) / 100;}

	var app = angular.module('estimate', []);

	// change the start/end symbols so that it can work with django
	angular.module('estimate').config(function($interpolateProvider) {
	$interpolateProvider.startSymbol('[[');
	$interpolateProvider.endSymbol(']]');
	});

	function EstimateController($scope) {
	$scope.items = [];
	$scope.quantity = 0;
	$scope.selectedItems = [0];
	$scope.subtotal = 0;
	$scope.total = [];

	function calculate() {
	var subtotal = 0;
	var si = $scope.selectedItems;

	for(var i = 0; i < si.length; i++) {
	if(si[i] !== -1) {
	$scope.total[i] = si[i].amount * si[i].quantity;
	subtotal += $scope.total[i];
	}
	}

	$scope.subtotal = round(subtotal);
	}

	$scope.selectItem = function($index) {
	var $seli = $scope.selectedItems;
	var $item = $seli[$index];
	$item.quantity = 1;
	$scope.updateQuantity($index);
	if($index == $seli.length - 1 && $index != $scope.items.length - 1)
	$seli.push(-1);
	};

	$scope.updateQuantity = function($index) {
	if($scope.selectedItems[$index].quantity === 0)
	$scope.selectedItems.splice($index, 1);
	calculate();
	};

	/*
	sample rate sheet:
	https://docs.google.com/a/stephenbussard.com/spreadsheet/ccc?key=0AtHXkXMHcLK8dEtkcm0wUkVxeDV2aEdORVB6alNZTkE#gid=0
	*/

	var key = '0AtHXkXMHcLK8dEtkcm0wUkVxeDV2aEdORVB6alNZTkE';
	var url = 'http://cors.io/spreadsheets.google.com/feeds/list/' + key + '/od6/public/values?alt=json';
	$.ajax({
	url: url,
	dataType: 'json',
	async: false,
	success: function(data) {
	for(var i = 0; i < data.feed.entry.length; i++) {
	var e = data.feed.entry[i];
	$scope.items.push({
	id: i,
	name: e.gsx$item.$t,
	amount: e.gsx$amount.$t,
	category: e.gsx$category.$t
	});
	}
	}
	});
	}

	/*
	loop through the available items and remove the ones that have been selected
	except the one that corrosponds to the one currently being selected
	*/
	app.filter('options', function() {
	return function(list, $scope, $index) {
	var result = [];
	var item;
	for(var i = 0; i < $scope.items.length; i++) {
	item = $scope.items[i];
	if($scope.selectedItems.indexOf(item) == -1 \|\| $scope.selectedItems[$index] == item)
	result.push(item);
	}
	return result;
	};
	});