Skip to content

Commit

Permalink
Merge pull request hackohio#126 from Ethan-Wolfe/master
Browse files Browse the repository at this point in the history
Dynamically updating community events
  • Loading branch information
mikeletscher authored Nov 20, 2017
2 parents 43ae9a9 + 23d72e9 commit 2d50a82
Show file tree
Hide file tree
Showing 4 changed files with 83 additions and 36 deletions.
40 changes: 6 additions & 34 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -115,41 +115,9 @@ <h1>
<div id="community-header">
<h1>Community events</h1>
</div>
<div class="community-event">
<div class="red-bar"></div>
<h3 class="name">
Free Kids Code<br />
<span class="event-subtext">Tech Talent South</span>
</h3>
<h4 class="date">Nov 14th, 2017 @ 4:00am - 5:30pm</h4>
<h4 class="location">Northside Library</h4>
<h4 class="learn-more"><a href="https://www.meetup.com/Tech-Talent-South-Columbus/events/243214322/?rv=me1" class="red">Learn more &gt;&gt;</a></h4>
</div>
<div class="community-event">
<div class="red-bar"></div>
<h3 class="name">
App Day<br />
<span class="event-subtext">Center for Innovation and Entrepreneurship</span>
</h3>
<h4 class="date">Nov 19th, 2017 @ 9:00am - 3:00pm</h4>
<h4 class="location">Lumos Innovation (Downtown, 107 S High St)</h4>
<h4 class="learn-more"><a href="https://osu.startuptree.co/event/74791fdf-cf54-4d43-8e08-c03f3ca941e1" class="red">Learn more &gt;&gt;</a></h4>
</div>
<div class="community-event">
<div class="red-bar"></div>
<h3 class="name">
Girls of Color Hack #CBus<br />
<span class="event-subtext">AT&T and TechCorps</span>
</h3>
<h4 class="date">Dec 8-9th, 2017</h4>
<h4 class="location">Franklin University</h4>
<h4 class="learn-more"><a href="http://www.techcorps.org/content/girls-color-hack-cbus" class="red">Learn more &gt;&gt;</a></h4>
</div>
<br /><br />

<!-- <div class="center" style="display: none">
<a href="#" class="red">View all events &gt;&gt;</a>
</div> -->
<table id="sheetrock-load" style="display:none;">
</table>
<br />
</div>
</div>
Expand Down Expand Up @@ -197,5 +165,9 @@ <h4 class="learn-more"><a href="http://www.techcorps.org/content/girls-color-hac
<span>&copy; 2017 OHI/O <a href="privacy/index.html">Privacy Policy</a></span>
</footer>

<!-- load javascript files -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="js/sheetrock.min.js"></script>
<script type="text/javascript" src="js/events.js"></script>
</body>
</html>
74 changes: 74 additions & 0 deletions js/events.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
// Spreadsheet URL
const sheetURL = 'https://docs.google.com/spreadsheets/d/1fbtCptVlhUuUrm-JdBelXlSyyLAlgQDUDIV8NMVpxNU/edit#gid=0';

const numOfEventsToShow = 3;

// Load into table
var target = $("#sheetrock-load");
target.empty();
target.sheetrock({
url: sheetURL,
query: "select * where dateDiff(C, now()) >= -1 order by C asc",
callback: sheetrockCallback,
reset: false // Set = true if refreshing data
});

function sheetrockCallback() {
var table = $("#sheetrock-load");
var rows = table.find("tr");

// Iterate through event data - skipping 0 because its the header
var lastEvent = $("#community-header");
var lim = numOfEventsToShow+1 < rows.length ? numOfEventsToShow+1 : rows.length;
for (var i=1; i<lim; i++) {
var event = parseEvent(jQuery.makeArray(rows[i].children));
lastEvent.after(event)
lastEvent = $("#community .community-event").last();
}

// Un-comment once we create view all page
/*
if (numOfEventsToShow+1 < rows.length) {
lastEvent.after(`
<br />
<div class="center">
<a href="#" class="red">View all events &gt;&gt;</a>
</div>
`);
}
*/
}

function parseEvent(data) {
var title = $(data[0]).text();
var organization = $(data[1]).text();

var date = $(data[2]).text();
var dateExtRaw = $(data[3]).text();
if (dateExtRaw) {
// Overly complicated regexp to extract multiple dates in a string into an array of dates
// var datesExt = dateExtRaw.match(/([^,]*,[^,]*),?/g).map(x => x.trim().replace(/(^,)|(,$)/g, ""));
date = dateExtRaw;
}

var startTime = $(data[4]).text();
if (startTime) startTime = "@ "+startTime;
var endTime = $(data[5]).text();
if (endTime) endTime = "- "+endTime;

var location = $(data[6]).text();
var learnMore = $(data[7]).text();
return `
<br />
<div class="community-event">
<div class="red-bar"></div>
<h3 class="name">
${title}<br />
<span class="event-subtext">${organization}</span>
</h3>
<h4 class="date">${date} ${startTime} ${endTime}</h4>
<h4 class="location">${location}</h4>
<h4 class="learn-more"><a href="${learnMore}" class="red">Learn more &gt;&gt;</a></h4>
</div>
`;
}
2 changes: 2 additions & 0 deletions js/sheetrock.min.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 1 addition & 2 deletions style/redesign-main.css
Original file line number Diff line number Diff line change
Expand Up @@ -221,7 +221,7 @@ nav img {
}

.container .community-event:nth-child(2n+1) {
background-color: #ededed;
/*background-color: #ededed;*/
}

.community-event .name {
Expand Down Expand Up @@ -348,4 +348,3 @@ Flexbox
font-size: 0.7em;
padding: 8px 15px;
}

0 comments on commit 2d50a82

Please sign in to comment.