Skip to content

Instantly share code, notes, and snippets.

@racingcow
Created Jun 25, 2012
Embed
What would you like to do?
youRhere-part3-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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment