Ada-C11 · qqdipps · May 30, 2019 · May 30, 2019 · May 30, 2019 · Jun 10, 2019
diff --git a/index.css b/index.css
@@ -0,0 +1,34 @@
+#Trek {
+	display: flex;
+}
+
+#trekInfo{
+	width: 300px;
+}
+
+#trekReservation {
+	max-width: 400px;
+	margin-left: 1em;
+}
+
+#trekList{
+	width: 350px;
+	margin-right: 1em;
+	margin-left: -20px;
+}
+
+body{
+	margin: 3em;
+}
+
+ul {
+	list-style: none;
+}
+
+li {
+	font-size: 1.5em;
+}
+
+.text-white:hover {
+	color: rgb(163, 255, 132)!important;
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+	<head>
+	  <meta charset="utf-8">
+	  <title>Trekking Trips</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="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
+		<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
+	  <link rel="stylesheet" href="index.css">
+	</head>
+	<body>
+		<section id="status-message"></section>
+
+	  <article id='Trek'> 
+			<header>
+				<h1>Trek</h1>
+				<nav>
+					<button class='btn btn-success' id = 'tripBtn'> See All Trips</button>
+				</nav>
+				<section id='statusMessage'></section>
+			</header>
+	    <section id='trekList'></section>
+			<section id='trekInfo'></section>
+			<section id='trekReservation'></section>
+	  </article>
+	</body>
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,141 @@
+const URL = 'https://trektravel.herokuapp.com/trips/';
+
+const reservationForm = trip => {
+  return `<h2>Reserve a Spot on ${trip.name}</h2>
+          <form id="reservationForm">
+          	<div class="form-group">
+          		<label for="name">Name</label>
+          		<input type="name" class="form-control" id="name" placeholder="Your name here" required>
+          	</div>
+          	<div class="form-group">
+          		<label for="email">Email</label>
+          		<input type="email" class="form-control" id="email" placeholder="[email protected]" required>
+          	</div>
+          	<button type="submit" class="btn btn-success">Reserve</button>
+          <form>`;
+};
+
+const tripSummary = trip => {
+  return `<h2>Trip Details</h2>
+          <h3>Name:</h3><p>${trip.name}</p>
+          <h4>Continent:</h4><p>${trip.continent}</p>
+          <h4>Category:</h4><p>${trip.category}</p>
+          <h4>Weeks:</h4><p>${trip.weeks}</p>
+          <h4>Cost:</h4><p>${trip.cost}</p>
+          <h4>About:</h4><p>${trip.about}</p>`;
+};
+
+// adapted/learned from https://flaviocopes.com/how-to-uppercase-first-letter-javascript/
+String.prototype.capitalize = function() {
+  return this[0].toUpperCase() + this.slice(1, this.length);
+};
+
+const confirmation = (tripConfirmation, tripName) => {
+  return `<h2>${tripConfirmation.name.capitalize()}, your trip has been booked!</h2>
+  <p>Confirmation ID: ${tripConfirmation.id} for Trek to ${tripName}</p>`;
+};
+
+// adapted from class live code
+const readDataForm = (email, name) => {
+  return { email: email, name: name };
+};
+
+// adapted from class live code
+const reportStatus = message => {
+  $('#statusMessage').html(message);
+};
+
+// adapted from class live code
+const reportApiError = error => {
+  let errorHtml = `<p>${error.message}</p><ul>`;
+  const fieldProblems = error.response.data.errors;
+  Object.keys(fieldProblems).forEach(field => {
+    const problems = fieldProblems[field];
+    problems.forEach(problem => {
+      errorHtml += `<li><strong>${field}:</strong> ${problem}</li>`;
+    });
+  });
+  errorHtml += '</ul>';
+  reportStatus(errorHtml);
+};
+
+const onClick = function(action, listener) {
+  listener.click(action);
+};
+
+const postReservation = trip => {
+  $('#tripReservation').remove();
+  $(`#trekReservation`).append(`<article id="tripReservation">`);
+  const reservation = $('#tripReservation');
+  reservation.empty();
+  reservation.append(reservationForm(trip));
+  handleReservation(trip);
+};
+
+const handleReservation = trip => {
+  const reservation = $('#tripReservation');
+  $('form').submit(function(event) {
+    event.preventDefault();
+    const reservationData = readDataForm(
+      event.target[1].value,
+      event.target[0].value
+    );
+    axios
+      .post(`${URL + trip.id}/reservations`, reservationData)
+      .then(response => {
+        reservation.empty();
+        reservation.append(confirmation(response.data, trip.name));
+      })
+      .catch(error => {
+        reportApiError(error);
+      });
+  });
+};
+
+const getTrips = () => {
+  reportStatus('Loading trips...');
+  const list = $(`#trekList`);
+  list.empty();
+  list.append(`<ul id="tripList">`);
+  const allTrips = $('#tripList');
+  allTrips.append(`<h2>All Trips</h2>`);
+  axios
+    .get(`${URL}`)
+    .then(response => {
+      reportStatus(`Successfully loaded ${response.data.length} trips`);
+      response.data.forEach(trip => {
+        allTrips.append(
+          `<li class="card text-white bg-secondary mb-3" id="${trip.id}">${
+            trip.name
+          }</li>`
+        );
+        onClick(getTrip, $(`#${trip.id}`));
+      });
+    })
+    .catch(error => {
+      reportStatus(
+        `Encountered an error while loading trips: ${error.message}`
+      );
+    });
+};
+
+const getTrip = event => {
+  $('#tripInfo').remove();
+  $(`#trekInfo`).append(`<article id="tripInfo">`);
+  const info = $('#tripInfo');
+  info.empty();
+  axios
+    .get(`${URL + event.currentTarget.id}`)
+    .then(response => {
+      const trip = response.data;
+      info.append(tripSummary(trip));
+      postReservation(trip);
+    })
+    .catch(error => {
+      reportStatus(`Encountered an error while loading trip: ${error.message}`);
+    });
+};
+
+$(document).ready(() => {
+  onClick(getTrips, $('#tripBtn'));
+});