diff --git a/index.css b/index.css new file mode 100644 index 00000000..18347661 --- /dev/null +++ b/index.css @@ -0,0 +1,56 @@ +body { + margin: 2%; + +} + +h4 { + text-align: center; +} + +#continent { + margin-top: 2%; + margin-bottom: 2%; +} + +#append { + margin-top: 2%; + + text-align: center; + display: grid; + + grid-template-columns: 2fr 3fr; + grid-template-areas: + "a b " + +} + +#trip-list { + grid-area: a; + margin-right: 3%; + background-color: lightblue; +} + + +#detail { + margin-left: 1%; + text-align: left; + grid-area: b; +} + +#tripDetail { + margin-left: 1%; + +} + +#tripReserve { + margin-left: 1%; + +} + +#new-form { + margin-left: 2%; +} + +#trip-form { + margin-left: 2%; +} diff --git a/index.html b/index.html new file mode 100644 index 00000000..27e829f1 --- /dev/null +++ b/index.html @@ -0,0 +1,45 @@ + + + + + Trek + + + + + + + + + +
+ +
+
+
+ + + + +
+
    +
    + + + +
    +
    +
    + +
    + + diff --git a/index.js b/index.js new file mode 100644 index 00000000..4d9b0d22 --- /dev/null +++ b/index.js @@ -0,0 +1,271 @@ +const URL = 'https://trektravel.herokuapp.com/trips'; + +const reportStatus = (message) => { + $('#status-message').html(message); +}; + +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) => { + const idName = `${trip['id']}`; + tripList.append(`
  • ${trip['name']}
    • `); + + }); + }) + .catch((error) => { + reportStatus(`Encountered an error while loading trips: ${error.message}`); + + }); +}; + +const loadTripsByContinent = (continent) => { + reportStatus('Loading trips by continent...'); + let url = `https://trektravel.herokuapp.com/trips/continent?query=${continent}`; + if (continent == "All continents"){ + url = 'https://trektravel.herokuapp.com/trips'; + } + + const tripList = $('#trip-list'); + tripList.empty(); + + axios.get(url) + .then((response) => { + reportStatus(`Successfully loaded ${response.data.length} trips`); + + tripList.append(`

    All Trips in ${continent}

    `); + response.data.forEach((trip) => { + const idName = `${trip['id']}`; + tripList.append(`
  • ${trip['name']}
    • `); + + }); + }) + .catch((error) => { + reportStatus(`Encountered an error while loading trips: ${error.message}`); + + }); + +}; + +const addForm = function addForm(tripName,id) { + + $('#tripReserve').empty(); + $('#tripReserve').append( + `
    +

    Make a reservation

    +
    + +
    + + +
    +
    + + +
    +
    + + +
    +
    + +
    +
    +
    `); + $('#tripNew').empty(); + $('#tripNew').append( + `
    +

    Add a new Trip

    +
    + +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + +
    +
    +
    + `); +}; + +const listTripDetail = function listTripDetail(id) { + const url = `https://trektravel.herokuapp.com/trips/${id}`; + + axios.get(url) + .then((response) =>{ + //console.log(response); => used for get the data at development tools >cosnole to review what get back from api. + reportStatus(`Successfully loaded trip ${response.data['name']}`); + $('#tripDetail').empty(); + + $('#tripDetail').append( + `

    Trip Details

    +

    Name: ${response.data['name']}

    +

    Continent: ${response.data['continent']}

    +

    Category: ${response.data['category']}

    +

    Weeks: ${response.data['week']}

    +

    Cost: $${response.data['cost']}

    +

    About: ${response.data['about']}

    + `); + addForm(response.data['name'],response.data['id']); + }) + .catch((error) => { + reportStatus(`Encountered an error while loading trip: ${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 = (event) => { + + event.preventDefault(); + + + const reserveData = readFormData(); + const id = $(`#trip-form input[name="id"]`).val(); + const postUrl = "https://trektravel.herokuapp.com/trips/"+id+"/reservations"; + + reportStatus('Sending reservation data...'); + + axios.post(postUrl, reserveData) + .then((response) => { + reportStatus(`Successfully added a reservation with ID ${response.data.id}!`); + clearForm(); + }) + .catch((error) => { + if (error.response.data && error.response.data.errors) { + reportStatus( + `Encountered an error: ${error.message}`, + error.response.data.errors + ); + } else { + reportStatus(`Encountered an error: ${error.message}`); + } + }); + +}; + +const readTripData = () => { + const parsedTripData = {}; + + const nameFromTrip = $(`#new-form input[name="name"]`).val(); + parsedTripData['name'] = nameFromTrip ? nameFromTrip : undefined; + + const continentFromTrip = $(`#new-form input[name="continent"]`).val(); + parsedTripData['continent'] = continentFromTrip ? continentFromTrip : undefined; + + const aboutFromTrip = $(`#new-form input[name="about"]`).val(); + parsedTripData['about'] = aboutFromTrip ? aboutFromTrip: undefined; + + const categoryFromTrip = $(`#new-form input[name="category"]`).val(); + parsedTripData['category'] = categoryFromTrip ? categoryFromTrip : undefined; + + const weekFromTrip = $(`#new-form input[name="weeks"]`).val(); + parsedTripData['weeks'] = weekFromTrip ? weekFromTrip : undefined; + + const costFromTrip = $(`#new-form input[name="cost"]`).val(); + parsedTripData['cost'] = costFromTrip ? costFromTrip : undefined; + + return parsedTripData; +}; + +const clearTripData = () => { + $(`#new-form input[name="name"]`).val(''); + $(`#new-form input[name="continent"]`).val(''); + $(`#new-form input[name="about"]`).val(''); + $(`#new-form input[name="category"]`).val(''); + $(`#new-form input[name="weeks"]`).val(''); + $(`#new-form input[name="cost"]`).val(''); +}; + +const addTrip = (event) => { + + event.preventDefault(); + + const tripData = readTripData(); + + reportStatus('Sending reservation data...'); + + axios.post(URL, tripData) + .then((response) => { + reportStatus(`Successfully added a new tripNew with ID ${response.data.id}!`); + clearTripData(); + }) + .catch((error) => { + if (error.response.data && error.response.data.errors) { + reportStatus( + `Encountered an error: ${error.message}`, + error.response.data.errors + ); + } else { + reportStatus(`Encountered an error: ${error.message}`); + } + }); + +}; + +$(document).ready(() => { + $('#load').click(loadTrips); + + $('#continent').change(function(){ + let selectedVal = $(this).find(':selected').val(); + loadTripsByContinent(selectedVal); + + }); + + + $('#trip-list').on('click','li',function(event) { + const idSelected = event.target.id; + listTripDetail(idSelected); + }); + + $('#tripReserve').on('submit','#trip-form',makeReservation); + + $('#tripNew').on('submit','#new-form',addTrip); + +});