From f0687cce1a72c02fee6e9375c9ac5d5d00e1afc3 Mon Sep 17 00:00:00 2001 From: Ana Lisa Sutherland Date: Tue, 22 May 2018 16:46:36 -0700 Subject: [PATCH 1/7] Base page set up. Also Wave 1 functionality for displaying all trips in a list. Debating styling as I go, or all at once. --- trip_index.html | 28 ++++++++++++++++++++++++++++ trip_index.js | 34 ++++++++++++++++++++++++++++++++++ 2 files changed, 62 insertions(+) create mode 100644 trip_index.html create mode 100644 trip_index.js diff --git a/trip_index.html b/trip_index.html new file mode 100644 index 00000000..4c17c566 --- /dev/null +++ b/trip_index.html @@ -0,0 +1,28 @@ + + + + + Treking: Lets Boldly Go! + + + + + + + + +
+
+ +
+
+ +

Available Trips

+ + + + + + diff --git a/trip_index.js b/trip_index.js new file mode 100644 index 00000000..d49ef3a1 --- /dev/null +++ b/trip_index.js @@ -0,0 +1,34 @@ +const loadTrips = () => { + const URL = "https://ada-backtrek-api.herokuapp.com/trips" + //TODO: Reporting status needed here eventually + + // Setting up trip table that will correspond to the table with the given id in HTML + // And we are making sure that it empties out at the beginning + const tripsList = $('#trip-table'); + tripsList.empty(); + + // GET request time + axios.get(URL) + // if the request is successful do the below bit + // this should build in our table body and headers + // FIXME: THIS + .then((response) => { + // from the response, i want the data + response.data.forEach((trip) => { + tripsList.append(`
  • ${trip.name}
    • `); + }); + }) + // do this if the response is not successful + // TODO: Need to put in reportStatus for errors as well + .catch((error) => { + console.log(error); + }); +}; + +$(document).ready(() => { + // on button click display all trips + // TODO: eventually will put in a portion that will select for different buttons "View by Continent" etc........ + $('button').click(loadTrips); + // let buttonClicked = this.innerHTML; + // console.log(buttonClicked); +}); From 4fbf8837979d0aebf8166388edd70141b5c8e24f Mon Sep 17 00:00:00 2001 From: Ana Lisa Sutherland Date: Wed, 23 May 2018 10:07:46 -0700 Subject: [PATCH 2/7] Successfully displaying report statuses. For loading, num of trips loaded, and errors --- trip_index.html | 1 + trip_index.js | 20 ++++++++++++++------ 2 files changed, 15 insertions(+), 6 deletions(-) diff --git a/trip_index.html b/trip_index.html index 4c17c566..eeb5fb72 100644 --- a/trip_index.html +++ b/trip_index.html @@ -18,6 +18,7 @@

    Available Trips

    +
    diff --git a/trip_index.js b/trip_index.js index d49ef3a1..4d8f9498 100644 --- a/trip_index.js +++ b/trip_index.js @@ -1,9 +1,11 @@ +let numTrips = 0; + const loadTrips = () => { const URL = "https://ada-backtrek-api.herokuapp.com/trips" - //TODO: Reporting status needed here eventually + //FIXME: Reporting status supposed to be loading here. But currently not displaying trips that have loaded + reportStatus('Loading trip...'); - // Setting up trip table that will correspond to the table with the given id in HTML - // And we are making sure that it empties out at the beginning + // Setting up trip table that will correspond to the table with the given id in HTML and it empties out at the beginning const tripsList = $('#trip-table'); tripsList.empty(); @@ -11,20 +13,26 @@ const loadTrips = () => { axios.get(URL) // if the request is successful do the below bit // this should build in our table body and headers - // FIXME: THIS .then((response) => { - // from the response, i want the data + // tracking the number of trips loaded and reporting loading + numTrips += response.data.length; + reportStatus(`Successfully loaded ${numTrips} trips.`); + // from the response, I want the data. From Data I want trip name response.data.forEach((trip) => { tripsList.append(`
  • ${trip.name}
    • `); }); }) // do this if the response is not successful - // TODO: Need to put in reportStatus for errors as well .catch((error) => { + reportStatus(`Encountered an error while loading trips: ${error.message}`); console.log(error); }); }; +const reportStatus = (message) => { + $('#status-messages').html(message); +}; + $(document).ready(() => { // on button click display all trips // TODO: eventually will put in a portion that will select for different buttons "View by Continent" etc........ From 2ca0ed33504fdd26ab2c04695f7b4e9506d4dba0 Mon Sep 17 00:00:00 2001 From: Ana Lisa Sutherland Date: Wed, 23 May 2018 11:59:42 -0700 Subject: [PATCH 3/7] Trip is now able to be displayed, by a click on the trip list --- trip_index.html | 20 +++++++++++++------- trip_index.js | 40 ++++++++++++++++++++++++++++++++++++---- 2 files changed, 49 insertions(+), 11 deletions(-) diff --git a/trip_index.html b/trip_index.html index eeb5fb72..9a22ba07 100644 --- a/trip_index.html +++ b/trip_index.html @@ -16,13 +16,19 @@ - -

    Available Trips

    -
    -
      - -
    - +
    +

    Available Trips

    +
    +
      + +
    +
    +
    +

    Trip Details

    +
      + +
    +
    diff --git a/trip_index.js b/trip_index.js index 4d8f9498..75982cb5 100644 --- a/trip_index.js +++ b/trip_index.js @@ -2,11 +2,10 @@ let numTrips = 0; const loadTrips = () => { const URL = "https://ada-backtrek-api.herokuapp.com/trips" - //FIXME: Reporting status supposed to be loading here. But currently not displaying trips that have loaded reportStatus('Loading trip...'); // Setting up trip table that will correspond to the table with the given id in HTML and it empties out at the beginning - const tripsList = $('#trip-table'); + const tripsList = $('#trips-table'); tripsList.empty(); // GET request time @@ -19,7 +18,7 @@ const loadTrips = () => { reportStatus(`Successfully loaded ${numTrips} trips.`); // from the response, I want the data. From Data I want trip name response.data.forEach((trip) => { - tripsList.append(`
  • ${trip.name}
    • `); + tripsList.append(`
  • ${trip.id}: ${trip.name}
    • `); }); }) // do this if the response is not successful @@ -29,6 +28,37 @@ const loadTrips = () => { }); }; +// TODO: Figure out how to pass the id of the thing we clicked on as a parameter +const displayTrip = (event) => { + console.log(event); + + let id = event.target.className; + + const tripURL = 'https://ada-backtrek-api.herokuapp.com/trips/'; + // making sure we clear out all trip deets + + const tripDetails = $('#trip-deets'); + tripDetails.empty(); + + // GET request, need to include the id of the + axios.get(tripURL + id) + + .then((response) => { + reportStatus('Successfully loaded trip details'); + + // from the response I want the data. from the data I want all of the current values + // FIXME: Want to display the detail name before it by accessing the name of the keys + + // for (let key in response.data) { + // tripDetails.append(`
  • ${response.data('key')}
    • `); + // } + for (let detail1 in response.data) { + tripDetails.append(`
  • ${response.data[detail1]}
    • `); + } + }) +}; + + const reportStatus = (message) => { $('#status-messages').html(message); }; @@ -36,7 +66,9 @@ const reportStatus = (message) => { $(document).ready(() => { // on button click display all trips // TODO: eventually will put in a portion that will select for different buttons "View by Continent" etc........ - $('button').click(loadTrips); // let buttonClicked = this.innerHTML; // console.log(buttonClicked); + $('button').click(loadTrips); + // event for clicking on a trip in trips list gets us a trips id + $('#trips-table').on('click', 'li', displayTrip) }); From abe65ebcee5a0b2bdc3a594fea2f98c992ecbe19 Mon Sep 17 00:00:00 2001 From: Ana Lisa Sutherland Date: Wed, 23 May 2018 12:34:59 -0700 Subject: [PATCH 4/7] Successfully added in form to base page, still need to link to a specific occurence of trip display --- trip_index.html | 50 ++++++++++++++++++++++++++++++++++++------------- trip_index.js | 22 ++++++++++++++++------ 2 files changed, 53 insertions(+), 19 deletions(-) diff --git a/trip_index.html b/trip_index.html index 9a22ba07..188f7266 100644 --- a/trip_index.html +++ b/trip_index.html @@ -16,19 +16,43 @@ -
    -

    Available Trips

    -
    -
      - -
    -
    -
    -

    Trip Details

    -
      - -
    -
    +
    +
    +

    Available Trips

    +
    +
      + +
    +
    + +
    + +

    Trip Details:

    +
      + +
    +
    + + +
    +

    Reserve A Spot!

    +
    + +
    + + +
    + +
    + + +
    + + +
    +
    + +
    diff --git a/trip_index.js b/trip_index.js index 75982cb5..132448a5 100644 --- a/trip_index.js +++ b/trip_index.js @@ -28,10 +28,9 @@ const loadTrips = () => { }); }; -// TODO: Figure out how to pass the id of the thing we clicked on as a parameter const displayTrip = (event) => { - console.log(event); - + // console.log(event); + // retrieving the id based on the id assigned in the all trips list, parsing data till I got the value I wanted after viewing in the above console.log() let id = event.target.className; const tripURL = 'https://ada-backtrek-api.herokuapp.com/trips/'; @@ -46,9 +45,8 @@ const displayTrip = (event) => { .then((response) => { reportStatus('Successfully loaded trip details'); - // from the response I want the data. from the data I want all of the current values // FIXME: Want to display the detail name before it by accessing the name of the keys - + // for (let key in response.data) { // tripDetails.append(`
  • ${response.data('key')}
    • `); // } @@ -58,6 +56,16 @@ const displayTrip = (event) => { }) }; +const holdSpot = (event) => { +// TODO: Currently working on the functionality for a POST request to hold a spot + + + + + + + +} const reportStatus = (message) => { $('#status-messages').html(message); @@ -69,6 +77,8 @@ $(document).ready(() => { // let buttonClicked = this.innerHTML; // console.log(buttonClicked); $('button').click(loadTrips); - // event for clicking on a trip in trips list gets us a trips id + // event for clicking on a trip in trips list gets us a trips id. Had to use event delegation cause
  • 's I wanted had not been made yet $('#trips-table').on('click', 'li', displayTrip) + + // }); From 63817bd678652be826eb99ec54017b2bc0b20a01 Mon Sep 17 00:00:00 2001 From: Ana Lisa Sutherland Date: Wed, 23 May 2018 14:54:06 -0700 Subject: [PATCH 5/7] Form that reserves a spot with test data successfully. Will next move to reading values from form for iput --- trip_index.html | 9 ++++++++- trip_index.js | 44 +++++++++++++++++++++++++++++++------------- 2 files changed, 39 insertions(+), 14 deletions(-) diff --git a/trip_index.html b/trip_index.html index 188f7266..dadfd507 100644 --- a/trip_index.html +++ b/trip_index.html @@ -32,7 +32,7 @@

    Trip Details:

    - +

    Reserve A Spot!

    @@ -42,11 +42,18 @@

    Reserve A Spot!

    +
    + + +
    + + + diff --git a/trip_index.js b/trip_index.js index 132448a5..d8fe4b19 100644 --- a/trip_index.js +++ b/trip_index.js @@ -1,7 +1,7 @@ let numTrips = 0; +const URL = "https://ada-backtrek-api.herokuapp.com/trips" const loadTrips = () => { - const URL = "https://ada-backtrek-api.herokuapp.com/trips" reportStatus('Loading trip...'); // Setting up trip table that will correspond to the table with the given id in HTML and it empties out at the beginning @@ -28,12 +28,13 @@ const loadTrips = () => { }); }; +const tripURL = 'https://ada-backtrek-api.herokuapp.com/trips/'; + const displayTrip = (event) => { // console.log(event); // retrieving the id based on the id assigned in the all trips list, parsing data till I got the value I wanted after viewing in the above console.log() - let id = event.target.className; + const id = event.target.className; - const tripURL = 'https://ada-backtrek-api.herokuapp.com/trips/'; // making sure we clear out all trip deets const tripDetails = $('#trip-deets'); @@ -53,19 +54,37 @@ const displayTrip = (event) => { for (let detail1 in response.data) { tripDetails.append(`
  • ${response.data[detail1]}
    • `); } + // need to set the hidden value on the form with the corresponding trip ID + $('#tripID').val(id) }) }; const holdSpot = (event) => { -// TODO: Currently working on the functionality for a POST request to hold a spot - - - - - - + event.preventDefault(); + let spotId = $(`#tripID`).val(); + const holdURL = `${tripURL}` + `${spotId}` + `/reservations` + // just for now, making sure that a spot hold can be created + // will replace with form input + const spotData = { + name: 'Test Name', + age: 24, + email: 'boo@boo.com', + }; + + reportStatus('Making sure we hold your spot...'); + console.log(holdURL); + console.log(spotData); + // POST request processing + axios.post(holdURL, spotData) -} + .then((response) => { + reportStatus(`Successfully reserved spot, enjoy your trip!`); + }) + .catch((error) => { + console.log(error.response); + reportStatus(`Encountered an error: ${error.message}`); + }); +}; const reportStatus = (message) => { $('#status-messages').html(message); @@ -79,6 +98,5 @@ $(document).ready(() => { $('button').click(loadTrips); // event for clicking on a trip in trips list gets us a trips id. Had to use event delegation cause
  • 's I wanted had not been made yet $('#trips-table').on('click', 'li', displayTrip) - - // + $('#spot-form').submit(holdSpot); }); From 54b0252624eb3846630669ee5972df80c3688451 Mon Sep 17 00:00:00 2001 From: Ana Lisa Sutherland Date: Wed, 23 May 2018 15:27:23 -0700 Subject: [PATCH 6/7] displaying errors successfully --- trip_index.js | 36 +++++++++++++++++++++++++----------- 1 file changed, 25 insertions(+), 11 deletions(-) diff --git a/trip_index.js b/trip_index.js index d8fe4b19..81e02271 100644 --- a/trip_index.js +++ b/trip_index.js @@ -29,34 +29,29 @@ const loadTrips = () => { }; const tripURL = 'https://ada-backtrek-api.herokuapp.com/trips/'; - const displayTrip = (event) => { // console.log(event); // retrieving the id based on the id assigned in the all trips list, parsing data till I got the value I wanted after viewing in the above console.log() const id = event.target.className; - // making sure we clear out all trip deets - const tripDetails = $('#trip-deets'); tripDetails.empty(); // GET request, need to include the id of the axios.get(tripURL + id) - .then((response) => { reportStatus('Successfully loaded trip details'); - // FIXME: Want to display the detail name before it by accessing the name of the keys - - // for (let key in response.data) { - // tripDetails.append(`
  • ${response.data('key')}
    • `); - // } for (let detail1 in response.data) { tripDetails.append(`
  • ${response.data[detail1]}
    • `); } // need to set the hidden value on the form with the corresponding trip ID $('#tripID').val(id) }) + .catch((error) => { + reportStatus(`Encountered an error while loading trip: ${error.message}`); + console.log(error); + }) }; const holdSpot = (event) => { @@ -66,7 +61,7 @@ const holdSpot = (event) => { // just for now, making sure that a spot hold can be created // will replace with form input const spotData = { - name: 'Test Name', + name: '', age: 24, email: 'boo@boo.com', }; @@ -82,7 +77,14 @@ const holdSpot = (event) => { }) .catch((error) => { console.log(error.response); - reportStatus(`Encountered an error: ${error.message}`); + if (error.response && error.response.data.errors) { + reportError( + `Encountered an error: ${error.message}`, + error.response.data.errors + ); + } else { + reportStatus(`Encountered an error: ${error.message}. You know what you did....`); + } }); }; @@ -90,6 +92,18 @@ const reportStatus = (message) => { $('#status-messages').html(message); }; +const reportError = (message, errors) => { + let content = `

    ${message}

    ` + content += '${field}: ${problem}
    • ` + } + } + content += ''; + reportStatus(content); +}; + $(document).ready(() => { // on button click display all trips // TODO: eventually will put in a portion that will select for different buttons "View by Continent" etc........ From 9b9c86982dbf6ada1b0013f19419c5645c775339 Mon Sep 17 00:00:00 2001 From: Ana Lisa Sutherland Date: Wed, 23 May 2018 16:11:06 -0700 Subject: [PATCH 7/7] Can now successfully read form and create a reservation. Wave 3 completed. Clean and styling remaining, but could turn it in barebones as it is --- trip_index.html | 4 +-- trip_index.js | 66 ++++++++++++++++++++++++++++++++++++++++--------- 2 files changed, 56 insertions(+), 14 deletions(-) diff --git a/trip_index.html b/trip_index.html index dadfd507..4b88bd38 100644 --- a/trip_index.html +++ b/trip_index.html @@ -44,12 +44,12 @@

    Reserve A Spot!

    - +
    - +
    diff --git a/trip_index.js b/trip_index.js index 81e02271..063fadcd 100644 --- a/trip_index.js +++ b/trip_index.js @@ -1,6 +1,7 @@ let numTrips = 0; const URL = "https://ada-backtrek-api.herokuapp.com/trips" +// Show me all of the trips Available const loadTrips = () => { reportStatus('Loading trip...'); @@ -23,12 +24,21 @@ const loadTrips = () => { }) // do this if the response is not successful .catch((error) => { - reportStatus(`Encountered an error while loading trips: ${error.message}`); - console.log(error); + console.log(error.response); + if (error.response && error.response.data.errors) { + reportError( + `Encountered an error: ${error.message}`, + error.response.data.errors + ); + } else { + reportStatus(`Encountered an error: ${error.message}. You know what you did....`); + } }); }; const tripURL = 'https://ada-backtrek-api.herokuapp.com/trips/'; + +// Show me one trip's details const displayTrip = (event) => { // console.log(event); // retrieving the id based on the id assigned in the all trips list, parsing data till I got the value I wanted after viewing in the above console.log() @@ -49,31 +59,63 @@ const displayTrip = (event) => { $('#tripID').val(id) }) .catch((error) => { - reportStatus(`Encountered an error while loading trip: ${error.message}`); - console.log(error); - }) + console.log(error.response); + if (error.response && error.response.data.errors) { + reportError( + `Encountered an error: ${error.message}`, + error.response.data.errors + ); + } else { + reportStatus(`Encountered an error: ${error.message}.You know what you did....`); + } + }); }; + +// read traveler's info from a form +// $('#spot-form').serializeArray() +const FORM_FIELDS = ['name', 'age', 'email']; +const inputField = name => $(`#spot-form input[name="${name}"]`); + +const readFormData = () => { + const getInput = name => { + const input = inputField(name).val(); + return input ? input : undefined; + }; + + const formData = {}; + FORM_FIELDS.forEach((field) => { + formData[field] = getInput(field); + }); + return formData; +}; + +// clear out a form to restock with new user info +const clearForm = () => { + FORM_FIELDS.forEach((field) => { + inputField(field).val(''); + }); +} + + +//reserve a spot on a trip const holdSpot = (event) => { event.preventDefault(); let spotId = $(`#tripID`).val(); const holdURL = `${tripURL}` + `${spotId}` + `/reservations` // just for now, making sure that a spot hold can be created // will replace with form input - const spotData = { - name: '', - age: 24, - email: 'boo@boo.com', - }; + const spotData = readFormData(); + console.log(spotData); reportStatus('Making sure we hold your spot...'); - console.log(holdURL); - console.log(spotData); + // POST request processing axios.post(holdURL, spotData) .then((response) => { reportStatus(`Successfully reserved spot, enjoy your trip!`); + clearForm(); }) .catch((error) => { console.log(error.response);