From d834b086ae27cc2d2624e1999e9b8ead534f16bc Mon Sep 17 00:00:00 2001 From: Cheeron Mars Date: Tue, 22 May 2018 20:03:11 -0700 Subject: [PATCH 1/4] set up files, Click button or link to show all trips --- .DS_Store | Bin 0 -> 6148 bytes index.css | 36 ++++++++++++++++++++++++++++++++++++ index.html | 28 ++++++++++++++++++++++++++++ index.js | 40 ++++++++++++++++++++++++++++++++++++++++ 4 files changed, 104 insertions(+) create mode 100644 .DS_Store create mode 100644 index.css create mode 100644 index.html create mode 100644 index.js diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..cbeae95edddcaae802b82a5a6c66b5f7d8e4a990 GIT binary patch literal 6148 zcmeHKJ5Izv47Ib7SU$y;lxYzX(zaC5Ds*&v0bm2WNJLq|2HG5fh6`{DP6Ah;;0`={ zhA2al5`>T~*>5sqk7r&+afXO^R^?No2@#EPI=U9cLye@C`nzn(P> z_;ps+>ldt#A9a&vi~(c782BLuP_sqGyAI771IB0KgdC zDrn1HLShn+smIzOMj-4$fi9H&6@y(k`V;S$daNC~aAJS?V4s=&4TUv3=1?wF&eLDk6Th!zKg`EyeJa dQoIjUL4P6*VCu1Uh#rXj2q+C^jDcTe;1fcuW?BFM literal 0 HcmV?d00001 diff --git a/index.css b/index.css new file mode 100644 index 00000000..202847d3 --- /dev/null +++ b/index.css @@ -0,0 +1,36 @@ +body { + font-family: sans-serif; +} + + +main { + display: grid; + grid-template-columns: 1fr 1fr; +} + +header { + +} + + +div { + +} + + + +button { + +} + +ul { + +} + +li { + +} + +nav { + +} diff --git a/index.html b/index.html new file mode 100644 index 00000000..cda77c8f --- /dev/null +++ b/index.html @@ -0,0 +1,28 @@ + + + + + Trek + + + + +
+ + + +
+
+

List of Trips

+ +
    +
    +
    + + + + + + + diff --git a/index.js b/index.js new file mode 100644 index 00000000..2b1d291c --- /dev/null +++ b/index.js @@ -0,0 +1,40 @@ + +const URL = 'https://ada-backtrek-api.herokuapp.com/trips'; + +const reportStatus = (message) => { + $('#status-message').html(message); +}; + +const loadtrips = () => { + reportStatus('Loading trips...'); + + const reportError = (message, errors) => { + let content = `

    ${message}

      `; + for (const field in errors) { + for (const problem of errors[field]) { + content += `
    • ${field}: ${problem}
      • `; + } + } + content += "
    "; + reportStatus(content); + }; + + 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) => { + reportStatus(`Encountered an error while loading trips: ${error.message}`); + console.log(error); + }); +}; + +$(document).ready(() => { + $('#load').click(loadtrips); +}); From b8c8dae9e9c7700aa158db5d3251081387923ba0 Mon Sep 17 00:00:00 2001 From: Cheeron Mars Date: Wed, 23 May 2018 15:41:14 -0700 Subject: [PATCH 2/4] add functionality to view single trip --- .DS_Store | Bin 6148 -> 6148 bytes index.html | 10 +++++++-- index.js | 58 +++++++++++++++++++++++++++++++++++++++++------------ 3 files changed, 53 insertions(+), 15 deletions(-) diff --git a/.DS_Store b/.DS_Store index cbeae95edddcaae802b82a5a6c66b5f7d8e4a990..1fc3512b7e58486707698d7e13915a55a4282df8 100644 GIT binary patch delta 79 zcmZoMXffEJ#$@60kb!}Lg+Y%YogtHi2?vKs}>Ca delta 79 zcmZoMXffEJ#$;i&lYxPOg+Y%YogtHi2?u~#T8co diff --git a/index.html b/index.html index cda77c8f..283afb64 100644 --- a/index.html +++ b/index.html @@ -13,16 +13,22 @@
    +

    List of Trips

      + +
      +
      +
      +
      - - + + diff --git a/index.js b/index.js index 2b1d291c..f0af8225 100644 --- a/index.js +++ b/index.js @@ -1,24 +1,23 @@ - const URL = 'https://ada-backtrek-api.herokuapp.com/trips'; const reportStatus = (message) => { $('#status-message').html(message); }; +const reportError = (message, errors) => { + let content = `

      ${message}

        `; + for (const field in errors) { + for (const problem of errors[field]) { + content += `
      • ${field}: ${problem}
        • `; + } + } + content += "
      "; + reportStatus(content); +}; + const loadtrips = () => { reportStatus('Loading trips...'); - const reportError = (message, errors) => { - let content = `

      ${message}

        `; - for (const field in errors) { - for (const problem of errors[field]) { - content += `
      • ${field}: ${problem}
        • `; - } - } - content += "
      "; - reportStatus(content); - }; - const tripList = $('#trip-list'); tripList.empty(); @@ -26,15 +25,48 @@ const loadtrips = () => { .then((response) => { reportStatus(`Successfully loaded ${response.data.length} trips`); response.data.forEach((trip) => { - tripList.append(`
    • ${trip.name}
      • `); + tripList.append(`
    • ${trip.name}
      • `); }); }) + .catch((error) => { reportStatus(`Encountered an error while loading trips: ${error.message}`); console.log(error); }); + +}; + +const viewTrip = (id) => { + reportStatus('Loading trip...'); + + const tripDetail = $('#trip-details'); + tripDetail.empty(); + + axios.get(URL + '/' + id) + .then((response) => { + reportStatus(`Successfully loaded trip #${id}`); + let trip = response.data; + let tripDetails = ` +

      Id: ${trip.id}

      +

      Name: ${trip.name}

      +

      Continent: ${trip.continent}

      +

      About: ${trip.about}

      +

      Category: ${trip.category}

      +

      Duration: ${trip.weeks} weeks

      +

      Cost: ${trip.cost}

      `; + $('#trip-details').append(tripDetails); + }) }; + $(document).ready(() => { $('#load').click(loadtrips); + $('ul').on('click', 'li', function() { + let tripID = $(this).attr('trip-id'); + viewTrip(tripID); + $('#tripLocation').show(); + }); + + // $('#trip-form').submit(createTrip); + }); From 4ece9e1231cdfbf84809ae3f237e7e29a913519c Mon Sep 17 00:00:00 2001 From: Cheeron Mars Date: Thu, 24 May 2018 09:51:28 -0700 Subject: [PATCH 3/4] added css, started reserve functionality --- .DS_Store | Bin 6148 -> 6148 bytes index.css | 40 +++++++++++++++++++---------- index.html | 32 +++++++++++++++-------- index.js | 74 ++++++++++++++++++++++++++++++++++++++++++++++------- 4 files changed, 113 insertions(+), 33 deletions(-) diff --git a/.DS_Store b/.DS_Store index 1fc3512b7e58486707698d7e13915a55a4282df8..42ccddcb96f16a6342fb093c97b81b4e9ff093de 100644 GIT binary patch delta 80 zcmZoMXffEJ#$@4Vz`(%3!l1{H&XCDalAG`1l2Tfd%)oG6dtMJv21PCfNp5l+lQa{H O!Q_Wb!khb;%0vMi%@rO1 delta 80 zcmZoMXffEJ#$@60kb!}Lg+Y%YogtHgg5swm5BlXMWGfD diff --git a/index.css b/index.css index 202847d3..b861bf53 100644 --- a/index.css +++ b/index.css @@ -2,35 +2,47 @@ body { font-family: sans-serif; } - main { display: grid; grid-template-columns: 1fr 1fr; + padding: 2rem; } -header { - +h1 { + border-bottom: 1px solid #424242; + font-size: 3em; + text-align: center; } - -div { - +h3 { + border-bottom: .75px solid #424242; + text-align: center; + padding-bottom: .5em; } - - button { - + background-color: #26A69A; + padding: 0.85em 1em; + color: white; + font-size: .75em; + font-weight: bold; } ul { - + list-style-type: none; } -li { - +.current-trips li { + border: 1px solid black; + text-align: center; + padding: 2em; + margin-right: .5em; + margin-left: .5em; } -nav { - +section { + margin-right: .5em; + margin-left: .5em; + padding-left: .5em; + padding-right: .5em; } diff --git a/index.html b/index.html index 283afb64..64339eef 100644 --- a/index.html +++ b/index.html @@ -4,29 +4,41 @@ Trek - -
      +
      +
      +

      Trek

      + +
      +
      -
      -

      List of Trips

      - +
        -
        -
        -
        - +
        +
        + + + +
        - diff --git a/index.js b/index.js index f0af8225..827938f8 100644 --- a/index.js +++ b/index.js @@ -1,5 +1,6 @@ const URL = 'https://ada-backtrek-api.herokuapp.com/trips'; + const reportStatus = (message) => { $('#status-message').html(message); }; @@ -24,6 +25,7 @@ const loadtrips = () => { axios.get(URL) .then((response) => { reportStatus(`Successfully loaded ${response.data.length} trips`); + tripList.append(`

        All Trips

        `) response.data.forEach((trip) => { tripList.append(`
      • ${trip.name}
        • `); }); @@ -47,26 +49,80 @@ const viewTrip = (id) => { reportStatus(`Successfully loaded trip #${id}`); let trip = response.data; let tripDetails = ` -

        Id: ${trip.id}

        -

        Name: ${trip.name}

        +

        ${trip.name} - Trip Details

        Continent: ${trip.continent}

        -

        About: ${trip.about}

        Category: ${trip.category}

        Duration: ${trip.weeks} weeks

        -

        Cost: ${trip.cost}

        `; +

        Cost: $${trip.cost}

        +

        ${trip.about}

        + `; $('#trip-details').append(tripDetails); + + }) }; +const FORM_FIELDS = ['name', 'age', 'email']; +const inputField = name => $(`#reservation-form input[name="${name}"]`); + +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 reserveTrip = (event) => { + event.preventDefault(); + const reservationURL = URL + '/' + tripId + '/reservations'; + + const reservationData = readFormData(); + console.log(reservationData); + + reportStatus('Reserving trip...'); + + axios.post(reservationURL, 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(() => { - $('#load').click(loadtrips); + $("#trip-location").hide(); + $("#new-reservation").hide(); + $('#load').click(loadtrips) $('ul').on('click', 'li', function() { let tripID = $(this).attr('trip-id'); viewTrip(tripID); - $('#tripLocation').show(); + $('#trip-location').show(); + // $('reservation-form').show(); + // $('reservation-form').attr('tripid', trip.id); + // $('#reservation-form').submit(reserveTrip); }); - - // $('#trip-form').submit(createTrip); - + $('#reservation-form').submit(reserveTrip); }); From 97d07b397f7eeebb9ac83d995d10feff5718e09b Mon Sep 17 00:00:00 2001 From: Cheeron Mars Date: Sat, 26 May 2018 20:37:07 -0700 Subject: [PATCH 4/4] update css, complete add reservation feature --- index.css | 2 +- index.html | 14 ++++++------ index.js | 62 ++++++++++++++++++++++++++++++++++++------------------ 3 files changed, 50 insertions(+), 28 deletions(-) diff --git a/index.css b/index.css index b861bf53..6ef727a3 100644 --- a/index.css +++ b/index.css @@ -33,7 +33,7 @@ ul { } .current-trips li { - border: 1px solid black; + border: .5px solid black; text-align: center; padding: 2em; margin-right: .5em; diff --git a/index.html b/index.html index 64339eef..f1e6c10d 100644 --- a/index.html +++ b/index.html @@ -26,17 +26,19 @@

        Trek

        - + + + diff --git a/index.js b/index.js index 827938f8..790673e7 100644 --- a/index.js +++ b/index.js @@ -46,23 +46,36 @@ const viewTrip = (id) => { axios.get(URL + '/' + id) .then((response) => { - reportStatus(`Successfully loaded trip #${id}`); - let trip = response.data; - let tripDetails = ` -

        ${trip.name} - Trip Details

        -

        Continent: ${trip.continent}

        -

        Category: ${trip.category}

        -

        Duration: ${trip.weeks} weeks

        -

        Cost: $${trip.cost}

        -

        ${trip.about}

        - `; - $('#trip-details').append(tripDetails); - - + if (response.status == 200) { + console.log(); + reportStatus(`Successfully loaded trip #${id}`); + let trip = response.data; + let tripID_res = trip.id + // console.log(`res id`); + // console.log(tripID_res); + let tripDetails = ` +

        ${trip.name} - Trip Details (ID ${trip.id})

        +

        Continent: ${trip.continent}

        +

        Category: ${trip.category}

        +

        Duration: ${trip.weeks} weeks

        +

        Cost: $${trip.cost.toFixed(2)}

        +

        ${trip.about}

        + + `; + // $('span').hide() + $('#trip-details').append(tripDetails); + } else { + reportStatus(`Encountered an error while loading trip: ${error.message}`); + } }) + + .catch((error) => { + reportStatus(`Encountered an error while loading trip: ${error.message}`); + console.log(error); + }); }; -const FORM_FIELDS = ['name', 'age', 'email']; +const FORM_FIELDS = ['name', 'email']; const inputField = name => $(`#reservation-form input[name="${name}"]`); const readFormData = () => { @@ -87,16 +100,18 @@ const clearForm = () => { const reserveTrip = (event) => { event.preventDefault(); - const reservationURL = URL + '/' + tripId + '/reservations'; + const tripId = $('#trip-details span').text(); + // const tripId = $('#trip-id'); + const reservationURL = URL + '/' + tripId + '/reservations'; const reservationData = readFormData(); - console.log(reservationData); + console.log(); reportStatus('Reserving trip...'); axios.post(reservationURL, reservationData) .then((response) => { - reportStatus(`Successfully added a reservation with ID ${response.data.id}!`); + reportStatus(`Successfully added a reservation with ID ${tripId}!`); clearForm(); }) .catch((error) => { @@ -114,15 +129,20 @@ const reserveTrip = (event) => { $(document).ready(() => { $("#trip-location").hide(); - $("#new-reservation").hide(); + $('#load').click(loadtrips) + $('ul').on('click', 'li', function() { let tripID = $(this).attr('trip-id'); viewTrip(tripID); $('#trip-location').show(); - // $('reservation-form').show(); - // $('reservation-form').attr('tripid', trip.id); - // $('#reservation-form').submit(reserveTrip); + $("#reserve-trip").show(); + $("#new-reservation").hide(); + }); + $('#reserve-trip').click(function(){ + $("#reserve-trip").hide(); + $("#new-reservation").show(); + let tripID = $(this).attr('trip-id'); }); $('#reservation-form').submit(reserveTrip); });