Ada-C9 · brownav · May 22, 2018 · May 22, 2018 · May 22, 2018 · May 23, 2018
diff --git a/index.html b/index.html
@@ -0,0 +1,42 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <!-- Required meta tags -->
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+    <!-- Bootstrap CSS -->
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
+    <link rel="stylesheet" href="style.css">
+    <title>Trek</title>
+  </head>
+
+  <body>
+    <section id="status-message"></section>
+      <h1>Trek</h1>
+      <button id="get-trips" type="button" class="btn btn-success">See All Trips</button>
+    <main>
+      <section class="all-trips">
+        <div class="list-container">
+          <table id="trips-table" class="table table-bordered">
+          </table>
+        </div>
+      </section>
+
+      <div class="column2">
+        <section class='details-container'>
+            <div id='details'></div>
+        </section>
+
+        <section class="reservation-container">
+        </section>
+      </div>
+    </main>
+
+    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
+    <script type="text/javascript" src="index.js"></script>
+    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
+  </body>
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,91 @@
+const URL = 'https://ada-backtrek-api.herokuapp.com/trips/'
+
+const reportStatus = (message) => {
+  $('#status-message').html(message);
+}
+
+const loadTrips = () => {
+  $('#trips-table').empty();
+  reportStatus("Loading trips...")
+
+  axios.get(URL)
+  .then((response) => {
+    $('#trips-table').append("<tr><th>All Trips</th></tr>")
+
+    response.data.forEach((trip) => {
+      $('#trips-table').append(`<tr><td>${trip.name}</td></tr>`);
+
+      $('td').click(function() {
+        if (this.innerText === trip.name){
+          showTrip(trip.id);
+        }
+      })
+    })
+    reportStatus('Trips loaded!');
+  })
+  .catch((error) => {
+    reportStatus(`Error: ${error.message}`);
+  })
+};
+
+const showTrip = (id) => {
+  const tripInfo = $('#details');
+  tripInfo.empty();
+  tripInfo.append(`<h2>Trip Details</h2>`)
+  reportStatus('Retrieving trip...')
+
+  axios.get(URL + id)
+  .then((response) => {
+    let tripData = ["name", "continent", "category", "weeks", "cost", "about"];
+
+    tripData.forEach((item) => {
+      let info = response.data[item];
+      tripInfo.append(`<p> <strong>${item}:</strong> ${info} </p>`);
+    })
+    reportStatus('Trip retrieved!')
+    showReservation(response.data);
+  })
+  .catch((error) => {
+    reportStatus(`Error: ${error.message}`);
+  })
+};
+
+const showReservation = (trip) => {
+  $('.reservation-container').empty();
+
+  $('.reservation-container').append(`<form></form>`);
+  $(`form`).append(`<h2>Reserve Trip</h2>`);
+  $(`form`).append(`<label for="name">Your Name:</label>`);
+  $(`form`).append(`<input type="text" name="name"></input><br/>`);
+  $(`form`).append(`<label for="email">Email:</label>`);
+  $(`form`).append(`<input type="text" name="email"></input>`);
+  $(`form`).append(`<p><strong>Trip:</strong> ${trip.name}</p>`);
+  $(`form`).append(`<input type="submit" class="btn btn-success" name="reserve" value="Reserve"></input>`);
+
+  $('form').submit(function() {
+    const formData = {
+      name: $('input[name="name"]').val(),
+      email: $('input[name="email"]').val()
+    }
+    reserveTrip(event, trip, formData);
+  })
+};
+
+const reserveTrip = function reserveTrip(event, trip, formData) {
+  event.preventDefault();
+  const postURL =  URL + trip.id + '/' + 'reservations';
+  reportStatus('Making reservation...');
+
+  axios.post(postURL, formData)
+  .then((response) => {
+    console.log(response.data);
+    reportStatus(`Trip to ${trip.name} for ${formData.name} reserved!`);
+  })
+  .catch((error) => {
+    reportStatus(`Error: ${error.message}`);
+  })
+};
+
+$(document).ready(() => {
+  $('#get-trips').click(loadTrips);
+})
diff --git a/style.css b/style.css
@@ -0,0 +1,80 @@
+body {
+  font-family: sans-serif;
+  background-color: #f5f7f2;
+  background-image: url("http://www.flymetotaiwan.com/wp-content/uploads/2015/10/Background.jpg");
+}
+
+h1, h2 {
+  padding: .5em;
+  padding-bottom: .25em;
+  border-bottom: solid 1px black;
+  margin: 0;
+}
+
+h2 {
+  margin-bottom: .5em;
+}
+
+.table {
+  max-width: 20%;
+  text-align: center;
+  border: black;
+}
+
+.btn.btn-success {
+  margin-bottom: 2em;
+  margin-top: 1em;
+  margin-left: 1em;
+}
+
+td:hover {
+  background-color: rgb(220, 242, 191);
+  cursor: pointer;
+}
+
+p::first-letter {
+  text-transform: uppercase;
+}
+
+main {
+  display: flex;
+  flex-direction: row;
+}
+
+.list-container {
+  padding-left: 1em;
+  padding-right: 1em;
+}
+
+.details-container {
+  border: 1px solid #dee2e6;
+  margin-right: 1em;
+  height: max-content;
+}
+
+.reservation-container {
+  border: 1px solid #dee2e6;
+  margin-top: 1em;
+  margin-right: 1em;
+  height: max-content;
+}
+
+.column2 {
+  display: flex;
+  flex-direction: column;
+  /* width: 100%; */
+}
+
+label {
+  font-weight: bold;
+  padding-right: .5em;
+}
+
+p, label, input {
+  padding-left: .5em;
+}
+
+#status-message {
+  background-color: rgb(220, 242, 191);
+  padding-left: .5em;
+}
diff --git a/wireframes/109832832447.jpg b/wireframes/109832832447.jpg