Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Sara Chandler -- Carets #30

Open
wants to merge 16 commits into
base: master
Choose a base branch
from
147 changes: 142 additions & 5 deletions dist/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,156 @@
<html>
<head>
<meta charset="utf-8">
<title>My JavaScript App</title>
<title>BackTREK</title>
<script src="app.bundle.js" type="text/javascript"></script>
<link rel="shortcut icon" href="favicon.png">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<header>

<h1>BackTREK</h1>
</header>
<main>
<main class="clearfix">
<section id="status-messages">
<button class="clear float-right">
<img src="http://www.pvhc.net/img20/nlgmjpfrmyobtykevzjz.png" alt="Clear">
</button>

<ul>
</ul>
</section>

<section class="row">
<section class="centerme columns medium-6 small-12"><button type="button" class="hollow button" id="load"> Look at Available Trips! </button></section>
<section class="centerme columns medium-6 small-12"><button type="button" class="hollow button" id="newtripform"> Add a New Trip! </button></section>
</section>

<section class="columns " id="new-form">
<h2>Add a Trip!</h2>
<section class="form">
<form id="newtrip" >
<section>
<label>Name</label>
<input type="text" id="name" name="name"></input>
</section>
<section>
<label>Continent</label>
<input type="text" id="continent" name="continent"></input>
</section>
<section>
<label>About</label>
<input type="text" id="about" name="about"></input>
</section>
<section>
<label>Category</label>
<input type="text" id="category" name="category"></input>
</section>
<section>
<label>Weeks</label>
<input type="number" id="weeks" name="weeks"></input>
</section>
<section>
<label>Cost</label>
<input type="number" id="cost" name="cost"></input>
</section>

<section class="button">
<button type="submit">Create Trip</button>
</section>
</form>
</section>
</section>
<!-- </main> -->

<section class="row">

<section class="trips columns medium-6 small-12" id="trips-table">
<h2>Trips!</h2>

<table>
<thead>
<th class="sort name">Name</th>
<th class="sort category">Category</th>
<th class="sort continent">Continent</th>
<th class="sort weeks">Weeks</th>
<th class="sort cost">Cost</th>
<th class="sort id">ID</th>
</thead>
<tbody id="trip-list">
</tbody>
</table>
</section>

<section class="columns medium-6 small-12" id="trip">
<section class="onetrip">
<p>

</main>
</p>
</section>
</section>



</section>

<!-- </main> -->
<footer>

</footer>
<script src="app.bundle.js" type="text/javascript"></script>

<script type="text/template" id="atrip-template">
<section class="onetrip">
<h2 class="name"><%- name %></h2>
<p class="about"><%- about %></p>
<p class="weeks"><%- weeks %></p>
<p class="cost"><%- cost %></p>
</section>
<h2>Make a Reservation!</h2>
<section class="form">
<form id="rezform" atripid="<%- id %>" >
<section>
<label>Name</label>
<input type="text" id="name" name="name"></input>
</section>
<section>
<label>Age</label>
<input type="text" id="age" name="age"></input>
</section>
<section>
<label>Email</label>
<input type="text" id="email" name="email"></input>
</section>

<section class="button">
<button type="submit">Make Reservation</button>
</section>
</form>
</section>
</script>

<script type="text/template" id="trip-template">
<tr class="trip" atrip-id="<%- id %>" >
<td>
<%- name %>
</td>
<td>
<%- category %>
</td>
<td>
<%- continent %>
</td>
<td>
<%- weeks %>
</td>
<td>
<%- cost %>
</td>
<td>
<%- id %>
</td>
</tr>
</script>


</body>
</html>
150 changes: 149 additions & 1 deletion src/app.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,156 @@ import _ from 'underscore';
import './css/foundation.css';
import './css/style.css';

import Trip from './app/models/trip';
import Reservation from './app/models/reservation';
import TripList from './app/collections/trip_list';

console.log('it loaded!');

const tripList = new TripList();
let tripTemplate;
let atripTemplate;
let trip;

const render = function render(tripList) {
const $tripList = $('#trip-list');
$tripList.empty();
tripList.forEach((trip) => {
$tripList.append(tripTemplate(trip.attributes));
});
};

const seeTrip = function seeTrip(id){
trip = tripList.get(id);
trip.fetch({success: events.getTrip});
}

const updateStatusMessageWith = (message) => {
$('#status-messages ul').empty();
$('#status-messages ul').append(`<li>${message}</li>`);
$('#status-messages').show();
}

const tripFields = ['name', 'continent', 'about', 'category', 'weeks', 'cost'];
const rezFields = ['name', 'age', 'email'];
const events = {
showTrips() {
$('#trips-table').toggle({'display': 'block'});
},
showNewForm() {
$('#new-form').toggle({'display': 'block'});
},
getTrip(trip) {
const $onetrip = $('.onetrip');
$onetrip.empty();
$onetrip.append(atripTemplate(trip.attributes));
},
makeReservation(event){
event.preventDefault();
const rezData = {};
rezFields.forEach( (field) => {
const val = $(`#rezform input[name=${field}]`).val();
if (val != '') {
rezData[field] = val;
}
});
const reservation = new Reservation(rezData);

if (reservation.isValid()) {
const tripID = $(event.currentTarget.attributes.atripid).val();
console.log(tripID)
reservation.urlRoot = `${(new Trip()).urlRoot}${tripID}/reservations`;
reservation.save({}, {
success: events.successfullSave,
error: events.failedSave,
});
} else {
updateStatusMessageWith('reservation is invalid');
}
},
successfullSave(reservation, response) {
$('#rezform.input').val('');
updateStatusMessageWith('reservation added!')
},
failedSave(reservation, response) {
updateStatusMessageWith('reservation failed!');
reservation.destroy();
},
addTrip(event) {
event.preventDefault();
const tripData = {};
tripFields.forEach( (field) => {
const val = $(`#newtrip input[name=${field}]`).val();
if (val != '') {
tripData[field] = val;
}
});
const trip = new Trip(tripData);

if (trip.isValid()) {

trip.save({}, {
success: events.successfullTripSave,
error: events.failedTripSave,
});
} else {

updateStatusMessageWith('Trip was invalid.');
}

},
successfullTripSave(trip, response) {
$('#newtrip.input').val('');
updateStatusMessageWith('Trip added!')
},
failedTripSave(trip, response) {
updateStatusMessageWith('Trip failed!');
trip.destroy();
},
sortTrips(event) {
$('.current-sort-field').removeClass('current-sort-field');
$(this).addClass('current-sort-field');


let 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();
}
}
});
},

};

$(document).ready( () => {
$('main').html('<h1>Hello World!</h1>');
tripTemplate = _.template($('#trip-template').html());
atripTemplate = _.template($('#atrip-template').html());
$('#load').on('click', function() {
events.showTrips();
});
tripList.on('update', render, tripList);
tripList.fetch();

$('#trips-table').on('click', '.trip', function() {
let tripID = $(this).attr('atrip-id');
seeTrip(tripID);
})
$('#newtripform').on('click', function() {
events.showNewForm();
});

$('.sort').click(events.sortTrips);
tripList.on('sort', render, tripList);

$('#newtrip').submit(events.addTrip);
$(document).on('submit', '#rezform', events.makeReservation);
// $('main').html('<h1>Hello World!</h1>');
});
9 changes: 9 additions & 0 deletions src/app/collections/trip_list.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
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;
11 changes: 11 additions & 0 deletions src/app/models/reservation.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import Backbone from 'backbone';

const Reservation = Backbone.Model.extend({
initialize: function(attributes) {
},
validate: function(attributes) {
const errors = {};
const rezFields = ['name', 'age', 'email'];
}
});
export default Reservation;
8 changes: 8 additions & 0 deletions src/app/models/trip.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import Backbone from 'backbone';

const Trip = Backbone.Model.extend({
urlRoot: 'https://ada-backtrek-api.herokuapp.com/trips/',
});


export default Trip;
Loading