diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 00000000..42ccddcb Binary files /dev/null and b/.DS_Store differ diff --git a/index.css b/index.css new file mode 100644 index 00000000..6ef727a3 --- /dev/null +++ b/index.css @@ -0,0 +1,48 @@ +body { + font-family: sans-serif; +} + +main { + display: grid; + grid-template-columns: 1fr 1fr; + padding: 2rem; +} + +h1 { + border-bottom: 1px solid #424242; + font-size: 3em; + text-align: center; +} + +h3 { + border-bottom: .75px solid #424242; + text-align: center; + padding-bottom: .5em; +} + +button { + background-color: #26A69A; + padding: 0.85em 1em; + color: white; + font-size: .75em; + font-weight: bold; +} + +ul { + list-style-type: none; +} + +.current-trips li { + border: .5px solid black; + text-align: center; + padding: 2em; + margin-right: .5em; + margin-left: .5em; +} + +section { + margin-right: .5em; + margin-left: .5em; + padding-left: .5em; + padding-right: .5em; +} diff --git a/index.html b/index.html new file mode 100644 index 00000000..f1e6c10d --- /dev/null +++ b/index.html @@ -0,0 +1,48 @@ + + + + + Trek + + + + + + +
+
+

Trek

+ +
+ +
+ +
+ +
+ +
+
+ + + + +
+ +
+ + + + + + diff --git a/index.js b/index.js new file mode 100644 index 00000000..790673e7 --- /dev/null +++ b/index.js @@ -0,0 +1,148 @@ +const URL = 'https://ada-backtrek-api.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) => { + 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 viewTrip = (id) => { + reportStatus('Loading trip...'); + + const tripDetail = $('#trip-details'); + tripDetail.empty(); + + axios.get(URL + '/' + id) + .then((response) => { + if (response.status == 200) { + console.log(); + reportStatus(`Successfully loaded trip #${id}`); + let trip = response.data; + let tripID_res = trip.id + // console.log(`res id`); + // console.log(tripID_res); + let tripDetails = ` +

    ${trip.name} - Trip Details (ID ${trip.id})

    +

    Continent: ${trip.continent}

    +

    Category: ${trip.category}

    +

    Duration: ${trip.weeks} weeks

    +

    Cost: $${trip.cost.toFixed(2)}

    +

    ${trip.about}

    + + `; + // $('span').hide() + $('#trip-details').append(tripDetails); + } else { + reportStatus(`Encountered an error while loading trip: ${error.message}`); + } + }) + + .catch((error) => { + reportStatus(`Encountered an error while loading trip: ${error.message}`); + console.log(error); + }); +}; + +const FORM_FIELDS = ['name', 'email']; +const inputField = name => $(`#reservation-form input[name="${name}"]`); + +const readFormData = () => { + const getInput = name => { + const input = inputField(name).val(); + return input ? input : undefined; + }; + + const formData = {}; + FORM_FIELDS.forEach((field) => { + formData[field] = getInput(field); + }); + + return formData; +}; + +const clearForm = () => { + FORM_FIELDS.forEach((field) => { + inputField(field).val(''); + }); +} + +const reserveTrip = (event) => { + event.preventDefault(); + + const tripId = $('#trip-details span').text(); + // const tripId = $('#trip-id'); + const reservationURL = URL + '/' + tripId + '/reservations'; + const reservationData = readFormData(); + console.log(); + + reportStatus('Reserving trip...'); + + axios.post(reservationURL, reservationData) + .then((response) => { + reportStatus(`Successfully added a reservation 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}`); + } + }); +}; + +$(document).ready(() => { + $("#trip-location").hide(); + + $('#load').click(loadtrips) + + $('ul').on('click', 'li', function() { + let tripID = $(this).attr('trip-id'); + viewTrip(tripID); + $('#trip-location').show(); + $("#reserve-trip").show(); + $("#new-reservation").hide(); + }); + $('#reserve-trip').click(function(){ + $("#reserve-trip").hide(); + $("#new-reservation").show(); + let tripID = $(this).attr('trip-id'); + }); + $('#reservation-form').submit(reserveTrip); +});