From cc3d8d9166156dd7185fce8e585c1b67ca5727d7 Mon Sep 17 00:00:00 2001 From: Amy Wyatt Date: Fri, 31 May 2019 15:54:09 -0700 Subject: [PATCH 1/8] initial HTML setup and start for list trips --- index.html | 25 +++++++++++++++++++++++++ index.js | 25 +++++++++++++++++++++++++ package-lock.json | 3 +++ styles.css | 0 4 files changed, 53 insertions(+) create mode 100644 index.html create mode 100644 index.js create mode 100644 package-lock.json create mode 100644 styles.css diff --git a/index.html b/index.html new file mode 100644 index 00000000..5b9c5f67 --- /dev/null +++ b/index.html @@ -0,0 +1,25 @@ + + + + Trekking + + + + + + + + + +
+ +
+ + + + + + + + + diff --git a/index.js b/index.js new file mode 100644 index 00000000..c3360ed7 --- /dev/null +++ b/index.js @@ -0,0 +1,25 @@ +const URL = 'https://trektravel.herokuapp.com/trips'; + +const reportStatus = (message) => { + $('#status-message').html(message); +}; + +const listTrips = () => { + 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 pets: ${error.message}`); + console.log(error); + }); +}; + diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 00000000..48e341a0 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,3 @@ +{ + "lockfileVersion": 1 +} diff --git a/styles.css b/styles.css new file mode 100644 index 00000000..e69de29b From e61355a8d57f78cd2bbaf3590c6c5465abc78d06 Mon Sep 17 00:00:00 2001 From: Amy Wyatt Date: Fri, 31 May 2019 19:02:58 -0700 Subject: [PATCH 2/8] trips arer listing --- index.html | 18 ++++++++++-------- index.js | 3 +++ 2 files changed, 13 insertions(+), 8 deletions(-) diff --git a/index.html b/index.html index 5b9c5f67..837598af 100644 --- a/index.html +++ b/index.html @@ -4,22 +4,24 @@ Trekking - + -
    - -
    +
    + +
    +
    +

    All Trips

    + +
      +
      +
      - - - - diff --git a/index.js b/index.js index c3360ed7..340abbe9 100644 --- a/index.js +++ b/index.js @@ -23,3 +23,6 @@ const listTrips = () => { }); }; +$(document).ready(() => { + $('#load').click(listTrips); +}); From e476031d74fd10d6fb5948575d7027a3e322dd4f Mon Sep 17 00:00:00 2001 From: Amy Wyatt Date: Sun, 2 Jun 2019 14:28:38 -0700 Subject: [PATCH 3/8] makes trip details for specific trip show, needs to be relative trip --- index.html | 3 +++ index.js | 28 ++++++++++++++++++++++++++++ 2 files changed, 31 insertions(+) diff --git a/index.html b/index.html index 837598af..5f344958 100644 --- a/index.html +++ b/index.html @@ -19,6 +19,9 @@

      All Trips

        +
        +
          +
          diff --git a/index.js b/index.js index 340abbe9..7e2d9186 100644 --- a/index.js +++ b/index.js @@ -1,15 +1,43 @@ const URL = 'https://trektravel.herokuapp.com/trips'; +const TRIP_URL = 'https://trektravel.herokuapp.com/trips/71'; const reportStatus = (message) => { $('#status-message').html(message); }; +const showTripDetails = (event) => { + const tripDetails = $('#trip-details'); + tripDetails.empty(); + + event.preventDefault(); + + // eslint-disable-next-line no-undef + axios.get(TRIP_URL) + .then((response) => { + reportStatus(`Successfully loaded details for ${response.data.length} trip`); + tripDetails.append(`
        • Trip Name: ${response.data.name}
          • `); + tripDetails.append(`
        • Continent: ${response.data.continent}
          • `); + tripDetails.append(`
        • About: ${response.data.about}
          • `); + tripDetails.append(`
        • Category: ${response.data.category}
          • `); + tripDetails.append(`
        • Duration: ${response.data.weeks} weeks
          • `); + tripDetails.append(`
        • Cost: ${response.data.cost}
          • `); + }) + .catch((error) => { + reportStatus(`Encountered an error while loading trip: ${error.message}`); + console.log(error); + }); +}; + const listTrips = () => { reportStatus('Loading trips...'); const tripList = $('#trip-list'); tripList.empty(); + tripList.append(`
        • Test Trip
          • `); + + + // eslint-disable-next-line no-undef axios.get(URL) .then((response) => { reportStatus(`Successfully loaded ${response.data.length} trips`); From 4796a48393317ccaf276b178739e063571702755 Mon Sep 17 00:00:00 2001 From: Amy Wyatt Date: Sun, 2 Jun 2019 15:02:35 -0700 Subject: [PATCH 4/8] creating link on each trip name --- index.js | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/index.js b/index.js index 7e2d9186..ee6e4ca9 100644 --- a/index.js +++ b/index.js @@ -14,7 +14,7 @@ const showTripDetails = (event) => { // eslint-disable-next-line no-undef axios.get(TRIP_URL) .then((response) => { - reportStatus(`Successfully loaded details for ${response.data.length} trip`); + reportStatus(`Successfully loaded details for ${response.data.name} trip`); tripDetails.append(`
        • Trip Name: ${response.data.name}
          • `); tripDetails.append(`
        • Continent: ${response.data.continent}
          • `); tripDetails.append(`
        • About: ${response.data.about}
          • `); @@ -34,15 +34,12 @@ const listTrips = () => { const tripList = $('#trip-list'); tripList.empty(); - tripList.append(`
        • Test Trip
          • `); - - // eslint-disable-next-line no-undef axios.get(URL) .then((response) => { reportStatus(`Successfully loaded ${response.data.length} trips`); response.data.forEach((trip) => { - tripList.append(`
        • ${trip.name}
          • `); + tripList.append(`
        • ${trip.name}
          • `); }); }) .catch((error) => { From 52411a3461233f8964a0dee9a489ba0bc0129931 Mon Sep 17 00:00:00 2001 From: Amy Wyatt Date: Sun, 2 Jun 2019 15:20:25 -0700 Subject: [PATCH 5/8] trip links to respective trip data --- index.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/index.js b/index.js index ee6e4ca9..9b6b7525 100644 --- a/index.js +++ b/index.js @@ -1,18 +1,17 @@ const URL = 'https://trektravel.herokuapp.com/trips'; -const TRIP_URL = 'https://trektravel.herokuapp.com/trips/71'; const reportStatus = (message) => { $('#status-message').html(message); }; -const showTripDetails = (event) => { +const showTripDetails = (event, tripId) => { const tripDetails = $('#trip-details'); tripDetails.empty(); event.preventDefault(); // eslint-disable-next-line no-undef - axios.get(TRIP_URL) + axios.get(`${URL}/${tripId}`) .then((response) => { reportStatus(`Successfully loaded details for ${response.data.name} trip`); tripDetails.append(`
        • Trip Name: ${response.data.name}
          • `); @@ -39,7 +38,7 @@ const listTrips = () => { .then((response) => { reportStatus(`Successfully loaded ${response.data.length} trips`); response.data.forEach((trip) => { - tripList.append(`
        • ${trip.name}
          • `); + tripList.append(`
        • ${trip.name}
          • `); }); }) .catch((error) => { From 2c6c0de0dfd196ead9ded2f0a99777e5ef61d6f6 Mon Sep 17 00:00:00 2001 From: Amy Wyatt Date: Sun, 2 Jun 2019 17:03:02 -0700 Subject: [PATCH 6/8] reservation form created --- index.html | 17 +++++++++++++++++ index.js | 45 +++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 62 insertions(+) diff --git a/index.html b/index.html index 5f344958..62e18839 100644 --- a/index.html +++ b/index.html @@ -22,6 +22,23 @@

          All Trips

            + +
            +

            Add a new reservation

            +
            +
            + + +
            + +
            + + +
            + + +
            +
            diff --git a/index.js b/index.js index 9b6b7525..1f23f4bb 100644 --- a/index.js +++ b/index.js @@ -47,6 +47,51 @@ const listTrips = () => { }); }; +// START HERE +const readFormData = () => { + const parsedFormData = {}; + + const nameFromForm = $(`#reservation-form input[name="name"]`).val(); + parsedFormData['name'] = nameFromForm ? nameFromForm : undefined; + + const emailFromForm = $(`#reservation-form input[name="email"]`).val(); + parsedFormData['email'] = emailFromForm ? emailFromForm : undefined; + + return parsedFormData; + }; + + const clearForm = () => { + $(`#reservation-form input[name="name"]`).val(''); + $(`#reservation-form input[name="email"]`).val(''); + } + + const createReservation = (event, tripId) => { + event.preventDefault(); + + const reservationData = readFormData(); + console.log(reservationData); + + reportStatus('Sending reservation data...'); + + axios.post(`${URL}/${tripId}/reservations`, reservationData) + .then((response) => { + reportStatus(`Successfully added a reservation 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}`); + } + }); + }; + $(document).ready(() => { $('#load').click(listTrips); + $('#reservation-form').submit(createReservation); }); From 135b4d04600c32b2ffb9af2c994c45a924144844 Mon Sep 17 00:00:00 2001 From: Amy Wyatt Date: Sun, 2 Jun 2019 22:21:31 -0700 Subject: [PATCH 7/8] reservation submission --- index.html | 2 +- index.js | 112 ++++++++++++++++++++++++++++++----------------------- styles.css | 7 ++++ 3 files changed, 72 insertions(+), 49 deletions(-) diff --git a/index.html b/index.html index 62e18839..134e519b 100644 --- a/index.html +++ b/index.html @@ -23,7 +23,7 @@

            All Trips

              -
              +

              Add a new reservation

              diff --git a/index.js b/index.js index 1f23f4bb..dde9ed00 100644 --- a/index.js +++ b/index.js @@ -4,27 +4,88 @@ const reportStatus = (message) => { $('#status-message').html(message); }; +const reportError = (message, errors) => { + let content = `

              ${message}

              ` + content += "
                "; + for (const field in errors) { + for (const problem of errors[field]) { + content += `
              • ${field}: ${problem}
                • `; + } + } + content += "
              "; + reportStatus(content); +}; + const showTripDetails = (event, tripId) => { const tripDetails = $('#trip-details'); tripDetails.empty(); event.preventDefault(); - // eslint-disable-next-line no-undef + // trip details axios.get(`${URL}/${tripId}`) .then((response) => { reportStatus(`Successfully loaded details for ${response.data.name} trip`); - tripDetails.append(`
            • Trip Name: ${response.data.name}
              • `); + tripDetails.append(`
            • Trip ID: ${response.data.id}
              • `); + tripDetails.append(`
            • Name: ${response.data.name}
              • `); tripDetails.append(`
            • Continent: ${response.data.continent}
              • `); tripDetails.append(`
            • About: ${response.data.about}
              • `); tripDetails.append(`
            • Category: ${response.data.category}
              • `); tripDetails.append(`
            • Duration: ${response.data.weeks} weeks
              • `); tripDetails.append(`
            • Cost: ${response.data.cost}
              • `); + + $('#new-reservation').removeClass().addClass('show-reservation'); }) .catch((error) => { reportStatus(`Encountered an error while loading trip: ${error.message}`); console.log(error); }); + + // reservation form + const readFormData = () => { + const parsedFormData = {}; + + const nameFromForm = $(`#reservation-form input[name="name"]`).val(); + parsedFormData.name = nameFromForm ? nameFromForm : undefined; + + const emailFromForm = $(`#reservation-form input[name="email"]`).val(); + parsedFormData.email = emailFromForm ? emailFromForm : undefined; + + return parsedFormData; + }; + + const clearForm = () => { + $(`#reservation-form input[name="name"]`).val(''); + $(`#reservation-form input[name="email"]`).val(''); + } + + // create new reservation + const createReservation = (event) => { + event.preventDefault(); + + const reservationData = readFormData(); + console.log(reservationData); + + reportStatus('Sending reservation data...'); + + axios.post(`${URL}/${tripId}/reservations`, reservationData) + .then((response) => { + reportStatus(`Successfully added a reservation for ${response.data.name}!`); + 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}`); + } + }); + }; + $('#reservation-form').submit(createReservation); }; const listTrips = () => { @@ -33,7 +94,7 @@ const listTrips = () => { const tripList = $('#trip-list'); tripList.empty(); - // eslint-disable-next-line no-undef + // list all trips axios.get(URL) .then((response) => { reportStatus(`Successfully loaded ${response.data.length} trips`); @@ -47,51 +108,6 @@ const listTrips = () => { }); }; -// START HERE -const readFormData = () => { - const parsedFormData = {}; - - const nameFromForm = $(`#reservation-form input[name="name"]`).val(); - parsedFormData['name'] = nameFromForm ? nameFromForm : undefined; - - const emailFromForm = $(`#reservation-form input[name="email"]`).val(); - parsedFormData['email'] = emailFromForm ? emailFromForm : undefined; - - return parsedFormData; - }; - - const clearForm = () => { - $(`#reservation-form input[name="name"]`).val(''); - $(`#reservation-form input[name="email"]`).val(''); - } - - const createReservation = (event, tripId) => { - event.preventDefault(); - - const reservationData = readFormData(); - console.log(reservationData); - - reportStatus('Sending reservation data...'); - - axios.post(`${URL}/${tripId}/reservations`, reservationData) - .then((response) => { - reportStatus(`Successfully added a reservation 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}`); - } - }); - }; - $(document).ready(() => { $('#load').click(listTrips); - $('#reservation-form').submit(createReservation); }); diff --git a/styles.css b/styles.css index e69de29b..e6041b64 100644 --- a/styles.css +++ b/styles.css @@ -0,0 +1,7 @@ +.hide-reservation { + display: none; +} + +.show-reservation { + display: block; +} From 4253a5f8b47ab8dc011d16be46a09d2390f06ac7 Mon Sep 17 00:00:00 2001 From: Amy Wyatt Date: Fri, 7 Jun 2019 23:58:31 -0700 Subject: [PATCH 8/8] styling --- index.html | 49 +++++++++++++++++++++++++++---------------------- index.js | 6 +++++- styles.css | 29 +++++++++++++++++++++++++++++ 3 files changed, 61 insertions(+), 23 deletions(-) diff --git a/index.html b/index.html index 134e519b..a07196c1 100644 --- a/index.html +++ b/index.html @@ -8,37 +8,42 @@ +
              -
              -

              All Trips

              - +
              +

              Trek

              +
                -
                -
                  -
                  -
                  -

                  Add a new reservation

                  - -
                  - - -
                  - -
                  - - -
                  - - - -
                  +
                  +
                  +

                  Trip Details

                  +
                    +
                    + +
                    +

                    Add reservation to this trip

                    +
                    +
                    + + +
                    + +
                    + + +
                    + + +
                    +
                    +
                    diff --git a/index.js b/index.js index dde9ed00..8fe5f19d 100644 --- a/index.js +++ b/index.js @@ -22,6 +22,8 @@ const showTripDetails = (event, tripId) => { event.preventDefault(); + $('#trip-section').removeClass().addClass('show-reservation'); + // trip details axios.get(`${URL}/${tripId}`) .then((response) => { @@ -94,6 +96,8 @@ const listTrips = () => { const tripList = $('#trip-list'); tripList.empty(); + $('#load').removeClass().addClass('hide-reservation'); + // list all trips axios.get(URL) .then((response) => { @@ -103,7 +107,7 @@ const listTrips = () => { }); }) .catch((error) => { - reportStatus(`Encountered an error while loading pets: ${error.message}`); + reportStatus(`Encountered an error while loading trips: ${error.message}`); console.log(error); }); }; diff --git a/styles.css b/styles.css index e6041b64..ae494173 100644 --- a/styles.css +++ b/styles.css @@ -5,3 +5,32 @@ .show-reservation { display: block; } + +body { + font-family: 'Nunito', sans-serif; + margin: 2em; +} + +main { + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-gap: 10px; + grid-auto-rows: minmax(100px, auto); + } + +.list-trips { + grid-column: 1; +} + +.trip { + grid-column: 2; +} + +#trip-details { + list-style-type: none; +} + +ul { + font-size: 1.25em; +} +