Ada-C11 · tatsqui · May 30, 2019 · May 31, 2019 · Jun 3, 2019 · Jun 16, 2019
diff --git a/index.css b/index.css
@@ -0,0 +1,46 @@
+main {
+  display: grid;
+  grid-template-rows: 1fr;
+  grid-template-columns: 2fr, 1fr;
+}
+header {
+  grid-column: span 2;
+  align-items: center;
+}
+
+header h1 {
+  text-align: center;
+}
+#show-all-trips {
+  grid-row-start: 2;
+  grid-row-end: 3;
+  grid-column-start: 1;
+  grid-column-end: 2;
+  padding: 2em 0 0 2em
+}
+
+#trips-button {
+  margin-bottom: 2em;
+}
+
+a {
+  color: green;
+}
+
+li:hover {
+  text-decoration: none;
+  background-color: gray;
+}
+#show-table {
+  grid-row-start: 2;
+  grid-column-start: 2;
+  grid-column-end: 3;
+}
+
+ul {
+  list-style: none;
+}
+
+.details.hidden {
+  display: none
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <link rel="stylesheet" href=" https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
+  <link rel="stylesheet" href="index.css">
+  <title>Document</title>
+</head>
+<body>
+  <main>
+    <header>
+    <h1> Ada Treks! </h1>
+    <section id="status-message"></section>
+    </header>
+
+    <section id="show-all-trips">
+      <button type="button" class="btn btn-primary" id="trips-button">Load all trips</button>
+      <div id="all-loc">
+        <ul id="trips-list"></ul>
+      </div>
+  </section>
+
+    <section id="show-details" class="details hidden">
+      <article>
+        <h2> Trip Details </h2>
+        <ul id="trip-details"> </ul>
+      </article>
+      <section id="trip-form">
+        <h3>Reserve your spot!</h3>
+        <form id="reserveDeets">
+          <label> Name</label>
+          <input name="full-name" type="text">
+          <label> Email </label>
+          <input name="email" type="text">
+          <button id="res-button" type="button">Reserve!</button> 
+        </form>
+      </section>
+    </section>
+
+  </main>
+  <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>
+</body>
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,126 @@
+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 baseTripsURL = axios.defaults.baseURL = "https://trektravel.herokuapp.com/trips/"
+
+const loadTrips = () => {
+  const tripList = $("#trips-list");
+  const tripListContainer = $('#all-loc');
+  tripList.empty('');
+
+  axios.get(baseTripsURL)
+    .then((response) => {
+      response.data.forEach(location => {
+        tripList.append(`<li><a class="show-loc" href="${baseTripsURL}${location.id}">${location.name}</a></li>`)
+      })
+
+    })
+    .catch((error) => {
+      console.log(error)
+      if (error.response && error.response.data && error.response.data.errors) {
+        reportError(
+          `Encountered an error: ${error.message}`,
+          error.response.data.errors
+        );
+      } else {
+        reportStatus(`Encountered an error: ${error.message}`);
+      }
+    } 
+  )
+  tripListContainer.prepend("<h2>All Locations</h2>")  
+}
+
+const buildDetails = (data) => {
+
+  $("#show-details").removeClass()
+  $("#trip-details")
+    .html(`
+    <li id="res-id">${data.id}</li>
+    <li>${data.name}</li>
+    <li>${data.category}</li>
+    <li>${data.continent}</li>
+    <li>${data.about}</li>
+    <li>${data.weeks}</li>
+    <li>${data.cost}</li>
+  `);
+
+}
+const showLocation = (event) => {
+  event.preventDefault()
+  axios.get(event.target.href)
+    .then((response) => {
+      console.log(response.data);
+      buildDetails(response.data);
+    })
+    .catch((error) => {
+      console.log(error)
+      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}`);
+      }
+    })
+}  
+
+const readFormData = (event) => {
+  let parsedFormData = {}
+  let arrayData = event.serializeArray();
+  parsedFormData.name = arrayData[0].value;
+  parsedFormData.email = arrayData[1].value;
+
+  return parsedFormData;
+}
+const clearTripForm = () => {
+  $('#trip-form input[name="full-name"]').val('');
+  $('#trip-form input[name="email"]').val('');
+}
+
+const makeReservation = (event) => {
+  event.preventDefault();
+
+  let resID = $('#res-id').html()
+  // console.log(`${reserveURL}${resID}/reservations`)
+  reportStatus('Sending trip reservation...');
+  let reserveData = readFormData($('#reserveDeets'))
+
+  axios.post(`${baseTripsURL}${resID}/reservations`, reserveData)
+    .then((response) => {
+      console.log(response);
+      reportStatus(`Successfully added a reservation with ID ${response.data.id}!`);
+      clearTripForm();
+    })
+    .catch((error) => {
+      console.log(error)
+      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).on('click', '.show-loc', showLocation)
+$(document).on('click', '#res-button', makeReservation)
+
+$(document).ready(() => {
+  $("#trips-button").click(loadTrips)
+  $("form").submit(readFormData);
+});