diff --git a/index.css b/index.css new file mode 100644 index 00000000..320fbd6b --- /dev/null +++ b/index.css @@ -0,0 +1,9 @@ +body { + font-family: sans-serif; +} + +main { + display: grid; + grid-template-columns: 1fr 1fr; + padding: 5px; +} diff --git a/index.html b/index.html new file mode 100644 index 00000000..af596323 --- /dev/null +++ b/index.html @@ -0,0 +1,47 @@ + + + + + Sites with axios + + + + + + + + +
+

TAKE A TREK! A whole big world is waiting!

+
+
+ +
+
+
+

List-o-Trips

+ +
    +
    +
    +

    +

    + +

    +
    +
    +

    +
    +
    +
    + +
    + +
    +
    +
    +
    +
    + + diff --git a/index.js b/index.js new file mode 100644 index 00000000..4befef67 --- /dev/null +++ b/index.js @@ -0,0 +1,244 @@ +const URL = "https://trektravel.herokuapp.com/trips"; +let hiddenID = null; +// +// Status Management +// +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 => { + reportStatus(`Successfully loaded ${response.data.length} trips`); + response.data + .forEach(trip => { + const vacation = $( + `
  • ${trip.name}
    • ` + ); + tripList.append(vacation).addClass("show-trip)"); + console.log(`${trip.name},${trip.id},${trip.about}}`); + + const individualTrip = showTrip(trip.id); + vacation.click(individualTrip); + }) + .catch(error => { + reportStatus( + `Encountered an error while loading trips: ${error.message}` + ); + console.log(error); + }); + }); +}; +const showTrip = id => { + return () => { + hiddenID = id; + axios + .get(`${URL}/${id}`) + .then(response => { + getTripTemplate(response); + getReserveTemplate(response); + getTripCreateTemplate(); + }) + .catch(error => { + reportStatus( + `Encountered an error while loading trips: ${error.message}` + ); + console.log(error); + }); + }; +}; +function getTripTemplate(response) { + console.log(response.data.name); + $("#showList").html(`
    Trip Name: ${ + response.data.name + }
    +
    + Trip continent: ${response.data.continent} +
    +
    Description: ${response.data.about}
    +
    Weeks: ${response.data.weeks}
    +
    Cost: ${response.data.cost}
    +


    `); +} +function getReserveTemplate(response) { + $("#trip-form").html( + `

    Reserve a trip

    +
    + + +
    +
    + + +
    + +
    + + +
    +
    + +
    + + ` + ); +} +function getTripCreateTemplate() { + $("#new-trip-form").html( + `
    + + +
    + +
    + + +
    + +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    + ` + ); +} + +const readFormData = () => { + const parsedFormData = {}; + + const nameFromForm = $(`#trip-form input[name="name"]`).val(); + parsedFormData["name"] = nameFromForm ? nameFromForm : undefined; + + const emailFromForm = $(`#trip-form input[name="email"]`).val(); + parsedFormData["email"] = emailFromForm ? emailFromForm : undefined; + + const tripNameFromForm = $(`#trip-form input[name="trip-name"]`).val(); + parsedFormData["showTrip"] = tripNameFromForm ? tripNameFromForm : undefined; + + return parsedFormData; +}; + +const clearForm = () => { + $(`#trip-form input[name="name"]`).val(""); + $(`#trip-form input[name="email"]`).val(""); + $(`#trip-form input[name="trip-name"]`).val(""); +}; + +const reserveTrip = event => { + event.preventDefault(); + + const tripData = readFormData(); + + console.log(tripData); + + reportStatus("Sending trip data..."); + + axios + .post(`${URL}/${hiddenID}/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}`); + } + }); +}; +const tripFormData = () => { + const parsedTripFormData = {}; + + const tripNameFromForm = $(`#new-trip-form input[name="trip-name"]`).val(); + parsedTripFormData["name"] = tripNameFromForm ? tripNameFromForm : undefined; + + const continentFromForm = $(`#new-trip-form input[name="continent"]`).val(); + parsedTripFormData["continent"] = continentFromForm + ? continentFromForm + : undefined; + + const aboutFromForm = $(`#new-trip-form input[name="about"]`).val(); + parsedTripFormData["about"] = aboutFromForm ? aboutFromForm : undefined; + + const categoryFromForm = $(`#new-trip-form input[name="category"]`).val(); + parsedTripFormData["category"] = categoryFromForm + ? categoryFromForm + : undefined; + + const weeksFromForm = $(`#new-trip-form input[name="weeks"]`).val(); + parsedTripFormData["weeks"] = weeksFromForm ? weeksFromForm : undefined; + + const costFromForm = $(`#new-trip-form input[name="cost"]`).val(); + parsedTripFormData["cost"] = costFromForm ? costFromForm : undefined; + return parsedTripFormData; +}; + +const createTrip = event => { + event.preventDefault(); + + const formData = tripFormData(); + console.log(tripFormData); + + reportStatus("Sending trip data..."); + + axios + .post(URL, formData) + .then(response => { + reportStatus(`Successfully added a trip with ID ${response.data.id}!`); + $("#trip-list").append(tripFormData); + 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-form").submit(reserveTrip); + $("#show-trip").on("click", "a", function() { + console.log("loading trip"); + showTrip(this.id); + }); + $("#new-trip-form").submit(createTrip); +});