Created
December 5, 2015 09:39
-
-
Save anonymous/b1521d894dfbfc6df996 to your computer and use it in GitHub Desktop.
Deals Hub // source https://jsbin.com/bitizu
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html data-ng-app="DealsHub"> | |
<head> | |
<meta charset="utf-8"> | |
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
<meta name="viewport" content="width=device-width, initial-scale=1"> | |
<title>Deals Hub</title> | |
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> | |
<link href='https://fonts.googleapis.com/css?family=Lato:300' rel='stylesheet' type='text/css'> | |
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.2/normalize.min.css" rel="stylesheet" type="text/css" /> | |
<link rel='stylesheet' href='http://cdnjs.cloudflare.com/ajax/libs/angular-loading-bar/0.7.1/loading-bar.min.css' type='text/css' media='all' /> | |
<script src="https://code.jquery.com/jquery.min.js"></script> | |
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> | |
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script> | |
<script type='text/javascript' src='http://cdnjs.cloudflare.com/ajax/libs/angular-loading-bar/0.7.1/loading-bar.min.js'></script> | |
<style id="jsbin-css"> | |
body{ | |
background: #F78536; | |
font-family:'Lato'; | |
font-weight: 300; | |
} | |
::-webkit-scrollbar { | |
display: none; | |
} | |
.logo { | |
padding: 0px 50px; | |
font-size: 600%; | |
} | |
.deals-info{ | |
padding: 0px 50px; | |
} | |
.deals-grid { | |
padding:0 10px; | |
} | |
.row-centered { | |
text-align:center; | |
} | |
.col-centered { | |
display: inline-block; | |
float: none; | |
/* reset the text-align */ | |
text-align: left; | |
/* inline-block space fix */ | |
margin-right: -4px; | |
} | |
.deal { | |
background: #FFF; | |
margin: 15px 5px; | |
border-radius: 3px; | |
overflow: hidden; | |
} | |
.deal img { | |
display: block; | |
height: 220px; | |
width: auto; | |
margin: auto; | |
padding: 15px; | |
} | |
.deal img:hover{ | |
opacity: 0.8; | |
} | |
.product-details { | |
background: #eaebec; | |
padding: 15px; | |
margin-top: 30px; | |
font-weight: 300; | |
} | |
.product-name { | |
text-transform: capitalize; | |
} | |
.product-action h3 { | |
display: inline-block; | |
} | |
.product-action a { | |
text-decoration: none; | |
color: inherit; | |
margin: 10px auto; | |
} | |
.product-link { | |
position: relative; | |
padding: 20px 20px 0 20px; | |
color: #ccc; | |
} | |
.product-discount{ | |
display: inline-block; | |
position: relative; | |
float: right; | |
padding: 20px 20px 0 20px; | |
color: #222; | |
font-size: 150%; | |
overflow: hidden; | |
} | |
</style> | |
</head> | |
<body data-ng-controller="HomeController as vm"> | |
<!-- HomeView.html --> | |
<nav class="deals-menu"> | |
<h3 class="pull-right deals-info">Likes: {{vm.likes}} <br> Api Hits: {{vm.hits}}</h3> | |
<h1 class="logo">DealsHub | |
<small>by Nutanix</small> | |
</h1> | |
</nav> | |
<div class="row deals-grid row-centered"> | |
<div class="col-md-3 col-xs-12 col-centered" data-ng-repeat="deal in vm.deals"> | |
<div class="deal"> | |
<a class="product-link" ng-href="{{deal.link}}" target="_blank"> | |
<h3 class="glyphicon glyphicon-link" aria-hidden="true"></h3> | |
</a> | |
<span class="product-discount">{{deal.discount}}</span> | |
<img class="" data-ng-src="{{deal.image}}" alt="Product Image"> | |
<div class="product-details"> | |
<h4 class="product-price pull-right"> | |
₹ {{deal.actual_price - (deal.actual_price * vm.parseInt(deal.discount)/100) | number: 0}} | |
</h4> | |
<h4 class="product-name">{{deal.name}}</h4> | |
<div class="product-action pull-right"> | |
<a href class="" ng-click="vm.setLike($index)"> | |
<h3 class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></h3> | |
</a> | |
<h3>{{deal.likes}}</h3> | |
</div> | |
<h5 class="product-provider text-muted">{{deal.provider}}</h5> | |
<div class="product-rating"> | |
<span ng-repeat="rating in vm.getRatings(deal.rating) track by $index" ng-class="['glyphicon', { | |
'glyphicon-star': rating, | |
'glyphicon-star-empty': !rating | |
}]" aria-hidden="true"> | |
</span> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
<script id="jsbin-javascript"> | |
// dealshub.module.js | |
;(function(){ | |
angular | |
.module('DealsHub', ['angular-loading-bar']); | |
})(); | |
// Home.controller.js | |
;(function(){ | |
angular | |
.module('DealsHub') | |
.controller('HomeController', HomeController); | |
HomeController.$inject = ['$scope', '$interval', 'DealsService', 'LikesService']; | |
function HomeController($scope, $interval, DealsService, LikesService) { | |
var vm = this; | |
vm.deals = []; | |
vm.hits = 0; | |
vm.likes = 0; | |
vm.starred = []; | |
vm.fetchDeals = fetchDeals; | |
vm.fetchHits = fetchHits; | |
vm.getRatings = getRatings; | |
vm.parseInt = parseInt; | |
vm.setLike = setLike; | |
vm.getLike = getLike; | |
vm.fetchLikes = fetchLikes; | |
// fetch intial deals | |
fetchDeals(); | |
// fetch initial hits on load | |
fetchHits(); | |
// fetch initial likes on load | |
fetchLikes(); | |
// Sync hits every 10 seconds | |
$interval(function() { | |
fetchHits(); | |
}, 10000); | |
function fetchDeals() { | |
DealsService | |
.fetch() | |
.then(function(response) { | |
vm.deals = response.data.deals; | |
vm.deals.map(function(val,index) { | |
vm.deals[index].likes = getLike(index); | |
}); | |
}); | |
} | |
function fetchHits() { | |
DealsService | |
.hits() | |
.then(function(response) { | |
vm.hits = response.data.api_hits; | |
}); | |
} | |
function getRatings(num) { | |
var max = Math.round(num); | |
var ratings = [1,1,1,1,1]; | |
var i; | |
for(i=0; i<5; i++){ | |
if(i+1 > max) | |
ratings[i] = 0; | |
} | |
return ratings; | |
} | |
function setLike(index) { | |
LikesService.set(index); | |
vm.deals[index].likes += 1; | |
fetchLikes(); | |
} | |
function getLike(index) { | |
return LikesService.get(index); | |
} | |
function fetchLikes() { | |
vm.likes = LikesService.total(); | |
} | |
} | |
})(); | |
// Deals.service.js | |
;(function(){ | |
angular | |
.module('DealsHub') | |
.factory('DealsService', DealsService); | |
DealsService.$inject = ['$http']; | |
function DealsService($http) { | |
var api = "https://nutanix.0x10.info/api/deals"; | |
return { | |
fetch: fetchDeals, | |
hits: getHits | |
}; | |
function fetchDeals() { | |
return $http | |
.get(api, { | |
params: { | |
type: 'json', | |
query: 'list_deals' | |
} | |
}); | |
} | |
function getHits() { | |
return $http | |
.get(api, { | |
params: { | |
type: 'json', | |
query: 'api_hits' | |
} | |
}); | |
} | |
} | |
})(); | |
// Likes.service.js | |
;(function(){ | |
angular | |
.module('DealsHub') | |
.factory('LikesService', LikesService); | |
function LikesService() { | |
return { | |
set: setLike, | |
get: getLike, | |
total: getTotalLikes, | |
}; | |
function setLike(index) { | |
var likes = JSON.parse(localStorage.getItem('Likes')); | |
if(likes === null) | |
likes = []; | |
if(likes[index] === undefined) | |
likes[index] = 1; | |
else | |
likes[index] += 1; | |
localStorage.setItem('Likes',JSON.stringify(likes)); | |
} | |
function getLike(index) { | |
var likes = JSON.parse(localStorage.getItem('Likes')); | |
if(likes === null) | |
return 0; | |
return likes[index] || 0; | |
} | |
function getTotalLikes() { | |
var likes = JSON.parse(localStorage.getItem('Likes')); | |
if(likes === null) | |
return 0; | |
return likes | |
.reduce(function(prev, next) { | |
return next + prev; | |
}); | |
} | |
} | |
})(); | |
</script> | |
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html> | |
<html data-ng-app="DealsHub"> | |
<head> | |
<meta charset="utf-8"> | |
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
<meta name="viewport" content="width=device-width, initial-scale=1"> | |
<title>Deals Hub</title> | |
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> | |
<link href='https://fonts.googleapis.com/css?family=Lato:300' rel='stylesheet' type='text/css'> | |
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.2/normalize.min.css" rel="stylesheet" type="text/css" /> | |
<link rel='stylesheet' href='//cdnjs.cloudflare.com/ajax/libs/angular-loading-bar/0.7.1/loading-bar.min.css' type='text/css' media='all' /> | |
<script src="https://code.jquery.com/jquery.min.js"><\/script> | |
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"><\/script> | |
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"><\/script> | |
<script type='text/javascript' src='//cdnjs.cloudflare.com/ajax/libs/angular-loading-bar/0.7.1/loading-bar.min.js'><\/script> | |
</head> | |
<body data-ng-controller="HomeController as vm"> | |
<\!-- HomeView.html --> | |
<nav class="deals-menu"> | |
<h3 class="pull-right deals-info">Likes: {{vm.likes}} <br> Api Hits: {{vm.hits}}</h3> | |
<h1 class="logo">DealsHub | |
<small>by Nutanix</small> | |
</h1> | |
</nav> | |
<div class="row deals-grid row-centered"> | |
<div class="col-md-3 col-xs-12 col-centered" data-ng-repeat="deal in vm.deals"> | |
<div class="deal"> | |
<a class="product-link" ng-href="{{deal.link}}" target="_blank"> | |
<h3 class="glyphicon glyphicon-link" aria-hidden="true"></h3> | |
</a> | |
<span class="product-discount">{{deal.discount}}</span> | |
<img class="" data-ng-src="{{deal.image}}" alt="Product Image"> | |
<div class="product-details"> | |
<h4 class="product-price pull-right"> | |
₹ {{deal.actual_price - (deal.actual_price * vm.parseInt(deal.discount)/100) | number: 0}} | |
</h4> | |
<h4 class="product-name">{{deal.name}}</h4> | |
<div class="product-action pull-right"> | |
<a href class="" ng-click="vm.setLike($index)"> | |
<h3 class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></h3> | |
</a> | |
<h3>{{deal.likes}}</h3> | |
</div> | |
<h5 class="product-provider text-muted">{{deal.provider}}</h5> | |
<div class="product-rating"> | |
<span ng-repeat="rating in vm.getRatings(deal.rating) track by $index" ng-class="['glyphicon', { | |
'glyphicon-star': rating, | |
'glyphicon-star-empty': !rating | |
}]" aria-hidden="true"> | |
</span> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</body> | |
</html> | |
</script> | |
<script id="jsbin-source-css" type="text/css">body{ | |
background: #F78536; | |
font-family:'Lato'; | |
font-weight: 300; | |
} | |
::-webkit-scrollbar { | |
display: none; | |
} | |
.logo { | |
padding: 0px 50px; | |
font-size: 600%; | |
} | |
.deals-info{ | |
padding: 0px 50px; | |
} | |
.deals-grid { | |
padding:0 10px; | |
} | |
.row-centered { | |
text-align:center; | |
} | |
.col-centered { | |
display: inline-block; | |
float: none; | |
/* reset the text-align */ | |
text-align: left; | |
/* inline-block space fix */ | |
margin-right: -4px; | |
} | |
.deal { | |
background: #FFF; | |
margin: 15px 5px; | |
border-radius: 3px; | |
overflow: hidden; | |
} | |
.deal img { | |
display: block; | |
height: 220px; | |
width: auto; | |
margin: auto; | |
padding: 15px; | |
} | |
.deal img:hover{ | |
opacity: 0.8; | |
} | |
.product-details { | |
background: #eaebec; | |
padding: 15px; | |
margin-top: 30px; | |
font-weight: 300; | |
} | |
.product-name { | |
text-transform: capitalize; | |
} | |
.product-action h3 { | |
display: inline-block; | |
} | |
.product-action a { | |
text-decoration: none; | |
color: inherit; | |
margin: 10px auto; | |
} | |
.product-link { | |
position: relative; | |
padding: 20px 20px 0 20px; | |
color: #ccc; | |
} | |
.product-discount{ | |
display: inline-block; | |
position: relative; | |
float: right; | |
padding: 20px 20px 0 20px; | |
color: #222; | |
font-size: 150%; | |
overflow: hidden; | |
} | |
</script> | |
<script id="jsbin-source-javascript" type="text/javascript">// dealshub.module.js | |
;(function(){ | |
angular | |
.module('DealsHub', ['angular-loading-bar']); | |
})(); | |
// Home.controller.js | |
;(function(){ | |
angular | |
.module('DealsHub') | |
.controller('HomeController', HomeController); | |
HomeController.$inject = ['$scope', '$interval', 'DealsService', 'LikesService']; | |
function HomeController($scope, $interval, DealsService, LikesService) { | |
var vm = this; | |
vm.deals = []; | |
vm.hits = 0; | |
vm.likes = 0; | |
vm.starred = []; | |
vm.fetchDeals = fetchDeals; | |
vm.fetchHits = fetchHits; | |
vm.getRatings = getRatings; | |
vm.parseInt = parseInt; | |
vm.setLike = setLike; | |
vm.getLike = getLike; | |
vm.fetchLikes = fetchLikes; | |
// fetch intial deals | |
fetchDeals(); | |
// fetch initial hits on load | |
fetchHits(); | |
// fetch initial likes on load | |
fetchLikes(); | |
// Sync hits every 10 seconds | |
$interval(function() { | |
fetchHits(); | |
}, 10000); | |
function fetchDeals() { | |
DealsService | |
.fetch() | |
.then(function(response) { | |
vm.deals = response.data.deals; | |
vm.deals.map(function(val,index) { | |
vm.deals[index].likes = getLike(index); | |
}); | |
}); | |
} | |
function fetchHits() { | |
DealsService | |
.hits() | |
.then(function(response) { | |
vm.hits = response.data.api_hits; | |
}); | |
} | |
function getRatings(num) { | |
var max = Math.round(num); | |
var ratings = [1,1,1,1,1]; | |
var i; | |
for(i=0; i<5; i++){ | |
if(i+1 > max) | |
ratings[i] = 0; | |
} | |
return ratings; | |
} | |
function setLike(index) { | |
LikesService.set(index); | |
vm.deals[index].likes += 1; | |
fetchLikes(); | |
} | |
function getLike(index) { | |
return LikesService.get(index); | |
} | |
function fetchLikes() { | |
vm.likes = LikesService.total(); | |
} | |
} | |
})(); | |
// Deals.service.js | |
;(function(){ | |
angular | |
.module('DealsHub') | |
.factory('DealsService', DealsService); | |
DealsService.$inject = ['$http']; | |
function DealsService($http) { | |
var api = "https://nutanix.0x10.info/api/deals"; | |
return { | |
fetch: fetchDeals, | |
hits: getHits | |
}; | |
function fetchDeals() { | |
return $http | |
.get(api, { | |
params: { | |
type: 'json', | |
query: 'list_deals' | |
} | |
}); | |
} | |
function getHits() { | |
return $http | |
.get(api, { | |
params: { | |
type: 'json', | |
query: 'api_hits' | |
} | |
}); | |
} | |
} | |
})(); | |
// Likes.service.js | |
;(function(){ | |
angular | |
.module('DealsHub') | |
.factory('LikesService', LikesService); | |
function LikesService() { | |
return { | |
set: setLike, | |
get: getLike, | |
total: getTotalLikes, | |
}; | |
function setLike(index) { | |
var likes = JSON.parse(localStorage.getItem('Likes')); | |
if(likes === null) | |
likes = []; | |
if(likes[index] === undefined) | |
likes[index] = 1; | |
else | |
likes[index] += 1; | |
localStorage.setItem('Likes',JSON.stringify(likes)); | |
} | |
function getLike(index) { | |
var likes = JSON.parse(localStorage.getItem('Likes')); | |
if(likes === null) | |
return 0; | |
return likes[index] || 0; | |
} | |
function getTotalLikes() { | |
var likes = JSON.parse(localStorage.getItem('Likes')); | |
if(likes === null) | |
return 0; | |
return likes | |
.reduce(function(prev, next) { | |
return next + prev; | |
}); | |
} | |
} | |
})(); | |
</script></body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
body{ | |
background: #F78536; | |
font-family:'Lato'; | |
font-weight: 300; | |
} | |
::-webkit-scrollbar { | |
display: none; | |
} | |
.logo { | |
padding: 0px 50px; | |
font-size: 600%; | |
} | |
.deals-info{ | |
padding: 0px 50px; | |
} | |
.deals-grid { | |
padding:0 10px; | |
} | |
.row-centered { | |
text-align:center; | |
} | |
.col-centered { | |
display: inline-block; | |
float: none; | |
/* reset the text-align */ | |
text-align: left; | |
/* inline-block space fix */ | |
margin-right: -4px; | |
} | |
.deal { | |
background: #FFF; | |
margin: 15px 5px; | |
border-radius: 3px; | |
overflow: hidden; | |
} | |
.deal img { | |
display: block; | |
height: 220px; | |
width: auto; | |
margin: auto; | |
padding: 15px; | |
} | |
.deal img:hover{ | |
opacity: 0.8; | |
} | |
.product-details { | |
background: #eaebec; | |
padding: 15px; | |
margin-top: 30px; | |
font-weight: 300; | |
} | |
.product-name { | |
text-transform: capitalize; | |
} | |
.product-action h3 { | |
display: inline-block; | |
} | |
.product-action a { | |
text-decoration: none; | |
color: inherit; | |
margin: 10px auto; | |
} | |
.product-link { | |
position: relative; | |
padding: 20px 20px 0 20px; | |
color: #ccc; | |
} | |
.product-discount{ | |
display: inline-block; | |
position: relative; | |
float: right; | |
padding: 20px 20px 0 20px; | |
color: #222; | |
font-size: 150%; | |
overflow: hidden; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// dealshub.module.js | |
;(function(){ | |
angular | |
.module('DealsHub', ['angular-loading-bar']); | |
})(); | |
// Home.controller.js | |
;(function(){ | |
angular | |
.module('DealsHub') | |
.controller('HomeController', HomeController); | |
HomeController.$inject = ['$scope', '$interval', 'DealsService', 'LikesService']; | |
function HomeController($scope, $interval, DealsService, LikesService) { | |
var vm = this; | |
vm.deals = []; | |
vm.hits = 0; | |
vm.likes = 0; | |
vm.starred = []; | |
vm.fetchDeals = fetchDeals; | |
vm.fetchHits = fetchHits; | |
vm.getRatings = getRatings; | |
vm.parseInt = parseInt; | |
vm.setLike = setLike; | |
vm.getLike = getLike; | |
vm.fetchLikes = fetchLikes; | |
// fetch intial deals | |
fetchDeals(); | |
// fetch initial hits on load | |
fetchHits(); | |
// fetch initial likes on load | |
fetchLikes(); | |
// Sync hits every 10 seconds | |
$interval(function() { | |
fetchHits(); | |
}, 10000); | |
function fetchDeals() { | |
DealsService | |
.fetch() | |
.then(function(response) { | |
vm.deals = response.data.deals; | |
vm.deals.map(function(val,index) { | |
vm.deals[index].likes = getLike(index); | |
}); | |
}); | |
} | |
function fetchHits() { | |
DealsService | |
.hits() | |
.then(function(response) { | |
vm.hits = response.data.api_hits; | |
}); | |
} | |
function getRatings(num) { | |
var max = Math.round(num); | |
var ratings = [1,1,1,1,1]; | |
var i; | |
for(i=0; i<5; i++){ | |
if(i+1 > max) | |
ratings[i] = 0; | |
} | |
return ratings; | |
} | |
function setLike(index) { | |
LikesService.set(index); | |
vm.deals[index].likes += 1; | |
fetchLikes(); | |
} | |
function getLike(index) { | |
return LikesService.get(index); | |
} | |
function fetchLikes() { | |
vm.likes = LikesService.total(); | |
} | |
} | |
})(); | |
// Deals.service.js | |
;(function(){ | |
angular | |
.module('DealsHub') | |
.factory('DealsService', DealsService); | |
DealsService.$inject = ['$http']; | |
function DealsService($http) { | |
var api = "https://nutanix.0x10.info/api/deals"; | |
return { | |
fetch: fetchDeals, | |
hits: getHits | |
}; | |
function fetchDeals() { | |
return $http | |
.get(api, { | |
params: { | |
type: 'json', | |
query: 'list_deals' | |
} | |
}); | |
} | |
function getHits() { | |
return $http | |
.get(api, { | |
params: { | |
type: 'json', | |
query: 'api_hits' | |
} | |
}); | |
} | |
} | |
})(); | |
// Likes.service.js | |
;(function(){ | |
angular | |
.module('DealsHub') | |
.factory('LikesService', LikesService); | |
function LikesService() { | |
return { | |
set: setLike, | |
get: getLike, | |
total: getTotalLikes, | |
}; | |
function setLike(index) { | |
var likes = JSON.parse(localStorage.getItem('Likes')); | |
if(likes === null) | |
likes = []; | |
if(likes[index] === undefined) | |
likes[index] = 1; | |
else | |
likes[index] += 1; | |
localStorage.setItem('Likes',JSON.stringify(likes)); | |
} | |
function getLike(index) { | |
var likes = JSON.parse(localStorage.getItem('Likes')); | |
if(likes === null) | |
return 0; | |
return likes[index] || 0; | |
} | |
function getTotalLikes() { | |
var likes = JSON.parse(localStorage.getItem('Likes')); | |
if(likes === null) | |
return 0; | |
return likes | |
.reduce(function(prev, next) { | |
return next + prev; | |
}); | |
} | |
} | |
})(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment