Ada-C10 · elle-terch · Nov 21, 2018 · Nov 21, 2018 · Nov 21, 2018 · Nov 21, 2018
diff --git a/halftone-yellow.png b/halftone-yellow.png
diff --git a/index.css b/index.css
@@ -0,0 +1,91 @@
+* {
+  font-family: 'Montserrat', sans-serif;
+}
+
+h1 {
+font-size: 7em;
+letter-spacing: 10px;
+}
+
+#header {
+  background-image: url('./halftone-yellow.png');
+  text-align: center;
+  height: 300px;
+  grid-column: 1 / 3;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+  padding-right: 6em;
+  padding-left: 6em;
+}
+
+#status-message {
+  background-color: #eeeeee;
+  grid-column: 1 / 3;
+  height: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+#trip-information {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+}
+
+#all-trips {
+  padding: 3em;
+  grid-column: 1 / 2;
+}
+
+#tripDetails {
+  padding: 3em;
+  grid-column: 2 / 3;
+}
+
+#trip-list {
+  display: flex;
+  flex-flow: wrap;
+  justify-content: flex-start;
+}
+
+#trip-list div:nth-child(4n+1) {
+  background-color: #96ceb4;
+}
+
+#trip-list div:nth-child(4n+2) {
+  background-color: #ffeead;
+}
+
+#trip-list div:nth-child(4n+3) {
+  background-color: #ff6f69;
+}
+
+#trip-list div:nth-child(4n+4) {
+  background-color: #ffcc5c;
+}
+
+.card-body {
+  border-radius: 20px;
+  width: 25%;
+  margin: 1em;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  text-align: center;
+}
+
+.button {
+  margin-top: 10px;
+}
+
+.btn-danger {
+  margin-top: 2em;
+}
+
+#reservation-form {
+  background-color: #eeeeee;
+  padding: 2em;
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,53 @@
+<!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>
+
+    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
+
+    <link href="https://fonts.googleapis.com/css?family=Bungee+Inline|Montserrat" rel="stylesheet">
+
+    <link rel="stylesheet" href="index.css">
+  </head>
+
+  <body>
+    <main>
+
+      <section id = "header">
+        <h1>TREK</h1>
+        <button type = "button" id = "trips" class="btn btn-secondary btn-lg btn-block">Get trips!</button>
+      </section>
+
+      <section id="status-message">
+        <div id = "status-message"></div>
+      </section>
+
+      <section id = "trip-information">
+
+        <section id = "all-trips">
+          <div id = "trip-list"></div>
+        </section>
+
+        <section id="tripDetails">
+          <table id="tripTable" class="table">
+
+            <tbody>
+            </tbody>
+
+          </table>
+
+          <section id="reservations">
+          </section>
+
+        </section>
+      </section>
+
+    </main>
+  </body>
+
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,145 @@
+const URL = 'https://trektravel.herokuapp.com/trips';
+
+
+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');
+
+  axios.get(URL)
+  .then((response) => {
+    reportStatus(`Successfully loaded ${response.data.length} trips`);
+
+    response.data.forEach((trip) => {
+      tripList.append(`<div class="card-body">${trip.name}<br><button type = "button" class = "button btn btn-secondary" id = ${trip.id}>Get Trip Info!</button></div><br><br>`);
+    });
+  })
+
+  .catch((error) => {
+    reportStatus(`Encountered an error: ${error.message}`);
+    console.log(error);
+  });
+};
+
+
+const showTrip = (id) => {
+
+  const tripInfo = $('#tripTable');
+  tripInfo.empty();
+
+  const URL2 = `https://trektravel.herokuapp.com/trips/${id}`;
+
+  axios.get(URL2)
+  .then((response) => {
+    let tripId = response.data.id;
+    tripInfo.append(`<tr><td colspan="2"><h2 class = "trip-header">Trip&nbsp;Details&nbsp;for&nbsp;${response.data.name}</h2></td></tr>`);
+    Object.keys(response.data).forEach((key) => {
+      tripInfo.append(`<tr><th>${key}</th><td>${response.data[key]}</td></tr>`);
+    });
+    showReservationForm(tripId);
+
+  });
+};
+
+
+const showReservationForm = (tripId) => {
+
+  const reservationForm = $('#reservations');
+
+  reservationForm.append(`
+    <form id="reservation-form" class="${tripId}">
+    <h2>Reserve Your Spot!</h2>
+    <div>
+    <label for="name">Your Name</label>
+    <input class="form-control" type="text" name="name" />
+    </div>
+    <br>
+    <div>
+    <label for="email">Your Email</label>
+    <input class="form-control" type="text" name="email" />
+    </div>
+
+    <input type="submit" class="btn btn-danger" name="add-reservation" value="Reserve Now" id="${tripId}"/>
+    </form>
+    `)
+};
+
+
+const readFormData = () => {
+  const parsedFormData = {};
+
+  const nameFromForm = $(`#reservation-form input[name="name"]`).val();
+  parsedFormData['name'] = nameFromForm ? nameFromForm : undefined;
+
+  const emailFromForm = $(`#reservation-form input[name="email"]`).val();
+  parsedFormData['email'] = emailFromForm ? emailFromForm : undefined;
+
+  return parsedFormData;
+}
+
+
+const clearForm = () => {
+  $(`#reservation-form input[name="name"]`).val('');
+  $(`#reservation-form input[name="email"]`).val('');
+}
+
+
+const createReservation = (tripId) => {
+
+  const reservationData = readFormData();
+  console.log(reservationData);
+  console.log(tripId);
+
+  const URL3 = `https://trektravel.herokuapp.com/trips/${tripId}/reservations`;
+  console.log(URL3);
+
+  reportStatus('Sending reservation data...');
+
+  axios.post(URL3, reservationData)
+    .then((response) => {
+      reportStatus(`Successfully created a new reservation for ${response.data.name}`);
+      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(() => {
+  $('#trips').click(loadTrips);
+
+  $('#trip-list').on('click', '.button', function() {
+    $( 'h2' ).remove();
+    $( '#reservation-form' ).remove();
+    let newId = $(this).attr('id');
+    showTrip(newId);
+  });
+
+  $('#reservations').on('submit', 'form', function(event) {
+    let tripId = $(this).attr('class');
+    event.preventDefault();
+    createReservation(tripId);
+  });
+});