<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap-css@*" data-semver="3.0.0-rc1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.min.css" />
<script data-require="angular.js@*" data-semver="1.1.5" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js"></script>
<script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script data-require="bootstrap@*" data-semver="3.0.0-rc1" src="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css" />
<meta charset="UTF-8" />
<script src="script.js"></script>
<script src="service.js"></script>
<script src="filter.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('[data-toggle="tooltip"]').tooltip();
})
</script>
</head>
<body ng-app="daApp">
<div ng-controller="cartCtrl">
<h3> Oh my cart!</h3>
<!--<select ng-model="items" ng-options="k.title for k in items"> </select>-->
<div id="search">
<label>Search:</label>
<input ng-model="search.$" placeholder="Search anything">
<input ng-model="search.title" placeholder="Search by name">
<input ng-model="search.price" placeholder="Search by price">
</div>
<div class="alert alert-success">Show recent 5 items from {{items.length}} items in database</div>
<table class="table table-bordered">
<tbody>
<tr class="table-head">
<th>No</th>
<th>Name</th>
<th>QTY</th>
<th>Price</th>
<th>Amount</th>
<th></th>
</tr>
<tr ng-repeat="item in items | filter:search | orderBy:'timestamp' | limitTo:-5"
ng-click="activeMe($index)" ng-class="{'select-row': $index == itIndex}">
<td >{{$index+1}}</td>
<td>{{item.title | splitCamel | titleCase }}</td>
<td>
<input type="number" ng-model="item.qty" data-toggle="tooltip" title="Fill quantity of {{item.title}}" data-placement="bottom" />
</td>
<td class="text-right">{{item.price}}</td>
<td class="text-right" ng-model="amount">{{item.qty * item.price | currency }}</td>
<td><button class="btn btn-mini btn-danger" ng-click="remove($index)">×</button></td>
</tr>
</tbody>
</table>
<!--<input ng-model="setqty" />-->
<!--<div>TOTAL PRICE? : {{ items | sumKey:'price' }}</div>-->
<div>
<div class="row">
<span class="col-6">TOTAL :</span>
<span class="col-6 text-right">{{bill.total | currency }}</span>
<span class="col-6">Discount :</span>
<span class="col-6 text-right">{{bill.discount | currency}}</span>
<span class="col-6">SUBTOTAL :</span>
<span class="col-6 text-right">{{bill.subtotal | currency}}</span>
</div>
</div>
<br /> <br />
<form name="checkoutForm" role="form">
<legend>Check out </legend>
<div>{{thank}}</div>
<div class="form-group row">
<div class="col-12">
<label>Name:</label>
<input class="form-control" ng-model="client.name" type="text" name="name" id="name" value="" placeholder="Name" required />
</div>
</div>
<div class="row">
<div class="col-6">
<label>Age:</label>
<input class="form-control" type="number" ng-maxlength="3" required />
</div>
<div class="col-6">
<label>Tel:</label>
<input class="form-control" type="text" name="unumber" required />
<div style="color:red">
<p ng-show="checkoutForm.unumber.$error.required">กรอกเบอร์ด้วย</p>
<p ng-show="checkoutForm.unumber.$error.number">ต้องเป็นตัวเขเท่านั้น</p>
</div>
</div>
<div class="col-12">
<label>Email:</label>
<input class="form-control" ng-model="client.email" type="email" name="uemail" required />
<div ng-show="checkoutForm.uemail.$dirty && checkoutForm.uemail.$invalid" style='color:red'>
<strong>Invalid :</strong>
<p ng-show="checkoutForm.uemail.$error.required">Please enter email</p>
<p ng-show="checkoutForm.uemail.$error.email"> รูปแบบอีเมลไม่ถูกต้อง</p>
</div>
</div>
</div>
<button ng-click="checkOut" type="submit" ng-disabled="!checkoutForm.$valid" class="btn" style="margin:20px 10px;">Checkout</button>
</form>
</div>
</body>
</html>
var app = angular.module("daApp",['itemService','filterItem']);
app.controller("cartCtrl", function($scope , Items) {
$scope.bill = {};
$scope.items = Items.query();
$scope.something = "A";
$scope.$watch(function() {
var total = 0;
for (var i = 0, len = $scope.items.length; i < len; i++) {
total = total + $scope.items[i].qty * $scope.items[i].price;
}
$scope.bill.total = total;
$scope.bill.discount = total > 100 ? 10 :0;
$scope.bill.subtotal = total - $scope.bill.discount;
});
$scope.activeMe = function(index) {
$scope.itIndex = index;
};
$scope.remove = function(index) {
$scope.items.splice(index,1);
};
$scope.thank = "";
$scope.checkOut = function() {
$scope.thank = "Thank" + $scope.client.name + "have a good day!"
}
});
app.directive("ngbkFocus", function() {
return {
link: function(scope, element ,attrs , controller) {
elment[0].focus();
}
};
});
.select-row {
background: lightseagreen!important;
}
#search {
background:#eee;padding:10px;margin: 20px 0;
}
.table-head th {
border-bottom:3px solid #ccc!important;
text-transform:uppercase;
}
var app = angular.module("itemService",[]);
app.factory("Items", function() {
var items = {}
items.query = function() {
return [
{title:"lays rock",qty:"0",price:"35"},
{title:"paprica reloaed",qty:"0",price:"20"},
{title:"LayRockAndRoll!",qty:"0",price:"20"},
{title:"Homie",qty:"0",price:"12"},
{title:"Princle",qty:"0",price:"59"},
{title:"kokea-mun-tukmed",qty:"0",price:"10"} ,
{title:"ปูไทย",qty:"0",price:"5"} ,
{title:"Conne",qty:"0",price:"52"} ,
{title:"SpamBig",qty:"0",price:"132"}
];
};
return items;
});
filterModule = angular.module('filterItem',[]);
filterModule.filter("titleCase", function() {
var titleCaseFilter = function(input) {
var words = input.split(' ');
for (var i = 0;i < words.length; i++) {
words[i] = words[i].charAt(0).toUpperCase() + words[i].slice(1);
}
return words.join(' ');
};
return titleCaseFilter;
});
filterModule.filter("splitCamel", function() {
return function(input) {
return input.match(/[A-Z || a-z][a-z]+/g).join(' ');
};
});
filterModule.filter('sumKey', function() {
return function(input, params){
var totalSum = 0;
for(var i = 0; i < input.length; i++){
totalSum += parseInt(input[i][params], 10);
}
return totalSum;
};
});