From bfc00416578e174d1256af0914bfa46e24cf5b35 Mon Sep 17 00:00:00 2001 From: Brian Broll Date: Mon, 11 May 2015 15:57:23 -0500 Subject: [PATCH] Added basic controller structure --- src/client/js/controllers/Controller.js | 124 ++++++++++++++++++++++++ src/client/js/main.js | 102 ++----------------- 2 files changed, 134 insertions(+), 92 deletions(-) create mode 100644 src/client/js/controllers/Controller.js diff --git a/src/client/js/controllers/Controller.js b/src/client/js/controllers/Controller.js new file mode 100644 index 0000000..572b042 --- /dev/null +++ b/src/client/js/controllers/Controller.js @@ -0,0 +1,124 @@ +/*globals geolib,define*/ +/* + * A `Controller` is a manager for a button on the screen. It will also control the rendering of the things on screen for the given categories. + */ + +define([ + 'text!../html/no_more.html', + 'text!../html/result.html' +], function(noMoreTemplate, resultTemplate) { + 'use strict'; + + var Controller = function(client, button, container) { + // Categories for the places + // FIXME + //this.categories = categories; + this._id = button.getAttribute('id'); + // Add click listener + button.onclick = this._renderOption.bind(this); + this.container = container || $('.content'); + + // Container to display the result in + this.container = container; + this._client = client; + }; + + /** + * Display the given option on the screen. + * + * @private + * @return {undefined} + */ + Controller.prototype._renderOption = function() { + this._client.getOption(this._id, function(option) { + if (!option) { + this.renderNone(); + } else { // Render the option + this.renderOption(option); + + // Set event listener + this.container.on('click', '.result__retry', function(){ + var opt = this._client.getAnotherOption(this._id); + this._renderOption(this._id, opt); + }.bind(this)); + } + }.bind(this)); + }; + + /** + * Display the given option. + * + * @param {Option} option + * @return {undefined} + */ + Controller.prototype.renderOption = function(option) { + var addressQuery = option.vicinity.split(' ').join('+'); + console.log('option'); + console.log(option); + var price_string = ''; + for (var i=0; i= 0.5) { + if (option.rating >= 1) { + rating_string += ''; + option.rating -= 1; + continue; + } + if (option.rating >= 0.5) { + rating_string += ''; + option.rating -= 0.5; + } + } + var user_loc = { + 'latitude' : this._client.lat, + 'longitude' : this._client.lng + }; + var result_loc = { + 'latitude' : option.location.lat, + 'longitude' : option.location.lng + }; + var distance = Math.round(geolib.getDistance(user_loc, result_loc)/1609.34 * 10) / 10; + + console.log('option'); + console.log(option); + + var $rt = $(resultTemplate); + $rt.find('.result__name').html(option.name); + $rt.find('.result__photo').html(''); + $rt.find('.result__type').html(option.type); + $rt.find('.result__price').html(price_string); + $rt.find('.result__distance').html(distance + ' miles away'); + $rt.find('.result__ratings').html(rating_string); + $rt.find('.result__vicinity').html(''+option.vicinity+''); + + this.container.html($rt); + + console.log('Displaying option for', this._id,'(', option.name, ')'); + }; + + /** + * Render a subsequent option. + * + * @return {undefined} + */ + Controller.prototype.renderNext = function() { + // FIXME + // TODO + }; + + /** + * Render the screen for no more options. + * + * @return {undefined} + */ + Controller.prototype.renderNone = function() { + var $rt = $(noMoreTemplate); + $('.content').html($rt); + + console.log('No options found!'); + }; + + return Controller; +}); diff --git a/src/client/js/main.js b/src/client/js/main.js index 4543f33..3387715 100644 --- a/src/client/js/main.js +++ b/src/client/js/main.js @@ -22,11 +22,12 @@ require.config({ define([ 'Client' , 'Utils' , 'shake' + , './controllers/Controller' , 'lodash' , 'text!../html/no_more.html' , 'text!../html/result.html' ], -function(Client, Utils, shake, _, noMoreTemplate, resultTemplate) { +function(Client, Utils, shake, Controller, _, noMoreTemplate, resultTemplate) { // Initialize shake listening // TODO @@ -49,9 +50,17 @@ function(Client, Utils, shake, _, noMoreTemplate, resultTemplate) { var categories = getCategoryMap(), client = new Client(categories); + console.log('categories:'); console.log(categories); + // Create the controllers + var Contr = Controller.bind(this, client); + $('.genre').each(function(i, btn) { + new Controller(client, btn); + }); + + // get location by ip (faster than browser) geolocator.locateByIP(function(location) { updateLocation('coords by IP', location.coords); @@ -71,91 +80,6 @@ function(Client, Utils, shake, _, noMoreTemplate, resultTemplate) { client.setLocation(coords.latitude, coords.longitude); } - // Hook up the click listeners - // Attach click listener for each of the categories' ids - var displayNoOption = function() { - var $rt = $(noMoreTemplate); - $('.content').html($rt); - - console.log('No options found!'); - // alert('No more new options for you. You can restart!'); - // location.reload(); - }; - var displayOption = function(id, option) { - if (!option) { - return displayNoOption(); - } - - if (option === null) { - console.log("Shouldn't be called with null option"); - option = option || { - name: "Starbucks", - icon: "http://maps.gstatic.com/mapfiles/place_api/icons/cafe-71.png", - rating: 4, - vicinity: "402 21st Avenue South, Nashville", - opening_hours: {open_now: true, weekday_text: []}, - price_level:2 - }; - } - - var addressQuery = option.vicinity.split(' ').join('+'); - console.log('option'); - console.log(option); - var price_string = ''; - for (var i=0; i= 0.5) { - if (option.rating >= 1) { - rating_string += ''; - option.rating -= 1; - continue; - } - if (option.rating >= 0.5) { - rating_string += ''; - option.rating -= 0.5; - } - } - var user_loc = { - 'latitude' : client.lat, - 'longitude' : client.lng - }; - var result_loc = { - 'latitude' : option.location.lat, - 'longitude' : option.location.lng - }; - var distance = Math.round(geolib.getDistance(user_loc, result_loc)/1609.34 * 10) / 10; - - console.log('option'); - console.log(option); - - var $rt = $(resultTemplate); - $rt.find('.result__name').html(option.name); - $rt.find('.result__photo').html(''); - $rt.find('.result__type').html(option.type); - $rt.find('.result__price').html(price_string); - $rt.find('.result__distance').html(distance + ' miles away'); - $rt.find('.result__ratings').html(rating_string); - $rt.find('.result__vicinity').html(''+option.vicinity+''); - - $('.content').html($rt); - - console.log('Displaying option for', id,'(', option.name, ')'); - }; - - var onOptionClicked = function(id) { - currentId = id; - client.getOption(id, function(result) { - displayOption(id, result); - console.log(id); - }); - }; - - for (var id in categories) { - document.getElementById(id).onclick = onOptionClicked.bind(null, id); - } - // Manipulating the UI $(function() { @@ -168,12 +92,6 @@ function(Client, Utils, shake, _, noMoreTemplate, resultTemplate) { location.reload(); // FIXME Change this not to reload the whole page... }); - // Set event listener - $('.content').on('click', '.result__retry', function(){ - var opt = client.getAnotherOption(currentId); - displayOption(currentId, opt); - }); - }); });