Skip to content

Instantly share code, notes, and snippets.

@niksrc
Forked from anonymous/index.html
Created December 5, 2015 09:40
Show Gist options
  • Save niksrc/19c7219090948d3481c0 to your computer and use it in GitHub Desktop.
Save niksrc/19c7219090948d3481c0 to your computer and use it in GitHub Desktop.
Deals Hub // source https://jsbin.com/bitizu
<!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">
&#8377; {{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">
&#8377; {{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>
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;
}
// 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