From 3bfd3b9450bf83fd4ee4abcea4c3f6c62fc8e874 Mon Sep 17 00:00:00 2001 From: Mello-Cello Date: Sat, 1 Jun 2019 18:56:06 -0700 Subject: [PATCH 01/22] Built basic structure of site. Added button to show a list of trips when clicked. The button click makes a GET request and then each trip is added to a tr and displayed in the DOM. --- index.css | 31 +++++++++++++++++++++++++++++++ index.html | 53 +++++++++++++++++++++++++++++++++++++++++++++++++++++ index.js | 40 ++++++++++++++++++++++++++++++++++++++++ 3 files changed, 124 insertions(+) create mode 100644 index.css create mode 100644 index.html create mode 100644 index.js diff --git a/index.css b/index.css new file mode 100644 index 00000000..ac5e3fa9 --- /dev/null +++ b/index.css @@ -0,0 +1,31 @@ +body { + background-color: #f0f0f0; + color: rgb(34, 34, 34); + margin: 30px 50px; + padding: 10px 10px; +} + +/* .edge-space { +} */ + +h2 { + font-size: 1.5rem; +} + +main { + display: grid; + grid-template: 1fr 1fr / 1fr 1fr; + margin-top: 1.5em; + } + + #trips-list-area { + grid-area: 1 / 1 / span 2 / span 1; + } + + #trip-details-area { + grid-area: 1 / 2 / span 1 / span 1; + } + + #sign-up-form { + grid-area: 2 / 2 / span 1 / span 1; + } \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 00000000..a4903de0 --- /dev/null +++ b/index.html @@ -0,0 +1,53 @@ + + + + + Trek + + + + + + + + +
+
+

Trek

+ +
+
+
+ + + + + + + + + +
Trip 1
Trip 2
Trip 333...
+
+ +
+

trip details will go here

+
+ +
+

sign-up form will go here

+
+
+ + + + + + + + + + + \ No newline at end of file diff --git a/index.js b/index.js new file mode 100644 index 00000000..8d5bc5cf --- /dev/null +++ b/index.js @@ -0,0 +1,40 @@ +const BASEURL = "https://trektravel.herokuapp.com/trips"; + +const reportStatus = (message) => { + $('#status-message').html(message); +}; + +// send GET request +// data comes back, store in an object +// loop through the object and display each item on the page +// let allTrips; + +const loadTrips = () => { + reportStatus('Loading trips ...'); + const listOfTrips = $('#list-of-trips'); + listOfTrips.empty(); + axios.get(BASEURL) + .then((response) => { + reportStatus(`There are ${response.data.length} trips available.`); + allTrips = response.data; + + // $('thead').append('AVAILABLE TRIPS') + + response.data.forEach((trip) => { + listOfTrips.append(`${trip.name}`); + }); + }) + .catch((error) => { + reportStatus(`Error loading trips: ${error.message}`); + console.log(error); + }); +}; + +const showTripDetails = function(event) { + $(trip-details-area).append(`

A tr was clicked.

`) +} + +$(document).ready(() => { + $('#btn-show-trips').click(loadTrips); + $('#list-of-trips').on('click', 'tr', showTripDetails) +}); \ No newline at end of file From f9713f3c1dfe2ebe5d9a296546f9ad489348f5d9 Mon Sep 17 00:00:00 2001 From: Mello-Cello Date: Sun, 2 Jun 2019 12:43:38 -0700 Subject: [PATCH 02/22] Mid-troubleshooting. Can't click a td elememnt. Committing now for a save point before I try having the trip list populate a ul instead of a table. --- index.html | 17 +++++++---------- index.js | 56 +++++++++++++++++++++++++++++++++++++++++++++++------- 2 files changed, 56 insertions(+), 17 deletions(-) diff --git a/index.html b/index.html index a4903de0..329a178a 100644 --- a/index.html +++ b/index.html @@ -10,12 +10,11 @@ - -
-
-

Trek

- -
+ +
+

Trek

+ +
@@ -23,9 +22,7 @@

Trek

- Trip 1 - Trip 2 - Trip 333... +
@@ -38,7 +35,7 @@

Trek

sign-up form will go here

- + diff --git a/index.js b/index.js index 8d5bc5cf..96ff9e69 100644 --- a/index.js +++ b/index.js @@ -4,10 +4,15 @@ const reportStatus = (message) => { $('#status-message').html(message); }; +const handleApiError = (error) => { + console.log(error); + // TODO: politely report this error to the user + } + // send GET request // data comes back, store in an object // loop through the object and display each item on the page -// let allTrips; +let allTrips; const loadTrips = () => { reportStatus('Loading trips ...'); @@ -18,10 +23,12 @@ const loadTrips = () => { reportStatus(`There are ${response.data.length} trips available.`); allTrips = response.data; - // $('thead').append('AVAILABLE TRIPS') + $('thead').html('

AVAILABLE TRIPS

') response.data.forEach((trip) => { listOfTrips.append(`${trip.name}`); + // give an id + }); }) .catch((error) => { @@ -30,11 +37,46 @@ const loadTrips = () => { }); }; -const showTripDetails = function(event) { - $(trip-details-area).append(`

A tr was clicked.

`) -} +// const showTripDetails = (thisTrip) => { +// console.log('Trip info: ', thisTrip); +// // let trip = {}; +// return(tripDetails) => { +// thisTrip = listOfTrips[0]; +// $(tripDetails.target).html(`

${thisTrip.name}

`) +// // $(trip-details-area).append(`

${}

`) + +// // ...how showTripDetails knows what trip was clicked +// // ...either attach it to the HTML (simpler) or use a closure (preferred) + + +// } +// // also display reservation form +// }; + +const tripDetailsTest = () => { + thisTrip = listOfTrips[0]; + $('#trip-details-area').html(`

${thisTrip.name}

`) +}; + +const reserveTrip = (trip) => { + console.log("reserving trip", trip) + + // TODO: Wave 3 + // reserve a spot on the trip when the form is submitted +}; $(document).ready(() => { $('#btn-show-trips').click(loadTrips); - $('#list-of-trips').on('click', 'tr', showTripDetails) -}); \ No newline at end of file + // let thisTrip = $('#list-of-trips tr td').each(function () { + // $(this).click(showTripDetails(thisTrip)); + // }); + $('#listOfTrips').on('click', 'td', tripDetailsTest); + // $('#listOfTrips tr td').on('click-row.bs.table', function (e, row, $element) { + // window.location = $element.data('href'); + // }); + // $('*[data-href]').on('click', function() { + // window.location = $(this).data("href"); + // }); + +}); + From a1c71dd6d47bc7e2bb37894ad10de547a203385c Mon Sep 17 00:00:00 2001 From: Mello-Cello Date: Sun, 2 Jun 2019 18:28:15 -0700 Subject: [PATCH 03/22] Finished the function to show details of individual trip when it is clicked. --- index.html | 17 +++++++----- index.js | 81 ++++++++++++++++++++++++++++++++++++++++++++++-------- 2 files changed, 80 insertions(+), 18 deletions(-) diff --git a/index.html b/index.html index 329a178a..546e9823 100644 --- a/index.html +++ b/index.html @@ -6,15 +6,15 @@ - + - +

Trek

- +
@@ -22,12 +22,15 @@

Trek

- + + + +
-
+

trip details will go here

@@ -35,7 +38,7 @@

Trek

sign-up form will go here

- + @@ -47,4 +50,4 @@

Trek

- \ No newline at end of file + diff --git a/index.js b/index.js index 96ff9e69..aac09ede 100644 --- a/index.js +++ b/index.js @@ -7,11 +7,29 @@ const reportStatus = (message) => { const handleApiError = (error) => { console.log(error); // TODO: politely report this error to the user - } +}; // send GET request // data comes back, store in an object // loop through the object and display each item on the page + +const showTripDetails = (trip) => { + console.log('within showTripDetails()'); + + // axios.get(BASEURL + `/${event.target.id}`) + // .then((response) => { + // let details = response.data[trip.id]; + $("#trip-details").empty(); + $("#trip-details").append(`

${trip.name}

`); + $("#trip-details").append(`

ID: ${trip.id}

`); + $("#trip-details").append(`

Continent: ${trip.continent}

`); + $("#trip-details").append(`

Category: ${trip.category}

`); + $("#trip-details").append(`

${trip.weeks} weeks

`); + $("#trip-details").append(`

Summary: ${trip.about}

`); + $("#trip-details").append(`

Price: $${trip.cost}

`); + // }); +}; + let allTrips; const loadTrips = () => { @@ -22,14 +40,54 @@ const loadTrips = () => { .then((response) => { reportStatus(`There are ${response.data.length} trips available.`); allTrips = response.data; - + $('thead').html('

AVAILABLE TRIPS

') + // response.data.forEach((trip) => { + // listOfTrips.append(`${trip.name}`); + // + // $(`#${trip.id}`).bind('click',()=>{ + // $("#trip-details").empty(); + // $("#trip-details").append(`

${trip.name}

`); + // $("#trip-details").append(`

ID: ${trip.id}

`); + // $("#trip-details").append(`

Continent: ${trip.continent}

`); + // $("#trip-details").append(`

Category: ${trip.category}

`); + // $("#trip-details").append(`

${trip.weeks} weeks

`); + // $("#trip-details").append(`

Summary: ${trip.about}

`); + // $("#trip-details").append(`

Price: $${trip.cost}

`); + // // showTripDeatils(trip); + // }); + // + // });//END Each loop + + /************* with function notation ************************/ + response.data.forEach((trip) => { - listOfTrips.append(`${trip.name}`); - // give an id + listOfTrips.append(`${trip.name}`); + + $(`#${trip.id}`).bind('click', {trip:trip}, function(event){ + console.log(event); + console.log("******* trip is: ********"); + console.log(event.data.trip); + console.log('***********trip***********'); + + let trip = event.data.trip; + $("#trip-details").empty(); + console.log('******* #trip-details *******'); + console.log( $("#trip-details") ); + // $("#trip-details").append(`

test trip title

`); + $("#trip-details").append(`

${trip.name}

`); + $("#trip-details").append(`

ID: ${trip.id}

`); + $("#trip-details").append(`

Continent: ${trip.continent}

`); + $("#trip-details").append(`

Category: ${trip.category}

`); + $("#trip-details").append(`

${trip.weeks} weeks

`); + $("#trip-details").append(`

Summary: ${trip.about}

`); + $("#trip-details").append(`

Price: $${trip.cost}

`); + // showTripDeatils(trip); + }); + + });//END Each loop - }); }) .catch((error) => { reportStatus(`Error loading trips: ${error.message}`); @@ -48,19 +106,21 @@ const loadTrips = () => { // // ...how showTripDetails knows what trip was clicked // // ...either attach it to the HTML (simpler) or use a closure (preferred) - + // } // // also display reservation form // }; + + const tripDetailsTest = () => { thisTrip = listOfTrips[0]; - $('#trip-details-area').html(`

${thisTrip.name}

`) + $('#trip-details').html(`

${thisTrip.name}

`) }; const reserveTrip = (trip) => { console.log("reserving trip", trip) - + // TODO: Wave 3 // reserve a spot on the trip when the form is submitted }; @@ -70,13 +130,12 @@ $(document).ready(() => { // let thisTrip = $('#list-of-trips tr td').each(function () { // $(this).click(showTripDetails(thisTrip)); // }); - $('#listOfTrips').on('click', 'td', tripDetailsTest); + // $('#trips-list-area').on('click', 'td', showTripDetails); // $('#listOfTrips tr td').on('click-row.bs.table', function (e, row, $element) { // window.location = $element.data('href'); // }); // $('*[data-href]').on('click', function() { // window.location = $(this).data("href"); // }); - -}); +}); From 9f2c858b34e522b650dd4b1e187b6d40b4f22af0 Mon Sep 17 00:00:00 2001 From: Mello-Cello Date: Sun, 2 Jun 2019 18:40:05 -0700 Subject: [PATCH 04/22] Cleaned up comments etc. --- index.js | 88 ++++++-------------------------------------------------- 1 file changed, 9 insertions(+), 79 deletions(-) diff --git a/index.js b/index.js index aac09ede..d47c210d 100644 --- a/index.js +++ b/index.js @@ -13,29 +13,13 @@ const handleApiError = (error) => { // data comes back, store in an object // loop through the object and display each item on the page -const showTripDetails = (trip) => { - console.log('within showTripDetails()'); - - // axios.get(BASEURL + `/${event.target.id}`) - // .then((response) => { - // let details = response.data[trip.id]; - $("#trip-details").empty(); - $("#trip-details").append(`

${trip.name}

`); - $("#trip-details").append(`

ID: ${trip.id}

`); - $("#trip-details").append(`

Continent: ${trip.continent}

`); - $("#trip-details").append(`

Category: ${trip.category}

`); - $("#trip-details").append(`

${trip.weeks} weeks

`); - $("#trip-details").append(`

Summary: ${trip.about}

`); - $("#trip-details").append(`

Price: $${trip.cost}

`); - // }); -}; - let allTrips; const loadTrips = () => { reportStatus('Loading trips ...'); const listOfTrips = $('#list-of-trips'); listOfTrips.empty(); + axios.get(BASEURL) .then((response) => { reportStatus(`There are ${response.data.length} trips available.`); @@ -43,39 +27,18 @@ const loadTrips = () => { $('thead').html('

AVAILABLE TRIPS

') - // response.data.forEach((trip) => { - // listOfTrips.append(`${trip.name}`); - // - // $(`#${trip.id}`).bind('click',()=>{ - // $("#trip-details").empty(); - // $("#trip-details").append(`

${trip.name}

`); - // $("#trip-details").append(`

ID: ${trip.id}

`); - // $("#trip-details").append(`

Continent: ${trip.continent}

`); - // $("#trip-details").append(`

Category: ${trip.category}

`); - // $("#trip-details").append(`

${trip.weeks} weeks

`); - // $("#trip-details").append(`

Summary: ${trip.about}

`); - // $("#trip-details").append(`

Price: $${trip.cost}

`); - // // showTripDeatils(trip); - // }); - // - // });//END Each loop - - /************* with function notation ************************/ - response.data.forEach((trip) => { listOfTrips.append(`${trip.name}`); - $(`#${trip.id}`).bind('click', {trip:trip}, function(event){ - console.log(event); - console.log("******* trip is: ********"); - console.log(event.data.trip); - console.log('***********trip***********'); + $(`#${trip.id}`).bind('click', {thisTrip:trip}, function(event){ + // {trip:trip} becomes available as event.data + // console.log(event); + // console.log("******* trip is: ********"); + // console.log(event.data.trip); + // console.log('***********trip***********'); - let trip = event.data.trip; + const trip = event.data.thisTrip; $("#trip-details").empty(); - console.log('******* #trip-details *******'); - console.log( $("#trip-details") ); - // $("#trip-details").append(`

test trip title

`); $("#trip-details").append(`

${trip.name}

`); $("#trip-details").append(`

ID: ${trip.id}

`); $("#trip-details").append(`

Continent: ${trip.continent}

`); @@ -83,7 +46,6 @@ const loadTrips = () => { $("#trip-details").append(`

${trip.weeks} weeks

`); $("#trip-details").append(`

Summary: ${trip.about}

`); $("#trip-details").append(`

Price: $${trip.cost}

`); - // showTripDeatils(trip); }); });//END Each loop @@ -95,28 +57,6 @@ const loadTrips = () => { }); }; -// const showTripDetails = (thisTrip) => { -// console.log('Trip info: ', thisTrip); -// // let trip = {}; -// return(tripDetails) => { -// thisTrip = listOfTrips[0]; -// $(tripDetails.target).html(`

${thisTrip.name}

`) -// // $(trip-details-area).append(`

${}

`) - -// // ...how showTripDetails knows what trip was clicked -// // ...either attach it to the HTML (simpler) or use a closure (preferred) - - -// } -// // also display reservation form -// }; - - - -const tripDetailsTest = () => { - thisTrip = listOfTrips[0]; - $('#trip-details').html(`

${thisTrip.name}

`) -}; const reserveTrip = (trip) => { console.log("reserving trip", trip) @@ -125,17 +65,7 @@ const reserveTrip = (trip) => { // reserve a spot on the trip when the form is submitted }; + $(document).ready(() => { $('#btn-show-trips').click(loadTrips); - // let thisTrip = $('#list-of-trips tr td').each(function () { - // $(this).click(showTripDetails(thisTrip)); - // }); - // $('#trips-list-area').on('click', 'td', showTripDetails); - // $('#listOfTrips tr td').on('click-row.bs.table', function (e, row, $element) { - // window.location = $element.data('href'); - // }); - // $('*[data-href]').on('click', function() { - // window.location = $(this).data("href"); - // }); - }); From 5649ee04b317ddc9f26f340b10e8fc06a74f924a Mon Sep 17 00:00:00 2001 From: Mello-Cello Date: Sun, 2 Jun 2019 21:36:11 -0700 Subject: [PATCH 05/22] Adjusted grid layout and HTML to accomodate form. Began implementation of function to make reservation. Need to bug fix. --- index.css | 8 ++++--- index.html | 21 ++++++------------ index.js | 65 ++++++++++++++++++++++++++++++++++++++++++++++-------- 3 files changed, 68 insertions(+), 26 deletions(-) diff --git a/index.css b/index.css index ac5e3fa9..82db33af 100644 --- a/index.css +++ b/index.css @@ -16,16 +16,18 @@ main { display: grid; grid-template: 1fr 1fr / 1fr 1fr; margin-top: 1.5em; + grid-column-gap: 1.5em; } #trips-list-area { - grid-area: 1 / 1 / span 2 / span 1; + grid-area: 1 / 1 / span 1 / span 1; } #trip-details-area { grid-area: 1 / 2 / span 1 / span 1; + display: flex; } - #sign-up-form { + /* #sign-up-form { grid-area: 2 / 2 / span 1 / span 1; - } \ No newline at end of file + } */ \ No newline at end of file diff --git a/index.html b/index.html index 546e9823..2b6a69e6 100644 --- a/index.html +++ b/index.html @@ -17,25 +17,18 @@

Trek

- - - - - - +
- - -
- -
-

trip details will go here

-
-

sign-up form will go here

+
+
+ +
+
+
diff --git a/index.js b/index.js index d47c210d..84acdd5a 100644 --- a/index.js +++ b/index.js @@ -31,13 +31,14 @@ const loadTrips = () => { listOfTrips.append(`${trip.name}`); $(`#${trip.id}`).bind('click', {thisTrip:trip}, function(event){ - // {trip:trip} becomes available as event.data + // {trip:trip} becomes available as event.data // console.log(event); // console.log("******* trip is: ********"); // console.log(event.data.trip); // console.log('***********trip***********'); const trip = event.data.thisTrip; + $("#trip-details").empty(); $("#trip-details").append(`

${trip.name}

`); $("#trip-details").append(`

ID: ${trip.id}

`); @@ -46,8 +47,62 @@ const loadTrips = () => { $("#trip-details").append(`

${trip.weeks} weeks

`); $("#trip-details").append(`

Summary: ${trip.about}

`); $("#trip-details").append(`

Price: $${trip.cost}

`); + + $('#reservation-form').empty(); + $('#reservation-form').prepend('

Reserve your spot!

') + $('#reservation-form').append('
'); + $('#reservation-form').append('
'); + $('#reservation-form').append(''); + + return trip // need this????? }); + const readFormData = () => { + const formData = {}; + + const nameFromForm = $(`#reservation-form input[name="name"]`).val(); + formData['name'] = nameFromForm ? nameFromForm : undefined; + + const emailFromForm = $('#reservation-form input[email="email"]').val(); + formData['email'] = emailFromForm ? emailFromForm : undefined; + + return formData; + }; + + const clearForm = () => { + $(`#reservation-form input [name="name"]`).val(''); + $(`#reservation-form input [email="email"]`).val(''); + }; + + const reserveTrip = (event) => { + event.preventDefault(); + + const reservationData = readFormData(); + console.log(reservationData); + + reportStatus('Submitting reservation...'); + + axios.post(`${BASEURL}/${trip.id}/reservations`, reservationData) + .then((response) => { + reportStatus(`Successfully reserved your trip. name: ${response.data.name} email: ${response.data.email}`); + clearForm(); + }) + .catch((error) => { + console.log(error.response); + if (error.response.data && error.response.data.errors) { + reportError(`Encountered an error: ${error.message}`, error.response.data.errors); + } else { + reportStatus(`Encountered an error: ${error.message}`); + } + }); + + // accepted params: + // name (string) required + // age (integer) + // email (string) required + }; + + });//END Each loop }) @@ -58,14 +113,6 @@ const loadTrips = () => { }; -const reserveTrip = (trip) => { - console.log("reserving trip", trip) - - // TODO: Wave 3 - // reserve a spot on the trip when the form is submitted -}; - - $(document).ready(() => { $('#btn-show-trips').click(loadTrips); }); From da74fe3567f1eb344fccbeb6d22806022efb767e Mon Sep 17 00:00:00 2001 From: Mello-Cello Date: Mon, 3 Jun 2019 08:39:54 -0700 Subject: [PATCH 06/22] Implemented functionality to submit a reservation. --- index.js | 113 ++++++++++++++++++++++++++++++++----------------------- 1 file changed, 65 insertions(+), 48 deletions(-) diff --git a/index.js b/index.js index 84acdd5a..68929c90 100644 --- a/index.js +++ b/index.js @@ -38,6 +38,12 @@ const loadTrips = () => { // console.log('***********trip***********'); const trip = event.data.thisTrip; + //remove class='selected' from any other table row + $(".selected").removeClass('selected'); + + //set class='selected' on this table row + $(`#${trip.id}`).addClass('selected'); + $("#trip-details").empty(); $("#trip-details").append(`

${trip.name}

`); @@ -47,69 +53,80 @@ const loadTrips = () => { $("#trip-details").append(`

${trip.weeks} weeks

`); $("#trip-details").append(`

Summary: ${trip.about}

`); $("#trip-details").append(`

Price: $${trip.cost}

`); - + $('#reservation-form').empty(); + $('#reservation-form').unbind('submit'); + $('#reservation-form').prepend('

Reserve your spot!

') - $('#reservation-form').append('
'); + $('#reservation-form').append('
'); $('#reservation-form').append('
'); - $('#reservation-form').append(''); - - return trip // need this????? - }); - - const readFormData = () => { - const formData = {}; + $('#reservation-form').append(''); + // $('submit-btn').click(makeReservation); + $('#reservation-form').submit(reserveTrip); - const nameFromForm = $(`#reservation-form input[name="name"]`).val(); - formData['name'] = nameFromForm ? nameFromForm : undefined; + // return trip // need this????? + }); - const emailFromForm = $('#reservation-form input[email="email"]').val(); - formData['email'] = emailFromForm ? emailFromForm : undefined; - return formData; - }; - const clearForm = () => { - $(`#reservation-form input [name="name"]`).val(''); - $(`#reservation-form input [email="email"]`).val(''); - }; + });//END Each loop - const reserveTrip = (event) => { - event.preventDefault(); + }) + .catch((error) => { + reportStatus(`Error loading trips: ${error.message}`); + console.log(error); + }); - const reservationData = readFormData(); - console.log(reservationData); +}; - reportStatus('Submitting reservation...'); +const readFormData = () => { + const formData = {}; - axios.post(`${BASEURL}/${trip.id}/reservations`, reservationData) - .then((response) => { - reportStatus(`Successfully reserved your trip. name: ${response.data.name} email: ${response.data.email}`); - clearForm(); - }) - .catch((error) => { - console.log(error.response); - if (error.response.data && error.response.data.errors) { - reportError(`Encountered an error: ${error.message}`, error.response.data.errors); - } else { - reportStatus(`Encountered an error: ${error.message}`); - } - }); + const nameFromForm = $(`#reservation-form input[name="guestname"]`).val(); + formData['name'] = nameFromForm ? nameFromForm : undefined; - // accepted params: - // name (string) required - // age (integer) - // email (string) required - }; + const emailFromForm = $('#reservation-form input[name="email"]').val(); + formData['email'] = emailFromForm ? emailFromForm : undefined; + return formData; +}; - });//END Each loop +const clearForm = () => { + $(`#reservation-form input [name="guestname"]`).val(''); + $(`#reservation-form input [email="email"]`).val(''); +}; - }) - .catch((error) => { - reportStatus(`Error loading trips: ${error.message}`); - console.log(error); - }); +const reserveTrip = (event) => { + event.preventDefault(); + + // gets the HTML attribute called id (#id) + const tripID = $(`.selected`).attr('id'); + + let reservationData = readFormData(); + // reservation = JSON.stringify(reservationData); + + console.log(reservationData); + + reportStatus('Submitting reservation...'); + + axios.post(`${BASEURL}/${tripID}/reservations`, reservationData) + .then((response) => { + reportStatus(`Successfully reserved your trip. name: ${response.data.name} email: ${response.data.email}`); + clearForm(); + }) + .catch((error) => { + console.log(error.response); + if (error.response.data && error.response.data.errors) { + reportError(`Encountered an error: ${error.message}`, error.response.data.errors); + } else { + reportStatus(`Encountered an error: ${error.message}`); + } + }); + + // accepted params: + // name (string) required + // age (integer) + // email (string) required }; From 8e1f9220963a338fd53603972ab94b863b5843f4 Mon Sep 17 00:00:00 2001 From: Mello-Cello Date: Sat, 8 Jun 2019 16:17:15 -0700 Subject: [PATCH 07/22] Rearranged error message handling so it is all done by one function. Added required keyword to HTML form to prevent unnecessary API calls. Added some comments on on items that still need attention. --- index.js | 45 ++++++++++++++++++++++++++++++--------------- 1 file changed, 30 insertions(+), 15 deletions(-) diff --git a/index.js b/index.js index 68929c90..b05257be 100644 --- a/index.js +++ b/index.js @@ -4,16 +4,23 @@ const reportStatus = (message) => { $('#status-message').html(message); }; -const handleApiError = (error) => { - console.log(error); +const handleApiError = (error, customMessage) => { + // console.log(error); // TODO: politely report this error to the user + + console.log(error.response); + if (error.response.data && error.response.data.errors) { + reportStatus(`${customMessage} Details: ${error.message}, ${error.response.data.errors}`); + } else { + reportStatus(`${customMessage} Details: ${error.message}`); + } }; // send GET request // data comes back, store in an object // loop through the object and display each item on the page -let allTrips; +let allTrips; // not sure this is needed const loadTrips = () => { reportStatus('Loading trips ...'); @@ -44,6 +51,8 @@ const loadTrips = () => { //set class='selected' on this table row $(`#${trip.id}`).addClass('selected'); + // **** consider building the form once **** + // **** hide on page load and unhide when a trip is clicked **** $("#trip-details").empty(); $("#trip-details").append(`

${trip.name}

`); @@ -58,8 +67,9 @@ const loadTrips = () => { $('#reservation-form').unbind('submit'); $('#reservation-form').prepend('

Reserve your spot!

') - $('#reservation-form').append('
'); - $('#reservation-form').append('
'); + $('#reservation-form').append('
'); + $('#reservation-form').append('
'); + $('#reservation-form').append('
'); $('#reservation-form').append(''); // $('submit-btn').click(makeReservation); $('#reservation-form').submit(reserveTrip); @@ -73,8 +83,11 @@ const loadTrips = () => { }) .catch((error) => { - reportStatus(`Error loading trips: ${error.message}`); - console.log(error); + // reportStatus(`Error loading trips: ${error.message}`); + // console.log(error); + handleApiError(error, "We encountered a problem loading the list of available trips."); + + }); }; @@ -85,15 +98,20 @@ const readFormData = () => { const nameFromForm = $(`#reservation-form input[name="guestname"]`).val(); formData['name'] = nameFromForm ? nameFromForm : undefined; - const emailFromForm = $('#reservation-form input[name="email"]').val(); + const emailFromForm = $(`#reservation-form input[name="email"]`).val(); formData['email'] = emailFromForm ? emailFromForm : undefined; + const ageFromForm = $(`#reservation-form input[name="age"]`).val(); + formData['age'] = ageFromForm ? ageFromForm : 'not provided'; + return formData; }; +// **** THIS ISN'T WORKING, NEED TO FIX!! **** const clearForm = () => { $(`#reservation-form input [name="guestname"]`).val(''); $(`#reservation-form input [email="email"]`).val(''); + $(`#reservation-form input [age="age"]`).val(''); }; const reserveTrip = (event) => { @@ -111,16 +129,13 @@ const reserveTrip = (event) => { axios.post(`${BASEURL}/${tripID}/reservations`, reservationData) .then((response) => { - reportStatus(`Successfully reserved your trip. name: ${response.data.name} email: ${response.data.email}`); + const tripName = $('.selected').attr('name'); //shows as undefined + reportStatus(`Successfully reserved your trip ${tripName}. (name: ${response.data.name} email: ${response.data.email} age: ${response.data.age}`); clearForm(); }) .catch((error) => { - console.log(error.response); - if (error.response.data && error.response.data.errors) { - reportError(`Encountered an error: ${error.message}`, error.response.data.errors); - } else { - reportStatus(`Encountered an error: ${error.message}`); - } + handleApiError(error, "We encountered a problem submitting a reservation."); + clearForm(); }); // accepted params: From 561bd677afed0daf162a85a174948234c99ccf6e Mon Sep 17 00:00:00 2001 From: Mello-Cello Date: Sat, 8 Jun 2019 16:29:54 -0700 Subject: [PATCH 08/22] Fixed clearing reservation form upon clicking submit. Submit button also does not disappear. --- index.js | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/index.js b/index.js index b05257be..0c9c565e 100644 --- a/index.js +++ b/index.js @@ -107,11 +107,9 @@ const readFormData = () => { return formData; }; -// **** THIS ISN'T WORKING, NEED TO FIX!! **** + const clearForm = () => { - $(`#reservation-form input [name="guestname"]`).val(''); - $(`#reservation-form input [email="email"]`).val(''); - $(`#reservation-form input [age="age"]`).val(''); + $(`#reservation-form input`).not('.btn').val(''); }; const reserveTrip = (event) => { @@ -129,9 +127,10 @@ const reserveTrip = (event) => { axios.post(`${BASEURL}/${tripID}/reservations`, reservationData) .then((response) => { - const tripName = $('.selected').attr('name'); //shows as undefined - reportStatus(`Successfully reserved your trip ${tripName}. (name: ${response.data.name} email: ${response.data.email} age: ${response.data.age}`); + const tripName = $('.selected').attr('name'); + reportStatus(`Successfully reserved your trip ${tripName}. (name: ${response.data.name} email: ${response.data.email} age: ${response.data.age}`); //shows name and age as undefined clearForm(); + console.log("after clear form"); }) .catch((error) => { handleApiError(error, "We encountered a problem submitting a reservation."); From 0070e66cbca5032535a440f8cc081639cf44ce22 Mon Sep 17 00:00:00 2001 From: Mello-Cello Date: Sat, 8 Jun 2019 18:26:51 -0700 Subject: [PATCH 09/22] Started implementing a get request for each trip upon click. Not finished. --- index.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/index.js b/index.js index 0c9c565e..2837ad0b 100644 --- a/index.js +++ b/index.js @@ -6,7 +6,6 @@ const reportStatus = (message) => { const handleApiError = (error, customMessage) => { // console.log(error); - // TODO: politely report this error to the user console.log(error.response); if (error.response.data && error.response.data.errors) { @@ -71,7 +70,6 @@ const loadTrips = () => { $('#reservation-form').append('
'); $('#reservation-form').append('
'); $('#reservation-form').append(''); - // $('submit-btn').click(makeReservation); $('#reservation-form').submit(reserveTrip); // return trip // need this????? @@ -130,7 +128,6 @@ const reserveTrip = (event) => { const tripName = $('.selected').attr('name'); reportStatus(`Successfully reserved your trip ${tripName}. (name: ${response.data.name} email: ${response.data.email} age: ${response.data.age}`); //shows name and age as undefined clearForm(); - console.log("after clear form"); }) .catch((error) => { handleApiError(error, "We encountered a problem submitting a reservation."); From 9e5177f52f0e2c2efa1c7df0db1ca61055e068c2 Mon Sep 17 00:00:00 2001 From: Mello-Cello Date: Sat, 8 Jun 2019 19:13:33 -0700 Subject: [PATCH 10/22] Clear status message after making reservation and then clicking on another trip. --- index.js | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/index.js b/index.js index 2837ad0b..bd0c05c6 100644 --- a/index.js +++ b/index.js @@ -6,6 +6,7 @@ const reportStatus = (message) => { const handleApiError = (error, customMessage) => { // console.log(error); + // *** need help with figuring out how to test this is working *** console.log(error.response); if (error.response.data && error.response.data.errors) { @@ -37,11 +38,12 @@ const loadTrips = () => { listOfTrips.append(`${trip.name}`); $(`#${trip.id}`).bind('click', {thisTrip:trip}, function(event){ - // {trip:trip} becomes available as event.data + // {thisTrip:trip} becomes available as event.data // console.log(event); - // console.log("******* trip is: ********"); - // console.log(event.data.trip); - // console.log('***********trip***********'); + tripData = JSON.stringify(event.data) + console.log("******* trip is: ********"); + console.log(tripData); + // {"thisTrip":{"id":74,"name":"Best of New Zealand","continent":"Australasia","category":"everything","weeks":3,"cost":1952.77}} const trip = event.data.thisTrip; //remove class='selected' from any other table row @@ -49,6 +51,7 @@ const loadTrips = () => { //set class='selected' on this table row $(`#${trip.id}`).addClass('selected'); + $('#status-message').empty(); // **** consider building the form once **** // **** hide on page load and unhide when a trip is clicked **** @@ -126,7 +129,7 @@ const reserveTrip = (event) => { axios.post(`${BASEURL}/${tripID}/reservations`, reservationData) .then((response) => { const tripName = $('.selected').attr('name'); - reportStatus(`Successfully reserved your trip ${tripName}. (name: ${response.data.name} email: ${response.data.email} age: ${response.data.age}`); //shows name and age as undefined + reportStatus(`Successfully reserved your trip ${tripName}. (name: ${response.data.name} email: ${response.data.email} age: ${response.data.age})`); //shows name and age as undefined clearForm(); }) .catch((error) => { From 04f6550b64c780e90e53e264906f32ba0869d93f Mon Sep 17 00:00:00 2001 From: Mello-Cello Date: Sun, 9 Jun 2019 07:10:43 -0700 Subject: [PATCH 11/22] Set price to display two decimal places. Investigated how to get trip details to show - currently undefined. Still working on this. --- index.js | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/index.js b/index.js index bd0c05c6..d9ef2412 100644 --- a/index.js +++ b/index.js @@ -25,7 +25,13 @@ let allTrips; // not sure this is needed const loadTrips = () => { reportStatus('Loading trips ...'); const listOfTrips = $('#list-of-trips'); - listOfTrips.empty(); + listOfTrips.empty; + + // not working, creating double calls and after X clicks, not clearing the area + // want to clear details and form sections upon clicking Show Trips button + // $("#trip-details").empty(); + // $('#reservation-form').empty(); + axios.get(BASEURL) .then((response) => { @@ -63,7 +69,7 @@ const loadTrips = () => { $("#trip-details").append(`

Category: ${trip.category}

`); $("#trip-details").append(`

${trip.weeks} weeks

`); $("#trip-details").append(`

Summary: ${trip.about}

`); - $("#trip-details").append(`

Price: $${trip.cost}

`); + $("#trip-details").append(`

Price: $${trip.cost.toFixed(2)}

`); $('#reservation-form').empty(); $('#reservation-form').unbind('submit'); From 7e36b493887a8727c8a3e5e72fe0ea6b439ecbc7 Mon Sep 17 00:00:00 2001 From: Mello-Cello Date: Sun, 9 Jun 2019 07:49:05 -0700 Subject: [PATCH 12/22] Added a GET request for each individual trip in order to display its details. --- index.js | 68 ++++++++++++++++++++++++++++++++++++-------------------- 1 file changed, 44 insertions(+), 24 deletions(-) diff --git a/index.js b/index.js index d9ef2412..51653a7b 100644 --- a/index.js +++ b/index.js @@ -22,6 +22,36 @@ const handleApiError = (error, customMessage) => { let allTrips; // not sure this is needed +const getTripDetails = (tripID) => { + console.log('****** tripID in getTripDetails: ') + console.log(JSON.stringify(tripID)); + + axios.get(`${BASEURL}/${tripID}`) + .then((response) => { + // **** consider building the form once **** + // **** hide on page load and unhide when a trip is clicked **** + const trip = response.data; + $("#trip-details").empty(); + $("#trip-details").append(`

${trip.name}

`); + $("#trip-details").append(`

ID: ${trip.id}

`); + $("#trip-details").append(`

Continent: ${trip.continent}

`); + $("#trip-details").append(`

Category: ${trip.category}

`); + $("#trip-details").append(`

${trip.weeks} weeks

`); + $("#trip-details").append(`

Summary: ${trip.about}

`); + $("#trip-details").append(`

Price: $${trip.cost}

`); + + $('#reservation-form').empty(); + $('#reservation-form').unbind('submit'); + + $('#reservation-form').prepend('

Reserve your spot!

') + $('#reservation-form').append('
'); + $('#reservation-form').append('
'); + $('#reservation-form').append('
'); + $('#reservation-form').append(''); + $('#reservation-form').submit(reserveTrip); + }) +} + const loadTrips = () => { reportStatus('Loading trips ...'); const listOfTrips = $('#list-of-trips'); @@ -46,11 +76,16 @@ const loadTrips = () => { $(`#${trip.id}`).bind('click', {thisTrip:trip}, function(event){ // {thisTrip:trip} becomes available as event.data // console.log(event); - tripData = JSON.stringify(event.data) - console.log("******* trip is: ********"); - console.log(tripData); + // tripData = JSON.stringify(event.data) + // console.log("******* trip is: ********"); + // console.log(tripData); // {"thisTrip":{"id":74,"name":"Best of New Zealand","continent":"Australasia","category":"everything","weeks":3,"cost":1952.77}} + tripID = JSON.stringify(event.data) + console.log("******* trip is: ********"); + console.log(tripID); + // {"thisTrip":"id":74} + const trip = event.data.thisTrip; //remove class='selected' from any other table row $(".selected").removeClass('selected'); @@ -59,27 +94,12 @@ const loadTrips = () => { $(`#${trip.id}`).addClass('selected'); $('#status-message').empty(); - // **** consider building the form once **** - // **** hide on page load and unhide when a trip is clicked **** - - $("#trip-details").empty(); - $("#trip-details").append(`

${trip.name}

`); - $("#trip-details").append(`

ID: ${trip.id}

`); - $("#trip-details").append(`

Continent: ${trip.continent}

`); - $("#trip-details").append(`

Category: ${trip.category}

`); - $("#trip-details").append(`

${trip.weeks} weeks

`); - $("#trip-details").append(`

Summary: ${trip.about}

`); - $("#trip-details").append(`

Price: $${trip.cost.toFixed(2)}

`); - - $('#reservation-form').empty(); - $('#reservation-form').unbind('submit'); - - $('#reservation-form').prepend('

Reserve your spot!

') - $('#reservation-form').append('
'); - $('#reservation-form').append('
'); - $('#reservation-form').append('
'); - $('#reservation-form').append(''); - $('#reservation-form').submit(reserveTrip); + const testTrip = (`${trip.id}`); + console.log('****** thisTripID in loadTrips: '); + console.log(testTrip); + getTripDetails(testTrip); + + // return trip // need this????? }); From 146151aca9512eb889a6607be3512e15c6cc7ecb Mon Sep 17 00:00:00 2001 From: Mello-Cello Date: Sun, 9 Jun 2019 08:01:22 -0700 Subject: [PATCH 13/22] Cleaned up a few little HTML and CSS things. --- index.css | 11 ++++++++--- index.html | 3 ++- index.js | 14 +++++++------- 3 files changed, 17 insertions(+), 11 deletions(-) diff --git a/index.css b/index.css index 82db33af..f69cc899 100644 --- a/index.css +++ b/index.css @@ -28,6 +28,11 @@ main { display: flex; } - /* #sign-up-form { - grid-area: 2 / 2 / span 1 / span 1; - } */ \ No newline at end of file + #sign-up-form { + /* grid-area: 2 / 2 / span 1 / span 1; */ + margin-top: 3rem; + } + + .bold { + font-weight: bold; + } \ No newline at end of file diff --git a/index.html b/index.html index 2b6a69e6..9dfcd307 100644 --- a/index.html +++ b/index.html @@ -26,7 +26,8 @@

Trek

-
+
+
diff --git a/index.js b/index.js index 51653a7b..eed19eed 100644 --- a/index.js +++ b/index.js @@ -24,7 +24,7 @@ let allTrips; // not sure this is needed const getTripDetails = (tripID) => { console.log('****** tripID in getTripDetails: ') - console.log(JSON.stringify(tripID)); + console.log(tripID); axios.get(`${BASEURL}/${tripID}`) .then((response) => { @@ -33,12 +33,12 @@ const getTripDetails = (tripID) => { const trip = response.data; $("#trip-details").empty(); $("#trip-details").append(`

${trip.name}

`); - $("#trip-details").append(`

ID: ${trip.id}

`); - $("#trip-details").append(`

Continent: ${trip.continent}

`); - $("#trip-details").append(`

Category: ${trip.category}

`); - $("#trip-details").append(`

${trip.weeks} weeks

`); - $("#trip-details").append(`

Summary: ${trip.about}

`); - $("#trip-details").append(`

Price: $${trip.cost}

`); + $("#trip-details").append(`

ID: ${trip.id}

`); + $("#trip-details").append(`

Continent: ${trip.continent}

`); + $("#trip-details").append(`

Category: ${trip.category}

`); + $("#trip-details").append(`

Weeks: ${trip.weeks}

`); + $("#trip-details").append(`

Summary:
${trip.about}

`); + $("#trip-details").append(`

Price: $${trip.cost.toFixed(2)}

`); $('#reservation-form').empty(); $('#reservation-form').unbind('submit'); From b9127409ad5c45157fd55d67d5569c34c0c5c4a1 Mon Sep 17 00:00:00 2001 From: Mello-Cello Date: Sun, 9 Jun 2019 08:15:35 -0700 Subject: [PATCH 14/22] Fixed display of reservation details in success status message. Cleaned up a few comments. --- index.css | 7 +++---- index.js | 6 +++--- 2 files changed, 6 insertions(+), 7 deletions(-) diff --git a/index.css b/index.css index f69cc899..aea2fb72 100644 --- a/index.css +++ b/index.css @@ -5,9 +5,6 @@ body { padding: 10px 10px; } -/* .edge-space { -} */ - h2 { font-size: 1.5rem; } @@ -18,6 +15,9 @@ main { margin-top: 1.5em; grid-column-gap: 1.5em; } + #status-message { + margin-bottom: 2em; + } #trips-list-area { grid-area: 1 / 1 / span 1 / span 1; @@ -29,7 +29,6 @@ main { } #sign-up-form { - /* grid-area: 2 / 2 / span 1 / span 1; */ margin-top: 3rem; } diff --git a/index.js b/index.js index eed19eed..f329320b 100644 --- a/index.js +++ b/index.js @@ -46,7 +46,7 @@ const getTripDetails = (tripID) => { $('#reservation-form').prepend('

Reserve your spot!

') $('#reservation-form').append('
'); $('#reservation-form').append('
'); - $('#reservation-form').append('
'); + $('#reservation-form').append('
'); $('#reservation-form').append(''); $('#reservation-form').submit(reserveTrip); }) @@ -154,8 +154,8 @@ const reserveTrip = (event) => { axios.post(`${BASEURL}/${tripID}/reservations`, reservationData) .then((response) => { - const tripName = $('.selected').attr('name'); - reportStatus(`Successfully reserved your trip ${tripName}. (name: ${response.data.name} email: ${response.data.email} age: ${response.data.age})`); //shows name and age as undefined + const tripIdNum = $('.selected').attr('id'); + reportStatus(`Successfully reserved your trip. (Trip ID: ${tripIdNum}. Your name: ${response.data.name} Email: ${response.data.email} age: ${reservationData.age})`); //shows age as undefined when using response.data.age; why???? clearForm(); }) .catch((error) => { From 1b5427296951a88a9189697fd2e975869d69f00b Mon Sep 17 00:00:00 2001 From: Mello-Cello Date: Sun, 9 Jun 2019 08:36:03 -0700 Subject: [PATCH 15/22] Added unbind to initial build of table to remove double, triple, etc calls if Show All Trips button is clicked again. --- index.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/index.js b/index.js index f329320b..45e148cb 100644 --- a/index.js +++ b/index.js @@ -56,12 +56,12 @@ const loadTrips = () => { reportStatus('Loading trips ...'); const listOfTrips = $('#list-of-trips'); listOfTrips.empty; - + + // clear details and form sections upon clicking Show Trips button + $("#trip-details").empty(); + $('#reservation-form').empty(); + // not working, creating double calls and after X clicks, not clearing the area - // want to clear details and form sections upon clicking Show Trips button - // $("#trip-details").empty(); - // $('#reservation-form').empty(); - axios.get(BASEURL) .then((response) => { @@ -72,7 +72,7 @@ const loadTrips = () => { response.data.forEach((trip) => { listOfTrips.append(`${trip.name}`); - + $(`#${trip.id}`).unbind() $(`#${trip.id}`).bind('click', {thisTrip:trip}, function(event){ // {thisTrip:trip} becomes available as event.data // console.log(event); From ba0e6e5022d3f6fd745695f177dab9e0f7be2aba Mon Sep 17 00:00:00 2001 From: Mello-Cello Date: Sun, 9 Jun 2019 08:45:15 -0700 Subject: [PATCH 16/22] Cleaned up comments. --- index.js | 10 +--------- 1 file changed, 1 insertion(+), 9 deletions(-) diff --git a/index.js b/index.js index 45e148cb..9d998462 100644 --- a/index.js +++ b/index.js @@ -17,7 +17,7 @@ const handleApiError = (error, customMessage) => { }; // send GET request -// data comes back, store in an object +// data comes back, store response object in a variable // loop through the object and display each item on the page let allTrips; // not sure this is needed @@ -81,10 +81,6 @@ const loadTrips = () => { // console.log(tripData); // {"thisTrip":{"id":74,"name":"Best of New Zealand","continent":"Australasia","category":"everything","weeks":3,"cost":1952.77}} - tripID = JSON.stringify(event.data) - console.log("******* trip is: ********"); - console.log(tripID); - // {"thisTrip":"id":74} const trip = event.data.thisTrip; //remove class='selected' from any other table row @@ -98,10 +94,6 @@ const loadTrips = () => { console.log('****** thisTripID in loadTrips: '); console.log(testTrip); getTripDetails(testTrip); - - - - // return trip // need this????? }); From 50ee636cd2da3c5f27e113802d563c6c74881d41 Mon Sep 17 00:00:00 2001 From: Mello-Cello Date: Sun, 9 Jun 2019 13:12:16 -0700 Subject: [PATCH 17/22] Moved form to HTML. Working to make components hide and show at appropriate times. --- index.html | 18 +++++++++++++----- index.js | 21 ++++++++++++++------- 2 files changed, 27 insertions(+), 12 deletions(-) diff --git a/index.html b/index.html index 9dfcd307..1404e064 100644 --- a/index.html +++ b/index.html @@ -23,12 +23,20 @@

Trek

-
-
+
+
-
- -
+
+
+

Reserve your spot!

+
+ + + + + + +
diff --git a/index.js b/index.js index 9d998462..01ba6ccb 100644 --- a/index.js +++ b/index.js @@ -32,6 +32,7 @@ const getTripDetails = (tripID) => { // **** hide on page load and unhide when a trip is clicked **** const trip = response.data; $("#trip-details").empty(); + $("#trip-details").append(`

${trip.name}

`); $("#trip-details").append(`

ID: ${trip.id}

`); $("#trip-details").append(`

Continent: ${trip.continent}

`); @@ -40,14 +41,14 @@ const getTripDetails = (tripID) => { $("#trip-details").append(`

Summary:
${trip.about}

`); $("#trip-details").append(`

Price: $${trip.cost.toFixed(2)}

`); - $('#reservation-form').empty(); + // $('#reservation-form').empty(); $('#reservation-form').unbind('submit'); - $('#reservation-form').prepend('

Reserve your spot!

') - $('#reservation-form').append('
'); - $('#reservation-form').append('
'); - $('#reservation-form').append('
'); - $('#reservation-form').append(''); + // $('#reservation-form').prepend('

Reserve your spot!

') + // $('#reservation-form').append('
'); + // $('#reservation-form').append('
'); + // $('#reservation-form').append('
'); + // $('#reservation-form').append(''); $('#reservation-form').submit(reserveTrip); }) } @@ -59,7 +60,8 @@ const loadTrips = () => { // clear details and form sections upon clicking Show Trips button $("#trip-details").empty(); - $('#reservation-form').empty(); + // $('#reservation-form').empty(); + $("sign-up-form").empty(); // not working, creating double calls and after X clicks, not clearing the area @@ -94,6 +96,11 @@ const loadTrips = () => { console.log('****** thisTripID in loadTrips: '); console.log(testTrip); getTripDetails(testTrip); + + $('#trip-details').removeAttr('hidden'); + $('#sign-up-form').removeAttr('hidden'); + + $('#reservation-form').show(); }); From c8b0ec419138d18ca1093c618fed42940853ec0e Mon Sep 17 00:00:00 2001 From: Mello-Cello Date: Sun, 9 Jun 2019 13:22:51 -0700 Subject: [PATCH 18/22] Fixed duplicate list showing when clicking show all trips button. --- index.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/index.js b/index.js index 01ba6ccb..122f766f 100644 --- a/index.js +++ b/index.js @@ -56,10 +56,12 @@ const getTripDetails = (tripID) => { const loadTrips = () => { reportStatus('Loading trips ...'); const listOfTrips = $('#list-of-trips'); - listOfTrips.empty; + // listOfTrips.empty; // this does not work, must use below syntax + $("#list-of-trips").empty(); + // clear details and form sections upon clicking Show Trips button - $("#trip-details").empty(); + // $('#reservation-form').empty(); $("sign-up-form").empty(); From e6fae9bf161170b8a26f5cca217340bf0f372108 Mon Sep 17 00:00:00 2001 From: Mello-Cello Date: Sun, 9 Jun 2019 13:23:57 -0700 Subject: [PATCH 19/22] Fixed duplicate list showing when clicking show all trips button. --- index.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/index.js b/index.js index 9d998462..ae7b779e 100644 --- a/index.js +++ b/index.js @@ -55,7 +55,8 @@ const getTripDetails = (tripID) => { const loadTrips = () => { reportStatus('Loading trips ...'); const listOfTrips = $('#list-of-trips'); - listOfTrips.empty; + // listOfTrips.empty; // this does not work, must use below syntax + $("#list-of-trips").empty(); // clear details and form sections upon clicking Show Trips button $("#trip-details").empty(); From c4634c7601cb9571cd8d278c8004f42aaa0a1f28 Mon Sep 17 00:00:00 2001 From: Mello-Cello Date: Sun, 9 Jun 2019 13:45:20 -0700 Subject: [PATCH 20/22] List of trips, trip details, and form each show at the right times now. The form starts as hidden and will not flash during initial page load. --- index.html | 4 ++-- index.js | 23 ++++++----------------- 2 files changed, 8 insertions(+), 19 deletions(-) diff --git a/index.html b/index.html index 1404e064..2b2443d7 100644 --- a/index.html +++ b/index.html @@ -26,14 +26,14 @@

Trek

-
+