Meetup weekview filter weekdays for two weeks, style weekview

Author: itsevalieu

custom.js

@@ -4,12 +4,21 @@
 		ltc.meetups = [];
 		ltc.markers = {};
 
+	// get week range for meetups
+	let currentWeek = getWeekRange();
+	let today = new Date;
+	console.log(currentWeek);
+	let firstDow = today.getDate()-currentWeek[1].date + 1;
+	let lastDow = currentWeek[14].date-today.getDate();
 	const api = {};
 		api.group = 'LearnTeachCode';
-		api.perPage = 15;
+		// api.perPage = 15; &page=' + api.perPage + 
 		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 = '-' + firstDow + 'd';
+		api.endWeekDate = lastDow + 'd';
+		api.status = 'upcoming,past';
+		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 +33,9 @@
 	}
 
 	function processData(data) {
+		let utctime = new Date(data.results[0].time);
+		console.log(utctime.toUTCString());
+
 		data.results.forEach( function( meetup, index ) {
 			// Get event formatted dates and time
 			data.results[index].d = getDateFormats( meetup );
@@ -145,38 +157,41 @@
 	function listMeetupsinWeekView(data) {
 
 		let week = getWeekRange();
-		console.log('week', week[1]);
 
 		let unfilteredMeetups = data.results;
-		console.log(unfilteredMeetups);
 		let currentDay = new Date();
 		let maxDay = new Date(currentDay.getDate()+5);
 		let maxTime = maxDay.getTime(); //compare by utc time
-		console.log(maxTime);
 
-		let filteredMeetups = unfilteredMeetups.filter(meetup.time >= currentTime);
+		let filteredMeetups = unfilteredMeetups.filter((meetup) => meetup.time >= maxTime);
 
 		let meetupsByDay = getWeekFormattedMeetups(filteredMeetups);
 
-		console.log('meetups by day', meetupsByDay);
+		for(let i=1; i <= 7; i++) {
+			let week1div = '<div class="day" id="' + week[i].dow.toLowerCase() + week[i].date + '"></div>';
+			document.querySelector('#firstweek').insertAdjacentHTML('beforeend', week1div);
+		}
 
+		for(let i=8; i <= 14; i++) {
+			let week2div = '<div class="day" id="' + week[i].dow.toLowerCase() + week[i].date + '"></div>';
+			document.querySelector('#secondweek').insertAdjacentHTML('beforeend', week2div);
+		}
 
 		for(let i=1; i < week.length; i++) {
 			let weekday = week[i];
-
-			let teststring = meetupsByDay[weekday.dow.substring(0,3)];
-			let formattedWeek = '<div>'
+			let dowDay = weekday.dow.substring(0,3) + weekday.date;
+			let teststring = meetupsByDay[dowDay];
+			let formattedWeek = '<div class="weekday">'
 				+ weekday.dow.substring(0,3) + ' ' 
 				+ weekday.month.substring(0,3) + ' ' 
-				+ weekday.date		
-				+ '</div>'
+				+ weekday.date
+				+ '</div>';
 			if(teststring) {
 				formattedWeek += teststring.join('');		
 			} else {
-				formattedWeek += 'No meetups! :(';
-			}
-			$('#' + weekday.dow.toLowerCase()).append(formattedWeek);
-
+				formattedWeek += '<div class="week-meetup">No meetups!</div';
+			}			
+			$('#' + weekday.dow.toLowerCase() + weekday.date).append(formattedWeek);
 		}
 	}
 
@@ -189,7 +204,7 @@
 		const weekdays = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
 		const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
 
-		for(let i=0; i<7; i++) {
+		for(let i=0; i<14; i++) {
 			let next = new Date(d.getTime());
 			next.setDate(first+i);
 			week.push({
@@ -210,24 +225,22 @@
 		meetups.forEach( function( meetup ) {
 			let d = getDateFormats( meetup );
 			// does d.dow exist within dayArray as array, if not create array
-			if( !dayArrays[d.dow] ) {
-				dayArrays[d.dow] = [];
+			let dowDay = d.dow + d.day;
+			if( !dayArrays[dowDay] ) {
+				dayArrays[dowDay] = [];
 			}
 
 			let formattedMeetup = '<li id="meetup-' + meetup.id + '" class="week-meetup">'
-			+ '<div class="infobox">' 
-			+ ' <div class="date">' + d.dowFull + ' ' + d.day + '</div>'
+			+ '<div class="timebox">' + d.time + '</div>'
+			+ '<div class="infobox-week">' 
+			// + ' <div class="date">' + d.dowFull + ' ' + d.day + '</div>'
 			+ ' <div class="title"><a href="' + meetup.event_url + '">' + meetup.name + '</a></div>'
-			+ ' <div>' + meetup.venue.city + ' - ' + meetup.venue.name + '</div>'
-			+ '</div>'
-			+ '<div>'
-			+ ' <div>' + d.time + '</div>'
+			+ ' <div class="city-week">' + meetup.venue.city + ' - ' + meetup.venue.name + '</div>'
 			+ '</div>'
 			+'</li>';
 
-			dayArrays[d.dow].push(formattedMeetup);
+			dayArrays[dowDay].push(formattedMeetup);
 		});
-		console.log('formated data', dayArrays);
 		return dayArrays;
 	}
 	/**

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=""/>
@@ -42,14 +41,15 @@ <h2>Upcoming Events:</h2>
 			<img src='./weekview.png' alt='week view' id='weekbutton'>
 		</div>
 
-		<div class='weekview' style='display: none'>
-			<div class='day' id='sunday'></div>
-			<div class='day' id='monday'></div>
-			<div class='day' id='tuesday'></div>
-			<div class='day' id='wednesday'></div>
-			<div class='day' id='thursday'></div>
-			<div class='day' id='friday'></div>
-			<div class='day' id='saturday'></div>
+		<div class='weekview slider' style='display: none'>
+			<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="meetups"></ul>
@@ -86,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>

style.css

@@ -105,22 +105,54 @@ img:hover {
 
 .weekview {
   border: 1px solid #ccc;
+  position: relative;
+}
+
+.week {
   display: flex;
-  flex-flow: row;
-  flex: 1 100%;
+  flex-flow: row nowrap;
+  flex: 2 50% auto;
 }
 
 .day {
   border: 1px solid #ccc;
-  width: 100%;
-  text-align: center;
+  /* text-align: center; */
+  width: 15%;
 }
 
 .week-meetup {
   list-style: none;
   font-size: 0.8em;
+  border: 1px solid #ccc;
+  text-decoration: none;
+  line-height: 18px;
+  border: 1px solid #b74949;
+  text-align: center;
+  border-radius: 5px;  
+  margin: 5px;
 }
 
+.timebox {
+  border-bottom: 1px solid #b74949;
+  text-align: center;
+  border-radius: 5px 5px 0 0;
+  background-color: rgba(183, 73, 73, 0.3);
+}
+.city-week {
+  font-style: italic;
+}
+.weekday {
+  text-transform: uppercase;
+  background-color: #ddd;
+  text-align: center;
+}
+
+.title a {
+  text-decoration: none;
+}
+.infobox-week {
+  padding: 5px;
+}
 /** UPCOMING EVENTS **/
 .meetups {
   list-style: none;
@@ -189,14 +221,7 @@ img:hover {
 .load-more a:hover {
   background: rgba(183, 73, 73, 0.3);
 }
-/* Slider */
-.slider {
-  position: relative;
-  margin: auto;
-  max-width: 1000px;
-  height: 200px;
-  border: 1px solid black;
-}
+/** Slider **/
 .slide {
   display: none;
 }
@@ -205,23 +230,26 @@ img:hover {
   position: absolute;
   width: auto;
   height: 100%;
-  margin-top: -18px;
+  margin-top: 0px;
   padding: 16px;
-  color: white;
+  color: black;
   font-weight: bold;
   font-size: 18px;
   transition: 0.6s ease;
-  border-radius: 0 3px 3px 0;
+  border-radius: 3px 0 0 3px;
   user-select: none;
-  background: none;
-  border: none;
+  background: rgba(0, 0, 0, 0.218);
 }
 .next {
-  right: 0;
-  border-radius: 3px 0 0 3px;
+  right: -45px;
+  border-radius: 0 3px 3px 0;
+}
+.prev {
+  left: -45px;
 }
 .prev:hover, .next:hover {
   background-color: rgba(0, 0, 0, 0.218);
+  color: white;
 }
 .prev:focus, .next:focus {
   outline: none;