From dccbbc4d66ea9f140337c0fcae2cb2431923ae47 Mon Sep 17 00:00:00 2001 From: Roxanne Date: Tue, 28 Nov 2017 16:25:24 -0800 Subject: [PATCH 01/11] added trip list collection and trip model --- dist/index.html | 6 +++++- src/app.js | 2 ++ src/app/collections/trip_list.js | 19 +++++++++++++++++++ src/app/models/trip.js | 6 ++++++ src/css/style.css | 3 +++ 5 files changed, 35 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..d93fab7 100644 --- a/dist/index.html +++ b/dist/index.html @@ -2,8 +2,11 @@ - My JavaScript App + My Trek Transporter + + +
@@ -15,6 +18,7 @@
+ diff --git a/src/app.js b/src/app.js index e7af594..17186aa 100644 --- a/src/app.js +++ b/src/app.js @@ -6,6 +6,8 @@ import _ from 'underscore'; import './css/foundation.css'; import './css/style.css'; +import BookList from './collections/book_list'; + console.log('it loaded!'); $(document).ready( () => { diff --git a/src/app/collections/trip_list.js b/src/app/collections/trip_list.js new file mode 100644 index 0000000..1997b19 --- /dev/null +++ b/src/app/collections/trip_list.js @@ -0,0 +1,19 @@ +import Backbone from 'backbone'; +import Trip from '../models/trip'; + +const TripList = Backbone.Collection.extend({ + model: Trip, + url: 'http://localhost:3000/trips', + + // we need to override parse b/c our API returns + // data in a weird format + parse: function(response) { + return response["trips"]; + }, + + + + comparator: 'title', +}); + +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; diff --git a/src/css/style.css b/src/css/style.css index b7b2d44..420a961 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -1,2 +1,5 @@ /* Your styles go here! */ +body{ + +} From a9d15b0877c97e52084e4f29d482e46291ecd442 Mon Sep 17 00:00:00 2001 From: Roxanne Date: Wed, 29 Nov 2017 12:07:33 -0800 Subject: [PATCH 02/11] added underscore template --- dist/index.html | 42 +++++++++++++++++++++++++++++++- src/app.js | 31 ++++++++++++++++++++++- src/app/collections/trip_list.js | 11 +++------ src/app/models/trip.js | 1 + 4 files changed, 75 insertions(+), 10 deletions(-) diff --git a/dist/index.html b/dist/index.html index d93fab7..3728874 100644 --- a/dist/index.html +++ b/dist/index.html @@ -4,7 +4,7 @@ My Trek Transporter - + @@ -13,11 +13,51 @@
+ + +
+

Trips

+ + + + + + + + + + + +
TitleContinentCategoryWeeksID
+
+ + + diff --git a/src/app.js b/src/app.js index 17186aa..8b89bc1 100644 --- a/src/app.js +++ b/src/app.js @@ -6,10 +6,39 @@ import _ from 'underscore'; import './css/foundation.css'; import './css/style.css'; -import BookList from './collections/book_list'; +import TripList from './app/collections/trip_list'; console.log('it loaded!'); +let tripsTemplate; + +const tripList = new TripList(); + + +const render = function renderTrips(tripList) { + + const tripTableElement = $('#trips-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'); +}; + +console.log(tripList); + + $(document).ready( () => { + tripsTemplate = _.template($('#trips-template').html()); $('main').html('

Hello World!

'); + + tripList.fetch(); + + + tripList.on('update', renderTrips); }); diff --git a/src/app/collections/trip_list.js b/src/app/collections/trip_list.js index 1997b19..00f327e 100644 --- a/src/app/collections/trip_list.js +++ b/src/app/collections/trip_list.js @@ -3,17 +3,12 @@ import Trip from '../models/trip'; const TripList = Backbone.Collection.extend({ model: Trip, - url: 'http://localhost:3000/trips', + 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) { - return response["trips"]; - }, + // // data in a weird format - - - comparator: 'title', + // comparator: 'title', }); export default TripList; diff --git a/src/app/models/trip.js b/src/app/models/trip.js index 80f14cc..2926af8 100644 --- a/src/app/models/trip.js +++ b/src/app/models/trip.js @@ -1,6 +1,7 @@ import Backbone from 'backbone'; const Trip = Backbone.Model.extend({ + }); export default Trip; From 79d3f7c1617e08a0939947fcc9ede4ea6796ccb7 Mon Sep 17 00:00:00 2001 From: Roxanne Date: Wed, 29 Nov 2017 13:59:23 -0800 Subject: [PATCH 03/11] added sorting to the table --- dist/index.html | 29 +++++++++++++++++++++---- src/app.js | 36 ++++++++++++++++++++++++++------ src/app/collections/trip_list.js | 6 +----- 3 files changed, 56 insertions(+), 15 deletions(-) diff --git a/dist/index.html b/dist/index.html index 3728874..42f6e7a 100644 --- a/dist/index.html +++ b/dist/index.html @@ -13,25 +13,30 @@
-
@@ -40,7 +45,7 @@

Trips

+ + + + diff --git a/src/app.js b/src/app.js index 8b89bc1..df33752 100644 --- a/src/app.js +++ b/src/app.js @@ -11,34 +11,58 @@ import TripList from './app/collections/trip_list'; console.log('it loaded!'); let tripsTemplate; +let tripDescriptionTemplate; const tripList = new TripList(); -const render = function renderTrips(tripList) { +const renderTrips = function renderTrips(tripList) { const tripTableElement = $('#trips-list'); tripTableElement.html(''); tripList.forEach((trip) => { - const generatedHTML = tripTemplate(trip.attributes); + const generatedHTML = tripsTemplate(trip.attributes); tripTableElement.append(generatedHTML); }); // Provide visual feedback for sorting $('th.sort').removeClass('current-sort-field'); - $(`th.sort.${ tripList.comparator }`).addClass('current-sort-field'); + // $(`th.sort.${ tripList.comparator }`).addClass('current-sort-field'); }; -console.log(tripList); +const renderTripDetails = function renderTripDetails(trip) { + + const tripDivElement = $('#trip-details'); + tripDivElement.html(''); + + const generatedHTML = tripsTemplate(trip.attributes); + console.log(trip); + console.log(`generatedHTML ${generatedHTML}`); + console.log(this); + console.log(`not sure what ${this} is`) + tripDivElement.append(generatedHTML); + +}; + +const sortTrips = function sortTrips(){ +let sortCategory = $(this).attr('class').split(' ')[1]; +tripList.comparator = sortCategory; +tripList.sort(); +console.log('sorted'); +}; $(document).ready( () => { tripsTemplate = _.template($('#trips-template').html()); - $('main').html('

Hello World!

'); + tripDescriptionTemplate = _.template($('#trips-description-template').html()); - tripList.fetch(); + tripList.fetch(); + $('.sort').on('click', sortTrips); tripList.on('update', renderTrips); + tripList.on('sort', renderTrips); + + }); diff --git a/src/app/collections/trip_list.js b/src/app/collections/trip_list.js index 00f327e..97629f0 100644 --- a/src/app/collections/trip_list.js +++ b/src/app/collections/trip_list.js @@ -4,11 +4,7 @@ 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 - - // comparator: 'title', + comparator: 'name', }); export default TripList; From 4e2465a276c96db4e6b11ab00bb4649504896626 Mon Sep 17 00:00:00 2001 From: Roxanne Date: Wed, 29 Nov 2017 16:50:29 -0800 Subject: [PATCH 04/11] finally got that single trip to show --- dist/index.html | 14 ++++++--- src/app.js | 49 +++++++++++++++++++------------- src/app/collections/trip_list.js | 5 ++++ 3 files changed, 45 insertions(+), 23 deletions(-) diff --git a/dist/index.html b/dist/index.html index 42f6e7a..9b44b9e 100644 --- a/dist/index.html +++ b/dist/index.html @@ -43,7 +43,7 @@

Trips

+ + diff --git a/src/app.js b/src/app.js index 25fe5fc..03ed310 100644 --- a/src/app.js +++ b/src/app.js @@ -12,9 +12,26 @@ console.log('it loaded!'); let tripsTemplate; let tripDescriptionTemplate; +let reserveFormTemplate; const tripList = new TripList(); +const renderReserveForm = function renderReserveForm() { + + const reserveFormDivElement = $('#hidden-form'); + console.log(reserveFormDivElement); + reserveFormDivElement.html(''); + console.log(this) + console.log(' about to fetch') + + + const reserveFormHTML = $(reserveFormTemplate()); + console.log(`this is reserveformhtml ${reserveFormHTML}`) + $("#reserve-button").remove(); + reserveFormDivElement.append(reserveFormHTML); + + +}; const renderTrips = function renderTrips(tripList) { @@ -37,13 +54,15 @@ const renderTrips = function renderTrips(tripList) { const renderTripDetails = function renderTripDetails(trip) { - const tripDivElement = $('.side-bar'); + const tripDivElement = $('#trip-details'); tripDivElement.html(''); trip.fetch({ success: (model) => { const detailsHTML = $(tripDescriptionTemplate(trip.attributes)); tripDivElement.append(detailsHTML); - } + $('#reserve-button').on('click', renderReserveForm); + $(".add-trip-form").remove(); + } }); console.log(trip); @@ -67,13 +86,12 @@ const singleTrip = function singleTrip(tripId){ $(document).ready( () => { tripsTemplate = _.template($('#trips-template').html()); tripDescriptionTemplate = _.template($('#trips-description-template').html()); - + reserveFormTemplate = _.template($('#reserve-trip-form-template').html()); tripList.fetch(); $('.sort').on('click', sortTrips); - // $('.trip').on('click', singleTrip(`${$(this).attr('id')}`)); + console.log(renderReserveForm); + // $('#reserve-button').on('click', renderReserveForm); tripList.on('update', renderTrips); tripList.on('sort', renderTrips); - - }); From 3b22165284ce00679759abac4d033ea97a904b75 Mon Sep 17 00:00:00 2001 From: Roxanne Date: Fri, 1 Dec 2017 12:46:57 -0800 Subject: [PATCH 06/11] wooooo reservations are posting to the api, finally --- dist/index.html | 31 +++++++++--- src/app.js | 89 +++++++++++++++++++++++++++++++---- src/app/models/reservation.js | 54 +++++++++++++++++++++ src/app/models/trip.js | 2 +- 4 files changed, 159 insertions(+), 17 deletions(-) create mode 100644 src/app/models/reservation.js diff --git a/dist/index.html b/dist/index.html index 942b7fc..3c6cf41 100644 --- a/dist/index.html +++ b/dist/index.html @@ -81,14 +81,16 @@

Trips

<%- name %>
-
    +
    • Cost: <%- cost %>
    • Continent: <%- continent %>
    • Duration (weeks): <%- weeks %>
    • Id: <%- id %>

    - <%- about %> + <%- about %> +
    +

@@ -97,20 +99,37 @@
<%- name %>
+ + + + diff --git a/src/app.js b/src/app.js index 03ed310..96717d3 100644 --- a/src/app.js +++ b/src/app.js @@ -7,6 +7,8 @@ import './css/foundation.css'; import './css/style.css'; import TripList from './app/collections/trip_list'; +import Trip from './app/models/trip'; +import Reservation from './app/models/reservation'; console.log('it loaded!'); @@ -16,20 +18,87 @@ let reserveFormTemplate; const tripList = new TripList(); +const saveReservation = function saveReservation(event){ + event.preventDefault(); + let tripNumberID = $('.list-upper-alpha').attr('id'); + let reservationObject = readFormData(reservationForm); + // reservationObject['id'] = reservationID + + console.log(reservationObject); + let newReservation = new Reservation(reservationObject); + console.log('bologna'); + console.log(newReservation); + console.log(`this is ${this}`); +// debugger + newReservation.save({trip_id: tripNumberID}), { + success: (model, response) => { + // debugger + console.log('Successfully added reservation!'); + // reportStatus('success', 'Successfully added reservation!'); + }, + error: (model, response) => { + console.log('Failed to save reservation! Server response:'); + console.log(response); + // handleValidationFailures(response.responseJSON["errors"]); + }, + }; +} + +const reservationForm = { + fields: ['name', 'age', 'email'], + formId: 'add-reservation-form', +}; + +// add some more stuff to this form data +const addTripForm = { + fields: ['name', 'continent', 'weeks'], + formId: 'add-trip-form', +}; + +const readFormData = function readFormData(formType) { + const formData = {}; + (formType.fields).forEach((field) => { + // select the input corresponding to the field we want + let jQueryString = "#" + `${formType.formId} [name="${ field }"]`; + const inputElement = $(jQueryString); + const value = inputElement.val(); + console.log(`value is ${value}`); + // debugger + + + // Don't take empty strings, so that Backbone can + // fill in default values + if (value != '') { + formData[field] = value; + } + + inputElement.val(''); + }); + + console.log("Read book data"); + console.log(formData); + + return formData; +}; + + + + const renderReserveForm = function renderReserveForm() { const reserveFormDivElement = $('#hidden-form'); + console.log(reserveFormDivElement); reserveFormDivElement.html(''); console.log(this) console.log(' about to fetch') - const reserveFormHTML = $(reserveFormTemplate()); - console.log(`this is reserveformhtml ${reserveFormHTML}`) - $("#reserve-button").remove(); - reserveFormDivElement.append(reserveFormHTML); - + const reserveFormHTML = $(reserveFormTemplate()); + console.log(`this is reserveformhtml ${reserveFormHTML}`) + $("#reserve-button").remove(); + reserveFormDivElement.append(reserveFormHTML); + $('#add-reservation-form').on('submit', saveReservation); }; @@ -58,11 +127,11 @@ const renderTripDetails = function renderTripDetails(trip) { tripDivElement.html(''); trip.fetch({ success: (model) => { - const detailsHTML = $(tripDescriptionTemplate(trip.attributes)); - tripDivElement.append(detailsHTML); - $('#reserve-button').on('click', renderReserveForm); - $(".add-trip-form").remove(); - } + const detailsHTML = $(tripDescriptionTemplate(trip.attributes)); + tripDivElement.append(detailsHTML); + $('#reserve-button').on('click', renderReserveForm); + $("#add-reservation-form").remove(); + } }); console.log(trip); diff --git a/src/app/models/reservation.js b/src/app/models/reservation.js new file mode 100644 index 0000000..9094e4c --- /dev/null +++ b/src/app/models/reservation.js @@ -0,0 +1,54 @@ +import Backbone from 'backbone'; + +const Reservation = Backbone.Model.extend({ + urlPrefix: 'https://ada-backtrek-api.herokuapp.com/trips', + urlSuffix: '/reservations', + // tripId: model.attributes.id, + url: function() { + let reservationUrl = this.urlPrefix; + reservationUrl += '/' + this.attributes.trip_id + this.urlSuffix + + debugger + return reservationUrl; + }, + // sync: function(method, model, options) { + // let reservationUrl = this.urlPrefix; + // reservationUrl += '/' + model.attributes.trip_id + this.urlSuffix + // + // debugger + // return reservationUrl; + // }, + // validate(attributes) { + // + // const errors = {}; + // if (!attributes.name) { + // errors.title = ['cannot be blank']; + // } + // + // if (!attributes.email) { + // errors.author = ['cannot be blank']; + // } + // + // if (!attributes.age) { + // errors.publication_year = ['cannot be blank']; + // } + // + // if (Object.keys(errors).length < 1) { + // return false; + // } + // return errors; + // }, + // + // + // + // age() { + // return (this.get('age'); + // }, + // toString() { + // return ``; + // }, + + // +}); + +export default Reservation; diff --git a/src/app/models/trip.js b/src/app/models/trip.js index 2926af8..026b15c 100644 --- a/src/app/models/trip.js +++ b/src/app/models/trip.js @@ -1,7 +1,7 @@ import Backbone from 'backbone'; const Trip = Backbone.Model.extend({ - +urlRoot: 'https://ada-backtrek-api.herokuapp.com/trips' }); export default Trip; From 1563bf7c9002ccfef31837f5114c6b21e0efd75d Mon Sep 17 00:00:00 2001 From: Roxanne Date: Fri, 1 Dec 2017 16:00:35 -0800 Subject: [PATCH 07/11] added dropdown menu, finished new trip, added button to view all trips --- dist/index.html | 93 +++++++++++++++++++++---------- src/app.js | 100 +++++++++++++++++++++++++++------- src/app/models/reservation.js | 46 ++++++++-------- src/css/style.css | 42 +++++++++++++- 4 files changed, 207 insertions(+), 74 deletions(-) diff --git a/dist/index.html b/dist/index.html index 3c6cf41..1168b2d 100644 --- a/dist/index.html +++ b/dist/index.html @@ -13,10 +13,33 @@
- +
+
-

Trek Transporter

+ +
+ -
+ + + + + +
+ +