week4

2016-11-23 12:48:37 +01:00
parent 782bd00d11
commit 41ad6ee901
8 changed files with 475 additions and 0 deletions
@@ -0,0 +1,73 @@
+<html>
+	<head>	
+		<title>Bookstore (remember?!)</title>	
+		<style>
+			/* CSS Styling */
+			#frame {
+				width: 100%;
+			}
+			#inputs {
+				width: 30em;
+			}
+		</style>
+		<!-- SCRIPTS -->
+		<!-- import handlebars -->		
+		<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>
+		<!-- import jquery -->		
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>				
+	</head>
+	<body>		
+		<!-- HTML -->
+		<label>Bookstore (remember?!)</label>
+		<div id="frame">
+
+			<div id="inputs">
+				<input type="button" value="Get some books" onclick="get_books();"/>
+				<input id="nbr_books" type="number" value="2" min="1" max="5">
+			</div>
+
+			<!-- 
+			<div id="books">
+				<script id="books-template" type="text/x-handlebars-template">
+					{{#each this}}
+					{{/each}}
+				</script>
+			</div>
+			-->
+
+		</div>		
+
+		<!-- SCRIPTS -->
+		<!-- import socket.io -->
+		<script src="/socket.io/socket.io.js"></script>
+		<script>
+			// connect to localhost on its port (see server.js -- 8088)
+		  var socket = io().connect('http://localhost:8088');
+
+		  // when connecting 
+		  socket.on('connect', function (data) {
+		  	console.log('connected');
+		  });
+
+		  // when receiving a custom message form the server
+		  socket.on('all the books we have', function(msg) {
+		  	console.log('all the books: ' + msg);
+		  });
+
+		  /*
+		  function compile_results_and_dispay(results) {
+
+		  	var template_script = $("#books-template").html(); 
+
+			var template = Handlebars.compile(template_script);
+
+			//$('.book').remove();
+
+			$('#books').append(template(results));
+
+		  }
+		  */
+
+		</script>		
+	</body>
+</html>