From 69670d6898a270889612b86be1f21fdfa0de5c4e Mon Sep 17 00:00:00 2001 From: Abiaina Date: Wed, 23 May 2018 10:49:58 -0700 Subject: [PATCH 01/12] button to show all trips, display loosely follows wireframes --- index.html | 22 ++++++++++++++++++++++ index.js | 41 +++++++++++++++++++++++++++++++++++++++++ style.css | 20 ++++++++++++++++++++ 3 files changed, 83 insertions(+) create mode 100644 index.html create mode 100644 index.js create mode 100644 style.css diff --git a/index.html b/index.html new file mode 100644 index 00000000..1ca72691 --- /dev/null +++ b/index.html @@ -0,0 +1,22 @@ + + + + + Trek + + + + + + +
+ +
+
+ + + + + + diff --git a/index.js b/index.js new file mode 100644 index 00000000..a76d8d7b --- /dev/null +++ b/index.js @@ -0,0 +1,41 @@ + +const URL = 'https://ada-backtrek-api.herokuapp.com'; + +const loadTrips = () => { + const tripList = $('#showtrips'); + tripList.empty(); + + const tripParam = '/trips'; + + let reportStatus = (message) => { + $('#status-message').html(message); + } + + reportStatus('Loading Trips! Please Wait...!'); + + axios.get(URL + tripParam) + + .then((response) => { + console.log('Responding'); + console.log(response); + + tripList.append(`All Trips`); + + response.data.forEach((trip) => { + tripList.append(`${trip.name}`); + }); + reportStatus('Trips Loaded'); + }) + + .catch((error) => { + console.log(error); + reportStatus(`Error: ${error.message }`); + + }); + + console.log('this is said after the get request and will run before the api responds'); +} + +$(document).ready(() => { + $('#seetrips').click(loadTrips); +}); diff --git a/style.css b/style.css new file mode 100644 index 00000000..c771ee9c --- /dev/null +++ b/style.css @@ -0,0 +1,20 @@ +button { + font-family: sans-serif; + background-color: grey; + color: white; +} + +td { + text-align: center; + vertical-align: middle; + border-top: solid thin; +} + +table, tr { + border: solid thin; +} + +/*main { + display: grid; + grid-template-columns: 1fr 1fr; +}*/ From cacdc2dcab69aa49403a2eafed7e236e38b29be0 Mon Sep 17 00:00:00 2001 From: Abiaina Date: Wed, 23 May 2018 14:56:44 -0700 Subject: [PATCH 02/12] hard coded link for list item to show details --- index.html | 3 +++ index.js | 52 +++++++++++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 54 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 1ca72691..a1c00006 100644 --- a/index.html +++ b/index.html @@ -12,6 +12,9 @@
+ + +
diff --git a/index.js b/index.js index 13e9cde7..5889f88e 100644 --- a/index.js +++ b/index.js @@ -61,9 +61,13 @@ const loadTripDetails = (id) => { tripDetails.append(`Trip Details`); let detail = response.data; - tripDetails.append(`${detail.name}`); - tripDetails.append(`${detail.cost}`); - tripDetails.append(`${detail.about}`); + tripDetails.append(`Name: ${detail.name}`); + tripDetails.append(`Trip Id:${detail.id}`); + tripDetails.append(`Continent:${detail.continent}`); + tripDetails.append(`Category:${detail.category}`); + tripDetails.append(`Weeks:${detail.weeks}`); + tripDetails.append(`Cost: $${detail.cost}`); + tripDetails.append(`${detail.about}`); reportStatus('Trip Details Loaded'); }) @@ -81,7 +85,6 @@ const loadTripDetails = (id) => { $(document).ready(() => { $('#seetrips').click(loadTrips); $('#showtrips').on( 'click', 'td', function(event) { - console.log('code runs for 2nd click event'); let id = $(this).attr('id'); event.preventDefault(); loadTripDetails(id); diff --git a/style.css b/style.css index c771ee9c..268ad7de 100644 --- a/style.css +++ b/style.css @@ -1,3 +1,4 @@ + button { font-family: sans-serif; background-color: grey; @@ -13,7 +14,6 @@ td { table, tr { border: solid thin; } - /*main { display: grid; grid-template-columns: 1fr 1fr; From 6d65a5de93e48d9378081ce88e7ee773ab1eaddd Mon Sep 17 00:00:00 2001 From: Abiaina Date: Wed, 23 May 2018 18:10:54 -0700 Subject: [PATCH 05/12] foundation is working --- index.html | 77 +++++++++++++++++++++++++++++++++++------------------- index.js | 1 + style.css | 20 -------------- 3 files changed, 51 insertions(+), 47 deletions(-) diff --git a/index.html b/index.html index 1707ea90..8c46a111 100644 --- a/index.html +++ b/index.html @@ -1,39 +1,62 @@ - - - Trek - + + + Trek + + + - - + + -

Trek

+

Trek

- + -
- -
-
- -
-
+
+
+
+ +
- -
-
- -
-
+
+
+
+ +
-
+ +
+ - - - - + + + + diff --git a/index.js b/index.js index 5889f88e..29069e7a 100644 --- a/index.js +++ b/index.js @@ -88,5 +88,6 @@ $(document).ready(() => { let id = $(this).attr('id'); event.preventDefault(); loadTripDetails(id); + $('') }); }); diff --git a/style.css b/style.css index 268ad7de..e69de29b 100644 --- a/style.css +++ b/style.css @@ -1,20 +0,0 @@ - -button { - font-family: sans-serif; - background-color: grey; - color: white; -} - -td { - text-align: center; - vertical-align: middle; - border-top: solid thin; -} - -table, tr { - border: solid thin; -} -/*main { - display: grid; - grid-template-columns: 1fr 1fr; -}*/ From 78a67fc0347327107b54f5b462a6e465e8c6e2c4 Mon Sep 17 00:00:00 2001 From: Abiaina Date: Thu, 24 May 2018 15:01:12 -0700 Subject: [PATCH 06/12] used foundation to make a form and show and hid rservatio and trip details based on clicking trips buttons --- index.html | 45 ++++++++++++++++++------------------------- index.js | 56 ++++++++++++++++++++++++++++++++++++++++++++++++------ style.css | 3 +++ 3 files changed, 71 insertions(+), 33 deletions(-) diff --git a/index.html b/index.html index 8c46a111..578e380c 100644 --- a/index.html +++ b/index.html @@ -9,12 +9,13 @@ +
+

Trek

-

Trek

+ +
- - -
+
@@ -25,32 +26,22 @@

Trek

-
-
- - +
diff --git a/index.js b/index.js index 29069e7a..4ff166a4 100644 --- a/index.js +++ b/index.js @@ -4,6 +4,9 @@ const URL = 'https://ada-backtrek-api.herokuapp.com'; const loadTrips = () => { const tripList = $('#showtrips'); tripList.empty(); + $('.ReserveTrip').hide(); + + $('#tripDetails').empty(); const tripParam = '/trips'; @@ -26,9 +29,6 @@ const loadTrips = () => { }); reportStatus('Trips Loaded'); - // //call - // $('#1').click(loadTripDetails); - // console.log('both events are going'); }) .catch((error) => { @@ -44,6 +44,7 @@ const loadTripDetails = (id) => { const tripDetails = $('#tripDetails'); tripDetails.empty(); + const tripId = `/trips/${id}`; let reportStatus = (message) => { @@ -63,11 +64,12 @@ const loadTripDetails = (id) => { let detail = response.data; tripDetails.append(`Name: ${detail.name}`); tripDetails.append(`Trip Id:${detail.id}`); - tripDetails.append(`Continent:${detail.continent}`); - tripDetails.append(`Category:${detail.category}`); - tripDetails.append(`Weeks:${detail.weeks}`); + tripDetails.append(`Continent: ${detail.continent}`); + tripDetails.append(`Category: ${detail.category}`); + tripDetails.append(`Weeks: ${detail.weeks}`); tripDetails.append(`Cost: $${detail.cost}`); tripDetails.append(`${detail.about}`); + $('.ReserveTrip').show(); reportStatus('Trip Details Loaded'); }) @@ -82,6 +84,47 @@ const loadTripDetails = (id) => { } +// const reserveTrip = (id) => { +// const reservation = $('#'); +// reservation.empty(); +// +// const tripId = `/trips/${id}`; +// +// let reservationDetails = { +// name: #form, +// age: #form, +// email: #form +// } +// +// let reportStatus = (message) => { +// $('#status-message').html(message); +// } +// +// reportStatus('Loading Trip Details! Please Wait...!'); +// +// axios.post(URL + tripId) +// +// .then((response) => { +// console.log('Responding'); +// console.log(response); +// +// tripDetails.append(`Trip Details`); +// +// reportStatus('Trip Details Loaded'); +// +// +// }) +// +// .catch((error) => { +// console.log(error); +// reportStatus(`Error: ${error.message }`); +// +// }); +// +// console.log('this is said after the get request and will run before the api responds'); +// } + + $(document).ready(() => { $('#seetrips').click(loadTrips); $('#showtrips').on( 'click', 'td', function(event) { @@ -90,4 +133,5 @@ $(document).ready(() => { loadTripDetails(id); $('') }); + // #when do I put the event listener? }); diff --git a/style.css b/style.css index e69de29b..90ef692f 100644 --- a/style.css +++ b/style.css @@ -0,0 +1,3 @@ +.ReserveTrip { + display: none; +} From ec0d3da9690e2557c3bbe2e37ec8706b7c0f5db5 Mon Sep 17 00:00:00 2001 From: Abiaina Date: Thu, 24 May 2018 19:14:39 -0700 Subject: [PATCH 07/12] added trip name to reservation show --- index.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/index.js b/index.js index 4ff166a4..c68aa476 100644 --- a/index.js +++ b/index.js @@ -44,7 +44,6 @@ const loadTripDetails = (id) => { const tripDetails = $('#tripDetails'); tripDetails.empty(); - const tripId = `/trips/${id}`; let reportStatus = (message) => { @@ -69,6 +68,9 @@ const loadTripDetails = (id) => { tripDetails.append(`Weeks: ${detail.weeks}`); tripDetails.append(`Cost: $${detail.cost}`); tripDetails.append(`${detail.about}`); + + $('#tripName').empty(); + $('#tripName').append(`
Trip Name: ${detail.name}
`); $('.ReserveTrip').show(); reportStatus('Trip Details Loaded'); From 18f0f8743917d9a25905327e00cb4723b0626ad9 Mon Sep 17 00:00:00 2001 From: Abiaina Date: Fri, 25 May 2018 14:42:46 -0700 Subject: [PATCH 08/12] added logic for reservation, fixed bug it caused in trips and trip show actions. reservation not working --- index.html | 2 +- index.js | 93 +++++++++++++++++++++++++----------------------------- 2 files changed, 44 insertions(+), 51 deletions(-) diff --git a/index.html b/index.html index 578e380c..13d7911d 100644 --- a/index.html +++ b/index.html @@ -29,7 +29,7 @@

Trek

Reserve Trip

-
+
diff --git a/index.js b/index.js index c68aa476..bbac6510 100644 --- a/index.js +++ b/index.js @@ -37,7 +37,31 @@ const loadTrips = () => { }); - console.log('this is said after the get request and will run before the api responds'); +} + +const reserveTrip = function reserveTrip(tripId, reservationDetails){ + + let reportStatus = (message) => { + $('#status-message').html(message); + } + + reportStatus('Loading Trip Details! Please Wait...!'); + +'https://ada-backtrek-api.herokuapp.com/trips/3/reservations' + let linkReservationId = `${tripId}/reservations`; + + axios.post(`https://ada-backtrek-api.herokuapp.com/trips/${linkReservationId}`, reservationDetails) + + .then((response) => { + console.log('Responding'); + reportStatus('Successfully Reserved Trip'); + }) + + .catch((error) => { + console.log(error); + reportStatus(`Unable to Reserve: ${error.message }`); + }); + } const loadTripDetails = (id) => { @@ -69,63 +93,33 @@ const loadTripDetails = (id) => { tripDetails.append(`Cost: $${detail.cost}`); tripDetails.append(`${detail.about}`); + reportStatus('Trip Details Loaded'); + $('#tripName').empty(); $('#tripName').append(`
Trip Name: ${detail.name}
`); $('.ReserveTrip').show(); - reportStatus('Trip Details Loaded'); - }) - - .catch((error) => { - console.log(error); - reportStatus(`Error: ${error.message }`); +//listening for a reservation form submit + $('#reservationForm').submit(function(event) { - }); + let name = $(this).attr('name'); + let id = $(this).attr('id'); - console.log('this is said after the get request and will run before the api responds'); -} + //how do I pull the form details from params? + let reservationDetails = { + travellerName: 'Abinnet' + }; + event.preventDefault(); -// const reserveTrip = (id) => { -// const reservation = $('#'); -// reservation.empty(); -// -// const tripId = `/trips/${id}`; -// -// let reservationDetails = { -// name: #form, -// age: #form, -// email: #form -// } -// -// let reportStatus = (message) => { -// $('#status-message').html(message); -// } -// -// reportStatus('Loading Trip Details! Please Wait...!'); -// -// axios.post(URL + tripId) -// -// .then((response) => { -// console.log('Responding'); -// console.log(response); -// -// tripDetails.append(`Trip Details`); -// -// reportStatus('Trip Details Loaded'); -// -// -// }) -// -// .catch((error) => { -// console.log(error); -// reportStatus(`Error: ${error.message }`); -// -// }); -// -// console.log('this is said after the get request and will run before the api responds'); -// } + reserveTrip(id, reservationDetails); + }) + .catch((error) => { + reportStatus(`Error: ${error.message }`); + }); + }) +} $(document).ready(() => { $('#seetrips').click(loadTrips); @@ -133,7 +127,6 @@ $(document).ready(() => { let id = $(this).attr('id'); event.preventDefault(); loadTripDetails(id); - $('') }); // #when do I put the event listener? }); From f3b09357f9279795e641aa2d2340b07ae03f3068 Mon Sep 17 00:00:00 2001 From: Abiaina Date: Fri, 25 May 2018 15:50:06 -0700 Subject: [PATCH 09/12] user can make a reservation based on form input, post requests appear on api reservations --- index.html | 4 +++- index.js | 24 +++++++++++------------- 2 files changed, 14 insertions(+), 14 deletions(-) diff --git a/index.html b/index.html index 13d7911d..473d694b 100644 --- a/index.html +++ b/index.html @@ -32,7 +32,9 @@

Reserve Trip

- + + +
diff --git a/index.js b/index.js index bbac6510..91192e02 100644 --- a/index.js +++ b/index.js @@ -47,10 +47,8 @@ const reserveTrip = function reserveTrip(tripId, reservationDetails){ reportStatus('Loading Trip Details! Please Wait...!'); -'https://ada-backtrek-api.herokuapp.com/trips/3/reservations' - let linkReservationId = `${tripId}/reservations`; - axios.post(`https://ada-backtrek-api.herokuapp.com/trips/${linkReservationId}`, reservationDetails) + axios.post(`https://ada-backtrek-api.herokuapp.com/trips/${tripId}/reservations`, reservationDetails) .then((response) => { console.log('Responding'); @@ -98,27 +96,27 @@ const loadTripDetails = (id) => { $('#tripName').empty(); $('#tripName').append(`
Trip Name: ${detail.name}
`); $('.ReserveTrip').show(); + $('#reservationForm').off(); -//listening for a reservation form submit $('#reservationForm').submit(function(event) { - let name = $(this).attr('name'); - let id = $(this).attr('id'); + // let name = $(this).attr('name'); + // let email = $(this).attr('email') - //how do I pull the form details from params? let reservationDetails = { - travellerName: 'Abinnet' + name: $('#travellerName').val(), + email: $('#travellerEmail').val(), }; event.preventDefault(); - reserveTrip(id, reservationDetails); - }) - - .catch((error) => { - reportStatus(`Error: ${error.message }`); + reserveTrip(detail.id, reservationDetails); }); }) + + .catch((error) => { + reportStatus(`Error: ${error.message }`); + }); } $(document).ready(() => { From debba76ace916775768ad9f8a33e80982232a60f Mon Sep 17 00:00:00 2001 From: Abiaina Date: Fri, 25 May 2018 16:36:38 -0700 Subject: [PATCH 10/12] error message added --- index.html | 1 + index.js | 42 ++++++++++++++++-------------------------- 2 files changed, 17 insertions(+), 26 deletions(-) diff --git a/index.html b/index.html index 473d694b..f0e7e471 100644 --- a/index.html +++ b/index.html @@ -11,6 +11,7 @@

Trek

+

diff --git a/index.js b/index.js index 91192e02..460b6d13 100644 --- a/index.js +++ b/index.js @@ -1,6 +1,13 @@ const URL = 'https://ada-backtrek-api.herokuapp.com'; +const banner = $('#userMessages'); + +const showBanner = (message) => { + banner.empty(); + banner.append(message); +} + const loadTrips = () => { const tripList = $('#showtrips'); tripList.empty(); @@ -10,11 +17,7 @@ const loadTrips = () => { const tripParam = '/trips'; - let reportStatus = (message) => { - $('#status-message').html(message); - } - - reportStatus('Loading Trips! Please Wait...!'); + showBanner('Loading Trips! Please Wait...!'); axios.get(URL + tripParam) @@ -27,13 +30,13 @@ const loadTrips = () => { response.data.forEach((trip) => { tripList.append(`${trip.name}`); }); - reportStatus('Trips Loaded'); + showBanner('Trips Loaded'); }) .catch((error) => { console.log(error); - reportStatus(`Error: ${error.message }`); + showBanner(`Error: ${error.message }`); }); @@ -41,23 +44,18 @@ const loadTrips = () => { const reserveTrip = function reserveTrip(tripId, reservationDetails){ - let reportStatus = (message) => { - $('#status-message').html(message); - } - - reportStatus('Loading Trip Details! Please Wait...!'); - + showBanner('Loading Trip Details! Please Wait...!'); axios.post(`https://ada-backtrek-api.herokuapp.com/trips/${tripId}/reservations`, reservationDetails) .then((response) => { console.log('Responding'); - reportStatus('Successfully Reserved Trip'); + showBanner('Successfully Reserved Trip'); }) .catch((error) => { console.log(error); - reportStatus(`Unable to Reserve: ${error.message }`); + showBanner(`Unable to Reserve: ${error.message }`); }); } @@ -68,11 +66,7 @@ const loadTripDetails = (id) => { const tripId = `/trips/${id}`; - let reportStatus = (message) => { - $('#status-message').html(message); - } - - reportStatus('Loading Trip Details! Please Wait...!'); + showBanner('Loading Trip Details! Please Wait...!'); axios.get(URL + tripId) @@ -91,7 +85,7 @@ const loadTripDetails = (id) => { tripDetails.append(`Cost: $${detail.cost}`); tripDetails.append(`${detail.about}`); - reportStatus('Trip Details Loaded'); + showBanner('Trip Details Loaded'); $('#tripName').empty(); $('#tripName').append(`
Trip Name: ${detail.name}
`); @@ -100,9 +94,6 @@ const loadTripDetails = (id) => { $('#reservationForm').submit(function(event) { - // let name = $(this).attr('name'); - // let email = $(this).attr('email') - let reservationDetails = { name: $('#travellerName').val(), email: $('#travellerEmail').val(), @@ -115,7 +106,7 @@ const loadTripDetails = (id) => { }) .catch((error) => { - reportStatus(`Error: ${error.message }`); + showBanner(`Error: ${error.message }`); }); } @@ -126,5 +117,4 @@ $(document).ready(() => { event.preventDefault(); loadTripDetails(id); }); - // #when do I put the event listener? }); From 0fab38f7030cccc4e61b62f911cf167e833c7e57 Mon Sep 17 00:00:00 2001 From: Abiaina Date: Sat, 26 May 2018 13:21:54 -0700 Subject: [PATCH 11/12] basic requirements met, needs styling --- index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index f0e7e471..2301524d 100644 --- a/index.html +++ b/index.html @@ -18,8 +18,8 @@

-
- +
+
From 39b09804dfe58e92985a3171b4cba265bcf99054 Mon Sep 17 00:00:00 2001 From: Abiaina Date: Tue, 29 May 2018 00:23:29 -0700 Subject: [PATCH 12/12] added some color and updated some styling --- index.html | 4 ++-- index.js | 2 +- style.css | 30 ++++++++++++++++++++++++++++++ 3 files changed, 33 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index 2301524d..9c6c3112 100644 --- a/index.html +++ b/index.html @@ -10,7 +10,7 @@
-

Trek

+

Trek

@@ -19,7 +19,7 @@

- +
diff --git a/index.js b/index.js index 460b6d13..4e7d489c 100644 --- a/index.js +++ b/index.js @@ -78,7 +78,7 @@ const loadTripDetails = (id) => { let detail = response.data; tripDetails.append(`Name: ${detail.name}`); - tripDetails.append(`Trip Id:${detail.id}`); + tripDetails.append(`Trip Id: ${detail.id}`); tripDetails.append(`Continent: ${detail.continent}`); tripDetails.append(`Category: ${detail.category}`); tripDetails.append(`Weeks: ${detail.weeks}`); diff --git a/style.css b/style.css index 90ef692f..c7d92698 100644 --- a/style.css +++ b/style.css @@ -1,3 +1,33 @@ .ReserveTrip { display: none; } + +#title { + background-color: green; + color: white; + text-align: center; +} + +#userMessages { + font-size: 12pt; + font-style: italic; + color: grey; + text-align: center; +} + +#showtrips { + background-color: #8FBC8F; +} + +#tripDetails { + background-color: #98FB98; +} + +.ReserveTrip { + background-color: #20B2AA; + text-align: center; +} + +#travellerName { + padding: 1rem; +}