Skip to content

Mariana-Pipes-BackTreck #21

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
lmarianarp19 wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Mariana-Pipes-BackTreck #21

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e203aaf
can see the list of trips
lmarianarp19 Nov 29, 2017
ae940f0
show details of a trip
lmarianarp19 Nov 30, 2017
a186f59
make reservation
lmarianarp19 Dec 2, 2017
4e154f1
Add Style
lmarianarp19 Dec 5, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
111 changes: 109 additions & 2 deletions dist/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,117 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<header>

<header class='hero-section'>
<!-- <button class="button" id="createTrip"> Create trip! </button> -->
</header>
<main>
<section id="status-messages">
<button class="button clear float-right">
Hide
</button>

<ul>
</ul>
</section>
<aside class="columns large-4 small-12">
<h2>Add a Trip</h2>
<form id="add-trip-form">
<label for="name">Name</label>
<input type="text" name="name"></input>

<label for="continent">Continent</label>
<input type="text" name="continent"></input>

<label for="about">About</label>
<input type="text" name="about"></input>

<label for="category">Category</label>
<input type="text" name="category"></input>

<label for="weeks">Weeks</label>
<input type="number" name="weeks"></input>

<label for="cost">Cost</label>
<input type="number" name="cost"></input>

<input type="submit" value="Add it!" class="button"></input>
</form>
</aside>
<section id="oneTrip" class="columns large-8 small-12">
</section>
<section class="columns large-8 small-12">
<h2>Trip Options!</h2>

<table>
<thead>
<th class="sort name">Name</th>
<th class="sort continent">Continent</th>
<th class="sort category">Category</th>
<th class="sort weeks">Weeks</th>
<th class="sort cost">Cost</th>
</thead>
<tbody id="trip-list">
</tbody>
</table>
</section>

<script type="text/template" id="trip-template">
<tr class="trip" id="<%- `trip${id }`%>" >
<td >
<%- name %>
</td>
<td>
<%- continent %>
</td>
<td>
<%- category %>
</td>
<td>
<%- weeks %>
</td>
<td>
<%- cost %>
</td>
</tr>
</script>


<script type="text/template" id="details-template" class="columns large-4 small-8">

<h2>
<%- name %>
</h2>

<!-- <p class = 'tripId' id= `${<% id %>}`> -->
<p>
<%- about %>
</p>
<button class="button" id="goReservationForm">
Reserve this trip!
</button>

<div id="spaceReservationForm">
</div>

</script>



<script type="text/template" id="reservationFormTemplate" class="columns large-4 small-8">
<form id="reservation-form">
<label for="name">Name:</label>
<input type="text" name="name" required></input>
<input type="hidden" name="trip_id" value = "<%- tripId %>" >
</input>
<label for="email">Email:</label>
<input type="email" name="email" required></input>
<input id="submitForm" type="submit" class="button" value="Reserve Trip"></input>


</script>




</main>
<footer>
Expand Down
163 changes: 162 additions & 1 deletion src/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,167 @@ import './css/style.css';

console.log('it loaded!');

import TripList from './app/collections/trip_list';

import Trip from './app/models/trip';
import Reservation from './app/models/reservation';

const tripList = new TripList();

const TRIP_FIELDS = ['name', 'continent', 'about', 'category', 'weeks', 'cost'];

const RESERVATION_FIELDS = ['name', 'trip_id', 'email' ];

const render = function render(tripList) {
$('.clear').hide();
const tripTableElement = $('#trip-list');
tripTableElement.html('');

tripList.forEach((trip) => {
const generatedHTML = tripTemplate(trip.attributes);
tripTableElement.append(generatedHTML);
$(`#trip${trip.attributes.id}`).on('click', (event) => {
let tripDetails = new Trip({id: `${trip.attributes.id}`});
tripDetails.fetch({
success: renderDetails
});
});
$('th.sort').removeClass('current-sort-field');
$(`th.sort.${ tripList.comparator }`).addClass('current-sort-field');
});
};

const renderDetails = function renderDetails(tripDetails){
const $detailsElement = $('#oneTrip');
console.log('found detailsElement?', $detailsElement)
$detailsElement.html('');

const generatedHTML = detailsTemplate(tripDetails.attributes);
$detailsElement.append(generatedHTML);

$('#goReservationForm').on('click', function(event) {
renderReservationForm(event, tripDetails);
});
};

const renderReservationForm = function renderReservationForm(event, tripDetails){
$('#goReservationForm').hide();
const tripId = tripDetails.attributes.id
const $spaceReservationForm = $('#spaceReservationForm');
$spaceReservationForm.html('');
const generatedHTML = reservationTemplate({tripId: tripId});
// console.log(generatedHTML);
$spaceReservationForm.append(generatedHTML);
// nuevas cosas
event.preventDefault();
$('#submitForm').on('click', reserveTripHandler);
};

const reserveTripHandler = function reserveTripHandler(event){
event.preventDefault();
console.log('inside reserveTripHandler');
let reservationData = {};

RESERVATION_FIELDS.forEach((field) =>{
const inputElement = $(`#reservation-form input[name="${ field }"]`);
const value = inputElement.val();
reservationData[field] = value;
inputElement.val('');
Copy link

@CheezItMan CheezItMan Dec 10, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Right here you're clearing all the field values, including the hidden field where you're hiding the trip id. Instead wait to clear the values until a save is successful. If someone fails validations, the trip Id is being cleared and thus no subsequent reservation will work.

});
const reservationEnterUser = new Reservation(reservationData);
console.log(`reservationEnterUser ${reservationEnterUser}`);
console.log(reservationEnterUser);
reservationEnterUser.save({}, { success: (model, response) => {
reportStatus('success', 'Make your bags. You reserve this trips Successfully!');
console.log("reservation went great");
}, error: (model, response) => {

const errors = response.responseJSON["errors"];
for (let field in errors) {
for (let problem of errors[field]) {
reportStatus('error', `${field}: ${problem}`);
}
}
}
});
};

const addTripHandler = function(event) {
event.preventDefault();

const tripData = {};
TRIP_FIELDS.forEach((field) => {
// select the input corresponding to the field we want
const inputElement = $(`#add-trip-form input[name="${ field }"]`);
const value = inputElement.val();
tripData[field] = value;

inputElement.val('');
});
const tripEnterUser = new Trip(tripData);

tripEnterUser.save({}, {
success: (model, response) => {
console.log('Successfully saved trip!');
reportStatus('success', 'Successfully saved trip!');
},
error: (model, response) => {
const errors = response.responseJSON["errors"];
for (let field in errors) {
for (let problem of errors[field]) {
reportStatus('error', `${field}: ${problem}`);
}
}
},
});
};


let tripTemplate;
let detailsTemplate;
let reservationTemplate;

// Clear status messages
const clearStatus = function clearStatus() {
$('.clear').hide();
$('#status-messages ul').html('');
$('#status-messages').hide();
};

// Add a new status message
const reportStatus = function reportStatus(status, message) {
Copy link

@CheezItMan CheezItMan Dec 10, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This function should also clear the container of error messages. Now they never go away.

console.log(`Reporting ${ status } status: ${ message }`);
$('.clear').show();

const statusHTML = `<li class="${ status }">${ message }</li>`;

$('#status-messages ul').append(statusHTML);
$('#status-messages').show();
};

$(document).ready( () => {
$('main').html('<h1>Hello World!</h1>');

tripTemplate = _.template($('#trip-template').html());
detailsTemplate = _.template($('#details-template').html());
reservationTemplate = _.template($('#reservationFormTemplate').html());

tripList.on('update', render);

tripList.fetch();

tripList.on('sort', render);

$('#add-trip-form').on('submit', addTripHandler);

TRIP_FIELDS.forEach((field) => {
const headerElement = $(`th.sort.${ field }`);
headerElement.on('click', (event) => {
console.log(`Sorting table by ${ field }`);
tripList.comparator = field;
tripList.sort();
});
});

$('#status-messages').on('click', clearStatus);

});
11 changes: 11 additions & 0 deletions src/app/collections/trip_list.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import Backbone from 'backbone';
import Trip from '../models/trip';

const TripList = Backbone.Collection.extend({
model: Trip,
url: 'https://ada-backtrek-api.herokuapp.com/trips/',
comparator: 'name',

});

export default TripList;
7 changes: 7 additions & 0 deletions src/app/models/details.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import Backbone from 'backbone';

const Details = Backbone.Model.extend({
url: `https://ada-backtrek-api.herokuapp.com/trips/1`
});

export default Details;
11 changes: 11 additions & 0 deletions src/app/models/reservation.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import Backbone from 'backbone';

const Reservation = Backbone.Model.extend({
url: function() {
console.log('https://ada-backtrek-api.herokuapp.com/trips/'+this.trip_id+'/reservations');
Copy link

@CheezItMan CheezItMan Dec 10, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It might make more sense to use urlRoot like so:

urlRoot() {
  return `https://ada-backtrek-api.herokuapp.com/trips/${this.get('trip_id')}/reservations`;
}

It's also preferred style to use interpolation.

// return `https://ada-backtrek-api.herokuapp.com/trips/${this.trip_id}/reservations`;
return 'https://ada-backtrek-api.herokuapp.com/trips/'+this.get('trip_id')+'/reservations';
}
});

export default Reservation;
11 changes: 11 additions & 0 deletions src/app/models/trip.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import Backbone from 'backbone';

const Trip = Backbone.Model.extend({
url: function() {
return `https://ada-backtrek-api.herokuapp.com/trips/` + (this.id || '')
}
Copy link

@CheezItMan CheezItMan Dec 10, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You should be handling client-side validations here and in Reservation.

// url: `https://ada-backtrek-api.herokuapp.com/trips/${id}`
// url: `https://ada-backtrek-api.herokuapp.com/trips/`
});

export default Trip;
38 changes: 37 additions & 1 deletion src/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,38 @@

/* Your styles go here! */
.hero-section {
background: url('https://i.pinimg.com/originals/df/d0/00/dfd0000f193a9aa0864277462c6b063e.jpg') 50% no-repeat;
background-size: cover;
height: 300px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}

th.sort {
cursor: pointer;
}

.current-sort-field {
background-color: darkgrey;
color: white;
}

.success {
background-color: #ade9ff;
font-size: 1.2em;
}

.error {
background-color: #fcc4d0;
font-size: 1.2em;
}

li {
list-style-type: none;
width: 100%;
}

#status-messages {
margin: 0%;
}