From 39f3f9902c93466198d058d47214ffc58bb79543 Mon Sep 17 00:00:00 2001 From: Sara Frandsen Date: Tue, 28 Nov 2017 15:34:59 -0800 Subject: [PATCH 01/46] create collections/trip_list --- src/collections/trip_list.js | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 src/collections/trip_list.js diff --git a/src/collections/trip_list.js b/src/collections/trip_list.js new file mode 100644 index 0000000..b6b4fa8 --- /dev/null +++ b/src/collections/trip_list.js @@ -0,0 +1,11 @@ +import Backbone from 'backbone'; +import Trip from '../models/trip'; + +const TripList = Backbone.Collection.extend({ + model: Trip, + url: 'https://ada-backtrek-api.herokuapp.com/trips', + + comparator: 'name', +}); + +export default TripList; From 48b00810637d95fe5383b07e0765d484004b2013 Mon Sep 17 00:00:00 2001 From: Sara Frandsen Date: Tue, 28 Nov 2017 15:35:19 -0800 Subject: [PATCH 02/46] create models/trip --- src/models/trip.js | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 src/models/trip.js diff --git a/src/models/trip.js b/src/models/trip.js new file mode 100644 index 0000000..80f14cc --- /dev/null +++ b/src/models/trip.js @@ -0,0 +1,6 @@ +import Backbone from 'backbone'; + +const Trip = Backbone.Model.extend({ +}); + +export default Trip; From 81211ce8ccce62f04d0f19eeecf8e3b68fffc3fa Mon Sep 17 00:00:00 2001 From: Sara Frandsen Date: Tue, 28 Nov 2017 15:35:48 -0800 Subject: [PATCH 03/46] begin basic HTML template and import model/collection --- dist/index.html | 43 +++++++++++++++++++++++++++++++++++++++++- src/app.js | 31 ++++++++++++++++++++++++++++-- src/css/style.css | 48 +++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 119 insertions(+), 3 deletions(-) diff --git a/dist/index.html b/dist/index.html index b873b1e..689d525 100644 --- a/dist/index.html +++ b/dist/index.html @@ -2,7 +2,7 @@ - My JavaScript App + Back Trekking @@ -11,10 +11,51 @@
+ +
+

TREK

+ + + + + + + + + + + +
NameContinentCategoryWeeksCost
+
+ +
+ + + + + diff --git a/src/app.js b/src/app.js index e7af594..e859c2f 100644 --- a/src/app.js +++ b/src/app.js @@ -6,8 +6,35 @@ import _ from 'underscore'; import './css/foundation.css'; import './css/style.css'; -console.log('it loaded!'); +// OUR COMPONENTS +import TripList from './collections/trip_list'; +// TRIP FIELDS +const TRIP_FIELDS = ['name', 'continent', 'category', 'weeks', 'cost']; + +const tripList = new TripList(); + +// Starts undefined - we'll set this in $(document).ready +// once we know the template is available +let tripTemplate; + +const render = function render(tripList) { + // iterate through the tripList, generate HTML + // for each model and attatch it to the DOM + const tripTableElement = $('#trip-list'); + tripTableElement.html(''); + + tripList.forEach((trip) => { + const generatedHTML = tripTemplate(trip.attributes); + tripTableElement.append(generatedHTML); + }); + + // Provide visual feedback for sorting + $('th.sort').removeClass('current-sort-field'); + $(`th.sort.${ tripList.comparator }`).addClass('current-sort-field'); +}; + +/////////////////////////// $(document).ready( () => { - $('main').html('

Hello World!

'); + tripTemplate = _.template($('#trip-template').html()); }); diff --git a/src/css/style.css b/src/css/style.css index b7b2d44..c97021d 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -1,2 +1,50 @@ /* Your styles go here! */ +#book-list { + list-style: none; + margin-left: 0; +} + +th.sort { + cursor: pointer; +} + +.current-sort-field { + background-color: darkgrey; + color: white; +} + +/* Styles for error section at the top */ +#status-messages { + background-color: #dfdfdf; + + /* Hide by default */ + display: none; + + border-radius: 1rem; + margin: 1rem; + height: 100%; + padding: .8rem; +} + +#status-messages ul { + list-style: none; + margin-left: 0; +} + +#status-messages button.clear { + margin-top: .2rem; + height: 100%; +} + +#status-messages button.clear img { + width: 2rem; +} + +#status-messages .error { + color: red; +} + +#status-messages .success { + color: green; +} From efe63e3aefbf81c42dc090b628327a86628c2b97 Mon Sep 17 00:00:00 2001 From: Sara Frandsen Date: Tue, 28 Nov 2017 15:47:17 -0800 Subject: [PATCH 04/46] correct parse function --- src/collections/trip_list.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/collections/trip_list.js b/src/collections/trip_list.js index b6b4fa8..b89162a 100644 --- a/src/collections/trip_list.js +++ b/src/collections/trip_list.js @@ -5,6 +5,9 @@ const TripList = Backbone.Collection.extend({ model: Trip, url: 'https://ada-backtrek-api.herokuapp.com/trips', + parse: function(response) { + return response; + }, comparator: 'name', }); From 4ea8c6ca2b031e9e7a49f282c40a85066db25654 Mon Sep 17 00:00:00 2001 From: Sara Frandsen Date: Tue, 28 Nov 2017 15:47:33 -0800 Subject: [PATCH 05/46] show list of trips from the API on page --- src/app.js | 58 +++++++++++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 53 insertions(+), 5 deletions(-) diff --git a/src/app.js b/src/app.js index e859c2f..ec21a00 100644 --- a/src/app.js +++ b/src/app.js @@ -13,9 +13,6 @@ import TripList from './collections/trip_list'; const TRIP_FIELDS = ['name', 'continent', 'category', 'weeks', 'cost']; const tripList = new TripList(); - -// Starts undefined - we'll set this in $(document).ready -// once we know the template is available let tripTemplate; const render = function render(tripList) { @@ -34,7 +31,58 @@ const render = function render(tripList) { $(`th.sort.${ tripList.comparator }`).addClass('current-sort-field'); }; -/////////////////////////// -$(document).ready( () => { +const addBookHandler = function(event) { + event.preventDefault(); + + const tripData = {}; + TRIP_FIELDS.forEach((field) => { + // select the input corresponding to the field we want + const inputElement = $(`#add-trip-form input[name="${ field }"]`); + const value = inputElement.val(); + tripData[field] = value; + + inputElement.val(''); + }); + + console.log("Read trip data"); + console.log(tripData); + + const trip = tripList.add(tripData); + trip.save({}, { + success: (model, response) => { + console.log('Successfully saved trip!'); + }, + error: (model, response) => { + console.log('Failed to save trip! Server response:'); + console.log(response); + }, + }); +}; + +$(document).ready(() => { tripTemplate = _.template($('#trip-template').html()); + + console.log(`About to fetch data from ${ tripList.url }`); + + // Register our update listener first, to avoid the race condition + tripList.on('update', render); + tripList.on('sort', render); + + // When fetch gets back from the API call, it will add trips + // to the list and then trigger an 'update' event + tripList.fetch(); + + // Listen for when the user adds a trip + $('#add-trip-form').on('submit', addBookHandler); + + // Add a click handler for each of the table headers + // to sort the table by that column + TRIP_FIELDS.forEach((field) => { + const headerElement = $(`th.sort.${ field }`); + headerElement.on('click', (event) => { + console.log(`Sorting table by ${ field }`); + tripList.comparator = field; + tripList.sort(); + }); + }); }); From 897a9439cebdc880a4d4d9077ce79d8ab0a16b5a Mon Sep 17 00:00:00 2001 From: Sara Frandsen Date: Tue, 28 Nov 2017 15:57:27 -0800 Subject: [PATCH 06/46] add form to create a trip --- dist/index.html | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/dist/index.html b/dist/index.html index 689d525..8bfdc51 100644 --- a/dist/index.html +++ b/dist/index.html @@ -10,6 +10,29 @@
+ + +
@@ -30,6 +53,7 @@

TREK

+
From 09079473c6a30f438f45f940b90c48524cd6e208 Mon Sep 17 00:00:00 2001 From: Sara Frandsen Date: Tue, 28 Nov 2017 16:26:36 -0800 Subject: [PATCH 07/46] create template for single trip view --- dist/index.html | 18 +++++++++++++++--- 1 file changed, 15 insertions(+), 3 deletions(-) diff --git a/dist/index.html b/dist/index.html index 8bfdc51..6558ecd 100644 --- a/dist/index.html +++ b/dist/index.html @@ -34,6 +34,11 @@

Add a Trip

+ +
+
+ +

TREK

@@ -54,12 +59,19 @@

TREK

-
+
- + + + + + - + From a2e2af56a158aa0e97671dd7fd825ff3d9bb3e95 Mon Sep 17 00:00:00 2001 From: Sara Frandsen Date: Tue, 28 Nov 2017 16:27:10 -0800 Subject: [PATCH 08/46] change the name of the template id for list of trips --- src/app.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app.js b/src/app.js index ec21a00..1ec9bac 100644 --- a/src/app.js +++ b/src/app.js @@ -60,7 +60,7 @@ const addBookHandler = function(event) { }; $(document).ready(() => { - tripTemplate = _.template($('#trip-template').html()); + tripTemplate = _.template($('#trips-template').html()); console.log(`About to fetch data from ${ tripList.url }`); From 3535e4c3cc295ad11bcfd0ec7d48b142b48b19b4 Mon Sep 17 00:00:00 2001 From: Sara Frandsen Date: Wed, 29 Nov 2017 12:11:09 -0800 Subject: [PATCH 09/46] commented out code not currently being worked on to make it easier to read/debug --- dist/index.html | 6 +-- src/app.js | 95 +++++++++++++++++++++------------------------- src/models/trip.js | 1 + 3 files changed, 47 insertions(+), 55 deletions(-) diff --git a/dist/index.html b/dist/index.html index 6558ecd..a97d31a 100644 --- a/dist/index.html +++ b/dist/index.html @@ -11,7 +11,7 @@
-
- @@ -82,6 +82,9 @@

Add a Trip

+ + + diff --git a/src/app.js b/src/app.js index e4b2613..a2696ef 100644 --- a/src/app.js +++ b/src/app.js @@ -11,11 +11,15 @@ import TripList from './collections/trip_list'; import Trip from './models/trip'; // TRIP FIELDS -const TRIP_FIELDS = ['id', 'name', 'continent', 'category', 'weeks', 'cost']; +const TRIP_FIELDS = ['id', 'name', 'about', 'continent', 'category', 'weeks', 'cost']; const tripList = new TripList(); + +// TEMPLATES +///// still confused why ///// let tripsTemplate; let aboutTemplate; +let createNewTripTemplate; // render list of trips const loadTrips = function loadTrips(tripList) { @@ -31,30 +35,30 @@ const loadTrips = function loadTrips(tripList) { // $(`th.sort.${ tripList.comparator }`).addClass('current-sort-field'); }; -// const addTripHandler = function(event) { -// event.preventDefault(); -// - // const tripData = {}; - // TRIP_FIELDS.forEach((field) => { - // // select the input corresponding to the field we want - // const inputElement = $(`#add-trip-form input[name="${ field }"]`); - // const value = inputElement.val(); - // tripData[field] = value; - // - // inputElement.val(''); - // }); - - // const trip = tripList.add(tripData); - // trip.save({}, { - // success: (model, response) => { - // console.log('Successfully saved trip!'); - // }, - // error: (model, response) => { - // console.log('Failed to save trip! Server response:'); - // console.log(response); - // }, - // }); -// }; +const createNewTripHandler = function(event) { + event.preventDefault(); + + const tripData = {}; + TRIP_FIELDS.forEach((field) => { + const inputElement = $(`#trip-create-new input[name="${ field }"]`); + const value = inputElement.val(); + tripData[field] = value; + + inputElement.val(''); + }); + + const trip = tripList.add(tripData); + trip.save({}, { + success: (model, response) => { + console.log('Create new trip: success'); + }, + error: (model, response) => { + console.log('Create new trip: failure'); + console.log('Server response:'); + console.log(response); + }, + }); +}; $(document).ready(() => { tripsTemplate = _.template($('#trips-template').html()); @@ -84,14 +88,31 @@ $(document).ready(() => { }); }) - // $('#add-trip-form').on('submit', addTripHandler); - // - // TRIP_FIELDS.forEach((field) => { - // const headerElement = $(`th.sort.${ field }`); - // headerElement.on('click', (event) => { - // console.log(`Sorting table by ${ field }`); - // tripList.comparator = field; - // tripList.sort(); - // }); - // }); + $('#trip-create-new-btn').on('click', function() { + const newTripElement = $('#trip-create-new'); + newTripElement.html(''); + + console.log('clicked'); + // let tripID = $(this).data('id'); + // console.log(tripID); + // let singleTrip = new Trip({id: tripID}); + // console.log(singleTrip.url()); + // + // singleTrip.fetch({ + // success: (model) => { + // const generatedHTML = $(aboutTemplate(model.attributes)); + // aboutElement.html(generatedHTML); + + }); +}) + +$('#trip-create-new').on('submit', createNewTripHandler); + +TRIP_FIELDS.forEach((field) => { + const headerElement = $(`th.sort.${ field }`); + headerElement.on('click', (event) => { + console.log(`Sorting table by ${ field }`); + tripList.comparator = field; + tripList.sort(); + }); }); From 08e48a6ce2cba2c53e86cfae651c9ddc69cd87ce Mon Sep 17 00:00:00 2001 From: Sara Frandsen Date: Fri, 1 Dec 2017 11:09:20 -0800 Subject: [PATCH 20/46] when add new btn is clicked, form appears on page --- src/app.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/app.js b/src/app.js index a2696ef..c70ba24 100644 --- a/src/app.js +++ b/src/app.js @@ -91,6 +91,8 @@ $(document).ready(() => { $('#trip-create-new-btn').on('click', function() { const newTripElement = $('#trip-create-new'); newTripElement.html(''); + const generatedHTML = $(createNewTripTemplate()); + newTripElement.html(generatedHTML); console.log('clicked'); // let tripID = $(this).data('id'); From f2dc549163387c856ad2e2586655c2f417f5c726 Mon Sep 17 00:00:00 2001 From: Sara Frandsen Date: Fri, 1 Dec 2017 11:15:32 -0800 Subject: [PATCH 21/46] SUCCESSFULLY ADD NEW TRIP --- src/app.js | 10 ---------- 1 file changed, 10 deletions(-) diff --git a/src/app.js b/src/app.js index c70ba24..2653346 100644 --- a/src/app.js +++ b/src/app.js @@ -95,16 +95,6 @@ $(document).ready(() => { newTripElement.html(generatedHTML); console.log('clicked'); - // let tripID = $(this).data('id'); - // console.log(tripID); - // let singleTrip = new Trip({id: tripID}); - // console.log(singleTrip.url()); - // - // singleTrip.fetch({ - // success: (model) => { - // const generatedHTML = $(aboutTemplate(model.attributes)); - // aboutElement.html(generatedHTML); - }); }) From 62cfd3aff68033db3f560debe4abb6e511f193e5 Mon Sep 17 00:00:00 2001 From: Sara Frandsen Date: Fri, 1 Dec 2017 11:24:40 -0800 Subject: [PATCH 22/46] create html template for form to make reservation --- dist/index.html | 21 ++++++++++++++++----- src/app.js | 1 + 2 files changed, 17 insertions(+), 5 deletions(-) diff --git a/dist/index.html b/dist/index.html index dc019c2..1f0fdf3 100644 --- a/dist/index.html +++ b/dist/index.html @@ -78,19 +78,14 @@

Add a Trip

- - - - - @@ -99,6 +94,22 @@

Add a Trip

+ + + + diff --git a/src/app.js b/src/app.js index 2653346..c7f6e82 100644 --- a/src/app.js +++ b/src/app.js @@ -95,6 +95,7 @@ $(document).ready(() => { newTripElement.html(generatedHTML); console.log('clicked'); + console.log('load add new form: success'); }); }) From 05c8f88a3eab35391892339a2333fc50d73f6cfe Mon Sep 17 00:00:00 2001 From: Sara Frandsen Date: Fri, 1 Dec 2017 11:26:00 -0800 Subject: [PATCH 23/46] add footer --- dist/index.html | 1 + 1 file changed, 1 insertion(+) diff --git a/dist/index.html b/dist/index.html index 1f0fdf3..a24ec2a 100644 --- a/dist/index.html +++ b/dist/index.html @@ -41,6 +41,7 @@

TREK

+ © 2017 Sara Frandsen
From 065478f149bf6e4e2291b26efa1ff89354564a71 Mon Sep 17 00:00:00 2001 From: Sara Frandsen Date: Fri, 1 Dec 2017 11:30:15 -0800 Subject: [PATCH 24/46] add template to app.js for making reservation --- dist/index.html | 2 +- src/app.js | 3 +++ 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/dist/index.html b/dist/index.html index a24ec2a..f811fce 100644 --- a/dist/index.html +++ b/dist/index.html @@ -96,7 +96,7 @@

Add a Trip

- - + - + - + - + diff --git a/src/app.js b/src/app.js index 650582a..8b85a37 100644 --- a/src/app.js +++ b/src/app.js @@ -37,6 +37,7 @@ const loadTrips = function loadTrips(tripList) { }; const createNewTripHandler = function(event) { + // keep it from doing normal form things event.preventDefault(); const tripData = {}; @@ -45,6 +46,7 @@ const createNewTripHandler = function(event) { const value = inputElement.val(); tripData[field] = value; + // clears form after submitted inputElement.val(''); }); @@ -62,35 +64,47 @@ const createNewTripHandler = function(event) { }; $(document).ready(() => { - // templates + // TEMPLATES tripsTemplate = _.template($('#trips-template').html()); aboutTemplate = _.template($('#trip-template').html()); createNewTripTemplate = _.template($('#create-new-trip-template').html()); newReservationTemplate = _.template($('#new-reservation-template').html()); + ///// need clarification on this ///// tripList.on('update', loadTrips); tripList.on('sort', loadTrips); tripList.fetch(); - // render single trip details using 'click' + // RENDER SINGLE TRIP DETAILS TO DOM $('#trip-list').on('click', 'tr', function() { const aboutElement = $('#trip-about'); aboutElement.html(''); console.log('clicked'); + // uses 'data' from html data-id let tripID = $(this).data('id'); console.log(tripID); + // uses tripID to find api address for single trip let singleTrip = new Trip({id: tripID}); console.log(singleTrip.url()); + // apparently 'model' is cheating??? + // model refers to singleTrip? + // model.fetch(): takes urlRoot and adds id? + //https://stackoverflow.com/questions/16544984/how-backbone-js-model-fetch-method-works singleTrip.fetch({ success: (model) => { const generatedHTML = $(aboutTemplate(model.attributes)); aboutElement.html(generatedHTML); }, + error: (model) => { + console.log('singleTrip fetch: failure'); + console.log(response); + }, }); }) + // RENDER 'ADD NEW' FORM TO DOM $('#trip-create-new-btn').on('click', function() { const newTripElement = $('#trip-create-new'); newTripElement.html(''); @@ -102,8 +116,10 @@ $(document).ready(() => { }); }) +// SUBMIT NEW TRIP FROM FORM $('#trip-create-new').on('submit', createNewTripHandler); +// SORT BY CLICKED FIELD TRIP_FIELDS.forEach((field) => { const headerElement = $(`th.sort.${ field }`); headerElement.on('click', (event) => { From af5449908f4277ef03d689818bba35382aa43b87 Mon Sep 17 00:00:00 2001 From: Sara Frandsen Date: Fri, 1 Dec 2017 13:48:47 -0800 Subject: [PATCH 27/46] reservation form appears when button is clicked inside 'about' --- dist/index.html | 7 +++++-- src/app.js | 22 ++++++++++++++++++++++ 2 files changed, 27 insertions(+), 2 deletions(-) diff --git a/dist/index.html b/dist/index.html index 2c4c82f..1bad530 100644 --- a/dist/index.html +++ b/dist/index.html @@ -18,8 +18,8 @@

TREK

-
-
+
+
@@ -47,6 +47,9 @@

TREK

diff --git a/src/app.js b/src/app.js index 8b85a37..b7f0b13 100644 --- a/src/app.js +++ b/src/app.js @@ -96,6 +96,18 @@ $(document).ready(() => { success: (model) => { const generatedHTML = $(aboutTemplate(model.attributes)); aboutElement.html(generatedHTML); + + // RENDER 'RESERVATION' FORM TO DOM + $('#new-reservation-btn').on('click', function() { + const newReservationElement = $('#new-reservation'); + newReservationElement.html(''); + const generatedHTML = $(newReservationTemplate()); + newReservationElement.html(generatedHTML); + + console.log('clicked'); + console.log('load new reservation form: success'); + }); + }, error: (model) => { console.log('singleTrip fetch: failure'); @@ -104,6 +116,16 @@ $(document).ready(() => { }); }) + // RENDER 'RESERVATION' FORM TO DOM + $('#new-reservation-btn').on('click', function() { + const newReservationElement = $('#new-reservation'); + newReservationElement.html(''); + const generatedHTML = $(newReservationTemplate()); + newReservationElement.html(generatedHTML); + + console.log('make reservation btn: clicked'); + }); + // RENDER 'ADD NEW' FORM TO DOM $('#trip-create-new-btn').on('click', function() { const newTripElement = $('#trip-create-new'); From f75aac13753add923464ece56853c56f59b213b1 Mon Sep 17 00:00:00 2001 From: Sara Frandsen Date: Fri, 1 Dec 2017 14:23:28 -0800 Subject: [PATCH 28/46] add comments to organize tackling reservations --- dist/index.html | 2 +- src/app.js | 52 ++++++++++++++++++++++++++++++++++++++----------- 2 files changed, 42 insertions(+), 12 deletions(-) diff --git a/dist/index.html b/dist/index.html index 1bad530..326d11b 100644 --- a/dist/index.html +++ b/dist/index.html @@ -48,7 +48,7 @@

TREK

<%- name %>

<%- about %>

-
+
diff --git a/src/app.js b/src/app.js index b7f0b13..0ccf31a 100644 --- a/src/app.js +++ b/src/app.js @@ -36,6 +36,37 @@ const loadTrips = function loadTrips(tripList) { $(`th.sort.${ tripList.comparator }`).addClass('current-sort-field'); }; +const newReservationHandler = function(event) { + // keep it from doing normal form things + event.preventDefault(); + + ///////////////////////////// + // read information from form + const reservationData = {}; + TRIP_FIELDS.forEach((field) => { + const inputElement = $(`#reservation-form input[name="${ field }"]`); + const value = inputElement.val(); + reservationData[field] = value; + + // clears form after submitted + inputElement.val(''); + }); + + /////////////////////////////// + /////////////////////////////// + const reservation = tripList.add(reservationData); + reservation.save({}, { + success: (model, response) => { + console.log('Create new reservation: success'); + }, + error: (model, response) => { + console.log('Create new reservation: failure'); + console.log('Server response:'); + console.log(response); + }, + }); +}; + const createNewTripHandler = function(event) { // keep it from doing normal form things event.preventDefault(); @@ -88,6 +119,10 @@ $(document).ready(() => { let singleTrip = new Trip({id: tripID}); console.log(singleTrip.url()); + let suffix = '/reservations' + let newReservation = new Trip({id: tripID + suffix}); + console.log(newReservation.url()); + // apparently 'model' is cheating??? // model refers to singleTrip? // model.fetch(): takes urlRoot and adds id? @@ -97,7 +132,9 @@ $(document).ready(() => { const generatedHTML = $(aboutTemplate(model.attributes)); aboutElement.html(generatedHTML); + /////////////////////////////////// // RENDER 'RESERVATION' FORM TO DOM + /////////////////////////////////// $('#new-reservation-btn').on('click', function() { const newReservationElement = $('#new-reservation'); newReservationElement.html(''); @@ -107,7 +144,6 @@ $(document).ready(() => { console.log('clicked'); console.log('load new reservation form: success'); }); - }, error: (model) => { console.log('singleTrip fetch: failure'); @@ -116,16 +152,6 @@ $(document).ready(() => { }); }) - // RENDER 'RESERVATION' FORM TO DOM - $('#new-reservation-btn').on('click', function() { - const newReservationElement = $('#new-reservation'); - newReservationElement.html(''); - const generatedHTML = $(newReservationTemplate()); - newReservationElement.html(generatedHTML); - - console.log('make reservation btn: clicked'); - }); - // RENDER 'ADD NEW' FORM TO DOM $('#trip-create-new-btn').on('click', function() { const newTripElement = $('#trip-create-new'); @@ -138,6 +164,10 @@ $(document).ready(() => { }); }) +///////////////////////////////// +// MAKE NEW RESERVATION FROM FORM +$('#reservation-form').on('submit', newReservationHandler); + // SUBMIT NEW TRIP FROM FORM $('#trip-create-new').on('submit', createNewTripHandler); From 8ddbc7a96508ffb481d9b4c5c8700cb704c5fd82 Mon Sep 17 00:00:00 2001 From: Sara Frandsen Date: Fri, 1 Dec 2017 15:09:19 -0800 Subject: [PATCH 29/46] reservation form submits SOMETHING using .post --- dist/index.html | 12 ++++++--- src/app.js | 69 ++++++++++++++++++++++--------------------------- 2 files changed, 39 insertions(+), 42 deletions(-) diff --git a/dist/index.html b/dist/index.html index 326d11b..6c94cbc 100644 --- a/dist/index.html +++ b/dist/index.html @@ -10,6 +10,10 @@

TREK

+ + + +
+
+
+ + + + + + + + + + +
NameContinentCategoryWeeksCost
+
+
+ + + + @@ -65,12 +68,11 @@

<%- name %>

<%- about %>

- diff --git a/src/css/style.css b/src/css/style.css index 6efb97b..42e585c 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -15,7 +15,7 @@ body{ /* img of canyons with several hot air balloons */ /* Photo by Egzon Bytyqi on Unsplash */ background-size: cover; - height: 90vh; + height: 100vh; text-align: center; display: flex; align-items: center; From ef543048b167d7c70f4d46a2c11fb9b5331d21e1 Mon Sep 17 00:00:00 2001 From: Sara Frandsen Date: Mon, 4 Dec 2017 10:24:49 -0800 Subject: [PATCH 41/46] fit list to page, overflow scroll --- dist/index.html | 8 ++++---- src/app.js | 13 +++++++------ src/css/style.css | 6 ++++++ 3 files changed, 17 insertions(+), 10 deletions(-) diff --git a/dist/index.html b/dist/index.html index e098df7..70d8991 100644 --- a/dist/index.html +++ b/dist/index.html @@ -28,6 +28,10 @@

Back Trekking

+ + +
@@ -45,10 +49,6 @@

Back Trekking

- - - - +
+
diff --git a/src/app.js b/src/app.js index 5ad5bdf..197aa00 100644 --- a/src/app.js +++ b/src/app.js @@ -140,8 +140,8 @@ $(document).ready(() => { console.log(generatedHTML); // console.log(generatedHTML.prop('outerHTML')); aboutElement.html(generatedHTML); - const htmlAsString = $('
').append(generatedHTML).html() - $('#' + this.id).after('' + htmlAsString + ''); + // const htmlAsString = $('
').append(generatedHTML).html() + // $('#' + this.id).after('' + htmlAsString + ''); // console.log(htmlAsString); // $('#list').animate({width:'50%'}); From 1d23b4d43686fc3dc20e225f277aa4482495333c Mon Sep 17 00:00:00 2001 From: Sara Frandsen Date: Mon, 4 Dec 2017 11:06:23 -0800 Subject: [PATCH 43/46] fixed vh for 'about' --- src/css/style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/css/style.css b/src/css/style.css index fa10cbc..a3024ec 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -38,7 +38,7 @@ body{ color: #20333e; } -#list { +#list, #trip-about { height: 60vh; overflow: scroll; } From b7f52d1e88f67246411679f72a8562c8616b8160 Mon Sep 17 00:00:00 2001 From: Sara Frandsen Date: Mon, 4 Dec 2017 11:16:47 -0800 Subject: [PATCH 44/46] 'about' hidden until clicked, overflow scroll --- dist/index.html | 2 +- src/app.js | 5 +---- src/css/style.css | 12 +++++++++++- 3 files changed, 13 insertions(+), 6 deletions(-) diff --git a/dist/index.html b/dist/index.html index e042f76..504581d 100644 --- a/dist/index.html +++ b/dist/index.html @@ -29,7 +29,7 @@

Back Trekking

-
+ diff --git a/src/app.js b/src/app.js index 197aa00..700f257 100644 --- a/src/app.js +++ b/src/app.js @@ -119,6 +119,7 @@ $(document).ready(() => { // RENDER SINGLE TRIP DETAILS TO DOM $('#trip-list').on('click', 'tr', function() { + $('.hidden').show(); const aboutElement = $('#trip-about'); aboutElement.html(''); console.log('about: clicked'); @@ -140,10 +141,6 @@ $(document).ready(() => { console.log(generatedHTML); // console.log(generatedHTML.prop('outerHTML')); aboutElement.html(generatedHTML); - // const htmlAsString = $('
').append(generatedHTML).html() - // $('#' + this.id).after('' + htmlAsString + ''); - // console.log(htmlAsString); - // $('#list').animate({width:'50%'}); // RENDER 'RESERVATION' FORM TO DOM $('#new-reservation-btn').on('click', function() { diff --git a/src/css/style.css b/src/css/style.css index a3024ec..1e320ab 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -38,11 +38,21 @@ body{ color: #20333e; } -#list, #trip-about { +#list { height: 60vh; overflow: scroll; } +.hidden { + display: none; +} + +#trip-about { + overflow: scroll; + position: relative; + height: 60vh; +} + /* table */ #trip-list-table { display: none; From ddc05a9844d3921e88d680581734b51cb4ac9ae7 Mon Sep 17 00:00:00 2001 From: Sara Frandsen Date: Mon, 4 Dec 2017 11:24:05 -0800 Subject: [PATCH 45/46] scroll to bottom of section when making reservation --- src/app.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/app.js b/src/app.js index 700f257..9fb020d 100644 --- a/src/app.js +++ b/src/app.js @@ -144,6 +144,10 @@ $(document).ready(() => { // RENDER 'RESERVATION' FORM TO DOM $('#new-reservation-btn').on('click', function() { + + $('#trip-about').animate({ + scrollTop: $('#trip-about')[0].scrollHeight}, 2000); + const newReservationElement = $('#new-reservation'); newReservationElement.html(''); const generatedHTML = $(newReservationTemplate()); From ff0e0200537aef5ef5c6c298e7d51e1e8a55eae6 Mon Sep 17 00:00:00 2001 From: Sara Frandsen Date: Mon, 4 Dec 2017 11:35:33 -0800 Subject: [PATCH 46/46] remove unnecessary comments --- src/app.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/app.js b/src/app.js index 9fb020d..067d7b7 100644 --- a/src/app.js +++ b/src/app.js @@ -138,8 +138,6 @@ $(document).ready(() => { singleTrip.fetch({ success: (model) => { const generatedHTML = $(aboutTemplate(model.attributes)); - console.log(generatedHTML); - // console.log(generatedHTML.prop('outerHTML')); aboutElement.html(generatedHTML); // RENDER 'RESERVATION' FORM TO DOM