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.

Sign up for GitHub

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

Pipes - Sairagul - BackTrek #45

Open
wants to merge 8 commits into
base: master
Choose a base branch
from
Open

Pipes - Sairagul - BackTrek #45

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
471d6b5
Wave1, gives all trips
sairagula Nov 30, 2017
7fd4759
Added trip to DB
sairagula Dec 1, 2017
dc9d6b8
Reservation has been added
sairagula Dec 1, 2017
417045e
Sorting added
sairagula Dec 1, 2017
b48f709
Add trip form attached to button
sairagula Dec 1, 2017
bb08560
Working code before validations
sairagula Dec 1, 2017
b47fc5b
Modal added, reservation saves, but add trip stopped working
sairagula Dec 7, 2017
5e3ab44
Basic requirements are met
sairagula Dec 7, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
143 changes: 134 additions & 9 deletions dist/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,144 @@
<html>
<head>
<meta charset="utf-8">
<title>My JavaScript App</title>
<title>Back Trek</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<script
src="https://code.jquery.com/jquery-3.2.1.js"
integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
crossorigin="anonymous">
</script>

<script src="https://cdn.jsdelivr.net/foundation/6.2.4/foundation.min.js"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/foundation/6.2.4/foundation.min.css">
</head>

<body>
<header>

<div class="header">
<h1 class="header_word">Welcome to Travel Trek<h1>
<button id="load" class="button"> See all trips </button>
<!-- <button id="add_trip" class="button"> Add a Trip </button> -->
<a href="#add-trip-form" rel="modal:open" id="add_trip" class="button"> Add Trip</a>
</div>
</header>
<main>

</main>
<footer>

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

<main class="clearfix">
<section id="status-messages">
<button class="clear float-right">
<img src="http://www.pvhc.net/img223/xeiwtpbbgpmyhtcnjvwt.png" alt="Clear">
</button>
<ul>
</ul>
</section>


<aside id="show_form" class="columns medium-8 small-12">
<!-- <h2>Add a Trip</h2> -->
<form id="add-trip-form">
<label for="name">Name</label>
<input type="text" name="name"></input>

<label for="continent">Continent</label>
<input type="text" name="continent"></input>

<label for="about">About</label>
<input type="text" name="about"></input>

<label for="category">Category</label>
<input type="text" name="category"></input>

<label for="weeks">Weeks</label>
<input type="number" name="weeks"></input>

<label for="cost">Cost</label>
<input type="string" name="cost" step=".01"></input>

<p><input type="submit" value="create!" class="button"></input></p>
</form>
</aside>

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

<div id="trip" class="row">
</div>
</main>
<footer>
<!-- &copy; Sairagul Abdukhalieva , 2017 -->
</footer>

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



<script type="text/template" id="trip-template">
<p><strong>Name : </strong><%- name %></p>
<p><strong>About : </strong><%- about %></p>
<p><strong>Continent : </strong><%- continent %></p>
<p><strong>Category : </strong><%- category %></p>
<p><strong>Weeks : </strong><%- weeks %></p>
<p><strong>Cost : </strong><%- cost %></p>

<div class="row">
<p class="reserve"><b> Make a reservation </b></p>
<form id="reservation-form" data-trip-id="<%- id%>">
<label for="name">Name:</label>
<input type="text" name="name"></input>

<label for="name">Age:</label>
<input type="number" name="age"></input>

<label for="email">Email:</label>
<input type="text" name="email"></input>


<input type="submit" value="Reserve a spot" class="button"></input>
</form>
</div>
</script>

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />

</body>
</html>
216 changes: 214 additions & 2 deletions src/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,220 @@ import _ from 'underscore';
import './css/foundation.css';
import './css/style.css';

// Our components
import Trip from './app/models/trip';
import Reservation from './app/models/reservation';
import TripList from './app/collections/trip_list';
console.log('it loaded!');

$(document).ready( () => {
$('main').html('<h1>Hello World!</h1>');
const tripList = new TripList()


const TRIP_FIELDS = ['name', 'continent', 'about', 'category', 'weeks', 'cost'];
const RESERVATION_FIELDS = ['name', 'email', 'age'];

let tripsTemplate;
let tripTemplate;

// Clear status messages
const clearStatus = function clearStatus() {
$('#status-messages ul').html('');
$('#status-messages').hide();
};

// Add a new status message
const reportStatus = function reportStatus(status, message) {
console.log(`Reporting ${ status } status: ${ message }`);

const statusHTML = `<li class="${ status }">${ message }</li>`;

// note the symetry with clearStatus()
$('#status-messages ul').append(statusHTML);
$('#status-messages').show();
};

const render = function render(tripList){
const $tripsTableElement = $('#trip-list');
$tripsTableElement.html('');

tripList.forEach((trip) => {
const generatedHTML = $(tripsTemplate(trip.attributes));
generatedHTML.on('click',(event) => {
$('#trips').hide();
$('#trip').show();
trip.fetch({
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Consider adding an error event handler to deal with times that the API doesn't work and let the user know.

success (model, response){
renderTrip(model);
}
});
}) //.on
$tripsTableElement.append(generatedHTML);
}); //tripList
}; // render


const renderTrip = function renderTrip(trip){
const $tripTableElement = $('#trip');
$tripTableElement.html('');
console.log(trip.attributes);

const generatedHTML = tripTemplate(trip.attributes);
$tripTableElement.html(generatedHTML);

$('#reservation-form').on('submit', addReservHandler);

$('th.sort').removeClass('current-sort-field');
$(`th.sort.${ tripList.comparator }`).addClass('current-sort-field');
};

const loadTrips = function loadTrips() {
tripList.fetch({
success(model, response) {
render(model);
}
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Consider adding an error event handler to deal with times that the API doesn't work and let the user know.

});
};

const readTripFormData = function readTripFormData() {
const tripData = {};
TRIP_FIELDS.forEach((field) => {
const $inputElement = $(`#add-trip-form input[name="${ field }"]`);
const value = $inputElement.val();

// Don't take empty strings, so that Backbone can
// fill in default values
if (value != '') {
tripData[field] = value;
}

$inputElement.val('');
});

console.log(tripData);
return tripData;
};

// Reserving a trip
const readReservFormData = function readReservFormData() {
const reservData = {};
RESERVATION_FIELDS.forEach((field) => {
const $inputReservElement = $(`#reservation-form input[name="${ field }"]`);
const value = $inputReservElement.val();

if (value != '') {
reservData[field] = value;
}

$inputReservElement.val('');
});

console.log("Read reserve data");
console.log(reservData);
return reservData;
};

const handleValidationFailures = function handleValidationFailures(errors) {
for (let field in errors) {
for (let problem of errors[field]) {
reportStatus('error', `${field}: ${problem}`);
}
}
};

// Add trip
const addTripHandler = function(event) {
event.preventDefault();
// $('#status-messages').html('')

const trip = new Trip(readTripFormData());
console.log(trip);


if (!trip.isValid()) {
handleValidationFailures(trip.validationError);
return;
}

trip.save({}, {
success: (model, response) => {
tripList.add(model);
console.log('Yay, trip was saved successfully!');
reportStatus('success', 'Yay, trip was saved successfully!');
},
error: (model, response) => {
console.log('Failed to save trip! Server response:');
console.log(response);

// After server-side validations failed, we have to remove this bad
// trip from the list
tripList.remove(model);

handleValidationFailures(response.responseJSON["errors"]);
},
});
};

// Add Reservation
const addReservHandler = function addReservHandler(event) {
event.preventDefault();
const reserve = new Reservation(readReservFormData());
reserve.set('trip_id', $(this).data('tripId'));


if (!reserve.isValid()) {
handleValidationFailures(reserve.validationError);
return;
}

reserve.save({}, {
success: (model, response) => {
console.log('Congratulations, you successfully reserved a trip!');

reportStatus('success', 'Congratulations, you successfully reserved a trip!');
},
error: (model, response) => {
console.log('Failed to save reservation. Server response: ');
console.log(response);

handleValidationFailures(response.responseJSON["errors"]);
}
})
}

$(document).ready(() => {
tripsTemplate = _.template($('#trips-template').html());
tripTemplate = _.template($('#trip-template').html());

// $('#trips').hide();

// Retrieving all trips by clicking the button
$('#load').on('click', function(){
$('#trips').show();
loadTrips()
$('#show_form').hide();
});

$('header').on('click', '#add_trip', function() {
$('#status-messages').hide();
$('#show_form').show();

});

$('#add-trip-form').on('submit', addTripHandler);

$('#status-messages button.clear').on('click', (event) => {
$('#status-messages ul').html('');
$('#status-messages').hide();
$('#show-form').hide();
})
// sorting by header element
tripList.on('sort', render);
TRIP_FIELDS.forEach((field) => {
const headerData = $(`th.sort.${ field }`);
headerData.on('click', (event) => {
tripList.comparator = field;
tripList.sort();
});
});
$('#status-messages button.clear').on('click', clearStatus);
});
15 changes: 15 additions & 0 deletions src/app/collections/trip_list.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
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;
Loading