From c726284005fcc0841974e726e49e6877eb976de8 Mon Sep 17 00:00:00 2001 From: Madaleine Shields Date: Mon, 26 Nov 2018 19:28:31 -0800 Subject: [PATCH 1/7] Create files needed --- index.html | 0 index.js | 0 style.css | 0 3 files changed, 0 insertions(+), 0 deletions(-) create mode 100644 index.html create mode 100644 index.js create mode 100644 style.css diff --git a/index.html b/index.html new file mode 100644 index 00000000..e69de29b diff --git a/index.js b/index.js new file mode 100644 index 00000000..e69de29b diff --git a/style.css b/style.css new file mode 100644 index 00000000..e69de29b From a40c34c398610eb95c2633f02752584683a0873a Mon Sep 17 00:00:00 2001 From: Madaleine Shields Date: Mon, 26 Nov 2018 19:40:26 -0800 Subject: [PATCH 2/7] Load all trips logic and view --- index.html | 25 +++++++++++++++++++++++++ index.js | 26 ++++++++++++++++++++++++++ 2 files changed, 51 insertions(+) diff --git a/index.html b/index.html index e69de29b..cda8deb3 100644 --- a/index.html +++ b/index.html @@ -0,0 +1,25 @@ + + + + + TREK + + + + +
+
+ +
+
+ +
+

Trips List

+
    +
    +
    + + + + + diff --git a/index.js b/index.js index e69de29b..673ea77b 100644 --- a/index.js +++ b/index.js @@ -0,0 +1,26 @@ + +const URL = 'https://trektravel.herokuapp.com/trips'; + + +const reportStatus = (message) => { $('#status-message').html(message); }; + +const loadTrips = () => { + const tripsList = $('#trips-list'); + tripsList.empty(); + + axios.get(URL) + .then((response) => { + response.data.forEach((trip) => { + tripsList.append(`
  • ${trip.name}
    • `) + }); + }) + .catch((error) => { + console.log(error); + reportStatus(`Error: ${error.message}`); + }); +}; + + +$(document).ready(() => { + $('#load-trips-button').click(loadTrips); +}); From 2e8096bf3891a541347106373bced2cc434ae8fe Mon Sep 17 00:00:00 2001 From: Madaleine Shields Date: Mon, 26 Nov 2018 19:57:02 -0800 Subject: [PATCH 3/7] View individual trip detials --- index.html | 5 ++++ index.js | 70 +++++++++++++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 74 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index cda8deb3..6afd906c 100644 --- a/index.html +++ b/index.html @@ -17,6 +17,11 @@

    Trips List

      + +
      + +
      + diff --git a/index.js b/index.js index 673ea77b..f2da85d0 100644 --- a/index.js +++ b/index.js @@ -1,6 +1,46 @@ +const FORM_FIELDS = ['name', 'email']; const URL = 'https://trektravel.herokuapp.com/trips'; +const getTripURL = (tripId) => { return `${URL}/${tripId}` }; +const getReservationURL = (tripId) => { return `${getTripURL(tripId)}/reservations` }; +const formFieldHTMLString = (field) => { + return ``; +}; + +const inputField = name => $(`#reservation-form input[name='${name}']`); +const getInput = name => { return inputField(name).val() || undefined }; + + +const reservationFormData = () => { + const formData = {}; + FORM_FIELDS.forEach((field) => { formData[field] = getInput(field) }); + return formData; +}; + +const loadForm = () => { + let resFormString = `

      Reserve Trip

      `; + FORM_FIELDS.forEach((field) => { resFormString += formFieldHTMLString(field) }); + resFormString += + `
      `; + return resFormString; +}; + +const readFormData = () => { + const getInput = name => { + const input = inputField(name).val(); + return input ? input : undefined; + }; + + const formData = {}; + FORM_FIELDS.forEach((field) => { + formData[field] = getInput(field); + }); + + return formData; +}; + +const clearForm = () => { FORM_FIELDS.forEach((field) => { inputField(field).val(''); }) }; const reportStatus = (message) => { $('#status-message').html(message); }; @@ -20,7 +60,35 @@ const loadTrips = () => { }); }; +const getTrip = (tripID) => { + const tripInfo = $('#trip-info'); + tripInfo.empty(); + axios.get(getTripURL(tripID)) + .then((response) => { + tripInfo.append(response.data.about) + .append(loadForm()); + $('#reservation-form').submit(function(event) { createReservation(event, tripID); }); + }) + .catch((error) => { + console.log(error); + reportStatus(`Error: ${error.message}`); + }); +}; + $(document).ready(() => { - $('#load-trips-button').click(loadTrips); + $('.hidden-at-start').hide(); + + $('#load-trips-button').on('click', function() { + $('#list').slideDown('slow'); + loadTrips(null); + }); + + $('#trips-list').on('click', function(event) { + $('.side-info').slideUp('slow') + .promise().done(function() { + getTrip(event.target.classList[1]); + $('.side-info').slideDown('slow'); + }); + }); }); From ba6b8c2274c43bdda0d8f5a6441d6e2bf9200690 Mon Sep 17 00:00:00 2001 From: Madaleine Shields Date: Mon, 26 Nov 2018 20:15:49 -0800 Subject: [PATCH 4/7] Add reserve trip functionality --- index.js | 49 +++++++++++++++++++++++++++++-------------------- 1 file changed, 29 insertions(+), 20 deletions(-) diff --git a/index.js b/index.js index f2da85d0..4990f37f 100644 --- a/index.js +++ b/index.js @@ -1,17 +1,28 @@ const FORM_FIELDS = ['name', 'email']; +const INFO_FIELD = ['about','continent', 'category', 'weeks', 'cost']; + const URL = 'https://trektravel.herokuapp.com/trips'; const getTripURL = (tripId) => { return `${URL}/${tripId}` }; const getReservationURL = (tripId) => { return `${getTripURL(tripId)}/reservations` }; -const formFieldHTMLString = (field) => { +const getInfo = (info) => { + let requestedInfo = `

      ${info['name']}

      `; + INFO_FIELD.forEach((infoField) => { + requestedInfo += + `

      ${infoField}: ${info[`${infoField}`]}

      `; + }); + requestedInfo += `
      `; + return requestedInfo; +}; + +const getFieldName = (field) => { return ``; }; const inputField = name => $(`#reservation-form input[name='${name}']`); const getInput = name => { return inputField(name).val() || undefined }; - const reservationFormData = () => { const formData = {}; FORM_FIELDS.forEach((field) => { formData[field] = getInput(field) }); @@ -19,24 +30,10 @@ const reservationFormData = () => { }; const loadForm = () => { - let resFormString = `

      Reserve Trip

      `; - FORM_FIELDS.forEach((field) => { resFormString += formFieldHTMLString(field) }); - resFormString += + let formData = `

      Reserve Trip

      `; + FORM_FIELDS.forEach((field) => { formData += getFieldName(field) }); + formData += `
      `; - return resFormString; -}; - -const readFormData = () => { - const getInput = name => { - const input = inputField(name).val(); - return input ? input : undefined; - }; - - const formData = {}; - FORM_FIELDS.forEach((field) => { - formData[field] = getInput(field); - }); - return formData; }; @@ -65,7 +62,7 @@ const getTrip = (tripID) => { tripInfo.empty(); axios.get(getTripURL(tripID)) .then((response) => { - tripInfo.append(response.data.about) + tripInfo.append(getInfo(response.data)) .append(loadForm()); $('#reservation-form').submit(function(event) { createReservation(event, tripID); }); }) @@ -75,6 +72,18 @@ const getTrip = (tripID) => { }); }; +const createReservation = (event, tripID) => { + event.preventDefault(); + axios.post(getReservationURL(tripID), reservationFormData()) + .then((response) => { + reportStatus(`Successfully added a reservation with ID ${response.data.trip_id}!`); + }) + .catch((error) => { + console.log(error.response); + reportStatus(`Encountered an error while creating a reservation: ${error.message}`); + }); + clearForm(); +}; $(document).ready(() => { $('.hidden-at-start').hide(); From 7455646278d3fa4bbca4c79dab691a3f7e58cef5 Mon Sep 17 00:00:00 2001 From: Madaleine Shields Date: Thu, 29 Nov 2018 13:44:59 -0800 Subject: [PATCH 5/7] Add create reservation functionality --- index.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/index.js b/index.js index 4990f37f..a3d58196 100644 --- a/index.js +++ b/index.js @@ -58,7 +58,7 @@ const loadTrips = () => { }; const getTrip = (tripID) => { - const tripInfo = $('#trip-info'); + const tripInfo = $('#right-side-info'); tripInfo.empty(); axios.get(getTripURL(tripID)) .then((response) => { @@ -86,7 +86,11 @@ const createReservation = (event, tripID) => { }; $(document).ready(() => { - $('.hidden-at-start').hide(); + // $('.hidden-at-start').hide(); + + $('#load-trips-button').click(loadTrips); + $('.side-info').click(getTrip); + $('#load-trips-button').on('click', function() { $('#list').slideDown('slow'); From d9a00af4719453a476bfc8ec237678d107280872 Mon Sep 17 00:00:00 2001 From: Madaleine Shields Date: Thu, 29 Nov 2018 13:45:10 -0800 Subject: [PATCH 6/7] Updaye views with styling: --- index.html | 6 ++-- style.css | 90 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 94 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 6afd906c..1fedbfd3 100644 --- a/index.html +++ b/index.html @@ -7,18 +7,20 @@ + +
      -
      +

      Trips List

        -
        +
        diff --git a/style.css b/style.css index e69de29b..3cd02ab7 100644 --- a/style.css +++ b/style.css @@ -0,0 +1,90 @@ +ul { + list-style-type: none; + padding: 0; + margin: 0; +} +html { + background: url("https://images.unsplash.com/photo-1537522306408-8435f315b2e3?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=7524eb105d6f756457a2747a3a49a501&auto=format&fit=crop&w=1950&q=80") no-repeat center center fixed; + -webkit-background-size: cover; + -moz-background-size: cover; + -o-background-size: cover; + background-size: cover; +} + +body::after { + filter: blur(13px); +} + +body { + margin-left: 15%; + margin-right: 15%; + background: none; +} + +.container { + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-template-areas: + "nav nav" + "list right-side-info"; +} + +#whole-right-subside { + height: 100%; + border-bottom-right-radius: 15px; + border-bottom: 6px solid red; +} + +.nav { + height: 75px; + background-color: white; + grid-area: nav; +} + +#list { + height: 45rem; + border-bottom-left-radius: 15px; + grid-area: list; + border-bottom: 6px solid red; + } + +#right-side-info { + height: 50rem; + grid-area: right-side-info; + border-bottom-right-radius: 15px; + display: grid; + grid-template-rows: 30rem 15rem; + grid-template-areas: + "trip-info" + "book"; +} + +#trip-info { + overflow: scroll; + grid-area: trip-info; +} + +#book { + height: 100%; + grid-area: book; + border-bottom-right-radius: 15px; + border-bottom: 6px solid red; +} + +#trips-list { + overflow: scroll; + max-height: 38rem; +} + +#book, #trip-info, #list, #trips-list, #whole-right-subside { + background-color: white; + padding: 5px; +} + +.info-field { + text-align: justify; +} + +.green { + background-color: green; +} From 7c0bba78fcb597962d65ec26f45b1f1a954088f6 Mon Sep 17 00:00:00 2001 From: Madaleine Shields Date: Thu, 29 Nov 2018 13:46:12 -0800 Subject: [PATCH 7/7] Fix click functionality --- index.js | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/index.js b/index.js index a3d58196..06e6c0c5 100644 --- a/index.js +++ b/index.js @@ -86,11 +86,7 @@ const createReservation = (event, tripID) => { }; $(document).ready(() => { - // $('.hidden-at-start').hide(); - - $('#load-trips-button').click(loadTrips); - $('.side-info').click(getTrip); - + $('.hidden-at-start').hide(); $('#load-trips-button').on('click', function() { $('#list').slideDown('slow');