From 59802ee32ab9f49338975f3ebf0636204dec49bd Mon Sep 17 00:00:00 2001 From: Leanne Rivera Date: Tue, 27 Nov 2018 12:54:03 -0800 Subject: [PATCH 1/2] form added --- index.css | 7 +++ index.html | 26 +++++++++++ index.js | 127 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 160 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..cec7894d --- /dev/null +++ b/index.css @@ -0,0 +1,7 @@ +.hidden { + display: none; +} + +article:hover { + cursor: pointer; /*for indicating that it can be clicked...*/ +} diff --git a/index.html b/index.html new file mode 100644 index 00000000..1e3c4fac --- /dev/null +++ b/index.html @@ -0,0 +1,26 @@ + + + + Go Trekking! + + + + + + +
+
+
+ +
+ +
+
+ + + + + + + diff --git a/index.js b/index.js new file mode 100644 index 00000000..a5d6d8f4 --- /dev/null +++ b/index.js @@ -0,0 +1,127 @@ +const URL = "https://trektravel.herokuapp.com/trips/" //travel trip API + +const reportStatus = (message) => { + $('#status-message').html(message); +}; + +const toggleMe = (id) => { //hide and show items + $(`article[id$=${id}] h3`).click(() => { //when article ending with id is clicked + $(`summary[id=trip-${id}]`).toggleClass("hidden"); //unhide loaded trip information + $(`form`).toggleClass("hidden"); //unhide form info + $(`article[id!=trip-info-${id}]`).toggleClass("hidden"); //hide trips that do not equal this article's id +}); +} + +const readFormData = () => { + const parsedFormData = {}; + + const nameFromForm = $(`#form[id^='form-'] input name='name'`).val(); + parsedFormData['name'] = nameFromForm ? nameFromForm : undefined; + + const emailFromForm = $(`#form[id^='form-'] input name='email'`).val(); + parsedFormData['email'] = emailFromForm ? emailFromForm : undefined; + + return parsedFormData; +}; + +const clearForm = () => { + $(`#form[id^='form-'] input name='name'`).val(''); + $(`#form[id^='form-'] input name='email'`).val(''); +} + +const submitReservation = (event) => { + event.preventDefault(); + const postURL = URL+'reservations'; + + const reserveData = readFormData(); + + axios.post(postURL, reserveData) + .then((response) => { + reportStatus(`Successfully submitted reservation ${response.data.id}!`); + clearForm(); + }) + .catch((error) => { + console.log(error.response); + 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 allTripView = () => { + let tripInfo = []; + const tripsSection = (data) => {return $(` +
+

${data.name}, ${data.continent}

+ + + +
+ `) + }; + + axios.get(URL) + .then((response) => { + tripInfo = response.data; + console.log(tripInfo); + tripInfo.forEach((trip) => { + $("#trip-info").append(tripsSection(trip)); + singleTripInfo(trip.id); + toggleMe(trip.id); + $('form').submit(submitReservation) + }); + }) + .catch((error) => { + reportStatus(`Encountered an error while loading trips: ${error.message}`); + console.log(error); + }); +} + +const singleTripInfo = (id) => { + let singleTrip = []; + const idURL = URL+id; + + const singleTripInfo = (data) => { return $(` + +

${data.about}

+ `)}; + + axios.get(idURL) + .then((response) => { + singleTrip = response.data; + $(`#trip-${id}`).append(singleTripInfo(singleTrip)); + }) + .catch((error) => { + reportStatus(`Encountered an error while loading trips: ${error.message}`); + console.log(error); + }); +}; + + +$(document).ready(() => { + $("#trip-view").click(allTripView); +}); + + + + + +// From 170cc2503d8ae31d75ee4a684b17accf3333b5f3 Mon Sep 17 00:00:00 2001 From: Leanne Rivera Date: Tue, 27 Nov 2018 16:43:36 -0800 Subject: [PATCH 2/2] can submit reservation data...but form will not clear... --- index.html | 4 ++ index.js | 110 +++++++++++++++++++++++++++++++++-------------------- 2 files changed, 73 insertions(+), 41 deletions(-) diff --git a/index.html b/index.html index 1e3c4fac..dfe4b62a 100644 --- a/index.html +++ b/index.html @@ -9,6 +9,10 @@
+

Trek

+
diff --git a/index.js b/index.js index a5d6d8f4..d50d5493 100644 --- a/index.js +++ b/index.js @@ -1,58 +1,75 @@ const URL = "https://trektravel.herokuapp.com/trips/" //travel trip API +// =======STATUS MESSAGES======== const reportStatus = (message) => { $('#status-message').html(message); }; +// =======HIDDEN TOGGLE========= const toggleMe = (id) => { //hide and show items $(`article[id$=${id}] h3`).click(() => { //when article ending with id is clicked $(`summary[id=trip-${id}]`).toggleClass("hidden"); //unhide loaded trip information $(`form`).toggleClass("hidden"); //unhide form info + clearForm() ; + $(`form`).submit( {"trip": id}, submitReservation); //FORM SUBMISSION FUNCTION, PASS ON DATA TO BE USED IN FORM, only submits per each trip $(`article[id!=trip-info-${id}]`).toggleClass("hidden"); //hide trips that do not equal this article's id }); } +// =======FORM DATA======== const readFormData = () => { const parsedFormData = {}; - const nameFromForm = $(`#form[id^='form-'] input name='name'`).val(); + const nameFromForm = $( `input[name='name']`).val(); parsedFormData['name'] = nameFromForm ? nameFromForm : undefined; + console.log(nameFromForm); - const emailFromForm = $(`#form[id^='form-'] input name='email'`).val(); + const emailFromForm = $(`input[name='email']`).val(); + console.log(emailFromForm); parsedFormData['email'] = emailFromForm ? emailFromForm : undefined; + console.log() + console.log(parsedFormData); return parsedFormData; + }; -const clearForm = () => { - $(`#form[id^='form-'] input name='name'`).val(''); - $(`#form[id^='form-'] input name='email'`).val(''); +const clearForm = () => { //clear out form after submission + $('form')[0].reset(); } -const submitReservation = (event) => { - event.preventDefault(); - const postURL = URL+'reservations'; - - const reserveData = readFormData(); - - axios.post(postURL, reserveData) - .then((response) => { - reportStatus(`Successfully submitted reservation ${response.data.id}!`); - clearForm(); - }) - .catch((error) => { - console.log(error.response); - 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}`); - } - }); -}; +// =======FORM SUBMISSIONS======= + const submitReservation = (event) => { + const tripID = event.data.trip + event.preventDefault(); //prevents reload + const reserveData = readFormData(); + const sendData = { + 'name': reserveData["name"], + 'email': reserveData["email"] + }; + console.log(tripID); + + const postURL = URL+tripID+"/reservations"; + + axios.post(postURL, sendData) + .then((response) => { + clearForm; + reportStatus(`Successfully submitted reservation ${response.data.id}!`); + }) + .catch((error) => { + console.log(error.response); + 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}`); + } + }); + } +// =======TRIPS LIST VIEW======== const allTripView = () => { let tripInfo = []; const tripsSection = (data) => {return $(` @@ -61,14 +78,6 @@ const allTripView = () => { - - `) }; @@ -79,9 +88,8 @@ const allTripView = () => { console.log(tripInfo); tripInfo.forEach((trip) => { $("#trip-info").append(tripsSection(trip)); - singleTripInfo(trip.id); - toggleMe(trip.id); - $('form').submit(submitReservation) + singleTripInfo(trip.id); //DOWNLOAD TRIP INFORMATION + toggleMe(trip.id); //TOGGLE FUNCTION WHEN ARTICLE CLICKED }); }) .catch((error) => { @@ -90,6 +98,22 @@ const allTripView = () => { }); } +// ========CREATE FORM =============== +const createForm = () => { + + return $(` + + `) +} + +// ==========SINGLE TRIP INFO========= const singleTripInfo = (id) => { let singleTrip = []; const idURL = URL+id; @@ -107,7 +131,7 @@ const singleTripInfo = (id) => { axios.get(idURL) .then((response) => { singleTrip = response.data; - $(`#trip-${id}`).append(singleTripInfo(singleTrip)); + $(`#trip-${id}`).append(singleTripInfo(singleTrip)); // APPEND TO SUMMARY WITH TRIP ID }) .catch((error) => { reportStatus(`Encountered an error while loading trips: ${error.message}`); @@ -117,7 +141,11 @@ const singleTripInfo = (id) => { $(document).ready(() => { - $("#trip-view").click(allTripView); + $("#trip-view").click( () => { + allTripView(); + $("#trip-view").hide(); + }); + $('main').append(createForm); //only one form for everyone });