From a8bec5d478eeecbc0413190e85f863953b9eef51 Mon Sep 17 00:00:00 2001 From: Julia Date: Fri, 1 Dec 2017 11:24:26 -0800 Subject: [PATCH 01/11] created table and show details for wave 1 --- dist/index.html | 109 +++++++++++++++++++++++++++++-- src/app.js | 65 +++++++++++++++++- src/app/collections/trip_list.js | 14 ++++ src/app/models/trip.js | 11 ++++ 4 files changed, 193 insertions(+), 6 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..2ba0c16 100644 --- a/dist/index.html +++ b/dist/index.html @@ -3,18 +3,119 @@ My JavaScript App +
- + +

World Trek

+ + +
+
+
+ +
    +
+
+ +
+

Add a Trip

+
+ + + + + + + + + + + + + + + + + + + +
+
+ +
+

Trips:

+ + + + + + + + + + +
NameCategoryContinentCostWeeks
+
+ +
+
+ +
- - + + + + + diff --git a/src/app.js b/src/app.js index e7af594..b5bffb8 100644 --- a/src/app.js +++ b/src/app.js @@ -6,8 +6,69 @@ 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'; + +//console.log('it loaded!'); + +//TRIPS TABLE: +const tripList = new TripList(); +let tripsTemplate; + +const renderTrips = function renderTrips(tripList) { + console.log('it loaded!'); + tripsTemplate = _.template($('#trips-template').html()); + //get the element to append to + const tripListTable = $('#trips-list'); + tripListTable.empty(); + tripList.forEach((trip) => { + tripListTable.append(tripsTemplate(trip.attributes)); + //console.log(trip); + }); +}; + +//TRIP DETAILS (ONE TRIP) +let singleTripTemplate; +const renderSingleTrip = function renderSingleTrip(tripID) { + console.log('it loaded a trip!'); + console.log(tripID); + const tripDetailsContainer = $('#trip-details-container'); + tripDetailsContainer.empty(); + //why am i defining let singleTripTemplate outsie of method instead of inside? + singleTripTemplate = _.template($('#single-trip-template').html()); + let trip; + trip = new Trip({id: tripID}); + trip.fetch().done(() => { + $('#trip-details-container').append(singleTripTemplate(trip.attributes)); + }); + console.log(trip); +} $(document).ready( () => { - $('main').html('

Hello World!

'); + + $('#add-a-trip-form-container').hide(); + $('#trips-table-container').hide(); + $('.clear').hide(); + + $('#load-trips').on('click', function(){ + $('#trips-table-container').show(); + tripList.fetch(); + // createFilters(); + }); + + $('#trips-table-container').on('click', 'tr', function () { + const tripID = $(this).attr('data-id'); + renderSingleTrip(tripID); + }); + + tripList.on('update', renderTrips, tripList); + + + + + + // $('.sort').click(events.sortTrips); + // tripList.on('sort',renderTrips,tripList); + + }); diff --git a/src/app/collections/trip_list.js b/src/app/collections/trip_list.js new file mode 100644 index 0000000..a77fbc0 --- /dev/null +++ b/src/app/collections/trip_list.js @@ -0,0 +1,14 @@ +import Backbone from 'backbone'; + +//import model so collection knows what its a collection of: +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; + }, +}); + +export default TripList; diff --git a/src/app/models/trip.js b/src/app/models/trip.js new file mode 100644 index 0000000..a323a3e --- /dev/null +++ b/src/app/models/trip.js @@ -0,0 +1,11 @@ +import Backbone from 'backbone'; + +const Trip = Backbone.Model.extend({ + // idAttribute: 'id', + urlRoot: 'https://ada-backtrek-api.herokuapp.com/trips/', + parse: function(response) { + return response; + }, +}); + +export default Trip; From ddcaf8fb497d8997994ef9bfaf25230b95567fa5 Mon Sep 17 00:00:00 2001 From: Julia Date: Fri, 1 Dec 2017 11:32:41 -0800 Subject: [PATCH 02/11] added reservation form to html and added foundation styling to put below tirp details --- dist/index.html | 21 +++++++++++++++++++-- src/app.js | 3 ++- src/app/models/trip.js | 1 - 3 files changed, 21 insertions(+), 4 deletions(-) diff --git a/dist/index.html b/dist/index.html index 2ba0c16..8d5b220 100644 --- a/dist/index.html +++ b/dist/index.html @@ -25,6 +25,8 @@

World Trek

+ +

Add a Trip

@@ -68,6 +70,21 @@

Trips:

+
+

Reserve Your Spot

+ + + + + + + + + + + + +
@@ -97,8 +114,8 @@

Footer Holding Text

@@ -73,7 +73,7 @@

Trips:

Reserve Your Spot

-
+ diff --git a/src/app.js b/src/app.js index ed45440..5dc09c0 100644 --- a/src/app.js +++ b/src/app.js @@ -8,6 +8,7 @@ import './css/style.css'; import Trip from './app/models/trip'; import TripList from './app/collections/trip_list'; +import Reservation from './app/models/reservation'; //console.log('it loaded!'); @@ -15,7 +16,6 @@ import TripList from './app/collections/trip_list'; const tripList = new TripList(); let tripsTemplate; - const renderTrips = function renderTrips(tripList) { console.log('it loaded!'); $('#load-trips').hide(); @@ -48,6 +48,8 @@ const renderSingleTrip = function renderSingleTrip(tripID) { console.log(trip); } + + //EVENT LISTENER //1. Create listener: // const bogusListener = function bogusListener(event) { @@ -60,14 +62,15 @@ const renderSingleTrip = function renderSingleTrip(tripID) { // // // 3. Trigger the event // tripList.trigger('bogus', 'Argument!'); -const fields = ["name", "category", "continent", "cost", "weeks", "about"]; +const tripFields = ["name", "category", "continent", "cost", "weeks", "about"]; +const reservationFields = ["name", "age", "email"]; const events = { addTrip(event) { event.preventDefault(); console.log('in addTrip method! Trip Data:') const tripData = {}; - fields.forEach( (field) => { + tripFields.forEach( (field) => { tripData[field] = $(`input[name=${field}]`).val(); }); console.log(tripData); @@ -75,19 +78,19 @@ const events = { if (trip.isValid()) { trip.save({}, { - success: events.successfullSave, - error: events.failedSave, + success: events.successfullTripSave, + error: events.failedTripSave, }); } else { console.log('NOT VALID') - events.failedSave(trip, {errors: trip.validate() }); + events.failedTripSave(trip, {errors: trip.validate() }); } console.log('finished') }, - successfullSave(trip, response) { - console.log('successfulSave'); + successfullTripSave(trip, response) { + console.log('successfulTripSave'); tripList.add(trip); console.log('Trip Added'); console.log(trip); @@ -96,19 +99,42 @@ const events = { $('#status-messages ul').append(`
  • ${trip.get('name')} added!
    • `) $('#status-messages').show(); }, - failedSave(trip, response) { + failedTripSave(trip, response) { console.log('failedSave'); - console.log(trip); - console.log(response); + //console.log(trip); + //console.log(response); console.log(response.responseText); - console.log(JSON.stringify(response)); - // tripList.remove(trip); + //let JSONresponse = JSON.parse(response); + //console.log(JSONresponse); + //console.log(JSON.stringify(response)); + //const responseJSON = JSON.stringify(response); + $('#status-messages ul').append(`
  • ${trip.get('name')} WAS NOT added!
    • `); $('#status-messages ul').empty(); - $('#status-messages ul').append(`
  • ${trip.get('name')} WAS NOT added!
    • `) - //$('#status-messages ul').append('

  • MESSAGE

    • '); - $('#status-messages ul').append(`
  • ${response.responseText}
    • `); + //responseJSON.forEach(function(data) { + // $('#status-messages ul').append(`
  • ${data}
    • `); + //}); $('#status-messages').show(); }, + addReservation(event) { + event.preventDefault(); + console.log('in addReservation method! Reservation Data:') + const reservationData = {}; + reservationFields.forEach( (field) => { + reservationData[field] = $(`input[name=${field}]`).val(); + }); + console.log(reservationData); + const reservation = new Reservation(reservationData); + + if (reservation.isValid()) { + reservation.save({}, { + success: events.successfullReservationSave, + error: events.failedReservationSave, + }); + } else { + console.log('NOT VALID RESERVATION DATA') + events.failedReservationSave(reservation, {errors: reservation.validate() }); + } + }, }; $(document).ready( () => { @@ -121,8 +147,6 @@ $(document).ready( () => { console.log('clicked load'); $('#trips-table-container').show(); tripList.fetch(); - // tripList.trigger(); - // createFilters(); }); $('#trips-table-container').on('click', 'tr', function () { @@ -138,17 +162,20 @@ $(document).ready( () => { //submit form to Add a Trip //creates a new instance of the Trip model + $('#add-a-trip-form-container').on('submit','#add-trip-form', events.addTrip); //tripsTemplate = _.template($('#trips-template').html()); - // $('#add-trip-form').on('click', function () { - // $('#add-trip-form').submit(events.addTrip); - // }); - $('#add-a-trip-form-container').on('submit','#add-trip-form', events.addTrip); + //THIS WAY DOESN"T WORK- it just performs the submit, rather than waits to hear if a submit event is happening + //$('#add-trip-form').submit(events.addTrip); + //submit form to add a reservation: + $('#reservation-form-container').on('submit','#add-reservation-form', events.addReservation); //update table tripList.on('update', renderTrips, tripList); + + // $('.sort').click(events.sortTrips); // tripList.on('sort',renderTrips,tripList); diff --git a/src/app/models/reservation.js b/src/app/models/reservation.js new file mode 100644 index 0000000..7b22536 --- /dev/null +++ b/src/app/models/reservation.js @@ -0,0 +1,17 @@ +import Backbone from 'backbone'; + +const Reservation = Backbone.Model.extend({ + // initialize: function(attributes) { + // console.log(`In initialize for the trip ${this.get('id')} named ${this.get('name')}`); + // + // }, + urlRoot: `https://ada-backtrek-api.herokuapp.com/trips/${this.get('id')}/reservations`, + parse: function(response) { + return response; + }, + validate: function(attributes) { + console.log('in the Reservation validate function'); + const errors = {}; + }, + +}); From 4ef0ea90240bc4409be6e5a711316c52cceda252 Mon Sep 17 00:00:00 2001 From: Julia Date: Fri, 1 Dec 2017 20:54:58 -0800 Subject: [PATCH 07/11] fixed error messages for failed saves to the trips collection. still have a bug in saving the reservation- I can't save the url to the model to be used for hte post action --- dist/index.html | 2 +- src/app.js | 60 ++++++++++++++++++++++++++--------- src/app/models/reservation.js | 16 +++++++--- 3 files changed, 57 insertions(+), 21 deletions(-) diff --git a/dist/index.html b/dist/index.html index 2580a3a..9d89c02 100644 --- a/dist/index.html +++ b/dist/index.html @@ -73,7 +73,7 @@

    Trips:

    Reserve Your Spot

    - + diff --git a/src/app.js b/src/app.js index 5dc09c0..c931e4a 100644 --- a/src/app.js +++ b/src/app.js @@ -103,28 +103,35 @@ const events = { console.log('failedSave'); //console.log(trip); //console.log(response); - console.log(response.responseText); - //let JSONresponse = JSON.parse(response); - //console.log(JSONresponse); - //console.log(JSON.stringify(response)); - //const responseJSON = JSON.stringify(response); - $('#status-messages ul').append(`
  • ${trip.get('name')} WAS NOT added!
    • `); $('#status-messages ul').empty(); - //responseJSON.forEach(function(data) { - // $('#status-messages ul').append(`
  • ${data}
    • `); - //}); + $('#status-messages ul').append(`
  • ${trip.get('name')} WAS NOT added!
    • `); + console.log(response.responseJSON); + const displayErrors = response.responseJSON.errors + for (var key in displayErrors){ + console.log(key); + $('#status-messages ul').append(`
  • ${key}: ${displayErrors[key]}
    • `); + }; $('#status-messages').show(); }, addReservation(event) { event.preventDefault(); - console.log('in addReservation method! Reservation Data:') + console.log('in addReservation method! Reservation Data:'); const reservationData = {}; reservationFields.forEach( (field) => { - reservationData[field] = $(`input[name=${field}]`).val(); + reservationData[field] = $(`#add-reservation-form input[name=${field}]`).val(); }); console.log(reservationData); - const reservation = new Reservation(reservationData); + const tripNumber= $('#add-reservation-form').attr('trip-id'); + console.log(`tripNumber: ${tripNumber}`); + + // reservation.set({"tripID": `${tripNumber}` }); + const postURL = `https://ada-backtrek-api.herokuapp.com/trips/${tripNumber}/reservations/`; + const reservation = new Reservation(reservationData); + //const reservation = new Reservation(reservationData, {url:postURL}); + reservation.set({"url": `${postURL}` }); + console.log(reservation.get('url')); + console.log(reservation); if (reservation.isValid()) { reservation.save({}, { success: events.successfullReservationSave, @@ -135,6 +142,31 @@ const events = { events.failedReservationSave(reservation, {errors: reservation.validate() }); } }, + successfullReservationSave(reservation, response) { + console.log('successfulReservationSave'); + console.log(reservation); + console.log(response); + $('#status-messages ul').empty(); + $('#status-messages ul').append(`
  • ${reservation.get('name')} added!
    • `) + $('#status-messages').show(); + }, + failedReservationSave(reservation, response) { + console.log('failedReservationSave'); + console.log(reservation); + console.log(response); + console.log(response.responseText); + //let JSONresponse = JSON.parse(response); + //console.log(JSONresponse); + //console.log(JSON.stringify(response)); + //const responseJSON = JSON.stringify(response); + $('#status-messages ul').append(`
  • ${reservation.get('name')} WAS NOT added!
    • `); + $('#status-messages ul').empty(); + //responseJSON.forEach(function(data) { + // $('#status-messages ul').append(`
  • ${data}
    • `); + //}); + $('#status-messages').show(); + }, + }; $(document).ready( () => { @@ -152,6 +184,7 @@ $(document).ready( () => { $('#trips-table-container').on('click', 'tr', function () { const tripID = $(this).attr('data-id'); renderSingleTrip(tripID); + $('#add-reservation-form').attr('trip-id',`${tripID}`); $('#reservation-form-container').show(); }); @@ -173,9 +206,6 @@ $(document).ready( () => { //update table tripList.on('update', renderTrips, tripList); - - - // $('.sort').click(events.sortTrips); // tripList.on('sort',renderTrips,tripList); diff --git a/src/app/models/reservation.js b/src/app/models/reservation.js index 7b22536..ab005c1 100644 --- a/src/app/models/reservation.js +++ b/src/app/models/reservation.js @@ -1,17 +1,23 @@ import Backbone from 'backbone'; const Reservation = Backbone.Model.extend({ - // initialize: function(attributes) { - // console.log(`In initialize for the trip ${this.get('id')} named ${this.get('name')}`); - // - // }, - urlRoot: `https://ada-backtrek-api.herokuapp.com/trips/${this.get('id')}/reservations`, + url: function(){ + return this.instanceUrl; + }, + initialize: function(attributes){ + this.instanceUrl = attributes.url; + }, parse: function(response) { return response; }, validate: function(attributes) { + // console.log(this.url); + // console.log(attributes) console.log('in the Reservation validate function'); const errors = {}; }, + }); + +export default Reservation; From b042dfbe1c7ade7ea9a3ad0485afcfeb05b72777 Mon Sep 17 00:00:00 2001 From: Julia Date: Fri, 1 Dec 2017 21:13:28 -0800 Subject: [PATCH 08/11] completed sort. get a 'category not defined' error --- src/app.js | 31 ++++++++++++++++++++++++++++--- 1 file changed, 28 insertions(+), 3 deletions(-) diff --git a/src/app.js b/src/app.js index c931e4a..64aeed9 100644 --- a/src/app.js +++ b/src/app.js @@ -113,6 +113,28 @@ const events = { }; $('#status-messages').show(); }, + sortBooks(event) { + // remove current-sort-field from the class + // list of any element that has it. + $('.current-sort-field').removeClass('current-sort-field'); + // Add the class to the current selected element + $(this).addClass('current-sort-field'); + // Get the class list of the selected element + const classes = $(this).attr('class').split(/\s+/); + + classes.forEach((className) => { + if (tripFields.includes(className)) { + if (className === tripList.comparator) { + tripList.models.reverse(); + tripList.trigger('sort', tripList); + } + else { + tripList.comparator = className; + tripList.sort(); + } + } + }); + }, addReservation(event) { event.preventDefault(); console.log('in addReservation method! Reservation Data:'); @@ -138,7 +160,7 @@ const events = { error: events.failedReservationSave, }); } else { - console.log('NOT VALID RESERVATION DATA') + console.log('NOT VALID RESERVATION DATA'); events.failedReservationSave(reservation, {errors: reservation.validate() }); } }, @@ -203,11 +225,14 @@ $(document).ready( () => { //submit form to add a reservation: $('#reservation-form-container').on('submit','#add-reservation-form', events.addReservation); + //sort table: + $('.sort').click(events.sortBooks); + tripList.on('sort',renderTrips,tripList); + //update table tripList.on('update', renderTrips, tripList); - // $('.sort').click(events.sortTrips); - // tripList.on('sort',renderTrips,tripList); + }); From 9d41ce5b5ad65790518e5d62da055f1e918ce212 Mon Sep 17 00:00:00 2001 From: Julia Date: Sat, 2 Dec 2017 23:43:47 -0800 Subject: [PATCH 09/11] abandoned Reservation model to make post request for reservation and completed the reservation process using AJAX --- dist/index.html | 2 +- src/app.js | 45 +++++++++++++++++++++++++++++++++++++++++++-- 2 files changed, 44 insertions(+), 3 deletions(-) diff --git a/dist/index.html b/dist/index.html index 9d89c02..6d57782 100644 --- a/dist/index.html +++ b/dist/index.html @@ -83,7 +83,7 @@

    Reserve Your Spot

    - +
    diff --git a/src/app.js b/src/app.js index 64aeed9..872a7c8 100644 --- a/src/app.js +++ b/src/app.js @@ -44,6 +44,7 @@ const renderSingleTrip = function renderSingleTrip(tripID) { trip = new Trip({id: tripID}); trip.fetch().done(() => { $('#trip-details-container').append(singleTripTemplate(trip.attributes)); + $('#trip-details-container').attr('tripID', tripID); }); console.log(trip); } @@ -191,6 +192,37 @@ const events = { }; +//POST RESERVATION INFO (RECEIVE INFO FROM FORM) +const submitReservation = function submitReservation() { + $('#add-reservation-form').submit( function(e) { + e.preventDefault(); + let form = document.createElement("form"); + let tripID = $('#add-reservation-form').attr('trip-id'); + console.log(`tripID from trip ul: ${tripID}`); + //$('#trip-details-container').attr('reservation-trip-id'); + const url = 'https://ada-backtrek-api.herokuapp.com/trips/' + tripID + '/reservations/'; + console.log(`URL: ${url}`); + const personName = $(this).serializeArray()[0].value; + const formData = $(this).serialize(); + console.log(`formData: ${formData}`) + + $.post(url, formData, (response) => { + console.log('Received POST response:'); + console.log(response); + alert(`Reservation confirmed for ${personName}` ); + console.log(`successfully posted reservation for ${personName}`) + console.log(response); + }) + .fail(function(response){ + console.log(response); + $('#status-messages ul').append('
  • Post was unsuccessful
    • ') + }) + .always(function(){ + console.log('always even if we have success or failure'); + }); + }); +}; + $(document).ready( () => { $('#reservation-form-container').hide(); $('#add-a-trip-form-container').hide(); @@ -210,6 +242,13 @@ $(document).ready( () => { $('#reservation-form-container').show(); }); + //submit reservation button USING AJAX + $('#add-reservation-form').on('click','#submit-reservation', function(){ + console.log('pressed reservation form button'); + submitReservation(); + $('#reservation-form-container').hide(); + }); + //show form to Add a Trip $('#add-new-trip').on('click', function() { $('#add-a-trip-form-container').show(); @@ -222,8 +261,10 @@ $(document).ready( () => { //THIS WAY DOESN"T WORK- it just performs the submit, rather than waits to hear if a submit event is happening //$('#add-trip-form').submit(events.addTrip); - //submit form to add a reservation: - $('#reservation-form-container').on('submit','#add-reservation-form', events.addReservation); + //submit form to add a reservation USING RESERVATION MODEL (DOESN'T WORK): + //$('#reservation-form-container').on('submit','#add-reservation-form', events.addReservation); + + //sort table: $('.sort').click(events.sortBooks); From 2793bc08c349c57d3b89e7d92b24b23e2fbb0009 Mon Sep 17 00:00:00 2001 From: Julia Date: Mon, 4 Dec 2017 10:38:16 -0800 Subject: [PATCH 10/11] added modal --- dist/index.html | 16 ++++++-- src/app.js | 85 +++++++++++++++++++++++++++++++++++++++--- src/app/models/trip.js | 16 ++++---- src/css/style.css | 29 +++++++++++++- 4 files changed, 128 insertions(+), 18 deletions(-) diff --git a/dist/index.html b/dist/index.html index 6d57782..bc23416 100644 --- a/dist/index.html +++ b/dist/index.html @@ -5,6 +5,7 @@ BackTREK +
    @@ -26,11 +27,15 @@

    World Trek

    - +
    -

    Add a Trip

    + +

    Add a Trip

    @@ -49,7 +54,7 @@

    Add a Trip

    - +
    @@ -135,5 +140,10 @@

    <%- name %>

    + + + + + diff --git a/src/app.js b/src/app.js index 872a7c8..ca9431e 100644 --- a/src/app.js +++ b/src/app.js @@ -78,13 +78,14 @@ const events = { const trip = new Trip(tripData); if (trip.isValid()) { + console.log("Trip is valid"); trip.save({}, { success: events.successfullTripSave, error: events.failedTripSave, }); } else { - console.log('NOT VALID') - events.failedTripSave(trip, {errors: trip.validate() }); + console.log('NOT VALID'); + events.failedTripSave(trip, {errors: trip.isValid() }); } console.log('finished') @@ -101,9 +102,9 @@ const events = { $('#status-messages').show(); }, failedTripSave(trip, response) { - console.log('failedSave'); - //console.log(trip); - //console.log(response); + console.log('failedTripSave'); + console.log(trip); + console.log(response); $('#status-messages ul').empty(); $('#status-messages ul').append(`
  • ${trip.get('name')} WAS NOT added!
    • `); console.log(response.responseJSON); @@ -223,12 +224,64 @@ const submitReservation = function submitReservation() { }); }; +//MODAL + +const modalAddTrip = function() { + const modal = $('#add-a-trip-form-container'); + const openModal = $('#add-new-trip'); + const closeModal = $('#close'); + openModal.onclick = function() { + modal.style.display = "block"; + }; + closeModal.onclick = function() { + modal.style.display = "none"; + }; + window.onclick = function(event) { + if (event.target == modal) { + modal.style.display = "none"; + } + }; +} +// function openDialog(selector) { +// $(selector) +// .clone() +// .show() +// .appendTo('#overlay') +// .parent() +// .fadeIn('fast'); +// } + +// function closeDialog(selector) { +// $(selector) +// .parents('#overlay') +// .fadeOut('fast', function() { +// $(this) +// .find(".dialog") +// .remove(); +// }); +// } + + // window.onload = function onloadFunction() { + // //setup edit person dialog + // console.log('In onloadFunction'); + // $('#add-a-trip-form-container').dialog({ + // autoOpen: false, + // draggable: true, + // title: "Did This Work?", + // open: function(type, data) { + // $(this).parent().appendTo("#add-trip-form"); + // } + // }); + // } + $(document).ready( () => { $('#reservation-form-container').hide(); $('#add-a-trip-form-container').hide(); $('#trips-table-container').hide(); $('#add-new-trip').hide(); + modalAddTrip(); + $('#load-trips').on('click', function(){ console.log('clicked load'); $('#trips-table-container').show(); @@ -251,12 +304,32 @@ $(document).ready( () => { //show form to Add a Trip $('#add-new-trip').on('click', function() { + // openDialog('#add-a-trip-form-container'); $('#add-a-trip-form-container').show(); + // $('.dialog').dialog(); + // return false; }); + // $('#add-a-trip-form-container') + // .find('.ok, .cancel') + // .live('click', function() { + // closeDialog(this); + // }) + // .end() + // .find('.ok') + // .live('click', function() { + // console.log('Clicked Submit!') + // }) + // .end() + // .find('cancel') + // .live('click', function() { + // console.log('Clicked Cancel') + // }); + //submit form to Add a Trip //creates a new instance of the Trip model - $('#add-a-trip-form-container').on('submit','#add-trip-form', events.addTrip); + //$('#add-a-trip-form-container').on('submit','#add-trip-form', events.addTrip); + $('#add-trip-form').on('submit', events.addTrip); //tripsTemplate = _.template($('#trips-template').html()); //THIS WAY DOESN"T WORK- it just performs the submit, rather than waits to hear if a submit event is happening //$('#add-trip-form').submit(events.addTrip); diff --git a/src/app/models/trip.js b/src/app/models/trip.js index 6c552a6..e0f8b08 100644 --- a/src/app/models/trip.js +++ b/src/app/models/trip.js @@ -5,18 +5,17 @@ const Trip = Backbone.Model.extend({ parse: function(response) { return response; }, - // defaults: { - // cost: 5000, - // }, initialize: function(attributes) { - console.log(`In initialize for the trip ${this.get('name')}`); + console.log('Attributes from initialize function:'); + console.log(attributes); + console.log(`In initialize for the trip ${attributes.name}`); }, validate: function(attributes) { console.log('in the Trip validate function'); + console.log(attributes); //UNDEFINED + //CAUSES ERROR- CANNOT READ PROPERTY OF 'NAME' OF UNDEFINED: console.log(attributes.name); const errors = {}; - //TODO: Refactor the below to be a loop that loops through attributes and outputs all needed errors. - //TODO: Figure out how to display these erros in the form as opposed to up top (like in the wireframe) if (!attributes.name) { errors['name'] = ["Trip name cannot be blank"]; } @@ -37,10 +36,11 @@ const Trip = Backbone.Model.extend({ if (CONTINENTS.includes(attributes.continent)) { console.log('valid continent'); } else { - // errors['continent'] = ["Continent must be: Africa, Antartica, Asia, Australasia, Europe, North America or South America"]; + console.log('invalid continent'); + errors['continent'] = ["Continent must be: Africa, Antartica, Asia, Australasia, Europe, North America or South America"]; } - console.log(errors); + console.log(`errors: ${errors.keys}`); if ( Object.keys(errors).length > 0 ) { return errors; } else { diff --git a/src/css/style.css b/src/css/style.css index 0264a71..04e7a91 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -1,5 +1,32 @@ -/* Your styles go here! */ +#add-a-trip-form-container { + display: none; + position: absolute; + margin: 100px auto; + width: 60%; + height: 100%; + padding: 40px; + background-color: rgb(0,0,0); + background-color: rgba(0,0,0,0.8); + top: 0; + right: 0; + bottom: 0; + left: 0; + border: 1px solid black; + -mox-border-radius: 10px; + z-index: 1; +} + +#submit-new-trip-button { + margin: 10px; +} + +.new-trip-title { + color: white; +} + + +/* STATUS MESSAGE STYLING */ #status-messages { background-color: #dfdfdf; From 022a754904d49a8ce130ed9bd1d2c7013ac90a0c Mon Sep 17 00:00:00 2001 From: Julia Date: Mon, 4 Dec 2017 11:14:27 -0800 Subject: [PATCH 11/11] still having issue with modal- cannot get it to close after successfully submitting data or if empty --- dist/index.html | 4 ++-- src/app.js | 7 +++++-- src/css/style.css | 29 ++++++++++++++++++++++++++--- 3 files changed, 33 insertions(+), 7 deletions(-) diff --git a/dist/index.html b/dist/index.html index bc23416..c471626 100644 --- a/dist/index.html +++ b/dist/index.html @@ -12,7 +12,7 @@

    World Trek

     - + @@ -34,7 +34,7 @@

    World Trek

    - + ×

    Add a Trip

    diff --git a/src/app.js b/src/app.js index ca9431e..cbde339 100644 --- a/src/app.js +++ b/src/app.js @@ -100,6 +100,8 @@ const events = { $('#status-messages ul').empty(); $('#status-messages ul').append(`
  • ${trip.get('name')} added!
    • `) $('#status-messages').show(); + document.getElementByID('#add-a-trip-form-container').style.display = "none"; + document.getElementByID('#add-trip-form').reset(); }, failedTripSave(trip, response) { console.log('failedTripSave'); @@ -229,9 +231,10 @@ const submitReservation = function submitReservation() { const modalAddTrip = function() { const modal = $('#add-a-trip-form-container'); const openModal = $('#add-new-trip'); - const closeModal = $('#close'); + // const closeModal = $('.close'); + const closeModal = document.getElementsByClassName("close")[0]; openModal.onclick = function() { - modal.style.display = "block"; + modal.style.display = "block"; }; closeModal.onclick = function() { modal.style.display = "none"; diff --git a/src/css/style.css b/src/css/style.css index 04e7a91..080928c 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -1,8 +1,17 @@ +body { + margin: 20px; +} + +.title { + display: flex; + justify-content: center; +} #add-a-trip-form-container { display: none; position: absolute; margin: 100px auto; + overflow: auto; width: 60%; height: 100%; padding: 40px; @@ -13,18 +22,32 @@ bottom: 0; left: 0; border: 1px solid black; - -mox-border-radius: 10px; + /*-mox-border-radius: 10px;*/ z-index: 1; } +.close { + font-size: 28px; +} -#submit-new-trip-button { - margin: 10px; +#add-trip-form { + color: white; } +/*#submit-new-trip-button { + margin: 10px; +}*/ + .new-trip-title { color: white; } +.trip-ul { + list-style: none; +} + +/*.reservation-form-container { + margin: 10px; +}*/ /* STATUS MESSAGE STYLING */ #status-messages {