From 347c599a5931e2fe82ef47733b670d9b28c140b7 Mon Sep 17 00:00:00 2001 From: Kimberley Zell Date: Tue, 28 Nov 2017 17:21:29 -0800 Subject: [PATCH 01/13] updating --- dist/index.html | 67 +++++++++++++++++++ src/app.js | 107 ++++++++++++++++++++++++++++++- src/app/collections/trip_list.js | 20 ++++++ src/app/models/trip.js | 6 ++ 4 files changed, 197 insertions(+), 3 deletions(-) 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..7e5cf71 100644 --- a/dist/index.html +++ b/dist/index.html @@ -11,10 +11,77 @@
+ +
+

All Trips

+ + + + + + + + + + + + +
IDNameContinentCategoryWeeksCost
+
+ + + + + diff --git a/src/app.js b/src/app.js index e7af594..f6486aa 100644 --- a/src/app.js +++ b/src/app.js @@ -6,8 +6,109 @@ import _ from 'underscore'; import './css/foundation.css'; import './css/style.css'; -console.log('it loaded!'); -$(document).ready( () => { - $('main').html('

Hello World!

'); +import TripList from './app/collections/trip_list'; + +//Data from the API /trips +// {"id":1,"name":"Cairo to Zanzibar","continent":"Africa","category":"everything","weeks":5,"cost":9599.99} + +// +const TRIP_FIELDS = ['id', '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); + }); + console.log('ran render'); + console.dir(tripList); + + // SORTING + // Provide visual feedback for sorting + $('th.sort').removeClass('current-sort-field'); + $(`th.sort.${tripList.comparator}`).addClass('current-sort-field'); + +}; + +const renderSingleTrip = function render(trip) { + +} + + +//ADDING A TRIP +// const addBookHandler = function(event) { + // event.preventDefault(); +// +// const tripData = {}; +// TRIP_FIELDS.forEach((field) => { +// // select the input corresponding to the field we want +// const inputElement = $(`#add-book-form input[name="${ field }"]`); +// const value = inputElement.val(); +// bookData[field] = value; +// +// inputElement.val(''); +// }); +// +// console.log("Read book data"); +// console.log(bookData); +// +// const book = bookList.add(bookData); +// book.save({}, { +// success: (model, response) => { +// console.log('Successfully saved book!'); +// }, +// error: (model, response) => { +// console.log('Failed to save book! 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); + +// Fetch is what gets the data +// When fetch gets back from the API call, it will add trips +// to the list and then trigger an 'update' event + tripList.fetch(); + + console.log(tripList); + +// // Listen for when the user adds a book +// $('#add-book-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(); + }); + }); + }); + + +// $(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..81ee826 --- /dev/null +++ b/src/app/collections/trip_list.js @@ -0,0 +1,20 @@ +import Backbone from 'backbone'; +import Trip from '../models/trip'; + +const TripList = Backbone.Collection.extend({ + model: Trip, + url: 'https://ada-backtrek-api.herokuapp.com/trips', + + // we need to override parse b/c our API returns + // data in a weird format + parse: function(response) { + console.log(response); + return response; + }, + + + + comparator: 'id', +}); + +export default TripList; diff --git a/src/app/models/trip.js b/src/app/models/trip.js new file mode 100644 index 0000000..80f14cc --- /dev/null +++ b/src/app/models/trip.js @@ -0,0 +1,6 @@ +import Backbone from 'backbone'; + +const Trip = Backbone.Model.extend({ +}); + +export default Trip; From a0fccc5179278e24e2a916227b46aadf53edc141 Mon Sep 17 00:00:00 2001 From: Kimberley Zell Date: Wed, 29 Nov 2017 12:34:33 -0800 Subject: [PATCH 02/13] trying to add the 'about' field but it broke things --- dist/index.html | 44 +++++++++++++++--- src/app.js | 103 ++++++++++++++++++++++++++--------------- src/app/models/trip.js | 2 + 3 files changed, 106 insertions(+), 43 deletions(-) diff --git a/dist/index.html b/dist/index.html index 7e5cf71..75f53f7 100644 --- a/dist/index.html +++ b/dist/index.html @@ -11,8 +11,32 @@
+ + +

All Trips

@@ -28,18 +52,25 @@

All Trips

+ +
+ +
+ +
@@ -76,9 +110,7 @@

All Trips

  • Cost: <%- cost %>
    • -
  • - Description: <%- description %> -
    • + diff --git a/src/app.js b/src/app.js index f6486aa..e9abc73 100644 --- a/src/app.js +++ b/src/app.js @@ -8,12 +8,13 @@ import './css/style.css'; import TripList from './app/collections/trip_list'; +import Trip from './app/models/trip'; //Data from the API /trips // {"id":1,"name":"Cairo to Zanzibar","continent":"Africa","category":"everything","weeks":5,"cost":9599.99} // -const TRIP_FIELDS = ['id', 'name', 'continent', 'category', 'weeks', 'cost']; +const TRIP_FIELDS = ['id', 'name', 'continent', 'category', 'weeks', 'cost', 'about']; const tripList = new TripList(); // @@ -22,7 +23,7 @@ const tripList = new TripList(); let tripTemplate; -const render = function render(tripList) { +const renderTrips = function renderTrips(tripList) { // iterate through the tripList, generate HTML // for each model and attatch it to the DOM const tripTableElement = $('#trip-list'); @@ -42,48 +43,57 @@ const render = function render(tripList) { }; -const renderSingleTrip = function render(trip) { +let singleTripTemplate; + +const renderSingleTrip = function renderSingleTrip(trip) { + const tripElement = $('#trip-detail'); + const generatedHTML = singleTripTemplate(trip.attributes); + tripElement.html(generatedHTML); + + console.log("checking this"); } //ADDING A TRIP -// const addBookHandler = function(event) { - // event.preventDefault(); -// -// const tripData = {}; -// TRIP_FIELDS.forEach((field) => { -// // select the input corresponding to the field we want -// const inputElement = $(`#add-book-form input[name="${ field }"]`); -// const value = inputElement.val(); -// bookData[field] = value; -// -// inputElement.val(''); -// }); -// -// console.log("Read book data"); -// console.log(bookData); -// -// const book = bookList.add(bookData); -// book.save({}, { -// success: (model, response) => { -// console.log('Successfully saved book!'); -// }, -// error: (model, response) => { -// console.log('Failed to save book! Server response:'); -// console.log(response); -// }, -// }); -// }; -// +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(''); +}); + + 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); + tripList.on('update', renderTrips); + tripList.on('sort', renderTrips); // Fetch is what gets the data // When fetch gets back from the API call, it will add trips @@ -92,11 +102,10 @@ $(document).ready(() => { console.log(tripList); -// // Listen for when the user adds a book -// $('#add-book-form').on('submit', addBookHandler); -// +// Sort Trip List by Trip Fields // Add a click handler for each of the table headers -// to sort the table by that column +//to sort the table by that column + TRIP_FIELDS.forEach((field) => { const headerElement = $(`th.sort.${ field }`); headerElement.on('click', (event) => { @@ -106,6 +115,26 @@ $(document).ready(() => { }); }); + + // Listen for when the user adds a trip + $('#add-trip-form').on('submit', addTripHandler); + + + // SINGLE TRIP TEMPLATE + singleTripTemplate = _.template($('#single-trip-template').html()); + + $('#trip-list').on('click', '.trip', function(event) { + // alert($(this).data("id")); + const trip = new Trip( {id: $(this).data("id") } ); + trip.on('change', renderSingleTrip); + trip.fetch(); + + + + }); + + + }); diff --git a/src/app/models/trip.js b/src/app/models/trip.js index 80f14cc..dac578e 100644 --- a/src/app/models/trip.js +++ b/src/app/models/trip.js @@ -1,6 +1,8 @@ import Backbone from 'backbone'; const Trip = Backbone.Model.extend({ + urlRoot: 'https://ada-backtrek-api.herokuapp.com/trips', + }); export default Trip; From 5f19edb8ce4e279f9f835c80acd03604b9987187 Mon Sep 17 00:00:00 2001 From: Kimberley Zell Date: Wed, 29 Nov 2017 14:12:18 -0800 Subject: [PATCH 03/13] trying to get reserve a spot form to show on click of button but it's not showing --- dist/index.html | 26 ++++++++++++++++++++------ src/app.js | 15 +++++++++++---- 2 files changed, 31 insertions(+), 10 deletions(-) diff --git a/dist/index.html b/dist/index.html index 75f53f7..2d79389 100644 --- a/dist/index.html +++ b/dist/index.html @@ -29,8 +29,7 @@

    Add a Trip

    - - + @@ -53,11 +52,27 @@

    All Trips

    +
    + +
    +