youRhere-part3-index.html

index.html

<script src="/socket.io/socket.io.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js"></script>
<link rel="stylesheet" type="text/css" href="index.css" />
<script>

	var socket = io.connect("http://myservername:8080");
	
	// on connection to server, ask for username
	socket.on("connect", function() {
		socket.emit("adduser", prompt("Enter username:"));
	});

	// update the audit log when appropriate
	socket.on("updateaudit", function(username, data){
		var auditEntry = "<li>[<%= timeStamp %>]<b><%= name %>:</b><%= info %></li>";
		$("#audit > ul").prepend(_.template(auditEntry, {timeStamp: (new Date()).toString(), name: username, info: data}));
	});

	// update users list when needed
	socket.on("updateusers", function(data){
		var userList = "<% _.each(usernames, function(username) { %> <li><%= username %></li> <% }); %>";
		$("#users > ul").html(_.template(userList, {usernames: data}));
	});

	socket.on("entitiesretrieved", function(queryResults) {

		var entitiesList = "<% _.each(items, function(item) { %> <li id='<%= item.Id %>'><div class='<%= item.EntityType.Name %>-icon'></div><%= item.Name %></li> <% }); %>";
		var html = _.template(entitiesList, { items : queryResults.Items });
		$("#items > ul").html(html);
		$("#items > ul > li").on("click", function(event) {
			socket.emit("changeactiveitem", this.id, this.innerText); //highlight the currently selected item when clicked
		});

	});

	socket.on("activeitemchanged", function(itemId) {
		$("#items > ul > li.highlight").removeClass("highlight");
		$("#items > ul > li[id='" + itemId + "']").addClass("highlight");
	});	

</script>

<header>
	<h1>you-&#1103;-here</h1>
	<h2>Your Friendly Agile Demo Helper<h2>
</header>
<section id="users">
	<h3>Users</h3>
	<ul></ul>
</section>
<section id="items">
	<h3>Items</h3>
	<ul></ul>
</section>
<section id="audit">
	<h3>History</h3>
	<ul></ul>
</section>