From 91cdae81fec651f6e6066434f2cae5f59c28d4f8 Mon Sep 17 00:00:00 2001 From: Valerie Gidzinski Date: Tue, 20 Nov 2018 16:22:18 -0800 Subject: [PATCH 01/56] Add html doc and scripts for JS, jQuery, axios --- index.html | 13 +++++++++++++ 1 file changed, 13 insertions(+) create mode 100644 index.html diff --git a/index.html b/index.html new file mode 100644 index 00000000..69cc7a90 --- /dev/null +++ b/index.html @@ -0,0 +1,13 @@ + + + + + Trek + + + + + + + + From e59dd9986ab482c96da7e8109f7969dbf1fc08ae Mon Sep 17 00:00:00 2001 From: Valerie Gidzinski Date: Tue, 20 Nov 2018 16:23:20 -0800 Subject: [PATCH 02/56] Add js doc --- index.js | 0 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 index.js diff --git a/index.js b/index.js new file mode 100644 index 00000000..e69de29b From c02b8063e4ba3ff045db8d8b09d25f5bb65dadcc Mon Sep 17 00:00:00 2001 From: Valerie Gidzinski Date: Tue, 20 Nov 2018 16:41:25 -0800 Subject: [PATCH 03/56] Section for current trips list --- index.html | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 69cc7a90..780255c2 100644 --- a/index.html +++ b/index.html @@ -8,6 +8,10 @@ - +
+

Trip List

+ +
    +
    From ac9ab06bda32be64db93f7dd3853313ea3ee39a1 Mon Sep 17 00:00:00 2001 From: Valerie Gidzinski Date: Tue, 20 Nov 2018 16:42:01 -0800 Subject: [PATCH 04/56] loadTrips function with get request for all trips --- index.js | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/index.js b/index.js index e69de29b..179bb460 100644 --- a/index.js +++ b/index.js @@ -0,0 +1,20 @@ +const URL = 'https://trektravel.herokuapp.com/trips' + +const loadTrips = () => { + const tripList = $('#trip-list'); + tripList.empty(); + + axios.get(URL) + .then((response) => { + response.data.forEach((trip) => { + tripList.append(`
  • ${trip.name}
    • `); + }); + }) + .catch((error) => { + console.log(error); + }); +}; + +$(document).ready(() => { + $('#load').click(loadTrips); +}); From 13ba34559bf5c74649af6c2c27655f37ddc3d496 Mon Sep 17 00:00:00 2001 From: Valerie Gidzinski Date: Wed, 21 Nov 2018 10:23:31 -0800 Subject: [PATCH 05/56] Section for status message --- index.html | 1 + 1 file changed, 1 insertion(+) diff --git a/index.html b/index.html index 780255c2..c3b2d8d4 100644 --- a/index.html +++ b/index.html @@ -8,6 +8,7 @@ +

    Trip List

    From a131ac8d1579299deec4938196639932e3a1f8b8 Mon Sep 17 00:00:00 2001 From: Valerie Gidzinski Date: Wed, 21 Nov 2018 10:25:19 -0800 Subject: [PATCH 06/56] Create reportStatus method, invoke in loadPets for UI feedback --- index.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/index.js b/index.js index 179bb460..d4be53fc 100644 --- a/index.js +++ b/index.js @@ -1,17 +1,23 @@ const URL = 'https://trektravel.herokuapp.com/trips' +const reportStatus = (message) => { + $('#status-message').html(message); +}; + const loadTrips = () => { + reportStatus("Loading trips...") const tripList = $('#trip-list'); tripList.empty(); axios.get(URL) .then((response) => { + reportStatus(`Successfully loaded ${response.data.length} trips.`); response.data.forEach((trip) => { tripList.append(`
  • ${trip.name}
    • `); }); }) .catch((error) => { - console.log(error); + reportStatus(`Encountered an error ${error.message}`); }); }; From ee7210dc54e79c63399db87b14c6127836eee783 Mon Sep 17 00:00:00 2001 From: Valerie Gidzinski Date: Thu, 22 Nov 2018 12:18:50 -0800 Subject: [PATCH 07/56] Rename loadTrips as getAllTrips --- index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/index.js b/index.js index d4be53fc..f8e2c246 100644 --- a/index.js +++ b/index.js @@ -4,7 +4,7 @@ const reportStatus = (message) => { $('#status-message').html(message); }; -const loadTrips = () => { +const getAllTrips = () => { reportStatus("Loading trips...") const tripList = $('#trip-list'); tripList.empty(); @@ -22,5 +22,5 @@ const loadTrips = () => { }; $(document).ready(() => { - $('#load').click(loadTrips); + $('#load').click(getAllTrips); }); From 99c403c447474c2c9ec0a38f9c59d4e3ba5e5927 Mon Sep 17 00:00:00 2001 From: Valerie Gidzinski Date: Thu, 22 Nov 2018 12:26:37 -0800 Subject: [PATCH 08/56] Trip detail container --- index.html | 18 +++++++++++++----- 1 file changed, 13 insertions(+), 5 deletions(-) diff --git a/index.html b/index.html index c3b2d8d4..5ef0a98c 100644 --- a/index.html +++ b/index.html @@ -9,10 +9,18 @@
    -
    -

    Trip List

    - -
      -
      + +
      +
      +

      Trip List

      + +
        +
        + +
        +

        Trip Detail

        +
          +
          +
          From e7af61214ea16134efa4c4cecb2e664bbe1c1a5e Mon Sep 17 00:00:00 2001 From: Valerie Gidzinski Date: Thu, 22 Nov 2018 12:29:33 -0800 Subject: [PATCH 09/56] Add stylesheet with basic grid layout --- index.css | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 index.css diff --git a/index.css b/index.css new file mode 100644 index 00000000..9deb4421 --- /dev/null +++ b/index.css @@ -0,0 +1,4 @@ +main { + display: grid; + grid-template-columns: 1fr 1fr; +} From d30d539d0fb3e0da386eec71043cec1794b490f0 Mon Sep 17 00:00:00 2001 From: Valerie Gidzinski Date: Thu, 22 Nov 2018 12:30:14 -0800 Subject: [PATCH 10/56] Link to CSS --- index.html | 2 ++ 1 file changed, 2 insertions(+) diff --git a/index.html b/index.html index 5ef0a98c..2ea0e65c 100644 --- a/index.html +++ b/index.html @@ -3,9 +3,11 @@ Trek + +
          From 9e14517913b0dcccf77edaeac02af144c9f588e9 Mon Sep 17 00:00:00 2001 From: Valerie Gidzinski Date: Thu, 22 Nov 2018 15:46:28 -0800 Subject: [PATCH 11/56] Change id on get trips button --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 2ea0e65c..62cca862 100644 --- a/index.html +++ b/index.html @@ -15,7 +15,7 @@

          Trip List

          - +
            From 6a0ec8d83c243fd96bf7f38d7c11cf0bea7af069 Mon Sep 17 00:00:00 2001 From: Valerie Gidzinski Date: Thu, 22 Nov 2018 15:48:29 -0800 Subject: [PATCH 12/56] Wrap trip list names in button tag, add id --- index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.js b/index.js index f8e2c246..0010585b 100644 --- a/index.js +++ b/index.js @@ -13,7 +13,7 @@ const getAllTrips = () => { .then((response) => { reportStatus(`Successfully loaded ${response.data.length} trips.`); response.data.forEach((trip) => { - tripList.append(`
          • ${trip.name}
            • `); + tripList.append(`
            • `); }); }) .catch((error) => { From 48dbe36673f485dc0c4a20d14727d5799854bb2e Mon Sep 17 00:00:00 2001 From: Valerie Gidzinski Date: Thu, 22 Nov 2018 15:54:13 -0800 Subject: [PATCH 13/56] getTripDetail function with get request for single trip - first draft, only works for trip id 1 - and adjust jQuery selectors --- index.js | 22 +++++++++++++++++++++- 1 file changed, 21 insertions(+), 1 deletion(-) diff --git a/index.js b/index.js index 0010585b..fa2de597 100644 --- a/index.js +++ b/index.js @@ -21,6 +21,26 @@ const getAllTrips = () => { }); }; +const getTripDetail = () => { + reportStatus("Loading trip...") + const tripDetailList = $('#trip-detail-list'); + tripDetailList.empty(); + // const tripId = $(`#get-trip-${(this).html()}`).get; + // const detail = URL + '/' + tripId + axios.get(URL) + .then((response) => { + return axios.get(URL + '/' + `${response.data[0].id}`); + }) + .then((response) => { + reportStatus("Successfully loaded trip!") + tripDetailList.append(`
          • ${response.data.name}
          • ${response.data.continent}
            • `); + }) + .catch((error) => { + reportStatus(`Encountered an error ${error.message}`); + }); +}; + $(document).ready(() => { - $('#load').click(getAllTrips); + $('#load-all-trips').click(getAllTrips); + $('ul').on('click', 'button', getTripDetail); }); From 81f8c0359f38376582b87953a09f6a7167da6001 Mon Sep 17 00:00:00 2001 From: Valerie Gidzinski Date: Thu, 22 Nov 2018 16:51:43 -0800 Subject: [PATCH 14/56] Change trip list button id value to integer only --- index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.js b/index.js index fa2de597..d2747aa8 100644 --- a/index.js +++ b/index.js @@ -13,7 +13,7 @@ const getAllTrips = () => { .then((response) => { reportStatus(`Successfully loaded ${response.data.length} trips.`); response.data.forEach((trip) => { - tripList.append(`
            • `); + tripList.append(`
            • `); }); }) .catch((error) => { From c31debd0a57dec44aef896bf15375703d2188f2c Mon Sep 17 00:00:00 2001 From: Valerie Gidzinski Date: Thu, 22 Nov 2018 16:53:02 -0800 Subject: [PATCH 15/56] Update getTripDetail to take id parameter, add to request URL --- index.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/index.js b/index.js index d2747aa8..a6cb4bda 100644 --- a/index.js +++ b/index.js @@ -21,15 +21,14 @@ const getAllTrips = () => { }); }; -const getTripDetail = () => { +const getTripDetail = (id) => { reportStatus("Loading trip...") const tripDetailList = $('#trip-detail-list'); tripDetailList.empty(); - // const tripId = $(`#get-trip-${(this).html()}`).get; - // const detail = URL + '/' + tripId + axios.get(URL) .then((response) => { - return axios.get(URL + '/' + `${response.data[0].id}`); + return axios.get(URL + '/' + id); }) .then((response) => { reportStatus("Successfully loaded trip!") From 092d730b946d1d3cebc0a0165c3850531fdb4455 Mon Sep 17 00:00:00 2001 From: Valerie Gidzinski Date: Thu, 22 Nov 2018 16:54:46 -0800 Subject: [PATCH 16/56] Event handling function to get id from trip that was clicked --- index.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/index.js b/index.js index a6cb4bda..9bd0fa1c 100644 --- a/index.js +++ b/index.js @@ -41,5 +41,8 @@ const getTripDetail = (id) => { $(document).ready(() => { $('#load-all-trips').click(getAllTrips); - $('ul').on('click', 'button', getTripDetail); + $('ul').on('click', 'button', function(event) { + let id = $(this).attr('id'); + getTripDetail(id); + }); }); From c3d8bfd50462ca68a3842a8d62e1b1bbc09b752c Mon Sep 17 00:00:00 2001 From: Valerie Gidzinski Date: Fri, 23 Nov 2018 13:02:26 -0800 Subject: [PATCH 17/56] ul styling --- index.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/index.css b/index.css index 9deb4421..91c46b81 100644 --- a/index.css +++ b/index.css @@ -2,3 +2,7 @@ main { display: grid; grid-template-columns: 1fr 1fr; } + +ul { + list-style: none; +} From 16943464092887d8ad18bdb8d97ec2d02fbba02c Mon Sep 17 00:00:00 2001 From: Valerie Gidzinski Date: Fri, 23 Nov 2018 13:03:41 -0800 Subject: [PATCH 18/56] Add trip info to trip detail section --- index.js | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/index.js b/index.js index 9bd0fa1c..8219093b 100644 --- a/index.js +++ b/index.js @@ -32,7 +32,15 @@ const getTripDetail = (id) => { }) .then((response) => { reportStatus("Successfully loaded trip!") - tripDetailList.append(`
          • ${response.data.name}
          • ${response.data.continent}
            • `); + let trip = response.data + tripDetailList.append( + `
          • Name: ${trip.name}
            • +
          • Continent: ${trip.continent}
            • +
          • Category: ${trip.category}
            • +
          • Weeks: ${trip.weeks}
            • +
          • Cost: ${trip.cost}
            • +
          • About: ${trip.about}
            • ` + ); }) .catch((error) => { reportStatus(`Encountered an error ${error.message}`); From 1672728675b5dc2d26b25302f461a9e204d428b1 Mon Sep 17 00:00:00 2001 From: Valerie Gidzinski Date: Sat, 24 Nov 2018 04:08:42 -0800 Subject: [PATCH 19/56] Refactor get request methods --- index.js | 76 +++++++++++++++++++++++++++----------------------------- 1 file changed, 37 insertions(+), 39 deletions(-) diff --git a/index.js b/index.js index 8219093b..09f1d8d0 100644 --- a/index.js +++ b/index.js @@ -4,53 +4,51 @@ const reportStatus = (message) => { $('#status-message').html(message); }; -const getAllTrips = () => { - reportStatus("Loading trips...") - const tripList = $('#trip-list'); - tripList.empty(); - - axios.get(URL) - .then((response) => { - reportStatus(`Successfully loaded ${response.data.length} trips.`); - response.data.forEach((trip) => { - tripList.append(`
            • `); +const getRequestHandler = (id) => { + const sendGetRequest = () => { + reportStatus('Loading...') + let url = URL + id; + axios.get(url) + .then((response) => { + reportStatus('Successfully loaded!') + handleGetResponse(response); + }) + .catch((error) => { + reportStatus(`Encountered an error ${error.message}`); }); - }) - .catch((error) => { - reportStatus(`Encountered an error ${error.message}`); - }); + }; + return sendGetRequest; }; -const getTripDetail = (id) => { - reportStatus("Loading trip...") - const tripDetailList = $('#trip-detail-list'); - tripDetailList.empty(); - - axios.get(URL) - .then((response) => { - return axios.get(URL + '/' + id); - }) - .then((response) => { - reportStatus("Successfully loaded trip!") - let trip = response.data - tripDetailList.append( - `
          • Name: ${trip.name}
            • -
          • Continent: ${trip.continent}
            • -
          • Category: ${trip.category}
            • -
          • Weeks: ${trip.weeks}
            • -
          • Cost: ${trip.cost}
            • -
          • About: ${trip.about}
            • ` - ); - }) - .catch((error) => { - reportStatus(`Encountered an error ${error.message}`); +const handleGetResponse = (response) => { + if (response.data.length > 1) { + let tripList = $('#trip-list'); + tripList.empty(); + response.data.forEach((trip) => { + tripList.append(`
            • `); }); + } else { + let tripList = $('#trip-detail-list'); + tripList.empty(); + let trip = response.data; + tripList.append( + `
          • Name: ${trip.name}
            • +
          • Continent: ${trip.continent}
            • +
          • Category: ${trip.category}
            • +
          • Weeks: ${trip.weeks}
            • +
          • Cost: ${trip.cost}
            • +
          • About: ${trip.about}
            • ` + ); + } }; $(document).ready(() => { + const getAllTrips = getRequestHandler('/'); $('#load-all-trips').click(getAllTrips); + $('ul').on('click', 'button', function(event) { - let id = $(this).attr('id'); - getTripDetail(id); + let id = '/' + $(this).attr('id'); + const getTripDetails = getRequestHandler(id); + getTripDetails(); }); }); From 0c008d051e21a37c54f06d32da98d8d86f2e3654 Mon Sep 17 00:00:00 2001 From: Valerie Gidzinski Date: Sat, 24 Nov 2018 04:13:43 -0800 Subject: [PATCH 20/56] Remove extra get request --- index.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/index.js b/index.js index 8219093b..8ee5a9c5 100644 --- a/index.js +++ b/index.js @@ -26,10 +26,7 @@ const getTripDetail = (id) => { const tripDetailList = $('#trip-detail-list'); tripDetailList.empty(); - axios.get(URL) - .then((response) => { - return axios.get(URL + '/' + id); - }) + axios.get(URL + '/' + id) .then((response) => { reportStatus("Successfully loaded trip!") let trip = response.data From 75dfa585a161ff7045273b96ecf8399d18c9c06d Mon Sep 17 00:00:00 2001 From: Valerie Gidzinski Date: Sat, 24 Nov 2018 04:43:15 -0800 Subject: [PATCH 21/56] Removed unused variable --- index.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/index.js b/index.js index 09f1d8d0..ffd8ddb3 100644 --- a/index.js +++ b/index.js @@ -7,8 +7,7 @@ const reportStatus = (message) => { const getRequestHandler = (id) => { const sendGetRequest = () => { reportStatus('Loading...') - let url = URL + id; - axios.get(url) + axios.get(URL + id) .then((response) => { reportStatus('Successfully loaded!') handleGetResponse(response); From 71eb979b698836fa93213abc65728447977e9cd6 Mon Sep 17 00:00:00 2001 From: Valerie Gidzinski Date: Sat, 24 Nov 2018 05:20:55 -0800 Subject: [PATCH 22/56] Refactor handleGetResponse function, add element parameter --- index.js | 23 ++++++++++++----------- 1 file changed, 12 insertions(+), 11 deletions(-) diff --git a/index.js b/index.js index ffd8ddb3..77b07768 100644 --- a/index.js +++ b/index.js @@ -10,7 +10,8 @@ const getRequestHandler = (id) => { axios.get(URL + id) .then((response) => { reportStatus('Successfully loaded!') - handleGetResponse(response); + let element = id === '/' ? $('#trip-list') : $('#trip-detail-list') + handleGetResponse(element, response); }) .catch((error) => { reportStatus(`Encountered an error ${error.message}`); @@ -19,18 +20,18 @@ const getRequestHandler = (id) => { return sendGetRequest; }; -const handleGetResponse = (response) => { - if (response.data.length > 1) { - let tripList = $('#trip-list'); - tripList.empty(); - response.data.forEach((trip) => { - tripList.append(`
            • `); +const handleGetResponse = (element, response) => { + element.empty(); + let trip = response.data + + if (trip.length) { + trip.forEach((trip) => { + element.append( + `
            • `); }); } else { - let tripList = $('#trip-detail-list'); - tripList.empty(); - let trip = response.data; - tripList.append( + element.append( `
          • Name: ${trip.name}
          • Continent: ${trip.continent}
          • Category: ${trip.category}
            • From 2789c078ff2b7e7c9859bb2d728592435068218d Mon Sep 17 00:00:00 2001 From: Valerie Gidzinski Date: Sat, 24 Nov 2018 07:02:16 -0800 Subject: [PATCH 23/56] Refactor handleGetResponse info display --- index.js | 31 +++++++++++++++++++------------ 1 file changed, 19 insertions(+), 12 deletions(-) diff --git a/index.js b/index.js index 77b07768..01272c4a 100644 --- a/index.js +++ b/index.js @@ -6,7 +6,7 @@ const reportStatus = (message) => { const getRequestHandler = (id) => { const sendGetRequest = () => { - reportStatus('Loading...') + reportStatus('Loading...'); axios.get(URL + id) .then((response) => { reportStatus('Successfully loaded!') @@ -21,24 +21,31 @@ const getRequestHandler = (id) => { }; const handleGetResponse = (element, response) => { + const headers = ['name', 'continent', 'category', 'weeks', 'cost', 'about'] element.empty(); - let trip = response.data + const tripData = response.data; - if (trip.length) { - trip.forEach((trip) => { + if (tripData.length) { + tripData.forEach((trip) => { element.append( `
            • `); }); } else { - element.append( - `
          • Name: ${trip.name}
            • -
          • Continent: ${trip.continent}
            • -
          • Category: ${trip.category}
            • -
          • Weeks: ${trip.weeks}
            • -
          • Cost: ${trip.cost}
            • -
          • About: ${trip.about}
            • ` - ); + headers.forEach((header) => { + header.toString(); + element.append( + `
          • ${header}: ${response.data.name}
            • ` + ) + }); + // element.append( + // `
          • Name: ${trip.name}
            • + //
          • Continent: ${trip.continent}
            • + //
          • Category: ${trip.category}
            • + //
          • Weeks: ${trip.weeks}
            • + //
          • Cost: ${trip.cost}
            • + //
          • About: ${trip.about}
            • ` + // ); } }; From e0e5ffccc701573e4dfb71ce48e7a98613dad000 Mon Sep 17 00:00:00 2001 From: Valerie Gidzinski Date: Sat, 24 Nov 2018 15:55:48 -0800 Subject: [PATCH 24/56] Refactor trip detail html with forEach --- index.js | 12 ++---------- 1 file changed, 2 insertions(+), 10 deletions(-) diff --git a/index.js b/index.js index 01272c4a..6b8f298f 100644 --- a/index.js +++ b/index.js @@ -32,20 +32,12 @@ const handleGetResponse = (element, response) => { ${trip.name}`); }); } else { + const headers = ['name', 'continent', 'category', 'weeks', 'cost', 'about'] headers.forEach((header) => { - header.toString(); element.append( - `
          • ${header}: ${response.data.name}
            • ` + `
          • ${header}: ${tripData[header]}
            • ` ) }); - // element.append( - // `
          • Name: ${trip.name}
            • - //
          • Continent: ${trip.continent}
            • - //
          • Category: ${trip.category}
            • - //
          • Weeks: ${trip.weeks}
            • - //
          • Cost: ${trip.cost}
            • - //
          • About: ${trip.about}
            • ` - // ); } }; From ff5c9800ff2b1caf609c5ef4c6a4dfcef39a1347 Mon Sep 17 00:00:00 2001 From: Valerie Gidzinski Date: Sat, 24 Nov 2018 16:10:08 -0800 Subject: [PATCH 25/56] Rename get request methods --- index.js | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/index.js b/index.js index 6b8f298f..7ad572ab 100644 --- a/index.js +++ b/index.js @@ -4,8 +4,8 @@ const reportStatus = (message) => { $('#status-message').html(message); }; -const getRequestHandler = (id) => { - const sendGetRequest = () => { +const sendGetRequest = (id) => { + const buildGetRequest = () => { reportStatus('Loading...'); axios.get(URL + id) .then((response) => { @@ -17,11 +17,10 @@ const getRequestHandler = (id) => { reportStatus(`Encountered an error ${error.message}`); }); }; - return sendGetRequest; + return buildGetRequest; }; const handleGetResponse = (element, response) => { - const headers = ['name', 'continent', 'category', 'weeks', 'cost', 'about'] element.empty(); const tripData = response.data; @@ -42,12 +41,12 @@ const handleGetResponse = (element, response) => { }; $(document).ready(() => { - const getAllTrips = getRequestHandler('/'); + const getAllTrips = sendGetRequest('/'); $('#load-all-trips').click(getAllTrips); $('ul').on('click', 'button', function(event) { let id = '/' + $(this).attr('id'); - const getTripDetails = getRequestHandler(id); + const getTripDetails = sendGetRequest(id); getTripDetails(); }); }); From 3d9937f6890f2ba4244b11cc5d194b14cdb22274 Mon Sep 17 00:00:00 2001 From: Valerie Gidzinski Date: Sat, 24 Nov 2018 16:15:53 -0800 Subject: [PATCH 26/56] Rename get response method --- index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/index.js b/index.js index 7ad572ab..7cb67c2a 100644 --- a/index.js +++ b/index.js @@ -11,7 +11,7 @@ const sendGetRequest = (id) => { .then((response) => { reportStatus('Successfully loaded!') let element = id === '/' ? $('#trip-list') : $('#trip-detail-list') - handleGetResponse(element, response); + parseGetResponse(element, response); }) .catch((error) => { reportStatus(`Encountered an error ${error.message}`); @@ -20,7 +20,7 @@ const sendGetRequest = (id) => { return buildGetRequest; }; -const handleGetResponse = (element, response) => { +const parseGetResponse = (element, response) => { element.empty(); const tripData = response.data; From 03680fbd229dc62905eedf50ccf042fd313a9350 Mon Sep 17 00:00:00 2001 From: Valerie Gidzinski Date: Sat, 24 Nov 2018 16:40:47 -0800 Subject: [PATCH 27/56] Refactor get response methods --- index.js | 35 ++++++++++++++++++++--------------- 1 file changed, 20 insertions(+), 15 deletions(-) diff --git a/index.js b/index.js index 7cb67c2a..188d1c63 100644 --- a/index.js +++ b/index.js @@ -23,23 +23,28 @@ const sendGetRequest = (id) => { const parseGetResponse = (element, response) => { element.empty(); const tripData = response.data; - - if (tripData.length) { - tripData.forEach((trip) => { - element.append( - `
            • `); - }); - } else { - const headers = ['name', 'continent', 'category', 'weeks', 'cost', 'about'] - headers.forEach((header) => { - element.append( - `
          • ${header}: ${tripData[header]}
            • ` - ) - }); - } + tripData.length ? + parseTripCollection(element, tripData) : parseIndividualTrip(element, tripData) }; +const parseTripCollection = (element, response) => { + response.forEach((trip) => { + element.append( + `
            • `); + }); +} + +const parseIndividualTrip = (element, response) => { + const tripProperties = ['name', 'continent', 'category', 'weeks', 'cost', 'about'] + tripProperties.forEach((prop) => { + let header = prop.replace(/^\w/, c => c.toUpperCase()); + element.append( + `
          • ${header}: ${response[prop]}
            • ` + ) + }); +} + $(document).ready(() => { const getAllTrips = sendGetRequest('/'); $('#load-all-trips').click(getAllTrips); From ef3756216eb3b5e3090f18bda5152ef6078df10a Mon Sep 17 00:00:00 2001 From: Valerie Gidzinski Date: Sat, 24 Nov 2018 16:58:21 -0800 Subject: [PATCH 28/56] Create res form in html doc --- index.html | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/index.html b/index.html index 62cca862..cfff4586 100644 --- a/index.html +++ b/index.html @@ -23,6 +23,28 @@

            Trip List

            Trip Detail

              + +
              +

              Reserve a trip

              +
              +
              + + +
              + +
              + + +
              + +
              + + +
              + + +
              +
              From eae1da81fde0c8e888335e761c17c026e20fcd00 Mon Sep 17 00:00:00 2001 From: Valerie Gidzinski Date: Sat, 24 Nov 2018 17:34:01 -0800 Subject: [PATCH 29/56] reserveTrip function sends post requests --- index.js | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/index.js b/index.js index 188d1c63..3cfd366d 100644 --- a/index.js +++ b/index.js @@ -45,6 +45,24 @@ const parseIndividualTrip = (element, response) => { }); } +const reserveTrip = (event) => { + event.preventDefault(); + reportStatus('Sending request...'); + + const createResData = { + name: $('input[name="name"]').val(), + email: $('input[name="email"]').val(), + }; + + axios.post('https://trektravel.herokuapp.com/trips/1/reservations', createResData) + .then((response) => { + reportStatus('Sucessfully reserved trip!'); + }) + .catch((error) => { + reportStatus(`Encountered an error: ${error.message}`) + }); +}; + $(document).ready(() => { const getAllTrips = sendGetRequest('/'); $('#load-all-trips').click(getAllTrips); @@ -54,4 +72,6 @@ $(document).ready(() => { const getTripDetails = sendGetRequest(id); getTripDetails(); }); + + $('#reserve-form').submit(reserveTrip); }); From 1ecaf28cf5e3d8a057c2bf49f4fe57e5cade2f73 Mon Sep 17 00:00:00 2001 From: Valerie Gidzinski Date: Sat, 24 Nov 2018 17:54:15 -0800 Subject: [PATCH 30/56] Move res form fields to js --- index.html | 16 ---------------- 1 file changed, 16 deletions(-) diff --git a/index.html b/index.html index cfff4586..dbecee0c 100644 --- a/index.html +++ b/index.html @@ -27,22 +27,6 @@

              Trip Detail

              Reserve a trip

              -
              - - -
              - -
              - - -
              - -
              - - -
              - -
              From c163c64769b16c5ac3687cfa7689ca3c4dee34ca Mon Sep 17 00:00:00 2001 From: Valerie Gidzinski Date: Sat, 24 Nov 2018 17:54:46 -0800 Subject: [PATCH 31/56] appendResForm function --- index.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/index.js b/index.js index 3cfd366d..af797151 100644 --- a/index.js +++ b/index.js @@ -43,6 +43,11 @@ const parseIndividualTrip = (element, response) => { `
            • ${header}: ${response[prop]}
              • ` ) }); + appendResForm($('#reserve-form')); +} + +const appendResForm = (element) => { + element.append('
              ') } const reserveTrip = (event) => { From 936fc67b766a4570b5abec4f420de71c69c468e9 Mon Sep 17 00:00:00 2001 From: Valerie Gidzinski Date: Sat, 24 Nov 2018 17:55:14 -0800 Subject: [PATCH 32/56] Adjust grid layout for res form --- index.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/index.css b/index.css index 91c46b81..dde580e5 100644 --- a/index.css +++ b/index.css @@ -1,8 +1,14 @@ main { display: grid; grid-template-columns: 1fr 1fr; + grid-template-rows: 1fr 1fr; } ul { list-style: none; } + +.current-trips { + grid-column: 1 / 2; + grid-row: 1 / 3; +} From 4bcd733abd7f3c7e4501d8941d45c48146df7e74 Mon Sep 17 00:00:00 2001 From: Valerie Gidzinski Date: Sat, 24 Nov 2018 19:51:29 -0800 Subject: [PATCH 33/56] appendResForm takes id and stores in hidden form field --- index.js | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/index.js b/index.js index af797151..a40ef990 100644 --- a/index.js +++ b/index.js @@ -43,11 +43,20 @@ const parseIndividualTrip = (element, response) => { `
            • ${header}: ${response[prop]}
              • ` ) }); - appendResForm($('#reserve-form')); + appendResForm(response.id); } -const appendResForm = (element) => { - element.append('
              ') +const appendResForm = (tripId) => { + $('#reserve-form').empty(); + $('#reserve-form').append( + ` +
              + +
              +
              + +
              + `) } const reserveTrip = (event) => { From 4644f2ea686989187d008f44c269dbe0dc61a63d Mon Sep 17 00:00:00 2001 From: Valerie Gidzinski Date: Sat, 24 Nov 2018 19:53:02 -0800 Subject: [PATCH 34/56] Fix reserveTrip post request endpoint and params --- index.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/index.js b/index.js index a40ef990..b2e9592c 100644 --- a/index.js +++ b/index.js @@ -66,11 +66,12 @@ const reserveTrip = (event) => { const createResData = { name: $('input[name="name"]').val(), email: $('input[name="email"]').val(), + id: $('input[id="tripId"]').val() }; - axios.post('https://trektravel.herokuapp.com/trips/1/reservations', createResData) + axios.post(URL + `/${createResData.id}` + '/reservations', createResData) .then((response) => { - reportStatus('Sucessfully reserved trip!'); + reportStatus(`Sucessfully reserved trip ${response.data.id}!`); }) .catch((error) => { reportStatus(`Encountered an error: ${error.message}`) From 58a4d69b1107e86aff7951030b3163c999ba502e Mon Sep 17 00:00:00 2001 From: Valerie Gidzinski Date: Sat, 24 Nov 2018 20:06:23 -0800 Subject: [PATCH 35/56] Reset res form after response --- index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/index.js b/index.js index b2e9592c..64e3a386 100644 --- a/index.js +++ b/index.js @@ -72,6 +72,7 @@ const reserveTrip = (event) => { axios.post(URL + `/${createResData.id}` + '/reservations', createResData) .then((response) => { reportStatus(`Sucessfully reserved trip ${response.data.id}!`); + $('#reserve-form')[0].reset(); }) .catch((error) => { reportStatus(`Encountered an error: ${error.message}`) From 21057b69549323b297e9e33f556a61cd876f4586 Mon Sep 17 00:00:00 2001 From: Valerie Gidzinski Date: Sat, 24 Nov 2018 22:04:20 -0800 Subject: [PATCH 36/56] Link to bootstrap, move scripts to body --- index.html | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index dbecee0c..eef9e1ed 100644 --- a/index.html +++ b/index.html @@ -3,10 +3,7 @@ Trek - - - - + @@ -30,5 +27,9 @@

              Reserve a trip

              + + + + From 247c7ef1071f60fb59c7668dbfc2502f70572c2f Mon Sep 17 00:00:00 2001 From: Valerie Gidzinski Date: Sat, 24 Nov 2018 22:06:43 -0800 Subject: [PATCH 37/56] Style load-all-trips button --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index eef9e1ed..9e3f4d7b 100644 --- a/index.html +++ b/index.html @@ -12,7 +12,7 @@

              Trip List

              - +
                From 861ee74c86560d207b4806112329a417808b6906 Mon Sep 17 00:00:00 2001 From: Valerie Gidzinski Date: Sun, 25 Nov 2018 03:47:16 -0800 Subject: [PATCH 38/56] Move trip details and res form to same section --- index.html | 4 ---- 1 file changed, 4 deletions(-) diff --git a/index.html b/index.html index 9e3f4d7b..b6be9f96 100644 --- a/index.html +++ b/index.html @@ -17,12 +17,8 @@

                Trip List

                -

                Trip Detail

                  -
                  -
                  -

                  Reserve a trip

                  From 685f4e929fa2048d098e70d2540b9835e2542059 Mon Sep 17 00:00:00 2001 From: Valerie Gidzinski Date: Sun, 25 Nov 2018 03:47:56 -0800 Subject: [PATCH 39/56] Move detail and form headers to js --- index.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/index.js b/index.js index 64e3a386..6c4325df 100644 --- a/index.js +++ b/index.js @@ -37,6 +37,7 @@ const parseTripCollection = (element, response) => { const parseIndividualTrip = (element, response) => { const tripProperties = ['name', 'continent', 'category', 'weeks', 'cost', 'about'] + element.append('

                  Trip Detail

                  '); tripProperties.forEach((prop) => { let header = prop.replace(/^\w/, c => c.toUpperCase()); element.append( @@ -49,7 +50,8 @@ const parseIndividualTrip = (element, response) => { const appendResForm = (tripId) => { $('#reserve-form').empty(); $('#reserve-form').append( - ` + `

                  Reserve a trip

                  +
                  From e4e7fb265fbd5a1aa6de6ef1260d1640fd661042 Mon Sep 17 00:00:00 2001 From: Valerie Gidzinski Date: Sun, 25 Nov 2018 03:51:31 -0800 Subject: [PATCH 40/56] Remove grid rows --- index.css | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/index.css b/index.css index dde580e5..3f6f409c 100644 --- a/index.css +++ b/index.css @@ -1,7 +1,6 @@ main { display: grid; grid-template-columns: 1fr 1fr; - grid-template-rows: 1fr 1fr; } ul { @@ -10,5 +9,8 @@ ul { .current-trips { grid-column: 1 / 2; - grid-row: 1 / 3; +} + +.trip-detail { + grid-column: 2 / 3; } From 56c21c30c8da4becdd3e77c4bf3f390d8a63aaf4 Mon Sep 17 00:00:00 2001 From: Valerie Gidzinski Date: Sun, 25 Nov 2018 03:51:52 -0800 Subject: [PATCH 41/56] Change visible header text --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index b6be9f96..b81ee11d 100644 --- a/index.html +++ b/index.html @@ -11,7 +11,7 @@
                  -

                  Trip List

                  +

                  Trek

                    From df3353177184ead48bbd04cea051df9dc8125031 Mon Sep 17 00:00:00 2001 From: Valerie Gidzinski Date: Sun, 25 Nov 2018 03:55:11 -0800 Subject: [PATCH 42/56] Style buttons --- index.html | 2 +- index.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index b81ee11d..74f948d4 100644 --- a/index.html +++ b/index.html @@ -12,7 +12,7 @@

                    Trek

                    - +
                      diff --git a/index.js b/index.js index 6c4325df..d6c55905 100644 --- a/index.js +++ b/index.js @@ -30,7 +30,7 @@ const parseGetResponse = (element, response) => { const parseTripCollection = (element, response) => { response.forEach((trip) => { element.append( - `
                      • `); }); } From 7ae7f032a1208bbe74a6b741b4a5284a8de275b4 Mon Sep 17 00:00:00 2001 From: Valerie Gidzinski Date: Sun, 25 Nov 2018 04:00:03 -0800 Subject: [PATCH 43/56] Center form, adjust header sizes --- index.css | 4 ++++ index.js | 6 +++--- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/index.css b/index.css index 3f6f409c..2a4f31bd 100644 --- a/index.css +++ b/index.css @@ -14,3 +14,7 @@ ul { .trip-detail { grid-column: 2 / 3; } + +#reserve-form { + text-align: center; +} diff --git a/index.js b/index.js index d6c55905..8fca84fb 100644 --- a/index.js +++ b/index.js @@ -30,14 +30,14 @@ const parseGetResponse = (element, response) => { const parseTripCollection = (element, response) => { response.forEach((trip) => { element.append( - `
                      • `); }); } const parseIndividualTrip = (element, response) => { const tripProperties = ['name', 'continent', 'category', 'weeks', 'cost', 'about'] - element.append('

                      Trip Detail

                      '); + element.append('

                      Trip Detail

                      '); tripProperties.forEach((prop) => { let header = prop.replace(/^\w/, c => c.toUpperCase()); element.append( @@ -50,7 +50,7 @@ const parseIndividualTrip = (element, response) => { const appendResForm = (tripId) => { $('#reserve-form').empty(); $('#reserve-form').append( - `

                      Reserve a trip

                      + `

                      Reserve a trip

                      From e633f027d9c468c772897d0f56944fbf4f8d4d5a Mon Sep 17 00:00:00 2001 From: Valerie Gidzinski Date: Sun, 25 Nov 2018 04:32:12 -0800 Subject: [PATCH 44/56] Button styling and body spacing --- index.css | 10 ++++++++++ index.html | 8 +++++--- index.js | 4 ++-- 3 files changed, 17 insertions(+), 5 deletions(-) diff --git a/index.css b/index.css index 2a4f31bd..93ee8488 100644 --- a/index.css +++ b/index.css @@ -1,3 +1,9 @@ +body { + padding: 10px; + background-color: gainsboro; + text-align: center; +} + main { display: grid; grid-template-columns: 1fr 1fr; @@ -7,6 +13,10 @@ ul { list-style: none; } +.trip-list { + padding-top: 10px; +} + .current-trips { grid-column: 1 / 2; } diff --git a/index.html b/index.html index 74f948d4..dccd79da 100644 --- a/index.html +++ b/index.html @@ -7,12 +7,14 @@ +
                      +

                      Trek

                      + +
                      -
                      -

                      Trek

                      - +
                        diff --git a/index.js b/index.js index 8fca84fb..cf4dc2b1 100644 --- a/index.js +++ b/index.js @@ -30,14 +30,14 @@ const parseGetResponse = (element, response) => { const parseTripCollection = (element, response) => { response.forEach((trip) => { element.append( - `
                        • `); }); } const parseIndividualTrip = (element, response) => { const tripProperties = ['name', 'continent', 'category', 'weeks', 'cost', 'about'] - element.append('

                        Trip Detail

                        '); + element.append('

                        Trip Details

                        '); tripProperties.forEach((prop) => { let header = prop.replace(/^\w/, c => c.toUpperCase()); element.append( From 5c504e8280791e84e62e39ba3e39532692b65eb8 Mon Sep 17 00:00:00 2001 From: Valerie Gidzinski Date: Sun, 25 Nov 2018 06:03:27 -0800 Subject: [PATCH 45/56] UI feedback and error message format, style, content --- index.css | 6 ++++++ index.html | 4 ++-- index.js | 15 +++++++++------ 3 files changed, 17 insertions(+), 8 deletions(-) diff --git a/index.css b/index.css index 93ee8488..a33d460c 100644 --- a/index.css +++ b/index.css @@ -13,6 +13,12 @@ ul { list-style: none; } +.status-message { + font-weight: 600; + padding: 10px; + font-size: 1rem; +} + .trip-list { padding-top: 10px; } diff --git a/index.html b/index.html index dccd79da..9b779321 100644 --- a/index.html +++ b/index.html @@ -9,9 +9,9 @@

                        Trek

                        - +
                        -
                        +
                        diff --git a/index.js b/index.js index cf4dc2b1..ed34481c 100644 --- a/index.js +++ b/index.js @@ -1,7 +1,7 @@ const URL = 'https://trektravel.herokuapp.com/trips' const reportStatus = (message) => { - $('#status-message').html(message); + $('.status-message').html(message); }; const sendGetRequest = (id) => { @@ -9,12 +9,12 @@ const sendGetRequest = (id) => { reportStatus('Loading...'); axios.get(URL + id) .then((response) => { - reportStatus('Successfully loaded!') + // reportStatus('Successfully loaded!') let element = id === '/' ? $('#trip-list') : $('#trip-detail-list') parseGetResponse(element, response); }) .catch((error) => { - reportStatus(`Encountered an error ${error.message}`); + reportStatus(`${error.message}. Please try your request again.`); }); }; return buildGetRequest; @@ -28,6 +28,7 @@ const parseGetResponse = (element, response) => { }; const parseTripCollection = (element, response) => { + reportStatus(`Successfully loaded ${response.length} trips.`) response.forEach((trip) => { element.append( `
                        • `); }); } -const parseIndividualTrip = (element, response) => { - reportStatus(`Successfully loaded ${response.name}.`) - element.append(`

                        ${response.name}

                        `); +const parseIndividualTrip = (tripData, element) => { + reportStatus(`Successfully loaded ${tripData.name}.`) + element.append(`

                        ${tripData.name}

                        `); const tripProperties = ['continent', 'category', 'weeks', 'cost'] tripProperties.forEach((prop) => { let header = prop.replace(/^\w/, c => c.toUpperCase()); element.append( - `
                      • ${header}: ${response[prop]}
                        • ` + `
                      • ${header}: ${tripData[prop]}
                        • ` ) }); - element.append(`

                        ${response.about}

                        `) - appendResForm(response.id); + element.append(`

                        ${tripData.about}

                        `) + appendResForm(tripData.id); } const appendResForm = (tripId) => { @@ -56,12 +55,14 @@ const appendResForm = (tripId) => { `

                        Reserve a trip

                        - + +
                        - + +
                        - `) + `) } const reserveTrip = (event) => { From c2e73b029f2e9ed4d0adb040026efe821bcfc940 Mon Sep 17 00:00:00 2001 From: Valerie Gidzinski Date: Sun, 25 Nov 2018 17:59:49 -0800 Subject: [PATCH 48/56] Refactor reserveTrip method --- index.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/index.js b/index.js index 6f15974c..615627c5 100644 --- a/index.js +++ b/index.js @@ -69,13 +69,15 @@ const reserveTrip = (event) => { event.preventDefault(); reportStatus('Sending request...'); - const createResData = { + const resFormData = { name: $('input[name="name"]').val(), email: $('input[name="email"]').val(), id: $('input[id="tripId"]').val() }; - axios.post(URL + `/${createResData.id}` + '/reservations', createResData) + const uri = URL + `/${resFormData.id}` + '/reservations' + + axios.post(uri, resFormData) .then((response) => { reportStatus(`Sucessfully reserved! Please save your reservation id: ${response.data.id}`); $('#reserve-form')[0].reset(); From 99ba4185a09ea099e6464c7ba93848c382043e42 Mon Sep 17 00:00:00 2001 From: Valerie Gidzinski Date: Sun, 25 Nov 2018 21:38:26 -0800 Subject: [PATCH 49/56] Condition to check and handle response status 204 --- index.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/index.js b/index.js index 615627c5..ef0f31c3 100644 --- a/index.js +++ b/index.js @@ -9,8 +9,12 @@ const sendGetRequest = (id) => { reportStatus('Loading...'); axios.get(URL + id) .then((response) => { - let callback = response.data.length ? parseTripCollection : parseIndividualTrip - parseGetResponse(response, callback) + if (response.status === 204) { + reportStatus(`Request failed with status code ${response.status}: ${response.statusText}.`) + } else { + let callback = response.data.length ? parseTripCollection : parseIndividualTrip + parseGetResponse(response, callback) + } }) .catch((error) => { reportStatus(`${error.message}. Please try your request again.`); From 8df49ba3244a2f2f02bad32e2eb624a9524facc0 Mon Sep 17 00:00:00 2001 From: Valerie Gidzinski Date: Sun, 25 Nov 2018 21:47:08 -0800 Subject: [PATCH 50/56] Move 204 status handling to noContentError function --- index.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/index.js b/index.js index ef0f31c3..b1a1c0b6 100644 --- a/index.js +++ b/index.js @@ -4,13 +4,17 @@ const reportStatus = (message) => { $('.status-message').html(message); }; +const noContentError = (response) => { + reportStatus(`Request failed with status code ${response.status}: ${response.statusText}.`); +}; + const sendGetRequest = (id) => { const buildGetRequest = () => { reportStatus('Loading...'); axios.get(URL + id) .then((response) => { if (response.status === 204) { - reportStatus(`Request failed with status code ${response.status}: ${response.statusText}.`) + noContentError(response); } else { let callback = response.data.length ? parseTripCollection : parseIndividualTrip parseGetResponse(response, callback) From 8a40dbfc48cdd1a569000d76691339379f1d0055 Mon Sep 17 00:00:00 2001 From: Valerie Gidzinski Date: Sun, 25 Nov 2018 22:34:20 -0800 Subject: [PATCH 51/56] Move .catch error handling to displayError function --- index.js | 22 +++++++++++++++++----- 1 file changed, 17 insertions(+), 5 deletions(-) diff --git a/index.js b/index.js index b1a1c0b6..2ef53f07 100644 --- a/index.js +++ b/index.js @@ -4,7 +4,15 @@ const reportStatus = (message) => { $('.status-message').html(message); }; -const noContentError = (response) => { +const displayError = (error) => { + if (error.response === undefined) { + reportStatus(`${error.message}`) + } else { + reportStatus(`${error.message}: ${error.response.statusText}`); + } +} + +const displayNoContentError = (response) => { reportStatus(`Request failed with status code ${response.status}: ${response.statusText}.`); }; @@ -14,14 +22,14 @@ const sendGetRequest = (id) => { axios.get(URL + id) .then((response) => { if (response.status === 204) { - noContentError(response); + displayNoContentError(response); } else { let callback = response.data.length ? parseTripCollection : parseIndividualTrip parseGetResponse(response, callback) } }) .catch((error) => { - reportStatus(`${error.message}. Please try your request again.`); + displayError(error); }); }; return buildGetRequest; @@ -87,11 +95,15 @@ const reserveTrip = (event) => { axios.post(uri, resFormData) .then((response) => { - reportStatus(`Sucessfully reserved! Please save your reservation id: ${response.data.id}`); + if (response.status === 204) { + displayNoContentError(response); + } else { + reportStatus(`Sucessfully reserved! Please save your reservation id: ${response.data.id}`); + } $('#reserve-form')[0].reset(); }) .catch((error) => { - reportStatus(`${error.message}. Please try your request again.`); + displayError(error); }); }; From 0fcfee916bb1c733c317935ea5aa8bc782f1d3bb Mon Sep 17 00:00:00 2001 From: Valerie Gidzinski Date: Sun, 25 Nov 2018 23:46:11 -0800 Subject: [PATCH 52/56] Add form-errors section --- index.html | 1 + 1 file changed, 1 insertion(+) diff --git a/index.html b/index.html index 9b779321..13406282 100644 --- a/index.html +++ b/index.html @@ -12,6 +12,7 @@

                        Trek

                        +
                        From 1b56f8fc546fb801675cb70342e3f09c5e3f35e0 Mon Sep 17 00:00:00 2001 From: Valerie Gidzinski Date: Sun, 25 Nov 2018 23:48:03 -0800 Subject: [PATCH 53/56] displayFormErrors and capitalize functions --- index.js | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/index.js b/index.js index 2ef53f07..bceb9bbe 100644 --- a/index.js +++ b/index.js @@ -12,10 +12,24 @@ const displayError = (error) => { } } +const displayFormErrors = (error) => { + const formErrors = error.response.data.errors + $('.form-errors').empty(); + for (const field in formErrors) { + for (const problem of formErrors[field]) { + $('.form-errors').append(`
                      • ${capitalize(field)}: ${problem}`); + } + } +}; + const displayNoContentError = (response) => { reportStatus(`Request failed with status code ${response.status}: ${response.statusText}.`); }; +const capitalize = (string) => { + return string.replace(/^\w/, c => c.toUpperCase()); +} + const sendGetRequest = (id) => { const buildGetRequest = () => { reportStatus('Loading...'); @@ -56,7 +70,7 @@ const parseIndividualTrip = (tripData, element) => { element.append(`

                        ${tripData.name}

                        `); const tripProperties = ['continent', 'category', 'weeks', 'cost'] tripProperties.forEach((prop) => { - let header = prop.replace(/^\w/, c => c.toUpperCase()); + let header = capitalize(prop); element.append( `
                      • ${header}: ${tripData[prop]}
                        • ` ) @@ -104,6 +118,9 @@ const reserveTrip = (event) => { }) .catch((error) => { displayError(error); + if (error.response.data.errors) { + displayFormErrors(error); + } }); }; From b0bf5f801ce6a3f0874bfe35a6e1a66dcc0f9c44 Mon Sep 17 00:00:00 2001 From: Valerie Gidzinski Date: Mon, 26 Nov 2018 00:19:14 -0800 Subject: [PATCH 54/56] Empty form errors section after new click events, change html tags --- index.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/index.js b/index.js index bceb9bbe..7fd6c408 100644 --- a/index.js +++ b/index.js @@ -17,7 +17,7 @@ const displayFormErrors = (error) => { $('.form-errors').empty(); for (const field in formErrors) { for (const problem of formErrors[field]) { - $('.form-errors').append(`
                      • ${capitalize(field)}: ${problem}`); + $('.form-errors').append(`

                        ${capitalize(field)}: ${problem}

                        `); } } }; @@ -58,6 +58,7 @@ const parseGetResponse = (response, callback) => { const parseTripCollection = (tripData, element) => { reportStatus(`Successfully loaded ${tripData.length} trips.`) + $('.form-errors').empty(); tripData.forEach((trip) => { element.append( `
                        • -
                          - +
                          +
                            +
                            +