1.1.0 - Better error handling/proper doctype and encoding added

changelog.txt

@@ -0,0 +1,8 @@
+1.1.0 - 26 January 2015
+ * Added calendar caching; if calendar is loaded and connection is lost,
+   calendar will remain present until the page is reloaded.
+ * Removed bulky error message and added notification at bottom right.
+ * If connection is lost, the script attempts to reload the calendar at a
+   shorter interval.
+ * Added proper DOCTYPE and character encoding to HTML document
+ * AJAX request now uses callbacks to allow for more flexibility.

functions.js

@@ -1,8 +1,50 @@
+// Provides callback for AJAX call
+var updateView = function(result, response) {
+	// How often to update (in seconds)
+	var interval = 60;
+	var tempInterval = interval;
+
+	// Set up references to loading indicator
+	var loadtext = document.getElementById("loadertext");
+	var loadbox = document.getElementById("loader");
+
+	// If the AJAX call was successful
+	if (result == true) {
+
+		// Read into a buffer and display, ignoring any passed in buffer
+		document.getElementById("content").innerHTML = response;
+
+		// Hide the loading indicator and reset the update interval
+		loadtext.innerHTML = "";
+		loader.style.display = "none";
+		tempInterval = interval;
+
+	// AJAX call failed
+	} else {
+
+		// Display the passed in buffer if available, to avoid losing calendar
+		if (typeof(response) != "undefined") {
+			document.getElementById("content").innerHTML = response;
+		}
+
+		// Add some text to the loading animation and display it.
+		loadtext.innerHTML = "Connection error. Retrying...";
+		loader.style.display = "block";
+
+		// Loop more quickly to recover from error condition
+		tempInterval = 5;
+	}
+
+	// Request on an interval
+	setTimeout(function() { ajaxcall(response) }, tempInterval * 1000);
+}
+
 // Requests calendar file
-function ajaxcall() {
+function ajaxcall(buf) {
+
 	// Generate cache breaker
 	var decache = new Date().getTime();
-	
+
 	// Make AJAX request
 	var xmlhttp;
 	if (window.XMLHttpRequest) {
@@ -11,35 +53,40 @@ function ajaxcall() {
 	else {
 		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
 	}
-
-	xmlhttp.onreadystatechange=function() {
-		// Display response on OK
-		if (xmlhttp.readyState==4 && xmlhttp.status==200) {
-			document.getElementById("content").innerHTML=xmlhttp.responseText;
-		}
-
-		// Handle HTTP errors
-		else if (xmlhttp.readyState==4 && xmlhttp.status != 200) {
-			document.getElementById("content").innerHTML = 
-				"<div class='day'>\n\t<div class='heading error'>Error</div>\n\t<div class='events'>\n" +
-				"\t\t<div class='events-inner'>Failed to load data from server. Please check the network connection.</div>\n" +
-				"\t</div>\n</div>\n";
-		}
+
+	xmlhttp.onreadystatechange = function() {
+	var result = false;
+	var response = "";
+
+	// Display response on OK
+	if (xmlhttp.readyState==4 && xmlhttp.status==200) {
+		result = true;
+		response = xmlhttp.responseText;
+
+		// Send the result to the callback
+		updateView(result, response);
+	}
+
+	// Handle HTTP errors
+	else if (xmlhttp.readyState==4 && xmlhttp.status != 200) {
+		result = false;
+		response = buf;
+
+		// Send the result to the callback
+		updateView(result, response);
+	}
 	}
-	
+
 	// Send request
-	xmlhttp.open("GET","schedule.php?d=" + decache,true);
+	xmlhttp.open("GET","schedule.php?d=" + decache, true);
 	xmlhttp.send();
-
-	// Request every 60 seconds
-	setTimeout("ajaxcall();", 60000);
 }
 
 // Displays the current date and time
 function updateClock() {
 	var d = new Date();
 	var curr_date = d.getDate();
-	
+
 	// Select a suffix for the date
 	var sup = "";
 	if (curr_date == 1 || curr_date == 21 || curr_date == 31) {
@@ -51,28 +98,28 @@ function updateClock() {
 	} else {
 		sup = "th";
 	}
-	
+
 	// Set options for date display
 	var date_options = {
 		weekday: "long", month: "long", day: "numeric"
 	};
-	
+
 	// Set options for time display
 	var time_options = {
 		hour: "numeric", minute: "2-digit", second: "2-digit", hour12: true
 	};
-	
+
 	// Generate the date string and add it to the document
 	var datestring = d.toLocaleDateString("en-US", date_options) + sup + "<span style=\"float:right;\">" +
-		d.toLocaleTimeString("en-US", time_options) + "</span>";
+	d.toLocaleTimeString("en-US", time_options) + "</span>";
 	document.getElementById("clock").innerHTML=datestring;
-	
+
 	// Repeat every second
-	setTimeout("updateClock();", 1000);
-}
+		setTimeout("updateClock();", 1000);
+	}
 
-// Begins loops
-function bootstrap() {
+	// Begins loops
+	function bootstrap() {
 	ajaxcall();
 	updateClock();
 }

index.html

@@ -1,11 +1,16 @@
+<!DOCTYPE html>
 <html>
 	<head>
 		<title>Schedule</title>
-		<link href='http://fonts.googleapis.com/css?family=Ubuntu|Ruda' rel='stylesheet' type='text/css'>
+		<meta charset="utf-8" />
+		<link href='http://fonts.googleapis.com/css?family=Ubuntu|Ruda' rel='stylesheet' type='text/css' />
 		<link rel="stylesheet" type="text/css" href="style.css" />
 		<script type="text/javascript" src="functions.js"></script>
 	</head>
 	<body onload="bootstrap();">
+		<div id="loader" style="display: none;">
+			<span id="loadertext"></span>
+		</div>
 		<div id="clock"></div>
 		<div id="content">
 		</div>

style.css

@@ -91,6 +91,21 @@ body {
 	color: #C32;
 }
 
-.highlight .time {
-	/*background-color: #ff0;*/
+#loader {
+	background: url(loader.gif) 3px 50% no-repeat #ddd;
+	color: #000;
+	border-radius: 3px 0 0 0;
+	min-width: 56px;
+	height: 25px;
+	float: right;
+	position: fixed;
+	bottom: 0px;
+	right: 0px;
+}
+
+#loader span {
+	display: inline-block;
+	margin-top: 2px;
+	margin-left: 61px;
+	margin-right: 3px;
 }