Front end code for ACMI's multi-screen Cinemas Now Showing

multiscreenwhatson.js

/**
 *	A simple web app to display session times from the ACMI website JSON feed.
 *	This source file gets bundled together with its dependencies into bundle.js.
 *
 *	Dependencies:
 *	
 *	query-string (https://www.npmjs.com/package/query-string)	
 *	jquery (https://jquery.com/)
 *	moment (https://momentjs.com/)
 *
 *	@author Andrew Serong (for the Australian Centre for the Moving Image)
 *	@version 2017-06-06
 */

var globalVars = {
	debugAppState: {},
	TRUNCATE_TITLE_CHARACTERS: 24,
	debugMode: false,
	customDate: null
}

window.globalVars = globalVars;

var queryString = require('query-string');

/**
 *	Reduce session data down from the data returned by the ACMI site to an array of (just)
 *	the film sessions, with a title name and an array of start times.
 *
 *	@param	data 	a data object in the form provided by the ACMI JSON feed
 *	@returns 		an array of objects with properties: string 'title' and array 'start_time'
 */

var truncateTitle = function(title, numChars) {
	var truncatedTitle = "";
	if (title.length >= numChars) {
		var titleSubString = title.substring(0, numChars);
		var newEndPos = titleSubString.lastIndexOf(" ");
		if (newEndPos <= 0) {
			// prevent titles from just becoming an ellipsis character if the title of the film is very long
			truncatedTitle = titleSubString + "&hellip;";
		} else {
			// in most cases, move to the last instance of a space, and replace the remainder of the string with ellipsis
			truncatedTitle = titleSubString.substring(0, newEndPos) + "&hellip;";
		}
		
	} else {
		truncatedTitle = title;
	}
	console.log("Truncated Title: " + truncatedTitle);
	return truncatedTitle;
}

var reduceSessionData = function(data) {
	var filmSessions = {};
	var returnSessions = [];

	// loop over all occurrences
	for (var i in data.occurrences) {
		
		// only proceed if the type includes "film"
		if (data.occurrences[i].type.toLowerCase().indexOf("film") != -1) {
			
			// if not already added, add each title to the filmSessions object
			if (!filmSessions[data.occurrences[i].title]) {
				filmSessions[data.occurrences[i].title] = { 
					"title": truncateTitle( data.occurrences[i].title, globalVars.TRUNCATE_TITLE_CHARACTERS ),
					"start_time": []
				};
			}
			
			// append the occurrence time to the filmSessions object under the title
			filmSessions[data.occurrences[i].title].start_time.push(data.occurrences[i].start_time);
		}
	}

	console.log("Film sessions:");
	console.log(filmSessions);

	// from: http://stackoverflow.com/questions/8312459/iterate-through-object-properties
	for (var title in filmSessions) {
    	if (filmSessions.hasOwnProperty(title)) {
	        returnSessions.push(filmSessions[title]);
	    }
	}
	console.log(returnSessions);
	return returnSessions;
}

/**
 *	Display the data to the screen by appending to an #output div. If the query string includes
 *	a screen value of 1 or 2, adds a heading row.
 *
 *	@param	data 	a data object in the form provided by the ACMI JSON feed
 *	@param	query 	a parsed query string object of key value pairs
 */

var displayData = function(data, query) {
	var numPerScreen = 2;
	var screenNum = Number(query.screen);
	var truncateCharNum = Number(query.numchars);

	// override global truncate characters if available
	if (!isNaN(truncateCharNum)) {
		globalVars.TRUNCATE_TITLE_CHARACTERS = truncateCharNum;
	}

	if (screenNum == 1) {
		
		// set first row to ACMI Cinemas
		$("#output").append("<div class='row-first big blue'><p>ACMI Cinemas</p></div>");

	} else if (screenNum == 2) {
		
		// set first row to Now Showing
		$("#output").append("<div class='row-first big blue'><p>Now Showing</p></div>");
	
	} else {

		// for all other screens add a blank row
		$("#output").append("<div class='row-first big blue'><p>&nbsp;</p></div>");
	
	}

	// gather parsed session time data
	var sessionTimes = reduceSessionData(data);

	// get the screen number from a zero index
	var zeroIndexScreenNum = screenNum - 1;

	var iterations = 0;

	// loop over session times
	for (var i in sessionTimes) {
		
		// only display this session time if it's for this screen
		// calculated by the screen number multiplied by the number of titles per screen

		var sessionTitle = "&nbsp;";
		var sessionTimesString = "&nbsp;";

		console.log("Iterator is: " + i);
		console.log("low conditional: " + (zeroIndexScreenNum * numPerScreen) );
		console.log("high conditional: " + (zeroIndexScreenNum + 1) * numPerScreen );

		if (i >= zeroIndexScreenNum * numPerScreen && i < (zeroIndexScreenNum + 1) * numPerScreen) {
			sessionTitle = sessionTimes[i].title;
			sessionTimesString = "";

			for (var time in sessionTimes[i].start_time) {
				var startTime = moment(sessionTimes[i].start_time[time]);
				sessionTimesString += "<span>";
				if (startTime.minutes() != 0) {
					sessionTimesString += startTime.format("h.mmA");
				} else {
					sessionTimesString += startTime.format("hA");
				}
				sessionTimesString += "</span>&nbsp;";
			}
			iterations++;
			$("#output").append("<div class='row big'><p class='white'>" + sessionTitle + "</p><p class='time pink'>" + sessionTimesString + "</p></div>");
		}
	}

	if (iterations == 1) {
		$("#output").append("<div class='row big'><p class='white'> &nbsp; </p><p class='time pink'> &nbsp; </p></div>");
	}
	if (iterations == 0) {
		$("#output").append("<div class='row big'><p class='white'> &nbsp; </p><p class='time pink'> &nbsp; </p></div>");
		$("#output").append("<div class='row big'><p class='white'> &nbsp; </p><p class='time pink'> &nbsp; </p></div>");
	}
};


// main method
$(document).ready(function() {

	var parsedQuery = queryString.parse(location.search);
	var debugMode = parsedQuery.debug;
	var customDate = parsedQuery.date;
	var requestString = "";

	console.log(parsedQuery);

	// set request date to current time
	var dateToRequest = moment();
	
	if (moment(customDate).isValid()) {
		// if a valid override date is provided, then use that instead
		dateToRequest = moment(customDate);
		globalVars.customDate = dateToRequest;
	}
	
	// extract month, year and day values from the dateToRequest
	var monthValue = moment(dateToRequest).format("MM");
	var yearValue = moment(dateToRequest).format("YYYY");
	var dayValue = moment(dateToRequest).format("DD");

	if (typeof debugMode == 'string' && debugMode.toLowerCase() == "true") {
		globalVars.debugMode = true;
		// use dummy data
		requestString = "dummydata/lots_of_films.json";
	} else {
		// retrieve session data from cached proxy
		requestString = "requestcachedsessions.php?date=" + yearValue + "-" + monthValue + "-" + dayValue;
	}

	console.log("Requesting data from: " + requestString);
	$.get(requestString,
		function(data) {
			console.log("Received data:");
			console.log(data);

			if (typeof data == 'string') {
				var jsonData = JSON.parse(data);
				globalVars.debugAppState = jsonData;
				displayData(jsonData, parsedQuery);			
			} else {
				debugAppState = data;
				displayData(data, parsedQuery);
			}
	});

});