Add product detail page, supports image by name

appinfo.json

@@ -8,6 +8,71 @@
     "projectType": "pebblejs",
     "resources": {
         "media": [
+            {
+                "file": "images/menu_icon.png",
+                "name": "IMAGE_MENU_ICON",
+                "type": "png"
+            },
+            {
+                "file": "images/logo_splash.png",
+                "name": "IMAGE_LOGO_SPLASH",
+                "type": "png"
+            },
+            {
+                "file": "images/tile_splash.png",
+                "name": "IMAGE_TILE_SPLASH",
+                "type": "png"
+            },
+            {
+                "file": "fonts/UbuntuMono-Regular.ttf",
+                "name": "MONO_FONT_14",
+                "type": "font"
+            },
+            {
+                "file": "images/mono-taxi.png",
+                "name": "IMAGES_MONO_TAXI_PNG",
+                "type": "png"
+            },
+            {
+                "file": "images/mono-uberxl2.png",
+                "name": "IMAGES_MONO_UBERXL2_PNG",
+                "type": "png"
+            },
+            {
+                "file": "images/mono-uberx.png",
+                "name": "IMAGES_MONO_UBERX_PNG",
+                "type": "png"
+            },
+            {
+                "file": "images/mono-suv.png",
+                "name": "IMAGES_MONO_SUV_PNG",
+                "type": "png"
+            },
+            {
+                "file": "images/mono-pop2.png",
+                "name": "IMAGES_MONO_POP2_PNG",
+                "type": "png"
+            },
+            {
+                "file": "images/mono-nytaxi4.png",
+                "name": "IMAGES_MONO_NYTAXI4_PNG",
+                "type": "png"
+            },
+            {
+                "file": "images/mono-blacktaxi2.png",
+                "name": "IMAGES_MONO_BLACKTAXI2_PNG",
+                "type": "png"
+            },
+            {
+                "file": "images/mono-black.png",
+                "name": "IMAGES_MONO_BLACK_PNG",
+                "type": "png"
+            },
+            {
+                "file": "images/mono-lux.png",
+                "name": "IMAGES_MONO_LUX_PNG",
+                "type": "png"
+            },
             {
                 "file": "images/uber-icon-28.png",
                 "menuIcon": true,

src/app.js

@@ -15,6 +15,17 @@ var info_text = new UI.Text({
   textAlign: 'center'
 });
 
+// Image Mapping List
+var image_list = {
+  uberx: "images/mono-uberx.png",
+  uberxl: "images/mono-uberxl2.png",
+  uberblack: "images/mono-black.png",
+  uberexec: "images/mono-black.png",
+  ubersuv: "images/mono-suv.png",
+  ubertaxi: "images/mono-taxi.png",
+  ubert: "images/mono-nytaxi4.png"
+};
+
 var anykey_text = new UI.Text({
   position: new Vector2(0, 114),
   size: new Vector2(144, 30),
@@ -38,17 +49,26 @@ function locationError(err) {
   isUpdating = false;
 }
 
-function showUber(times) {
+function firstUpperCase(str) {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+}
 
-  if (times.length === 0) {
+function showUber(data) {
+  var times = data.times;
+  if (times.length === 0 && data.is_available) {
     info_text.text('No cars available');
     info_text.font('gothic-24-bold');
     return;
+  } else if (data.is_available === false) {
+    info_text.text('Currently not available in this area');
+    info_text.font('gothic-24-bold');
+    return;
   }
 
   var items = [];
   times.forEach(function(product) {
     product.surge_multiplier = product.surge_multiplier || 1;
+    product.display_name = firstUpperCase(product.display_name);
     var title = product.display_name;
     if (product.surge_multiplier !== 1) {
       title += ' *' + Number(product.surge_multiplier).toFixed(2);
@@ -57,7 +77,12 @@ function showUber(times) {
       title: title,
       subtitle: 'pick up time: ' +
                 Math.ceil(product.estimate / 60) + ' mins',
-      product_id: product.product_id
+      product: {
+        display_name: product.display_name,
+        capacity: product.capacity,
+        image: product.image,
+        description: firstUpperCase(product.description)
+      }
     };
     items.push(item);
   });
@@ -68,19 +93,36 @@ function showUber(times) {
     }]
   });
 
+  menu.on('select', function(e) {
+    var product = e.item.product;
+    if (product.capacity && product.image && product.description) {
+      var image = image_list[e.item.title.toLowerCase()] ||
+                             'images/mono-black.png';
+      var card = new UI.Card({
+        banner: image,
+        title: product.display_name,
+        body: "Capacity: " + product.capacity + '\n' + product.description,
+        scrollable: true
+      });
+      card.show();
+    }
+  });
+
   menu.show();
 }
 
 function fetchUber(coords) {
+  coords.latitude = '40.769625';
+  coords.longitude = '-73.971137';
   var params = 'latitude=' + coords.latitude +
                '&longitude=' + coords.longitude +
-               '&pebble=1';
+               '&demo=1';
   ajax({ url: 'http://pebble-uber.yulun.me/?' + params, type: 'json' },
     function(data) {
       info_text.text('Uber Now');
       info_text.font('gothic-24-bold');
       Vibe.vibrate('double');
-      showUber(data.times);
+      showUber(data);
       isUpdating = false;
     },
     function() {