Skip to content

Commit af06cce

Browse files
mheveryIgorMinar
mhevery
authored and
IgorMinar
committed
step-8 phone details view
- Fetch data for and render phone detail view - PhoneDetailCtrl controller to fetch details json with [$xhr] for a specific phone - template for the phone detailed view - CSS to make the phone details page look "pretty"
1 parent 06f7ba1 commit af06cce

File tree

5 files changed

+194
-6
lines changed

5 files changed

+194
-6
lines changed

‎app/css/app.css‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,3 +21,59 @@ body {
2121
height: 100px;
2222
padding-top: 15px;
2323
}
24+
25+
/** Detail View **/
26+
img.phone {
27+
float: left;
28+
border: 1px solid black;
29+
margin-right: 3em;
30+
margin-bottom: 2em;
31+
background-color: white;
32+
padding: 2em;
33+
height: 400px;
34+
width: 400px;
35+
}
36+
37+
ul.phone-thumbs {
38+
margin: 0;
39+
list-style: none;
40+
}
41+
42+
ul.phone-thumbs li {
43+
border: 1px solid black;
44+
display: inline-block;
45+
margin: 1em;
46+
background-color: white;
47+
}
48+
49+
ul.phone-thumbs img {
50+
height: 100px;
51+
width: 100px;
52+
padding: 1em;
53+
}
54+
55+
ul.specs {
56+
clear: both;
57+
margin: 0;
58+
padding: 0;
59+
list-style: none;
60+
}
61+
62+
ul.specs > li{
63+
display: inline-block;
64+
width: 200px;
65+
vertical-align: top;
66+
}
67+
68+
ul.specs > li > span{
69+
font-weight: bold;
70+
font-size: 1.2em;
71+
}
72+
73+
ul.specs dt {
74+
font-weight: bold;
75+
}
76+
77+
h1 {
78+
border-bottom: 1px solid gray;
79+
}

‎app/js/controllers.js‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,10 @@ function PhoneListCtrl($scope, $http) {
1313
//PhoneListCtrl.$inject = ['$scope', '$http'];
1414

1515

16-
function PhoneDetailCtrl($scope, $routeParams) {
17-
$scope.phoneId = $routeParams.phoneId;
16+
function PhoneDetailCtrl($scope, $routeParams, $http) {
17+
$http.get('phones/' + $routeParams.phoneId + '.json').success(function(data) {
18+
$scope.phone = data;
19+
});
1820
}
1921

20-
//PhoneDetailCtrl.$inject = ['$scope', '$routeParams'];
22+
//PhoneDetailCtrl.$inject = ['$scope', '$routeParams', '$http'];

‎app/partials/phone-detail.html‎

Lines changed: 113 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,113 @@
1-
TBD: detail view for {{phoneId}}
1+
<img ng-src="{{phone.images[0]}}" class="phone">
2+
3+
<h1>{{phone.name}}</h1>
4+
5+
<p>{{phone.description}}</p>
6+
7+
<ul class="phone-thumbs">
8+
<li ng-repeat="img in phone.images">
9+
<img ng-src="{{img}}">
10+
</li>
11+
</ul>
12+
13+
<ul class="specs">
14+
<li>
15+
<span>Availability and Networks</span>
16+
<dl>
17+
<dt>Availability</dt>
18+
<dd ng-repeat="availability in phone.availability">{{availability}}</dd>
19+
</dl>
20+
</li>
21+
<li>
22+
<span>Battery</span>
23+
<dl>
24+
<dt>Type</dt>
25+
<dd>{{phone.battery.type}}</dd>
26+
<dt>Talk Time</dt>
27+
<dd>{{phone.battery.talkTime}}</dd>
28+
<dt>Standby time (max)</dt>
29+
<dd>{{phone.battery.standbyTime}}</dd>
30+
</dl>
31+
</li>
32+
<li>
33+
<span>Storage and Memory</span>
34+
<dl>
35+
<dt>RAM</dt>
36+
<dd>{{phone.storage.ram}}</dd>
37+
<dt>Internal Storage</dt>
38+
<dd>{{phone.storage.flash}}</dd>
39+
</dl>
40+
</li>
41+
<li>
42+
<span>Connectivity</span>
43+
<dl>
44+
<dt>Network Support</dt>
45+
<dd>{{phone.connectivity.cell}}</dd>
46+
<dt>WiFi</dt>
47+
<dd>{{phone.connectivity.wifi}}</dd>
48+
<dt>Bluetooth</dt>
49+
<dd>{{phone.connectivity.bluetooth}}</dd>
50+
<dt>Infrared</dt>
51+
<dd>{{phone.connectivity.infrared}}</dd>
52+
<dt>GPS</dt>
53+
<dd>{{phone.connectivity.gps}}</dd>
54+
</dl>
55+
</li>
56+
<li>
57+
<span>Android</span>
58+
<dl>
59+
<dt>OS Version</dt>
60+
<dd>{{phone.android.os}}</dd>
61+
<dt>UI</dt>
62+
<dd>{{phone.android.ui}}</dd>
63+
</dl>
64+
</li>
65+
<li>
66+
<span>Size and Weigth</span>
67+
<dl>
68+
<dt>Dimensions</dt>
69+
<dd ng-repeat="dim in phone.sizeAndWeight.dimensions">{{dim}}</dd>
70+
<dt>Weight</dt>
71+
<dd>{{phone.sizeAndWeight.weight}}</dd>
72+
</dl>
73+
</li>
74+
<li>
75+
<span>Display</span>
76+
<dl>
77+
<dt>Screen size</dt>
78+
<dd>{{phone.display.screenSize}}</dd>
79+
<dt>Screen resolution</dt>
80+
<dd>{{phone.display.screenResolution}}</dd>
81+
<dt>Touch screen</dt>
82+
<dd>{{phone.display.touchScreen}}</dd>
83+
</dl>
84+
</li>
85+
<li>
86+
<span>Hardware</span>
87+
<dl>
88+
<dt>CPU</dt>
89+
<dd>{{phone.hardware.cpu}}</dd>
90+
<dt>USB</dt>
91+
<dd>{{phone.hardware.usb}}</dd>
92+
<dt>Audio / headphone jack</dt>
93+
<dd>{{phone.hardware.audioJack}}</dd>
94+
<dt>FM Radio</dt>
95+
<dd>{{phone.hardware.fmRadio}}</dd>
96+
<dt>Accelerometer</dt>
97+
<dd>{{phone.hardware.accelerometer}}</dd>
98+
</dl>
99+
</li>
100+
<li>
101+
<span>Camera</span>
102+
<dl>
103+
<dt>Primary</dt>
104+
<dd>{{phone.camera.primary}}</dd>
105+
<dt>Features</dt>
106+
<dd>{{phone.camera.features.join(', ')}}</dd>
107+
</dl>
108+
</li>
109+
<li>
110+
<span>Additional Features</span>
111+
<dd>{{phone.additionalFeatures}}</dd>
112+
</li>
113+
</ul>

‎test/e2e/scenarios.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -58,8 +58,8 @@ describe('PhoneCat App', function() {
5858
});
5959

6060

61-
it('should display placeholder page with phoneId', function() {
62-
expect(binding('phoneId')).toBe('nexus-s');
61+
it('should display nexus-s page', function() {
62+
expect(binding('phone.name')).toBe('Nexus S');
6363
});
6464
});
6565
});

‎test/unit/controllersSpec.js‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,5 +32,23 @@ describe('PhoneCat controllers', function() {
3232

3333

3434
describe('PhoneDetailCtrl', function(){
35+
var scope, $httpBackend, ctrl;
36+
37+
beforeEach(inject(function(_$httpBackend_, $rootScope, $routeParams, $controller) {
38+
$httpBackend = _$httpBackend_;
39+
$httpBackend.expectGET('phones/xyz.json').respond({name:'phone xyz'});
40+
41+
$routeParams.phoneId = 'xyz';
42+
scope = $rootScope.$new();
43+
ctrl = $controller(PhoneDetailCtrl, {$scope: scope});
44+
}));
45+
46+
47+
it('should fetch phone detail', function() {
48+
expect(scope.phone).toBeUndefined();
49+
$httpBackend.flush();
50+
51+
expect(scope.phone).toEqual({name:'phone xyz'});
52+
});
3553
});
3654
});

0 commit comments

Comments
 (0)