Ada-C7 · botrethewey · May 23, 2017 · May 23, 2017 · May 24, 2017 · May 24, 2017
diff --git a/css/app.css b/css/app.css
diff --git a/css/foundation.css b/css/foundation.css
diff --git a/css/foundation.min.css b/css/foundation.min.css
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,125 @@
+@import url('https://fonts.googleapis.com/css?family=Permanent+Marker|Reenie+Beanie');
+
+body {
+  background-color: black;
+  background-image: url(http://www.geckosadventures.com/tales/wp-content/uploads/2017/04/istock-travel-backpacker.jpg);
+  background-attachment: fixed;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  padding-bottom: 300px;
+}
+
+header {
+  background-color: black;
+  color: white;
+  text-align: center;
+  height: 100px;
+  padding-top: 20px;
+  padding-bottom: 40px;
+}
+
+header>section {
+  text-align: center;
+}
+
+#trips {
+  text-align: center;
+  margin-top: 5%;
+}
+
+#trips h1, #reserve h2 {
+  color: white;
+  font-family: 'Permanent Marker', cursive;
+  text-shadow: 3px 3px black;
+  font-size: 3.0rem;
+  padding: 0;
+}
+
+#trips>button, #reserveForm section button {
+  display: block;
+  width: 100%;
+  margin: 2% auto;
+  background-color: black;
+}
+
+#filter {
+  margin-top: 1%;
+  background-color: white;
+  opacity: 0.9;
+  padding-bottom: 10px;
+}
+
+#list {
+  margin-top: 15%;
+  text-align: center;
+}
+
+main {
+  margin-top: 10px;
+  margin-left: 5%;
+  margin-right: 5%;
+}
+
+.share {
+  display: inline-flex;
+}
+
+.share input {
+  min-width: 200px;
+}
+
+.share button {
+  /*padding: 0 4%;*/
+  background-color: black;
+}
+
+.share button:hover, .share button:focus {
+  background-color: black;
+}
+
+.tripBlock {
+  background-color: white;
+  margin: 1% 0;
+}
+
+.tripBlock * {
+margin-bottom: 0;
+}
+
+.tripBlock h3{
+  color: black;
+}
+
+.tripBlock:hover {
+  opacity: 0.7;
+}
+
+.button {
+  font-size: 1.3em;
+  padding: 2% 4%;
+}
+
+#trip {
+  background-color: white;
+  padding: 0 1%;
+  margin: 15% 0;
+}
+
+.detail {
+  margin: 0 5%;
+  padding: 1% 0 2% 0;
+}
+
+#reserve {
+  margin: 6% 0;
+  background-color: yellow;
+  padding-bottom: 2%;
+  text-align: center;
+}
+
+#errors {
+  margin-top: 20%;
+  background-color: black;
+  color: white;
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,141 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Lazy Traveler</title>
+  <link rel="stylesheet" href="css/foundation.css">
+  <link rel="stylesheet" href="css/style.css">
+
+</head>
+<body>
+  <header>
+    <section>
+      <h5>"Peculiar travel suggestions are dancing lessons from God."</h5>
+      <p>Kurt Vonnegut, Cat's Cradle</p>
+    </section>
+  </header>
+  <main class="row">
+    <section class="small-12 medium-12 large-4 columns" id="trips">
+      <h1 >Welcome, Lazy Travelers</h1>
+      <button class="button" id="load">See All Trips</button>
+      <button class="button" id="show-filter">See Filters</button>
+      <button class="button" id="hide-filter">Hide Filters</button>
+
+      <div id="filter">
+        <form action="https://trektravel.herokuapp.com/trips/" method="get" id="continent-filter">
+          <label for="continent">Search by Continent</label>
+          <div class="share">
+            <input type="text" name="continent" placeholder="Africa" required="required"></input>
+            <button class="button">Go!</button>
+          </div>
+        </form>
+
+        <form action="https://trektravel.herokuapp.com/trips/" method="get" id="week-filter">
+          <label for="maximum-weeks">Search by Weeks</label>
+          <div class="share">
+            <input type="number" name="weeks" min="1" max="20" placeholder= "1" required="required"></input>
+            <button class="button">Go!</button>
+          </div>
+        </form>
+
+        <form action="https://trektravel.herokuapp.com/trips/" method="get" id="budget-filter">
+          <label for="maximun-budget">Search by Budget (USD)</label>
+          <div class="share">
+            <input type="text"  name="budget" placeholder="999.99" required="required"></input>
+            <button class="button">Go!</button>
+          </div>
+        </form>
+      </div>
+
+    </section>
+
+    <section class="small-12 medium-12 large-4 columns">
+      <div id="errors"></div>
+
+      <div id="list"></div>
+      <script id="list-template" type="text/template">
+        <section class="tripBlock">
+          <a href="#" id=<%- data.id %>><h3><%- data.name %></h3></a>
+          <p>
+            <strong>Continent: </strong>
+            <%- data.continent %>
+          </p>
+          <p>
+            <strong>Weeks: </strong>
+            <%- data.weeks %>
+          </p>
+        </section>
+      </script>
+
+      <div id="trip"></div>
+      <script id="details-template" type="text/template">
+        <section class="detail">
+          <h2>
+            <%- trip.name %>
+          </h2>
+          <p>
+            <strong>Trip ID: </strong>
+            <%- trip.id %>
+          </p>
+          <p>
+            <strong>Category: </strong>
+            <%- trip.category %>
+          </p>
+          <p>
+            <strong>Continent: </strong>
+            <%- trip.continent %>
+          </p>
+          <p>
+            <strong>Weeks: </strong>
+            <%- trip.weeks %>
+          </p>
+          <p>
+            <strong>Cost: $ </strong>
+            <%- trip.cost %>
+          </p>
+          <p>
+            <strong>About: </strong>
+            <%- trip.about %>
+          </p>
+        </section>
+      </script>
+    </section>
+
+
+    <section class="small-12 medium-12 large-4 columns" id="reserve">
+      <h2>Reserve Your Spot</h2>
+      <div id="message"></div>
+      <form action="https://trektravel.herokuapp.com/trips/" method="post" id="reserveForm">
+        <section>
+          <label for="name">Name</label>
+          <input type="text" id="name" name="name" required="required"></input>
+        </section>
+        <section>
+          <label for="age">Age</label>
+          <input type="text" id="age" name="age" required="required"></input>
+        </section>
+        <section>
+          <label for="email">Email</label>
+          <input type="email" id="email" name="email" required="required"></input>
+        </section>
+
+        <section>
+          <button class="button" type="submit">Make Reservation</button>
+        </section>
+      </form>
+    </section>
+  </main>
+
+
+  <script type="text/javascript"
+  src="https://code.jquery.com/jquery-3.2.1.min.js"
+  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
+  crossorigin="anonymous"></script>
+
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore.js"></script>
+
+  <script type="text/javascript" src="js/index.js"></script>
+
+
+</body>
+</html>
diff --git a/js/app.js b/js/app.js
@@ -0,0 +1 @@
+$(document).foundation()
diff --git a/js/index.js b/js/index.js
@@ -0,0 +1,117 @@
+var url = 'https://trektravel.herokuapp.com/trips';
+var id;
+
+var clearElements = function() {
+  $('#trip').empty();
+  $('#reserve').hide();
+  $('#list').empty();
+  $('#message').empty();
+  $('#errors').empty();
+};
+
+var listSuccessCallback = function(response) {
+  clearElements();
+  console.log(response);
+  console.log("list feature is working!");
+  if (response === undefined) {
+    $("#errors").html("<h2>Currently there are no trip packages matching your search parameter!</h2>");
+  } else {
+    var listTemplate = _.template($('#list-template').html());
+    for (var i = 0; i < response.length; i++) {
+      var generatedHtml = listTemplate({
+        data: response[i]
+      });
+      $('#list').append($(generatedHtml));
+    }
+  }
+};
+
+var listClickHandler = function(e) {
+  $.get(url, listSuccessCallback).fail(failureCallback);
+};
+
+var tripSuccessCallback = function(response) {
+  console.log("trip detail feature working!");
+  $('#trip').empty();
+  var detailTemplate = _.template($('#details-template').html());
+  var generatedHtml = detailTemplate({
+    trip: response
+  });
+  $('#trip').append($(generatedHtml));
+  $('#reserve').show();
+};
+
+var tripClickHandler = function() {
+  id = $(this).attr('id');
+  $('#list').empty();
+  $.get(url + "/" + id, tripSuccessCallback).fail(failureCallback);
+};
+
+var failureCallback = function() {
+  console.log("HAHA Fail :( ");
+  clearElements();
+  $("#errors").html("<h2>AJAX request failed!</h2>");
+};
+
+
+var reservationSuccessCallback = function(response) {
+  $('#message').html('<p><strong> Reservation has been made!</strong></p>');
+  console.log("reservation feature is working!");
+};
+
+var showFilterClickHandler = function() {
+  $('#filter').show();
+  $('#show-filter').hide();
+  $('#hide-filter').show();
+};
+
+var hideFilterClickHandler = function() {
+  $('#filter').hide();
+  $('#hide-filter').hide();
+  $('#continent-filter').trigger('reset');
+  $('#week-filter').trigger('reset');
+  $('#budget-filter').trigger('reset');
+  $('#show-filter').show();
+};
+
+var filterHandler = function(that) {
+  console.log($(that).attr("action"));
+  var formData = $(that).serialize();
+  formData= formData.split("=").join("?query=");
+  console.log(formData);
+  $.get($(that).attr("action") + formData, listSuccessCallback).fail(failureCallback);
+};
+
+$(document).ready(function() {
+  $('#reserve').hide();
+  $('#filter').hide();
+  $('#hide-filter').hide();
+
+  $('#show-filter').click(showFilterClickHandler);
+  $('#hide-filter').click(hideFilterClickHandler);
+
+  $('#load').click(listClickHandler);
+  $('#list').on('click', 'a', tripClickHandler);
+
+  $('#reserveForm').submit(function(e) {
+    e.preventDefault();
+    var formData = $(this).serialize();
+    $.post($(this).attr("action") + id + "/reserve", formData, reservationSuccessCallback).fail(failureCallback);
+    $('#reserveForm').trigger('reset');
+  });
+
+  $('#continent-filter').submit(function(e) {
+    e.preventDefault();
+    filterHandler(this);
+  });
+
+  $('#week-filter').submit(function(e) {
+    e.preventDefault();
+    filterHandler(this);
+  });
+
+  $('#budget-filter').submit(function(e) {
+    e.preventDefault();
+    filterHandler(this);
+  });
+});