Calendar View of Meetups #24

custom.js

@@ -3,13 +3,18 @@
 		ltc.map;
 		ltc.meetups = [];
 		ltc.markers = {};
-
+
+	// get week range for meetups
+	let today = new Date;
+	let lastDow = 14 - today.getDay();
 	const api = {};
 		api.group = 'LearnTeachCode';
-		api.perPage = 15;
 		api.offset = 0;
 		api.path = 'https://api.meetup.com/2/events?&sign=true&photo-host=public';
-		api.url = api.path + '&group_urlname=' + api.group + '&page=' + api.perPage;
+		api.startWeekDate = '0';
+		api.endWeekDate = lastDow + 'd';
+		api.status = 'upcoming';
+		api.url = api.path + '&group_urlname=' + api.group + '&status=' + api.status + '&time=' + api.startWeekDate + ',' + api.endWeekDate;
 		api.err = "Error occurred processing Meetup API URL";
 
 	// Get Meetup Data
@@ -24,6 +29,7 @@
 	}
 
 	function processData(data) {
+		data.days = getCurrentDates(2);
 		data.results.forEach( function( meetup, index ) {
 			// Get event formatted dates and time
 			data.results[index].d = getDateFormats( meetup );
@@ -33,6 +39,7 @@
 		// List new meetups
 		listMeetups(data);
 		mapMeetups(data);
+		listMeetupsinWeekView(data);
 	}
 
 	function mapMeetups(data){
@@ -128,7 +135,7 @@
 			if(data.meta.total_count > data.meta.count && data.meta.count >= api.perPage){
 				list += '<li class="load-more"><a href="https://www.meetup.com/LearnTeachCode/events/">Load More</a></li>';
 			}
-		}else{
+		} else{
 			// No upcoming events note
 			list += '<li>No Meetups Currently Scheduled. Stay tuned.</li>';
 		}
@@ -137,9 +144,72 @@
 		$('.load-more').remove();
 
 		// Add the list to the element
-		$(".meetups").append(list);
+		$(".listview").append(list);
+	}
+
+	// Display Meetup Data in Week View
+	function listMeetupsinWeekView(data) {
+
+		let days = data.days;
+		let meetups = data.results;
+
+		let meetupsByDay = getWeekFormattedMeetups(meetups);
+
+		for(let i=0; i <= 6; i++) {
+			let week1div = '<div class="day" id="' + days[i].dow.toLowerCase() + days[i].date + '"></div>';
+			document.querySelector('#firstweek').insertAdjacentHTML('beforeend', week1div);
+		}
+
+		for(let i=7; i <= 13; i++) {
+			let week2div = '<div class="day" id="' + days[i].dow.toLowerCase() + days[i].date + '"></div>';
+			document.querySelector('#secondweek').insertAdjacentHTML('beforeend', week2div);
+		}
+
+		for(let i=0; i < days.length; i++) {
+			let weekday = days[i];
+			let dowDay = weekday.dow.substring(0,3) + weekday.date;
+			let meetupString = meetupsByDay[dowDay];
+			let formattedWeek = '<div class="weekday">'
+				+ weekday.dow.substring(0,3) + ' ' 
+				+ weekday.month.substring(0,3) + ' ' 
+				+ weekday.date
+				+ '</div>';
+			if(meetupString) {
+				formattedWeek += meetupString.join('');	
+
+			} else {
+				formattedWeek += '<div class="week-meetup-none">No meetups!</div';
+			}			
+			$('#' + weekday.dow.toLowerCase() + weekday.date).append(formattedWeek);
+		}
 	}
 
+	// Format Meetup Data for Week View
+	function getWeekFormattedMeetups( meetups ) {
+
+		let dayArrays = {};
+
+		// For each event create a list item
+		meetups.forEach( function( meetup ) {
+			let d = getDateFormats( meetup );
+			// does d.dow exist within dayArray as array, if not create array
+			let dowDay = d.dow + d.d;
+			if( !dayArrays[dowDay] ) {
+				dayArrays[dowDay] = [];
+			}
+
+			let formattedMeetup = '<li id="meetup-' + meetup.id + '" class="week-meetup">'
+			+ '<div class="week-time">' + d.time + '</div>'
+			+ '<div class="week-infobox">' 
+			+ ' <div class="title"><a href="' + meetup.event_url + '">' + meetup.name + '</a></div>'
+			+ ' <div class="week-city">' + meetup.venue.city + ' - ' + meetup.venue.name + '</div>'
+			+ '</div>'
+			+'</li>';
+
+			dayArrays[dowDay].push(formattedMeetup);
+		});
+		return dayArrays;
+	}
 	/**
 	 * formatEvents() will get a set of meetups and format accordingly
 	 * @param {meetups}
@@ -155,7 +225,7 @@
 
 			// Formant and add current event to list
 			formattedMeetups.push(
-				'<li id="meetup-' + meetup.id + '" class="meetup">'
+				'<li id="meetup-' + meetup.id + '" class="list-meetup">'
 				+ '<div class="datebox">'
 				+ ' <div class="dow">' + d.dow + '</div>'
 				+ ' <div class="date">' + d.month + ' ' + d.day + '</div>'
@@ -171,6 +241,28 @@
 		return formattedMeetups;
 	}
 
+	// Get Week Range
+	function getCurrentDates(numOfWeeks) {
+		const weekdays = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
+		const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+		let numOfDays = numOfWeeks * 7;
+		let days = [];
+		let today = new Date;
+		let firstDay = today.getDate() - today.getDay();
+
+		for(let i=0; i<numOfDays; i++) {		 
+			let nextDate = new Date(today.getTime()); 
+			nextDate.setDate(firstDay+i);
+			days.push({
+				dow: weekdays[nextDate.getDay()],
+				date: nextDate.getDate(),
+				month: months[nextDate.getMonth()],
+				year: nextDate.getFullYear()
+			});
+		}
+		return days;
+
+	}
 	function getDateFormats(meetup) {
 		const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
 		const weekdays = ['Sunday','Monday','Tueday','Wednesday','Thursday','Friday','Saturday'];
@@ -207,12 +299,25 @@
 	/**
 	 * Get initial set of group meetups
 	 */
-	$(document).ready(function(){
+	$(document).ready(function() {
 		// Get intial set of meetups
 		getData( api.url, processData, api.err);
 
+		// Toggle between calendar and list views
+		$( "#weekbutton" ).on('click', function() {     
+			$('.listview').hide();
+			$('.weekview').show();
+			$('.dots').show();
+		});
+
+		$( "#listbutton" ).on('click', function() {     
+			$('.weekview').hide();
+			$('.listview').show();
+			$('.dots').hide();
+		});
+
 		// Click Event for Load More
-		$('.meetups').on('click','.load-more a',function(e) {
+		$('.listview').on('click', '.load-more a', function(e) {
 			e.preventDefault();
 			api.offset++;
 			getData( api.url + '&offset=' + api.offset, processData, api.err);
@@ -227,6 +332,7 @@
 			meetupListItem.classList.add('active');
 			setTimeout( () => { meetupListItem.classList.remove('active'); }, 3000);
 		});
+
 	});
 
 })();

index.html

@@ -17,7 +17,6 @@
 	gtag('config', 'UA-118124010-1');
 	</script>
 	<!-- Google Analytics - END -->
-
 	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"
    integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
    crossorigin=""/>
@@ -37,7 +36,23 @@ <h2>Upcoming Events:</h2>
 
 		<div id="mapid"></div>
 
-		<ul class="meetups"></ul>
+		<div class='views'>
+			<img class='view' src='./listview.png' alt='list view' id='listbutton'>
+			<img class='view' src='./weekview.png' alt='week view' id='weekbutton'>
+		</div>
+
+		<div class='weekview slider'>
+			<button class='prev' onclick='plusSlides(-1)'>&#10094</button>
+			<button class='next' onclick='plusSlides(1)'>&#10095</button>
+			<div class='week slide fade' id='firstweek'></div>
+			<div class='week slide fade' id='secondweek'></div>
+		</div>
+		<div class='dots'>
+			<span class='dot' onclick='currentSlide(1)'></span>
+			<span class='dot' onclick='currentSlide(2)'></span>
+		</div>
+
+		<ul class="listview"></ul>
 
 		<p>Visit our <a href="https://www.meetup.com/LearnTeachCode/">Meetup.com page</a> for details on our next meetings.</p>
 
@@ -71,5 +86,6 @@ <h2>Stuff we do at Learn Teach Code:</h2>
 	integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg=="
 	crossorigin=""></script>
 	<script src="custom.js"></script>
+	<script src="slider.js"></script>
 	</body>
 </html>

slider.js

@@ -0,0 +1,29 @@
+let slideIndex = 1;
+showSlides(slideIndex);
+
+// next/previous slide controls
+function plusSlides(n) {
+    showSlides(slideIndex += n);
+}
+
+// thumbnail controls
+function currentSlide(n) {
+    showSlides(slideIndex = n);
+}
+
+// slider
+function showSlides(n) {
+    let i;
+    let slides = document.querySelectorAll('.slide');
+    let dots = document.querySelectorAll('.dot');
+    if (n > slides.length) { slideIndex = 1 }
+    if (n < 1) { slideIndex = slides.length }
+    for (i = 0; i < slides.length; i++) {
+        slides[i].style.display = 'none';
+    }
+    for (i = 0; i < dots.length; i++) {
+        dots[i].className = dots[i].className.replace(' active', '');
+    }
+    slides[slideIndex-1].style.display = 'flex';
+    dots[slideIndex-1].className += ' active';
+}