From 16d00e5e03c8b15ccd06fc8998ae5bf50b9062ed Mon Sep 17 00:00:00 2001 From: Pauline Sauget Date: Wed, 29 May 2019 18:18:05 -0700 Subject: [PATCH 1/6] Add function to load & display trips using axios; add skeleton for other functions --- index.css | 25 +++++++++++++++++++++ index.html | 64 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ index.js | 64 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 153 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..028b490c --- /dev/null +++ b/index.css @@ -0,0 +1,25 @@ + +body { + font-family: sans-serif; +} + +main { + display: grid; + grid-template-columns: 1fr 1fr; +} + +#status-message { + +} + +#load-trips { + +} + +#trip-list { + +} + +#trip-details { + +} diff --git a/index.html b/index.html new file mode 100644 index 00000000..8cf2115e --- /dev/null +++ b/index.html @@ -0,0 +1,64 @@ + + + + + Pets with axios + + + + + + + +
+ +
+
+

Trek

+ +
    +
    + +
    + +
    + + + + + + + + + +
    + + + diff --git a/index.js b/index.js new file mode 100644 index 00000000..506dc140 --- /dev/null +++ b/index.js @@ -0,0 +1,64 @@ +const URL = 'https://trektravel.herokuapp.com/trips/' + +// +// Status Management +// +const reportStatus = (message) => { + $('#status-message').html(message); +}; + +const reportError = (message, errors) => { + let content = `

    ${message}

    "; + reportStatus(content); +}; + +const loadTrips = () => { + // TODO: Wave 1 + // make an axios call to the trips index and display the results + + reportStatus("loading trips..."); + + let tripsList = $('#trips-list'); + // tripsList.empty(); + + axios.get(URL) + .then((response) => { + let responseArr = response.data + + reportStatus(`Successfully loaded ${responseArr.length} trips`); + + responseArr.forEach(trip => { + tripsList.append(`
  • ${trip.name}
    • `); + }); + }) + .catch((error) => { + reportStatus(`Encountered an error while loading wonder: ${error.message}`); + console.log(error); + }); +} + +const showTripDetails = (trip) => { + console.log("showing details for trip", trip); + + // DONT FORGET TO START AT TRIP 70 + + // TODO: Wave 2 + // display trip details and the trip reservation form +} + +const reserveTrip = (trip) => { + console.log("reserving trip", trip) + + // TODO: Wave 2 + // reserve a spot on the trip when the form is submitted +} + +$(document).ready(() => { + $('#load-trips').click(loadTrips); +}); \ No newline at end of file From 927e85a8650ef78ca2a708933f1d93a1bdbe1ef2 Mon Sep 17 00:00:00 2001 From: Pauline Sauget Date: Fri, 31 May 2019 14:38:17 -0700 Subject: [PATCH 2/6] Clicking `load` twice won't cause duplication --- index.html | 4 ++-- index.js | 31 ++++++++++++++++--------------- 2 files changed, 18 insertions(+), 17 deletions(-) diff --git a/index.html b/index.html index 8cf2115e..358a90c5 100644 --- a/index.html +++ b/index.html @@ -13,10 +13,10 @@
    -
    +

    Trek

    -
      +
        diff --git a/index.js b/index.js index 506dc140..076c675e 100644 --- a/index.js +++ b/index.js @@ -24,26 +24,27 @@ const loadTrips = () => { reportStatus("loading trips..."); - let tripsList = $('#trips-list'); - // tripsList.empty(); + let tripsList = $('#trips-list'); + tripsList.empty(); - axios.get(URL) - .then((response) => { - let responseArr = response.data - - reportStatus(`Successfully loaded ${responseArr.length} trips`); - - responseArr.forEach(trip => { - tripsList.append(`
      • ${trip.name}
        • `); - }); - }) - .catch((error) => { - reportStatus(`Encountered an error while loading wonder: ${error.message}`); - console.log(error); + axios.get(URL) + .then((response) => { + let responseArr = response.data + + reportStatus(`Successfully loaded ${responseArr.length} trips`); + + responseArr.forEach(trip => { + tripsList.append(`
      • ${trip.name}
        • `); }); + }) + .catch((error) => { + reportStatus(`Encountered an error while loading wonder: ${error.message}`); + console.log(error); + }); } const showTripDetails = (trip) => { + // $(this.Attr([id])) console.log("showing details for trip", trip); // DONT FORGET TO START AT TRIP 70 From 89328eba72313b62dc0654cbbf329dcdb05f1c19 Mon Sep 17 00:00:00 2001 From: Pauline Sauget Date: Sun, 2 Jun 2019 16:58:15 -0700 Subject: [PATCH 3/6] Grid layout setup & HTML skeleton --- index.css | 14 ++++++++--- index.html | 69 ++++++++++++++++++++---------------------------------- 2 files changed, 36 insertions(+), 47 deletions(-) diff --git a/index.css b/index.css index 028b490c..40debd8e 100644 --- a/index.css +++ b/index.css @@ -5,7 +5,11 @@ body { main { display: grid; - grid-template-columns: 1fr 1fr; + grid-template-columns: 2fr 1fr; + grid-template-rows: 1fr; + grid-template-areas: + "list details" + "list reserve" } #status-message { @@ -16,10 +20,14 @@ main { } -#trip-list { - +#trips-list { + grid-area: list; } #trip-details { + grid-area: details; +} +#reserve-trip { + grid-area: reserve; } diff --git a/index.html b/index.html index 358a90c5..b96a3abd 100644 --- a/index.html +++ b/index.html @@ -9,54 +9,35 @@ - -
        - +
        -
        -

        Trek

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

          Trip Details

          +
          +
          +

          Reserve a Spot on Example Trip

          +
          +
          + + +
          + +
          + + +
          + + +
          From dee4cacfc2a92ebcefd841e9701465ffbf90d230 Mon Sep 17 00:00:00 2001 From: Pauline Sauget Date: Sun, 2 Jun 2019 17:19:38 -0700 Subject: [PATCH 4/6] Split load & display trips functions (controller vs view) --- index.css | 2 +- index.html | 4 ++-- index.js | 54 +++++++++++++++++++++++++++++++++++------------------- 3 files changed, 38 insertions(+), 22 deletions(-) diff --git a/index.css b/index.css index 40debd8e..5dea82c5 100644 --- a/index.css +++ b/index.css @@ -16,7 +16,7 @@ main { } -#load-trips { +#trips-button { } diff --git a/index.html b/index.html index b96a3abd..b215395d 100644 --- a/index.html +++ b/index.html @@ -12,10 +12,10 @@
          - +

          Trek

          - +
          diff --git a/index.js b/index.js index 076c675e..90e85da0 100644 --- a/index.js +++ b/index.js @@ -18,39 +18,55 @@ const reportError = (message, errors) => { reportStatus(content); }; -const loadTrips = () => { - // TODO: Wave 1 - // make an axios call to the trips index and display the results +const displayTripsList = (tripsList) => { + const target = $('#trips-list'); + target.empty(); + tripsList.forEach(trip => { + target.append(`
        • ${trip.name}
          • `); + }); +} + +const loadTrips = () => { reportStatus("loading trips..."); - - let tripsList = $('#trips-list'); - tripsList.empty(); - + axios.get(URL) .then((response) => { - let responseArr = response.data - - reportStatus(`Successfully loaded ${responseArr.length} trips`); - - responseArr.forEach(trip => { - tripsList.append(`
        • ${trip.name}
          • `); - }); + const trips = response.data; + displayTripsList(trips); + + reportStatus(`Successfully loaded ${trips.length} trips`); }) .catch((error) => { - reportStatus(`Encountered an error while loading wonder: ${error.message}`); + reportStatus(`Encountered an error while loading trip: ${error.message}`); console.log(error); }); } const showTripDetails = (trip) => { - // $(this.Attr([id])) - console.log("showing details for trip", trip); - // DONT FORGET TO START AT TRIP 70 // TODO: Wave 2 // display trip details and the trip reservation form + + // // $(this.Attr([id])) + // reportStatus("showing details for trip", trip.name); + + // let tripDetails = $('#trip-details'); + // tripDetails.empty(); + + // axios.get(URL + trip.id) + // .then((response) => { + + // reportStatus(`Successfully loaded details for ` trip.name); + + // // Do something + + // }) + // .catch((error) => { + // reportStatus(`Encountered an error while loading details for ` trip.name); + // console.log(error); + // }); } const reserveTrip = (trip) => { @@ -61,5 +77,5 @@ const reserveTrip = (trip) => { } $(document).ready(() => { - $('#load-trips').click(loadTrips); + $('#trips-button').on('click', loadTrips); }); \ No newline at end of file From 1cfd6c3545e0fe8d8279d3e3a794d24ef360480a Mon Sep 17 00:00:00 2001 From: Pauline Sauget Date: Sun, 2 Jun 2019 23:16:05 -0700 Subject: [PATCH 5/6] Add functions to load & display trip's details on click --- index.css | 2 +- index.html | 5 +++-- index.js | 64 +++++++++++++++++++++++++++++------------------------- 3 files changed, 39 insertions(+), 32 deletions(-) diff --git a/index.css b/index.css index 5dea82c5..8e6511c4 100644 --- a/index.css +++ b/index.css @@ -5,7 +5,7 @@ body { main { display: grid; - grid-template-columns: 2fr 1fr; + grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; grid-template-areas: "list details" diff --git a/index.html b/index.html index b215395d..01b73ede 100644 --- a/index.html +++ b/index.html @@ -16,11 +16,12 @@

          Trek

          -
          +
            -
            +

            Trip Details

            +
              diff --git a/index.js b/index.js index 90e85da0..e8e27b29 100644 --- a/index.js +++ b/index.js @@ -1,8 +1,6 @@ const URL = 'https://trektravel.herokuapp.com/trips/' -// // Status Management -// const reportStatus = (message) => { $('#status-message').html(message); }; @@ -18,15 +16,19 @@ const reportError = (message, errors) => { reportStatus(content); }; - +// Wave 1 - Display const displayTripsList = (tripsList) => { const target = $('#trips-list'); target.empty(); tripsList.forEach(trip => { - target.append(`
            • ${trip.name}
              • `); + target.append(`
            • ${trip.name}
              • `); + + const tripID = $(`#${trip.id}`); + tripID.click(() => loadTripDetails(trip)); }); } +// Wave 1 - Load const loadTrips = () => { reportStatus("loading trips..."); @@ -38,42 +40,46 @@ const loadTrips = () => { reportStatus(`Successfully loaded ${trips.length} trips`); }) .catch((error) => { - reportStatus(`Encountered an error while loading trip: ${error.message}`); + reportStatus(`Encountered an error while loading trips: ${error.message}`); console.log(error); }); } -const showTripDetails = (trip) => { - // DONT FORGET TO START AT TRIP 70 - - // TODO: Wave 2 - // display trip details and the trip reservation form - - // // $(this.Attr([id])) - // reportStatus("showing details for trip", trip.name); +// Wave 2 - Display +const displayTripDetails = (trip) => { + const target = $('#trip-details'); + target.empty(); - // let tripDetails = $('#trip-details'); - // tripDetails.empty(); + target.append(`

              Trip Details

              `); + target.append(`
            • ID: ${trip.id}
              • `); + target.append(`
            • Name: ${trip.name}
              • `); + target.append(`
            • Continent: ${trip.continent}
              • `); + target.append(`
            • Category: ${trip.category}
              • `); + target.append(`
            • Weeks: ${trip.weeks}
              • `); + target.append(`
            • Cost: $${trip.cost.toFixed(2)}
              • `); + target.append(`
            • About: ${trip.about}
              • `); +} - // axios.get(URL + trip.id) - // .then((response) => { - - // reportStatus(`Successfully loaded details for ` trip.name); +// Wave 2 - Load +const loadTripDetails = (trip) => { + reportStatus(`loading details for trip ${trip.name}`); - // // Do something + axios.get(URL + trip.id) + .then((response) => { + const trip = response.data; + displayTripDetails(trip); - // }) - // .catch((error) => { - // reportStatus(`Encountered an error while loading details for ` trip.name); - // console.log(error); - // }); + reportStatus(`Successfully loaded details for: ${trip.name}`); + }) + .catch((error) => { + reportStatus(`Encountered an error while loading trip: ${error.message}`); + console.log(error); + }); } -const reserveTrip = (trip) => { +const reserveTrip = (event) => { + event.preventDefault(); console.log("reserving trip", trip) - - // TODO: Wave 2 - // reserve a spot on the trip when the form is submitted } $(document).ready(() => { From 2789b674ce1d6698a1f5e45f90c2adee7a53d642 Mon Sep 17 00:00:00 2001 From: Pauline Sauget Date: Mon, 3 Jun 2019 00:33:21 -0700 Subject: [PATCH 6/6] Add function to reserve trip, with readFormData & clearForm helpers --- index.css | 20 ++++++++++++-------- index.html | 2 +- index.js | 46 ++++++++++++++++++++++++++++++++++++++++++---- 3 files changed, 55 insertions(+), 13 deletions(-) diff --git a/index.css b/index.css index 8e6511c4..1db5c863 100644 --- a/index.css +++ b/index.css @@ -12,14 +12,6 @@ main { "list reserve" } -#status-message { - -} - -#trips-button { - -} - #trips-list { grid-area: list; } @@ -31,3 +23,15 @@ main { #reserve-trip { grid-area: reserve; } + +#status-message { + +} + +#trips-button { + +} + +#reservation-form { + +} diff --git a/index.html b/index.html index 01b73ede..182c215b 100644 --- a/index.html +++ b/index.html @@ -37,7 +37,7 @@

              Reserve a Spot on Example Trip

              - +
              diff --git a/index.js b/index.js index e8e27b29..a8613b4f 100644 --- a/index.js +++ b/index.js @@ -21,7 +21,7 @@ const displayTripsList = (tripsList) => { const target = $('#trips-list'); target.empty(); tripsList.forEach(trip => { - target.append(`
            • ${trip.name}
              • `); + target.append(`
            • ${trip.name}
              • `); const tripID = $(`#${trip.id}`); tripID.click(() => loadTripDetails(trip)); @@ -36,7 +36,6 @@ const loadTrips = () => { .then((response) => { const trips = response.data; displayTripsList(trips); - reportStatus(`Successfully loaded ${trips.length} trips`); }) .catch((error) => { @@ -70,6 +69,7 @@ const loadTripDetails = (trip) => { displayTripDetails(trip); reportStatus(`Successfully loaded details for: ${trip.name}`); + $('#reservation-form').submit(() => reserveTrip(trip)) }) .catch((error) => { reportStatus(`Encountered an error while loading trip: ${error.message}`); @@ -77,9 +77,47 @@ const loadTripDetails = (trip) => { }); } -const reserveTrip = (event) => { +// Wave 3 +const readFormData = () => { + const parsedFormData = {}; + + // const fields = ['name', 'email']; + // for (let field in fields) { + // const dataFromForm = $(`#reservation-form input[name=${field}]`).val(); + // parsedFormData[field] = dataFromForm ? dataFromForm : undefined; + // } + parsedFormData.name = $("input[name='name']").val(); + parsedFormData.email = $("input[name='email']").val(); + return parsedFormData; +} + +const clearForm = () => { + $(`#pet-form input[name="name"]`).val(''); + $(`#pet-form input[name="email"]`).val(''); +} + +const reserveTrip = (trip) => { event.preventDefault(); - console.log("reserving trip", trip) + const reservationData = readFormData(); + + reportStatus(`Sending reservation data for: ${trip.name}`); + + axios.post(URL + trip.id + '/reservations', reservationData) + .then((response) => { + reportStatus(`Successfully added a reservation with ID ${response.data.id}!`); + 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}`); + } + }); } $(document).ready(() => {