From 64fece8b5fe21332cd158904d55f09ebb705b276 Mon Sep 17 00:00:00 2001 From: kee nam Date: Tue, 28 Nov 2017 15:31:00 -0800 Subject: [PATCH 1/7] Added trip model, collection, and basic layout --- dist/index.html | 103 +++++++++++++++++++++++++++++++++++++++++++--- src/app.js | 2 +- src/css/style.css | 15 ++++++- trip.js | 0 trip_list.js | 0 5 files changed, 113 insertions(+), 7 deletions(-) create mode 100644 trip.js create mode 100644 trip_list.js diff --git a/dist/index.html b/dist/index.html index b873b1e..a67921c 100644 --- a/dist/index.html +++ b/dist/index.html @@ -2,19 +2,112 @@ - My JavaScript App + BackTREK + + + + -
- +
+

BackTREK

-
+
+ + +
+
+
+
+
+
+ +
+
+ +
+ +
+ +
+
+ + + + + + + + + + + +
NameLocationWeeks
+
+
+ +
+
+
+ +
+
+ +
+ +
+
+
-
+
+

Copyright © 2017 Kee Nam

+ + + + + diff --git a/src/app.js b/src/app.js index e7af594..f387740 100644 --- a/src/app.js +++ b/src/app.js @@ -9,5 +9,5 @@ import './css/style.css'; console.log('it loaded!'); $(document).ready( () => { - $('main').html('

Hello World!

'); + // $('main').html('

Hello World!

'); }); diff --git a/src/css/style.css b/src/css/style.css index b7b2d44..e17b178 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -1,2 +1,15 @@ - /* Your styles go here! */ + +@import url('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css'); + +/*---------- test ----------*/ +* { border: 1px solid red !important; } +.row { + width: 100%; + margin: 0 auto; +} + +div.add-wrapper { text-align: right; } + +/*---------- footer ----------*/ +p.copyright { text-align: center; } diff --git a/trip.js b/trip.js new file mode 100644 index 0000000..e69de29 diff --git a/trip_list.js b/trip_list.js new file mode 100644 index 0000000..e69de29 From 6b4b06db9aa441a920dddde538a0d2a65f62e2d3 Mon Sep 17 00:00:00 2001 From: kee nam Date: Tue, 28 Nov 2017 16:48:30 -0800 Subject: [PATCH 2/7] Can see list of all trips; working on showing single trip details --- src/app/collections/trip_list.js | 13 +++++++++++++ 1 file changed, 13 insertions(+) create mode 100644 src/app/collections/trip_list.js diff --git a/src/app/collections/trip_list.js b/src/app/collections/trip_list.js new file mode 100644 index 0000000..0d77a1b --- /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: function(response) { + return response; + }, + comparator: 'name' +}); + +export default TripList; From 3fa1d5f5849ef21b495757e20d403a10e12666f5 Mon Sep 17 00:00:00 2001 From: kee nam Date: Tue, 28 Nov 2017 16:49:53 -0800 Subject: [PATCH 3/7] Edited and deleted a few files --- dist/index.html | 47 +++++++++++++++---------- src/app.js | 80 ++++++++++++++++++++++++++++++++++++++++-- src/app/models/trip.js | 5 +++ trip.js | 0 trip_list.js | 0 5 files changed, 111 insertions(+), 21 deletions(-) create mode 100644 src/app/models/trip.js delete mode 100644 trip.js delete mode 100644 trip_list.js diff --git a/dist/index.html b/dist/index.html index a67921c..6f6d11b 100644 --- a/dist/index.html +++ b/dist/index.html @@ -34,7 +34,7 @@

BackTREK

@@ -50,9 +50,9 @@

BackTREK

- - - + + + @@ -69,7 +69,8 @@

BackTREK

-
+
+
@@ -82,11 +83,11 @@

BackTREK

diff --git a/src/app.js b/src/app.js index f387740..b371fb0 100644 --- a/src/app.js +++ b/src/app.js @@ -6,8 +6,84 @@ import _ from 'underscore'; import './css/foundation.css'; import './css/style.css'; -console.log('it loaded!'); +import TripList from './app/collections/trip_list'; +const TRIP_FIELDS = ['name', 'continent', 'weeks']; +const DEET_FIELDS = ['name', 'continent', 'weeks', 'category', 'cost', 'about']; + +const tripList = new TripList(); +let tripTemplate; +let tripDetails; + +// RENDER +const render = function render(tripList) { + const tripTbody = $('#trip-list'); + tripTbody.html(''); + + tripList.forEach((trip) => { + const generatedHtml = tripTemplate(trip.attributes); + tripTbody.append(generatedHtml); + }); +}; + +// JQUERY $(document).ready( () => { - // $('main').html('

Hello World!

'); + tripTemplate = _.template($('#trip-template').html()); + tripDetails = _.template($('#detail-template').html()); + + console.log(`About to fetch data from ${ tripList.url }`); + + tripList.on('update', render); + // tripList.on('sort', render); + // tripList.on('click', render); + tripList.fetch(); + + TRIP_FIELDS.forEach((field) => { + const headerElement = $(`th.sort.${ field }`); + headerElement.on('click', (event) => { + tripList.comparator = field; + tripList.sort(); + }) + }); }); + +// $('#trip-list').on('click', 'a', function(event) { +// let id = $(this).find('.trip-item td[id^=trip]').attr("class"); +// console.log(id); +// }); + +// $('.trip-item td[id^=trip]').on('click', function(event) { +// let id = $(this).attr("class"); +// id = id.slice(8); +// id = parseInt(id); +// let reserve_url = `https://ada-backtrek-api.herokuapp.com/trips/${id}`; +// +// // tripList.url = reserve_url +// console.log(reserve_url); +// // tripList.fetch(); +// }); + +$('tbody#trip-list').on('click', 'a', function() { + let tripID = $(this).attr('data-id'); + loadTrip(tripID); +}); + +let loadTrip = function loadTrip(id) { + + let url = `https://ada-backtrek-api.herokuapp.com/trips/${id}` + $.get(`${url}`, function(data) { + data.category = data.category.charAt(0).toUpperCase() + data.category.slice(1); + data.cost = parseFloat(Math.round(data.cost * 100) / 100).toFixed(2); + + const tripDiv = $('#trip-details'); + tripDiv.html(''); + + console.log(url); + console.log(tripDetails); + console.log(tripDetails.attributes); + + const generatedHtml = tripDetails(attributes); + tripDiv.append(generatedHtml); + + }); +}; diff --git a/src/app/models/trip.js b/src/app/models/trip.js new file mode 100644 index 0000000..b81546a --- /dev/null +++ b/src/app/models/trip.js @@ -0,0 +1,5 @@ +import Backbone from 'backbone'; + +const Trip = Backbone.Model.extend({}); + +export default Trip; diff --git a/trip.js b/trip.js deleted file mode 100644 index e69de29..0000000 diff --git a/trip_list.js b/trip_list.js deleted file mode 100644 index e69de29..0000000 From 76fcefc97c955a6177e48a121d8e31cc88e267af Mon Sep 17 00:00:00 2001 From: kee nam Date: Fri, 1 Dec 2017 15:34:23 -0800 Subject: [PATCH 4/7] Finished wave 1 display requirements --- dist/index.html | 18 +++--- src/app.js | 101 ++++++++++++++++++------------- src/app/collections/trip_list.js | 8 ++- src/app/models/trip.js | 7 ++- src/css/style.css | 20 +++++- 5 files changed, 97 insertions(+), 57 deletions(-) diff --git a/dist/index.html b/dist/index.html index 6f6d11b..b551688 100644 --- a/dist/index.html +++ b/dist/index.html @@ -9,7 +9,7 @@ - +
@@ -30,7 +30,7 @@

BackTREK

-
+
NameLocationWeeksNamePlaceWeeks
@@ -100,21 +98,21 @@

BackTREK

<%- name %>

-

<%- continent >

+

Continent: <%- continent %>

-

<%- weeks >

+

Weeks: <%- weeks %>

-

<%- category >

+

Category: <%- category %>

-

<%- cost >

+

Cost: $<%- cost %>

-

<%- about >

+

About:

+

<%- about %>

- diff --git a/src/app.js b/src/app.js index b371fb0..deaa56b 100644 --- a/src/app.js +++ b/src/app.js @@ -6,16 +6,20 @@ import _ from 'underscore'; import './css/foundation.css'; import './css/style.css'; +// do i need you? -- I THINK SO +import Trip from './app/models/trip'; import TripList from './app/collections/trip_list'; -const TRIP_FIELDS = ['name', 'continent', 'weeks']; -const DEET_FIELDS = ['name', 'continent', 'weeks', 'category', 'cost', 'about']; +// ALL THE FIELDS +const TRIP_FIELDS = ['id', 'name', 'continent', 'about', 'category', 'weeks', 'cost']; const tripList = new TripList(); +let trip = new Trip(); + let tripTemplate; let tripDetails; -// RENDER +// RENDERS const render = function render(tripList) { const tripTbody = $('#trip-list'); tripTbody.html(''); @@ -26,18 +30,35 @@ const render = function render(tripList) { }); }; +const renderDetails = function renderDetails(trip){ + const detailsDiv = $('#trip-details'); + detailsDiv.html(''); + + console.log(trip.attributes); + + trip.fetch({ + success: (model) => { + const generatedHTML = $(tripDetails(trip.attributes)); + detailsDiv.append(generatedHTML); + console.log(trip); + } + }); +}; + // JQUERY $(document).ready( () => { + // my templates tripTemplate = _.template($('#trip-template').html()); tripDetails = _.template($('#detail-template').html()); console.log(`About to fetch data from ${ tripList.url }`); tripList.on('update', render); - // tripList.on('sort', render); - // tripList.on('click', render); tripList.fetch(); + trip.on('click', renderDetails); + trip.fetch(); + TRIP_FIELDS.forEach((field) => { const headerElement = $(`th.sort.${ field }`); headerElement.on('click', (event) => { @@ -47,43 +68,41 @@ $(document).ready( () => { }); }); -// $('#trip-list').on('click', 'a', function(event) { -// let id = $(this).find('.trip-item td[id^=trip]').attr("class"); -// console.log(id); -// }); - -// $('.trip-item td[id^=trip]').on('click', function(event) { -// let id = $(this).attr("class"); -// id = id.slice(8); -// id = parseInt(id); -// let reserve_url = `https://ada-backtrek-api.herokuapp.com/trips/${id}`; -// -// // tripList.url = reserve_url -// console.log(reserve_url); -// // tripList.fetch(); -// }); - $('tbody#trip-list').on('click', 'a', function() { let tripID = $(this).attr('data-id'); - loadTrip(tripID); + trip = tripList.get(tripID); + console.log(trip); + console.log(trip.attributes); + trip.on('click', renderDetails(trip)); + // trip.fetch(); }); -let loadTrip = function loadTrip(id) { - - let url = `https://ada-backtrek-api.herokuapp.com/trips/${id}` - $.get(`${url}`, function(data) { - data.category = data.category.charAt(0).toUpperCase() + data.category.slice(1); - data.cost = parseFloat(Math.round(data.cost * 100) / 100).toFixed(2); - - const tripDiv = $('#trip-details'); - tripDiv.html(''); - - console.log(url); - console.log(tripDetails); - console.log(tripDetails.attributes); - - const generatedHtml = tripDetails(attributes); - tripDiv.append(generatedHtml); - - }); -}; +// $('tbody#trip-list').on('click', 'a', function() { +// // where you will go +// const tripDiv = $('#trip-details'); +// tripDiv.html(''); +// +// // who are you +// let tripID = $(this).attr('data-id'); +// let thisTrip = new Trip({ id: `${tripID}` }); +// thisTrip.fetch(); +// // console.log(thisTrip); +// // let tripInf = trip.fetch(tripID); +// // console.log(tripList.models); +// // let thisTrip = Trip.where({ id: `${tripID}` }); +// // console.log(thisTrip); +// // let tripInf = tripList.where({ id: `${tripID}` }); +// +// // console.log(tripID); +// // console.log(tripInf); +// console.log(thisTrip); +// console.log(thisTrip.attributes); +// // console.log(thisTrip.attributes.get('name')); +// console.log(thisTrip.attributes.name); +// console.log(thisTrip.attributes['continent']); +// +// // append that +// const generatedHtml = $(tripDetails(thisTrip.attributes)); +// // const generatedHtml = tripDetails(thisTrip.attributes); +// tripDiv.append(generatedHtml); +// }); diff --git a/src/app/collections/trip_list.js b/src/app/collections/trip_list.js index 0d77a1b..c073acd 100644 --- a/src/app/collections/trip_list.js +++ b/src/app/collections/trip_list.js @@ -3,11 +3,15 @@ import Trip from '../models/trip'; const TripList = Backbone.Collection.extend({ model: Trip, - url: 'https://ada-backtrek-api.herokuapp.com/trips', + url: 'https://ada-backtrek-api.herokuapp.com/trips/', parse: function(response) { return response; }, - comparator: 'name' + comparator: 'name', + + initialize: function () { + this.model = Trip; + } }); export default TripList; diff --git a/src/app/models/trip.js b/src/app/models/trip.js index b81546a..dfb43b7 100644 --- a/src/app/models/trip.js +++ b/src/app/models/trip.js @@ -1,5 +1,10 @@ import Backbone from 'backbone'; -const Trip = Backbone.Model.extend({}); +const Trip = Backbone.Model.extend({ + urlRoot: `https://ada-backtrek-api.herokuapp.com/trips`, + parse: function(response) { + return response; + }, +}); export default Trip; diff --git a/src/css/style.css b/src/css/style.css index e17b178..c7f10f0 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -3,11 +3,25 @@ @import url('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css'); /*---------- test ----------*/ -* { border: 1px solid red !important; } -.row { +/** { border: 1px solid red !important; }*/ + + + +html { box-sizing: border-box; } +*, *:before, *:after { box-sizing: inherit; } +html, body { height: 100%; } +body { width: 100%; - margin: 0 auto; + padding: 0; + font-size: 16px; +} +a:hover, +button:hover { + cursor: pointer; } +header, main, footer {width: 100%; max-width: 100%; } +.row { margin: 0; max-width: 100%; } +.row .row { margin: 0; } div.add-wrapper { text-align: right; } From c478ce2dfb6e4cac01b7d0b8884667f8a8ff29c5 Mon Sep 17 00:00:00 2001 From: kee nam Date: Fri, 1 Dec 2017 21:23:29 -0800 Subject: [PATCH 5/7] Working on add trip module --- dist/index.html | 42 ++++++++++++++++++++++++++++++++++++++++-- src/css/style.css | 6 ++++++ 2 files changed, 46 insertions(+), 2 deletions(-) diff --git a/dist/index.html b/dist/index.html index b551688..544fada 100644 --- a/dist/index.html +++ b/dist/index.html @@ -6,7 +6,7 @@ - + @@ -63,7 +63,42 @@

BackTREK

- + +
+
@@ -115,6 +150,9 @@

About:

+ + + diff --git a/src/css/style.css b/src/css/style.css index c7f10f0..6e8a3f1 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -25,5 +25,11 @@ header, main, footer {width: 100%; max-width: 100%; } div.add-wrapper { text-align: right; } + +/*---------- form ----------*/ +input#search-query { margin: 0; } +select#search-select { width: 100%; } + + /*---------- footer ----------*/ p.copyright { text-align: center; } From d3cba78f90521454cf2fea81433ded7794a53b58 Mon Sep 17 00:00:00 2001 From: kee nam Date: Mon, 4 Dec 2017 13:49:03 -0800 Subject: [PATCH 6/7] Working on posting additional trips --- dist/index.html | 43 ++++++++++++++++++++++---------- src/app.js | 63 +++++++++++++++++------------------------------ src/css/style.css | 35 +++++++++++++++++++++++++- 3 files changed, 86 insertions(+), 55 deletions(-) diff --git a/dist/index.html b/dist/index.html index 544fada..36d12aa 100644 --- a/dist/index.html +++ b/dist/index.html @@ -9,7 +9,7 @@ - +
@@ -31,7 +31,8 @@

BackTREK

-
+ +
- +
@@ -63,7 +64,7 @@

BackTREK

- +
@@ -130,22 +147,22 @@
Add Trip
diff --git a/src/app.js b/src/app.js index deaa56b..d0a4318 100644 --- a/src/app.js +++ b/src/app.js @@ -33,9 +33,6 @@ const render = function render(tripList) { const renderDetails = function renderDetails(trip){ const detailsDiv = $('#trip-details'); detailsDiv.html(''); - - console.log(trip.attributes); - trip.fetch({ success: (model) => { const generatedHTML = $(tripDetails(trip.attributes)); @@ -66,43 +63,27 @@ $(document).ready( () => { tripList.sort(); }) }); -}); -$('tbody#trip-list').on('click', 'a', function() { - let tripID = $(this).attr('data-id'); - trip = tripList.get(tripID); - console.log(trip); - console.log(trip.attributes); - trip.on('click', renderDetails(trip)); - // trip.fetch(); -}); + // Show individual trip details + $('tbody#trip-list').on('click', 'a', function() { + let tripID = $(this).attr('data-id'); + trip = tripList.get(tripID); + trip.on('click', renderDetails(trip)); + }); -// $('tbody#trip-list').on('click', 'a', function() { -// // where you will go -// const tripDiv = $('#trip-details'); -// tripDiv.html(''); -// -// // who are you -// let tripID = $(this).attr('data-id'); -// let thisTrip = new Trip({ id: `${tripID}` }); -// thisTrip.fetch(); -// // console.log(thisTrip); -// // let tripInf = trip.fetch(tripID); -// // console.log(tripList.models); -// // let thisTrip = Trip.where({ id: `${tripID}` }); -// // console.log(thisTrip); -// // let tripInf = tripList.where({ id: `${tripID}` }); -// -// // console.log(tripID); -// // console.log(tripInf); -// console.log(thisTrip); -// console.log(thisTrip.attributes); -// // console.log(thisTrip.attributes.get('name')); -// console.log(thisTrip.attributes.name); -// console.log(thisTrip.attributes['continent']); -// -// // append that -// const generatedHtml = $(tripDetails(thisTrip.attributes)); -// // const generatedHtml = tripDetails(thisTrip.attributes); -// tripDiv.append(generatedHtml); -// }); + // Listen for form submissions + $('#add-trip-form').on('submit', (event) => { + event.preventDefault(); + + const tripData = readForm(); + const trip = tripList.add(tripData); + console.log(tripData); + console.log(trip); + trip.save({}, { + // success: clearForm, + // error: booksApiErrorHandler + }); + + }); + +}); diff --git a/src/css/style.css b/src/css/style.css index 6e8a3f1..f2ab075 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -1,6 +1,7 @@ /* Your styles go here! */ @import url('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css'); +@import url('https://fonts.googleapis.com/css?family=Judson|Quando'); /*---------- test ----------*/ /** { border: 1px solid red !important; }*/ @@ -14,22 +15,54 @@ body { width: 100%; padding: 0; font-size: 16px; + background: linear-gradient(to bottom, #6790c6 0%,#343789 100%); + background-repeat: no-repeat; + background-attachment: fixed; + font-family: 'Quando', serif; } +h1, h2, button { font-family: 'Judson', serif; } a:hover, button:hover { cursor: pointer; } -header, main, footer {width: 100%; max-width: 100%; } +header, main, footer { width: 100%; max-width: 100%; } .row { margin: 0; max-width: 100%; } .row .row { margin: 0; } div.add-wrapper { text-align: right; } +header.header { margin: 0.5% 2% 1%; } +section.main-content { margin-top: 1%; } + +i.fa { margin-right: 2%; } +i.fa-search { margin: 0; } + +h1.col { color: #fefefe; } + + + +/*---------- table ----------*/ +table#trip-table { margin-top: 5%; } /*---------- form ----------*/ input#search-query { margin: 0; } select#search-select { width: 100%; } +/*---------- trip details ----------*/ +div#trip-details { + margin-top: 5%; + background: #fafafa; + /*padding: 2% 4%;*/ + border-radius: 4px; +} +div#trip-details div { padding: 2% 4% 1%;} +h2.detail-name { + margin-bottom: 2%; + padding: 1% 1% 2%; + border-bottom: 2px solid #ededed; +} + + /*---------- footer ----------*/ p.copyright { text-align: center; } From 92ed1e488b64e918a077598b6179407d8d7384d0 Mon Sep 17 00:00:00 2001 From: kee nam Date: Thu, 7 Dec 2017 14:24:53 -0800 Subject: [PATCH 7/7] Trying to fix add trip functionality --- dist/index.html | 229 ++++++++++++++++++++++++---------------------- src/app.js | 11 ++- src/css/style.css | 10 +- 3 files changed, 136 insertions(+), 114 deletions(-) diff --git a/dist/index.html b/dist/index.html index 36d12aa..39c7a20 100644 --- a/dist/index.html +++ b/dist/index.html @@ -12,124 +12,133 @@ -
-

BackTREK

-
- -
- - -
-
-
-
-
- -
- -
-
- -
- - -
-
-
- - - - - - - - - - -
NamePlaceWeeks
- - - -
-
-
- +
+
+

BackTREK

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

Copyright © 2017 Kee Nam

+
+ + + - - - - -
-

Copyright © 2017 Kee Nam

-