Skip to content

Commit

Permalink
Added search and all of the crazy fields
Browse files Browse the repository at this point in the history
  • Loading branch information
@flukeout
flukeout committed Apr 5, 2016
1 parent e1b3e0b commit 62cf216
Show file tree
Hide file tree
Showing 3 changed files with 193 additions and 52 deletions.
143 changes: 106 additions & 37 deletions app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,28 +3,91 @@
// Then we can use those IDs to show the full versions in teh popup. Woop

// PROTOTYPE TODO - localstorage handling, so you dont have to get new data all the time if you dont want to
// TODO - should probably add the ID in the cleanupData method... not when it's displayed

var dataKeys = {
"Timestamp" : "event-date",
"Your Name" : "club-organizer",
"Club Name" : "club-name",
"Event Description" : "event-description",
"Club Link" : "club-link",
"City" : "event-city",
"Country" : "club-country",
"Event Location" : "event-location",
"How many people were there?" : "event-attendance",
"Timestamp" : "event-date"
"Attendance" : "event-attendance",
"Event Description" : "event-description",
"Event Creations" : "event-creations",
"Web Literacy Skills" : "event-skills",
"Links to Curriculum" : "event-links-curriculum",
"Links to Photos (Optional)" : "event-links-photos",
"Links to Blogpost (Optional)" : "event-links-blogpost",
"Links to Video (Optional)" : "event-links-video",
"Feedback from Attendees" : "event-feedback-attendees",
"Your Feedback" : "event-feedback-organizer"
}

function cleanupData(){
for(var i = 0; i < data.length; i++){
var item = data[i];
for(var k in item) {
var itemData = JSON.stringify(item[k]);
var newKey = dataKeys[k];
delete item[k];
item[newKey] = JSON.parse(itemData);
}
}
}

function filterEvents(term){

var matchingIDs = [];

for(var i = 0; i < data.length; i++){
var item = data[i];

for(var k in item){
var value = item[k];
if(typeof value == "string"){
value = value.toLowerCase();
if(value.indexOf(term) > -1){
matchingIDs.push(item.id);
}
}
}
}


$(".event-card").each(function(){
$(this).hide();
var thisId = parseInt($(this).data("id"));
if(matchingIDs.indexOf(thisId) > -1) {
$(this).show();
}
})


}

$(document).ready(function(){

// if(!localStorage.getItem("data")) {
$.get("https://sheetsu.com/apis/v1.0/ba3cacae").done(function(returnedData) {
data = returnedData;
// localStorage.setItem("data",JSON.stringify(data));
cleanupData();
localStorage.setItem("data",JSON.stringify(data));
displayEvents();
});
// } else {
// data = JSON.parse(localStorage.getItem("data"));
// displayEvents();
// }

$("body").on("keyup",".filter-events",function(){
var term = $(this).val();
term = term.toLowerCase();
filterEvents(term);

});

$("body").on("click",".event-card",function(){
var id = $(this).data("id");
showPop(id);
Expand All @@ -44,10 +107,6 @@ $(document).ready(function(){
e.stopPropagation();
});

// $("body").on("click",".event-popup-wrapper",function(){
// hidePop();
// });

$(window).on("keydown",function(e){
if(e.keyCode == 37) {
navigatePopup("previous");
Expand All @@ -67,19 +126,26 @@ var monthNames = ["January","February","March","April","May","June","July","Augu
var data;

function navigatePopup(direction) {
var popupEl = $(".event-popup-wrapper .event-popup");

if($(".event-popup-wrapper").is(":visible")) {
var currentId = parseInt($(".event-popup-wrapper").data("id"));

popupEl.removeClass("shakeright").removeClass("shakeleft");
popupEl.width(popupEl.width());

if(direction == "next") {
currentId++;
if(currentId > Object.keys(data).length) {
currentId = 1;
}
popupEl.addClass("shakeright");
} else {
currentId--;
if(currentId < 1) {
currentId = Object.keys(data).length;
}
popupEl.addClass("shakeleft");
}
showPop(currentId);
}
Expand All @@ -88,25 +154,26 @@ function navigatePopup(direction) {

function showPop(id){
var pop = $(".event-popup-wrapper");

pop.show();

for(var k in data){
var item = data[k];

pop.data("id",id);

if(item.id == id) {
for(var j in item){
if(dataKeys[j]) {
var className = dataKeys[j];
var itemData = item[j];

if(j == "Timestamp") {
itemData = formatDate(itemData);
}
pop.find("." + className + " .value").text(itemData);

if(pop.find("." + j).length > 0){
var value = item[j];
if(j == "event-date"){
value = formatDate(value);
}
if(j == "event-attendance"){
value = numberWithCommas(value);
}
pop.find("." + j + " .value").text(value);
}

}
}
}
Expand All @@ -118,18 +185,18 @@ function hidePop(){

function formatDate(dateString) {
var date = new Date(dateString);
var dayNum = date.getDay();
var dayNum = date.getDay(); //Number of the day of the week
var dayOfWeek = dayNames[dayNum];
var dayOfMonth = date.getDate();
var year = date.getFullYear();
var monthNumber = date.getMonth();
var monthName = monthNames[monthNumber];
return monthName + " " + dayNum + ", " + year;
return monthName + " " + dayOfMonth + ", " + year;
}

function dateSort(a,b){
var dateA = new Date(a["Timestamp"]);
var dateB = new Date(b["Timestamp"]);
var dateA = new Date(a["event-date"]);
var dateB = new Date(b["event-date"]);
if(dateA > dateB) {
return 1;
} else {
Expand All @@ -151,28 +218,30 @@ function displayEvents(){

for(var k in data){
var itemEl = $(".event-card.template").clone();

var item = data[k];
item.id = id;
itemEl.data("id",id);
id++;

//Date
var dateString = formatDate(item.Timestamp);
itemEl.find(".event-date .value").text(dateString);

//Club Name
var clubName = item["Club Name"];
itemEl.find(".event-club .value").text(clubName);

//Club Attendance
var attendance = item["How many people were there?"];
itemEl.find(".event-attendance .value").text(numberWithCommas(attendance));
for(var j in item){
if(itemEl.find("." + j).length > 0){
var value = item[j];

participants = participants + parseInt(attendance);

//Club Location
var location = item["Event Location"];
itemEl.find(".event-location .value").text(location);
if(j == "event-date"){
value = formatDate(value);
}
if(j == "event-attendance"){
participants = participants + parseInt(value);
}
if(j == "event-attendance"){
value = numberWithCommas(value);
}
itemEl.find("." + j + " .value").text(value);
}
}

itemEl.removeClass("template");
$(".events").append(itemEl);
Expand All @@ -183,5 +252,5 @@ function displayEvents(){
}

function numberWithCommas(x) {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
40 changes: 30 additions & 10 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
<html>
<head>
<link rel="stylesheet/less" href="style.less" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link href='https://fonts.googleapis.com/css?family=Fira+Sans:100,300,400,400italic,500,500italic,700' rel='stylesheet' type='text/css'>

<script src="jquery.js" type="text/javascript" charset="utf-8"></script>
Expand Down Expand Up @@ -38,6 +39,8 @@ <h2>Loading reports...</h2>

<div class="month">
<h1>
<input class="filter-events" placeholder="Search & filter"/>

<span class="event-count"></span> Events
<span class="participants"><span class="participant-count"></span> Participants</span>
</h1>
Expand Down Expand Up @@ -68,32 +71,49 @@ <h1>

<h2>Description</h2>
<p class="event-description">
<span class="value">
We did some stuff We did some stuff We did some stuff We did some stuff
</span>
<span class="value"></span>
</p>

<h2>Location</h2>
<h2>Event Location</h2>
<p class="event-location">
<span class="value">
It was in this place, tennessee.
</span>
<span class="value"></span>
</p>

<h2>Web Literacy Concepts Covered</h2>
<p class="event-skills">
<span class="value"></span>
</p>


<h2>Attendance</h2>
<p class="event-attendance">
<span class="value">12</span> People
</p>

<h2>Club Location</h2>
<p class="event-city">
<span class="value"></div>
</p>
<p class="event-country">
<span class="value"></div>
</p>

<h2>Club Organizer</h2>
<p>
Luke Pacholski<br/>
<a href="https://twitter.com/flukeout">@flukeout</a>
</p>


</div>
</div>
</div>

<div class="event-card template">
<div class="event-date"><span class="value"></span></div>
<div class="event-club"><span class="value"></span></div>
<div class="event-location"><span class="value"></span></div>
<div class="event-attendance"><span class="value"></span> People</div>
<div class="club-name"><span class="value"></span></div>
<div class="event-location"><i class="fa fa-map-marker"></i> <span class="value"></span></div>
<div class="event-attendance"><i class="fa fa-user"></i> <span class="value"></span> People</div>
</div>

</body>
Expand Down
Loading

0 comments on commit 62cf216

Please sign in to comment.