week5

2016-11-30 12:37:33 +01:00
parent d3d46bbfd2
commit 90c9d8b20a
19 changed files with 3168 additions and 0 deletions
@@ -0,0 +1,103 @@
+<html>
+	<head>	
+		<title>Bookstore (remember?!)</title>	
+		<style>
+
+			/* CSS Styling */
+
+			#frame {
+				width: 100%;
+			}
+			#inputs {
+				width: 30em;
+			}
+
+			.book {
+				padding: 10px;
+				border-bottom: 1px dashed red;
+			}
+
+			#books {
+				width: 30em;
+			}
+
+			.title_style {
+				font-weight: bold;
+				font-size: 120;
+			}
+
+
+		</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}}
+					<div class="book">
+						<div class="title_style">Title: {{title}}</div>
+						<div class="author_style">Author: {{author}}</div>
+						<div class="price_style">Price: {{price}}</div>
+						<div class="kind_style">Kind: {{kind}}</div>
+					</div>
+					{{/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: ' + JSON.stringify(msg));
+
+		  	compile_results_and_display(msg);
+		  });
+
+		  function get_books() {
+		  	socket.emit('give some books', "nothing");
+		  }
+
+		  
+		  function compile_results_and_display(results) {
+
+		  	var template_script = $("#books-template").html(); 
+
+			var template = Handlebars.compile(template_script);
+
+			//$('.book').remove();
+
+			$('#books').append(template(results));
+
+		  }
+		  
+
+		</script>		
+	</body>
+</html>
@@ -0,0 +1,15 @@
+{
+  "name": "templating",
+  "version": "1.0.0",
+  "description": "example of templating using handlebars.js",
+  "main": "server.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "gauthier",
+  "license": "ISC",
+  "dependencies": {
+    "express": "^4.14.0",
+    "socket.io": "^1.6.0"
+  }
+}
@@ -0,0 +1,81 @@
+// server.js
+
+// import express ()
+var express = require('express');		// npm install --save express
+var app = express();
+
+// import node.js http
+var server = require('http').Server(app);
+
+// import socket.io
+var io = require('socket.io')(server);	// npm install --save socket.io
+
+var books = [
+  {'title': "Ways of Curating",
+   'author': "Hans Ulrich Orbist",
+   'price': 16.95,
+   'kind': "Paperback"
+  },
+  {'title': "Ardor",
+   'author': "Roberto Calasso",
+   'price': 39.50,
+   'kind': "Hardcover"
+  },
+  {'title': "Why Grow Up?",
+   'author': "Susan Neiman",
+   'price': 15.95,
+   'kind': "Paperback"
+  },
+  {'title': "The Complete Stories",
+   'author': "Flannery O'connor",
+   'price': 19.95,
+   'kind': "Paperback"
+  },
+  {'title': "The Hatred of Poetry",
+   'author': "Ben Lerner",
+   'price': 13.95,
+   'kind': "Paperback"
+  }
+];
+
+/* ----------------------------------
+	Server and Socket Configuration
+--------------------------------------*/
+
+// tell express to server our index.html file
+app.get('/', function (req, res) {
+  res.sendFile(__dirname + '/index.html');
+});
+
+// configure socket.io
+// (1) when there is a connection 
+io.on('connection', function(socket) {
+
+  console.log('got a connection');
+
+  // (2) configure the connected socket to receive custom messages
+  socket.on('give some books', function(msg) {
+
+  	console.log('got a give some books: ' + msg);
+
+  	io.emit('all the books we have', books);
+
+  });
+
+  socket.on('disconnet', function() {
+
+  	console.log('got a disconnection');
+  	
+  });
+
+});
+
+/* -------------------
+	Start the server
+----------------------*/
+
+// listen to connection on port 8088 --> http://localhost:8088
+server.listen(8088, function () {
+	console.log('listening on port: ' + 8088);
+});
+