From 6fee879def980e0ef3ff84d97a47032560795c2e Mon Sep 17 00:00:00 2001 From: Sarah Read-Brown Date: Tue, 28 Nov 2017 15:22:29 -0800 Subject: [PATCH 01/22] Added trip model and trip_list collection and successfully outputed an instance of the collection to the console --- src/app.js | 19 ++++++++++++++++++- src/app/collections/trip_list.js | 13 +++++++++++++ src/app/models/trip.js | 10 ++++++++++ 3 files changed, 41 insertions(+), 1 deletion(-) create mode 100644 src/app/collections/trip_list.js create mode 100644 src/app/models/trip.js diff --git a/src/app.js b/src/app.js index e7af594..03be34e 100644 --- a/src/app.js +++ b/src/app.js @@ -6,7 +6,24 @@ import _ from 'underscore'; import './css/foundation.css'; import './css/style.css'; -console.log('it loaded!'); +// Our components +import TripList from './app/collections/trip_list'; +// import Trip from './app/models/trip'; + + +let myTrip = { + "id":1, + "name":"Cairo to Zanzibar", + "continent":"Africa", + "category":"everything", + "weeks":5, + "cost":9599.99 +}; + +const tripList = new TripList(); + +tripList.add(myTrip); +console.log(tripList); $(document).ready( () => { $('main').html('

Hello World!

'); diff --git a/src/app/collections/trip_list.js b/src/app/collections/trip_list.js new file mode 100644 index 0000000..c92e025 --- /dev/null +++ b/src/app/collections/trip_list.js @@ -0,0 +1,13 @@ +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: 'title', + // parse: function(response) { + // return response["books"]; + // } +}); + +export default Triplist; diff --git a/src/app/models/trip.js b/src/app/models/trip.js new file mode 100644 index 0000000..217c586 --- /dev/null +++ b/src/app/models/trip.js @@ -0,0 +1,10 @@ +import Backbone from 'backbone'; + +const Trip = Backbone.Model.extend({ + // default: { + // author: 'Unknown' + // } +}); + + +export default Trip; From 1fbdeb3ff923a8716af3711dbfa36b7671de2095 Mon Sep 17 00:00:00 2001 From: Sarah Read-Brown Date: Tue, 28 Nov 2017 16:08:32 -0800 Subject: [PATCH 02/22] Adds html and js for a successful underscore template. Got api trip data to load on page. --- dist/index.html | 64 ++++++++++++++++++++++++-------- src/app.js | 36 ++++++++++++------ src/app/collections/trip_list.js | 8 ++-- 3 files changed, 76 insertions(+), 32 deletions(-) diff --git a/dist/index.html b/dist/index.html index b873b1e..12e9dc6 100644 --- a/dist/index.html +++ b/dist/index.html @@ -1,20 +1,52 @@ - - - My JavaScript App - - - -
+ + + My JavaScript App + + + +
+

Trek!

+
+
+
+

Trips!

+ + + + + + + + + + +
NameContinentCategoryWeeksCost
+
+
+
-
-
- -
-
- -
- - + + + + diff --git a/src/app.js b/src/app.js index 03be34e..26319f7 100644 --- a/src/app.js +++ b/src/app.js @@ -8,23 +8,35 @@ import './css/style.css'; // Our components import TripList from './app/collections/trip_list'; -// import Trip from './app/models/trip'; +const tripList = new TripList(); + +const TRIP_FIELDS = ["id", "name", "continent", "category", "weeks", "cost"]; + +let tripTemplate; + +const render = function render(tripList) { + // iterate through the bookList, generate HTML + // for each model and attatch it to the DOM + const tripTableElement = $('#trip-list'); -let myTrip = { - "id":1, - "name":"Cairo to Zanzibar", - "continent":"Africa", - "category":"everything", - "weeks":5, - "cost":9599.99 + // clears the html so when we dynamically render again we get a new list vs just adding on + tripTableElement.html(''); + + tripList.forEach((trip) => { + const generatedHTML = tripTemplate(trip.attributes); + tripTableElement.append(generatedHTML); + }); }; -const tripList = new TripList(); -tripList.add(myTrip); -console.log(tripList); $(document).ready( () => { - $('main').html('

Hello World!

'); + tripTemplate = _.template($('#trip-template').html()); + + // adding new models to a collection triggers an update event + tripList.on('update', render); + + // get all of the trips from the API + tripList.fetch(); }); diff --git a/src/app/collections/trip_list.js b/src/app/collections/trip_list.js index c92e025..1098250 100644 --- a/src/app/collections/trip_list.js +++ b/src/app/collections/trip_list.js @@ -4,10 +4,10 @@ import Trip from '../models/trip'; const Triplist = Backbone.Collection.extend({ model: Trip, url: 'https://ada-backtrek-api.herokuapp.com/trips', - // comparator: 'title', - // parse: function(response) { - // return response["books"]; - // } + comparator: 'name', + parse: function(response){ + return response; + } }); export default Triplist; From c7fccfeb3ab55f8ede73537c7146027e6b8953f1 Mon Sep 17 00:00:00 2001 From: Sarah Read-Brown Date: Wed, 29 Nov 2017 14:40:18 -0800 Subject: [PATCH 03/22] set up some basic html foundation styling to split the page into right and left, adds template for trip details --- dist/index.html | 64 ++++++++++++++++++++++++++++++++++++----------- src/app.js | 10 +++++++- src/css/style.css | 11 +++++++- 3 files changed, 69 insertions(+), 16 deletions(-) diff --git a/dist/index.html b/dist/index.html index 12e9dc6..a8fd3c7 100644 --- a/dist/index.html +++ b/dist/index.html @@ -10,20 +10,44 @@

Trek!

-
-

Trips!

- - - - - - - - - - -
NameContinentCategoryWeeksCost
-
+
+
+
+

Trips!

+ + + + + + + + + + +
NameContinentCategoryWeeksCost
+
+
+ +