Added router methods and more

FranciZ · Jul 16, 2015 · 61df997 · 61df997
1 parent 45930af
commit 61df997
Show file tree

Hide file tree

Showing 7 changed files with 175 additions and 65 deletions.
diff --git a/package.json b/package.json
@@ -9,6 +9,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "body-parser": "^1.13.2",
     "express": "^4.13.1",
     "mongoose": "^4.0.7"
   }

diff --git a/public/index.html b/public/index.html
@@ -5,11 +5,38 @@
 	<script src="script/app.js"></script>
 	<link href="style/style.css" rel="stylesheet">
 
+	<!-- Latest compiled and minified CSS -->
+<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
+
+<!-- Optional theme -->
+<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
+
+<!-- Latest compiled and minified JavaScript -->
+<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
+
 </head>
 <body>
-	<h1>Hello world!</h1>
+	<div class="container">
+		<h1>Products</h1>
+		<h3>Crate a product</h3>
+		<label for="name">Name</label>
+		<input id="name" class="form-control" type="text" placeholder="Enter produc name">
+		<label for="price">Price</label>
+		<input id="price" class="form-control" type="text" placeholder="Enter price">
+		<br/>
+		<div class="btn btn-primary" id="add-button">Add</div>
+	</div>
+
 	<div class="products-container">
 
 	</div>
 </body>
-</html>
+</html>
+
+
+
+
+
+
+
+
diff --git a/public/script/app.js b/public/script/app.js
@@ -5,22 +5,80 @@ var app = {
 	initialize:function(){
 
 		app.getProducts();
+		app.setEvents();
+
+	},
+	setEvents:function(){
+
+		$('#add-button').on('click', app.addProduct);
 
 	},
 	getProducts: function(){
+		//      update  create	
+		// get,   put,   post,   delete
+		$.get('http://localhost:3000/products', 
+			function(productsResponse){
 
-		$.get('http://localhost:3000/products', function(productsResponse){
+				console.log(productsResponse);
 
 			app.products = productsResponse;
 			app.renderProducts(productsResponse);
 
 		});
 
+	},
+	addProduct:function(){
+
+		var nameValue = $('#name').val();
+		var priceValue = $('#price').val();
+
+		console.log(nameValue);
+		console.log(priceValue);
+
+		$.post('http://localhost:3000/products', 
+			{ 
+				name 	: nameValue, 
+				price 	: priceValue 
+			}, function(productResponse){
+
+				app.products.push(productResponse);
+
+				app.renderProducts(app.products);
+
+			});
+
+	},
+	deleteProduct:function(){
+
+		console.log($(this).attr('id'));
+
+		var id = $(this).attr('id');
+
+		$.ajax({
+			url:'http://localhost:3000/products/'+id,
+			method:'DELETE',
+			success:function(resDoc){
+
+				for(var i=0;i<app.products.length;i++){
+					if(resDoc._id === app.products[i]._id){
+
+						app.products.splice(i,1);
+
+					}
+				}
+
+				app.renderProducts(app.products);
+
+			}
+		});
+
 	},
 	renderProducts:function(products){
 
 		var container = $('.products-container');
 
+		container.empty();
+
 		for(var i=0;i<products.length;i++){
 
 			var productData = products[i];
@@ -30,7 +88,16 @@ var app = {
 			var price = $('<p>', {text:'Price: '+productData.price});
 			var stock = $('<p>', {text:'Stock: '+productData.stock});
 
-			productContainer.append(name, price, stock);
+			var deleteButton = $('<div>', 
+				{
+					text:'Delete', 
+					class:'btn btn-danger product-delete', 
+					id:productData._id
+				});
+
+			deleteButton.on('click', app.deleteProduct);
+
+			productContainer.append(name, price, stock, deleteButton);
 
 			container.append(productContainer);
 

diff --git a/public/style/style.css b/public/style/style.css
@@ -6,8 +6,17 @@ body{
 
 .product{
 
+	position: relative;
 	background-color: #ccc;
 	border-radius: 3px;
 	margin:3px;
 
+}
+
+.product-delete{
+
+	position: absolute;
+	top:5px;
+	right: 5px;
+
 }
diff --git a/routes.js b/routes.js
@@ -4,19 +4,67 @@ var express = require('express');
 
 module.exports = function(app){
 
+	// list of all the products
 	app.get('/products', function(request, response){
 
 		var Product = mongoose.model('Product');
-
 		Product.find(function(err, docs){
 
 			response.send(docs);
 
 		});
 
+	});
+
+	// get one product by id
+	app.get('/products/:id', function(request, response){
+
+
+
+	});
+
+	app.post('/products', function(request, response){
+
+		var Product = mongoose.model('Product');
+		var product = new Product(request.body);
+
+		product.save(function(err, doc){
+
+			response.send(doc);
+
+		});
+
+	});
+
+	app.delete('/products/:id', function(request, response){
+
+		var id = request.params.id;
+		var Product = mongoose.model('Product');
+
+		Product.findByIdAndRemove(id, function(err, doc){
+
+			response.send(doc);
+
+		});
+
+
+	});
+
+
+	app.put('/products/:id', function(request, response){
+
+
+
 	});
 
 	app.use('/', express.static('public'));
 
 
-};
+};
+
+
+
+
+
+
+
diff --git a/run.js b/run.js
@@ -6,65 +6,8 @@ database.openDatabase(function(){
 
 	var product = require('./models/product');
 
-	updateProduct('55a530e29bb02d7b424f67ae');
-
 	server.startServer(function(){
 		server.startRouter();
 	});
 
-});
-
-function updateProduct(id){
-
-	var Product = mongoose.model('Product');
-
-	Product.findByIdAndUpdate(id, { name:'Lame product', stock:0 }, function(err, doc){
-
-		console.log(err);
-		console.log('Updated document: ',doc);
-
-	});
-
-}
-
-function createProduct(){
-
-	var Product = mongoose.model('Product');
-
-	var product = new Product(
-		{ 
-			name:'Super Awesome Product',
-			price:100,
-			stock:4
-		}
-	);
-
-	product.save(function(err, doc){
-
-		console.log('Error: ', err);
-		console.log('Document :', doc);
-
-	});
-
-}
-
-function getProducts(){
-
-	var Product = mongoose.model('Product');
-
-	Product.find(function(err, docs){
-
-		console.log('Error: ',err);
-		console.log('Documents: ',docs);
-
-	});
-
-}
-
-
-
-
-
-
-
-
+});
diff --git a/server.js b/server.js
@@ -1,10 +1,25 @@
 var express = require('express');
 var mongoose = require('mongoose');
+var bodyParser = require('body-parser');
 var app = express();
 var server;
 
 exports.startServer = function(cb){
 
+	app.use(bodyParser.json());
+	app.use(bodyParser.urlencoded());
+
+	app.use(function(req, res, next){
+
+		var userAgent = req.get('User-Agent');
+		var search = userAgent.indexOf('Mac');
+		if(search !== -1){
+			//res.send('You have a mac, you are not welcome');
+		}
+		next();
+
+	});
+
 	server = app.listen(3000, function(){
 
 		console.log('Server started');
@@ -16,7 +31,7 @@ exports.startServer = function(cb){
 exports.startRouter = function(){
 
 	var router = require('./routes');
-	
+
 	router(app);
 
 };