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 - Kee - BackTREK #47

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

Pipes - Kee - BackTREK #47

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
64fece8
Added trip model, collection, and basic layout
anemonekey Nov 28, 2017
6b4b06d
Can see list of all trips; working on showing single trip details
anemonekey Nov 29, 2017
3fa1d5f
Edited and deleted a few files
anemonekey Nov 29, 2017
76fcefc
Finished wave 1 display requirements
anemonekey Dec 1, 2017
c478ce2
Working on add trip module
anemonekey Dec 2, 2017
d3cba78
Working on posting additional trips
anemonekey Dec 4, 2017
92ed1e4
Trying to fix add trip functionality
anemonekey 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
178 changes: 171 additions & 7 deletions dist/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,183 @@
<html>
<head>
<meta charset="utf-8">
<title>My JavaScript App</title>
<title>BackTREK </title>
<!--[if lt IE 9]>
<script src = "http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" type="image/ico" href="/favicon.ico">
</head>
<body>
<header>
<div class="container-fluid body-wrapper">
<header class="row header">
<h1 class="col">BackTREK</h1>
</header>

</header>
<main>
<main class="row clearfix main">
<!-- <section id="status" class="col-12">
<div class="button-wrapper row">
<i class="fa fa-close fa-lg"></i>
</div>
<ul class="msg-list row">
<li>error or something</li>
</ul>
</section> -->

</main>
<footer>
<section class="col-12 main-content">
<div class="row content-wrapper">
<section class="col-sm-12 col-md-6 all-trips">
<div class="row search-wrapper">
<form class="col-sm-12 form-inline" action="">
Copy link

Choose a reason for hiding this comment

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

You don't seem to have any JavaScript catching this form's submit action, so it causes a page reload.

<i class="col-sm-1 col-md-1 fa fa-search fa-lg"></i>
<div class="col-sm-11 col-md-4 form-group">
<select class="form-control" id="search-select">
<option name="name">Name</option>
<option name="continent">Place</option>
<option name="weeks">Weeks</option>
</select>
</div>
<div class="col-sm-12 col-md-5 form-group">
<input type="text" name="search-query" id="search-query">
</div>
<button type="submit" class="col-sm-12 col-md-2 btn btn-warning">Submit</button>
</form>
</div>
<div class="row table-wrapper">
<table id="trip-table" class="col-sm-12">
<thead>
<tr>
<th class="sort name">Name</th>
<th class="sort continent">Place</th>
<th class="sort weeks">Weeks</th>
</tr>
</thead>

</footer>
<tbody id="trip-list"></tbody>

</table>
</div>
</section>

<section class="col-sm-12 col-md-6 trip-deets">
<div class="row justify-content-end">
<div class="col-12 add-wrapper">
<button id="add-trip" class="btn btn-warning" data-toggle="modal" data-target="#addTripModal">Add Trip</button>
</div>
<div class="modal fade" id="addTripModal" tabindex="-1" role="dialog" aria-labelledby="addTripModal" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Add Trip</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<form id="add-trip-form" action="">
<div class="form-group">
<label for="name">Name</label>
<input type="text" name="name"></input>
</div>
<div class="form-group">
<label for="category">Category</label>
<input type="text" name="category"></input>
</div>
<div class="form-group">
<label for="continent">Continent</label>
<select class="form-control" name="continent">
<option name="Africa">Africa</option>
<option name="Asia">Asia</option>
<option name="Australasia">Australasia</option>
<option name="Europe">Europe</option>
<option name="North America">North America</option>
<option name="South America">South America</option>
</select>
</div>
<div class="form-group">
<label for="budget">Budget</label>
<input type="number" name="budget"></input>
</div>
<div class="form-group">
<label for="weeks">Number of Weeks</label>
<input type="number" name="weeks"></input>
</div>
<div class="form-group">
<label for="about">Description</label>
<textarea name="about"></textarea>
</div>
<div>
<button type="submit" class="btn btn-primary">Submit</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
</div>
</form>
</div>
<!-- <div class="modal-footer">

</div> -->
</div>
</div>
</div>
</div>

<div id="trip-details" class="row details-wrap">
</div>

</section>
</div>
</section>
</main>

<footer class="row justify-content-center align-content-center footer">
<p class="col align-self-center copyright">Copyright &copy; 2017 Kee Nam <i class="fa fa-birthday-cake"></i></p>
</footer>
</div>





<script type="text/template" id="trip-template">
<tr class="trip-item">
<td id="trip<%- id %>">
<a class="trip-title" data-id="<%- id %>"><%- name %></a>
</td>
<td>
<%- continent %>
</td>
<td>
<%- weeks %>
</td>
</tr>
</script>

<script type="text/template" id="detail-template">
<div class="col-sm-12">
<h2 class="detail-name"><i class="fa fa-map-marker"></i> <%- name %></h2>
</div>
<div class="col-sm-12 col-md-6">
<h5 class="detail-continent"><i class="fa fa-globe"></i> Continent: <%- continent %></h5>
</div>
<div class="col-sm-12 col-md-6">
<h5 class="detail-weeks"><i class="fa fa-calendar"></i> Weeks: <%- weeks %></h5>
</div>
<div class="col-sm-12 col-md-6">
<h5 class="detail-category"><i class="fa fa-tags"></i> Category: <%- category %></h5>
</div>
<div class="col-sm-12 col-md-6">
<h5 class="detail-cost"><i class="fa fa-usd"></i> Cost: $<%- cost %></h5>
</div>
<div class="col-12">
<h5 class="about-label"><i class="fa fa-info-circle"></i> About: </h5>
<p class="detail-about"><%- about %></p>
</div>
</script>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<script src="app.bundle.js" type="text/javascript"></script>
</body>
</html>
87 changes: 85 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,91 @@ import _ from 'underscore';
import './css/foundation.css';
import './css/style.css';

console.log('it loaded!');
// do i need you? -- I THINK SO
import Trip from './app/models/trip';
import TripList from './app/collections/trip_list';

// ALL THE FIELDS
const TRIP_FIELDS = ['id', 'name', 'continent', 'about', 'category', 'weeks', 'cost'];

const tripList = new TripList();
let trip = new Trip();

let tripTemplate;
let tripDetails;

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

tripList.forEach((trip) => {
const generatedHtml = tripTemplate(trip.attributes);
tripTbody.append(generatedHtml);
});
};

const renderDetails = function renderDetails(trip){
const detailsDiv = $('#trip-details');
detailsDiv.html('');
trip.fetch({
success: (model) => {
const generatedHTML = $(tripDetails(trip.attributes));
detailsDiv.append(generatedHTML);
console.log(trip);
},
error: (status, response) => {
const errors = ($.parseJSON(response.responseText))['errors'];
}
});
console.log(trip);
};

// JQUERY
$(document).ready( () => {
$('main').html('<h1>Hello World!</h1>');
// my templates
tripTemplate = _.template($('#trip-template').html());
tripDetails = _.template($('#detail-template').html());

console.log(`About to fetch data from ${ tripList.url }`);

tripList.on('update', render);
Copy link

Choose a reason for hiding this comment

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

You also need an:

tripList.on('sort', render);

Otherwise it sorts, but doesn't display the results on the screen!

tripList.fetch();

trip.on('click', renderDetails);
trip.fetch();

TRIP_FIELDS.forEach((field) => {
const headerElement = $(`th.sort.${ field }`);
headerElement.on('click', (event) => {
tripList.comparator = field;
tripList.sort();
})
});

// Show individual trip details
$('tbody#trip-list').on('click', 'a', function() {
let tripID = $(this).attr('data-id');
trip = tripList.get(tripID);
trip.on('click', renderDetails(trip));
});

// Listen for form submissions
$('#add-trip-form').on('submit', (event) => {
event.preventDefault();

const tripData = readForm();
Copy link

Choose a reason for hiding this comment

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

You don't HAVE a readForm() function.

const trip = tripList.add(tripData);
console.log(tripData);
console.log(trip);

const newTrip = new Trip(formData);
trip.save({}, {
success: console.log("Success!"),
error: console.log("Oh no!")
});

});


});
17 changes: 17 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,17 @@
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',

initialize: function () {
this.model = Trip;
}
});

export default TripList;
10 changes: 10 additions & 0 deletions src/app/models/trip.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import Backbone from 'backbone';

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

export default Trip;
74 changes: 73 additions & 1 deletion src/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,74 @@

/* Your styles go here! */

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css');
@import url('https://fonts.googleapis.com/css?family=Judson|Quando');

/*---------- test ----------*/
/** { border: 1px solid red !important; }*/



html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }
html, body { height: 100%; }
body {
width: 100%;
padding: 0;
font-size: 16px;
background: linear-gradient(to bottom, #6790c6 0%,#343789 100%);
background-repeat: no-repeat;
background-attachment: fixed;
font-family: 'Quando', serif;
}
h1, h2, button { font-family: 'Judson', serif; }
a:hover,
button:hover {
cursor: pointer;
}
header, main, footer { width: 100%; max-width: 100%; }
.row { margin: 0; max-width: 100%; }
.row .row { margin: 0; }

div.add-wrapper { text-align: right; }

/*header.header { margin: 0.5% 2% 1%; }*/
section.main-content { margin-top: 1%; }

i.fa { margin-right: 2%; }
i.fa-search { margin: 0; }


h1.col {
margin-left: 1%;
padding: 0;
color: #fefefe;
}



/*---------- table ----------*/
table#trip-table { margin-top: 5%; }
table#trip-table { width: 100%; overflow: scroll; }

/*---------- form ----------*/
input#search-query { margin: 0; }
select#search-select { width: 100%; }

/*---------- trip details ----------*/
div#trip-details {
margin-top: 5%;
background: #fafafa;
/*padding: 2% 4%;*/
border-radius: 4px;
}
div#trip-details div { padding: 2% 4% 1%;}
h2.detail-name {
margin-bottom: 2%;
padding: 1% 1% 2%;
border-bottom: 2px solid #ededed;
}



/*---------- footer ----------*/
p.copyright { text-align: center; }