diff --git a/index.css b/index.css new file mode 100644 index 00000000..b9bfd8ec --- /dev/null +++ b/index.css @@ -0,0 +1,8 @@ +ul { + list-style: none +} + +.trip { + border: 2px solid; + display: table +} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 00000000..28ee83fc --- /dev/null +++ b/index.html @@ -0,0 +1,38 @@ + + + + + + + + Trek + + + + + + + + +
+ +
+
+ + +
+ +
+ + + +
+
+
+ +
+ + + + \ No newline at end of file diff --git a/index.js b/index.js new file mode 100644 index 00000000..1bf95a2c --- /dev/null +++ b/index.js @@ -0,0 +1,176 @@ +const tripListURL = 'https://trektravel.herokuapp.com/trips'; + +// +// Status Management +// +const reportStatus = (message) => { + $('#status-message').html(message); +}; + +const reportError = (message, errors) => { + let content = `

${message}

"; + reportStatus(content); +}; + +// +// Loading Trips +// +const loadTrips = () => { + reportStatus('Loading trips...'); + + const tripList = $('#trip-list'); + tripList.empty(); + + // sends GET request to endpoint + axios.get(tripListURL) + .then((response) => { + tripList.append('

All Trips

') + reportStatus(`Successfully loaded ${response.data.length} trips`); + // parses through each response + response.data.forEach((trip) => { + // adds each trip to list + tripList.append(`
  • Trip ${trip.id} : ${trip.name}
    • `); + }); + }) + .catch((error) => { + reportStatus(`Encountered an error while loading trips: ${error.message}`); + console.log(error); + }); +}; + +// read into single trip +const readTrip = (tripID) => { + reportStatus('Loading trips...'); + + const tripAttributes = $('#trip-attributes'); + tripAttributes.empty(); + + // compiles url for specific trip + const tripURL = tripListURL + '/' + tripID; + + // sends GET request to endpoint + axios.get(tripURL) + .then((response) => { + reportStatus(`Successfully loaded Trip ${tripID}`); + // add header + tripAttributes.append(`

    Trip Details

    `); + + // parse through hashy details object + for (let [detail, value] of Object.entries(response.data)) { + tripAttributes.append(`
  • ${detail.charAt(0).toUpperCase() + detail.slice(1)}: ${value}
    • `); + } + + }) + .catch((error) => { + reportStatus(`Encountered an error while loading trips: ${error.message}`); + console.log(error); + }); +}; + +const tripForm = (tripID) => { + reportStatus('Loading trip form'); + + const tripFormContainer = $('#trip-form-container'); + tripFormContainer.empty(); + + const tripURL = tripListURL + '/' + tripID; + + + const form = `
    +
    + + +
    +
    + + +
    + + `; + + // sends GET request to endpoint + axios.get(tripURL) + .then((response) => { + reportStatus(`Successfully loaded Trip Form ${tripID}`); + // add header + tripFormContainer.append(`

    Reserve This Trip

    ` + form); + + }) + .catch((error) => { + reportStatus(`Encountered an error while loading trips: ${error.message}`); + console.log(error); + }); +}; + + +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; + + return parsedFormData; +}; + +const clearForm = () => { + $(`#trip-form input[name="name"]`).val(''); + $(`#trip-form input[name="email"]`).val(''); +} + + +const makeReservation = (tripID) => { + const tripURL = tripListURL + '/' + tripID; + + event.preventDefault(); + + const tripData = readFormData(); + console.log(tripData); + + reportStatus('Sending trip data...'); + + axios.post(tripURL, tripData) + .then((response) => { + reportStatus(`Successfully added a trip with ID ${tripID}!`); + 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}`); + } + }); + +}; + + +// +// OK GO!!!!! +// +$(document).ready(() => { + $('#load').click(loadTrips); + $('#trip-list').on('click', '.trip', function () { + readTrip(this.id); + tripForm(this.id) + }); + $('#tripForm').on('submit', 'button', function () { + makeReservation(this.class) + }); +}); + + + + diff --git a/planning.txt b/planning.txt new file mode 100644 index 00000000..4b2e6633 --- /dev/null +++ b/planning.txt @@ -0,0 +1,41 @@ +API Structure: +[{"id":70, "name":"Cairo to Zanzibar", +"continent":"Africa", "category":"everything", +"weeks":5,"cost":9599.99 +}] + +Wave 1 +As a user on the home page with no trips listed, I want to click a button or link, so that I see a list of all trips. + ? all trips is ul - add shit as an li item + /click button triggers event + /load api for trip num only + /index into array for each, interpolate as `trip ${tripid} : ${tripname} ` + +Wave 2 +As a user on the home page with trips listed, I want to click on a specific trip, so that I see a new section appear with details of that trip. +As a user on the home page, after I've selected a specific trip, I want to see the following fields listed in the new section of the page, so that I know the details of that trip: + ? trip details is its own ul + /click on list triggers show page + /build endpoint + /load info for that specific trip + + +Trip ID +Trip name +Continent +Details about the trip +Category of the trip +Number of weeks duration of the trip +Cost of the trip + + +Wave 3 + +1. load form when trip gets clicked -> trigger event, click +name, email + +2. send a post request when submit gets clicked + clear form + +3. create new trip, with some info set +