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 - Sarah Read-Brown - BackTREK #46

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

Pipes - Sarah Read-Brown - BackTREK #46

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
6fee879
Added trip model and trip_list collection and successfully outputed a…
SRBusiness Nov 28, 2017
1fbdeb3
Adds html and js for a successful underscore template. Got api trip d…
SRBusiness Nov 29, 2017
c7fccfe
set up some basic html foundation styling to split the page into righ…
SRBusiness Nov 29, 2017
64354cb
build renderDetails function and got details template working
SRBusiness Nov 29, 2017
3a20ec5
added model validations for trip
SRBusiness Nov 30, 2017
00d0f14
Modal successfully opens and closes
SRBusiness Dec 1, 2017
6d132d1
Added form input components to add trip modal
SRBusiness Dec 1, 2017
22439cb
fixes modal hide and show functionality per Dan's feedback from Trek …
SRBusiness Dec 1, 2017
be88df0
Adds a function to read form data and updates radio buttons in form t…
SRBusiness Dec 1, 2017
52376dc
adds the start of client side error handling
SRBusiness Dec 1, 2017
f087e88
Adds error handling messages for trip modal
SRBusiness Dec 1, 2017
6f5214e
Adds more content and functionality to addTripHandler
SRBusiness Dec 1, 2017
637fb6d
working on clearning form at the appropriate times interruupted by retro
SRBusiness Dec 2, 2017
df745f7
More styling of the modal
SRBusiness Dec 2, 2017
555bc15
changed error handling attribute for trips from title to name so it i…
SRBusiness Dec 5, 2017
0112026
Shows success message on successful trip addition
SRBusiness Dec 5, 2017
6001cfc
For success message adds a X that can be clicked on to hide the succe…
SRBusiness Dec 7, 2017
eeb0fa1
adds a reservation model
SRBusiness Dec 7, 2017
cb0ceea
added reservation form to trip-details underscore template
SRBusiness Dec 7, 2017
fb41dd6
refactor function for reading forms so that it can work for trip and …
SRBusiness Dec 7, 2017
8c5218b
Woof lots of work getting add reservation to work and makin sure all …
SRBusiness Dec 7, 2017
07f3da5
Went through and cleaned up and made comments on app js file
SRBusiness 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
183 changes: 166 additions & 17 deletions dist/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,169 @@
<!DOCTYPE html>
<!-- TODO: go back through at the end and change divs over to semantic html tags like article or section. Divs are used for css style groupings -->
<html>
<head>
<meta charset="utf-8">
<title>My JavaScript App</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<header>

</header>
<main>

</main>
<footer>

</footer>
<script src="app.bundle.js" type="text/javascript"></script>
</body>
<head>
<meta charset="utf-8">
<title>My JavaScript App</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<header>
<h1>Trek!</h1>
<div>
<button id='add-trip-button' class='button'>Add a trip</button>
</div>
<div id='success'>
<h3 class='modal-close'>X</h3>
<p>

</p>
</div>
</header>
<main>
<div id='main-content' class='row'>
<div id='left' class='small-6 columns'>
<section>
<h3>Trips!</h3>
<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>
</section>
</div>
<div id="right" class='small-6 columns'>
<section id="trip-details">
</section>
<div id="reserve">
<h2>Reserve</h2>
<form id='reservation-form'>

<div id="clear-me">
<input type="hidden" id="trip_id" name="trip_id" value="">

<label for="name">Name: <span class='form-name'></span></label>
<input type="text" name="name"></input>

<label for="email">Email: <span class='form-email'></span></label>
<input type="text" name="email"></input>
</div>


<input id='myBtn' type="submit" class='button' value="Reserve a spot!"></input>

</form>
</div>
</div>
</div>
<!-- The Modal -->
<div id="myModal" class="modal modal-close">
<!-- Modal content -->
<div class="modal-content">
<div class='row'>
<div class="small-4 columns">
<h2 id='message'>Add a Trip</h2>
</div>
<div class="small-2 small-offset-3 columns text-center">
<h2 id="close" class='modal-close'>X</h2>
</div>
</div>
<form id="add-trip-form">
<div class="row">
<div class="small-12 columns">
<label for="name">Name:<span class='form-name'></span></label>
<input type="text" name="name" placeholder="trip name"></input>
</div>
</div>
<div class="row">
<div class="small-4 columns">
<label for="category">Category: <span class='form-category'></span></label>
<input type="text" name="category" placeholder="category"></input>
</div>
<div class="small-4 columns">
<label for="weeks">Weeks: <span class='form-weeks'></span></label>
<input type="number" name="weeks" placeholder="1" min="1"></input>
</div>
<div class="small-4 columns">
<label for="cost" >Cost: <span class='form-cost'></span></label>
<input type="number" name="cost" placeholder="10.00"></input>
</div>
</div>
<div class="row">
<div class="small-12 columns">
<label for="continent">Continent:<span class='form-continent'></span></label>
<input type="text" name="continent" placeholder="continent"></input>
<!-- <select>
<option value="Africa">Africa</option>
<option value="Antartica">Antartica</option>
<option value="Asia">Asia</option>
<option value="Australasia">Australasia</option>
<option value="Europe">Europe</option>
<option value="North America">North America</option>
<option value="South America">South America</option>
</select> -->
</div>
</div>
<div class="row">
<div class="small-12 columns">
<label for="about">About: <span class='form-about'></span></label>
<input type="text" name="about" placeholder="trip description"></input>
</div>
</div>
<div class='row'>
<div class="small-3 small-centered columns ">
<input id='myBtn' type="submit" class='button' value="Add Trip!"></input>
</div>
</div>
</form>
<!-- </div> -->
</div>
</div>
</main>
<footer>

</footer>
<script type="text/template" id="trip-template">
<tr class="book">
<td>
<%- name %>
</td>
<td>
<%- continent %>
</td>
<td>
<%- category %>
</td>
<td>
<%- weeks %>
</td>
<td>
<%- cost %>
</td>
</tr>
</script>
<script type="text/template" id="details-template">
<h3><%- name %></h3>
<ul>
<li><strong>Continent: </strong><%- continent %></li>
<li><strong>Category:</strong> <%- category %></li>
<li><strong>Weeks:</strong> <%- weeks %></li>
<li><strong>Cost:</strong> $<%- cost %></li>
<li><strong>About:</strong> <%- about %></li>
</ul>
<hr>

</script>
<script type="text/template" id="status-message-template">
<span class='errorForm'>
<%- problem %>
</span>
</script>
<script src="app.bundle.js" type="text/javascript"></script>
</body>
</html>
Loading