Skip to content

Commit

Permalink
convert the detail panel to a form
Browse files Browse the repository at this point in the history
  • Loading branch information
@praneethkumarpidugu
praneethkumarpidugu committed Jul 7, 2016
1 parent 13052a5 commit 842c9f0
Show file tree
Hide file tree
Showing 2 changed files with 70 additions and 18 deletions.
79 changes: 63 additions & 16 deletions section6/lesson1/index.html
View file
Expand Up @@ -5,6 +5,7 @@
<title >Contacts</title >
<link href="../libs/bootstrap/dist/css/bootstrap.min.css"
rel="stylesheet" >
<link href="../libs/ladda/dist/ladda-themeless.min.css" rel="stylesheet">
<link href="main.css"
rel="stylesheet" >
</head >
Expand Down Expand Up @@ -105,23 +106,66 @@
<div class="panel panel-default" >
<div class="panel-heading" >Details</div >
<div class="panel-body" >
<form class="form-horizontal"
ng-submit="save()"
novalidate>
<div class="form-group">
<label class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="name" ng-model="contacts.selectedPerson.name" required />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="email" ng-model="contacts.selectedPerson.email" required />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Photo</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="photo" ng-model="contacts.selectedPerson.photo" />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Sex</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="sex" ng-model="contacts.selectedPerson.sex" />
</div>
</div><div class="form-group">
<label class="col-sm-2 control-label">Birthday</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="bday" ng-model="contacts.selectedPerson.birthdate" bs-datepicker/>
</div>
</div><div class="form-group">
<label class="col-sm-2 control-label">Phone</label>
<div class="col-sm-10">
<input type="tel" class="form-control" name="phone" ng-model="contacts.selectedPerson.phonenumber" />
</div>
</div><div class="form-group">
<label class="col-sm-2 control-label">Address</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="address" ng-model="contacts.selectedPerson.address" />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">City</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="city" ng-model="contacts.selectedPerson.city" />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Country</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="country" ng-model="contacts.selectedPerson.country" />
</div>
</div>
<div class="buttons">
<button class="btn btn-primary btn-block" ladda="contacts.isSaving" type="submit"> Save </button>
</div>

</form>

<dl >
<dt >Name</dt >
<dd >{{contacts.selectedPerson.name}}</dd >
<dt >Email</dt >
<dd >{{contacts.selectedPerson.email}}</dd >
<dt >Birthday</dt >
<dd >{{contacts.selectedPerson.birthdate | date:"longDate"}}</dd >
<dt >Phonenumber</dt >
<dd >{{contacts.selectedPerson.phonenumber}}</dd >
<dt >Address</dt >
<dd >{{contacts.selectedPerson.address}}</dd >
<dt >City</dt >
<dd >{{contacts.selectedPerson.city}}</dd >
<dt >Country</dt >
<dd >{{contacts.selectedPerson.country}}</dd >
</dl >

</div >
</div >
Expand All @@ -135,6 +179,9 @@
<script src="../libs/ngInfiniteScroll/build/ng-infinite-scroll.min.js"></script>
<script src="../libs/spin.js/spin.js"></script>
<script src="../libs/angular-spinner/angular-spinner.min.js"></script>
<script src="../libs/angular-auto-validate/dist/jcs-auto-validate.min.js"></script>
<script src="../libs/ladda/dist/ladda.min.js"></script>
<script src="../libs/angular-ladda/dist/angular-ladda.min.js"></script>
<script src="main.js" ></script >
</body >
</html >
9 changes: 7 additions & 2 deletions section6/lesson1/main.js
View file
@@ -1,14 +1,19 @@
var app = angular.module('codecraft', [
'ngResource',
'infinite-scroll',
'angularSpinner'
'angularSpinner',
'jcs-autoValidate',
'angular-ladda'
]);

//we will add the factory $httpProvider
app.config(function ($httpProvider, $resourceProvider) {
app.config(function ($httpProvider, $resourceProvider, laddaProvider) {
$httpProvider.defaults.headers.common['Authorization'] = 'Token 7f482b5192e232141b0a10f0d36ee4443f14dc20';
//In the API we have, we normally have trailing slashes and to avoid we use below setting.
$resourceProvider.defaults.stripTrailingSlashes = false;
laddaProvider.setOption({
style: 'expand-right'
});
});
app.factory('Contact', function ($resource) {
return $resource("http://codecraftpro.com/api/samples/v1/contact/:id/");
Expand Down

0 comments on commit 842c9f0

Please sign in to comment.