From 5f40fad04bacfdd18132abee8111c69e507f8021 Mon Sep 17 00:00:00 2001 From: Shamira Date: Thu, 30 May 2019 19:00:36 -0700 Subject: [PATCH 1/5] File Setup. --- index.html | 41 +++++++++++++++++++++++++++++++++++++ index.js | 59 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ style.css | 0 3 files changed, 100 insertions(+) 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..b1284a58 --- /dev/null +++ b/index.html @@ -0,0 +1,41 @@ + + + + + Shamira's Trek + + + + + + +
+ +
+
+

List of Trips

+ +
    +
    + +
    +

    Add a new trip

    +
    + + + +
    +
    + + +
    + +
    + +
    + +
    +
    + + \ No newline at end of file diff --git a/index.js b/index.js new file mode 100644 index 00000000..5620398c --- /dev/null +++ b/index.js @@ -0,0 +1,59 @@ +const ALLTRIPS = 'https://trektravel.herokuapp.com/trips'; +const CONTINENTS = 'https://trektravel.herokuapp.com/trips/continent?query=Asia' +const TRIPID = 'https://trektravel.herokuapp.com/trips/1' +// +// Status Management +// +const reportStatus = (message) => { + $('#status-message').html(message); +}; + +// +// Loading Pets +// +const loadTrips = () => { + reportStatus('Loading trips...'); + + const tripList = $('#trip-list'); + tripList.empty(); + + axios.get(ALLTRIPS) + .then((response) => { + reportStatus(`Successfully loaded ${response.data.length} trips`); + response.data.forEach((trip) => { + tripList.append(`
  • ${trip-list}
    • `); + }); + }) + .catch((error) => { + reportStatus(`Encountered an error while loading trips: ${error.message}`); + console.log(error); + }); +}; + + + +// const createPet = (event) => { +// event.preventDefault(); + +// //WE START HERE!!! + +// reportStatus('Sending pet data...'); + +// axios.post(URL, petData) +// .then((response) => { +// reportStatus(`Successfully added a pet with ID ${response.data.id}!`); +// clearForm(); +// }) +// .catch((error) => { +// console.log(error.response); +// reportStatus(`Encountered an error while loading pets: ${error.message}`) +// }); +// }; + +// +// OK GO!!!!! +// +$(document).ready(() => { + $('#load-trips').click(loadTrips); + // $('#pet-form').submit(createPet); +}); \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 00000000..e69de29b From 0cc0f57d893c109e1816b6fb43cb98fbbec85c78 Mon Sep 17 00:00:00 2001 From: Shamira Date: Thu, 30 May 2019 19:02:59 -0700 Subject: [PATCH 2/5] Working GET function for trips index. --- index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.js b/index.js index 5620398c..28784bba 100644 --- a/index.js +++ b/index.js @@ -21,7 +21,7 @@ const loadTrips = () => { .then((response) => { reportStatus(`Successfully loaded ${response.data.length} trips`); response.data.forEach((trip) => { - tripList.append(`
  • ${trip-list}
    • `); + tripList.append(`
  • ${trip.name}
    • `); }); }) .catch((error) => { From 71c639b420a9b68a77f1e271c4d5814e0461c978 Mon Sep 17 00:00:00 2001 From: Shamira Date: Sun, 9 Jun 2019 23:26:11 -0700 Subject: [PATCH 3/5] working on make reservation function --- index.html | 26 ++++++---- index.js | 138 ++++++++++++++++++++++++++++++++++++++++------------- style.css | 8 ++++ 3 files changed, 128 insertions(+), 44 deletions(-) diff --git a/index.html b/index.html index b1284a58..8e80b03d 100644 --- a/index.html +++ b/index.html @@ -19,21 +19,27 @@

    List of Trips

      -
      -

      Add a new trip

      -
      - +
      - -
      - -
      - +
      +

      Reserve Trip!

      +
      +
      + + +
      +
      + + +
      + + +
      -
      +
      diff --git a/index.js b/index.js index 28784bba..b54123b2 100644 --- a/index.js +++ b/index.js @@ -1,59 +1,129 @@ -const ALLTRIPS = 'https://trektravel.herokuapp.com/trips'; -const CONTINENTS = 'https://trektravel.herokuapp.com/trips/continent?query=Asia' -const TRIPID = 'https://trektravel.herokuapp.com/trips/1' -// -// Status Management -// +const TRIPSURL = 'https://trektravel.herokuapp.com/trips/' + + +// error handling from panopto video + const reportStatus = (message) => { $('#status-message').html(message); }; -// -// Loading Pets -// +const reportError = (message, errors) => { + let info = `

      ${message}

        `; + for (const field in errors) { + for (const problem of errors[field]) { + content += `
      • ${field}: ${problem}
        • `; + } + } + content += "
      " + reportStatus(info); +}; + +// Gets All Trips - from Ada Pets const loadTrips = () => { reportStatus('Loading trips...'); const tripList = $('#trip-list'); tripList.empty(); + + + axios.get(TRIPSURL) + .then((response) => { + let listOfTrips = response.data + + reportStatus(`Successfully loaded ${listOfTrips.length} trips`); + console.log('Loading trips works!'); + //loops through response to print the trip name + listOfTrips.forEach((trip) => { + let currentTrip = $(`
    • ${trip.name}
      • `); + currentTrip.addClass(`${trip.id}`); + tripList.append(currentTrip); + }) + }) + .catch((error) => { + reportStatus(`Error while loading trips: ${error.message}`); + console.log(error); + }) +}; +// Trip Details +const detailsTrips = (event) => { + let tripID = event.target.className; + let tripDetailsURL = `https://trektravel.herokuapp.com/trips/${tripID}`; + reportStatus("Loading details..."); - axios.get(ALLTRIPS) + const tripDetails = $("#details"); + tripDetails.empty(); + + axios.get(tripDetailsURL) .then((response) => { - reportStatus(`Successfully loaded ${response.data.length} trips`); - response.data.forEach((trip) => { - tripList.append(`
    • ${trip.name}
      • `); - }); + reportStatus(`Successfully loaded trip for ${response.data.name}`); + console.log('Succefully loaded trip!'); + + tripDetails.html( + `

      ${response.data.name} in ${response.data.continent}

      +

      Cost: $${response.data.cost}

      +

      Category: ${response.data.category}

      +

      Weeks: ${response.data.weeks}

      +

      About:

      ${response.data.about}

      ` + ) }) + .catch((error) => { - reportStatus(`Encountered an error while loading trips: ${error.message}`); + reportStatus( + `Encountered an error while loading trips: ${tripID}: ${error.message}` + ); console.log(error); }); }; +// Make a reservation + +const readFormData = () => { + let parsedData = {}; + + parsedData.name = $("input[name='name']").val(); + parsedData.email = $("input[name='email']").val(); + + return parsedData; + }; +const clearForm = () => { + $('#trip-form input[name="name"]').val(''); + $('#trip-form input[name="email"]').val(''); +} -// const createPet = (event) => { -// event.preventDefault(); +const reservation = (event) => { + + event.preventDefault(); + console.log('this works') -// //WE START HERE!!! + // const testData = readTripForm(); + const tripID = event.target.className; + let createTripURL = `https://trektravel.herokuapp.com/trips/${tripID}/reservations` + let tripData = readFormData(); + reportStatus('Sending trip data...'); + + console.log("About to post trip data", tripData) -// reportStatus('Sending pet data...'); + axios.post(createTripURL, tripData) + .then((response) => { + console.log(response); + reportStatus(`Successfully added trip! ${response.data.id}`); + clearForm(); + }) + .catch((error) => { + console.log(error.response) + if(error.response.data && error.response.data.errors) { + reportStatus(`There was an error loading this trip: ${error.message}`, error.response.data.errors); + } else { + reportStatus(`There was an error loading this trip: ${error.message}`); + } + }); +}; -// axios.post(URL, petData) -// .then((response) => { -// reportStatus(`Successfully added a pet with ID ${response.data.id}!`); -// clearForm(); -// }) -// .catch((error) => { -// console.log(error.response); -// reportStatus(`Encountered an error while loading pets: ${error.message}`) -// }); -// }; +$(document).on('click', 'li', detailsTrips); +$(document).on('submit', 'form', reservation); -// -// OK GO!!!!! -// $(document).ready(() => { $('#load-trips').click(loadTrips); - // $('#pet-form').submit(createPet); -}); \ No newline at end of file + $('form').submit(readFormData); +}); diff --git a/style.css b/style.css index e69de29b..049bbf67 100644 --- a/style.css +++ b/style.css @@ -0,0 +1,8 @@ +main { + display: grid; + grid-template: 1fr 1fr; +} + +ul { + list-style-type: none; +} \ No newline at end of file From c72a0f7d0f7a179a525d9b059e46e7e58998d330 Mon Sep 17 00:00:00 2001 From: Shamira Date: Sun, 9 Jun 2019 23:53:09 -0700 Subject: [PATCH 4/5] reservation function troubleshoot --- index.js | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/index.js b/index.js index b54123b2..899bd15c 100644 --- a/index.js +++ b/index.js @@ -7,16 +7,16 @@ const reportStatus = (message) => { $('#status-message').html(message); }; -const reportError = (message, errors) => { - let info = `

      ${message}

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

      ${message}

        `; +// for (const field in errors) { +// for (const problem of errors[field]) { +// content += `
      • ${field}: ${problem}
        • `; +// } +// } +// content += "
      " +// reportStatus(info); +// }; // Gets All Trips - from Ada Pets const loadTrips = () => { @@ -96,14 +96,14 @@ const reservation = (event) => { event.preventDefault(); console.log('this works') - // const testData = readTripForm(); + const tripID = event.target.className; - let createTripURL = `https://trektravel.herokuapp.com/trips/${tripID}/reservations` + let createTripURL = `https://trektravel.herokuapp.com/trips/${tripID}/reservations`; let tripData = readFormData(); reportStatus('Sending trip data...'); console.log("About to post trip data", tripData) - + // keep getting a 404 not found. The data isn't being read axios.post(createTripURL, tripData) .then((response) => { console.log(response); From 207e86729882755dbcfbf94eae2fd00a08bf6eed Mon Sep 17 00:00:00 2001 From: Shamira Date: Mon, 10 Jun 2019 07:48:50 -0700 Subject: [PATCH 5/5] Added some CSS --- index.js | 2 +- style.css | 19 +++++++++++++++++-- 2 files changed, 18 insertions(+), 3 deletions(-) diff --git a/index.js b/index.js index 899bd15c..05a88c4e 100644 --- a/index.js +++ b/index.js @@ -98,7 +98,7 @@ const reservation = (event) => { const tripID = event.target.className; - let createTripURL = `https://trektravel.herokuapp.com/trips/${tripID}/reservations`; + const createTripURL = `https://trektravel.herokuapp.com/trips/${tripID}/reservations`; let tripData = readFormData(); reportStatus('Sending trip data...'); diff --git a/style.css b/style.css index 049bbf67..f4161127 100644 --- a/style.css +++ b/style.css @@ -1,6 +1,21 @@ +body { + background-color: #FFC2AD; +} + main { - display: grid; - grid-template: 1fr 1fr; + display: flex; +} + +h2 { + color: #CC6D4E; +} + +h3 { + color: #FF8960; +} + +li { + color: #CC6D4E } ul {