From 83de9f9889469161747cdf174b2838c4b167d485 Mon Sep 17 00:00:00 2001 From: Shelan Date: Mon, 26 Nov 2018 17:59:35 -0800 Subject: [PATCH 1/7] can show trip's details --- index.css | 0 index.html | 41 +++++++++++++++++++++++++++++++++++ index.js | 63 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 104 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..e69de29b diff --git a/index.html b/index.html new file mode 100644 index 00000000..0a4ce586 --- /dev/null +++ b/index.html @@ -0,0 +1,41 @@ + + + + + Trips with axios + + + + + + +
+ +
+
+

List of Trips

+ +
    +
      +
      + + + +
      + + diff --git a/index.js b/index.js new file mode 100644 index 00000000..2f7bfe2d --- /dev/null +++ b/index.js @@ -0,0 +1,63 @@ +const URL = 'https://trektravel.herokuapp.com/trips'; + +const reportStatus = (message) => { + $('#status-message').html(message); +}; + +const loadTrips = () => { + const tripList = $('#trip-list'); + tripList.empty(); //starts as empty till button is clicked + +reportStatus('Loading trips...'); //place before axios call, shows before error and success msg + + axios.get(URL) + .then((response) => { + reportStatus(`It loaded ${response.data.length} fricking trips!`); + response.data.forEach((trip) => { + const tag = $(`
    • ${trip.name}
      • `); + tripList.append(tag); + tag.click(() => { + tripDetails(trip); + }) + + }); + }) + .catch((error) => { //all .catch(callback) to do something when the response fails + reportStatus(`Encountered an error while loading trips: ${error.message}`); + console.log(error); + }); +}; + + +const reportError = (message, errors) => { + let content = `

      ${message}

      ` + content += ""; + reportStatus(content); +}; + +const tripDetails = (trip) => { + const tripDetailsList = $('#trip-details'); + tripDetailsList.empty(); + + + axios.get(URL + '/' + trip.id) + .then((response) => { + const tripData = response.data; + console.log(trip); + tripDetailsList.append(`
    • Name: ${tripData.name}
      • `); + tripDetailsList.append(`
    • Category: ${tripData.category}
      • `); + tripDetailsList.append(`
    • Continent: ${tripData.continent}
      • `); + tripDetailsList.append(`
    • Cost: ${tripData.cost}
      • `); + tripDetailsList.append(`
    • Weeks: ${tripData.weeks}
      • `); + tripDetailsList.append(`
    • About: ${tripData.about}
      • `); + }) + } +$(document).ready(() => { + $('#load').click(loadTrips); +}); From 14222361a61bb3ef68c070d062af9ab4d675c600 Mon Sep 17 00:00:00 2001 From: Shelan Date: Tue, 27 Nov 2018 10:43:43 -0800 Subject: [PATCH 2/7] created a non-functioning form --- index.html | 7 +++++ index.js | 78 ++++++++++++++++++++++++++++++++++++++++++++++++++++-- 2 files changed, 83 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 0a4ce586..5eaac4fe 100644 --- a/index.html +++ b/index.html @@ -20,6 +20,13 @@

      List of Trips

      +
      +
      + + + + + diff --git a/index.js b/index.js index c7453bd1..28241e74 100644 --- a/index.js +++ b/index.js @@ -18,7 +18,6 @@ reportStatus('Loading trips...'); //place before axios call, shows before error tripList.append(tag); tag.click(() => { tripDetails(trip); - console.log(trip); reservationForm(trip.id); }) From 8b3d67013a8fbb731dc9a7d97640735fa567ba10 Mon Sep 17 00:00:00 2001 From: Shelan Date: Wed, 28 Nov 2018 23:11:54 -0800 Subject: [PATCH 7/7] added comments --- index.js | 78 +++++++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 77 insertions(+), 1 deletion(-) diff --git a/index.js b/index.js index 28241e74..2d91307e 100644 --- a/index.js +++ b/index.js @@ -10,14 +10,41 @@ const loadTrips = () => { reportStatus('Loading trips...'); //place before axios call, shows before error and success msg + +// Make an Axios request to get the array with the main list of trips. +// It's a long array of objects representing trips, all in this form: +// { +// "id": 1, +// "name": "Cairo to Zanzibar", +// "continent": "Africa", +// "category": "everything", +// "weeks": 5, +// "cost": 9599.99 +// } + axios.get(URL) .then((response) => { + // This function runs to handle a successful response reportStatus(`It loaded ${response.data.length} fricking trips!`); + // Now we step through each of the trip in the array given by the API, + // and add them to our interface. + + // For each trip ... response.data.forEach((trip) => { + // Create a new list item element containing the name of the trip. const tag = $(`
    • ${trip.name}
      • `); + // Append our new list item to the trip list element. Now it will appear on the screen. tripList.append(tag); + // Set up the event handler to run when the user clicks on this list item. tag.click(() => { + // (Now we're in the event handler, so this code will only run once the list item + // has been clicked.) + + // call tripDetails() and pass in the trip object to show the user the details about the trip. tripDetails(trip); + // Now call reservationForm() to build the reservation form for this specific + // trip and add it to the page. We only pass in the trip ID, since that is all + // it needs to know in order to build the form. reservationForm(trip.id); }) @@ -45,9 +72,10 @@ const tripDetails = (trip) => { const tripDetailsList = $('#trip-details'); tripDetailsList.empty(); - + // Look up this specific trip through the API... axios.get(URL + '/' + trip.id) //gets a trip .then((response) => { + const tripData = response.data; console.log(trip) tripDetailsList.append(`
    • Name: ${tripData.id}
      • `); @@ -64,6 +92,16 @@ const reservationForm = (trip_id) => { const form =$('#form') form.empty(); + // The "Reserve a Trip" form has 3 inputs: + // Name (comes from the user) + // Email (comes from the user) + // Trip ID (a hidden input that we auto-generate based on the trip + // that was chosen) + // + // So we populate the inside of the form using a template string + // that is mostly just the raw HTML of the form, but we also inject + // the trip ID into the code for the hidden input. + form.append(`

      Reserve a Trip

      @@ -82,10 +120,24 @@ const reservationForm = (trip_id) => { `); } + +// With this function, you take the values from the form (name, email and trip ID) +// and condense them into an object in the format expected by the API, +// with the keys name, email and trip_id. +// For example: +// { +// name: "Amy Testington", +// email: "amy@testington.com", +// trip_id: 10 +// } //reserving trip const readFormData = () => { + // Initialize an empty object const parsedFormData = {}; + // Get the value from the form input with the name "trip_id" + // and add it to the output object under the key "trip_id" + const tripsForm = $(`#form input[name="trip_id"]`).val(); parsedFormData['trip_id'] = tripsForm ? tripsForm : undefined; @@ -108,9 +160,23 @@ const reserveTrip = (event) => { //handler for a `submit` console.log(event); event.preventDefault(); //prevents page from reloading + // readFormData takes the values from the form (name, email and trip ID) + // and condenses them into an object in the format expected by the API, + // with the keys name, email and trip_id. + // For example: + // { + // name: "Sally Testington", + // email: "sally@testington.com", + // trip_id: 10 + // } + const tripInfo = readFormData(); //values from the form console.log(tripInfo); + // The URL alone does not have enough information for the API to know + // what we want, so we also send an object in the POST data with the complete + // data about the trip (see above). + axios.post(URL + '/' + tripInfo.trip_id+ '/reservations', tripInfo) .then((response) => { reportStatus(`Successfully reserved ${response.data.id}!`); @@ -128,8 +194,18 @@ const reserveTrip = (event) => { //handler for a `submit` } }); }; + +// When we call $(document).ready() and pass it a callback, +// then everything inside that callback will run only when the +// page is fully loaded and ready for jQuery to add stuff. $(document).ready(() => { + + // When the button is clicked, loadTrips will be called to download and + // display the list of trips $('#load').click(loadTrips); + // When "Reserve Trip" button is clicked. + // reserveTrip() will be called to perform the reservation + $('#form').submit(reserveTrip); });