Ada-C9 · MonalisaC · May 22, 2018 · May 22, 2018 · May 22, 2018 · May 23, 2018
diff --git a/index.css b/index.css
@@ -0,0 +1,83 @@
+body {
+  font-family: sans-serif;
+}
+
+main {
+  display: grid;
+  grid-template-areas: 'left right';
+}
+
+.trips {
+  grid-area: left;
+}
+
+.details {
+  grid-area: right;
+  margin: 1em;
+}
+
+
+h1 {
+  display: block;
+  font-size: 2em;
+  margin-top: 0.67em;
+  margin-bottom: 0.67em;
+  margin-left: 0;
+  margin-right: 0;
+  font-weight: bold;
+  color: black;
+}
+
+#status-message {
+  animation: blinker 1s linear infinite;
+  color: green;
+}
+@keyframes blinker {
+  50% {
+    opacity: 0;
+  }
+}
+
+#load {
+  background-color: grey;
+  border: none;
+  color: white;
+  padding: 15px 32px;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 16px;
+}
+
+table {
+  margin-top: .5em;
+  border-collapse: collapse;
+  width: 100%;
+  height: 100%
+  text-align: center;
+}
+table, th, td {
+  padding: 15px 32px;
+  border: 1px solid black;
+}
+
+#trip-details {
+  text-align: left;
+}
+
+.detail-header, #reserve-trip {
+  text-align: center;
+  border: 1px solid black;
+  padding: 1em;
+  font-weight: bold;
+}
+p {
+  font-weight: bold;
+}
+
+.reserve {
+  text-align: center;
+  border: 1px solid black;
+  padding: 1em;
+  font-weight: bold;
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+<head>
+  <meta charset="utf-8">
+  <title>Trek with axios</title>
+  <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>
+  <link rel="stylesheet" href="index.css">
+</head>
+<body>
+  <section id="status-message"></section>
+
+  <main>
+    <section class="trips">
+      <h1>Trek</h1>
+      <button id="load">See All Trips</button>
+      <table id="trip-list"></table>
+    </section>
+
+
+    <section class="details">
+      <table id="trip-details"></table>
+
+      <div class="reserve">
+        <h3 id="reserve-trip">Reserve Trip</h3>
+        <form id="reserve-form">
+          <div>
+            <label for="name">Your name</label>
+            <input type="text" name="name" placeholder="your name here" />
+          </div>
+
+          <div>
+            <label for="Trip">Trip</label>
+            <input type="text" readonly="readonly" name="tripName" />
+          </div>
+
+          <div>
+            <input type="hidden" readonly="readonly" name="tripId" />
+          </div>
+
+          <div>
+            <label for="email">Email</label>
+            <input type="text" name="email" />
+          </div>
+
+          <input type="submit" name="reservation" value="Reserve" />
+        </form>
+      </div>
+
+    </section>
+
+  </main>
+</body>
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,135 @@
+const URL = 'https://ada-backtrek-api.herokuapp.com/trips';
+const URL_TRIP_BY_ID = 'https://ada-backtrek-api.herokuapp.com/trips';
+
+
+//
+// Status Management
+//
+const reportStatus = (message) => {
+  $('#status-message').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 loadTrips = () => {
+  reportStatus('Loading trips...');
+
+  const tripList = $('#trip-list');
+  tripList.empty();
+
+  axios.get(URL)
+  .then((response) => {
+    reportStatus(`Successfully loaded ${response.data.length} trips`);
+    tripList.append(`<tr><th>All Trips</th></tr>`);
+    response.data.forEach((trip) => {
+      tripList.append(`<tr><td id="${trip.id}" class="trip-item">${trip.name}</td></tr>`);
+    });
+    $('.trip-item').click( function(event) {
+      loadTripDetails(`${event.target.id}`);
+    });
+  })
+
+  .catch((error) => {
+    reportStatus(`Encountered an error while loading trips: ${error.message}`);
+    console.log(error);
+  });
+};
+
+const loadTripDetails = (tripId) => {
+  reportStatus(`Loading trip details for ${tripId}`);
+
+  const tripDetails = $('#trip-details');
+  tripDetails.empty();
+
+  axios.get(URL_TRIP_BY_ID + `/${tripId}`)
+  .then((response) => {
+    let trip = response.data;
+    reportStatus(`Successfully loaded trip details for ${tripId}`);
+    console.log(response);
+    tripDetails.append(`<div class="detail-header">Trip Details</div>`);
+    tripDetails.append(`<div class="detail-content">`);
+    tripDetails.append(`<h3>Name: ${trip.name}</h3>`);
+    tripDetails.append(`<p>Continent: ${trip.continent}</p>`);
+    tripDetails.append(`<p>Category: ${trip.category}</p>`);
+    tripDetails.append(`<p>Weeks: ${trip.weeks}</p>`);
+    tripDetails.append(`<p>Cost: ${trip.cost}</p>`);
+    tripDetails.append(`<p>About:</br> ${trip.about}</p>`);
+    tripDetails.append('</div>');
+
+    $('input[name="tripName"]').val(`${trip.name}`);
+    $('input[name="tripId"]').val(`${tripId}`);
+
+  })
+  .catch((error) => {
+    reportStatus(`Encountered an error while loading trip details for ${tripId}`);
+    console.log(error);
+  });
+};
+
+const FORM_FIELDS = ['name', 'email'];
+const inputField = name => $(`#reserve-form input[name="${name}"]`);
+
+const readFormData = () => {
+  const getInput = name => {
+    const input = inputField(name).val();
+    return input ? input : undefined;
+  };
+
+  const formData = {};
+  FORM_FIELDS.forEach((field) => {
+    formData[field] = getInput(field);
+  });
+
+  return formData;
+};
+
+const clearForm = () => {
+  FORM_FIELDS.forEach((field) => {
+    inputField(field).val('');
+  });
+}
+
+const reserveTrip = (event) => {
+  event.preventDefault();
+
+  const tripId = inputField('tripId').val();
+  if (tripId == "") {
+    reportError("Please select a trip first.");
+    return;
+  }
+  const reserveData = readFormData();
+  // console.log(reserveData);
+
+  reportStatus(`Reserving ${tripId}`);
+
+  axios.post(URL + '/' + tripId + '/reservations', reserveData)
+    .then((response) => {
+      reportStatus(`Successfully reserved ${tripId}`);
+      clearForm();
+    })
+    .catch((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}`);
+      }
+    })
+  }
+
+$(document).ready(() => {
+  $('#load').click(loadTrips);
+  $('#reserve-form').submit(reserveTrip);
+});