step-8 phone details view

204NoContent · Apr 15, 2014 · 6337327 · 6337327
1 parent 7742e71
commit 6337327
Show file tree

Hide file tree

Showing 15 changed files with 344 additions and 6 deletions.
diff --git a/public/javascripts/collections/photos_collection.js b/public/javascripts/collections/photos_collection.js
@@ -0,0 +1,3 @@
+PhotosCollection = Backbone.Collection.extend({
+    model: Photo
+});
diff --git a/public/javascripts/jst.js b/public/javascripts/jst.js
@@ -12,7 +12,7 @@ __p+='\n        <option value="'+
 ((__t=( option.text ))==null?'':_.escape(__t))+
 '</option>\n    ';
  }) 
-__p+='\n</select>\n';
+__p+='\n</select>';
 }
 return __p;
 };
@@ -43,9 +43,92 @@ return __p;
 window.JST["phones/show"] = function(obj){
 var __t,__p='',__j=Array.prototype.join,print=function(){__p+=__j.call(arguments,'');};
 with(obj||{}){
-__p+='TBD: detail view for '+
-((__t=( get('id') ))==null?'':_.escape(__t))+
-'\n';
+__p+='<div class=\'phone-images\'></div>\n<h1>'+
+((__t=( get('name') ))==null?'':_.escape(__t))+
+'</h1>\n<p>'+
+((__t=( get('description') ))==null?'':_.escape(__t))+
+'</p>\n<ul class=\'phone-thumbs\'></ul>\n<ul class=\'specs\'></ul>';
+}
+return __p;
+};
+window.JST["phones/show_image"] = function(obj){
+var __t,__p='',__j=Array.prototype.join,print=function(){__p+=__j.call(arguments,'');};
+with(obj||{}){
+__p+='<img src="'+
+((__t=( '/' + get('path') ))==null?'':_.escape(__t))+
+'" class=\'phone\'>';
+}
+return __p;
+};
+window.JST["phones/show_images_list_image"] = function(obj){
+var __t,__p='',__j=Array.prototype.join,print=function(){__p+=__j.call(arguments,'');};
+with(obj||{}){
+__p+='<img src="'+
+((__t=( '/' + get('path') ))==null?'':_.escape(__t))+
+'">';
+}
+return __p;
+};
+window.JST["phones/show_specs"] = function(obj){
+var __t,__p='',__j=Array.prototype.join,print=function(){__p+=__j.call(arguments,'');};
+with(obj||{}){
+__p+='<li>\n    <span>Availability and Networks</span>\n    <dl>\n        <dt>Availability</dt>\n        <dd>'+
+((__t=( get('availability') ))==null?'':_.escape(__t))+
+'</dd>\n    </dl>\n</li>\n\n<li>\n    <span>Battery</span>\n    <dl>\n        <dt>Type</dt>\n        <dd>'+
+((__t=( get('battery').type ))==null?'':_.escape(__t))+
+'</dd>\n        <dt>Talk Time</dt>\n        <dd>'+
+((__t=( get('battery').talkTime ))==null?'':_.escape(__t))+
+'</dd>\n        <dt>Standby time (max)</dt>\n        <dd>'+
+((__t=( get('battery').standbyTime ))==null?'':_.escape(__t))+
+'</dd>\n    </dl>\n</li>\n\n<li>\n    <span>Storage and Memory</span>\n    <dl>\n        <dt>RAM</dt>\n        <dd>'+
+((__t=( get('storage').ram ))==null?'':_.escape(__t))+
+'</dd>\n        <dt>Internal Storage</dt>\n        <dd>'+
+((__t=( get('storage').flash ))==null?'':_.escape(__t))+
+'</dd>\n    </dl>\n</li>\n\n<li>\n    <span>Connectivity</span>\n    <dl>\n        <dt>Network Support</dt>\n        <dd>'+
+((__t=( get('connectivity').cell ))==null?'':_.escape(__t))+
+'</dd>\n        <dt>WiFi</dt>\n        <dd>'+
+((__t=( get('connectivity').wifi ))==null?'':_.escape(__t))+
+'</dd>\n        <dt>Bluetooth</dt>\n        <dd>'+
+((__t=( get('connectivity').bluetooth ))==null?'':_.escape(__t))+
+'</dd>\n        <dt>Infrared</dt>\n        <dd>'+
+((__t=( get('connectivity').infrared ))==null?'':_.escape(__t))+
+'</dd>\n        <dt>GPS</dt>\n        <dd>'+
+((__t=( get('connectivity').gps ))==null?'':_.escape(__t))+
+'</dd>\n    </dl>\n</li>\n\n<li>\n    <span>Android</span>\n    <dl>\n        <dt>OS Version</dt>\n        <dd>'+
+((__t=( get('android').os ))==null?'':_.escape(__t))+
+'</dd>\n        <dt>UI</dt>\n        <dd>'+
+((__t=( get('android').ui ))==null?'':_.escape(__t))+
+'</dd>\n    </dl>\n</li>\n\n<li>\n    <span>Size and Weight</span>\n    <dl>\n        <dt>Dimensions</dt>\n        ';
+ _.each(get('sizeAndWeight').dimensions, function(dimension) { 
+__p+='\n            <dd>'+
+((__t=( dimension ))==null?'':_.escape(__t))+
+'</dd>\n        ';
+ }) 
+__p+='\n        <dt>Weight</dt>\n        <dd>'+
+((__t=( get('sizeAndWeight').weight ))==null?'':_.escape(__t))+
+'</dd>\n    </dl>\n</li>\n\n<li>\n    <span>Display</span>\n    <dl>\n        <dt>Screen size</dt>\n        <dd>'+
+((__t=( get('display').screenSize ))==null?'':_.escape(__t))+
+'</dd>\n        <dt>Screen resolution</dt>\n        <dd>'+
+((__t=( get('display').screenResolution ))==null?'':_.escape(__t))+
+'</dd>\n        <dt>Touch screen</dt>\n        <dd>'+
+((__t=( get('display').touchScreen ))==null?'':_.escape(__t))+
+'</dd>\n    </dl>\n</li>\n\n<li>\n    <span>Hardware</span>\n    <dl>\n        <dt>CPU</dt>\n        <dd>'+
+((__t=( get('hardware').cpu ))==null?'':_.escape(__t))+
+'</dd>\n        <dt>USB</dt>\n        <dd>'+
+((__t=( get('hardware').usb ))==null?'':_.escape(__t))+
+'</dd>\n        <dt>Audio / headphone jack</dt>\n        <dd>'+
+((__t=( get('hardware').audioJack ))==null?'':_.escape(__t))+
+'</dd>\n        <dt>FM Radio</dt>\n        <dd>'+
+((__t=( get('hardware').fmRadio ))==null?'':_.escape(__t))+
+'</dd>\n        <dt>Accelerometer</dt>\n        <dd>'+
+((__t=( get('hardware').accelerometer ))==null?'':_.escape(__t))+
+'</dd>\n    </dl>\n</li>\n\n<li>\n    <span>Camera</span>\n    <dl>\n        <dt>Primary</dt>\n        <dd>'+
+((__t=( get('camera').primary ))==null?'':_.escape(__t))+
+'</dd>\n        <dt>Features</dt>\n        <dd>'+
+((__t=( get('camera').features.join(', ') ))==null?'':_.escape(__t))+
+'</dd>\n    </dl>\n</li>\n\n<li>\n    <span>Additional Features</span>\n    <dd>'+
+((__t=( get('additionalFeatures') ))==null?'':_.escape(__t))+
+'</dd>\n</li>\n\n<li></li>';
 }
 return __p;
 };
diff --git a/public/javascripts/models/phone.js b/public/javascripts/models/phone.js
@@ -1,3 +1,11 @@
 Phone = Backbone.Model.extend({
-    urlRoot: '/api/phones'
+    urlRoot: '/api/phones',
+
+    parse: function (res) {
+        if (res.images) {
+            this.photosCollection = new PhotosCollection(_.map(res.images, function (image_path) { return { path: image_path }; }));
+            this.set('mainImage', this.photosCollection.models[0]);
+        }
+        return res;
+    }
 });
diff --git a/public/javascripts/models/photo.js b/public/javascripts/models/photo.js
@@ -0,0 +1 @@
+Photo = Backbone.Model;
diff --git a/public/javascripts/templates/phones/show.jst b/public/javascripts/templates/phones/show.jst
@@ -1 +1,5 @@
-TBD: detail view for [[= get('id') ]]
+<div class='phone-images'></div>
+<h1>[[= get('name') ]]</h1>
+<p>[[= get('description') ]]</p>
+<ul class='phone-thumbs'></ul>
+<ul class='specs'></ul>
diff --git a/public/javascripts/templates/phones/show_image.jst b/public/javascripts/templates/phones/show_image.jst
@@ -0,0 +1 @@
+<img src="[[= '/' + get('path') ]]" class='phone'>
diff --git a/public/javascripts/templates/phones/show_images_list_image.jst b/public/javascripts/templates/phones/show_images_list_image.jst
@@ -0,0 +1 @@
+<img src="[[= '/' + get('path') ]]">
diff --git a/public/javascripts/templates/phones/show_specs.jst b/public/javascripts/templates/phones/show_specs.jst
@@ -0,0 +1,112 @@
+<li>
+    <span>Availability and Networks</span>
+    <dl>
+        <dt>Availability</dt>
+        <dd>[[= get('availability') ]]</dd>
+    </dl>
+</li>
+
+<li>
+    <span>Battery</span>
+    <dl>
+        <dt>Type</dt>
+        <dd>[[= get('battery').type ]]</dd>
+        <dt>Talk Time</dt>
+        <dd>[[= get('battery').talkTime ]]</dd>
+        <dt>Standby time (max)</dt>
+        <dd>[[= get('battery').standbyTime ]]</dd>
+    </dl>
+</li>
+
+<li>
+    <span>Storage and Memory</span>
+    <dl>
+        <dt>RAM</dt>
+        <dd>[[= get('storage').ram ]]</dd>
+        <dt>Internal Storage</dt>
+        <dd>[[= get('storage').flash ]]</dd>
+    </dl>
+</li>
+
+<li>
+    <span>Connectivity</span>
+    <dl>
+        <dt>Network Support</dt>
+        <dd>[[= get('connectivity').cell ]]</dd>
+        <dt>WiFi</dt>
+        <dd>[[= get('connectivity').wifi ]]</dd>
+        <dt>Bluetooth</dt>
+        <dd>[[= get('connectivity').bluetooth ]]</dd>
+        <dt>Infrared</dt>
+        <dd>[[= get('connectivity').infrared ]]</dd>
+        <dt>GPS</dt>
+        <dd>[[= get('connectivity').gps ]]</dd>
+    </dl>
+</li>
+
+<li>
+    <span>Android</span>
+    <dl>
+        <dt>OS Version</dt>
+        <dd>[[= get('android').os ]]</dd>
+        <dt>UI</dt>
+        <dd>[[= get('android').ui ]]</dd>
+    </dl>
+</li>
+
+<li>
+    <span>Size and Weight</span>
+    <dl>
+        <dt>Dimensions</dt>
+        [[ _.each(get('sizeAndWeight').dimensions, function(dimension) { ]]
+            <dd>[[= dimension ]]</dd>
+        [[ }) ]]
+        <dt>Weight</dt>
+        <dd>[[= get('sizeAndWeight').weight ]]</dd>
+    </dl>
+</li>
+
+<li>
+    <span>Display</span>
+    <dl>
+        <dt>Screen size</dt>
+        <dd>[[= get('display').screenSize ]]</dd>
+        <dt>Screen resolution</dt>
+        <dd>[[= get('display').screenResolution ]]</dd>
+        <dt>Touch screen</dt>
+        <dd>[[= get('display').touchScreen ]]</dd>
+    </dl>
+</li>
+
+<li>
+    <span>Hardware</span>
+    <dl>
+        <dt>CPU</dt>
+        <dd>[[= get('hardware').cpu ]]</dd>
+        <dt>USB</dt>
+        <dd>[[= get('hardware').usb ]]</dd>
+        <dt>Audio / headphone jack</dt>
+        <dd>[[= get('hardware').audioJack ]]</dd>
+        <dt>FM Radio</dt>
+        <dd>[[= get('hardware').fmRadio ]]</dd>
+        <dt>Accelerometer</dt>
+        <dd>[[= get('hardware').accelerometer ]]</dd>
+    </dl>
+</li>
+
+<li>
+    <span>Camera</span>
+    <dl>
+        <dt>Primary</dt>
+        <dd>[[= get('camera').primary ]]</dd>
+        <dt>Features</dt>
+        <dd>[[= get('camera').features.join(', ') ]]</dd>
+    </dl>
+</li>
+
+<li>
+    <span>Additional Features</span>
+    <dd>[[= get('additionalFeatures') ]]</dd>
+</li>
+
+<li></li>
diff --git a/public/javascripts/views/phones/show_image_view.js b/public/javascripts/views/phones/show_image_view.js
@@ -0,0 +1,10 @@
+PhonesShowImageView = Backbone.View.extend({
+
+    initialize: function () {
+        this.render();
+    },
+
+    render: function () {
+        this.$el.html(JST['phones/show_image'](this.model.get('mainImage')));
+    }
+});
diff --git a/public/javascripts/views/phones/show_images_list_image_view.js b/public/javascripts/views/phones/show_images_list_image_view.js
@@ -0,0 +1,10 @@
+PhonesShowImagesListImageView = Backbone.View.extend({
+
+    initialize: function () {
+        this.render();
+    },
+
+    render: function () {
+        this.$el.html(JST['phones/show_images_list_image'](this.model));
+    }
+});
diff --git a/public/javascripts/views/phones/show_images_list_view.js b/public/javascripts/views/phones/show_images_list_view.js
@@ -0,0 +1,18 @@
+PhonesShowImagesListView = Backbone.View.extend({
+
+    initialize: function () {
+        this.render();
+    },
+
+    render: function () {
+        this.$el.html('');
+        this.model.photosCollection.each(this.renderImage, this);
+    },
+
+    renderImage: function (photo) {
+        this.$el.append(new PhonesShowImagesListImageView({
+            tagName: 'li',
+            model: photo
+        }).el);
+    }
+});
diff --git a/public/javascripts/views/phones/show_specs_view.js b/public/javascripts/views/phones/show_specs_view.js
@@ -0,0 +1,10 @@
+PhonesShowSpecsView = Backbone.View.extend({
+
+    initialize: function () {
+        this.render();
+    },
+
+    render: function () {
+        this.$el.html(JST['phones/show_specs'](this.model));
+    }
+});
diff --git a/public/javascripts/views/phones/show_view.js b/public/javascripts/views/phones/show_view.js
@@ -8,5 +8,20 @@ PhonesShowView = Backbone.View.extend({
 
     render: function () {
         this.$el.html(JST['phones/show'](this.model));
+
+        new PhonesShowImageView({
+            el: this.$('.phone-images'),
+            model: this.model
+        });
+
+        new PhonesShowImagesListView({
+            el: this.$('ul.phone-thumbs'),
+            model: this.model
+        });
+
+        new PhonesShowSpecsView({
+            el: this.$('ul.specs'),
+            model: this.model
+        });
     }
 });
diff --git a/public/stylesheets/app.css b/public/stylesheets/app.css
@@ -21,3 +21,59 @@ body {
   height: 100px;
   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/views/index.ejs b/views/index.ejs
@@ -13,11 +13,17 @@
         <script src="/javascripts/jst.js"></script>
 
         <script src="/javascripts/models/phone.js"></script>
+        <script src="/javascripts/models/photo.js"></script>
         <script src="/javascripts/models/filter.js"></script>
 
         <script src="/javascripts/collections/phones_collection.js"></script>
+        <script src="/javascripts/collections/photos_collection.js"></script>
 
         <script src="/javascripts/views/phones/show_view.js"></script>
+        <script src="/javascripts/views/phones/show_image_view.js"></script>
+        <script src="/javascripts/views/phones/show_images_list_view.js"></script>
+        <script src="/javascripts/views/phones/show_images_list_image_view.js"></script>
+        <script src="/javascripts/views/phones/show_specs_view.js"></script>
         <script src="/javascripts/views/phones/index_view.js"></script>
         <script src="/javascripts/views/phones/filter_view.js"></script>
         <script src="/javascripts/views/phones/index_list_view.js"></script>