Skip to content

Commit a701e03

Browse files
gregjdmkalish
gregjd
authored and
mkalish
committed
Replace GCal with Meetup grabber (#217)
Adapted from Code Island (RI’s Code for America brigade)!
1 parent ce32708 commit a701e03

File tree

5 files changed

+202
-2
lines changed

5 files changed

+202
-2
lines changed

‎_includes/nextmeeting.html‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<div class="next-meeting">
2+
<h1>Next Meeting</h1>
3+
<p class="md soft">
4+
Join us at one of our <a href="https://www.meetup.com/Code-for-DC/">bi-monthly meetups</a> to
5+
learn more about our <a href="/about/">what we do</a>,
6+
contribute to a <a href="/projects/">current project</a>,
7+
or just snag some free pizza.
8+
</p>
9+
<hr>
10+
<div id="meetup">
11+
<div id="loaderIcon" class="">
12+
<img src="assets/img/loading.svg">
13+
</div>
14+
<p id="meetupDetails" class="lg loud">
15+
<span id="meetupDate"></span><a id="meetupLocation" href="" target="_blank"></a>
16+
</p>
17+
<p id="meetupRSVP" class="sm soft"></p>
18+
<a id="meetupCTA" class="btn blue" href="" target="_blank"></a>
19+
</div>
20+
</div>

‎assets/css/style.css‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -534,3 +534,17 @@ img.project-git-human {
534534
font-size: 94%;
535535
}
536536
}
537+
538+
539+
/***************************/
540+
/* meetup section */
541+
/***************************/
542+
543+
544+
.loading #loaderIcon {
545+
display: block;
546+
}
547+
548+
#loaderIcon {
549+
display: none;
550+
}

‎assets/img/loading.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎assets/js/meetup.js‎

Lines changed: 162 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,162 @@
1+
/*
2+
Display next meeting information, via Meetup API
3+
API Docs: http://www.meetup.com/meetup_api/docs/2/events/
4+
*/
5+
console.log('starting');
6+
$.ajax({
7+
type: "POST",
8+
dataType: 'jsonp',
9+
// url: 'https://api.meetup.com/2/events?status=upcoming&order=time&limited_events=False&group_urlname=Rhode-Island-Code-for-America-Brigade&desc=false&offset=0&photo-host=public&format=json&page=20&fields=rsvpable%2Cself&sig_id=182593829&sig=c59d1f16dccd434dd2b6b2fff959faabc53ec885',
10+
url: 'https://api.meetup.com/Code-for-DC/events?photo-host=public&page=20&sig_id=185842932&sig=8d81a344e478f5d3450cc2e9be5d0f8dbb35c2e6',
11+
crossDomain : true,
12+
xhrFields: {
13+
withCredentials: true
14+
},
15+
beforeSend: function() {
16+
$('#meetup').addClass('loading'); // Show loader icon
17+
},
18+
complete: function() {
19+
$('#meetup').removeClass('loading'); // Hide loader icon
20+
}
21+
})
22+
.done(function( xhr, textStatus, response, data, responseJSON ) {
23+
console.log('done');
24+
console.log(typeof(xhr));
25+
console.log(xhr.length);
26+
console.log(xhr);
27+
28+
29+
if (xhr.data[0] == undefined) { // If there is no upcoming event posted on Meetup...
30+
console.log('undefined next event');
31+
32+
document.getElementById("meetupDetails").innerHTML = 'TBD (check back soon)'; // Meeting date & place
33+
document.getElementById("meetupRSVP").style.display = 'none'; // RSVP info
34+
document.getElementById("meetupCTA").innerHTML = 'Join Our Meetup'; // Call to Action text
35+
document.getElementById("meetupCTA").href = 'http://meetup.com/Code-for-DC/'; // Call to Action link
36+
37+
} else { // Otherwise...
38+
console.log('there is a next event');
39+
40+
/*
41+
* Gather the Variables
42+
*/
43+
44+
// Next Event
45+
var nextEvent = xhr.data[0] // First event in the array returned from API
46+
47+
// Permalink
48+
var eventURL = nextEvent.link // URL
49+
50+
// Location
51+
if (nextEvent.venue != undefined) {
52+
var eventLocation = nextEvent.venue.name // Location
53+
// Normal
54+
var eventAddress = nextEvent.venue.address_1 // Address
55+
var eventLatitude = nextEvent.venue.lat // Latitutde
56+
var eventLongitude = nextEvent.venue.lon // Longitude
57+
var eventCity = nextEvent.venue.city // City
58+
var eventState = nextEvent.venue.state // State
59+
// Formatted for Gmaps
60+
var gmapAddress = eventAddress.split(' ').join('+').slice(0,-1)+',' // Address
61+
var gmapLat = '@'+eventLatitude+',' // Latitude
62+
var gmapLon = eventLongitude+',13z' // Longitude
63+
var gmapCity = '+'+eventCity+',' // City
64+
var gmapState = '+'+eventState+'/' // State
65+
// Gmaps Link
66+
var gmapStart = 'https://www.google.com/maps/place/' // Beginning of URL
67+
var gmapLink = gmapStart+gmapAddress+gmapCity+gmapState+gmapLat+gmapLon; // Complete URL
68+
} else {
69+
var eventAddress = 'TBD' // Address
70+
var gmapLink = eventURL // URL
71+
}
72+
73+
// RSVP
74+
var headCount = nextEvent.yes_rsvp_count; // Head Count (total number of 'yes' responses)
75+
// if (nextEvent.self.rsvp != undefined) {
76+
// var RSVPstatus = nextEvent.self.rsvp.response // RSVP Response ("yes or no") of visitor, only if already RSVP'ed
77+
// if (RSVPstatus == "yes") {
78+
// RSVPMessage = headCount+" do-gooders will be there — including you. Yay!" // "Yes" RSVP Message
79+
// CTA = "View Details" // "Yes" Call to Action
80+
// } else {
81+
// RSVPMessage = headCount+" do-gooders will be there — and you will be missed." // "No" RSVP Message
82+
// CTA = "Change RSVP" // "No" Call to Action
83+
// }
84+
// } else {
85+
// RSVPMessage = headCount+" do-gooders will be there — what about you?" // (No Response) RSVP Message
86+
// CTA = "RSVP on Meetup" // (No Response) Call to Action
87+
// }
88+
var RSVPMessage = headCount + " do-gooders will be there — what about you?"
89+
var CTA = "RSVP on Meetup"
90+
91+
// Date & Time
92+
if (nextEvent.time != undefined) {
93+
94+
// Formatting
95+
var m_names = new Array("January", "February", "March", // Month
96+
"April", "May", "June", "July", "August", "September",
97+
"October", "November", "December");
98+
var d_names = new Array("Sunday", "Monday", "Tuesday", // Day
99+
"Wednesday", "Thursday", "Friday", "Saturday", "Sunday");
100+
function formatAMPM(date) { // Time
101+
var hours = date.getHours();
102+
var minutes = date.getMinutes();
103+
var ampm = hours >= 12 ? 'pm' : 'am';
104+
hours = hours % 12;
105+
hours = hours ? hours : 12; // the hour '0' should be '12'
106+
minutes = minutes < 10 ? '0' + minutes : minutes;
107+
var strTime = hours + ':' + minutes + ' ' + ampm;
108+
return strTime;
109+
}
110+
111+
// Now
112+
var now = new Date; // Get Today's Date
113+
var todayMonth = now.getMonth() // Month
114+
var todayNumber = now.getDate() // Number
115+
var todayTime = formatAMPM(now) // Time (formatted)
116+
117+
// Next Event
118+
var date = new Date(nextEvent.time) // Get Next Event's Date
119+
var dateYear = date.getFullYear() // Year
120+
var dateMonth = date.getMonth() // Month
121+
var dateDay = date.getDay() // Day
122+
var dateNumber = date.getDate() // Number
123+
var dateTime = formatAMPM(date) // Time (formatted)
124+
125+
// Final Variables
126+
if ( (todayNumber == dateNumber) && (todayMonth == dateMonth) ) {
127+
var prettyDate = 'Tonight @ ' + dateTime + ' at '; // If today
128+
} else {
129+
var prettyDate = d_names[dateDay]+', '+m_names[dateMonth]+' '
130+
+dateNumber+' @ '+ dateTime+' at '; // Otherwise
131+
}
132+
133+
} else {
134+
var prettyDate = 'TBD';
135+
}
136+
137+
/*
138+
* Do Stuff with the Variables
139+
*/
140+
141+
// Date & Time
142+
document.getElementById("meetupDate").innerHTML = prettyDate; // Date & Time
143+
144+
// Location
145+
document.getElementById("meetupLocation").innerHTML = eventAddress; // Location name
146+
document.getElementById("meetupLocation").href = gmapLink; // Location link (gmaps)
147+
148+
// RSVP
149+
document.getElementById("meetupRSVP").innerHTML = RSVPMessage; // RSVP Total + Visitor's Status
150+
151+
// Button
152+
document.getElementById("meetupCTA").innerHTML = CTA; // Call to Action Text
153+
document.getElementById("meetupCTA").href = eventURL; // Call to Action Link
154+
155+
}
156+
157+
})
158+
159+
.fail( function(xhr, textStatus, errorThrown) {
160+
alert(xhr.responseText);
161+
alert(textStatus);
162+
});

‎index.html‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ <h1>Discuss!</h1>
3535

3636
<div class="row">
3737
<div class="col-lg-12">
38-
<iframe src="https://calendar.google.com/calendar/embed?showTitle=0&amp;showDate=0&amp;showPrint=0&amp;showTabs=0&amp;showCalendars=0&amp;showTz=0&amp;height=600&amp;wkst=2&amp;bgcolor=%23ffffff&amp;src=c0hf5stvqdshqfsf85rci77ib8%40group.calendar.google.com&amp;color=%236B3304&amp;ctz=America%2FNew_York" style="border-width:0" width="800" height="600" frameborder="0" scrolling="no"></iframe>
38+
{% include nextmeeting.html %}
3939
</div>
4040
</div>
4141

@@ -60,7 +60,7 @@ <h2>data.codefordc.org</h2>
6060
</div>
6161

6262
<div class="col-lg-12"><hr/></div>
63-
63+
6464
<div class="col-lg-12 project-stripe-odd">
6565
<div class="col-lg-4 project-stripe-img" >
6666
<a href="http://electionmap.wamu.org/" target="_blank"><img src="images/sites/open-election-map.png" alt="Election Map 2014" /></a>
@@ -117,6 +117,9 @@ <h2>Bikeshare Odds</h2>
117117

118118
{% include _global_js.html %}
119119

120+
<!-- Display Next Meeting via Meetup API -->
121+
<script src="/assets/js/meetup.js" type="text/javascript"></script>
122+
120123
</body>
121124
<script>
122125
$("#slackinvite").on("shown.bs.modal", function(e) {

0 commit comments

Comments
 (0)