Ada-C11 · carlabosco · May 31, 2019 · May 31, 2019 · Jun 3, 2019 · Jun 3, 2019
diff --git a/index.css b/index.css
@@ -0,0 +1,91 @@
+body {
+  margin-top: 3rem;
+  margin-left: 3rem;
+  margin-right: 2rem;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-template-rows: 1fr auto 1fr;
+  grid-column-gap: 0px;
+  grid-row-gap: 0px;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  font-size: 20px;
+}
+
+li {
+  list-style: none;
+  padding: 5px;
+}
+
+img {
+  height: 200px;
+  width: 200px;
+  display: inline;
+}
+
+a {
+  text-decoration: none;
+  color: black;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+#header {
+  grid-row: 1;
+  grid-column: 1 / span 3;
+  display: flex;
+}
+
+#brand {
+  margin-left: 4rem;
+  font-family: 'SignPainter', 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+  font-size: 7rem;
+}
+
+#tagline {
+  font-size: 2rem;
+}
+
+#load {
+  font-size: 20px;
+  border-radius: 12px;
+  padding: 1rem;
+}
+
+.submit-button {
+  margin-top: 10px;
+  font-size: 15px;
+  border-radius: 12px;
+  padding: 10px;
+}
+
+.current-trips, 
+#trip-list, 
+#europe-list,
+#africa-list,
+#samerica-list,
+#namerica-list,
+#asia-list,
+#australasia-list {
+  grid-column: 1;
+  grid-row: 2;
+}
+
+#expand-details {
+  grid-column: 2;
+  grid-row: 2;
+}
+
+.new-trip {
+  grid-column: 3;
+  grid-row: 2;
+  visibility: hidden;
+}
+
+#confirmation {
+  display: grid;
+  grid-column: 3;
+  grid-row: 2;
+  margin-top: 10rem;
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>TREK</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>
+
+    <header id='header'>
+      <img src="travel-logo.png">
+      <h1 id='brand'>Trek. <span id='tagline'>You pack and we take care of the rest.</span></h1>
+    </header>
+
+    <section id="status-message"></section>
+
+    <section class="current-trips">
+      <button id="load">See current destinations</button>
+      <ul id="trip-list"></ul>      
+    </section>
+
+    <section id='expand-details'>
+      <ul id='trip-details'></ul>
+    </section>
+
+    <section class="new-trip">
+      <h4>Reserve a new trip</h4>
+      <form id="trip-form">
+
+        <div class="trip-name">
+          <label for="name">Name</label>
+          <input type="text" name="name" />
+        </div>
+
+        <div>
+          <label for="email">Email</label>
+          <input type="text" name="email" />
+        </div>
+
+        <input class="submit-button" type="submit" name="add-trip" value="Reserve trip" />
+      </form>
+    </section>
+
+    <section id="confirmation"></section>
+
+  </body>
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,140 @@
+const tripsURL = 'https://trektravel.herokuapp.com/trips';
+//
+
+$( ".new-trip" ).hide();
+
+// Status Management
+//
+const reportStatus = (message) => {
+  $('#status-message').html(message).fadeOut(5000);;
+};
+
+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 showTrip = (trip) => {
+  const target = $('#trip-details');
+  target.empty();
+  target.append(
+    `<h4>Trip Details</h4>
+    <li class='trip-id'>${trip.id}</li>
+    <li>Name: ${trip.name}</li>
+    <li>Category: ${trip.category}</li>
+    <li>Continent: ${trip.continent}</li>
+    <li>Cost: $${trip.cost}</li>
+    <li>Duration in weeks: ${trip.weeks}</li>`
+  )
+
+  const showReservation = $('.new-trip');
+  showReservation.css("visibility", "visible");
+}
+
+const callTrip = (id) => {
+
+  const loadTrip = () => {
+    axios.get(tripsURL+`/${id}`)
+      .then((response) => {
+        showTrip(response.data);
+
+      })
+      .catch((error) => {
+        reportStatus(`Encountered an error while loading trips: ${error.message}`);
+        console.log(error);
+      });
+  }
+  return loadTrip;
+};
+
+
+const loadTrips = () => {
+  const target = $(`#trip-list`);
+  target.empty();
+
+  reportStatus('Loading trips...');
+
+  axios.get(tripsURL)
+  .then((response) => {
+    const trips = response.data;
+
+    reportStatus(`Successfully loaded ${trips.length} trips`);
+
+    trips.forEach((trip) => {
+      target.append(`<li><a class=${trip.id} href='#'>${trip.name}</a></li>`);
+
+      const tripClickHandler = callTrip(trip.id);
+      // console.log(`${trip.id}`)
+      $(`.${trip.id}`).on('click', tripClickHandler);
+    })
+
+  })
+
+  .catch((error) => {
+    reportStatus(`Encountered an error while loading trips: ${error.message}`);
+    console.log(error);
+  });
+};
+
+//
+// Reserving trips
+//
+const readFormData = () => {
+  const parsedFormData = {};
+
+  const nameFromForm = $(`#trip-form input[name="name"]`).val();
+  parsedFormData['name'] = nameFromForm ? nameFromForm : undefined;
+
+  const emailFromForm = $(`#trip-form input[name="email"]`).val();
+  parsedFormData['email'] = emailFromForm ? emailFromForm : undefined;
+
+  return parsedFormData;
+};
+
+const clearForm = () => {
+  $(`#trip-form input[name="name"]`).val('');
+  $(`#trip-form input[name="email"]`).val('');
+}
+
+const reserveTrip = (event) => {
+  event.preventDefault();
+
+  const tripData = readFormData();
+  console.log(tripData);
+  const id = parseInt($(".trip-id").text());
+  console.log(id);
+
+  reportStatus('Sending trip data...');
+
+  axios.post(tripsURL+`/${id}/reservations`, tripData)
+    .then((response) => {
+      $('#confirmation').append(`<p>You have successfully reserved a trip. A confirmation email was sent to ${response.data.email}.</p>`)
+      console.log(response)
+      reportStatus(`Successfully added a trip with ID ${response.data.id}!`);
+      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);
+  $('#trip-form').submit(reserveTrip);
+});
diff --git a/travel-logo.png b/travel-logo.png