From 471d6b52aba280c75137f3861217b12ce09cb527 Mon Sep 17 00:00:00 2001 From: Sairagul Abdukhalieva Date: Thu, 30 Nov 2017 13:57:05 -0800 Subject: [PATCH 1/8] Wave1, gives all trips --- dist/index.html | 94 +++++++++++++++++++++++++++++--- src/app.js | 54 +++++++++++++++++- src/app/collections/trip_list.js | 11 ++++ src/app/models/trip.js | 27 +++++++++ src/css/style.css | 93 +++++++++++++++++++++++++++++++ 5 files changed, 267 insertions(+), 12 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..3285756 100644 --- a/dist/index.html +++ b/dist/index.html @@ -2,19 +2,95 @@ - My JavaScript App + Back Trek + + + + + + + + + + +
- +
+

Travel Trek

+ +

-
-
- - - - + + + diff --git a/src/app.js b/src/app.js index e7af594..30f8d72 100644 --- a/src/app.js +++ b/src/app.js @@ -6,8 +6,56 @@ import _ from 'underscore'; import './css/foundation.css'; import './css/style.css'; +// Our components +// import Trip from './app/models/trip'; +import TripList from './app/collections/trip_list'; console.log('it loaded!'); -$(document).ready( () => { - $('main').html('

Hello World!

'); -}); +// const TRIP_FIELDS = ['id', 'name', 'continent', 'category', 'weeks', 'cost']; +const tripList = new TripList(); +// const trip = new Trip(); + +let tripsTemplate; + +const render = function render(tripList){ + const tripsTableElement = $('#trip-list'); + $('thead').hide(); + + tripsTableElement.html(''); + + + tripList.forEach((trip) => { + const generatedHTML = $(tripsTemplate(trip.attributes)); + generatedHTML.on('click',(event) => { + renderTrip(trip) + $('#trips').hide(); + $('#trip').show(); + }); //.on + tripsTableElement.append(generatedHTML); + }); //tripList +}; // render + const renderTrip = function render(trip){ + const tripTableElement = $('#trip'); + tripTableElement.html(''); + + const generatedHTML = $(tripsTemplate(trip.attributes)); + tripTableElement.html(generatedHTML); + } + + // const loadtrip = function loadtrip(){ + // trip.fetch(); + // trip.on('update', renderTrip, trip); + // } + + + $(document).ready(() => { + tripsTemplate = _.template($('#trips-template').html()); + $('#trip-list').hide(); + $('#load').on('click', function(){ + $('#trip-list').show(); + }); + tripList.fetch(); + tripList.on('update',render); + + + }); diff --git a/src/app/collections/trip_list.js b/src/app/collections/trip_list.js new file mode 100644 index 0000000..b718a24 --- /dev/null +++ b/src/app/collections/trip_list.js @@ -0,0 +1,11 @@ +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: 'id' +}); + +export default TripList; diff --git a/src/app/models/trip.js b/src/app/models/trip.js new file mode 100644 index 0000000..ad77a8c --- /dev/null +++ b/src/app/models/trip.js @@ -0,0 +1,27 @@ +import Backbone from 'backbone'; + +const Trip = Backbone.Model.extend({ + defaults: { + name: 'Unknown' + }, +//urlRoot(){ +//return `https://ada-backtrek-api.herokuapp.com/trips/${this.get('tripID')}/reservations` +//} + // validate(attributes) { + // const errors = {}; + // if (!attributes.name) { + // errors.name = ['cannot be blank']; + // } + // + // if (!attributes.email) { + // errors.email = ['cannot be blank']; + // } + // + // if (Object.keys(errors).length < 1) { + // return false; + // } + // return errors; + // }, +}); + +export default Trip; diff --git a/src/css/style.css b/src/css/style.css index b7b2d44..de61cca 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -1,2 +1,95 @@ /* Your styles go here! */ +.header{ + text-align: center; + padding-bottom: 2%; + background-image: url("http://2.bp.blogspot.com/-cIFih6LY4x8/U2i6PX7HYTI/AAAAAAAAFyk/oGQO3pXUlTc/s1600/Twitter-Header-1500x500-Size-18.jpg"); + } + + .header_word{ + padding-top: 5%; + color: #FF5733; + font-weight: 700; + font-family: fantasy; + font-style: italic; + } + #load{ + text-align: center; + border: 1px black solid; + border-radius: .2em ; + background-color: lightblue; + color: black; + margin-top: 2%; + } + + #load:hover, input.button:hover{ + background-color: lightsteelblue; + } + + /*********BODY************/ + + +#trips{ + background-color: AZURE; + color: navy; + font-family: sans-serif; + font-size: 10pt; + padding-left: 5%; + padding-top: 5%; +} +/*#trips table{ + display: none; +}*/ + +tr th{ + padding-right: 22%; + padding-bottom: 2%; +} + +tr td{ + padding-bottom: 1%; +} + +tr:hover.selected td, +tr:hover td { + background-color: #FFEFC6; + cursor: pointer; +} + + +#trip{ + border-radius: .5em; + background-color: AZURE; + color: #FF5733; +} + +.reserve, .tripname{ + text-align: center; +} + +.button a, input.button{ + text-align: center; + border: 1px black solid; + border-radius: .2em ; + background-color: lightblue; + color: black; + margin-top: 2%; +} +p{ + color: maroon; +} +b{ + color: navy; +} +strong{ + color: green; /* Success message */ +} +/*footer{ + position: absolute; + right: 0; + bottom: 0; + left: 0; + padding: 1rem; + background-color: #efefef; + text-align: center; +}*/ From 7fd4759988b355f67fb65b176a3f86cced99e97f Mon Sep 17 00:00:00 2001 From: Sairagul Abdukhalieva Date: Thu, 30 Nov 2017 17:07:13 -0800 Subject: [PATCH 2/8] Added trip to DB --- dist/index.html | 41 ++++++++++++++++++++++++++++------ src/app.js | 50 ++++++++++++++++++++++++++++-------------- src/app/models/trip.js | 9 +++++--- src/css/style.css | 16 ++++++-------- 4 files changed, 81 insertions(+), 35 deletions(-) diff --git a/dist/index.html b/dist/index.html index 3285756..886ddab 100644 --- a/dist/index.html +++ b/dist/index.html @@ -25,10 +25,36 @@

Travel Trek

+

+ +
@@ -45,14 +71,15 @@

Travel Trek

- +
- +