From 9fbc6263d614cdcbe8beaca63e47924b42e51918 Mon Sep 17 00:00:00 2001 From: Karla Guadron Date: Mon, 3 Jun 2019 15:47:27 -0700 Subject: [PATCH 1/3] Trek list and trek details working --- index.css | 0 index.html | 49 +++++++++++++++++++++++++ index.js | 99 +++++++++++++++++++++++++++++++++++++++++++++++++ index2.js | 106 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 254 insertions(+) create mode 100644 index.css create mode 100644 index.html create mode 100644 index.js create mode 100644 index2.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..251ccfb0 --- /dev/null +++ b/index.html @@ -0,0 +1,49 @@ + + + + + TREK + + + + + + +
+ +
+
+

Ready to Trek?

+ +
    +
    + +
    + +
    + + +
    + + \ No newline at end of file diff --git a/index.js b/index.js new file mode 100644 index 00000000..4b3d8244 --- /dev/null +++ b/index.js @@ -0,0 +1,99 @@ +const reportStatus = (message) => { + $('#status-message').html(message); +}; + +const reportError = (message, errors) => { + let content = `

    ${message}

    "; + reportStatus(content); +}; + +const loadTreks = () => { + const trekList = $('#trek-list'); + trekList.empty(); + + let URL = 'https://trektravel.herokuapp.com/trips' + axios.get(URL) + .then((response) => { + const theTreks = response.data; + + theTreks.forEach((trek) => { + trekList.append(`
  • ${trek.name}
    • `); + + const showTrekDetails = (trip) => { + const trekDetail = () => { + let detailsURL = `https://trektravel.herokuapp.com/trips/${trip.id}` + + + axios.get(detailsURL) + .then((response) => { + const trekDeets = $('.indiv-trek'); + trekDeets.empty(); + + trekDeets.html( + `

    ${trip.name}

    +

    Continent: ${trip.continent}

    +

    Category: ${trip.category}

    +

    Weeks: ${trip.weeks}

    +

    Cost: $${trip.cost}

    +

    About:

    +

    ${response.data.about}

    ` + ) + // console.log(trip) + // console.log(response) + }) + + .catch((error) => { + reportStatus(error); + }); + } + return trekDetail; + }; + const clickedTrek = showTrekDetails(trek); + $("li").click(clickedTrek); + }); + }) + + .catch((error) => { + reportStatus(`Encountered an error while loading treks: ${error.message}`); + console.log(error); + }); + }; + +$(document).ready(() => { + $('#load').click(loadTreks) +}); + + +// const showTrekDetails = (trip) => { +// let detailsURL = `https://trektravel.herokuapp.com/trips/${trip.id}` +// const trekDeets = $('#"trek-deets"'); + +// axios.get(detailsURL) +// .then((response) => { +// trekDeets.append(`

    Trek Details

    `); +// trekDeets.append(`
  • ${response.data[0].name}
    • `); +// console.log(response.data.name) +// }) +// .catch((error) => { +// reportStatus(`Encountered an error while loading treks: ${error.message}`); +// console.log(error); +// }); +// }; + +// .catch((error) => { +// if (error.response.data && error.response.data.errors) { +//reportError('Encountered an errro while loading oets: ${error.message}, +// error.response.data.errors) +// } +// }) +// reportError('Encountered an errro while loading oets: ${error.message}, +// error.response.data.errors) + + +// https://picsum.photos/id/477/500/500 \ No newline at end of file diff --git a/index2.js b/index2.js new file mode 100644 index 00000000..6eb18a8f --- /dev/null +++ b/index2.js @@ -0,0 +1,106 @@ +const reportStatus = (message) => { + $('#status-message').html(message); +}; + +const reportError = (message, errors) => { + let content = `

    ${message}

    "; + reportStatus(content); +}; + +const loadTreks = () => { + const trekList = $('#trek-list'); + trekList.empty(); + + let URL = 'https://trektravel.herokuapp.com/trips' + axios.get(URL) + .then((response) => { + reportStatus(`Successfully loaded ${response.data.length} trips`); + console.log('successfully loaded trips'); + + const theTreks = response.data; + + theTreks.forEach((trek) => { + let thisTrek = $(`
  • ${trek.name}
    • `); + thisTrek.addClass(`${trek.id}`); + trekList.append(thisTrek); + }) + }) + + .catch((error) => { + reportStatus(`Encountered an error while loading treks: ${error.message}`); + console.log(error); + }) + + const showTrekDetails = (event) => { + let trekId = event.target.className; + let detailsURL = `https://trektravel.herokuapp.com/trips/${trekId}`; + console.log(trekId) + console.log(detailsURL) + + const detailSection = $('#details'); + detailSection.empty(); + + axios.get(detailsURL) + .then((response) => { + reportStatus(`Successfully loaded trip ${trekId}`); + console.log('successfully loaded trip!'); + + detailSection.html( + `

    ${response.data.name}

    +

    Continent: ${response.data.continent}

    +

    Category: ${response.data.category}

    +

    Weeks: ${response.data.weeks}

    +

    Cost: $${response.data.cost}

    +

    About:

    +

    ${response.data.about}

    ` + ) + + }) + + .catch((error) => { + reportStatus(`Something went wrong with loading trip ${trekId}: ${error}`); + console.log(`Something went wrong with loading trip ${trekId}: ${error}`); + }); + }; + + $("#trek-list").on('click', 'li', showTrekDetails); + }; + +$(document).ready(() => { + $('#load').click(loadTreks); +}); + + +// const showTrekDetails = (trip) => { +// let detailsURL = `https://trektravel.herokuapp.com/trips/${trip.id}` +// const trekDeets = $('#"trek-deets"'); + +// axios.get(detailsURL) +// .then((response) => { +// trekDeets.append(`

    Trek Details

    `); +// trekDeets.append(`
  • ${response.data[0].name}
    • `); +// console.log(response.data.name) +// }) +// .catch((error) => { +// reportStatus(`Encountered an error while loading treks: ${error.message}`); +// console.log(error); +// }); +// }; + +// .catch((error) => { +// if (error.response.data && error.response.data.errors) { +//reportError('Encountered an errro while loading oets: ${error.message}, +// error.response.data.errors) +// } +// }) +// reportError('Encountered an errro while loading oets: ${error.message}, +// error.response.data.errors) + + +// https://picsum.photos/id/477/500/500 \ No newline at end of file From feefb6661874e149dc20085fad18908731ffcebc Mon Sep 17 00:00:00 2001 From: Karla Guadron Date: Tue, 4 Jun 2019 19:22:28 -0700 Subject: [PATCH 2/3] Wrote post reservation function. Not working yet. --- index.html | 22 ++++---- index2.js | 121 +++++++++++++++++++++++++++++------------ sample.js | 155 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 254 insertions(+), 44 deletions(-) create mode 100644 sample.js diff --git a/index.html b/index.html index 251ccfb0..b2fae6e6 100644 --- a/index.html +++ b/index.html @@ -23,27 +23,27 @@

    Ready to Trek?

    - + + --> + \ No newline at end of file diff --git a/index2.js b/index2.js index 6eb18a8f..4870d211 100644 --- a/index2.js +++ b/index2.js @@ -21,7 +21,7 @@ const loadTreks = () => { axios.get(URL) .then((response) => { reportStatus(`Successfully loaded ${response.data.length} trips`); - console.log('successfully loaded trips'); + console.log('successfully loaded all trips'); const theTreks = response.data; @@ -40,8 +40,6 @@ const loadTreks = () => { const showTrekDetails = (event) => { let trekId = event.target.className; let detailsURL = `https://trektravel.herokuapp.com/trips/${trekId}`; - console.log(trekId) - console.log(detailsURL) const detailSection = $('#details'); detailSection.empty(); @@ -58,9 +56,9 @@ const loadTreks = () => {

    Weeks: ${response.data.weeks}

    Cost: $${response.data.cost}

    About:

    -

    ${response.data.about}

    ` +

    ${response.data.about}

    + ` ) - }) .catch((error) => { @@ -69,38 +67,95 @@ const loadTreks = () => { }); }; + const reservationForm = () => { + const detailSection = $('#details'); + detailSection.append('

    Make a Reservation

    ') + detailSection.append('
    ') + detailSection.append('
    ') + detailSection.append('') + detailSection.append('') + detailSection.append('
    ') + detailSection.append('
    ') + detailSection.append('') + detailSection.append('') + detailSection.append('
    ') + detailSection.append('
    ') + detailSection.append('') + detailSection.append('') + detailSection.append('
    ') + detailSection.append('
    ') + detailSection.append('') + detailSection.append('
    ') + + // $('#reservation-form').submit(makeReservation); + } + + const makeReservation = (event) => { + console.log('hi') + event.preventDefault(); + + const trekId = event.target.className; + let reservationURL = `https://trektravel.herokuapp.com/trips/${trekId}/reservations` + + // const reservationSection = $('#reservation') + // reservationSection.empty(); + + const readFormData = () => { + const parsedFormData = {}; + + const nameFromForm = $(`#reservation-form input[name="name"]`).val(); + parsedFormData['name'] = nameFromForm ? nameFromForm : undefined; + + const ageFromForm = $(`#reservation-form input[name="age"]`).val(); + parsedFormData['age'] = ageFromForm ? ageFromForm : undefined; + + const emailFromForm = $(`#reservation-form input[name="email"]`).val(); + parsedFormData['email'] = ownerFromForm ? ownerFromForm : undefined; + + return parsedFormData; + }; + + const clearForm = () => { + $(`#reservation-form input[name="name"]`).val(''); + $(`#reservation-form input[name="email"]`).val(''); + $(`#reservation-form input[name="age"]`).val(''); + } + + const trekData = readFormData(); + + reportStatus('Sending trek data...'); + + axios.post(reservationURL, trekData) + .then((response) => { + console.log(response); + reportStatus('Successfully reserved a trek!'); + clearForm(); + }) + + .catch((error) => { + console.log(error.response); + // Make sure the server actually sent us errors. If + // there's a different problem, like a typo in the URL + // or a network error, the response won't be filled in. + if (error.response.data && error.response.data.errors) { + // User our new helper method + reportError(`Encountered an error: ${error.message}`, + error.response.data.errors + ); + } else { + // This is what we had before + reportStatus(`Encountered an error: ${error.message}`); + } + }); + }; + $("#trek-list").on('click', 'li', showTrekDetails); - }; + $("#details").on('click', 'button', reservationForm); + $('#reservation-form').submit(makeReservation); +}; $(document).ready(() => { $('#load').click(loadTreks); }); - -// const showTrekDetails = (trip) => { -// let detailsURL = `https://trektravel.herokuapp.com/trips/${trip.id}` -// const trekDeets = $('#"trek-deets"'); - -// axios.get(detailsURL) -// .then((response) => { -// trekDeets.append(`

    Trek Details

    `); -// trekDeets.append(`
  • ${response.data[0].name}
    • `); -// console.log(response.data.name) -// }) -// .catch((error) => { -// reportStatus(`Encountered an error while loading treks: ${error.message}`); -// console.log(error); -// }); -// }; - -// .catch((error) => { -// if (error.response.data && error.response.data.errors) { -//reportError('Encountered an errro while loading oets: ${error.message}, -// error.response.data.errors) -// } -// }) -// reportError('Encountered an errro while loading oets: ${error.message}, -// error.response.data.errors) - - // https://picsum.photos/id/477/500/500 \ No newline at end of file diff --git a/sample.js b/sample.js new file mode 100644 index 00000000..23212de8 --- /dev/null +++ b/sample.js @@ -0,0 +1,155 @@ +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 inventory...'); + + const tripsList = $('#trips-list'); + tripsList.empty(); + + axios.get(URL) + .then((response) => { + reportStatus(`Successfully loaded ${response.data.length} trips`); + response.data.forEach((trip) => { + const newTrip = $(`
  • ${trip.name}
    • `); + tripsList.append(newTrip); + const showTrip = tripShowHandler(trip); + newTrip.click(showTrip); + }); + }) + .catch((error) => { + reportStatus(`Encountered an error while loading trips: ${error.message}`); + console.log(error); + }); +}; + +const tripShowHandler = (trip) => { + + const tripsShow = $('#trip-view'); + const tripID = trip.id; + return () => { + reportStatus('Loading trip...'); + tripsShow.empty(); + + axios.get(URL + tripID) + .then((response) => { + reportStatus(`Found the perfect adventure...`); + const newTrip = $(`

    ${response.data.name}

    +

    $${response.data.cost} ${response.data.continent}, ${response.data.weeks} weeks

    + `); + tripsShow.append(newTrip); + const reserveButton = $(``) + tripsShow.append(reserveButton); + const reserveForm = reserveFormHandler(trip); + reserveButton.click(reserveForm); + }) + + .catch((error) => { + reportStatus(`Encountered an error while loading trips: ${error.message}`); + console.log(error); + }); + }; +}; + +const reserveFormHandler = (trip) => { + + const tripID = trip.id; + + const form = `

    Add a reservation for ${trip.name}

    +
    +
    + + +
    +
    + + +
    +
    + + +
    + +
    ` + + const tripsShow = $('#trip-view'); + + return () => { + reportStatus('Loading reservation...'); + tripsShow.append(form); + const result = (event) => { + event.preventDefault(); + createReservation( tripID ); + }; + + $('#reservation-form').submit(result); + } +}; + +const createReservation = ( tripID ) => { + + const readFormData = () => { + const parsedFormData = {}; + + const nameFromForm = $(`#reservation-form input[name="name"]`).val(); + parsedFormData['name'] = nameFromForm + + const ageFromForm = $(`#reservation-form input[name="age"]`).val(); + parsedFormData['age'] = ageFromForm ? ageFromForm : undefined; + + const emailFromForm = $(`#reservation-form input[name="email"]`).val(); + parsedFormData['email'] = emailFromForm + + return parsedFormData; + }; + + const reservationData = readFormData(); + + const clearForm = () => { + $(`#reservation-form input[name="name"]`).val(''); + $(`#reservation-form input[name="age"]`).val(''); + $(`#reservation-form input[name="email"]`).val(''); + } + + const url = URL + tripID + `"/reservations?name=${reservationData['name']}&age=${reservationData['age']}&email=${reservationData['email']}`; + + reportStatus(`Sending reservation data...`); + + axios.post(url) + .then((response) => { + reportStatus(`Successfully added 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); +}); \ No newline at end of file From b65f2cfab51013300ab54bc4c8370aca482e0125 Mon Sep 17 00:00:00 2001 From: Karla Guadron Date: Mon, 10 Jun 2019 19:07:51 -0700 Subject: [PATCH 3/3] Edited index.js to get reservation functionality working and updated css styling --- index.css | 90 ++++++++++++++++++++++ index.html | 38 +++------- index2.js | 213 +++++++++++++++++++++++++++-------------------------- 3 files changed, 208 insertions(+), 133 deletions(-) diff --git a/index.css b/index.css index e69de29b..9ef210cf 100644 --- a/index.css +++ b/index.css @@ -0,0 +1,90 @@ +@import url("https://fonts.googleapis.com/css?family=Bangers&display=swap"); +@import url("https://fonts.googleapis.com/css?family=Muli&display=swap"); + +body { + font-family: Muli; + background-image: url("https://tinyurl.com/y4labzbu"); + background-attachment: fixed; + /* background-position: center; */ + background-size: cover; + background-repeat: no-repeat; +} + +main { +} + +#title { + font-family: Bangers; + font-weight: 500; + font-size: 5rem; +} + +#grid-container { + display: grid; + grid-template: auto 5em 1em / 50% auto; +} + +#status-message { + grid-column: 1 / span 2; + grid-row: 1 / span 1; + border: solid; + border-color: orangered; + background-color: white; + opacity: 0.75; +} + +#title { + grid-column: 1 / span 2; + grid-row: 2 / span 2; + + justify-self: center; +} + +#load { + border: solid; + border-color: orangered; + justify-self: end; + font-family: Muli; + font-size: 2em; + font-style: bold; + margin-top: 20%; + opacity: 0.75; +} + +.current-treks { + grid-column: 1 / span 1; + grid-row: 3 / span 1; + justify-self: center; + padding-top: 10% +} + +#trek-list { + list-style: none; + line-height: 30px; + text-align: center; +} + +/* ul { + opacity: 0.75; +} */ + +li { + background-color: white; + opacity: 0.75; +} + +li:hover { + background-color: orangered; + color: white; +} + +#details { + grid-column: 2 / span 1; + grid-row: 3 / span 1; + padding-top: 10%; +} + +#details * { + background-color: white; + opacity: 0.75; +} \ No newline at end of file diff --git a/index.html b/index.html index b2fae6e6..20c4a657 100644 --- a/index.html +++ b/index.html @@ -1,49 +1,31 @@ + TREK - + + + + -
    -
    +
    +
    +

    Ready to Trek?

    -

    Ready to Trek?

      - -
      - -
      -
      + + \ No newline at end of file diff --git a/index2.js b/index2.js index 4870d211..c1e85319 100644 --- a/index2.js +++ b/index2.js @@ -37,125 +37,128 @@ const loadTreks = () => { console.log(error); }) - const showTrekDetails = (event) => { - let trekId = event.target.className; - let detailsURL = `https://trektravel.herokuapp.com/trips/${trekId}`; - - const detailSection = $('#details'); - detailSection.empty(); - - axios.get(detailsURL) + const showTrekDetails = (event) => { + let trekId = event.target.className; + let detailsURL = `https://trektravel.herokuapp.com/trips/${trekId}`; + + const detailSection = $('#details'); + detailSection.empty(); + + axios.get(detailsURL) + .then((response) => { + reportStatus(`Successfully loaded trip ${trekId}`); + console.log('successfully loaded trip!'); + + detailSection.html( + `

      ${response.data.name}

      +

      Continent: ${response.data.continent}

      +

      Category: ${response.data.category}

      +

      Weeks: ${response.data.weeks}

      +

      Cost: $${response.data.cost}

      +

      About:

      +

      ${response.data.about}

      ` + // ` + ) + reservationForm(); + $('#reservation-form').on('submit', makeReservation); + }) + + .catch((error) => { + reportStatus(`Something went wrong with loading trip ${trekId}: ${error}`); + console.log(`Something went wrong with loading trip ${trekId}: ${error}`); + }); + + const makeReservation = (event) => { + event.preventDefault(); + // const trekId = event.target.className; + console.log(`trek id: ${trekId}`) + let reservationURL = `https://trektravel.herokuapp.com/trips/${trekId}/reservations` + + const trekData = readFormData(); + + reportStatus('Sending trek data...'); + + axios.post(reservationURL, trekData) .then((response) => { - reportStatus(`Successfully loaded trip ${trekId}`); - console.log('successfully loaded trip!'); - - detailSection.html( - `

      ${response.data.name}

      -

      Continent: ${response.data.continent}

      -

      Category: ${response.data.category}

      -

      Weeks: ${response.data.weeks}

      -

      Cost: $${response.data.cost}

      -

      About:

      -

      ${response.data.about}

      - ` - ) + console.log(response); + reportStatus('Successfully reserved a trek!'); + clearForm(); }) - - .catch((error) => { - reportStatus(`Something went wrong with loading trip ${trekId}: ${error}`); - console.log(`Something went wrong with loading trip ${trekId}: ${error}`); + + .catch((error) => { + console.log(error.response); + // Make sure the server actually sent us errors. If + // there's a different problem, like a typo in the URL + // or a network error, the response won't be filled in. + if (error.response.data && error.response.data.errors) { + // User our new helper method + reportError(`Encountered an error: ${error.message}`, + error.response.data.errors + ); + } else { + // This is what we had before + reportStatus(`Encountered an error: ${error.message}`); + } }); - }; + }; + + + }; const reservationForm = () => { const detailSection = $('#details'); detailSection.append('

      Make a Reservation

      ') detailSection.append('
      ') - detailSection.append('
      ') - detailSection.append('') - detailSection.append('') - detailSection.append('
      ') - detailSection.append('
      ') - detailSection.append('') - detailSection.append('') - detailSection.append('
      ') - detailSection.append('
      ') - detailSection.append('') - detailSection.append('') - detailSection.append('
      ') - detailSection.append('
      ') - detailSection.append('') - detailSection.append('
      ') - + $('#reservation-form').append('
      ') + $('#reservation-form').append('') + $('#reservation-form').append('') + // detailSection.append('
      ') + $('#reservation-form').append('
      ') + $('#reservation-form').append('') + $('#reservation-form').append('') + // detailSection.append('
      ') + $('#reservation-form').append('
      ') + $('#reservation-form').append('') + $('#reservation-form').append('') + // detailSection.append('
      ') + $('#reservation-form').append('
      ') + $('#reservation-form').append(''); + // detailSection.append('') // $('#reservation-form').submit(makeReservation); } + + $("#trek-list").on('click', 'li', showTrekDetails); + // $("#details").on('click', 'button', reservationForm); + }; - const makeReservation = (event) => { - console.log('hi') - event.preventDefault(); - - const trekId = event.target.className; - let reservationURL = `https://trektravel.herokuapp.com/trips/${trekId}/reservations` - - // const reservationSection = $('#reservation') - // reservationSection.empty(); - - const readFormData = () => { - const parsedFormData = {}; - - const nameFromForm = $(`#reservation-form input[name="name"]`).val(); - parsedFormData['name'] = nameFromForm ? nameFromForm : undefined; - - const ageFromForm = $(`#reservation-form input[name="age"]`).val(); - parsedFormData['age'] = ageFromForm ? ageFromForm : undefined; - - const emailFromForm = $(`#reservation-form input[name="email"]`).val(); - parsedFormData['email'] = ownerFromForm ? ownerFromForm : undefined; - - return parsedFormData; - }; - - const clearForm = () => { - $(`#reservation-form input[name="name"]`).val(''); - $(`#reservation-form input[name="email"]`).val(''); - $(`#reservation-form input[name="age"]`).val(''); - } - - const trekData = readFormData(); - - reportStatus('Sending trek data...'); - - axios.post(reservationURL, trekData) - .then((response) => { - console.log(response); - reportStatus('Successfully reserved a trek!'); - clearForm(); - }) - - .catch((error) => { - console.log(error.response); - // Make sure the server actually sent us errors. If - // there's a different problem, like a typo in the URL - // or a network error, the response won't be filled in. - if (error.response.data && error.response.data.errors) { - // User our new helper method - reportError(`Encountered an error: ${error.message}`, - error.response.data.errors - ); - } else { - // This is what we had before - reportStatus(`Encountered an error: ${error.message}`); - } - }); - }; +const readFormData = () => { + let parsedFormData = {}; - $("#trek-list").on('click', 'li', showTrekDetails); - $("#details").on('click', 'button', reservationForm); - $('#reservation-form').submit(makeReservation); + const nameFromForm = $(`#reservation-form input[name="name"]`).val(); + parsedFormData['name'] = nameFromForm ? nameFromForm : undefined; + + const ageFromForm = $(`#reservation-form input[name="age"]`).val(); + parsedFormData['age'] = ageFromForm ? ageFromForm : undefined; + + const emailFromForm = $(`#reservation-form input[name="email"]`).val(); + parsedFormData['email'] = emailFromForm ? emailFromForm : undefined; + + return parsedFormData; }; -$(document).ready(() => { - $('#load').click(loadTreks); +const clearForm = () => { + $(`#reservation-form input[name="name"]`).val(''); + $(`#reservation-form input[name="email"]`).val(''); + $(`#reservation-form input[name="age"]`).val(''); +} + + + + $(document).ready(() => { + $('#load').click(loadTreks); + // $('#reservation-form').submit(makeReservation); }); +console.log('dee is here!'); + // https://picsum.photos/id/477/500/500 \ No newline at end of file