diff --git a/index.css b/index.css new file mode 100644 index 00000000..e20da839 --- /dev/null +++ b/index.css @@ -0,0 +1,40 @@ +body { + background-image: url("https://stmed.net/sites/default/files/hot-air-balloon-wallpapers-32225-2405425.jpg"); + background-size: 100%; + background-repeat: no-repeat; + background-attachment: fixed; + padding: 2rem 2rem; +} + +header { + padding: 2rem; +} + +header a { + color: white; +} + +main { + display: grid; + grid-template-columns: 1fr 1fr; + grid-template-rows: 1fr 1fr; + background-color: white; + border-radius: 20px; +} + +.all-trips { + grid-row: 1 / 3; +} + +ul { + list-style: none; +} + +.trip { + display: flex; + flex-direction: column; +} + +.new-rez { + padding: 40px; +} diff --git a/index.html b/index.html new file mode 100644 index 00000000..ee7f6762 --- /dev/null +++ b/index.html @@ -0,0 +1,34 @@ + + + + Trek + + + + + + + + + +
+

Trek

+ +
+
+ +
+
+ +
+ +
+ +
+
+
+
+
+
+ + diff --git a/index.js b/index.js new file mode 100644 index 00000000..a6f7e823 --- /dev/null +++ b/index.js @@ -0,0 +1,141 @@ +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 trips...'); + + const tripList = $('#trip-list'); + tripList.empty(); + + axios.get(URL) + .then((response) => { + console.log(response); + reportStatus(`Successfully loaded ${response.data.length} trips`); + tripList.append('

All Trips

') + response.data.forEach( (trip) => { + tripList.append(`
  • ${trip.name}
    • `); + }); + }) + .catch((error) => { + reportStatus(`Encountered an error while loading trips: ${error.message}`); + console.log(error); + }); +}; + +const getTripDetails = (trip) => { + reportStatus('Retrieving trip details...'); + + const tripDetails = $('#trip-details'); + tripDetails.empty(); + + + axios.get(URL + `/${trip.id}`) + .then((response) => { + reportStatus(''); + tripDetails.append(` +

    Trip Details

    +
  • Name: ${response.data.name}
    • +
  • Continent: ${response.data.continent}
    • +
  • Category: ${response.data.category}
    • +
  • Weeks: ${response.data.weeks}
    • +
  • Cost: $${response.data.cost}
    • +
  • About: ${response.data.about}
    • `); + }); + +}; + +const getRezForm = (trip) => { + const rezForm = $('#rez-form') + rezForm.empty(); + + rezForm.append(` +

    Reserve Trip

    +
    + + +
    +
    + + +
    +
    + +
    + + `); + +} + +const readFormData = () => { + const parsedFormData = {}; + + const tripFromForm = $(`#rez-form input[name="trip_id"]`).val(); + parsedFormData['trip_id'] = tripFromForm ? tripFromForm : undefined; + + const nameFromForm = $(`#rez-form input[name="name"]`).val(); + parsedFormData['name'] = nameFromForm ? nameFromForm : undefined; + + const emailFromForm = $(`#rez-form input[name="email"]`).val(); + parsedFormData['email'] = emailFromForm ? emailFromForm : undefined; + + return parsedFormData; +}; + +const clearForm = () => { + $(`#rez-form input[name="name"]`).val(''); + $(`#rez-form input[name="email"]`).val(''); + $(`#rez-form input[name="trip"]`).val(''); +} + +const reserveTrip = (event) => { + console.log(event); + event.preventDefault(); + + const tripData = readFormData(); + console.log(tripData); + + reportStatus('Sending reservation data...'); + + axios.post(URL + '/' + tripData.trip_id + '/reservations', tripData) + .then((response) => { + reportStatus(`Successfully reserved a trip 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-list').on('click', 'li', function(trip) { + console.log(this.id); + getTripDetails(this); + getRezForm(this); + }); + + $('#rez-form').submit(reserveTrip); +});