Permalink
Find file
Fetching contributors…
Cannot retrieve contributors at this time
217 lines (178 sloc) 9.71 KB
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>demo</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css(.tmp) styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->
<!-- build:js scripts/vendor/modernizr.js -->
<script src="bower_components/modernizr/modernizr.js"></script>
<!-- endbuild -->
</head>
<body>
<div class="container">
<div class="header">
<ul class="nav nav-pills pull-right">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
<h3 class="text-muted">demo</h3>
</div>
<div class="jumbotron">
<h1>Registration Form</h1>
<form id="login-container">
<div id="username_div" class="row">
<div class="col-md-4 col-md-offset-4"><input id="username" type="text" placeholder="username"></div>
<div id="username-unavailable" class="col-md-4" style="display: none">Unavailable</div>
</div>
<div id="fullname_div" class="row">
<div class="col-md-4 col-md-offset-4"><input id="fullname" type="text" placeholder="Full Name"></div>
</div>
<div class="row">&nbsp;</div>
<div id="register" class="row">
<button id="register_button" class="btn btn-primary" onclick="return false;">Register</button>
<span id="result"></span>
</div>
<div class="row">
<div class="col-md-2 col-md-offset-3">
<button id="plus_button" class="btn btn-info" onclick="return false;">+</button>
</div>
<div class="col-md-2" id="seconds">10</div>
<div class="col-md-2">
<button id="minus_button" class="btn btn-info" onclick="return false;">-</button>
</div>
</div>
<div class="row">
<div class="col-md-4 col col-md-offset-4" id="server_time">Server Time</div>
</div>
</form>
</div>
<!--<a class="btn btn-lg btn-success" href="#" id="BigButton">Register</a>-->
<div class="footer">
<div style="width: 200px; height: 60px">
<div style="display: block; margin: auto; float: left; height: 60px">Presented by</div>
<div style="display: block; float: right; width: 110px">
<div style="width: 110px">
<img style="display: block; margin-left: auto; margin-right: auto; height: 40px; width: 34px" src="images/zombiePossum.jpg"/>
</div>
<div style="display: block; margin-left: auto; margin-right: auto">Zombie Possum</div>
</div>
</div>
</div>
</div>
<!-- build:js scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/jquery.js"></script>
<script src="bower_components/bacon/dist/Bacon.js"></script>
<script src="bower_components/bacon-ui/Bacon.UI.js"></script>
<script src="bower_components/socket.io-client/dist/socket.io.js"></script>
<!-- endbower -->
<!-- endbuild -->
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
e.src='//www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
ga('create','UA-XXXXX-X');ga('send','pageview');
</script>
<!-- build:js scripts/main.js -->
<script src="scripts/main.js"></script>
<!-- endbuild -->
<!-- build:js scripts/plugins.js -->
<script src="bower_components/sass-bootstrap/js/affix.js"></script>
<script src="bower_components/sass-bootstrap/js/alert.js"></script>
<script src="bower_components/sass-bootstrap/js/dropdown.js"></script>
<script src="bower_components/sass-bootstrap/js/tooltip.js"></script>
<script src="bower_components/sass-bootstrap/js/modal.js"></script>
<script src="bower_components/sass-bootstrap/js/transition.js"></script>
<script src="bower_components/sass-bootstrap/js/button.js"></script>
<script src="bower_components/sass-bootstrap/js/popover.js"></script>
<script src="bower_components/sass-bootstrap/js/carousel.js"></script>
<script src="bower_components/sass-bootstrap/js/scrollspy.js"></script>
<script src="bower_components/sass-bootstrap/js/collapse.js"></script>
<script src="bower_components/sass-bootstrap/js/tab.js"></script>
<!-- endbuild -->
<script>
//todo swap out Bacon UI to bacon jquery https://github.com/baconjs/bacon.jquery
// Create an event stream for the click of buttons
// Use Map to map plus to a value of 1 and minus to -1
plus = $('#plus_button').asEventStream('click').map(1)
minus = $('#minus_button').asEventStream('click').map(-1)
// This merges the two streams into one stream
both = plus.merge(minus)
// Scan call the provided function on values in the stream
// x is the seed value and is carried through
// y is the value passed in by the stream
counter = both.scan(10, function(x,y){return x + y;})
// when the counter gets a value the function is called with the value
// in this case the value is set as text in the UI
counter.onValue(function(sum){$('#seconds').text(sum)})
// Uses Bacon UI to take the Key Up event stream for the field and creates a property for
// for the value of the field
// username and fullname input fields are mapped to these objects
username = Bacon.UI.textFieldValue($("#username"));
fullname = Bacon.UI.textFieldValue($("#fullname"));
// A function to determine if a value is greater the zero
function nonEmpty(x) {return x.length > 0};
// maps the properties to a boolean using the function above
usernameEntered = username.map(nonEmpty);
fullnameEntered = fullname.map(nonEmpty);
// Sets the value of buttonEnabled creates a boolean of these values conjoined
buttonEnabled = usernameEntered.and(fullnameEntered) //.and(usernameAvailable);
// Takes the opposite value of buttonEnabled and on a value change calls attr function on
// register_button with a value of disabled
buttonEnabled.not().onValue($("#register_button"), "attr", "disabled");
// When the username changes the map is set to availabilityRequest for the params for an ajax call
availabilityRequest = username.changes().map(function(user) { return { url: "http://localhost:3030/username/" + user }});
// With Helper method the eventstream data is used as parameters to the Jquery AJAX calls using the
// From Promise Method on Bacon
availabilityResponse = availabilityRequest.ajax();
// Maps the boolean response from the ajax call to usernameAvailable
usernameAvailable = availabilityResponse.map(function(value){return value === 'true'})
// creates a filtered stream one for true values one for false values
// then on a value change call hide or show on block
usernameAvailable.filter(function(val){return val}).onValue($('#username-unavailable'), 'hide');
usernameAvailable.filter(function(val){return !val}).onValue($('#username-unavailable'), 'show');
// Creates Message Buses to publish to, buses are event streams
receiveBus = new Bacon.Bus();
sendBus = new Bacon.Bus();
// Code used to create a socket for sending and receiving messages on
// the socket
createSocket = function() {
alert('called');
socket = io.connect("http://localhost:3030");
socket.on('message', function(data){
if(data.message){
// As messages are received on the socket they are pushed on the bus so they can
// consumed as an event stream
receiveBus.push(data.message);
} else {
alert('failure');
}
});
// when a value is received on this bus call the function to send an event to
// to the server
sendBus.onValue(function(val){socket.emit(val.event, {message: val.message})});
// when the counter has new values send a send event to the server with the value
counter.onValue(function(sum){socket.emit('send', {message: sum})});
};
// get and event stream for the register button being clicked
myButton = $('#register_button').asEventStream("click");
// sets it so only the first event is taken then the eventstream is ignored
myButton.take(1).onValue(createSocket);
// takes values from the bus and applies the value to the server time display
receiveBus.onValue(function(val){$('#server_time').text(val)});
</script>
</body>
</html>