Skip to content

Instantly share code, notes, and snippets.

/index.html

Created October 11, 2014 21:35
Show Gist options
  • Save anonymous/6ed72aa07fe319c41c43 to your computer and use it in GitHub Desktop.
Save anonymous/6ed72aa07fe319c41c43 to your computer and use it in GitHub Desktop.
Download ZIP
Code-Camp-Start // source http://jsbin.com/jihuzu/8
Raw
index.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta name="description" content="Code-Camp-Start" />
<!-- Angular -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<!-- Firebase -->
<script src="https://cdn.firebase.com/js/client/1.0.15/firebase.js"></script>
<!-- AngularFire Library -->
<script src="https://cdn.firebase.com/libs/angularfire/0.7.1/angularfire.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<style id="jsbin-css">
body {
padding-top: 20px;
}
.party-form {
margin-bottom: 20px;
}
</style>
</head>
<body>
<div ng-controller="WaitListController">
<form ng-submit="saveParty()">
Name
<input ng-model="newParty.name" type="text">
Phone
<input ng-model="newParty.phone" type="text">
Size
<input ng-model="newParty.size" type="text">
<button type="submit">Add party</button>
</form>
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Done?</th>
<th>Info</th>
<th>Notified?</th>
<th>Actions</th>
</tr>
</thead>
<tr ng-repeat="party in parties">
<td><input type="checkbox" ng-model="party.done" ng-change="parties.$save(party.$id)"></td>
<td>
<div><strong>{{ party.name }} ({{ party.size }} people)</strong></div>
<div>{{ party.phone }}</div>
<div>
<!--TODO: Add date created.-->
</div>
</td>
<td>
<div>
<!--TODO: Add date created.-->
</div>
</td>
<td>
<button ng-click="sendTextMessage(party)" type="submit" class="btn btn-success">Send SMS</button>
<button ng-click="parties.$remove(party.$id)" type="submit" class="btn btn-danger">Remove</button>
</td>
</tr>
</table>
</div>
<script id="jsbin-javascript">
// Module
var app = angular.module('app', []);
app.controller('WaitListController', function($scope) {
$scope.newParty = {name: '', phone: '', size: ''};
$scope.parties = [];
$scope.saveParty = function() {
$scope.parties.push($scope.newParty);
$scope.newParty = {name: '', phone: '', size: ''};
};
});
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html ng-app="app">
<head>
<meta name="description" content="Code-Camp-Start" />
<\!-- Angular -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"><\/script>
<\!-- Firebase -->
<script src="https://cdn.firebase.com/js/client/1.0.15/firebase.js"><\/script>
<\!-- AngularFire Library -->
<script src="https://cdn.firebase.com/libs/angularfire/0.7.1/angularfire.min.js"><\/script>
<\!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<\!-- Optional theme -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<\!-- Latest compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"><\/script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"><\/script>
</head>
<body>
<div ng-controller="WaitListController">
<form ng-submit="saveParty()">
Name
<input ng-model="newParty.name" type="text">
Phone
<input ng-model="newParty.phone" type="text">
Size
<input ng-model="newParty.size" type="text">
<button type="submit">Add party</button>
</form>
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Done?</th>
<th>Info</th>
<th>Notified?</th>
<th>Actions</th>
</tr>
</thead>
<tr ng-repeat="party in parties">
<td><input type="checkbox" ng-model="party.done" ng-change="parties.$save(party.$id)"></td>
<td>
<div><strong>{{ party.name }} ({{ party.size }} people)</strong></div>
<div>{{ party.phone }}</div>
<div>
<\!--TODO: Add date created.-->
</div>
</td>
<td>
<div>
<\!--TODO: Add date created.-->
</div>
</td>
<td>
<button ng-click="sendTextMessage(party)" type="submit" class="btn btn-success">Send SMS</button>
<button ng-click="parties.$remove(party.$id)" type="submit" class="btn btn-danger">Remove</button>
</td>
</tr>
</table>
</div>
</body>
</html></script>
<script id="jsbin-source-css" type="text/css">body {
padding-top: 20px;
}
.party-form {
margin-bottom: 20px;
}
</script>
<script id="jsbin-source-javascript" type="text/javascript">// Module
var app = angular.module('app', []);
app.controller('WaitListController', function($scope) {
$scope.newParty = {name: '', phone: '', size: ''};
$scope.parties = [];
$scope.saveParty = function() {
$scope.parties.push($scope.newParty);
$scope.newParty = {name: '', phone: '', size: ''};
};
});</script></body>
</html>
Raw
jsbin.jihuzu.css
body {
padding-top: 20px;
}
.party-form {
margin-bottom: 20px;
}
Raw
jsbin.jihuzu.js
// Module
var app = angular.module('app', []);
app.controller('WaitListController', function($scope) {
$scope.newParty = {name: '', phone: '', size: ''};
$scope.parties = [];
$scope.saveParty = function() {
$scope.parties.push($scope.newParty);
$scope.newParty = {name: '', phone: '', size: ''};
};
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment