Ada-C11 · KateAnnNichols · May 29, 2019 · May 30, 2019 · May 31, 2019 · Jun 3, 2019
diff --git a/index.css b/index.css
@@ -0,0 +1,31 @@
+#background {
+    width: 100%; 
+    height: 100%; 
+    position: fixed; 
+    left: 0px; 
+    top: 0px; 
+    z-index: -1; 
+}
+
+h1 {
+    text-align: center;
+}
+
+.stretch {
+    width:100%;
+    height:100%;
+}
+
+.load-btn{
+    text-align: center;
+    background-color: white;
+    height:50px;
+    width:125px;
+    position: fixed;
+}
+
+.btn-container {
+    text-align:center;
+  }
+
+
diff --git a/index.html b/index.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+  <title>Trek</title>
+  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
+  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
+  <script type="text/javascript" src="index.js"></script>
+  <link rel="stylesheet" href="index.css">
+</head>
+<style>
+    .flex-container {
+      display: none;
+      flex-wrap: nowrap;
+      background-color: rgb(200, 230, 199);
+    }
+
+    .flex-container .box {
+      background-color: white;
+      width: 50%;
+      margin: 5px;
+      text-align: left;
+      line-height: 30px;
+      font-size: 15px;
+    }
+    </style>
+    </head>
+    <body>
+    <h1>Trek</h1>
+<body>
+  <div id="background">
+    <img src="https://i.ibb.co/RQjSQ7w/Screen-Shot-2019-05-31-at-1-28-37-PM.png" class="stretch" alt="" />
+</div>
+
+<div class="card">
+  <div class="btn-container">
+    <button id="load-trips">View All Trips</button>
+  </div>
+</div>
+
+<div class="flex-container">
+  <div class="box">
+      <!-- <section id="status"></section> -->
+      <section class="all-trips">
+          <div id="trip-list-container">
+            <ul id="trip-list"></ul>
+          </div>
+  </div>
+      </section>
+  <div class="box">
+      <section class="trip-details">
+          <h2>Trip Details</h2>
+          <div id="trip-info"></div>
+          <div class="box">
+          <div id="reservation-form"> 
+              <p><h2>Book this trip!</h2></p>
+              <form>
+                <label for="your-name">Your Name:</label>
+                <input type="text" id="your-name" name="your-name" required>
+                <label for="email">Email:</label>
+                <input type="text" id="email" name="email" required>
+                <button type="submit">Submit</button>
+              </form>
+            </div>
+          </div>
+        </section>
+  </div>
+</body>
+</html>
+
diff --git a/index.js b/index.js
@@ -0,0 +1,118 @@
+const tripsUrl = 'https://trektravel.herokuapp.com/trips';
+
+const displayStatus = (message) => {
+    $('#status').html(message);
+  };
+
+const reportError = (message, errors) => {
+  let content = `<p>${message}</p><ul>`;
+  for (const field in errors) {
+    for (const problem of errors[field]) {
+      content += `<li>${field}: ${problem}</li>`;
+    }
+  }
+  content += "</ul>";
+  reportStatus(content);
+};
+
+const showTripDetails = id => {
+  const detailsUrl = tripsUrl + `/${id}`;
+  axios.get(detailsUrl)
+    .then(function(response) {
+        const trip = response.data;
+        let info = `<h3> ${trip.name}</h2>
+        <p>${trip.about}</p>
+        <ul>
+        <li><b>Continent</b>: ${trip.continent}</li>
+        <li><b>Category</b>: ${trip.category}</li>
+        <li><b>Duration</b>: ${trip.weeks} weeks</li>
+        <li><b>Cost</b>: $${trip.cost}</li>
+        <li><b>Trip ID</b>: <span id="trip-id">${trip.id}</span></li>
+        </ul>`;
+        $("#trip-info").append(info);
+        $(document).scrollTop(0);
+        $('.trip-details').show();
+      })
+    .catch(function(error) {
+      console.log(error.response);
+      if (error.response.data && error.response.data.errors) {
+        reportError(
+          `Encountered an error: ${error.message}`,
+          error.response.data.errors
+          );
+      } else {
+          reportStatus(`Encountered an error: ${error.message}`);
+        }
+      });
+  };
+
+const loadTrips = () => {
+  // displayStatus('Loading trips...');
+  const tripList = $('#trip-list');
+  tripList.empty();
+  $("#trip-info").empty();
+  tripList.append(`<h2>All Trips</h2>`);
+  axios.get(tripsUrl)
+    .then(function (response) {
+      response.data.forEach((trip) => {
+          tripList.append(`<li><a href="" class="trip-link" id="${trip.id}">${trip.name}</a></li>`);
+      });
+      console.log(response);
+      $('.flex-container').css('display', 'flex');
+      })
+    .catch(function (error) {
+      console.log(error.response);
+      if (error.response.data && error.response.data.errors) {
+        reportError(
+          `Encountered an error: ${error.message}`,
+          error.response.data.errors
+          );
+      } else {
+        reportStatus(`Encountered an error: ${error.message}`);
+      }  
+    });   
+  }
+
+const reserveTrip = (trip) => {
+  console.log("reserving trip", trip)
+}
+
+$(document).on('submit', 'form', event => {
+  event.preventDefault();
+  console.log("running submit");
+  const trip_id = $("#trip-id").text();
+  const formData = {
+    trip_id: trip_id,
+    name: $("#your-name").val(),
+    email: $("#email").val()
+  };
+  console.log(formData);
+  const resvUrl = tripsUrl + `/${trip_id}/reservations`;
+  axios
+    .post(resvUrl, formData)
+    .then(function(response) {
+      console.log(response);
+    })
+    .catch(function(error) {
+      console.log(error);
+    });
+  $('input').val('');
+});
+
+$(document).on("click", "a", event => {
+  event.preventDefault();
+  $("#trip-info").empty();
+  const id = $(event.target).attr("id");
+  console.log("loading " + id);
+  showTripDetails(id);
+});
+
+$(document).on("click", "#load-trips", event => {
+  $('.trip-details').hide();
+  loadTrips();
+});
+
+$(document).ready(() => {  
+  $('.trip-details').hide();
+  $('#load-trips').click(loadTrips);
+})