Last active
September 7, 2016 11:51
-
-
Save ericatsydney/5ebe2e3205d94195ce1f9873aaaf15e8 to your computer and use it in GitHub Desktop.
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> | |
<head> | |
<meta charset="UTF-8" /> | |
<title>Data Mining and Trend</title> | |
<link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"/> | |
<link rel="stylesheet" type="text/css" href="http://kenwheeler.github.io/slick/slick/slick-theme.css"/> | |
<link rel="stylesheet" type="text/css" href="http://kenwheeler.github.io/slick/css/style.css"/> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.js"></script> | |
<script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script> | |
<script src="https://code.jquery.com/jquery-1.12.4.js" integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU=" crossorigin="anonymous"></script> | |
<script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script> | |
<style> | |
#dataMiningApp { | |
margin: 30px; | |
} | |
.slick-prev:before, | |
.slick-next:before { | |
color: #222; | |
} | |
.slick-caption { | |
position: absolute; | |
top: 48%; | |
color: #777; | |
width: 100%; | |
text-align: center; | |
} | |
.slick-slide { position: relative;} | |
.slick-caption.isNew { | |
color: #fff; | |
} | |
</style> | |
</head> | |
<body> | |
<div id="dataMiningApp"></div> | |
<script type="text/babel"> | |
var destination1 = 'https://gist.githubusercontent.com/ericatsydney/b11ffbb5f432ae36df36bfd973c8b67c/raw/b7afb64a8fec9b14026d1c29be974448edab9578/destination.json'; | |
var destination2 = 'https://gist.githubusercontent.com/ericatsydney/5f316f5693e573e2ae2506945fb413a9/raw/0621094515d3b3640b7bd598f38dae40289ed32c/destination-2.json'; | |
var DestinationTrend = React.createClass({ | |
render: function() { | |
var createItem = function(item) { | |
var imageUrl = 'http://placehold.it/300x200/d0cdc7/d0cdc7'; | |
var isNewClass = 'slick-caption'; | |
console.log(item.isNew); | |
if (item.isNew) { | |
imageUrl = 'http://placehold.it/300x200/cc0c00/cc0c00'; | |
isNewClass += ' isNew'; | |
} | |
console.log(imageUrl); | |
return <div key={item.id}> <img src={imageUrl}></img> <span className={isNewClass}>{item.text}</span> </div>; | |
}; | |
return ( | |
<div> | |
<h2>Destination Trend</h2> | |
<div className='carousel slider slider-nav slick-slider slick-dotted'> {this.props.items.map(createItem)}</div> | |
</div>); | |
} | |
}); | |
var HotProduct = React.createClass({ | |
render: function() { | |
var createProduct = function(item) { | |
return <div key={item.id}> <img data-lazy={item.image}></img> {item.destination} </div>; | |
}; | |
return ( | |
<div> | |
<h2> Hot Product </h2> | |
<div className='product-carousel slider slider-nav slick-slider slick-dotted'> {this.props.items.map(createProduct)}</div> | |
</div>); | |
} | |
}); | |
var DataMiningApp = React.createClass({ | |
handleChange: function() { | |
$.get(destination2, function(data) { | |
var temp = []; | |
var $result = $.parseJSON(data); | |
var _app = this; | |
$.each($result.Destinations, function(key, destination) { | |
if (destination.Rank < 11) { | |
var isNew = true; | |
var locationName = destination.Destination.hasOwnProperty('CityName') ? destination.Destination.CityName: destination.Destination.MetropolitanAreaName; | |
$.each(_app.state.items, function(index, preDestination) { | |
if (preDestination.text === locationName) { | |
isNew = false; | |
} | |
}.bind(this)); | |
temp.push({'id': destination.Rank, 'text': locationName, 'isNew': isNew}); | |
} | |
}); | |
_app.setState({items: temp}); | |
}.bind(this)); | |
}, | |
getInitialState: function() { | |
return {items: [], products: []} | |
}, | |
componentDidUpdate: function() { | |
if (!$('.carousel').hasClass('slick-initialized')) { | |
$('.carousel').slick({ | |
lazyLoad: 'ondemand', | |
slidesToShow: 3, | |
slidesToScroll: 1 | |
}); | |
} | |
if (this.state.products.length > 8 && !$('.product-carousel').hasClass('slick-initialized')) { | |
$('.product-carousel').slick({ | |
lazyLoad: 'ondemand', | |
slidesToShow: 4, | |
slidesToScroll: 1 | |
}); | |
} | |
}, | |
componentDidMount: function() { | |
$.get(destination1, function(data) { | |
var temp = []; | |
var productsArray = []; | |
var $result = $.parseJSON(data); | |
var _app = this; | |
$.each($result.Destinations, function(key, destination) { | |
if (destination.Rank < 11) { | |
var locationName = destination.Destination.hasOwnProperty('CityName') ? destination.Destination.CityName: destination.Destination.MetropolitanAreaName; | |
temp.push({'id': destination.Rank, 'text': locationName, 'isNew': false}); | |
$.get('http://acquiastage.flightcentre.com.au/api/products/search/campaign?destination=' + locationName.replace(' ', '%20') + '&category=Air%20Transportation&consumer_token=03f9090d6dd2c0ff92fc95a0237dc7d4', function(data1) { | |
if (data1.products.length && typeof data1.products[0].sku !== undefined) { | |
productsArray.push({ | |
'id': data1.products[0].sku, | |
'image': data1.products[0].image, | |
'destination': data1.products[0].destination | |
}); | |
} | |
_app.setState({products: productsArray}); | |
}); | |
} | |
}); | |
_app.setState({items: temp}); | |
}.bind(this)); | |
}, | |
render: function() { | |
return ( | |
<div> | |
<DestinationTrend items={this.state.items} /> | |
<button onClick={this.handleChange}>Update Destination</button> | |
<HotProduct items={this.state.products} /> | |
</div> | |
); | |
} | |
}); | |
ReactDOM.render(<DataMiningApp/>, document.getElementById('dataMiningApp')); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment