From 8564fb40c78507b4496a714f3aa5b93f7426292d Mon Sep 17 00:00:00 2001
From: Peter Bacon Darwin <pete@bacondarwin.com>
Date: Mon, 10 Nov 2014 09:27:44 +0000
Subject: [PATCH] step-8 phone details view

- Fetch data for and render phone detail view
  - PhoneDetailCtrl controller to fetch details json with [$http] for a specific
    phone
  - template for the phone detailed view
- CSS to make the phone details page look "pretty"
---
 app/css/app.css                |  56 ++++++++++++++++
 app/js/controllers.js          |   8 ++-
 app/partials/phone-detail.html | 114 ++++++++++++++++++++++++++++++++-
 test/e2e/scenarios.js          |   6 +-
 test/unit/controllersSpec.js   |  21 +++++-
 5 files changed, 197 insertions(+), 8 deletions(-)

diff --git a/app/css/app.css b/app/css/app.css
index 9e156c0d1..aff07e85a 100644
--- a/app/css/app.css
+++ b/app/css/app.css
@@ -21,3 +21,59 @@ body {
   height: 115px;
   padding-top: 15px;
 }
+
+/** Detail View **/
+img.phone {
+  float: left;
+  border: 1px solid black;
+  margin-right: 3em;
+  margin-bottom: 2em;
+  background-color: white;
+  padding: 2em;
+  height: 400px;
+  width: 400px;
+}
+
+ul.phone-thumbs {
+  margin: 0;
+  list-style: none;
+}
+
+ul.phone-thumbs li {
+  border: 1px solid black;
+  display: inline-block;
+  margin: 1em;
+  background-color: white;
+}
+
+ul.phone-thumbs img {
+  height: 100px;
+  width: 100px;
+  padding: 1em;
+}
+
+ul.specs {
+  clear: both;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+ul.specs > li{
+  display: inline-block;
+  width: 200px;
+  vertical-align: top;
+}
+
+ul.specs > li > span{
+  font-weight: bold;
+  font-size: 1.2em;
+}
+
+ul.specs dt {
+  font-weight: bold;
+}
+
+h1 {
+  border-bottom: 1px solid gray;
+}
diff --git a/app/js/controllers.js b/app/js/controllers.js
index 25b6ee972..2a51d20eb 100644
--- a/app/js/controllers.js
+++ b/app/js/controllers.js
@@ -13,7 +13,9 @@ phonecatControllers.controller('PhoneListCtrl', ['$scope', '$http',
     $scope.orderProp = 'age';
   }]);
 
-phonecatControllers.controller('PhoneDetailCtrl', ['$scope', '$routeParams',
-  function($scope, $routeParams) {
-    $scope.phoneId = $routeParams.phoneId;
+phonecatControllers.controller('PhoneDetailCtrl', ['$scope', '$routeParams', '$http',
+  function($scope, $routeParams, $http) {
+    $http.get('phones/' + $routeParams.phoneId + '.json').success(function(data) {
+      $scope.phone = data;
+    });
   }]);
diff --git a/app/partials/phone-detail.html b/app/partials/phone-detail.html
index 6656d6f43..900ffd84d 100644
--- a/app/partials/phone-detail.html
+++ b/app/partials/phone-detail.html
@@ -1 +1,113 @@
-TBD: detail view for <span>{{phoneId}}</span>
+<img ng-src="{{phone.images[0]}}" class="phone">
+
+<h1>{{phone.name}}</h1>
+
+<p>{{phone.description}}</p>
+
+<ul class="phone-thumbs">
+  <li ng-repeat="img in phone.images">
+    <img ng-src="{{img}}">
+  </li>
+</ul>
+
+<ul class="specs">
+  <li>
+    <span>Availability and Networks</span>
+    <dl>
+      <dt>Availability</dt>
+      <dd ng-repeat="availability in phone.availability">{{availability}}</dd>
+    </dl>
+  </li>
+  <li>
+    <span>Battery</span>
+    <dl>
+      <dt>Type</dt>
+      <dd>{{phone.battery.type}}</dd>
+      <dt>Talk Time</dt>
+      <dd>{{phone.battery.talkTime}}</dd>
+      <dt>Standby time (max)</dt>
+      <dd>{{phone.battery.standbyTime}}</dd>
+    </dl>
+  </li>
+  <li>
+    <span>Storage and Memory</span>
+    <dl>
+      <dt>RAM</dt>
+      <dd>{{phone.storage.ram}}</dd>
+      <dt>Internal Storage</dt>
+      <dd>{{phone.storage.flash}}</dd>
+    </dl>
+  </li>
+  <li>
+    <span>Connectivity</span>
+    <dl>
+      <dt>Network Support</dt>
+      <dd>{{phone.connectivity.cell}}</dd>
+      <dt>WiFi</dt>
+      <dd>{{phone.connectivity.wifi}}</dd>
+      <dt>Bluetooth</dt>
+      <dd>{{phone.connectivity.bluetooth}}</dd>
+      <dt>Infrared</dt>
+      <dd>{{phone.connectivity.infrared}}</dd>
+      <dt>GPS</dt>
+      <dd>{{phone.connectivity.gps}}</dd>
+    </dl>
+  </li>
+  <li>
+    <span>Android</span>
+    <dl>
+      <dt>OS Version</dt>
+      <dd>{{phone.android.os}}</dd>
+      <dt>UI</dt>
+      <dd>{{phone.android.ui}}</dd>
+    </dl>
+  </li>
+  <li>
+    <span>Size and Weight</span>
+    <dl>
+      <dt>Dimensions</dt>
+      <dd ng-repeat="dim in phone.sizeAndWeight.dimensions">{{dim}}</dd>
+      <dt>Weight</dt>
+      <dd>{{phone.sizeAndWeight.weight}}</dd>
+    </dl>
+  </li>
+  <li>
+    <span>Display</span>
+    <dl>
+      <dt>Screen size</dt>
+      <dd>{{phone.display.screenSize}}</dd>
+      <dt>Screen resolution</dt>
+      <dd>{{phone.display.screenResolution}}</dd>
+      <dt>Touch screen</dt>
+      <dd>{{phone.display.touchScreen}}</dd>
+    </dl>
+  </li>
+  <li>
+    <span>Hardware</span>
+    <dl>
+      <dt>CPU</dt>
+      <dd>{{phone.hardware.cpu}}</dd>
+      <dt>USB</dt>
+      <dd>{{phone.hardware.usb}}</dd>
+      <dt>Audio / headphone jack</dt>
+      <dd>{{phone.hardware.audioJack}}</dd>
+      <dt>FM Radio</dt>
+      <dd>{{phone.hardware.fmRadio}}</dd>
+      <dt>Accelerometer</dt>
+      <dd>{{phone.hardware.accelerometer}}</dd>
+    </dl>
+  </li>
+  <li>
+    <span>Camera</span>
+    <dl>
+      <dt>Primary</dt>
+      <dd>{{phone.camera.primary}}</dd>
+      <dt>Features</dt>
+      <dd>{{phone.camera.features.join(', ')}}</dd>
+    </dl>
+  </li>
+  <li>
+    <span>Additional Features</span>
+    <dd>{{phone.additionalFeatures}}</dd>
+  </li>
+</ul>
diff --git a/test/e2e/scenarios.js b/test/e2e/scenarios.js
index 61f4c3329..9dbe2734b 100644
--- a/test/e2e/scenarios.js
+++ b/test/e2e/scenarios.js
@@ -65,7 +65,7 @@ describe('PhoneCat App', function() {
     it('should render phone specific links', function() {
       var query = element(by.model('query'));
       query.sendKeys('nexus');
-      element(by.css('.phones li a')).click();
+      element.all(by.css('.phones li a')).first().click();
       browser.getLocationAbsUrl().then(function(url) {
         expect(url.split('#')[1]).toBe('/phones/nexus-s');
       });
@@ -80,8 +80,8 @@ describe('PhoneCat App', function() {
     });
 
 
-    it('should display placeholder page with phoneId', function() {
-      expect(element(by.binding('phoneId')).getText()).toBe('nexus-s');
+    it('should display nexus-s page', function() {
+      expect(element(by.binding('phone.name')).getText()).toBe('Nexus S');
     });
   });
 });
diff --git a/test/unit/controllersSpec.js b/test/unit/controllersSpec.js
index a755e4a6e..f91d821e5 100644
--- a/test/unit/controllersSpec.js
+++ b/test/unit/controllersSpec.js
@@ -3,10 +3,11 @@
 /* jasmine specs for controllers go here */
 describe('PhoneCat controllers', function() {
 
+  beforeEach(module('phonecatApp'));
+
   describe('PhoneListCtrl', function(){
     var scope, ctrl, $httpBackend;
 
-    beforeEach(module('phonecatApp'));
     beforeEach(inject(function(_$httpBackend_, $rootScope, $controller) {
       $httpBackend = _$httpBackend_;
       $httpBackend.expectGET('phones/phones.json').
@@ -33,5 +34,23 @@ describe('PhoneCat controllers', function() {
 
 
   describe('PhoneDetailCtrl', function(){
+    var scope, $httpBackend, ctrl;
+
+    beforeEach(inject(function(_$httpBackend_, $rootScope, $routeParams, $controller) {
+      $httpBackend = _$httpBackend_;
+      $httpBackend.expectGET('phones/xyz.json').respond({name:'phone xyz'});
+
+      $routeParams.phoneId = 'xyz';
+      scope = $rootScope.$new();
+      ctrl = $controller('PhoneDetailCtrl', {$scope: scope});
+    }));
+
+
+    it('should fetch phone detail', function() {
+      expect(scope.phone).toBeUndefined();
+      $httpBackend.flush();
+
+      expect(scope.phone).toEqual({name:'phone xyz'});
+    });
   });
 });