genofire/hs_monolith
genofire
/
hs_monolith
Archived
1
0
Fork 0
This repository has been archived on 2020-09-27. You can view files and clone it, but cannot push or open issues or pull requests.
hs_monolith/webroot/dummy_cart/index.html

225 lines
6.4 KiB
HTML
Raw Permalink Normal View History

2017-06-02 16:19:49 +02:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link href="/node_modules/semantic-ui-css/semantic.min.css" rel="stylesheet"/>
<link href="/static/css/main.css" rel="stylesheet"/>
<title>microStock Dummy Cart</title>
2017-06-02 16:19:49 +02:00
</head>
<body ng-app="microStockDummieCare" ng-controller="MainCtrl">
<nav class="ui stackable inverted menu">
<div class="ui container">
<div class="header item">Dummy Cart</div>
<div class="right menu">
<a class="ui item" ng-click="reset()">
<i class="undo icon"></i>
Reset
</a>
</div>
</div>
</nav>
<div class="ui container">
<form class="ui form" ng-submit="add()">
<div class="three fields">
<div class="field">
<div class="ui fluid search selection dropdown">
<input name="country" type="hidden">
<i class="dropdown icon"></i>
<div class="default text">Select Product</div>
<div class="menu">
<div class="item" ng-repeat="item in products" data-value="{{item.id}}"><img class="icon"
ng-src="{{'/api/good/availablity/'+item.id| reloadSrc}}"/>{{item.name}}
</div>
</div>
</div>
</div>
<div class="field">
<input placeholder="Count" type="number" min="1" max="50" ng-model="goods.count">
</div>
<div class="field">
<button type="submit" class="ui button" tabindex="0">Add</button>
</div>
</div>
</form>
<table class="ui table">
<thead>
<tr>
<th>Count</th>
<th>Product</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in cart">
<td>{{item.count}}</td>
<td>{{getProduct(item.product_id).name}}</td>
<td>
<div class="ui button icon" ng-click="del(item)"><i class="icon trash"></i></div>
</td>
</tr>
</tbody>
</table>
<button class="ui icon button" tabindex="0" ng-click="buy()"><i class="icon shop"></i>Buy</button>
</div>
<footer class="ui vertical footer segment">
2017-06-02 16:19:49 +02:00
<div class="ui center aligned container">
<p>&copy; 2017 MM / Go - Team</p>
2017-06-02 16:19:49 +02:00
</div>
</footer>
<script src="/node_modules/jquery/dist/jquery.min.js"></script>
<script src="/node_modules/semantic-ui-css/semantic.min.js"></script>
<script src="/node_modules/angular/angular.min.js"></script>
<script src="/node_modules/angular-animate/angular-animate.min.js"></script>
<script src="/node_modules/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="/node_modules/angular-loading-bar/build/loading-bar.min.js"></script>
<script>
2017-06-02 16:19:49 +02:00
var config = {
'microservice_dependencies': {
'products': '/api-test/product/',
'productById': '/api-test/product/%d/',
'lockGoods': '/api/goods/locking',
'unlockGoods': '/api/goods/locking',
'buyGoods': '/api/goods/locking',
2017-06-02 16:19:49 +02:00
}
};
let selectedProduct = null;
$(".dropdown").dropdown().dropdown('setting', {
onChange: function (value) {
selectedProduct = parseInt(value, 10);
console.log('changed product', selectedProduct);
}
});
function createUUID () {
let digit = new Date().getTime();
// Use high-precision timer if available
/* eslint-disable */
if (typeof performance !== 'undefined' && typeof performance.now === 'function') {
digit += performance.now();
}
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (char) => {
const result = (digit + Math.random() * 16) % 16 | 0;
digit = Math.floor(digit / 16);
return (char === 'x'
? result
: result & 0x3 | 0x8).toString(16);
});
/* eslint-enable*/
}
angular.module('microStockDummieCare', [
'angular-loading-bar',
'ngAnimate'
])
.filter('reloadSrc', function () {
return function (input) {
if (input)
return input + '?v=' + new Date().getTime();
}
})
.controller('MainCtrl',['$scope', '$http',function($scope, $http) {
$scope.products = [];
$scope.goods = {count: 1};
2017-06-02 16:19:49 +02:00
$scope.cart = [];
let secret = createUUID();
2017-06-02 16:19:49 +02:00
$http.get(config.microservice_dependencies.products).then(function(res) {
$scope.products = res.data;
});
function load() {
const tmp = JSON.parse(localStorage.getItem("cart"));
const secretTmp = JSON.parse(localStorage.getItem("cart"));
2017-06-02 16:19:49 +02:00
if(tmp) {
$scope.cart = tmp.map((item) => {
delete item.$$hashKey
return item;
});
}
if(secretTmp && secretTmp === "") {
secret = secretTmp;
}
2017-06-02 16:19:49 +02:00
}
function save() {
localStorage.setItem("cart", JSON.stringify($scope.cart));
localStorage.setItem("secret", secret);
2017-06-02 16:19:49 +02:00
}
load();
$scope.getProduct = function getProduct(id) {
2017-06-02 16:19:49 +02:00
if(id) {
return $scope.products.filter((item) => item.id === id)[0];
}
};
$scope.add = function add() {
$scope.goods.product_id = selectedProduct;
$http({
method: 'POST',
headers: {
'secret': secret
},
url: config.microservice_dependencies.lockGoods,
data: [$scope.goods]
}).then(function(res) {
2017-06-02 16:19:49 +02:00
console.log('add', $scope.goods);
$scope.cart.push($scope.goods);
save();
$scope.goods = {count: 1};
2017-06-02 16:19:49 +02:00
});
};
$scope.del = function del(entry) {
$http({
method: 'DELETE',
headers: {
'secret': secret,
'Content-Type': 'application/json',
},
url: config.microservice_dependencies.unlockGoods,
data: [entry]
}).then(function(res) {
2017-06-02 16:19:49 +02:00
console.log('del', entry);
$scope.cart = $scope.cart.filter((item) => item !== entry);
save();
});
};
$scope.buy = function buy() {
$http({
method: 'PUT',
headers: {
'secret': secret
},
url: config.microservice_dependencies.buyGoods,
}).then(function(res) {
console.log('buy');
$scope.reset();
},function(err) {
console.warn('buy', err);
});
};
$scope.reset = function reset() {
console.log("reset");
localStorage.setItem("cart", "[]");
localStorage.setItem("secret", createUUID());
load();
};
2017-06-02 16:19:49 +02:00
}]);
</script>
2017-06-02 16:19:49 +02:00
</body>
</html>