From 1518298dfe073793133e527768a76a377f98316e Mon Sep 17 00:00:00 2001 From: Jessie Zhang Date: Tue, 20 Nov 2018 16:03:44 -0800 Subject: [PATCH 1/2] finished the list trips --- index.css | 0 index.html | 26 ++++++++++++++++++++++++++ index.js | 31 +++++++++++++++++++++++++++++++ 3 files changed, 57 insertions(+) create mode 100644 index.css create mode 100644 index.html create mode 100644 index.js diff --git a/index.css b/index.css new file mode 100644 index 00000000..e69de29b diff --git a/index.html b/index.html new file mode 100644 index 00000000..a1d485fa --- /dev/null +++ b/index.html @@ -0,0 +1,26 @@ + + + + + Trek + + + + + + + +
+ +
+
+ + +
    +
    + + +
    + + diff --git a/index.js b/index.js new file mode 100644 index 00000000..e5c365ce --- /dev/null +++ b/index.js @@ -0,0 +1,31 @@ +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`); + response.data.forEach((trip) => { + tripList.append(`
  • ${trip.name}
    • `); + }); + }) + .catch((error) => { + reportStatus(`Encountered an error while loading trips: ${error.message}`); + console.log(error); + }); +}; + + +$(document).ready(() => { + $('#load').click(loadTrips); + +}); From 8d1be5123905d24b8cee44208e2b75091ac806cb Mon Sep 17 00:00:00 2001 From: Jessie Zhang Date: Mon, 26 Nov 2018 07:01:18 -0800 Subject: [PATCH 2/2] finished wave3 & a few optional --- index.css | 56 ++++++++++++ index.html | 27 +++++- index.js | 246 ++++++++++++++++++++++++++++++++++++++++++++++++++++- 3 files changed, 322 insertions(+), 7 deletions(-) diff --git a/index.css b/index.css index e69de29b..18347661 100644 --- a/index.css +++ 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 index a1d485fa..27e829f1 100644 --- a/index.html +++ b/index.html @@ -3,6 +3,7 @@ Trek + @@ -11,16 +12,34 @@ -
    + +
    - +
    + + -
      -
      +
      +
        +
        + + + +
        +
        +
        diff --git a/index.js b/index.js index e5c365ce..4d9b0d22 100644 --- a/index.js +++ b/index.js @@ -10,22 +10,262 @@ const loadTrips = () => { 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) => { - tripList.append(`
      • ${trip.name}
        • `); + const idName = `${trip['id']}`; + tripList.append(`
      • ${trip['name']}
        • `); + }); }) .catch((error) => { reportStatus(`Encountered an error while loading trips: ${error.message}`); - console.log(error); + + }); + +}; + +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); + });