From ae6094f933e392139a45a961a5bdd53759004a20 Mon Sep 17 00:00:00 2001 From: Kay Date: Wed, 21 Nov 2018 10:43:02 -0800 Subject: [PATCH 1/7] wave 1 finished wave 2 started --- index.css | 8 ++++ index.html | 62 +++++++++++++++++++++++++++++ index.js | 115 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 185 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..17e6ca79 --- /dev/null +++ b/index.css @@ -0,0 +1,8 @@ +body { + font-family: sans-serif; +} + +main { + display: grid; + grid-template-columns: 1fr 1fr; +} diff --git a/index.html b/index.html new file mode 100644 index 00000000..7e7ab8f8 --- /dev/null +++ b/index.html @@ -0,0 +1,62 @@ + + + + + Trips with axios + + + + + + + + + + + + + + + + + + + +
+ +
+
+

List of Trips

+ +
    +
    + +
    +

    Trip Details

    +
    + +
    +

    Add a new trip

    +
    +
    + + +
    + +
    + + +
    + +
    + + +
    + + +
    +
    +
    + + diff --git a/index.js b/index.js new file mode 100644 index 00000000..4fee3702 --- /dev/null +++ b/index.js @@ -0,0 +1,115 @@ +const URL = 'https://trektravel.herokuapp.com/trips'; +// & + .serialize() tac on to the end + +// +// Status Management +// +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`); + response.data.forEach((trip) => { + tripList.append(`
  • ${trip.name}
    • `); + + // $('#trip_link').click(() => { + // $('.trip_detail').load("https://trektravel.herokuapp.com/trips"); + // }); + + }); + }) + .catch((error) => { + reportStatus(`Encountered an error while loading pets: ${error.message}`); + console.log(error); + }); +}; + +// +// Creating Pets +// +const readFormData = () => { + const parsedFormData = {}; + + const inputs = ["name", "age", "owner"]; + + inputs.forEach((curInput) => { + const curData = $(`#pet-form input[name="${curInput}"]`).val(); + parsedFormData[curInput] = curData ? curData : undefined; + }); + + // const nameFromForm = $(`#pet-form input[name="name"]`).val(); + // parsedFormData['name'] = nameFromForm ? nameFromForm : undefined; + // + // const ageFromForm = $(`#pet-form input[name="age"]`).val(); + // parsedFormData['age'] = ageFromForm ? ageFromForm : undefined; + // + // const ownerFromForm = $(`#pet-form input[name="owner"]`).val(); + // parsedFormData['owner'] = ownerFromForm ? ownerFromForm : undefined; + + return parsedFormData; +}; + +const clearForm = () => { + $(`#pet-form input[name="name"]`).val(''); + $(`#pet-form input[name="age"]`).val(''); + $(`#pet-form input[name="owner"]`).val(''); +} + +const createPet = (event) => { + // Note that createPet is a handler for a `submit` + // event, which means we need to call `preventDefault` + // to avoid a page reload + event.preventDefault(); + + const petData = readFormData(); + console.log(petData); + + reportStatus('Sending pet data...'); + + axios.post(URL, petData) + .then((response) => { + reportStatus(`Successfully added a pet with ID ${response.data.id}!`); + 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}`); + } + }); +}; + +// +// OK GO!!!!! +// +$(document).ready(() => { + $('#load').click(loadTrips); + $('#pet-form').submit(createPet); +}); From 5e3a31adbcc7f3adbdd22fc8f02f724120ade46c Mon Sep 17 00:00:00 2001 From: Kay Date: Sat, 24 Nov 2018 11:20:04 -0800 Subject: [PATCH 2/7] working on nesting trip details in load trips --- index.html | 6 ++-- index.js | 97 +++++++++++++++++++++++++++++++++++++----------------- 2 files changed, 71 insertions(+), 32 deletions(-) diff --git a/index.html b/index.html index 7e7ab8f8..b52958c4 100644 --- a/index.html +++ b/index.html @@ -32,8 +32,10 @@

    List of Trips

    -
    -

    Trip Details

    +
    +
    diff --git a/index.js b/index.js index 4fee3702..3ce1ab45 100644 --- a/index.js +++ b/index.js @@ -1,5 +1,5 @@ const URL = 'https://trektravel.herokuapp.com/trips'; -// & + .serialize() tac on to the end +// & + .serialize() tac on to the end // // Status Management @@ -28,24 +28,57 @@ const loadTrips = () => { const tripList = $('#trip-list'); tripList.empty(); + const tripDetails = $('.trip_details'); + tripDetails.empty(); + axios.get(URL) - .then((response) => { - reportStatus(`Successfully loaded ${response.data.length} trips`); - response.data.forEach((trip) => { - tripList.append(`
  • ${trip.name}
    • `); - - // $('#trip_link').click(() => { - // $('.trip_detail').load("https://trektravel.herokuapp.com/trips"); - // }); - - }); - }) - .catch((error) => { - reportStatus(`Encountered an error while loading pets: ${error.message}`); - console.log(error); + .then((response) => { + reportStatus(`Successfully loaded ${response.data.length} trips`); + response.data.forEach((trip) => { + tripList.append(`
  • ${trip.name}
    • `); + + const detailsURL = `https://trektravel.herokuapp.com/trips/${trip.id}`; + + const loadTripDetails = () => { + reportStatus('Loading trip details...'); + + console.log(detailsURL); + + axios.get(detailsURL) + .then((response) => { + reportStatus(`Successfully loaded trip details`); + response.data[0]; //this should be single trip details + console.log(response.data); + tripDetails.append(``) + }); + + // console.log(trip.name); + // const name = trip.name; + // const continent = trip.continent; + // const cost = trip.cost; + // const category = trip.category; + // const weeks = trip.weeks; + }; + return loadTripDetails; }); + }) + .catch((error) => { + reportStatus(`Encountered an error while loading trips: ${error.message}`); + console.log(error); + }); + + //when i click on a single trip name + // do a axios.get on the botched URL + + }; +//

    Trip Details

    +// +//
      + + + // // Creating Pets // @@ -89,27 +122,31 @@ const createPet = (event) => { reportStatus('Sending pet data...'); axios.post(URL, petData) - .then((response) => { - reportStatus(`Successfully added a pet with ID ${response.data.id}!`); - 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}`); - } - }); + .then((response) => { + reportStatus(`Successfully added a pet with ID ${response.data.id}!`); + 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}`); + } + }); }; // // OK GO!!!!! // + + $(document).ready(() => { $('#load').click(loadTrips); + const loadTripDetails = loadTrips + $('.trip-details').click(loadTripDetails); $('#pet-form').submit(createPet); }); From 700f10eaa28f05d1aa0ff701c264afce0282265e Mon Sep 17 00:00:00 2001 From: Kay Date: Sat, 24 Nov 2018 14:42:12 -0800 Subject: [PATCH 3/7] nested trip details in load trips function -- displaying trip details on same page --- index.html | 4 ++-- index.js | 45 ++++++++++++++++++++++++++------------------- 2 files changed, 28 insertions(+), 21 deletions(-) diff --git a/index.html b/index.html index b52958c4..e667ba95 100644 --- a/index.html +++ b/index.html @@ -32,11 +32,11 @@

      List of Trips

        -
        +
          -
        +

        Add a new trip

        diff --git a/index.js b/index.js index 3ce1ab45..b0a2cf11 100644 --- a/index.js +++ b/index.js @@ -28,38 +28,45 @@ const loadTrips = () => { const tripList = $('#trip-list'); tripList.empty(); - const tripDetails = $('.trip_details'); - tripDetails.empty(); + axios.get(URL) .then((response) => { reportStatus(`Successfully loaded ${response.data.length} trips`); response.data.forEach((trip) => { - tripList.append(`
      • ${trip.name}
        • `); - - const detailsURL = `https://trektravel.herokuapp.com/trips/${trip.id}`; const loadTripDetails = () => { - reportStatus('Loading trip details...'); + const tripDetails = $('.trip-details'); + tripDetails.empty(); + const detailsURL = `https://trektravel.herokuapp.com/trips/${trip.id}`; - console.log(detailsURL); + reportStatus('Loading trip details...'); axios.get(detailsURL) .then((response) => { reportStatus(`Successfully loaded trip details`); - response.data[0]; //this should be single trip details - console.log(response.data); - tripDetails.append(``) + const name = response.data.name; + const continent = response.data.continent; + const category = response.data.category; + const weeks = response.data.weeks; + const cost = response.data.cost; + const about = response.data.about; + + tripDetails.append(`

        Trip Details

        +
      • ${name}
        • +
      • ${continent}
        • +
      • ${category}
        • +
      • ${weeks}
        • +
      • ${cost}
        • +
      • ${about}
        • `) }); - // console.log(trip.name); - // const name = trip.name; - // const continent = trip.continent; - // const cost = trip.cost; - // const category = trip.category; - // const weeks = trip.weeks; + }; - return loadTripDetails; + + tripList.append(`
      • ${trip.name}
        • `); + $(`.trip-details-${trip.id}`).click(loadTripDetails); + //return loadTripDetails; }); }) .catch((error) => { @@ -146,7 +153,7 @@ const createPet = (event) => { $(document).ready(() => { $('#load').click(loadTrips); - const loadTripDetails = loadTrips - $('.trip-details').click(loadTripDetails); + // const loadTripDetails = loadTrips + //$('.trip-details').click(loadTripDetails); $('#pet-form').submit(createPet); }); From db9ebc41b07b0973ce3a35328fd0d876bf87d15b Mon Sep 17 00:00:00 2001 From: Kay Date: Sat, 24 Nov 2018 15:53:44 -0800 Subject: [PATCH 4/7] adding dynamic reservation form still not complete --- index.html | 32 ++++++++++++------------ index.js | 71 ++++++++++++++++++++++++++++++++++++------------------ 2 files changed, 64 insertions(+), 39 deletions(-) diff --git a/index.html b/index.html index e667ba95..c34f26ea 100644 --- a/index.html +++ b/index.html @@ -32,33 +32,33 @@

        List of Trips

          -
            - -
          +
          +
            +
            + -
            -

            Add a new trip

            -
            +
            +
            + diff --git a/index.js b/index.js index b0a2cf11..6a52e23f 100644 --- a/index.js +++ b/index.js @@ -38,6 +38,9 @@ const loadTrips = () => { const loadTripDetails = () => { const tripDetails = $('.trip-details'); tripDetails.empty(); + const reserveTrip = $('.reserve-trip'); //added this + reserveTrip.empty(); //added this + const detailsURL = `https://trektravel.herokuapp.com/trips/${trip.id}`; reportStatus('Loading trip details...'); @@ -59,9 +62,36 @@ const loadTrips = () => {
          • ${weeks}
          • ${cost}
          • ${about}
            • `) - }); + reserveTrip.append(` +

            Reserve Trip

            + +
            + + + + +
            + +
            + + +
            + +
            + + +
            + +
            + + +
            + + +
            `); + }); }; tripList.append(`
          • ${trip.name}
            • `); @@ -73,29 +103,20 @@ const loadTrips = () => { reportStatus(`Encountered an error while loading trips: ${error.message}`); console.log(error); }); - - //when i click on a single trip name - // do a axios.get on the botched URL - - }; -//

            Trip Details

            -// -//
              - // -// Creating Pets +// Creating Reservation // const readFormData = () => { const parsedFormData = {}; - const inputs = ["name", "age", "owner"]; + const inputs = ["customer-name", "email", "name", "category", "cost", "weeks", "continent"]; inputs.forEach((curInput) => { - const curData = $(`#pet-form input[name="${curInput}"]`).val(); + const curData = $(`#reservation-form input[name="${curInput}"]`).val(); parsedFormData[curInput] = curData ? curData : undefined; }); @@ -112,25 +133,29 @@ const readFormData = () => { }; const clearForm = () => { - $(`#pet-form input[name="name"]`).val(''); - $(`#pet-form input[name="age"]`).val(''); - $(`#pet-form input[name="owner"]`).val(''); + $(`#reservation-form input[name="customer-name"]`).val(''); + $(`#reservation-form input[name="email"]`).val(''); + $(`#reservation-form input[name="name"]`).val(''); //name is tripname + $(`#reservation-form input[name="continent"]`).val(''); + $(`#reservation-form input[name="cost"]`).val(''); + $(`#reservation-form input[name="weeks"]`).val(''); + $(`#reservation-form input[name="category"]`).val(''); } -const createPet = (event) => { +const createReservation = (event) => { // Note that createPet is a handler for a `submit` // event, which means we need to call `preventDefault` // to avoid a page reload event.preventDefault(); - const petData = readFormData(); - console.log(petData); + const reservationData = readFormData(); + console.log(reservationData); - reportStatus('Sending pet data...'); + reportStatus('Sending reservation data...'); - axios.post(URL, petData) + axios.post(URL, reservationData) .then((response) => { - reportStatus(`Successfully added a pet with ID ${response.data.id}!`); + reportStatus(`Successfully added a reservation with ID ${response.data.id}!`); clearForm(); }) .catch((error) => { @@ -155,5 +180,5 @@ $(document).ready(() => { $('#load').click(loadTrips); // const loadTripDetails = loadTrips //$('.trip-details').click(loadTripDetails); - $('#pet-form').submit(createPet); + $('#reservation-form').submit(createReservation); }); From e29088249685f4226cb603953511ceef69408777 Mon Sep 17 00:00:00 2001 From: Kay Date: Sat, 24 Nov 2018 20:19:26 -0800 Subject: [PATCH 5/7] fixed reserve trip form --- index.css | 8 ++++++++ index.html | 48 ++++++++++++++++++++++++++++-------------------- index.js | 48 +++++++++++++----------------------------------- 3 files changed, 49 insertions(+), 55 deletions(-) diff --git a/index.css b/index.css index 17e6ca79..3bdbe417 100644 --- a/index.css +++ b/index.css @@ -6,3 +6,11 @@ main { display: grid; grid-template-columns: 1fr 1fr; } + +.hidden { + display: none; +} + +/* .active { + display: block; +} */ diff --git a/index.html b/index.html index c34f26ea..49d8fdcc 100644 --- a/index.html +++ b/index.html @@ -37,26 +37,34 @@

              List of Trips

              -
              - +
              + +
              diff --git a/index.js b/index.js index 6a52e23f..5bcb697d 100644 --- a/index.js +++ b/index.js @@ -28,8 +28,6 @@ const loadTrips = () => { const tripList = $('#trip-list'); tripList.empty(); - - axios.get(URL) .then((response) => { reportStatus(`Successfully loaded ${response.data.length} trips`); @@ -38,8 +36,8 @@ const loadTrips = () => { const loadTripDetails = () => { const tripDetails = $('.trip-details'); tripDetails.empty(); - const reserveTrip = $('.reserve-trip'); //added this - reserveTrip.empty(); //added this + const reserveTrip = $('#reservation-form'); //added this + // reserveTrip.empty(); //added this const detailsURL = `https://trektravel.herokuapp.com/trips/${trip.id}`; @@ -61,36 +59,17 @@ const loadTrips = () => {
            • ${category}
            • ${weeks}
            • ${cost}
              • -
            • ${about}
              • `) - - reserveTrip.append(` -

              Reserve Trip

              -
              -
              - - - - -
              - -
              - - -
              - -
              - - -
              - -
              - - -
              - - -
              `); +
            • ${about}
              • `); + + $( "#reservation-form" ).removeClass( "hidden"); + reserveTrip.append( + $(`#reservation-form input[name="name"]`).val(`${name}`), + $(`#reservation-form input[name="category"]`).val(`${category}`), + $(`#reservation-form input[name="cost"]`).val(`${cost}`), + $(`#reservation-form input[name="continent"]`).val(`${continent}`), + $(`#reservation-form input[name="weeks"]`).val(`${weeks}`), + ); }); }; @@ -143,6 +122,7 @@ const clearForm = () => { } const createReservation = (event) => { + console.log("called createReservation with", event); // Note that createPet is a handler for a `submit` // event, which means we need to call `preventDefault` // to avoid a page reload @@ -178,7 +158,5 @@ const createReservation = (event) => { $(document).ready(() => { $('#load').click(loadTrips); - // const loadTripDetails = loadTrips - //$('.trip-details').click(loadTripDetails); $('#reservation-form').submit(createReservation); }); From a5b0e57780f73333da71933bef3e0a62c724ede4 Mon Sep 17 00:00:00 2001 From: Kay Date: Mon, 26 Nov 2018 16:56:32 -0800 Subject: [PATCH 6/7] fixed reservation form its working --- index.html | 18 ++++++++--------- index.js | 57 ++++++++++++++++++++++++++++-------------------------- 2 files changed, 38 insertions(+), 37 deletions(-) diff --git a/index.html b/index.html index 49d8fdcc..b8d3637c 100644 --- a/index.html +++ b/index.html @@ -40,16 +40,10 @@

              List of Trips