diff --git a/README.md b/README.md index 349d91e2..2d710964 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@ TREK is an application that displays information on travel packages and allows u This is a [stage 2](https://github.com/Ada-Developers-Academy/pedagogy/blob/master/rule-of-three.md) individual project. -The project is due **Tuesday May 29th before 9am**. +The project is due **Tuesday May 29th before 9am**. ## Learning Goals diff --git a/index.css b/index.css new file mode 100644 index 00000000..63a71f6b --- /dev/null +++ b/index.css @@ -0,0 +1,52 @@ + +body { + font-family: sans-serif; +} + +main { + display: grid; + grid-template-columns: 1fr 1fr; +} + +.all_trips { + display: inline-block; + } + +.trip_specifics { + display: inline-block; + } + +.single-trip-detail { + display: block; +} + +.reservation-opt-in { + display: block; +} + +.make_reservation { + display: block; +} + +.reservation-result { + display: block; +} + +ul { + list-style-type: none; +} + +#every-trip li { + padding-top: 5px; +} + +.details_box { + padding-left: 15px; +} + +.success_message { + color: fuchsia; + background-color: khaki; + padding-left: 20px; + +} diff --git a/index.html b/index.html new file mode 100644 index 00000000..ada3c4bd --- /dev/null +++ b/index.html @@ -0,0 +1,38 @@ + + + + + All Trekked Up + + + + + + +
+ +
+
+

DO YOU WANT TO TREK UP YOUR LIFE?

+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+ + diff --git a/index.js b/index.js new file mode 100644 index 00000000..32083c01 --- /dev/null +++ b/index.js @@ -0,0 +1,177 @@ + + +let targetTripId = null +let targetTripName = null + +const BASE_URL = 'https://ada-backtrek-api.herokuapp.com/trips'; + +// +// Status Management +// +const reportStatus = (message) => { + $('#status-message').html(message); +}; + +const reportError = (message, errors) => { + let content = `

${message}

"; + reportStatus(content); +}; + + +const loadTrips = () => { + reportStatus('Loading trips...'); + + const allTrips = $('#every-trip'); + allTrips.empty(); + + let allTripsUrl = BASE_URL + + axios.get(allTripsUrl) + .then((response) => { + reportStatus(`Successfully loaded ${response.data.length} trips`); + response.data.forEach((trip) => { + allTrips.append(`
  • ${trip.name}
    • `); + }); + }) + .catch((error) => { + reportStatus(`Encountered an error while loading trips: ${error.message}`); + console.log(error); + }); +}; + +const getTripDetail = function getTripDetail(tripID) { + + reportStatus('Getting trip details.'); + + targetTripId = tripID + + const singleTripDetail = $('#trip-deets'); + singleTripDetail.empty(); + + let tripDetailUrl = BASE_URL.concat("/").concat(tripID) + + const reserveButton = $('#reserve-button'); + reserveButton.empty(); + + console.log(`${tripDetailUrl}`); + + axios.get(tripDetailUrl) + .then((response) => { + reportStatus(`Trip details loaded!`); + targetTripName = response.data.name; + singleTripDetail.append( + `

    HERE'S ONE GOOD WAY TO GET TREKKED UP:

    +
    +

    Name: ${targetTripName}

    +

    Continent: ${response.data.continent}

    +

    Category: ${response.data.category}

    +
    Weeks: ${response.data.weeks}
    +
    Cost: ${response.data.cost}
    +
    About:
    +

    ${response.data.about}

    +
    Trip ID: ${targetTripId}
    +
    `); + }) + .catch((error) => { + reportStatus(`Encountered an error while loading trip details: ${error.message}`); + console.log(error); + }); + if (singleTripDetail.length > 0 ) { + reserveButton.append(`` ) + } +}; + + +const callReservationScreen = function callReservationScreen() { + + reportStatus('Pulling up reservation screen'); + + const reservationScreen = $('#reservation-box'); + reservationScreen.empty(); + + reservationScreen.append( + `

    SECURE YOUR OPPORTUNITY TO TREK UP ROYALLY:

    +

    The Trip You Want To Go On Is: ${targetTripName}

    +
    + +
    + +
    + +
    +
    ` + ) + }; + +const createReservation = (e) => { + + e.preventDefault() + + console.log('in the Create Reservation method!') + + console.log(`Here is the targetTripId: ${targetTripId}`) + console.log(`Here is the targetTripName: ${targetTripName}`) + + const reserveTripUrl = BASE_URL.concat("/").concat(targetTripId).concat("/reservations") + + console.log(`Here is the reservation-posting URL: ${reserveTripUrl}`) + + const reservationResult = $('#result-box'); + reservationResult.empty(); + + const reservationData = { + // name: 'Mona VanDerWaal', + // email: 'scarysmart@happycrazy.ru' + name: $('#name').val(), + email: $('#email').val() + } + + console.log(`Here is the name for the reservation ${reservationData.name}`) + console.log(`Here is the email for the reservation ${reservationData.email}`) + + reportStatus(`Submitting a request to reserve a slot in ${targetTripName}.`); + + axios.post(reserveTripUrl, reservationData) + .then((response) => { + console.log(response); + reservationScreen.empty(); + reservationResult.append(`

    YOUR RESERVATION HAS BEEN CREATED!

    Now nothing can stop you from trekking up everything!

    `) + reportStatus(`Successfully reservered a slot in Trip Number + ${response.data.trip_id} for + ${response.data.name}!` + ); + // 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); + $('#every-trip').on('click', 'li', function(event) { + getTripDetail(this.id) + }); + $('#reserve-button').on('click', 'button', function(event) { + callReservationScreen() + }); + $('#reservation-box').on('submit', 'form', function(event) { + createReservation(event) + }); +})