events list

punch_list/css/custom.css

@@ -395,12 +395,14 @@ textarea {
 		display: block;
 		margin-top: 100px;
 		margin-left: auto;
-		width: 25%;
+		width: 20%;
 		height: 99%;
 		background-color: #000;
 		overflow: hidden;
 		float: left;
 		border-right: 3px solid #000;
 	}
-	.column-right { display: block; width: 25%; overflow: hidden; float: left;}
+	.column-middle { display: block; width: 50%; overflow: hidden; float: left;}
+	.column-right { display: block; width: 25%; overflow: hidden; float: left; padding-top: 100px;}
+	#events-list { background-color: #000; }
 }

punch_list/eventsList.js

@@ -0,0 +1,218 @@
+var initialized = false;
+
+function getEvents() {
+	let req = new XMLHttpRequest();
+
+	req.onreadystatechange = () => {
+		console.log(`${req.readyState}`);
+		console.log(`${XMLHttpRequest.DONE}`);
+		if (req.readyState == XMLHttpRequest.DONE) {
+			console.log(`request done`);
+			let dataLoad = true;
+			window.eventsList = JSON.parse(req.responseText);
+			window.eventsLength = eventsList.length;
+			main(window.eventsList, dataLoad, window.eventsLength);
+		}
+	};
+	req.open("GET", btJsonUrl , true);
+	req.send();
+}
+
+//sleep function
+function sleep(delay) {
+	var start = new Date().getTime();
+	while (new Date().getTime() < start + delay);
+}
+
+function selectEvent(id) {
+	var events = window.eventsList;
+	console.log(`inside selectEvent()`);
+
+	currentObject = id;
+	array_counter = id;
+	currentDate = events[currentObject].date;
+	currentSubject = events[currentObject].subject;
+	currentStart = currentDate;
+	currentEnd = nextDate;
+	nextObject = array_counter + 1;
+	if (nextObject >= window.eventsLength) {
+		nextStart = "";
+		nextEnd = "";
+		nextDate = "";
+		nextSubject = "End";
+		notes = "";
+	} else {
+		nextStart = nextDate;
+		nextEnd = events[nextObject].date;
+		nextDate = events[nextObject].date;
+		nextSubject = events[nextObject].subject;
+		notes = events[currentObject].notes;
+	}
+
+	countDownDate = new Date(nextDate).getTime();
+	currentTimer = new Date(currentDate).getTime();
+}
+
+function incArray() {
+	var events = window.eventsList;
+	console.log("inside incArray");
+	console.log(`array_counter = ${array_counter}`);
+	console.log(`window.eventsLength = ${window.eventsLength}`);
+	console.log(`events = ${events}`);
+	if (array_counter < window.eventsLength) {
+		array_counter++;
+	}
+	selectEvent(array_counter);
+}
+
+function decArray() {
+	var events = window.eventsList;
+	console.log("inside decArray");
+	console.log(`array_counter = ${array_counter}`);
+	console.log(`window.eventsLength = ${window.eventsLength}`);
+	console.log(`events = ${events}`);
+
+	if (array_counter > 0) {
+		array_counter--;
+	}
+	selectEvent(array_counter);
+}
+
+function genEventList() {
+	list = "<table class=events><th class=events>Event</th><th class=events>Time</th><th class=events>Time Until</th>";
+
+	var events = window.eventsList;
+
+	if (window.eventsLength > 30) {
+		var listLength = 30;
+		var page = true;
+	} else {
+		var listLength = window.eventsLength;
+	}
+
+	var count_to_end = window.eventsLength - array_counter;
+
+	for (i = 0; i < listLength; i++) {
+		if (i === array_counter) {
+			eventStyle = "events-current";
+			cdFunction = countdown(events[i].date, events[i + 1],  "current");
+		} else {
+			eventStyle = "events";
+			cdFunction = countdown(events[i].date, "", "next");
+		}
+
+		counter_diff = i - array_counter;
+
+		if (counter_diff < -2) {
+			list += '';
+			if (listLength < window.eventsLength) {
+				listLength++;
+			}
+		} else {
+			list += "<tr onClick=selectEvent(\"" + i + "\")><td class=" + eventStyle + ">" + events[i].subject + "</td><td class=" + eventStyle + ">" + events[i].date + "</td><td class=" + eventStyle + ">" + cdFunction + "</td></tr>";
+	  }
+	}
+
+	list += "</table>";
+
+	return list;
+}
+
+function main(array, dataLoad, aLen) {
+	var x = setInterval(function() {
+		document.getElementById("events-list").innerHTML = genEventList();
+	}, 1000);
+}
+
+var style = "green"; // reset style
+
+function countdown(targetDate, nextDate, current) {
+	var countDownDate = new Date(targetDate).getTime();
+	var now = new Date().getTime();
+	var distance = countDownDate - now;
+
+	if (current === "current") {
+		var nextCountDownDate = new Date(nextDate).getTime();
+		var nextDistance = nextCountDownDate - now;
+		var nextDays = Math.floor(nextDistance / (1000 * 60 * 60 * 24));
+		var nextHours = Math.floor((nextDistance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+		var nextMinutes = Math.floor((nextDistance % (1000 * 60 * 60)) / (1000 * 60));
+		var nextSeconds = Math.floor((nextDistance % (1000 * 60)) / 1000);
+	}
+
+	var days = Math.floor(distance / (1000 * 60 * 60 * 24));
+	var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+	var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
+	var seconds = Math.floor((distance % (1000 * 60)) / 1000);
+
+// set style for countdown based on remaining time
+	style = "green"; // reset style
+
+	if (current === "current") {
+		style = 'current';
+	} else {
+		if (days < 1 && hours < 1) {
+			if (minutes < 0) {
+				style = 'over';
+			} else if (minutes < 15) {
+				style = 'warn';
+			} else {
+				style = 'green';
+			}
+		}
+	}
+
+	if (days < 0) {
+		days = (-days);
+		days--;
+	}
+
+// Day or Days?
+	if (days > 0) {
+		if (days === 1){
+			rDays = (days + ' Day ');
+		} else {
+			rDays = (days + ' Days ');
+		}
+	} else {
+		rDays = '';
+	}
+
+// pad single digits with a '0' prefix
+// when time is out, start counting up by inverting
+	if (hours < 0) {
+		hours = (-hours);
+		hours--;
+	}
+	if (hours < 10 && hours >= 0) {
+		hours = ('0' + hours);
+	}
+
+	if (minutes < 0) {
+		minutes = (-minutes);
+		minutes--;
+	}
+	if (minutes < 10 && minutes >= 0) {
+		minutes = ('0' + minutes);
+	}
+
+	if (seconds < 0) {
+		seconds = (-seconds);
+		seconds--;
+	}
+	if (seconds < 10 && seconds >= 0) {
+		seconds = ('0' + seconds);
+	}
+
+	if (initialized === false && distance < 0) {
+		incArray();
+	} else if (initialized === false) {
+		initialized = true;
+		decArray();
+	}
+
+	var r = "<div class=" + style + ">" + rDays + hours + ":" + minutes + ":" + seconds + "</div>";
+	return r;
+}
+
+

punch_list/index.html

@@ -12,6 +12,7 @@
 		<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
 		<script src="metadata.js"></script>
 		<script src="backlogManage.js"></script>
+		<script src="eventsList.js"></script>
 		<script src="js/datepicker.min.js"></script>
 		<script src="js/i18n/datepicker.en.js"></script>
 		<script src="https://apis.google.com/js/platform.js" async defer></script>
@@ -27,7 +28,7 @@
 		<link rel="stylesheet" href="css/custom.css">
 	</head>
 
-	<body>
+	<body onLoad="getEvents()">
 		<div class="dropdown u-pull-right" id=mainMenuWrapper>
 			<button class="top dropbtn" onclick=mainMenuDrop() id=mainMenu>Menu</button>
 			<div id=mainMenuDropdown class="dropdown-content punch-default">
@@ -58,9 +59,7 @@
 		</div>
 
 		<div id=middle class="column-middle">
-
 			<div id="editPunch" class="listWrapper"></div>
-
 			<div class="listWrapper" id="punchListAll">
 				<div id="punchListInProgressWrapper" class="listWrapper">
 					<span class="punchListHeader">Parking Lot</span>
@@ -85,12 +84,12 @@
 				<div style="width: 100%;" class='punch-default u-pull-right'><a class='punch-default u-pull-right' href='#' onClick=clearTagFilter()>Clear Tags</a></div>
 				<div style="width: 100%;" class='punch-default u-pull-right' id=versionInfo></div>
 			</div>
-			<div id="debug1"></div>
-
 		</div>
 
-		<div id=right class="column-right">
+		<div id=right class="column-right" style="float:left">
-			<div class="twelve columns"> </div>
+			<div class="twelve columns events">
+				<div id="events-list"></div>
+			</div>
 		</div>
 		</div>
 	</body>

punch_list/metadata.js

@@ -1,6 +1,7 @@
-var version = "0.8.129",
+var version = "0.9.031",
 		debug = false,
 		jsonUrl = "https://api.myjson.com/bins/1dodsj",
+		btJsonUrl = "https://api.myjson.com/bins/k0abr",
 		showDone = false,
 		items,
 		item,
@@ -8,3 +9,15 @@ var version = "0.8.129",
 		cDate,
 		array_counter = 0;
 
+var events, list, counter_diff, eventLength, isEventsArray;
+var currentObject, nextObject, notes;
+var currentDate, nextDate, currentStart, currentEnd;
+var nextStart, nextEnd, currentSubject, nextSubject;
+
+var dataLoad = false;
+var dataRequested = false;
+var initialized = false;
+var style = 'green';
+var eventStyle = "events";
+var array_counter = 0;
+