Skip to content

Commit

Permalink
add booking com links
Browse files Browse the repository at this point in the history
  • Loading branch information
@sommerfe
sommerfe committed Apr 17, 2020
1 parent 568dd04 commit 2e9407c
Show file tree
Hide file tree
Showing 5 changed files with 65 additions and 27 deletions.
1 change: 1 addition & 0 deletions myholiday3/CNAME
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
findmyholiday.live
5 changes: 5 additions & 0 deletions myholiday3/src/App.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -140,6 +140,7 @@ img {
text-align: center;
border: 3px solid transparent;
transition: all 0.3s;
cursor: pointer;
}

.selectable:hover {
Expand Down Expand Up @@ -277,13 +278,17 @@ img {
display: flex;
flex-direction: column;
margin: 20px;
transition: all 0.3s;
}

.calculatedLocations a{
text-decoration: none;
color: black;
}

.option:hover {
transform: scale(1.05);
}
.option h3{
margin-top: 5px;
}
Expand Down
9 changes: 6 additions & 3 deletions myholiday3/src/components/Parent.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ class Parent extends React.Component {
super(props);
this.climateRef = [];
this.areaRef = [];
this.state = {fromDate: new Date(), toDate: new Date().setDate((new Date()).getDate() + 7) , offerList: [], possibleLocations: []}
this.state = {fromDate: new Date(), toDate: new Date().setDate((new Date()).getDate() + 7) , offerList: [], possibleLocations: [], guests:2}

}

Expand Down Expand Up @@ -135,6 +135,9 @@ class Parent extends React.Component {

}

guestsChanged = (newGuests) => {
this.setState({guests: newGuests.target.value})
}

fromDateChanged = (newDate) => {
this.setState({fromDate: newDate})
Expand Down Expand Up @@ -180,7 +183,7 @@ class Parent extends React.Component {
</div>
<div id="guestsContainer" className="dataEntry">
<h4>Guests</h4>
<input type="number" min="1" max="12" id="guestsInput" placeholder="2"/>
<input type="number" min="1" max="12" id="guestsInput" placeholder="2" onChange={this.guestsChanged}/>
</div>
{/* <div id="costContainer" className="dataEntry">
<h4>Maximal Cost</h4>
Expand Down Expand Up @@ -253,7 +256,7 @@ class Parent extends React.Component {
</div>;
let html;
if(this.state.possibleLocations && this.state.possibleLocations.length > 0){
html = <SuggestedLocations key="blubb" locations={this.state.possibleLocations} />
html = <SuggestedLocations key="blubb" locations={this.state.possibleLocations} guests={this.state.guests} fromDate={this.state.fromDate} toDate={this.state.toDate} />
}
return (<div id="all">
{navigationBar}
Expand Down
31 changes: 30 additions & 1 deletion myholiday3/src/components/SuggestedLocations.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ class SuggestedLocations extends React.Component {
constructor(props) {
super(props)
this.state = {selectedLocations: this.selectLocations(this.props.locations, data) }
console.log(this.props.toDate)
}

selectLocations(locations, da){
Expand All @@ -24,8 +25,36 @@ class SuggestedLocations extends React.Component {
this.setState({selectedLocations: this.selectLocations(this.props.locations, data)})
}
}

calculateLink(cityId){
let toDate = new Date(this.props.toDate);
let fromDate = new Date(this.props.fromDate);
console.log('toDate: ' + toDate.toString())
console.log('fromDate: ' + fromDate.toString())
console.log('day: ' + toDate.getDate())

let checkinMonthday = '&checkin_monthday=' + fromDate.getDate();
let checkinMonth = '&checkin_month=' + (fromDate.getMonth() + 1);
let checkinYear = '&checkin_year=' + fromDate.getFullYear();
let checkoutMonthday = '&checkout_monthday=' + toDate.getDate();
let checkoutMonth = '&checkout_month=' + (toDate.getMonth() + 1);
let checkoutYear = '&checkout_year='+ toDate.getFullYear();
let groupAdults = '&group_adults=' + this.props.guests
let baseLink = 'https://www.booking.com/searchresults.en.html?aid=2012071&city='
let calculatedLink = baseLink + cityId + checkinMonthday + checkinMonth + checkinYear + checkoutMonthday + checkoutMonth + checkoutYear + groupAdults;
console.log(calculatedLink)
//&checkin_monthday=17
//&checkin_month=4
//&checkin_year=2020
//&checkout_monthday=30
//&checkout_month=4
//&checkout_year=2020
//&group_adults=2
return calculatedLink;
}

render(){


return (
<div className="calculatedLocationsContainer">
Expand All @@ -35,7 +64,7 @@ class SuggestedLocations extends React.Component {
<div className="optionContainer">
{
this.state.selectedLocations.map((item, i) =>
<a key={"option" + i} className="linkContainer" href="https://booking.com">
<a key={"option" + i} className="linkContainer" href={this.calculateLink(item.cityId)} target="_blank" rel="noopener noreferrer">
<div id={"option" + i} className="option">
<img src={item.image} alt="option"></img>
<h3>{item.city}</h3>
Expand Down
46 changes: 23 additions & 23 deletions myholiday3/src/data.js
View file
Original file line number Diff line number Diff line change
@@ -1,27 +1,27 @@
export const data = [
{country:"Mexico", city:"Tuxtla Gutiérrez", category:["tropical", "nature"], image:require("./assets/locations/tuxtla.jpg")},
{country:"Spain", city:"Mallorca", category:["hot", "nature", "adventure"], image:require("./assets/locations/mallorca.jpg")},
{country:"Germany", city:"Freiburg", category:["temperate", "sightseeing", "inland"], image:require("./assets/locations/freiburg.jpg")},
{country:"Switzerland", city:"St. Moritz", category:["cold", "mountain"], image:require("./assets/locations/stMoritz.jpg")},
{country:"Spain", city:"Teneriffa", category:["ocean", "hot", "nature", "relax"], image:require("./assets/locations/teneriffa.jpg")},
{country:"France", city:"Annecy", category:["mountain", "cold", "temperate", "lake", "temperate"], image:require("./assets/locations/annecy.jpg")},
{country:"Scotland", city:"Inverness", category:["lake", "temperate", "nature"], image:require("./assets/locations/inverness.jpg")},
{country:"Germany", city:"Munich", category:["inland", "sightseeing", "lake"], image:require("./assets/locations/munich.jpg")},
{country:"Turkey", city:"Antalya", category:["relax", "hot"], image:require("./assets/locations/antalya.jpg")},
{country:"France", city:"Saint Raphael", category:["adventure", "hot"], image:require("./assets/locations/saintRaphael.jpg")},
{country:"Croatia", city:"Krka", category:["nature", "hot", "ocean"], image: require("./assets/locations/krka.jpg")},
{country:"England", city:"London", category:["sightseeing", "temperate"], image: require("./assets/locations/london.jpg")},
{country:"Tahiti", city:"Bora Bora", category:["ocean", "tropical"], image: require("./assets/locations/boraBora.jpg")},
{country:"USA", city:"Hawaii", category:["tropical", "ocean", "nature", "mountain", "relax"], image: require("./assets/locations/hawaii.jpg")},
{country:"Slovenia", city:"Soča Valley", category:["adventure", "temperate", "hot", "nature"], image: require("./assets/locations/soca.jpg")},
{country:"Czech", city:"Prague", category:["sightseeing", "temperate", "inland", "nature"], image: require("./assets/locations/prague.jpg")},
{country:"Poland", city:"Warsaw", category:["sightseeing", "temperate", "inland"], image: require("./assets/locations/warsaw.jpg")},
{country:"Germany", city:"Constance", category:["nature", "temperate", "lake", "mountain"], image: require("./assets/locations/constance.jpg")},
{country:"Norway", city:"Hamar", category:["cold", "temperate", "lake"], image: require("./assets/locations/hamar.jpg")},
{country:"Spain", city:"Madrid", category:["hot", "sightseeing", "inland"], image: require("./assets/locations/madrid.jpg")},
{country:"Maledives", city:"Malé", category:["tropical", "ocean", "relax"], image: require("./assets/locations/male.jpg")},
{country:"Thailand", city:"Bangkok", category:["tropical", "sightseeing", "adventure", "relax"], image: require("./assets/locations/bangkok.jpg")},
{country:"Thailand", city:"Chiang Mai", category:["tropical", "inland", "sightseeing"], image: require("./assets/locations/chiangMai.jpg")},
{country:"Mexico", city:"Tuxtla Gutiérrez", category:["tropical", "nature"], image:require("./assets/locations/tuxtla.jpg"), cityId:"-1707140"},
{country:"Spain", city:"Mallorca", category:["hot", "nature", "adventure"], image:require("./assets/locations/mallorca.jpg"), cityId:"-395224"},
{country:"Germany", city:"Freiburg", category:["temperate", "sightseeing", "inland"], image:require("./assets/locations/freiburg.jpg"), cityId:"-1771505"},
{country:"Switzerland", city:"St. Moritz", category:["cold", "mountain"], image:require("./assets/locations/stMoritz.jpg"), cityId:"-2554009"},
{country:"Spain", city:"Teneriffa", category:["ocean", "hot", "nature", "relax"], image:require("./assets/locations/teneriffa.jpg"), cityId:"-401686"},
{country:"France", city:"Annecy", category:["mountain", "cold", "temperate", "lake", "temperate"], image:require("./assets/locations/annecy.jpg"), cityId:"-1407760"},
{country:"Scotland", city:"Inverness", category:["lake", "temperate", "nature"], image:require("./assets/locations/inverness.jpg"), cityId:"-2599537"},
{country:"Germany", city:"Munich", category:["inland", "sightseeing", "lake"], image:require("./assets/locations/munich.jpg"), cityId:"-1829149"},
{country:"Turkey", city:"Antalya", category:["relax", "hot"], image:require("./assets/locations/antalya.jpg"), cityId:"-735347"},
{country:"France", city:"Saint Raphael", category:["adventure", "hot"], image:require("./assets/locations/saintRaphael.jpg"), cityId:"-1406653"},
{country:"Croatia", city:"Krka", category:["nature", "hot", "ocean"], image: require("./assets/locations/krka.jpg"), cityId:"-95501"},
{country:"England", city:"London", category:["sightseeing", "temperate"], image: require("./assets/locations/london.jpg"), cityId:"-2601889"},
{country:"Tahiti", city:"Bora Bora", category:["ocean", "tropical"], image: require("./assets/locations/boraBora.jpg"), cityId:"900054086"},
{country:"USA", city:"Hawaii", category:["tropical", "ocean", "nature", "mountain", "relax"], image: require("./assets/locations/hawaii.jpg"), cityId:"20030916"},
{country:"Slovenia", city:"Soča Valley", category:["adventure", "temperate", "hot", "nature"], image: require("./assets/locations/soca.jpg"), cityId:"-96273"},
{country:"Czech", city:"Prague", category:["sightseeing", "temperate", "inland", "nature"], image: require("./assets/locations/prague.jpg"), cityId:"-553173"},
{country:"Poland", city:"Warsaw", category:["sightseeing", "temperate", "inland"], image: require("./assets/locations/warsaw.jpg"), cityId:"-534433"},
{country:"Germany", city:"Constance", category:["nature", "temperate", "lake", "mountain"], image: require("./assets/locations/constance.jpg"), cityId:"-1811125"},
{country:"Norway", city:"Hamar", category:["cold", "temperate", "lake"], image: require("./assets/locations/hamar.jpg"), cityId:"-261559"},
{country:"Spain", city:"Madrid", category:["hot", "sightseeing", "inland"], image: require("./assets/locations/madrid.jpg"), cityId:"-390625"},
{country:"Maledives", city:"Malé", category:["tropical", "ocean", "relax"], image: require("./assets/locations/male.jpg"), cityId:"-1306876"},
{country:"Thailand", city:"Bangkok", category:["tropical", "sightseeing", "adventure", "relax"], image: require("./assets/locations/bangkok.jpg"), cityId:"-3414440"},
{country:"Thailand", city:"Chiang Mai", category:["tropical", "inland", "sightseeing"], image: require("./assets/locations/chiangMai.jpg"), cityId:"-3247115"},
]

// relax: 5
Expand Down

0 comments on commit 2e9407c

Please sign in to comment.