Ada-C7 · edeutschie · May 24, 2017 · May 24, 2017 · May 24, 2017 · May 25, 2017
diff --git a/index.html b/index.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html>
+  <head>
+      <title>Trek</title>
+      <meta charset="utf-8">
+      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.css">
+      <link href="trek.css" media="screen" rel="stylesheet" type="text/css">
+      <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js">
+    </script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore.js" integrity="sha256-SzKOQsVYGX1bmddyfPzGC6yXY/rWYGUSMOi6+T9gZ+0=" crossorigin="anonymous"></script>
+      <script src="trek.js" type="text/javascript"></script>
+  </head>
+
+  <body>
+    <h1>WanderLust</h1>
+
+    <section id="errors"></section>
+    <button id="load" class="success button"> See all trips! </button>
+
+    <div id="trip-info-indv" class="reveal" id="exampleModal1" data-reveal></div>
+
+    <div id="trip-list" class="row small-up-2 medium-up-3 large-up-4"></div>
+    <script id="trip-list-template" type="text/template">
+      <section class="column column-block thumbnail">
+        <div class="tiles">
+          <p>Trip ID: <%- trip.id %></p>
+          <p>Name: <%- trip.name %></p>
+          <p>Continent: <%- trip.continent %></p>
+          <p>No. of Weeks: <%- trip.weeks %></p>
+          <button data-open="exampleModal1" id="seeTrip" class="success button" data-tripid = <%- trip.id%> >More Info</button>
+        </div>
+      </section>
+    </script>
+
+    <script id="trip_template" type="text/template">
+    <div id="trip_info">
+
+      <h3>Trip Info</h3>
+      <p>Trip ID: <%- trip.id %></p>
+      <p>Name: <%- trip.name %></p>
+      <p>Destination: <%- trip.destination %></p>
+      <p>Continent: <%- trip.continent %></p>
+      <p>Description: <%- trip.about %></p>
+      <p>Category: <%- trip.category %></p>
+      <p>No. of Weeks: <%- trip.weeks %></p>
+      <p>Cost: <%- trip.cost %></p>
+      <div id="message"></div>
+      <form action="https://trektravel.herokuapp.com/trips/<%- trip.id %>/reserve" method="post">
+        <section>
+          <label>Name</label>
+          <input type="text" id="name" name="name"></input>
+        </section>
+        <section class="button">
+          <button type="submit">Reserve Spot</button>
+        </section>
+      </form>
+      <button class="close-button" data-close aria-label="Close modal" type="button">
+        <span aria-hidden="true">&times;</span>
+      </button>
+      </div>
+    </script>
+
+  </body>
+</html>
diff --git a/trek.css b/trek.css
@@ -0,0 +1,31 @@
+@import url('https://fonts.googleapis.com/css?family=Barrio');
+
+
+* {
+  font-family: 'Barrio', cursive;
+}
+
+h1 {
+  text-align: center;
+  font-family: 'Barrio', cursive;
+}
+
+button #load {
+  margin: auto;
+}
+
+button {
+  font-family: 'Barrio', cursive;
+}
+
+.thumbnail {
+  text-align: center;
+  background-color: gray;
+  border-radius: 20px;
+}
+
+.tiles {
+  margin: 10%;
+  height: 350px;
+  padding: 10%;
+}
diff --git a/trek.js b/trek.js
@@ -0,0 +1,79 @@
+var url = 'https://trektravel.herokuapp.com/trips';
+
+var successCallback = function(response) {
+  console.log("success!");
+  console.log(response);
+
+  var tripTemplate = _.template($("#trip-list-template").html());
+  for (var i = 0; i < response.length; i++ ) {
+    var generatedHtml = tripTemplate({
+      trip: response[i]
+    });
+
+    $("#trip-list").append($(generatedHtml));
+  };
+};
+
+var successCallbackTrip = function(response) {
+  console.log("Success! for indiv trip");
+  console.log(response);
+  var indivTripTemplate = _.template($("#trip_template").html());
+  var generatedHtml = indivTripTemplate({
+    trip: response
+
+  })
+
+  $("#trip-info-indv").html($(generatedHtml));
+
+  $("#trip-info-indv").show();
+};
+
+var failureCallback = function() {
+  console.log("Didn't work");
+  $("#errors").html("<h1>API request failed!</h1>");
+};
+
+var clickHandler = function() {
+  $.get(url, successCallback).fail(failureCallback);
+};
+
+var clickHandlerTrip = function(event){
+  var id = $(this).attr("data-tripid");
+  var tripUrl = url + "/" + id;
+  $.get(tripUrl, successCallbackTrip).fail(failureCallback);
+};
+
+var clickHandlerCloseModal = function(event) {
+  $("#trip-info-indv").hide();
+};
+
+var makeReservation = function(event){
+  event.preventDefault();
+
+  var url = $(this).attr("action");
+  var formData = $(this).serialize();
+
+  console.log(formData);  //gives us back a string
+
+  $.post(url, formData, function(response){
+    $("#message").html("<p>Reservation Confirmed!</p>");
+
+    console.log(response);
+  }).fail(function(){
+    $("#message").html("<p>Reservation Did Not Go Through</p>");
+  });
+};
+
+$(document).ready(function() {
+
+//associate the click handler
+$("#load").click(clickHandler);
+
+$("#trip-list").on("click", "button#seeTrip", clickHandlerTrip);
+
+$("#trip-info-indv").on("submit", "form", makeReservation);
+
+$("#trip-info-indv").on("click", ".close-button", clickHandlerCloseModal);
+
+
+});