diff --git a/index.css b/index.css new file mode 100644 index 00000000..b4ba1c7d --- /dev/null +++ b/index.css @@ -0,0 +1,4 @@ +body { + background-color: lavender; + color: slateblue +} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 00000000..daf014d5 --- /dev/null +++ b/index.html @@ -0,0 +1,30 @@ + + + + + TREEEEEEK + + + + +
+
+
+

List-o-Trips (not copy-pasta'd)

+ + + + +
+ +
+ + + + + + + + + + \ No newline at end of file diff --git a/index.js b/index.js new file mode 100644 index 00000000..4a946a51 --- /dev/null +++ b/index.js @@ -0,0 +1,143 @@ +const url = 'https://trektravel.herokuapp.com/' + +const reportStatus = (message) => { + $('#status-message').html(message); +}; + + +const makeFormInputBox = function makeFormInputBox(name) { + let inputField = + `
+
+ ${name} +
+ +
`; + return inputField; +} + +const registerHTML = function registerHTML(input1, input2) { + let inputField = + `
+

register for trip

+
` + + makeFormInputBox(input1) + + makeFormInputBox(input2) + + ` +
+
`; + return inputField; +} + + +const reportApiError = (error) => { +console.log("encountered error when posting", error); + +let errorHtml = `

${error.message}

'; +reportStatus(errorHtml); +} +const readRegForm = () => { + let name = $("#trip-form input[name=name]").val(); + let email = $("#trip-form input[name=email]").val(); + console.log(name); + console.log(email); + // is there a way to do the thing below running the jQuery in the K/V pairing? + return { + 'name': name, + 'email': email + }; +} + +const addRegistration = (id) => { + let postUrl = url + id + '/reservations'; + console.log(postUrl) + const tripData = readRegForm(); + + reportStatus("About to post registration data..."); + console.log("lets check to be sure we're doing this right", tripData); + + axios.post(postUrl, tripData) + .then((response) => { + console.log("successfully posted registration data", response); + + const regId = response.data.id; + reportStatus(`Successfully created a new registration with ID ${regId}`); + }) + .catch((error) => { + reportApiError(error); + }) +}; + +const loadTrips = () => { + reportStatus('Loading trips...'); + + const tripList = $('#trip-list'); + tripList.empty(); + + let getTrips = url + 'trips'; + axios.get(getTrips) + .then((response) => { + reportStatus(`Successfully loaded ${response.data.length} trips`); + + response.data.forEach((trip) => { + let holderName = `

  • ${trip.name}

    `; + let id = `load_info_${trip.id}`; + holderName += + `
    +
    `; + tripList.append(holderName); + + $(`#` + id).click(() => { + // really should probably do a second api call + const deets = ` +

    trip id: ${trip.id}

    +
    trip name: ${trip.name}
    +
    continent: ${trip.continent}
    +
    duration: ${trip.weeks}
    +
    cost: ${trip.cost}
    ` + + registerHTML("name", "email"); + $(`.` + id).html(deets); + $(`#` + id).remove(); + $('#trip-form').submit((event) => { + event.preventDefault(); + addRegistration(trip.id); + }); + }) + }); + }) + .catch((error) => { + reportStatus(`Encountered an error while loading trips: ${error.message}`); + console.log(error); + }); + }; + + + $(document).ready(() => { + $('#load').click(loadTrips); + + + + + console.log(makeFormInputBox("name")); + }); + +// lots of credit goes to Dan's Aweosme live coding + + +// Notes from stuff that I got stuck on +// this just runs alert non stop CAUSE I CALLED ALERT +// $(`#` + id).click(alert(id)); +// when you have something in parans, the things in parens RUNS RIGHT AWAY +// CALLED A CONTINUATION OR A THUNK \ No newline at end of file