Ada-C9 · Abiaina · May 23, 2018 · May 23, 2018 · May 23, 2018 · May 23, 2018
diff --git a/index.html b/index.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Trek</title>
+  <link rel="stylesheet" href="style.css">
+  <!-- Compressed CSS -->
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.4.3/dist/css/foundation.min.css" integrity="sha256-GSio8qamaXapM8Fq9JYdGNTvk/dgs+cMLgPeevOYEx0= sha384-wAweiGTn38CY2DSwAaEffed6iMeflc0FMiuptanbN4J+ib+342gKGpvYRWubPd/+ sha512-QHEb6jOC8SaGTmYmGU19u2FhIfeG+t/hSacIWPpDzOp5yygnthL3JwnilM7LM1dOAbJv62R+/FICfsrKUqv4Gg==" crossorigin="anonymous">
+
+</head>
+<body>
+<div class="grid-x grid-padding-x">
+  <h1 class="small-12 medium-12 cell" id="title">Trek</h1>
+  <h3 class="small-12 medium-12 cell" id="userMessages"><h3>
+
+  <button type="button" class="button secondary" id="seetrips">See All Trips</button>
+</div>
+
+  <div class="grid-x grid-padding-x">
+    <div class="small-12 medium-6 cell">
+      <div class="table-scroll">
+        <table id="showtrips" class="hover">
+        </table>
+      </div>
+    </div>
+    <div class="small-12 medium-6 cell">
+      <div class="Trip">
+        <table id="tripDetails">
+        </table>
+
+        <div class="ReserveTrip">
+          <h1>Reserve Trip</h1>
+          <form id="reservationForm">
+            <div>
+              <label for="name">Your Name: </label>
+              <input type="text" name="name" id="travellerName"/>
+              <label for="email">Your Email: </label>
+              <input type="text" name="email" id="travellerEmail"/>
+            </div>
+            <div id="tripName">
+            </div>
+            <input type="submit" name="reserve-trip" value="Reserve Trip" />
+          </form>
+
+        </div>
+      </div>
+    </div>
+  </div>
+
+
+  <script
+  src="https://code.jquery.com/jquery-3.3.1.js"></script>
+  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+  <script type="text/javascript" src="index.js"></script>
+</body>
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,120 @@
+
+const URL = 'https://ada-backtrek-api.herokuapp.com';
+
+const banner = $('#userMessages');
+
+const showBanner = (message) => {
+  banner.empty();
+  banner.append(message);
+}
+
+const loadTrips = () => {
+  const tripList = $('#showtrips');
+  tripList.empty();
+  $('.ReserveTrip').hide();
+
+  $('#tripDetails').empty();
+
+  const tripParam = '/trips';
+
+  showBanner('Loading Trips!  Please Wait...!');
+
+  axios.get(URL + tripParam)
+
+  .then((response) => {
+    console.log('Responding');
+    console.log(response);
+
+    tripList.append(`<tr><th>All Trips</th></tr>`);
+
+    response.data.forEach((trip) => {
+      tripList.append(`<tr><td id=${trip.id}>${trip.name}</td></tr>`);
+    });
+    showBanner('Trips Loaded');
+
+  })
+
+  .catch((error) => {
+    console.log(error);
+    showBanner(`Error: ${error.message }`);
+
+  });
+
+}
+
+const reserveTrip = function reserveTrip(tripId, reservationDetails){
+
+  showBanner('Loading Trip Details!  Please Wait...!');
+
+  axios.post(`https://ada-backtrek-api.herokuapp.com/trips/${tripId}/reservations`, reservationDetails)
+
+  .then((response) => {
+    console.log('Responding');
+    showBanner('Successfully Reserved Trip');
+  })
+
+  .catch((error) => {
+    console.log(error);
+    showBanner(`Unable to Reserve: ${error.message }`);
+  });
+
+}
+
+const loadTripDetails = (id) => {
+  const tripDetails = $('#tripDetails');
+  tripDetails.empty();
+
+  const tripId = `/trips/${id}`;
+
+  showBanner('Loading Trip Details!  Please Wait...!');
+
+  axios.get(URL + tripId)
+
+  .then((response) => {
+    console.log('Responding');
+    console.log(response);
+
+    tripDetails.append(`<tr><th>Trip Details</th></tr>`);
+
+    let detail = response.data;
+    tripDetails.append(`<tr><td>Name: ${detail.name}</td></tr>`);
+    tripDetails.append(`<tr><td>Trip Id: ${detail.id}</td></tr>`);
+    tripDetails.append(`<tr><td>Continent: ${detail.continent}</td></tr>`);
+    tripDetails.append(`<tr><td>Category: ${detail.category}</td></tr>`);
+    tripDetails.append(`<tr><td>Weeks: ${detail.weeks}</td></tr>`);
+    tripDetails.append(`<tr><td>Cost: $${detail.cost}</td></tr>`);
+    tripDetails.append(`<tr><td>${detail.about}</td></tr>`);
+
+    showBanner('Trip Details Loaded');
+
+    $('#tripName').empty();
+    $('#tripName').append(`<h5>Trip Name: ${detail.name}</h5>`);
+    $('.ReserveTrip').show();
+    $('#reservationForm').off();
+
+    $('#reservationForm').submit(function(event) {
+
+      let reservationDetails = {
+        name: $('#travellerName').val(),
+        email: $('#travellerEmail').val(),
+      };
+
+      event.preventDefault();
+
+      reserveTrip(detail.id, reservationDetails);
+    });
+  })
+
+  .catch((error) => {
+    showBanner(`Error: ${error.message }`);
+  });
+}
+
+$(document).ready(() => {
+  $('#seetrips').click(loadTrips);
+  $('#showtrips').on( 'click', 'td', function(event) {
+    let id = $(this).attr('id');
+    event.preventDefault();
+    loadTripDetails(id);
+  });
+});
diff --git a/style.css b/style.css
@@ -0,0 +1,33 @@
+.ReserveTrip {
+  display: none;
+}
+
+#title {
+  background-color: green;
+  color: white;
+  text-align: center;
+}
+
+#userMessages {
+  font-size: 12pt;
+  font-style: italic;
+  color: grey;
+  text-align: center;
+}
+
+#showtrips {
+  background-color: #8FBC8F;
+}
+
+#tripDetails {
+  background-color: #98FB98;
+}
+
+.ReserveTrip {
+  background-color: #20B2AA;
+  text-align: center;
+}
+
+#travellerName {
+  padding: 1rem;
+}