Prettified all html and js
parent
1b13bd0e0c
commit
708353b7f8
|
|
@ -1,33 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>KO Shopping Cart</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="container-fluid">
|
||||
<div class="row" data-bind="if: visibleCatalog">
|
||||
<div class="col-xs-12" data-bind="template:{name:'header'}"></div>
|
||||
<div class="col-xs-6" data-bind="template:{name:'catalog'}"></div>
|
||||
<div class="col-xs-6 well hidden" data-bind="if: visibleCart">
|
||||
<div class="well" data-bind="template:{name:'cart'}"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" data-bind="if: visibleCart">
|
||||
<div data-bind="template:{name:'order'}"></div>
|
||||
</div>
|
||||
<div data-bind="template: {name:'add-to-catalog-modal'}"></div>
|
||||
<div data-bind="template: {name:'finish-order-modal'}"></div>
|
||||
</div>
|
||||
<head>
|
||||
<title>KO Shopping Cart</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="container-fluid">
|
||||
<div class="row" data-bind="if: visibleCatalog">
|
||||
<div
|
||||
class="col-xs-12"
|
||||
data-bind="template:{name:'header'}"
|
||||
></div>
|
||||
<div
|
||||
class="col-xs-6"
|
||||
data-bind="template:{name:'catalog'}"
|
||||
></div>
|
||||
<div class="col-xs-6 well hidden" data-bind="if: visibleCart">
|
||||
<div class="well" data-bind="template:{name:'cart'}"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" data-bind="if: visibleCart">
|
||||
<div data-bind="template:{name:'order'}"></div>
|
||||
</div>
|
||||
<div data-bind="template: {name:'add-to-catalog-modal'}"></div>
|
||||
<div data-bind="template: {name:'finish-order-modal'}"></div>
|
||||
</div>
|
||||
|
||||
<!-- vendor library -->
|
||||
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
|
||||
<script type="text/javascript" src="js/bootstrap.js"></script>
|
||||
<script type="text/javascript" src="js/knockout-3.2.0.js"></script>
|
||||
<!-- app -->
|
||||
<script type="text/javascript" src="js/models/Product.js"></script>
|
||||
<script type="text/javascript" src="js/models/CartProduct.js"></script>
|
||||
<script type="text/javascript" src="js/viewmodel.js"></script>
|
||||
</body>
|
||||
<!-- vendor library -->
|
||||
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
|
||||
<script type="text/javascript" src="js/bootstrap.js"></script>
|
||||
<script type="text/javascript" src="js/knockout-3.2.0.js"></script>
|
||||
<!-- app -->
|
||||
<script type="text/javascript" src="js/models/Product.js"></script>
|
||||
<script type="text/javascript" src="js/models/CartProduct.js"></script>
|
||||
<script type="text/javascript" src="js/viewmodel.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,160 +1,165 @@
|
|||
"use strict";
|
||||
var vm = (function () {
|
||||
var catalog = ko.observableArray([
|
||||
Product(1, "T-Shirt", 10.0, 20),
|
||||
Product(2, "Trousers", 20.0, 10),
|
||||
Product(3, "Shirt", 15.0, 20),
|
||||
Product(4, "Shorts", 5.0, 10),
|
||||
]);
|
||||
var catalog = ko.observableArray([
|
||||
Product(1, "T-Shirt", 10.0, 20),
|
||||
Product(2, "Trousers", 20.0, 10),
|
||||
Product(3, "Shirt", 15.0, 20),
|
||||
Product(4, "Shorts", 5.0, 10),
|
||||
]);
|
||||
|
||||
var newProduct = Product("", "", "", "");
|
||||
var clearNewProduct = function () {
|
||||
newProduct.name("");
|
||||
newProduct.price("");
|
||||
newProduct.stock("");
|
||||
};
|
||||
var newProduct = Product("", "", "", "");
|
||||
var clearNewProduct = function () {
|
||||
newProduct.name("");
|
||||
newProduct.price("");
|
||||
newProduct.stock("");
|
||||
};
|
||||
|
||||
var addProduct = function (context) {
|
||||
var id = new Date().valueOf(); // random id from time
|
||||
var addProduct = function (context) {
|
||||
var id = new Date().valueOf(); // random id from time
|
||||
|
||||
var product = Product(id, context.name(), context.price(), context.stock());
|
||||
catalog.push(product);
|
||||
clearNewProduct();
|
||||
};
|
||||
var product = Product(
|
||||
id,
|
||||
context.name(),
|
||||
context.price(),
|
||||
context.stock()
|
||||
);
|
||||
catalog.push(product);
|
||||
clearNewProduct();
|
||||
};
|
||||
|
||||
var searchTerm = ko.observable("");
|
||||
var filteredCatalog = ko.computed(function () {
|
||||
// if catalog is empty return empty array
|
||||
if (!catalog()) {
|
||||
return [];
|
||||
}
|
||||
var filter = searchTerm().toLowerCase();
|
||||
// if filter is empty return all the catalog
|
||||
if (!filter) {
|
||||
return catalog();
|
||||
}
|
||||
//filter data
|
||||
var filtered = ko.utils.arrayFilter(catalog(), function (item) {
|
||||
var strProp = ko.unwrap(item["name"]).toLocaleLowerCase();
|
||||
return (strProp.indexOf(filter) > -1);
|
||||
var searchTerm = ko.observable("");
|
||||
var filteredCatalog = ko.computed(function () {
|
||||
// if catalog is empty return empty array
|
||||
if (!catalog()) {
|
||||
return [];
|
||||
}
|
||||
var filter = searchTerm().toLowerCase();
|
||||
// if filter is empty return all the catalog
|
||||
if (!filter) {
|
||||
return catalog();
|
||||
}
|
||||
//filter data
|
||||
var filtered = ko.utils.arrayFilter(catalog(), function (item) {
|
||||
var strProp = ko.unwrap(item["name"]).toLocaleLowerCase();
|
||||
return strProp.indexOf(filter) > -1;
|
||||
});
|
||||
return filtered;
|
||||
});
|
||||
return filtered;
|
||||
});
|
||||
|
||||
var cart = ko.observableArray([]);
|
||||
var showCartDetails = function () {
|
||||
if (cart().length > 0) {
|
||||
visibleCart(true);
|
||||
}
|
||||
};
|
||||
var addToCart = function(data) {
|
||||
var item = null;
|
||||
var tmpCart = cart();
|
||||
var n = tmpCart.length;
|
||||
while(n--) {
|
||||
if (tmpCart[n].product.id() === data.id()) {
|
||||
item = tmpCart[n];
|
||||
}
|
||||
}
|
||||
if (item) {
|
||||
item.addUnit();
|
||||
} else {
|
||||
item = new CartProduct(data, 0);
|
||||
item.addUnit();
|
||||
tmpCart.push(item);
|
||||
}
|
||||
cart(tmpCart);
|
||||
};
|
||||
|
||||
// The cart-widget template
|
||||
var totalItems = ko.computed(function() {
|
||||
var tmpCart = cart();
|
||||
var total = 0;
|
||||
tmpCart.forEach(function(item) {
|
||||
total += parseInt(item.units(), 10);
|
||||
|
||||
var cart = ko.observableArray([]);
|
||||
var showCartDetails = function () {
|
||||
if (cart().length > 0) {
|
||||
visibleCart(true);
|
||||
}
|
||||
};
|
||||
var addToCart = function (data) {
|
||||
var item = null;
|
||||
var tmpCart = cart();
|
||||
var n = tmpCart.length;
|
||||
while (n--) {
|
||||
if (tmpCart[n].product.id() === data.id()) {
|
||||
item = tmpCart[n];
|
||||
}
|
||||
}
|
||||
if (item) {
|
||||
item.addUnit();
|
||||
} else {
|
||||
item = new CartProduct(data, 0);
|
||||
item.addUnit();
|
||||
tmpCart.push(item);
|
||||
}
|
||||
cart(tmpCart);
|
||||
};
|
||||
|
||||
// The cart-widget template
|
||||
var totalItems = ko.computed(function () {
|
||||
var tmpCart = cart();
|
||||
var total = 0;
|
||||
tmpCart.forEach(function (item) {
|
||||
total += parseInt(item.units(), 10);
|
||||
});
|
||||
return total;
|
||||
});
|
||||
return total;
|
||||
})
|
||||
var grandTotal = ko.computed(function() {
|
||||
var tmpCart = cart();
|
||||
var total = 0;
|
||||
tmpCart.forEach(function(item) {
|
||||
total += (item.units() * item.product.price());
|
||||
var grandTotal = ko.computed(function () {
|
||||
var tmpCart = cart();
|
||||
var total = 0;
|
||||
tmpCart.forEach(function (item) {
|
||||
total += item.units() * item.product.price();
|
||||
});
|
||||
return total;
|
||||
});
|
||||
return total;
|
||||
})
|
||||
|
||||
// The cart-item template
|
||||
var removeFromCart = function (data) {
|
||||
var units = data.units();
|
||||
var stock = data.product.stock();
|
||||
data.product.stock(units + stock);
|
||||
cart.remove(data);
|
||||
}
|
||||
// The cart-item template
|
||||
var removeFromCart = function (data) {
|
||||
var units = data.units();
|
||||
var stock = data.product.stock();
|
||||
data.product.stock(units + stock);
|
||||
cart.remove(data);
|
||||
};
|
||||
|
||||
// The cart template
|
||||
var hideCartDetails = function() {
|
||||
visibleCart(false);
|
||||
};
|
||||
var showOrder = function () {
|
||||
visibleCatalog(false);
|
||||
}
|
||||
// The cart template
|
||||
var hideCartDetails = function () {
|
||||
visibleCart(false);
|
||||
};
|
||||
var showOrder = function () {
|
||||
visibleCatalog(false);
|
||||
};
|
||||
|
||||
// The order template
|
||||
var showCatalog = function () {
|
||||
visibleCatalog(true);
|
||||
};
|
||||
var finishOrder = function() {
|
||||
cart([]);
|
||||
hideCartDetails();
|
||||
showCatalog();
|
||||
$("#finishOrderModal").modal('show');
|
||||
}
|
||||
// The order template
|
||||
var showCatalog = function () {
|
||||
visibleCatalog(true);
|
||||
};
|
||||
var finishOrder = function () {
|
||||
cart([]);
|
||||
hideCartDetails();
|
||||
showCatalog();
|
||||
$("#finishOrderModal").modal("show");
|
||||
};
|
||||
|
||||
var visibleCatalog = ko.observable(true);
|
||||
var visibleCart = ko.observable(false);
|
||||
var visibleCatalog = ko.observable(true);
|
||||
var visibleCart = ko.observable(false);
|
||||
|
||||
return {
|
||||
// first chapter
|
||||
searchTerm: searchTerm,
|
||||
catalog: filteredCatalog,
|
||||
newProduct: newProduct,
|
||||
addProduct: addProduct,
|
||||
// second chapter
|
||||
cart: cart,
|
||||
showCartDetails: showCartDetails,
|
||||
addToCart: addToCart,
|
||||
totalItems: totalItems,
|
||||
grandTotal: grandTotal,
|
||||
removeFromCart: removeFromCart,
|
||||
hideCartDetails: hideCartDetails,
|
||||
showOrder: showOrder,
|
||||
showCatalog: showCatalog,
|
||||
finishOrder: finishOrder,
|
||||
visibleCatalog: visibleCatalog,
|
||||
visibleCart: visibleCart
|
||||
};
|
||||
return {
|
||||
// first chapter
|
||||
searchTerm: searchTerm,
|
||||
catalog: filteredCatalog,
|
||||
newProduct: newProduct,
|
||||
addProduct: addProduct,
|
||||
// second chapter
|
||||
cart: cart,
|
||||
showCartDetails: showCartDetails,
|
||||
addToCart: addToCart,
|
||||
totalItems: totalItems,
|
||||
grandTotal: grandTotal,
|
||||
removeFromCart: removeFromCart,
|
||||
hideCartDetails: hideCartDetails,
|
||||
showOrder: showOrder,
|
||||
showCatalog: showCatalog,
|
||||
finishOrder: finishOrder,
|
||||
visibleCatalog: visibleCatalog,
|
||||
visibleCart: visibleCart,
|
||||
};
|
||||
})();
|
||||
|
||||
var templates = [
|
||||
'header',
|
||||
'catalog',
|
||||
'cart',
|
||||
'cart-item',
|
||||
'cart-widget',
|
||||
'order',
|
||||
'add-to-catalog-modal',
|
||||
'finish-order-modal'
|
||||
"header",
|
||||
"catalog",
|
||||
"cart",
|
||||
"cart-item",
|
||||
"cart-widget",
|
||||
"order",
|
||||
"add-to-catalog-modal",
|
||||
"finish-order-modal",
|
||||
];
|
||||
|
||||
var busy = templates.length;
|
||||
templates.forEach(function(tpl){
|
||||
"use strict";
|
||||
$.get('views/' + tpl + '.html').then(function(data) {
|
||||
$('body').append(data);
|
||||
busy--;
|
||||
if (!busy) {
|
||||
ko.applyBindings(vm);
|
||||
}
|
||||
})
|
||||
})
|
||||
templates.forEach(function (tpl) {
|
||||
"use strict";
|
||||
$.get("views/" + tpl + ".html").then(function (data) {
|
||||
$("body").append(data);
|
||||
busy--;
|
||||
if (!busy) {
|
||||
ko.applyBindings(vm);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue