onAddDesintation(destination) {
var trip = JSON.parse(JSON.stringify(findTripByIdOrLink(this.props.trips, this.props.params.id)));
trip.destinations.push(destination);
this.props.updateTrip(trip).payload.promise.then(() => {
this.setState({destinationDialogOpened: false});
})
}
onDeleteDestination(destination) {
var trip = JSON.parse(JSON.stringify(findTripByIdOrLink(this.props.trips, this.props.params.id)));
let toDelete = trip.destinations.find(d => d.tripDates.startDate == destination.tripDates.startDate),
index = trip.destinations.indexOf(toDelete);
trip.destinations.splice(index, 1);
this.props.updateTrip(trip).payload.promise.then(() => {
})
}
onAddDesintation(addMore, destination) {
var trip = JSON.parse(JSON.stringify(findTripByIdOrLink(this.props.trips, this.props.params.id)));
trip.destinations.push(destination);
this.props.updateTrip(trip).payload.promise.then(() => {
if (!addMore) {
this.showAddDestination(null);
} else {
this.refs.addDestinationDialog.reset();
}
})
}
render() {
let trip = findTripByIdOrLink(this.props.trips, this.props.params.id);
if (trip == null || this.props.fetchingTrip) {
return <PageSpinner />
}
let destination = trip.destinations[+this.props.params.destinationId],
canEdit = this.props.loggedInUser.id == trip.owner.facebookID;
return (
<TripInfoEditor destination={destination} canEdit={canEdit} trip={trip} {...this.props} />
)
}
render() {
let trip = findTripByIdOrLink(this.props.trips, this.props.params.id);
if (trip == null || this.props.fetchingTrip) {
return <PageSpinner />
}
let destinationID = +this.props.params.destinationId;
let destination = trip.destinations[+this.props.params.destinationId],
canEdit = this.props.loggedInUser.id == trip.owner.facebookID,
{hotels, pois, notes} = destination;
let colors = [purple500, lightBlue500, cyan500, teal500, lime500, deepOrange500, indigo500];
let {addDestinationItem, removeDestinationItem, updateDestinationItem} = this.props;
return (
<div className="destinationEditor">
<HotelEditor open={this.state.editingHotel == true} onCancel={() => this.setState({editingHotel: false})} onSubmit={(hotel) => this.addHotel(trip, destinationID, hotel)} />
<DestinationEditorSection title="Hotels" onAdd={() => this.setState({editingHotel: true})}>
<List >
{hotels.length == 0 && <EmptySectionItem avatarIcon="hotel" avatarColor={colors[0]} hintText="All your destiation's hotels in one place." />}
{hotels.map((h,i) => {
return (
<ListItem
style={styles.listItem}
leftAvatar={<Avatar
icon={<FontIcon className="material-icons">hotel</FontIcon>}
color={colors [ i % colors.length]}
backgroundColor="white"
size={35}
style={{margin: 5}}
/>}
primaryText={h.description}
rightIcon={<FontIcon style={styles.rightIcon} onTouchTap={() => removeDestinationItem(trip, destinationID, 'hotels', h)} className="material-icons">delete_forever</FontIcon>}
secondaryText={formatRange(h.startDate, h.endDate)} />
)
})}
</List>
</DestinationEditorSection>
<PointOfInterestEditor open={this.state.editingPOI == true} onCancel={() => this.setState({editingPOI: false})} onSubmit={(text) => this.addPOI(trip, destinationID, text)} />
<DestinationEditorSection title="Points of Interest" onAdd={() => this.setState({editingPOI: true})}>
<List >
{pois.length == 0 && <EmptySectionItem avatarIcon="place" avatarColor={colors[1]} hintText="Manage your point of interests like: parks, restourants, stores and more" />}
{pois.map((h,i) => {
return (
<ListItem
style={styles.listItem}
leftAvatar={<Avatar
icon={<FontIcon className="material-icons">place</FontIcon>}
color={colors [ (i + 2) % colors.length]}
backgroundColor="white"
size={35}
style={{margin: 5}}
/>}
rightIcon={<FontIcon style={styles.rightIcon} onTouchTap={() => removeDestinationItem(trip, destinationID, 'pois', h)} className="material-icons">delete_forever</FontIcon>}
primaryText={h.description}
/>
)
})}
</List>
</DestinationEditorSection>
<TravellerNoteEditor open={this.state.editingNote == true} onCancel={() => this.setState({editingNote: false})} onSubmit={(text) => this.addNote(trip, destinationID, text)} />
<DestinationEditorSection title="Traveller Notes" onAdd={() => this.setState({editingNote: true})}>
<List >
{notes.length == 0 && <EmptySectionItem avatarIcon="note_add" avatarColor={colors[2]} hintText="Just notes to remind you what you might forget" />}
{notes.map((h,i) => {
return (
<ListItem
style={styles.listItem}
leftAvatar={<Avatar
icon={<FontIcon className="material-icons">note_add</FontIcon>}
color={colors [ (i + 4) % colors.length]}
backgroundColor="white"
size={35}
style={{margin: 5}}
/>}
rightIcon={<FontIcon style={styles.rightIcon} onTouchTap={() => removeDestinationItem(trip, destinationID, 'notes', h)} className="material-icons">delete_forever</FontIcon>}
primaryText={h.text}
/>
)
})}
</List>
</DestinationEditorSection>
</div>
);
}
render() {
var trip = findTripByIdOrLink(this.props.trips, this.props.params.id);
if (trip == null || this.props.fetchingTrip) {
return <PageSpinner />;
}
return (
<div className="trip-page">
<TripHeader updateTrip={this.props.updateTrip} trip={trip}/>
<div className="trip-info">
<div className="left">
{
<ResizeablePanel expandable={true} style={{...styles.panel, flex: 0}} title="My Scheule">
<TripsCalendar trip={trip} {...this.props} />
</ResizeablePanel>
}
{
// <ResizeablePanel style={styles.panel} title="Friends with you">
// <TripFriends classname="trip-friends" trip={trip} />
// </ResizeablePanel>
}
<Paper style={{display: 'flex', flexDirection: 'column'}} zDepth={2}>
<CardHeader style={styles.header} title="Destinations">
<FontIcon onTouchTap={(e) => this.showAddDestination(e)}
ref={(icon) => {
this.anchorEl = icon ? ReactDOM.findDOMNode(icon) : null;
}}
style={{
float: 'right',
top: "-3px",
marginRight: "0px",
cursor: 'pointer'
}}
className="material-icons">add</FontIcon>
</CardHeader>
<div style={{backgroundColor: 'white'}}>
<DestinationsList destinations={trip.destinations}
onDeleteDestination={this.onDeleteDestination.bind(this)}
onDestinationSelected={this.onDestinationSelected.bind(this)}/>
</div>
</Paper>
</div>
<div className="right">
<TripsMap trip={trip} {...this.props} />
{this.state.destinationID !== null &&
<div className="trip-info" style={{}}>
<CardHeader style={{...styles.header, paddingTop: "12px", paddingBottom: "12px"}}
title={trip.destinations[this.state.destinationID].tripDestination.cityName}>
</CardHeader>
<TripInfoEditor {...this.props}
params={{
destinationId: this.state.destinationID,
id: this.props.params.id
}}/>
</div>
}
</div>
</div>
<AddDestinationDialog open={this.props.addDestinationFormVisible && this.anchorEl != null}
anchorEl={this.anchorEl}
ref="addDestinationDialog"
isNewTrip={false}
onAddDestination={this.onAddDesintation.bind(this, true)}
onCreateTrip={this.onAddDesintation.bind(this, false)}
submitButtonText="Save Trip"
onRequestClose={() => this.showAddDestination(null)}/>
</div>
);
}
onDestinationSelected(destination) {
var trip = findTripByIdOrLink(this.props.trips, this.props.params.id);
let index = trip.destinations.indexOf(destination);
this.setState({destinationID: index});
//browserHistory.push(`/${trip.owner.facebookID}/profile/trips/${trip.id}/destination/${index}`);
}