diff --git a/index.css b/index.css new file mode 100644 index 00000000..1db5c863 --- /dev/null +++ b/index.css @@ -0,0 +1,37 @@ + +body { + font-family: sans-serif; +} + +main { + display: grid; + grid-template-columns: 1fr 1fr; + grid-template-rows: 1fr; + grid-template-areas: + "list details" + "list reserve" +} + +#trips-list { + grid-area: list; +} + +#trip-details { + grid-area: details; +} + +#reserve-trip { + grid-area: reserve; +} + +#status-message { + +} + +#trips-button { + +} + +#reservation-form { + +} diff --git a/index.html b/index.html new file mode 100644 index 00000000..182c215b --- /dev/null +++ b/index.html @@ -0,0 +1,46 @@ + + + + + Pets with axios + + + + + + + +
+
+ +
+

Trek

+ + +
+ +
+

Trip Details

+ +
+ +
+

Reserve a Spot on Example Trip

+
+
+ + +
+ +
+ + +
+ + +
+
+
+ + + diff --git a/index.js b/index.js new file mode 100644 index 00000000..a8613b4f --- /dev/null +++ b/index.js @@ -0,0 +1,125 @@ +const URL = 'https://trektravel.herokuapp.com/trips/' + +// Status Management +const reportStatus = (message) => { + $('#status-message').html(message); +}; + +const reportError = (message, errors) => { + let content = `

${message}

"; + reportStatus(content); +}; + +// Wave 1 - Display +const displayTripsList = (tripsList) => { + const target = $('#trips-list'); + target.empty(); + tripsList.forEach(trip => { + target.append(`
  • ${trip.name}
    • `); + + const tripID = $(`#${trip.id}`); + tripID.click(() => loadTripDetails(trip)); + }); +} + +// Wave 1 - Load +const loadTrips = () => { + reportStatus("loading trips..."); + + axios.get(URL) + .then((response) => { + const trips = response.data; + displayTripsList(trips); + reportStatus(`Successfully loaded ${trips.length} trips`); + }) + .catch((error) => { + reportStatus(`Encountered an error while loading trips: ${error.message}`); + console.log(error); + }); +} + +// Wave 2 - Display +const displayTripDetails = (trip) => { + const target = $('#trip-details'); + target.empty(); + + target.append(`

    Trip Details

    `); + target.append(`
  • ID: ${trip.id}
    • `); + target.append(`
  • Name: ${trip.name}
    • `); + target.append(`
  • Continent: ${trip.continent}
    • `); + target.append(`
  • Category: ${trip.category}
    • `); + target.append(`
  • Weeks: ${trip.weeks}
    • `); + target.append(`
  • Cost: $${trip.cost.toFixed(2)}
    • `); + target.append(`
  • About: ${trip.about}
    • `); +} + +// Wave 2 - Load +const loadTripDetails = (trip) => { + reportStatus(`loading details for trip ${trip.name}`); + + axios.get(URL + trip.id) + .then((response) => { + const trip = response.data; + displayTripDetails(trip); + + reportStatus(`Successfully loaded details for: ${trip.name}`); + $('#reservation-form').submit(() => reserveTrip(trip)) + }) + .catch((error) => { + reportStatus(`Encountered an error while loading trip: ${error.message}`); + console.log(error); + }); +} + +// Wave 3 +const readFormData = () => { + const parsedFormData = {}; + + // const fields = ['name', 'email']; + // for (let field in fields) { + // const dataFromForm = $(`#reservation-form input[name=${field}]`).val(); + // parsedFormData[field] = dataFromForm ? dataFromForm : undefined; + // } + parsedFormData.name = $("input[name='name']").val(); + parsedFormData.email = $("input[name='email']").val(); + return parsedFormData; +} + +const clearForm = () => { + $(`#pet-form input[name="name"]`).val(''); + $(`#pet-form input[name="email"]`).val(''); +} + +const reserveTrip = (trip) => { + event.preventDefault(); + const reservationData = readFormData(); + + reportStatus(`Sending reservation data for: ${trip.name}`); + + axios.post(URL + trip.id + '/reservations', 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(() => { + $('#trips-button').on('click', loadTrips); +}); \ No newline at end of file