Refactored for modular controllers

src/client/index.jade

@@ -5,5 +5,5 @@ block content
       img(src="food.png")
     .genre#entertainmentButton(data-categories="casino shopping_mall amusement_park campground park night_club movie_rental movie_theater art_gallery stadium zoo")
       img(src="fun.png")
-    .genre#flicksButton(data-categories="movies")
+    .genre#flicksButton(data-categories="movies", data-view="MovieController")
       img(src="flicks.png")

src/client/js/controllers.js

@@ -0,0 +1,14 @@
+/*globals define*/
+define([
+    './controllers/Controller',
+    './controllers/MovieController'
+], function(
+    Controller,
+    MovieController
+) {
+    'use strict';
+    return {
+        Controller: Controller,
+        MovieController: MovieController
+    };
+});

src/client/js/controllers/Controller.js

@@ -20,6 +20,16 @@ define([
         this._client = client;
     };
 
+    /**
+     * Get the name of the given controller.
+     *
+     * @return {String} name
+     */
+    Controller.prototype.getName = function() {
+        // Override this method when creating custom controllers
+        return 'Basic';
+    };
+
     /**
      * Display the given option on the screen.
      *
@@ -56,18 +66,7 @@ define([
       for (var i=0; i<option.price_level; i++) {
         price_string += '$';
       }
-      var rating_string = '';
-      while (option.rating >= 0.5) {
-        if (option.rating >= 1) {
-            rating_string += '<img src="star_full.png">';
-            option.rating -= 1;
-            continue;
-        }
-        if (option.rating >= 0.5) {
-            rating_string += '<img src="star_half.png">';
-            option.rating -= 0.5;
-        }
-      }
+      var rating_string = this._createRatingText(option.rating);
       var user_loc = {
         'latitude' : this._client.lat,
         'longitude' : this._client.lng
@@ -104,5 +103,23 @@ define([
       console.log('No options found!');
     };
 
+    Controller.prototype._createRatingText = function(rating, total) {
+        var result = '';
+        total = total || 5;
+
+        while (rating >= 0.5) {
+            if (rating >= 1) {
+                result += '<img src="star_full.png">';
+                rating -= 1;
+                continue;
+            }
+            if (rating >= 0.5) {
+                result += '<img src="star_half.png">';
+                rating -= 0.5;
+            }
+        }
+        return result;
+    };
+
     return Controller;
 });

src/client/js/controllers/MovieController.js

@@ -0,0 +1,53 @@
+/*globals define*/
+
+define(['controllers/Controller', 
+        'text!controllers/html/movie.html',
+        'lodash'], function(Controller, 
+                            movieHtml,
+                            _) {
+    'use strict';
+
+    var movieTemplate = _.template(movieHtml);
+    var MovieController = function() {
+        Controller.apply(this, arguments);
+    };
+
+    _.extend(MovieController.prototype, Controller.prototype);
+
+    // Override methods as needed
+    MovieController.prototype.renderOption = function(option) {
+        console.log('Movie option is', option);
+        // Add the rating
+
+        // Show the basic movie info
+        this.container.html(movieTemplate(option));
+        this._updateView(option); // Using OMDB API
+    };
+
+    /**
+     * Get the movie info from OMDB
+     *
+     * @param {String} movie
+     * @return {undefined}
+     */
+    MovieController.prototype._getMovieInfo = function(movie, cb) {
+        $.get('http://www.omdbapi.com/?t='+encodeURI(movie)+
+                '&y=&plot=short&r=json', cb);
+    };
+
+    MovieController.prototype._updateView = function(option) {
+        // Update the html with the new content
+        this._getMovieInfo(option.title, function(movie) {
+            if (movie.Poster && movie.Poster.indexOf('http') === 0) {
+                document.getElementById('poster').innerHTML = '<img src='+
+                    movie.Poster+' class="img-responsive"/>';
+            }
+
+            if (movie.imdbRating && parseInt(movie.imdbRating)) {
+                document.getElementById('rating').innerHTML = this._createRatingText(movie.imdbRating/2);
+            }
+        }.bind(this));
+    };
+
+    return MovieController;
+});

src/client/js/controllers/html/movie.html

@@ -0,0 +1,30 @@
+<div class="row">
+  <div class="col-sm-12">
+    <div class="jumbotron result">
+      <div class="row">
+        <div class="result__primary col-xs-8">
+            <div class="result__name"><%= title %></div>
+          <div class="result__type_and_price">
+              <span class="result__type"><%= theater %></span>
+              <span class="result__price"></span>
+          </div>
+          <div class="result__distance"></div>
+          <div class="result__vicinity"><%= vicinity %></div>
+        </div>
+        <div class="col-xs-4">
+            <div id="poster" class="result__photo"></div>
+          <div class="result__ratings" id="rating"></div>
+        </div>
+      </div>
+    </div>
+    <div class="row">
+        <div class="col-xs-4">
+        </div>
+        <div class="col-xs-4">
+            <img src="button_four.png" class="result__retry"></img>
+        </div>
+        <div class="col-xs-4">
+        </div>
+    </div>
+  </div>
+</div>

src/client/js/main.js

@@ -25,12 +25,12 @@ require.config({
 define([ 'Client'
        , 'Utils'
        , 'shake'
-       , './controllers/Controller'
+       , './controllers'
        , 'lodash'
        , 'text!../html/no_more.html'
        , 'text!../html/result.html'
        ],
-function(Client, Utils, shake, Controller, _, noMoreTemplate, resultTemplate) {
+function(Client, Utils, shake, Controllers, _, noMoreTemplate, resultTemplate) {
 
   // Initialize shake listening
   // TODO
@@ -52,15 +52,19 @@ function(Client, Utils, shake, Controller, _, noMoreTemplate, resultTemplate) {
   };
 
   var categories = getCategoryMap(),
-      client = new Client(categories);
+      client = new Client(categories),
+      controllers = [];
 
     console.log('categories:');
     console.log(categories);
 
-  // Create the controllers
-  var Contr = Controller.bind(this, client);
+  // Create the controllers for the buttons
+  var def = 'Controller';
   $('.genre').each(function(i, btn) {
-      new Controller(client, btn);
+      var name = btn.getAttribute('data-view'),
+          Controller = Controllers[name] || Controllers[def];
+
+      controllers.push(new Controller(client, btn));
   });