From 133f20bf1667ebd4131578848738c39d9a58ca7d Mon Sep 17 00:00:00 2001 From: Jan Edrozo Date: Tue, 28 Nov 2017 16:59:54 -0800 Subject: [PATCH 01/20] W1:A user can click a link to see a list of trips requirement complete --- dist/index.html | 42 ++++++++++++++++++++++++++++++++ src/app.js | 41 ++++++++++++++++++++++++++++++- src/app/collections/trip_list.js | 13 ++++++++++ src/app/models/trip.js | 10 ++++++++ 4 files changed, 105 insertions(+), 1 deletion(-) create mode 100644 src/app/collections/trip_list.js create mode 100644 src/app/models/trip.js diff --git a/dist/index.html b/dist/index.html index b873b1e..8984e00 100644 --- a/dist/index.html +++ b/dist/index.html @@ -7,14 +7,56 @@
+

BackTREK

+
+
+
+

Trips

+ + + + + + + + + + + +
NameContinentCategoryWeeksCost
+
+
+ + diff --git a/src/app.js b/src/app.js index e7af594..0fb4088 100644 --- a/src/app.js +++ b/src/app.js @@ -6,8 +6,47 @@ import _ from 'underscore'; import './css/foundation.css'; import './css/style.css'; +// MODELS +import Trip from './app/models/trip'; + +// COLLECTION +import TripList from './app/collections/trip_list'; + +// INITITAL SET UP CHECK console.log('it loaded!'); +const tripList = new TripList(); +// console.log('TRIPLIST:'); +// console.log(tripList); + +let tripTemplate; + +const render = function render(tripList) { + console.log('TOP OF RENDER') + console.log(tripList); + const $tripList = $('#trip-list'); + //Clears the list so when you re-render it doesn't print duplicates + $tripList.empty(); + + tripList.forEach((trip) => { + $tripList.append(tripTemplate(trip.attributes)); + console.log(trip.attributes); + }); +}; + +const loadTrips = function loadTrips() { + tripList.fetch(); + tripList.on('update', render, tripList); +}; + $(document).ready( () => { - $('main').html('

Hello World!

'); + $('#all-trips-table').hide(); + tripTemplate = _.template($('#trip-template').html()); + + // EVENTS + // To view All Trips + $('#all-trips').on('click', function() { + $('#all-trips-table').show(); + loadTrips(); + }); }); diff --git a/src/app/collections/trip_list.js b/src/app/collections/trip_list.js new file mode 100644 index 0000000..0496f17 --- /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', + parse(response) { + return response; + console.log(response); + }, +}); + +export default TripList; diff --git a/src/app/models/trip.js b/src/app/models/trip.js new file mode 100644 index 0000000..3ab4cab --- /dev/null +++ b/src/app/models/trip.js @@ -0,0 +1,10 @@ +import Backbone from 'backbone'; + +// 1. Define Model and give it a name +const Trip = Backbone.Model.extend({ + // custom code; we are going to use Book as a class; so we can get an instance of Model Book +}); + +// Makes sure when book.js is imported, they get Book automatically +// You can export different things in a file, but it is best practice to export 1 thing per file. +export default Trip; From 5d2f3bfbdbea0907ed765abf81d4c2b3dec4191e Mon Sep 17 00:00:00 2001 From: Jan Edrozo Date: Tue, 28 Nov 2017 18:21:22 -0800 Subject: [PATCH 02/20] Updated Trip Model to include urlRoot and idAttribute; Added event listener so upon clicking a trip's row, a single trip's info is fetch (still need to work on its display) --- dist/index.html | 4 ++-- src/app.js | 16 ++++++++++++++++ src/app/models/trip.js | 2 ++ 3 files changed, 20 insertions(+), 2 deletions(-) diff --git a/dist/index.html b/dist/index.html index 8984e00..39b21f3 100644 --- a/dist/index.html +++ b/dist/index.html @@ -9,8 +9,8 @@

BackTREK

@@ -39,7 +39,7 @@

Trips

@@ -16,13 +17,11 @@

BackTREK

- -
+

Trips

- - + @@ -33,6 +32,11 @@

Trips

NameName Continent Category Weeks
+ +