From 73ebf45c0c69f7487b8b8d976fbcc43929ac12c2 Mon Sep 17 00:00:00 2001 From: Trang Date: Wed, 21 Nov 2018 12:22:36 -0800 Subject: [PATCH 1/5] create index html css js --- index.css | 0 index.html | 17 +++++++++++++++++ index.js | 0 3 files changed, 17 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..45b7d5e0 --- /dev/null +++ b/index.html @@ -0,0 +1,17 @@ + + + + Trek + + + + + + + +
+ +
+
+ + diff --git a/index.js b/index.js new file mode 100644 index 00000000..e69de29b From 5a803218f4641362a8cd78b1ffe42dc9cb617eb4 Mon Sep 17 00:00:00 2001 From: Trang Date: Wed, 21 Nov 2018 15:12:58 -0800 Subject: [PATCH 2/5] create loadTrips function --- index.css | 5 +++++ index.html | 13 +++++++++++++ index.js | 55 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 73 insertions(+) diff --git a/index.css b/index.css index e69de29b..4eedd590 100644 --- a/index.css +++ b/index.css @@ -0,0 +1,5 @@ +main { + display: grid; + grid-template-columns: 1fr 1fr; + grid-template-rows: 2fr 1fr; +} diff --git a/index.html b/index.html index 45b7d5e0..c39cec55 100644 --- a/index.html +++ b/index.html @@ -9,9 +9,22 @@ +
+

Trek

+
+
+
+ +
    +
    +
    +
      +
      +
      +
      diff --git a/index.js b/index.js index e69de29b..aa863b99 100644 --- a/index.js +++ b/index.js @@ -0,0 +1,55 @@ +const URL = 'https://trektravel.herokuapp.com/trips'; + +const reportStatus = (message) => { + $('#status-message').html(message); +}; + +const reportError = (message, errors) => { + let content = `

      ${message}

      "; + reportStatus(content); +}; + +const loadTrips = () => { + reportStatus('Loading trips...'); + + const tripList = $('#trip-list'); + tripList.empty(); + + axios.get(URL) + .then((response) => { + console.log(response); + reportStatus(`Successfully loaded ${response.data.length} trips`); + response.data.forEach((trip) => { + tripList.append(`
    • ${trip.name}
      • `); + }); + }) + .catch((error) => { + reportStatus(`Encountered an error while loading trips: ${error.message}`); + console.log(error); + }); +}; + +const getTripDetails = (trip) => { + reportStatus('Retrieving trip details...'); + + const trip = $('#trip-details'); + trip.empty(); + + + +}; + +$(document).ready(() => { + $('#load').click(loadTrips); + $('#trip-list').on('click', 'li', function(trip) { + getTripDetails() + }); + + // $('#trip-form').submit(createTrip); +}); From 125ca7953ea1be3001122d171d25d5a0406c3e0a Mon Sep 17 00:00:00 2001 From: Trang Date: Wed, 21 Nov 2018 21:43:32 -0800 Subject: [PATCH 3/5] create getTripDetails and reserveTrip --- index.html | 7 +++- index.js | 97 ++++++++++++++++++++++++++++++++++++++++++++++++++---- 2 files changed, 97 insertions(+), 7 deletions(-) diff --git a/index.html b/index.html index c39cec55..0ed38950 100644 --- a/index.html +++ b/index.html @@ -9,6 +9,7 @@ +

      Trek

      @@ -20,10 +21,14 @@

      Trek

        +
          -
          + +
          +
          +
          diff --git a/index.js b/index.js index aa863b99..3e8f346c 100644 --- a/index.js +++ b/index.js @@ -25,8 +25,9 @@ const loadTrips = () => { .then((response) => { console.log(response); reportStatus(`Successfully loaded ${response.data.length} trips`); - response.data.forEach((trip) => { - tripList.append(`
        • ${trip.name}
          • `); + tripList.append('

          All Trips

          ') + response.data.forEach( (trip) => { + tripList.append(`
        • ${trip.name}
          • `); }); }) .catch((error) => { @@ -38,18 +39,102 @@ const loadTrips = () => { const getTripDetails = (trip) => { reportStatus('Retrieving trip details...'); - const trip = $('#trip-details'); - trip.empty(); + const tripDetails = $('#trip-details'); + tripDetails.empty(); + axios.get(URL + `/${trip.id}`) + .then((response) => { + tripDetails.append(` +

          Trip Details

          +
        • Name: ${response.data.name}
          • +
        • Continent: ${response.data.continent}
          • +
        • Category: ${response.data.category}
          • +
        • Weeks: ${response.data.weeks}
          • +
        • Cost: $${response.data.cost}
          • +
        • About: ${response.data.about}
          • `); + }); + +}; + +const getRezForm = (trip) => { + const rezForm = $('#rez-form') + rezForm.empty(); + + rezForm.append(` +

          Reserve Trip

          +
          + + +
          +
          + + +
          +
          + +
          + + `); + +} + +const readFormData = () => { + const parsedFormData = {}; + + const tripFromForm = $(`#rez-form input[name="trip_id"]`).val(); + parsedFormData['trip_id'] = tripFromForm ? tripFromForm : undefined; + + const nameFromForm = $(`#rez-form input[name="name"]`).val(); + parsedFormData['name'] = nameFromForm ? nameFromForm : undefined; + + const emailFromForm = $(`#rez-form input[name="email"]`).val(); + parsedFormData['email'] = emailFromForm ? emailFromForm : undefined; + return parsedFormData; +}; + +const clearForm = () => { + $(`#rez-form input[name="name"]`).val(''); + $(`#rez-form input[name="email"]`).val(''); + $(`#rez-form input[name="trip"]`).val(''); +} + +const reserveTrip = (event) => { + console.log(event); + event.preventDefault(); + + const tripData = readFormData(); + console.log(tripData); + + reportStatus('Sending reservation data...'); + + axios.post(URL + '/' + tripData.trip_id + '/reservations', tripData) + .then((response) => { + reportStatus(`Successfully reserved a trip 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(() => { $('#load').click(loadTrips); + $('#trip-list').on('click', 'li', function(trip) { - getTripDetails() + console.log(this.id); + getTripDetails(this); + getRezForm(this); }); - // $('#trip-form').submit(createTrip); + $('#rez-form').submit(reserveTrip); }); From a38eb18f8f786ed2cade56dd208857c48aa45fbd Mon Sep 17 00:00:00 2001 From: Trang Date: Thu, 22 Nov 2018 22:05:38 -0800 Subject: [PATCH 4/5] add styling --- index.css | 17 ++++++++++++++++- index.html | 8 ++++---- 2 files changed, 20 insertions(+), 5 deletions(-) diff --git a/index.css b/index.css index 4eedd590..8abc0bc2 100644 --- a/index.css +++ b/index.css @@ -1,5 +1,20 @@ +body { + /*background-image: url("https://souldrifters.com/wp-content/uploads/2018/02/Road-Trip-in-South-Africa-Sense-of-adventure.jpg");*/ + background-image: url("https://www.rei.com/adventures/assets/adventures/images/trip/core/pacific/nzs_hero"); + background-repeat: no-repeat; + background-size: cover; + padding: 2rem 2rem; +} main { display: grid; grid-template-columns: 1fr 1fr; - grid-template-rows: 2fr 1fr; + grid-template-rows: 1fr 1fr; +} + +.all-trips { + grid-row: 1 / 3; +} + +ul { + list-style: none; } diff --git a/index.html b/index.html index 0ed38950..936e64e9 100644 --- a/index.html +++ b/index.html @@ -3,6 +3,7 @@ Trek + @@ -11,14 +12,13 @@
          -

          Trek

          +

          Trek

          + +
          -
          -
          -
            From bfa2a8c37a57e34cb6fc51693b6dfc11f8eeb78e Mon Sep 17 00:00:00 2001 From: Trang Date: Sat, 24 Nov 2018 21:44:17 -0800 Subject: [PATCH 5/5] more styling --- index.css | 26 +++++++++++++++++++++++--- index.html | 13 ++++++------- index.js | 3 ++- 3 files changed, 31 insertions(+), 11 deletions(-) diff --git a/index.css b/index.css index 8abc0bc2..e20da839 100644 --- a/index.css +++ b/index.css @@ -1,14 +1,25 @@ body { - /*background-image: url("https://souldrifters.com/wp-content/uploads/2018/02/Road-Trip-in-South-Africa-Sense-of-adventure.jpg");*/ - background-image: url("https://www.rei.com/adventures/assets/adventures/images/trip/core/pacific/nzs_hero"); + background-image: url("https://stmed.net/sites/default/files/hot-air-balloon-wallpapers-32225-2405425.jpg"); + background-size: 100%; background-repeat: no-repeat; - background-size: cover; + background-attachment: fixed; padding: 2rem 2rem; } + +header { + padding: 2rem; +} + +header a { + color: white; +} + main { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; + background-color: white; + border-radius: 20px; } .all-trips { @@ -18,3 +29,12 @@ main { ul { list-style: none; } + +.trip { + display: flex; + flex-direction: column; +} + +.new-rez { + padding: 40px; +} diff --git a/index.html b/index.html index 936e64e9..ee7f6762 100644 --- a/index.html +++ b/index.html @@ -22,14 +22,13 @@

            Trek

              -
              +
                -
                - -
                -
                -
                -
                +
                +
                +
                +
                + diff --git a/index.js b/index.js index 3e8f346c..a6f7e823 100644 --- a/index.js +++ b/index.js @@ -45,6 +45,7 @@ const getTripDetails = (trip) => { axios.get(URL + `/${trip.id}`) .then((response) => { + reportStatus(''); tripDetails.append(`

                Trip Details

              • Name: ${response.data.name}
                • @@ -74,7 +75,7 @@ const getRezForm = (trip) => {
                - + `); }