2021-05-27 13:57:20 +10:00
|
|
|
"use strict";
|
2021-05-27 14:22:28 +10:00
|
|
|
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 newProduct = Product("", "", "", "");
|
|
|
|
var clearNewProduct = function () {
|
|
|
|
newProduct.name("");
|
|
|
|
newProduct.price("");
|
|
|
|
newProduct.stock("");
|
|
|
|
};
|
|
|
|
|
|
|
|
var addProduct = function (context) {
|
|
|
|
var id = new Date().valueOf(); // random id from time
|
|
|
|
|
2021-05-27 14:36:59 +10:00
|
|
|
var product = Product(id, context.name(), context.price(), context.stock());
|
2021-05-27 14:22:28 +10:00
|
|
|
catalog.push(product);
|
|
|
|
clearNewProduct();
|
|
|
|
};
|
|
|
|
|
2021-05-27 14:36:59 +10:00
|
|
|
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) {
|
2021-05-27 14:43:27 +10:00
|
|
|
var strProp = ko.unwrap(item["name"]).toLocaleLowerCase();
|
|
|
|
return (strProp.indexOf(filter) > -1);
|
2021-05-27 14:36:59 +10:00
|
|
|
});
|
|
|
|
return filtered;
|
|
|
|
});
|
2021-05-27 15:43:48 +10:00
|
|
|
|
|
|
|
var cart = ko.observableArray([]);
|
|
|
|
var showCartDetails = function () {
|
|
|
|
if (cart().length > 0) {
|
2022-04-20 23:44:00 +10:00
|
|
|
visibleCart(true);
|
2021-05-27 15:43:48 +10:00
|
|
|
}
|
|
|
|
};
|
2022-04-19 23:38:16 +10:00
|
|
|
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);
|
|
|
|
};
|
2022-04-20 21:30:56 +10:00
|
|
|
|
2022-04-20 22:02:20 +10:00
|
|
|
// The cart-widget template
|
2022-04-20 21:30:56 +10:00
|
|
|
var totalItems = ko.computed(function() {
|
|
|
|
var tmpCart = cart();
|
|
|
|
var total = 0;
|
|
|
|
tmpCart.forEach(function(item) {
|
|
|
|
total += parseInt(item.units(), 10);
|
|
|
|
});
|
|
|
|
return total;
|
|
|
|
})
|
|
|
|
var grandTotal = ko.computed(function() {
|
|
|
|
var tmpCart = cart();
|
|
|
|
var total = 0;
|
|
|
|
tmpCart.forEach(function(item) {
|
|
|
|
total += (item.units() * item.product.price());
|
|
|
|
});
|
|
|
|
return total;
|
|
|
|
})
|
2021-05-27 14:36:59 +10:00
|
|
|
|
2022-04-20 22:02:20 +10:00
|
|
|
// The cart-item template
|
2022-04-20 21:54:35 +10:00
|
|
|
var removeFromCart = function (data) {
|
|
|
|
var units = data.units();
|
|
|
|
var stock = data.product.stock();
|
|
|
|
data.product.stock(units + stock);
|
|
|
|
cart.remove(data);
|
|
|
|
}
|
|
|
|
|
2022-04-20 22:02:20 +10:00
|
|
|
// The cart template
|
|
|
|
var hideCartDetails = function() {
|
2022-04-20 23:44:00 +10:00
|
|
|
visibleCart(false);
|
2022-04-20 22:02:20 +10:00
|
|
|
};
|
|
|
|
var showOrder = function () {
|
2022-04-20 23:44:00 +10:00
|
|
|
visibleCatalog(false);
|
2022-04-20 22:02:20 +10:00
|
|
|
}
|
|
|
|
|
2022-04-20 22:33:50 +10:00
|
|
|
// The order template
|
|
|
|
var showCatalog = function () {
|
2022-04-20 23:44:00 +10:00
|
|
|
visibleCatalog(true);
|
2022-04-20 22:33:50 +10:00
|
|
|
};
|
|
|
|
var finishOrder = function() {
|
|
|
|
cart([]);
|
|
|
|
hideCartDetails();
|
|
|
|
showCatalog();
|
|
|
|
$("#finishOrderModal").modal('show');
|
|
|
|
}
|
|
|
|
|
2022-04-20 23:44:00 +10:00
|
|
|
var visibleCatalog = ko.observable(true);
|
|
|
|
var visibleCart = ko.observable(false);
|
|
|
|
|
2021-05-27 14:22:28 +10:00
|
|
|
return {
|
2021-05-27 15:43:48 +10:00
|
|
|
// first chapter
|
2021-05-27 14:36:59 +10:00
|
|
|
searchTerm: searchTerm,
|
|
|
|
catalog: filteredCatalog,
|
2021-05-27 14:22:28 +10:00
|
|
|
newProduct: newProduct,
|
|
|
|
addProduct: addProduct,
|
2021-05-27 15:43:48 +10:00
|
|
|
// second chapter
|
|
|
|
cart: cart,
|
2022-04-20 21:38:38 +10:00
|
|
|
showCartDetails: showCartDetails,
|
|
|
|
totalItems: totalItems,
|
2022-04-20 21:54:35 +10:00
|
|
|
grandTotal: grandTotal,
|
2022-04-20 22:02:20 +10:00
|
|
|
removeFromCart: removeFromCart,
|
|
|
|
hideCartDetails: hideCartDetails,
|
2022-04-20 22:33:50 +10:00
|
|
|
showOrder: showOrder,
|
|
|
|
showCatalog: showCatalog,
|
2022-04-20 23:44:00 +10:00
|
|
|
finishOrder: finishOrder,
|
|
|
|
visibleCatalog: visibleCatalog,
|
|
|
|
visibleCart: visibleCart
|
2021-05-27 14:22:28 +10:00
|
|
|
};
|
2021-05-27 12:46:22 +10:00
|
|
|
})();
|
2021-05-27 14:22:28 +10:00
|
|
|
ko.applyBindings(vm);
|