Skip to content

Commit

Permalink
App is now working with ability to view and add new contacts. Going t…
Browse files Browse the repository at this point in the history 
…o add Edit and Delete options next
  • Loading branch information
@phillipkregg
phillipkregg committed May 18, 2012
1 parent 89d416a commit f6c5048
Show file tree
Hide file tree
Showing 11 changed files with 220 additions and 83 deletions.
5 changes: 3 additions & 2 deletions app/assets/javascripts/app/app.js
View file
Expand Up @@ -2,10 +2,11 @@

'use strict';

angular.module('contactapp', []).
angular.module('contactapp', ['ngResource']).
config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/contacts', {template: 'assets/app/partials/contact-list.html', controller: ContactListCtrl}).
when('/contacts/:contactId', {template: 'assets/app/partials/contact-detail.html', controller: ContactDetailCtrl}).
when('/contacts/new', {template: 'assets/app/partials/new-contact.html', controller: ContactListCtrl}).
when('/contacts/:contact_id', {template: 'assets/app/partials/contact-detail.html', controller: ContactDetailCtrl}).
otherwise({redirectTo: '/contacts'});
}]);
59 changes: 48 additions & 11 deletions app/assets/javascripts/app/controllers/controllers.js
View file
Expand Up @@ -2,21 +2,58 @@

'use strict';

function ContactListCtrl($scope, $http) {
$http.get('/contacts').success(function(data) {
$scope.contacts = data;
});
function ContactListCtrl($scope, $http, Contacts) {

$scope.contacts = Contacts.index();


}
$("#test_btn").click(function() {
alert($scope.newFirstName);
});


$scope.addContact = function() {
var newContact = {
first_name: $scope.newFirstName,
last_name: $scope.newLastName,
salutation: $scope.newSalutation,
phone_num: $scope.newPhoneNum,
phone_num_type: $scope.newPhoneType,
address1: $scope.newAddress1,
address2: $scope.newAddress2,
email_address: $scope.newEmail,
city: $scope.newCity,
state: $scope.newState,
zip: $scope.newZipcode
};

var nc = new Contacts({ contact: newContact });

nc.$create(function() {
$scope.contacts.push(nc);
// now that the contact is saved, clear the form data
$scope.newFirstName = "";
$scope.newLastName = "";
$("#salutation option:first-child").attr("selected", "selected");
$("#phone_type option:first-child").attr("selected", "selected");
$scope.newAddress1 = "";
$scope.newAddress2 = "";
$scope.newPhoneNum = "";
$("#state option:first-child").attr("selected", "selected")
$scope.newCity = "";
$scope.newZipcode = "";
$scope.newZipcode = "";
$scope.newEmail = "";
})
}

};

ContactListCtrl.$inject = ['$scope', '$http'];
ContactListCtrl.$inject = ['$scope', '$http', 'Contacts'];

function ContactDetailCtrl($scope, $routeParams, $http) {
$http.get('/contacts/' + $routeParams.contactId).success(function(data) {
$scope.contact = data;
});

function ContactDetailCtrl($scope, $routeParams, Contacts) {
$scope.contact = Contacts.get( {contact_id: $routeParams.contact_id} );
}

ContactDetailCtrl.$inject = ['$scope', '$routeParams', '$http'];
ContactDetailCtrl.$inject = ['$scope', '$routeParams', 'Contacts'];
3 changes: 2 additions & 1 deletion app/assets/javascripts/app/partials/contact-detail.html
View file
@@ -1 +1,2 @@
TBD: detail view for {{ contact.first_name + " " + contact.last_name }}
TODO: detail view for {{ contact.first_name + " " + contact.last_name }}

18 changes: 10 additions & 8 deletions ...avascripts/app/partials/contact-list.html → ...cripts/app/partials/contact-list.html.erb
View file
@@ -1,6 +1,8 @@
<div class="container-fluid">

<div class="span10">
<a href="/#/contacts/new" class="btn btn-large btn-primary" >Add New Contact</a>

<!--Body content-->

<table id="contacts_table" class="table">
Expand Down Expand Up @@ -36,12 +38,12 @@

</tbody>

</table>




</table>

</div>
</div>
</div>
</div>



</div>


108 changes: 108 additions & 0 deletions app/assets/javascripts/app/partials/new-contact.html.erb
View file
@@ -0,0 +1,108 @@
<div>
<div>
<h3>Add New Contact</h3>
</div>
<form id="contact_form" ng-submit="addContact()">
<input type="text" id="new_contact_first_name" name="newContactFirstName" ng-model="newFirstName" placeholder="First Name"></br>
<input type="text" id="new_contact_last_name" name="newContactLastName" ng-model="newLastName" placeholder="Last Name"></br>
<select id="salutation" name="salutation" ng-model="newSalutation">
<option value="">Pick a Salutation</option>
<option value="mr">Mr</option>
<option value="ms">Ms</option>
<option value="ms">Miss</option>
<option value="mrs">Mrs</option>
<option value="dr">Dr</option>
<option value="space_cowboy">Space Cowboy</option>
<option value="gangster_of_love">Gangster of Love</option>
</select></br>
<input type="text" id="new_contact_phone" name="newContactPhone" ng-model="newPhoneNum" placeholder="Phone Number"></br>
<select id="phone_type" name="state" ng-model="newPhoneType">
<option value="">Pick your Phone Type</option>
<option value="home">Home</option>
<option value="mobile">Mobile</option>
<option value="work">Work</option>
</select></br>
<input type="text" id="new_contact_address1" name="newContactAddress1" ng-model="newAddress1" placeholder="Address 1"></br>
<input type="text" id="new_contact_address2" name="newContactAddress2" ng-model="newAddress2" placeholder="Address 2"></br>
<input type="text" id="new_contact_city" name="newContactCity" ng-model="newCity" placeholder="City"></br>
<select id="state" name="state" ng-model="newState">
<option value="">Pick your state</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select></br>
<input type="text" id="new_contact_zipcode" name="newContactZipcode" ng-model="newZipcode" placeholder="Zip Code"></br>
<input type="text" id="new_contact_email" name="newContactEmail" ng-model="newEmail" placeholder="Email Address"></br>
<input type="button" id="contact_submit_btn" value="Add Contact" class="btn btn-primary">
<input type="button" id="test_btn" value="What's the value"/>
</form>



</div>

<script type="text/javascript">
$(document).ready(function(){



//alert("loaded");
$("#contact_submit_btn").click(function(){
//alert("button clicked");
$("#contact_form").submit();
});



});


</script>
16 changes: 15 additions & 1 deletion app/assets/javascripts/app/services/services.js
View file
Expand Up @@ -5,4 +5,18 @@
// return $resource('/contacts', {}, {
// query: {method:'GET', isArray:true}
// });
// });
// });

var servicesModule = angular.module('contactapp');

servicesModule.factory('Contacts', function($resource) {

var ContactsService = $resource('/contacts/:contact_id', {}, {
'create' : { method: 'POST' },
'index' : { method: 'GET', isArray: true },
'show' : { method: 'GET' },
'update' : { method: 'PUT' },
'destroy' : {method: 'DELETE' }
});
return ContactsService;
});
3 changes: 2 additions & 1 deletion app/assets/javascripts/application.js
View file
Expand Up @@ -15,7 +15,8 @@
//= require bootstrap
//= require angular/angular.js
//= require app/app
//= require_tree ./app/controllers
//= require_tree ./app/services
//= require angular/angular-resource
//= require_tree ./app/controllers
//= require_tree ./app/partials

10 changes: 10 additions & 0 deletions app/assets/stylesheets/application.css.scss
View file
Expand Up @@ -13,3 +13,13 @@
*/

@import "bootstrap";


body {
padding-top: 60px;
padding-bottom: 40px;
}




56 changes: 0 additions & 56 deletions app/assets/stylesheets/scaffolds.css.scss
View file

This file was deleted.

3 changes: 3 additions & 0 deletions app/controllers/contacts_controller.rb
View file
@@ -1,6 +1,9 @@
class ContactsController < ApplicationController
# GET /contacts
# GET /contacts.json

skip_before_filter :verify_authenticity_token

def index
@contacts = Contact.all

Expand Down
22 changes: 19 additions & 3 deletions app/views/home/index.html.erb
View file
@@ -1,5 +1,21 @@
<h2>Contact Management</h2>
<p>Select a contact below</p>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Project name</a>
<div class="nav-collapse">
<ul class="nav">
<li class="active"><a href="/#/contacts">Contacts List</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>


<div ng-view></div>
<div ng-view></div>

0 comments on commit f6c5048

Please sign in to comment.