90 lines
2.3 KiB
HTML
90 lines
2.3 KiB
HTML
<!doctype html>
|
|
<html lang="et" ng-app="app">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
</head>
|
|
<body ng-controller="C1 as vm">
|
|
|
|
<div ng-repeat="item in vm.cart">
|
|
{{ item.name }}
|
|
<a href="" style="text-decoration: none" ng-click="vm.changeCount(item, -1)"> - </a>
|
|
<input size="1" ng-model="item.count" ng-change="vm.setCount(item)" ng-reflect-model="1">
|
|
<a href="" style="text-decoration: none" ng-click="vm.changeCount(item, +1)"> + </a>
|
|
</div>
|
|
|
|
<br>
|
|
Kokku: {{ vm.total }} EUR
|
|
|
|
<br><br>
|
|
|
|
<button ng-click=vm.submitOrder();>Saada tellimus</button>
|
|
|
|
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
|
|
<script>
|
|
(function () {
|
|
'use strict';
|
|
|
|
angular.module('app', []);
|
|
angular.module('app').controller('C1', function ($http) {
|
|
var vm = this;
|
|
vm.cart = [
|
|
{
|
|
"_id":0,
|
|
"name":"Banaanid (1 EUR/KG)",
|
|
"price":1,
|
|
"count":0
|
|
},
|
|
{
|
|
"_id":1,
|
|
"name":"Õunad (2 EUR/KG)",
|
|
"price":2,
|
|
"count":0
|
|
}
|
|
];
|
|
vm.total = 0;
|
|
vm.calcTotal = calcTotal;
|
|
vm.changeCount = changeCount;
|
|
vm.setCount = setCount;
|
|
vm.submitOrder = submitOrder;
|
|
|
|
calcTotal();
|
|
function calcTotal(){
|
|
var total = 0;
|
|
for (let item of vm.cart) {
|
|
total += item.price*item.count;
|
|
}
|
|
vm.total = total;
|
|
}
|
|
|
|
function changeCount(item, amount) {
|
|
var count = parseInt(item.count, 10) + amount;
|
|
if (count >= 0) {
|
|
item.count = count;
|
|
}
|
|
calcTotal();
|
|
}
|
|
|
|
function setCount(item, amount) {
|
|
// How to apply changes?
|
|
var count = parseInt(item.count, 10);
|
|
if (count == NaN) {
|
|
count = 0;
|
|
}
|
|
item.count = count;
|
|
calcTotal();
|
|
}
|
|
|
|
function submitOrder(){
|
|
$http.post("/api/cart/order", vm.cart)
|
|
.then(resp => console.log("Cart submitted", resp))
|
|
.catch(error => console.log("Submittion failed", error))
|
|
}
|
|
|
|
});
|
|
|
|
})();
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|