Ada-C11 · msfinnan · May 30, 2019 · May 31, 2019 · Jun 1, 2019 · Jun 5, 2019
diff --git a/assets/002-globe.png b/assets/002-globe.png
diff --git a/index.css b/index.css
@@ -0,0 +1,61 @@
+body {
+    display: grid;  
+    grid-template-columns: 1fr 1fr;
+    /* font-family: 'Courier New', Courier, monospace; */
+    font-family: 'Varela', sans-serif;
+}
+
+header {
+    text-align: center;
+    grid-column-start: 1;
+    grid-column-end: 3;
+    font-family: 'Permanent Marker', cursive;
+    padding: 15px;
+}
+
+header h1 {
+    font-size: 4em;
+}
+
+header h2 {
+    font-style: italic;
+    font-size: 3em;
+}
+
+footer {
+    grid-column-start: 1;
+    grid-column-end: 3;
+    padding-top: 10px;
+}
+#trip-list, #load-trips {
+    grid-column-start: 1;
+    grid-column-end: 2;
+    list-style-type: none;
+}
+
+#trip-list {
+    min-height: 500px;
+}
+
+#trip-details {
+    grid-column-start: 2;
+    grid-column-end: 3;
+    list-style-type: none;
+}
+
+#trip-details li{
+    padding: 5px;
+}
+
+#load-trips, #trip-list .btn {
+    margin: 10px;
+}
+
+#trip-list .btn {
+    text-align: left;
+}
+
+#load-trips {
+    width: 12em;
+}
+
diff --git a/index.html b/index.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <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>
+    <script
+      src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
+      integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
+      crossorigin="anonymous"></script>
+    <link rel="stylesheet"
+      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
+      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
+      crossorigin="anonymous">
+    <link rel="stylesheet" href="index.css">
+    <link
+      href="https://fonts.googleapis.com/css?family=Permanent+Marker|Varela&display=swap"
+      rel="stylesheet">
+    <link rel="shortcut icon" href="assets/002-globe.png" type="image/x-icon">
+  </head>
+  <body>
+    <header>
+      <h1><strong>Trek Trips</strong></h1>
+      <h2>Your Adventure Awaits</h2>
+    </header>
+    <section id="status"></section>
+    <button type="button" class="btn btn-primary" id="load-trips">See All Trips</button>
+    <section id="trip-list"></section>
+    <section id="trip-details"></section>
+    <footer>© 2019 Trek Trips</footer>
+  </body>
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,124 @@
+const BASE_URL = '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>";
+  displayStatus(content);
+};
+
+const loadTrips = () => {
+  displayStatus("Loading trips...");
+
+  axios.get(BASE_URL)
+    .then((response) => {
+      const trips = response.data;
+      displayStatus(`Successfully loaded ${trips.length} trips`);
+      trips.forEach((trip) => {
+
+        $('#trip-list').append(`<li><button type="button" class="btn btn-primary" id=${trip.id}>${trip.id}: ${trip.name}</button></li>`);
+      });
+    })
+    .catch((error) => {
+      displayStatus(`Encountered an error while loading tips: ${error.message}`);
+    });
+}
+
+const buildSubmitHandler = (tripId) => {
+
+  const handleSubmit = (event) => {
+
+    event.preventDefault();
+    const reservationData = readFormData();
+
+    displayStatus('Reserving trip...');
+    console.log('reservationdata is', reservationData)
+
+    axios.post(`${BASE_URL}/${tripId}/reservations`, reservationData)
+      .then((response) => {
+        console.log('posted res data', response);
+        displayStatus(`Successfully created a reservation 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
+          );
+          console.log(error)
+        } else {
+          displayStatus(`Encountered an error: ${error.message}`);
+        }
+      });
+  }
+  return handleSubmit;
+}
+
+const showTripDetails = (tripId) => {
+  axios.get(`${BASE_URL}/${tripId}`)
+    .then((response) => {
+      const trip = response.data;
+      displayStatus('Successfully loaded trip');
+      $('#trip-details').empty();
+      $('#trip-details').append('<h2><strong> Trip Details </strong></h2>');
+      $('#trip-details').append(`<li><strong> Name: </strong> ${trip.name}</li>`);
+      $('#trip-details').append(`<li><strong> Continent: </strong> ${trip.continent}</li>`);
+      $('#trip-details').append(`<li><strong> Category: </strong> ${trip.category}</li>`);
+      $('#trip-details').append(`<li><strong> Cost: </strong> $${trip.cost}</li>`);
+      $('#trip-details').append(`<li><strong> About: </strong> ${trip.about}</li>`);
+      $('#trip-details').append(`<form id="trip-form">
+        <h2><strong> Reserve a Spot on ${trip.name} </strong></h2>
+        <div>
+          <label for="name">Name</label>
+          <input type="text" name="name" />
+        </div>
+        <div>
+          <label for="email">Email</label>
+          <input type="text" name="email" />
+        </div>
+
+        <input type="submit" name="trip-form" value="Submit Reservation" />
+      </form>`)
+      $('#trip-form').submit(buildSubmitHandler(trip.id));
+
+    })
+    .catch((error) => {
+      displayStatus(`Encountered an error while loading trip: ${error.message}`);
+      console.log('The error was this:', error);
+    });
+}
+
+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('');
+}
+
+$(document).ready(() => {
+  $('#load-trips').click(loadTrips);
+  $('#trip-list').on('click', 'button', function (event) {
+    const tripId = event.target.id;
+    showTripDetails(tripId);
+  });
+});