Ada-C9 · brendarios · May 23, 2018 · May 23, 2018 · May 23, 2018 · May 23, 2018
diff --git a/index.css b/index.css
@@ -0,0 +1,74 @@
+body {
+  background-color: #e6e6e6;
+  font-family: Arial;
+  margin-left: 3%;
+  margin-right: 3%;
+}
+
+
+main {
+  padding: 4vh 0;
+  margin-bottom: 0;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: .6fr .3fr .1fr;
+  grid-gap: 1em;
+}
+
+.trips {
+  grid-area: 2/1/4/2;
+
+}
+
+
+#trips-list {
+  max-height: 80vh;
+  overflow-x: scroll;
+
+
+}
+
+.welcome {
+  grid-area: 1/1/2/3;
+  text-align: center;
+  padding-top: 10vh;
+  font-size: 50pt;
+  font-family: Luckiest Guy;
+  color: #cccc00;
+  background: url("road.jpg") no-repeat;
+  background-size: 100% 100%;
+}
+
+#trip {
+  display: grid;
+  grid-area: 2/2/3/3;
+  padding-top: 10vh;
+  height: 30vh;
+  overflow: scroll;
+
+}
+
+.trip-details {
+  background-color: #f3ffcc;
+  border-style: solid;
+  border-width:thin;
+}
+
+.new-reservation {
+  grid-area: 3/2/4/3;
+
+}
+
+.reservation {
+  margin-left: 30%;
+}
+
+button#load, input[type="submit"] {
+  background-color: #cccc00;
+  border-style: solid;
+  border-radius: 5pt;
+  margin: 0 auto 1em auto;
+  font-size: 1em;
+  padding: 5px 30px;
+
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,42 @@
+<!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>
+
+  <link rel="stylesheet" href="index.css">
+  <link href="https://fonts.googleapis.com/css?family=Luckiest+Guy" rel="stylesheet">
+</head>
+<body>
+
+  <section id="status-message"></section>
+
+  <main>
+    <header class="welcome">Find your next adventure!</header>
+
+    <section class="trips">
+      <h1>Amazing Trips</h1>
+      <button id="load">Get trips!</button>
+      <ul id="trips-list"></ul>
+    </section>
+
+      <section >
+        <table id = "trip"></table>
+      </section>
+
+      <section   class="new-reservation">
+        <form id="reservation-form"></form>
+      </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="trek.js"></script>
+
+</body>
+</html>
diff --git a/road.jpg b/road.jpg
diff --git a/trek.js b/trek.js
@@ -0,0 +1,155 @@
+const URL = 'https://ada-backtrek-api.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 = $('#trips-list');
+  tripList.empty();
+
+  axios.get(URL)
+  .then((response) => {
+    console.log(response);
+    reportStatus(`Successfully loaded ${response.data.length} trips`);
+    response.data.forEach((trip) => {
+      tripList.append(`<li id="${trip.id}">${trip.name}</li>`);
+    });
+  })
+  .catch((error) => {
+    reportStatus(`Encountered an error while loading trips: ${error.message}`);
+    console.log(error);
+  });
+};
+
+const individualTrip = (id) => {
+  console.log(id);
+  reportStatus("Loading trip details...");
+  const reserve = $('#reservation-form');
+  const trip = $('#trip');
+  trip.empty();
+  reserve.empty();
+
+  let urlTrip = URL + id;
+  axios.get(urlTrip)
+  .then((response) => {
+
+    reportStatus(`Successfully loaded trip to: ${response.data.name}`);
+
+    trip.append(
+      `
+      <tr><th>Trip Details:</th></tr>
+      <tr><th>Name: ${response.data.name}</th></tr>
+      <tr><th>Continent:</th><td>${response.data.continent}</td></tr>
+      <tr><th>Category:</th><td>${response.data.category}</td></tr>
+      <tr><th>Cost:</th><td>${response.data.cost}</td></tr>
+      <tr><th>Weeks:</th><td>${response.data.weeks}</td></tr>
+      <tr><th>About:</th><td>${response.data.about}</td></tr>
+      `
+    );
+    $('#trip').addClass('trip-details');
+    reserve.addClass(id);
+    reserve.html(
+      `<h1>Reservation</h1>
+      <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="add-reservation" value="Submit Reservation" />
+      `
+    );
+    $('#reservation-form').addClass('reservation');
+
+
+    $('#reservation-form').submit(function(event) {
+      console.log(event);
+      event.preventDefault();
+      createReservation(urlTrip);
+
+    });
+  })
+  .catch((error) => {
+    reportStatus(`Encountered an error while loading this trip: ${error.message}`);
+    console.log(error);
+  });
+};
+
+const FORM_FIELDS = ['name', 'email'];
+const inputField = name => $(`#reservation-form input[name="${name}"]`);
+
+const readFormData = () => {
+  const getInput = name => {
+    const input = inputField(name).val();
+    return input ? input : undefined;
+  };
+
+  const formData = {};
+  FORM_FIELDS.forEach((field) => {
+    formData[field] = getInput(field);
+  });
+
+  return formData;
+
+};
+
+
+const clearForm = () => {
+  FORM_FIELDS.forEach((field) => {
+    inputField(field).val('');
+  });
+}
+
+const createReservation = (urlTrip) => {
+
+  const reservationData = readFormData();
+  console.log(reservationData);
+
+  reportStatus('Doing your reservation...');
+
+  let urlReservation = urlTrip + '/reservations'
+  axios.post(urlReservation, reservationData)
+
+  .then((response) => {
+    console.log(response);
+    reportStatus(`Successfully added a reservation for ${response.data.name}!`);
+    clearForm();
+  })
+  .catch((error) => {
+    console.log(error.response);
+    if (error.response.data && error.response.data.errors) {
+      reportError(
+        `Encountered an error while trying to reserve the trip: ${error.message}`,
+        error.response.data.errors
+      );
+    } else {
+      reportStatus(`Was not able to reserve your trip: ${error.message}`);
+    }
+  });
+};
+
+$(document).ready(() => {
+  $('#load').click(loadTrips);
+  $(`#trips-list`).on(`click`, `li`, function(){
+    individualTrip(this.id);
+  });
+
+});