From bf3982240594e2fcd94180d0ccb6516330e2389b Mon Sep 17 00:00:00 2001 From: Cara Date: Tue, 22 May 2018 15:44:59 -0700 Subject: [PATCH 1/6] Wave 1 complete, showing list of all trips --- index.css | 0 index.html | 23 +++++++++++++++++++++++ index.js | 47 +++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 70 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..050d87b4 --- /dev/null +++ b/index.html @@ -0,0 +1,23 @@ + + + + + Trek Trip Planning + + + + + + + +
+
+

List of Trips

+ +
    +
    +
    + + + diff --git a/index.js b/index.js new file mode 100644 index 00000000..3a55d894 --- /dev/null +++ b/index.js @@ -0,0 +1,47 @@ +const URL = 'https://ada-backtrek-api.herokuapp.com/trips' + + +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) => { + console.log(response); + reportStatus(`Successfully loaded`); + response.data.forEach((trip) => { + tripList.append(`
  • ${trip.name}
    • `); + }); + }) + + .catch((error) => { + reportStatus(`Encountered an error while loading pets: ${error.message}`); + reportError(error.message, error.response.data.errors) + console.log(error); + + }); +}; + +$(document).ready(() => { + $('#load').click(loadTrips); + +}); From 09fb038fd06e971fc92026decd39ddc547c1e5c4 Mon Sep 17 00:00:00 2001 From: Cara Date: Wed, 23 May 2018 11:40:11 -0700 Subject: [PATCH 2/6] wave 2 --- index.css | 10 ++++++++++ index.html | 53 +++++++++++++++++++++++++++++++++------------------- index.js | 55 +++++++++++++++++++++++++++++++++++++++++++++++++++--- show.html | 22 ++++++++++++++++++++++ show.js | 0 5 files changed, 118 insertions(+), 22 deletions(-) create mode 100644 show.html create mode 100644 show.js diff --git a/index.css b/index.css index e69de29b..7ac26a85 100644 --- a/index.css +++ b/index.css @@ -0,0 +1,10 @@ + +#body{ + background-color: blue; + display: flex; + flex-direction: row; +} + +aside{ + align-self: center; +} diff --git a/index.html b/index.html index 050d87b4..cee0aaf5 100644 --- a/index.html +++ b/index.html @@ -1,23 +1,38 @@ - - - Trek Trip Planning - - - - - - - -
    -
    -

    List of Trips

    - -
      -
      -
      + + + Trek Trip Planning + + + + + + + + + - + + + + + + diff --git a/index.js b/index.js index 3a55d894..4948bd3a 100644 --- a/index.js +++ b/index.js @@ -1,11 +1,11 @@ -const URL = 'https://ada-backtrek-api.herokuapp.com/trips' +const URL = 'https://ada-backtrek-api.herokuapp.com/trips/' const reportStatus = (message) => { $('status-message').html(message); }; -const reportError = (message, errors) =>{ +const reportError = (message, errors) => { let content = `

      ${message}

        `; for (const field in errors){ for (const problem of errors[field]){ @@ -29,8 +29,45 @@ const loadTrips = () => { console.log(response); reportStatus(`Successfully loaded`); response.data.forEach((trip) => { - tripList.append(`
      • ${trip.name}
        • `); + + let id = trip.id + + tripList.append(`
      • ${trip.name}
        • `); + + }); + //only returns one element + + }) + + .catch((error) => { + reportStatus(`Encountered an error while loading trips: ${error.message}`); + reportError(error.message, error.response.data.errors) + console.log(error); + + }); + +}; + +const clickTrip = (trip) => { + console.log(trip) + + axios.get(URL+trip) + .then((response) => { + console.log(response); + reportStatus(`Successfully loaded`); + + console.log('appending to table body'); + + $('tablebody').append(`Name${response.data.name}`); + + $('tablebody').append(`Id${response.data.id}`); $('tablebody').append(`Continent${response.data.continent}`); $('tablebody').append(`About${response.data.about}`); + $('tablebody').append(`Category${response.data.category}`); + $('tablebody').append(`Weeks${response.data.weeks}`); + $('tablebody').append(`Cost${response.data.cost}`); + + + }) .catch((error) => { @@ -39,9 +76,21 @@ const loadTrips = () => { console.log(error); }); + }; + + + + $(document).ready(() => { $('#load').click(loadTrips); + $('ul').on('click', 'li', function() { + console.log(this) + console.log(this.id) + clickTrip(this.id) + }); + + }); diff --git a/show.html b/show.html new file mode 100644 index 00000000..24767295 --- /dev/null +++ b/show.html @@ -0,0 +1,22 @@ + + + + + Show Page for a Trip + + +
        +Showing + + + + +
        + + diff --git a/show.js b/show.js new file mode 100644 index 00000000..e69de29b From e1045556712a1315a4ab44686a676dbed454843c Mon Sep 17 00:00:00 2001 From: Cara Date: Wed, 23 May 2018 16:00:53 -0700 Subject: [PATCH 3/6] Able to view trip and reserve trip --- index.css | 32 ++++++++++++++++++++--- index.html | 33 +++++++++++++++++++++--- index.js | 74 +++++++++++++++++++++++++++++++++++++++++++++--------- 3 files changed, 119 insertions(+), 20 deletions(-) diff --git a/index.css b/index.css index 7ac26a85..4c817706 100644 --- a/index.css +++ b/index.css @@ -1,10 +1,34 @@ -#body{ - background-color: blue; +#main{ display: flex; flex-direction: row; + justify-content: flex-start; + text-align: center; } -aside{ - align-self: center; +#status-message{ + height: 20px; + background-color: blue; + +} + + +h1{ + font-weight: bold; +} +.trip{ + border-color: black; + border: 3px; +margin: 1em; +list-style: none; + +} + +#trip-details{ +text-align: left; +} + +.current-trips{ + height: 100px; + padding: 0; } diff --git a/index.html b/index.html index cee0aaf5..428a9c58 100644 --- a/index.html +++ b/index.html @@ -11,8 +11,14 @@ - -