From 40dcfb45e4ae401fc80c66004638500e5032dcde Mon Sep 17 00:00:00 2001 From: Shirley Chu Date: Wed, 29 May 2019 14:12:54 -0700 Subject: [PATCH 1/4] load trips functionality completed --- index.html | 35 ++++++++++++++++++++++++++++++++++ index.js | 53 ++++++++++++++++++++++++++++++++++++++++++++++++++++ planning.txt | 29 ++++++++++++++++++++++++++++ 3 files changed, 117 insertions(+) create mode 100644 index.html create mode 100644 index.js create mode 100644 planning.txt diff --git a/index.html b/index.html new file mode 100644 index 00000000..7bc57035 --- /dev/null +++ b/index.html @@ -0,0 +1,35 @@ + + + + + + + + Trek + + + + + + + + +
+ +
+
+

All Trips

+ +
    +
    + +
    +

    Trip Details

    +
      +
      + +
      + + + + \ No newline at end of file diff --git a/index.js b/index.js new file mode 100644 index 00000000..c78a4e34 --- /dev/null +++ b/index.js @@ -0,0 +1,53 @@ +const tripListURL = 'https://trektravel.herokuapp.com/trips'; + +// +// Status Management +// +const reportStatus = (message) => { + $('#status-message').html(message); +}; + +const reportError = (message, errors) => { + let content = `

      ${message}

      "; + reportStatus(content); +}; + +// +// Loading Trips +// +const loadTrips = () => { + reportStatus('Loading trips...'); + + const tripList = $('#trip-list'); + tripList.empty(); + + // sends GET request to endpoint + axios.get(tripListURL) + .then((response) => { + reportStatus(`Successfully loaded ${response.data.length} trips`); + // parses through each response + response.data.forEach((trip) => { + // adds each trip to list + tripList.append(`
    • Trip ${trip.id} : ${trip.name}
      • `); + }); + }) + .catch((error) => { + reportStatus(`Encountered an error while loading trips: ${error.message}`); + console.log(error); + }); +}; + +// + +// +// OK GO!!!!! +// +$(document).ready(() => { + $('#load').click(loadTrips); +}); \ No newline at end of file diff --git a/planning.txt b/planning.txt new file mode 100644 index 00000000..a7ab6293 --- /dev/null +++ b/planning.txt @@ -0,0 +1,29 @@ +API Structure: +[{"id":70, "name":"Cairo to Zanzibar", +"continent":"Africa", "category":"everything", +"weeks":5,"cost":9599.99 +}] + +Wave 1 +As a user on the home page with no trips listed, I want to click a button or link, so that I see a list of all trips. + ? all trips is ul - add shit as an li item + /click button triggers event + /load api for trip num only + /index into array for each, interpolate as `trip ${tripid} : ${tripname} ` + +Wave 2 +As a user on the home page with trips listed, I want to click on a specific trip, so that I see a new section appear with details of that trip. +As a user on the home page, after I've selected a specific trip, I want to see the following fields listed in the new section of the page, so that I know the details of that trip: + ? trip details is its own ul + /click on list triggers show page + /build endpoint + /load info for that specific trip + + +Trip ID +Trip name +Continent +Details about the trip +Category of the trip +Number of weeks duration of the trip +Cost of the trip \ No newline at end of file From 78e805b950ab89f3f9361be2ab473d5c6431e7fe Mon Sep 17 00:00:00 2001 From: Shirley Chu Date: Wed, 29 May 2019 15:08:21 -0700 Subject: [PATCH 2/4] got trip details to show --- index.css | 0 index.html | 5 +++-- index.js | 40 ++++++++++++++++++++++++++++++++++++++-- 3 files changed, 41 insertions(+), 4 deletions(-) create mode 100644 index.css diff --git a/index.css b/index.css new file mode 100644 index 00000000..e69de29b diff --git a/index.html b/index.html index 7bc57035..45b8aedb 100644 --- a/index.html +++ b/index.html @@ -24,8 +24,9 @@

      All Trips

      -

      Trip Details

      -
        + +
          +
        diff --git a/index.js b/index.js index c78a4e34..92624c3f 100644 --- a/index.js +++ b/index.js @@ -34,7 +34,7 @@ const loadTrips = () => { // parses through each response response.data.forEach((trip) => { // adds each trip to list - tripList.append(`
      • Trip ${trip.id} : ${trip.name}
        • `); + tripList.append(`
      • Trip ${trip.id} : ${trip.name}
        • `); }); }) .catch((error) => { @@ -43,11 +43,47 @@ const loadTrips = () => { }); }; -// +// read into single trip +const readTrip = (tripID) => { + reportStatus('Loading trips...'); + + const tripAttributes = $('#trip-attributes'); + tripAttributes.empty(); + + // compiles url for specific trip + const tripURL = tripListURL + '/' + tripID; + + // sends GET request to endpoint + axios.get(tripURL) + .then((response) => { + reportStatus(`Successfully loaded Trip ${tripID}`); + // add header + tripAttributes.append(`

        Trip Details

        `); + // parse through hashy details object + + for (let [detail, value] of Object.entries(response.data)) { + tripAttributes.append(`
      • ${detail}: ${value}
        • `); + } + // response.data.forEach((detail) => { + // // adds each trip to list + // tripAttributes.append(`
      • ${detail}
        • `); + // }); + }) + .catch((error) => { + reportStatus(`Encountered an error while loading trips: ${error.message}`); + console.log(error); + }); +}; + +// Object.entries documentation // // OK GO!!!!! // $(document).ready(() => { $('#load').click(loadTrips); + $('#trip-list').on('click', '.trip', function () { + readTrip(this.id); + }) + }); \ No newline at end of file From 5bd1e008af021efd976d301733467e477af8d9cc Mon Sep 17 00:00:00 2001 From: Shirley Chu Date: Tue, 11 Jun 2019 13:56:56 -0700 Subject: [PATCH 3/4] added reservation form --- index.css | 8 ++++++++ index.html | 4 +++- index.js | 55 ++++++++++++++++++++++++++++++++++++++++++++-------- planning.txt | 14 ++++++++++++- 4 files changed, 71 insertions(+), 10 deletions(-) diff --git a/index.css b/index.css index e69de29b..b9bfd8ec 100644 --- a/index.css +++ b/index.css @@ -0,0 +1,8 @@ +ul { + list-style: none +} + +.trip { + border: 2px solid; + display: table +} \ No newline at end of file diff --git a/index.html b/index.html index 45b8aedb..28ee83fc 100644 --- a/index.html +++ b/index.html @@ -18,7 +18,6 @@
        -

        All Trips

          @@ -27,6 +26,9 @@

          All Trips

          + +
          +
          diff --git a/index.js b/index.js index 92624c3f..7e72bae8 100644 --- a/index.js +++ b/index.js @@ -30,6 +30,7 @@ const loadTrips = () => { // sends GET request to endpoint axios.get(tripListURL) .then((response) => { + tripList.append('

          All Trips

          ') reportStatus(`Successfully loaded ${response.data.length} trips`); // parses through each response response.data.forEach((trip) => { @@ -59,15 +60,12 @@ const readTrip = (tripID) => { reportStatus(`Successfully loaded Trip ${tripID}`); // add header tripAttributes.append(`

          Trip Details

          `); + // parse through hashy details object - for (let [detail, value] of Object.entries(response.data)) { - tripAttributes.append(`
        • ${detail}: ${value}
          • `); + tripAttributes.append(`
        • ${detail.charAt(0).toUpperCase() + detail.slice(1)}: ${value}
          • `); } - // response.data.forEach((detail) => { - // // adds each trip to list - // tripAttributes.append(`
        • ${detail}
          • `); - // }); + }) .catch((error) => { reportStatus(`Encountered an error while loading trips: ${error.message}`); @@ -75,7 +73,41 @@ const readTrip = (tripID) => { }); }; -// Object.entries documentation +const tripForm = (tripID) => { + reportStatus('Loading trip form'); + + const tripFormContainer = $('#trip-form-container'); + tripFormContainer.empty(); + + const tripURL = tripListURL + '/' + tripID; + + const form = `
          +
          + + +
          + + + `; + + // sends GET request to endpoint + axios.get(tripURL) + .then((response) => { + reportStatus(`Successfully loaded Trip ${tripID}`); + // add header + tripFormContainer.append(`

          Reserve This Trip

          `+ form); + + }) + .catch((error) => { + reportStatus(`Encountered an error while loading trips: ${error.message}`); + console.log(error); + }); +}; + + // // OK GO!!!!! @@ -85,5 +117,12 @@ $(document).ready(() => { $('#trip-list').on('click', '.trip', function () { readTrip(this.id); }) + $('#trip-list').on('click', '.trip', function () { + tripForm(this.id); + }) + +}); + + + -}); \ No newline at end of file diff --git a/planning.txt b/planning.txt index a7ab6293..4b2e6633 100644 --- a/planning.txt +++ b/planning.txt @@ -26,4 +26,16 @@ Continent Details about the trip Category of the trip Number of weeks duration of the trip -Cost of the trip \ No newline at end of file +Cost of the trip + + +Wave 3 + +1. load form when trip gets clicked -> trigger event, click +name, email + +2. send a post request when submit gets clicked + clear form + +3. create new trip, with some info set + From 7d5c4978bfad53a780e22b6b7df9107f6ed4565c Mon Sep 17 00:00:00 2001 From: Shirley Chu Date: Tue, 11 Jun 2019 14:30:33 -0700 Subject: [PATCH 4/4] added axios post for making reservation --- index.js | 70 +++++++++++++++++++++++++++++++++++++++++++++++--------- 1 file changed, 59 insertions(+), 11 deletions(-) diff --git a/index.js b/index.js index 7e72bae8..1bf95a2c 100644 --- a/index.js +++ b/index.js @@ -60,12 +60,12 @@ const readTrip = (tripID) => { reportStatus(`Successfully loaded Trip ${tripID}`); // add header tripAttributes.append(`

          Trip Details

          `); - + // parse through hashy details object for (let [detail, value] of Object.entries(response.data)) { tripAttributes.append(`
        • ${detail.charAt(0).toUpperCase() + detail.slice(1)}: ${value}
          • `); } - + }) .catch((error) => { reportStatus(`Encountered an error while loading trips: ${error.message}`); @@ -81,7 +81,8 @@ const tripForm = (tripID) => { const tripURL = tripListURL + '/' + tripID; - const form = ` + + const form = `
          @@ -96,10 +97,10 @@ const tripForm = (tripID) => { // sends GET request to endpoint axios.get(tripURL) .then((response) => { - reportStatus(`Successfully loaded Trip ${tripID}`); + reportStatus(`Successfully loaded Trip Form ${tripID}`); // add header - tripFormContainer.append(`

          Reserve This Trip

          `+ form); - + tripFormContainer.append(`

          Reserve This Trip

          ` + form); + }) .catch((error) => { reportStatus(`Encountered an error while loading trips: ${error.message}`); @@ -108,6 +109,53 @@ const tripForm = (tripID) => { }; +const readFormData = () => { + const parsedFormData = {}; + + const nameFromForm = $(`#trip-form input[name="name"]`).val(); + parsedFormData['name'] = nameFromForm ? nameFromForm : undefined; + + const emailFromForm = $(`#trip-form input[name="email"]`).val(); + parsedFormData['email'] = emailFromForm ? emailFromForm : undefined; + + return parsedFormData; +}; + +const clearForm = () => { + $(`#trip-form input[name="name"]`).val(''); + $(`#trip-form input[name="email"]`).val(''); +} + + +const makeReservation = (tripID) => { + const tripURL = tripListURL + '/' + tripID; + + event.preventDefault(); + + const tripData = readFormData(); + console.log(tripData); + + reportStatus('Sending trip data...'); + + axios.post(tripURL, tripData) + .then((response) => { + reportStatus(`Successfully added a trip with ID ${tripID}!`); + 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}`); + } + }); + +}; + // // OK GO!!!!! @@ -116,11 +164,11 @@ $(document).ready(() => { $('#load').click(loadTrips); $('#trip-list').on('click', '.trip', function () { readTrip(this.id); - }) - $('#trip-list').on('click', '.trip', function () { - tripForm(this.id); - }) - + tripForm(this.id) + }); + $('#tripForm').on('submit', 'button', function () { + makeReservation(this.class) + }); });