diff --git a/dist/index.html b/dist/index.html index b873b1e..824f96b 100644 --- a/dist/index.html +++ b/dist/index.html @@ -7,11 +7,137 @@
- +

BackTrek

-
+ +
+ + + + +
+
+

Summary goes here

+
+
+ +
+ + + + + + + + + + + + +
nameidcontinentcategoryweeks
+ +
+
+ + + + + diff --git a/src/app.js b/src/app.js index e7af594..1ca2952 100644 --- a/src/app.js +++ b/src/app.js @@ -6,8 +6,165 @@ import _ from 'underscore'; import './css/foundation.css'; import './css/style.css'; -console.log('it loaded!'); +import Trip from './app/models/trip'; +import TripList from './app/collections/trip_list' +import Reservation from './app/models/reservation' + + +const tripList = new TripList(); +let trip; +let tripTemplate; + +const render = function render(tripList) { + const $tripList = $('#trip-list'); + $tripList.empty(); + tripList.forEach((trip) => { + $tripList.append(tripTemplate(trip.attributes)); + }); +}; + +const loadTrips = function loadTrips(){ + tripList.on('update', render, tripList); + tripList.fetch(); +}; + +let infoTemplate; + +const loadTripDetails = function loadTripDetails(id) { + trip = tripList.get(id); + trip.fetch( { + success: events.successfulRender, + error: events.failedRender, + }); +}; + +const updateStatusMessageWith = (message) => { + $('#status-messages ul').empty(); + $('#status-messages ul').append(`
  • ${message}
    • `); + $('#status-messages').show(); +} + +const fields = ['name', 'continent', 'about', 'category', 'weeks', 'cost']; +const resFields = ['name', 'age', 'email']; +const events = { + addReservation(event) { + event.preventDefault(); + const resData = {}; + resFields.forEach( (field) => { + const val = $(`#add-reservation-form input[name=${field}]`).val(); + if (val != '') { + resData[field] = val; + } + }); + + const reservation = new Reservation(resData); + if (reservation.isValid()) { + // debugger; + let tripID = $(this).attr('dataid'); + // const getTripNumber = $(event.currentTarget.attributes.tripId).val(); + reservation.urlRoot = `${(new Trip()).urlRoot}${tripID}/reservations`; + reservation.save({}, { + success: events.successfulSave, + error: events.failedSave, + }); + } else { + updateStatusMessageWith('reservation is invalid'); + reservation.destroy(); + } + }, + addTrip(event) { + event.preventDefault(); + const tripData = {}; + fields.forEach( (field) => { + const val = $(`input[name=${field}]`).val(); + if (val != '') { + tripData[field] = val; + } + }); + const trip = new Trip(tripData); + if (trip.isValid()) { + trip.save({}, { + success: events.successfulSave, + error: events.failedSave, + }); + $('#status-messages ul').empty(); + $('#status-messages ul').append(`INCOMPLETE Client-side errors`); + $('#status-messages').show(); + } + }, + successfulSave(trip, response) { + tripList.add(trip); + console.log('successful save!'); + console.log(trip); + console.log(response); + $('#status-messages ul').empty(); + $('#status-messages ul').append(`
  • ${trip.get('name')} added!
    • `); + $('#status-messages').show(); + }, + failedSave(trip, response) { + console.log('error'); + console.log(trip); + console.log(response); + console.log(response.responseJSON.errors); + for (let key in response.responseJSON.errors) { + response.responseJSON.errors[key].forEach((error) => { + $('#status-messages ul').append(`
  • ${key}: ${error}
    • `); + + }); +}}, + successfulRender(trip, response) { + // console.log('success render::::'); + console.log(response) + const $info = $('.info'); + $info.empty(); + $info.append(infoTemplate(trip.attributes)); + // console.log('last line of renderTrip'); + }, + failedRender(trip, response) { + // console.log('failed render:::::'); + // console.log(response); + } +}; + $(document).ready( () => { - $('main').html('

    Hello World!

    '); + tripTemplate = _.template($('#trip-template').html()); + infoTemplate = _.template($('#info-template').html()); + loadTrips(); + $('.all-trips').on('click', function() { + $('table').toggleClass('active'); + }); + + $('#trip-list').on('click', '.trip', function(){ + let tripID = $(this).attr('data-id'); + loadTripDetails(tripID); + $('#summary').get(0).scrollIntoView(); + }); + + $('.add').on('click', function(){ + $('#add-trip-form').toggle({'display': 'block'}); + }); + + $('#add-trip-form').submit(events.addTrip); + +// $('#add-reservation-form').submit( function(e { +// e.preventDefault(); +// console.log('when you click submit...'); +// console.log(this); +// let tripId = $(this).attr('data-id'); +// +// const url = `https://ada-backtrek-api.herokuapp.com/trips/${tripId}/reservations`; +// const formData = $(this).serialize(); +// +// $.post(url, formData, (response) => { +// $('#status-messages ul').append('

    Spot reserved!

    '); +// console.log(response); +// document.getElementById("new-trip-form").reset(); +// }).fail(() => { +// $("#message").html("

    Unable to complete reservation

    ") +// }); +// }); +$(document).on('submit', '#add-reservation-form', events.addReservation) + + }); diff --git a/src/app/collections/trip_list.js b/src/app/collections/trip_list.js new file mode 100644 index 0000000..d79c1eb --- /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', + + +}); + +export default TripList; diff --git a/src/app/models/reservation.js b/src/app/models/reservation.js new file mode 100644 index 0000000..6962f92 --- /dev/null +++ b/src/app/models/reservation.js @@ -0,0 +1,12 @@ +import Backbone from 'backbone'; + +const Reservation = Backbone.Model.extend({ + initialize: function(attributes) { + console.log('attributes here:'); + console.log(attributes); + }, + // idAttribute: 'id', + // urlRoot: 'https://ada-backtrek-api.herokuapp.com/trips/', +}); + +export default Reservation; diff --git a/src/app/models/trip.js b/src/app/models/trip.js new file mode 100644 index 0000000..0cf9da1 --- /dev/null +++ b/src/app/models/trip.js @@ -0,0 +1,8 @@ +import Backbone from 'backbone'; + +const Trip = Backbone.Model.extend({ + idAttribute: 'id', + urlRoot: 'https://ada-backtrek-api.herokuapp.com/trips/', +}); + +export default Trip; diff --git a/src/css/style.css b/src/css/style.css index b7b2d44..95878b8 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -1,2 +1,71 @@ +body { + height: 100vh; + margin: 0; + padding: 0; + background: #FDD02C; +} +img { + height: 20px; +} +h1 { + text-align: center; +} +li { + /*display: inline;*/ + /*list-style: circle url("http://www.pvhc.net/img223/xeiwtpbbgpmyhtcnjvwt.png");*/ +} +table { + display: none; +} +.active { + display: block; -/* Your styles go here! */ +} +table.active { + height: 90%; + position: static; + overflow: scroll; +} + +button { + /*font-size: 3em;*/ + /*padding: 20px;*/ +} +.row { + /*height: 800px;*/ + +} +.trips-table { + + background: #B0C13E; + /*padding: 20px;*/ + /*padding-top: 30px;*/ + height: 800px; + text-align: center; +} +#summary { + background: #4EAD6E; + + overflow: scroll; + height: 800px; + align-items: center; + +} +.info { + /*padding: 5px;*/ + /*height: 100%;*/ + /*overflow: scroll;*/ + background: #FD4B5C; +} +.info p { + /*padding: 10px;*/ +} +.add-trip { + background: #F4A927; +} +#add-trip-form { + display: none; +} +/*#status-messages li { + list-style: circle; +}*/