Using the Meetup & Google Maps APIs to auto-update the next event

.bowerrc

@@ -0,0 +1,3 @@
+{
+  "directory": "bower_components"
+}

.gitignore

@@ -15,3 +15,6 @@
 
 # Ignore .DS_store file
 .DS_Store
+
+# Ignore bower_components
+/bower_components

bower.json

@@ -0,0 +1,11 @@
+{
+  "name": "phillyrb",
+  "version": "0.0.0",
+  "dependencies": {
+    "jquery": "2.0.3",
+    "fitvids": "1.0.0",
+    "requirejs": "2.1.8",
+    "underscore": "1.5.2",
+    "moment": "2.4.0"
+  }
+}

config.rb

@@ -63,6 +63,9 @@
 
 activate :directory_indexes
 
+# add bower_components to sprockets
+sprockets.append_path File.join "#{root}", "bower_components"
+
 # Build-specific configuration
 configure :build do
   # For example, change the Compass output style for deployment

source/index.html.erb

@@ -10,31 +10,8 @@ title: Philly.rb
 
 <div class="wrapper">
   <section class="next-event">
-    <article class="next-event-information">
-      <header>
-        <h1>Our Next Event</h1>
-        <h2>November Monthly Meeting</h2>
-        <h3><time>Tues, Nov. 12th, 6pm</time></h3>
-      </header>
-
-      <h4>Comcast Center</h4>
-      <p class="address"><a href="https://www.google.com/maps?q=Comcast+Center,+John+F+Kennedy+Boulevard,+Philly,+PA&hl=en&ll=39.954129,-75.168478&spn=0.010428,0.023378&sll=41.993169,-71.216463&sspn=0.010111,0.023378&oq=comcast+center+phill&hnear=Comcast+Corporate+Office,+1701+John+F+Kennedy+Blvd,+Philadelphia,+Pennsylvania+19103&t=m&z=17">1701 John F. Kennedy Blvd Philadelphia, PA</a></p>
-
-      <h4>Code Review &ndash; Trevor Menagh</h4>
-      <p>Today, so many projects, both open and closed source suffer from lack
-      of quality. Many of us are aware of the importance of testing in our
-      development processes, but code review is something that is often
-      overlooked or misunderstood.</p>
-
-      <p>What does it mean to review code? Find bugs? Complain about tabs vs.
-      spaces? Or something more?
-      <a href="http://www.meetup.com/Phillyrb/events/147882902/" class="more">More</a></p>
-      <a href="http://www.meetup.com/Phillyrb/events/147882902/" class="rsvp">RSVP on Meetup</a>
-    </article>
-
-    <div class="next-event-map">
-      <iframe width="100%" height="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://www.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=Comcast+Center,+John+F+Kennedy+Boulevard,+Philly,+PA&amp;aq=0&amp;oq=comcast+center+phill&amp;sll=41.993169,-71.216463&amp;sspn=0.010111,0.023378&amp;ie=UTF8&amp;hq=&amp;hnear=Comcast+Corporate+Office,+1701+John+F+Kennedy+Blvd,+Philadelphia,+Pennsylvania+19103&amp;ll=39.954127,-75.168475&amp;spn=0.010428,0.023378&amp;t=m&amp;z=14&amp;output=embed"></iframe>
-    </div>
+    <article class="next-event-information"></article>
+    <div id="map" class="next-event-map"></div>
   </section>
 
   <ul class="about-phillyrb">
@@ -131,3 +108,30 @@ title: Philly.rb
     </ul>
   </section>
 </div>
+
+<script type="text/html" id="event-tmpl">
+  <header>
+    <h1>Our Next Event</h1>
+    <h2>{{ event.name }}</h2>
+    <h3><time>{{ event.time }}</time></h3>
+  </header>
+  <h4><a href="{{ event.mapUrl }}">{{ event.venueName }}</a></h4>
+  <p class="address">{{ event.address }}</p>
+  <div class="description">
+    {{ event.description }}
+  </div>
+  <a href="{{ event.url }}" class="rsvp">RSVP on Meetup</a>
+</script>
+
+<script type="text/html" id="event-map-tmpl">
+  <header>
+    <h1>{{ event.venueName }}</h1>
+  </header>
+  <p class="address">{{ event.address }}</p>
+</script>
+
+<script>
+  require(['app'], function (App) {
+    new App();
+  });
+</script>

source/javascripts/all.js

@@ -1,3 +1,8 @@
+//= require 'moment/moment'
+//= require 'requirejs/require'
+//= require 'jquery/jquery'
+//= require 'fitvids/jquery.fitvids'
+//= require 'underscore/underscore'
 //= require_tree .
 
 $(document).ready(function(){

source/javascripts/app.js

@@ -0,0 +1,28 @@
+define('app', [
+  'meetup_event_embedder'
+], function (
+  MeetupEventEmbedder
+) {
+
+  var App = function () {
+    this.initialize();
+  };
+
+  App.prototype.initialize = function () {
+    this._configureUnderscore();
+    this._embedMeetup();
+  };
+
+  App.prototype._embedMeetup = function () {
+    new MeetupEventEmbedder();
+  };
+
+  App.prototype._configureUnderscore = function () {
+    _.templateSettings = {
+      evaluate : /\{\[([\s\S]+?)\]\}/g,
+      interpolate : /\{\{([\s\S]+?)\}\}/g
+    };
+  };
+
+  return App;
+});

source/javascripts/meetup.js

@@ -0,0 +1,32 @@
+define('meetup', [
+  'jquery'
+], function (
+  $
+) {
+  var Meetup = function () {
+    this.initialize();
+  };
+
+  Meetup.prototype.initialize = function (opts) {
+    this.apiHost = 'http://api.meetup.com';
+  };
+
+  Meetup.prototype.events = function (opts) {
+    var path = '/events.json?radius=25.0&order=time&group_urlname=phillyrb&offset=0&format=json&page=200&fields=&sig_id=85981882&sig=8e2446bfa10cfee4340f1441481163d1c7b255ff';
+
+    this._fetchData(path, opts);
+  };
+
+  Meetup.prototype._fetchData = function (path, opts) {
+    $.ajax({
+      url: this.apiHost + path,
+      dataType: "jsonp",
+      success: opts.success,
+      error: function () {
+        console.log('error');
+      }
+    });
+  };
+
+  return Meetup;
+});

source/javascripts/meetup_event_embedder.js

@@ -0,0 +1,83 @@
+define('meetup_event_embedder', [
+  'jquery',
+  'meetup',
+  'meetup_map_embedder'
+], function (
+  $,
+  Meetup,
+  MeetupMapEmbedder
+) {
+  var Embedder = function () {
+    this.initialize();
+  };
+
+  Embedder.prototype.initialize = function (evtObj) {
+    var self = this;
+
+    self.template = $('#event-tmpl').html();
+    self.container = $('article.next-event-information');
+    self.meetup = new Meetup();
+    self.meetup.events({
+      success: function (data) {
+        if (data && data.results && data.results.length > 0) {
+          self.embed(data.results[0]);
+        }
+      }
+    });
+  };
+
+  Embedder.prototype.embed = function (evtObj) {
+    var evt = this._eventData(evtObj),
+        html = _.template(this.template, { event: evt });
+
+    this.container.html(html)
+    this.embedMap(evt);
+  };
+
+  Embedder.prototype.embedMap = function (evtObj) {
+    new MeetupMapEmbedder(evtObj);
+  };
+
+  Embedder.prototype._eventData = function (evt) {
+    return {
+      name: evt.name,
+      venueName: evt.venue_name,
+      url: this._url(evt),
+      mapUrl: this._getMapUrl(evt),
+      time: this._formattedTime(evt.time),
+      address: this._formattedAddress(evt),
+      description: evt.description,
+    };
+  };
+
+  Embedder.prototype._getMapUrl = function (evt) {
+    var query = this._locationQuery(evt);
+
+    return 'https://maps.google.com/?q=' + query + '&ll=' + evt.lat + ',' + evt.lon;
+  };
+
+  Embedder.prototype._locationQuery = function (evt) {
+    var query = evt.venue_name + ',' + this._formattedAddress(evt) + '+' + evt.venue_zip;
+
+    return query.replace(/\s/g, '+');
+  };
+
+  Embedder.prototype._formattedAddress = function (evt) {
+    return evt.venue_address1 + ', ' + evt.venue_city + ', ' + evt.venue_state;
+  };
+
+  Embedder.prototype._formattedTime = function (time) {
+    return moment(time).format('dddd, MMM Do, h:mm a');
+  };
+
+  Embedder.prototype._url = function (evt) {
+    return 'http://meetup.com/Phillyrb/events/' + evt.id + '/';
+  };
+
+  Embedder.prototype._locationOq = function (venue) {
+    var oq = venue.name + ' ' + venue.city.replace(/\s/g, '+');
+    return oq.replace(/\s/g, '+').toLowerCase();
+  };
+
+  return Embedder;
+});

source/javascripts/meetup_map_embedder.js

@@ -0,0 +1,65 @@
+define('meetup_map_embedder', [
+  'jquery'
+], function (
+  $
+) {
+  var Map = function (event) {
+    this.initialize(event);
+  };
+
+  Map.prototype.initialize = function (event) {
+    this.event = event;
+    this.geocoder = new google.maps.Geocoder();
+    this.geocodeAndMap(this.event.address);
+  };
+
+  Map.prototype.geocodeAndMap = function (address) {
+    var self = this;
+
+    self.geocoder.geocode({
+      'address': address
+    }, function (results, status) {
+      if (status === google.maps.GeocoderStatus.OK) {
+        self.location = results[0].geometry.location;
+        self._createMap();
+      }
+    });
+  };
+
+  Map.prototype._createMap = function () {
+    var settings = {
+      mapId: 'map',
+      zoom: 14,
+      center: this.location,
+      mapTypeId: google.maps.MapTypeId.ROADMAP
+    };
+
+    this.map = new google.maps.Map(document.getElementById(settings.mapId), settings);
+    this._addMarker();
+    this._addInfoWindow();
+  };
+
+  Map.prototype._addMarker = function () {
+    this.marker = new google.maps.Marker({
+      position: this.location,
+      map: this.map,
+      title: 'Hello World!'
+    });
+  };
+
+  Map.prototype._addInfoWindow = function () {
+    this.infoWindow = new google.maps.InfoWindow({
+      content: this._infoWindowContent()
+    });
+
+    this.infoWindow.open(this.map, this.marker);
+  };
+
+  Map.prototype._infoWindowContent = function () {
+    var template = $('#event-map-tmpl').html();
+
+    return _.template(template, { event: this.event });
+  };
+
+  return Map;
+});