Ada-C11 · Faiza1987 · May 30, 2019 · May 31, 2019 · May 31, 2019 · May 31, 2019
diff --git a/images/erwan-hesry-166245-unsplash.jpg b/images/erwan-hesry-166245-unsplash.jpg
diff --git a/images/vintage-travel.jpg b/images/vintage-travel.jpg
diff --git a/index.css b/index.css
@@ -0,0 +1,88 @@
+@import url('https://fonts.googleapis.com/css?family=Barrio|Fascinate+Inline&display=swap');
+
+body {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-column-gap: 2em;
+  grid-row-gap: 0;
+  /* background-image: url("https://i.pinimg.com/originals/3d/1e/e8/3d1ee8705f18e287677909f1c548cd42.jpg"); */
+  background-image: url("images/erwan-hesry-166245-unsplash.jpg");
+  font-weight: bold;
+  color: aliceblue;
+  background-size: cover;
+}
+
+ #main {
+  min-height: 20px;
+  grid-column-start: 1;
+  grid-column-end: 3;
+  text-align: center;
+}
+
+#title{
+  font-family: 'Fascinate Inline', cursive;
+}
+
+button#load-trips{
+ border: solid;
+ margin: 0 auto 1em auto;
+ font-size: 1em;
+ padding: 5px 30px;
+ background-color: rgb(247, 126, 146);
+ color: whitesmoke;
+}
+
+#trips{
+  grid-column: 1;
+  grid-row: 2 / span 2;
+} 
+
+#trip-details {
+  grid-column: 2;
+  grid-row: 2;
+}
+
+#reservation{
+  grid-column: 2;
+  grid-row: 3;
+  height: auto;
+}
+
+#trips, #trip-details, #reservation{
+  border: dotted burlywood;
+  overflow: scroll;
+  text-align: center;
+}
+
+.details-border{
+  height: auto;
+}
+
+#reservation{
+  padding-bottom: 15px;
+}
+
+.hide-details{
+  display: none;
+}
+
+#list{
+  text-align: center;
+}
+
+.list-name {
+  font-family: 'Barrio', cursive;
+}
+
+#trips-list {
+  list-style: none;
+}
+
+li{
+  padding-top: 1em;
+  border-bottom: solid coral;
+}
+
+#trip-id{
+  display: none;
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+  <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>
+    <!-- <img src="https://www.featurepics.com/StockImage/20130217/vintage-travel-background-stock-illustration-2613536.jpg" alt="vintage-map-image"> -->
+
+    <main id="main">
+      <h1 id="title"> Come Trek With Me! </h1>
+      <button id="load-trips"> See All Trips!</button>
+      <!-- Display Status -->
+      <section id="status-message"></section>
+    </main>
+
+    <!-- STATUS MESSAGE -->
+
+    <!-- ALL TRIPS -->
+    <section id="trips" class="hide-details">
+      <h2 class="list-name"> ALL TRIPS </h2>
+      <ul id="trips-list"> </ul>
+    </section>
+
+    <!-- TRIP DETAILS -->
+    <div class="details-border">
+      <section id="trip-details" class="hide-details">
+        <h3 class="list-name"> TRIP DETAILS </h3>
+        <section id="trip-info"></section>
+      </section>
+    </div>
+
+    <!-- RESERVE TRIP (got from Ada Pets)-->
+    <div class="details-border">
+    <section id="reservation" class="hide-details">
+      <h3 class="list-name"> RESERVE A TRIP  </h3>
+      <form id="reservation-form">
+        <div>
+          <label for="name">Name:</label>
+          <input type="text" name="name" required="yes"/>
+          <span id="trip-id"></span>
+        </div>
+        <br/>
+        <div>
+          <label for="email">Email:</label>
+          <input type="text" name="email" required="yes"/>
+        </div>
+        <br />
+        <input type="submit" name="reserve-trip" value="Reserve Trip"/>
+      </form>
+    </section>
+  </body>
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,136 @@
+const ALL_TRIPS = 'https://trektravel.herokuapp.com/trips';
+
+
+// ~~~~~~~~ERROR & STATUS REPORTING~~~~~~~~
+const reportStatus = (message) => {
+  const statusContainer = $('#status-message');
+  statusContainer.empty();
+  statusContainer.append(`<p>${message}</p>`);
+}
+
+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);
+};
+
+// ~~~~~~~~LOAD ALL TRIPS (got from Ada Pets)~~~~~~~~
+const loadTrips = () => {
+  reportStatus('Loading trips...');
+
+  const tripList = $('#trips-list');
+  tripList.empty();
+
+  axios.get(ALL_TRIPS)
+    .then((response) => {
+      reportStatus(`Successfully loaded ${response.data.length} trips`);
+
+
+      response.data.forEach((trip) => {
+        tripList.append(`<li class='${trip.id}'> ${trip.name}</li>`);
+      })
+    })
+    .catch((error) => {
+      reportStatus(`Encountered an error while loading trips: ${error.message}`);
+
+      console.log(error);
+    });
+}
+
+//~~~~~~~~TRIP DETAILS~~~~~~~~
+const tripDetails = (id) => {
+  reportStatus('Loading trip details...');
+
+  const tripInfo = $('#trip-info');
+  tripInfo.empty();
+
+  axios.get(ALL_TRIPS + '/' + id)
+    .then((response) => {
+      reportStatus(`Successfully loaded details about ${id}.`);
+
+      $('#trip-id').text(id);
+      let trip = response.data;
+
+      tripInfo.append(`<h3>Name: ${trip.name}</h3>`);
+      tripInfo.append(`<p><strong>Continent: </strong>${trip.continent}</p>`);
+      tripInfo.append(`<p><strong>Category: </strong>${trip.category}</p>`);
+      tripInfo.append(`<p><strong>Weeks: </strong>${trip.weeks}</p>`);
+      tripInfo.append(`<p><strong>Cost: </strong>$${trip.cost}</p>`);
+      tripInfo.append(`<p><strong>About:</strong> ${trip.about}</p>`);
+    })
+    .catch((error) => {
+      reportStatus(`Encountered an error while loading trip: ${error.message}`);
+      console.log(error);
+    });
+}
+
+//~~~~~~~~TRIP RESERVATION (Ada Pets)~~~~~~~~
+
+//~~~~~~~~Form Data~~~~~~~~
+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;
+};
+
+//~~~~~~~~Clear Form~~~~~~~~
+const clearForm = () => {
+  $(`#reservation-form input[name="name]`).val('');
+  $(`#reservation-form input[name="email]`).val('');
+}
+
+//~~~~~~~~Reserve Trip~~~~~~~~
+const reserveTrip = (event) => {
+  event.preventDefault();
+
+  const tripData = readFormData();
+  console.log(tripData);
+
+  reportStatus('Sending trip data...');
+
+  let tripId = $('#trip-id').text();
+  console.log(tripId);
+
+  const RESERVATION_URL = ALL_TRIPS + '/' + tripId + '/reservations';
+
+  axios.post(RESERVATION_URL, tripData)
+    .then((response) => {
+      reportStatus(`Successfully reserved 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}`);
+      }
+    });
+};
+
+//~~~~~~~~Ready Document~~~~~~~~
+$(document).ready(() => {
+  $('#load-trips').on('click', function () {
+    loadTrips();
+    $('#trips').show();
+  });
+  // load details about specific trip
+  $('ul').on('click', 'li', function () {
+    let tripId = this.className;
+    tripDetails(tripId);
+    $('#trip-details').show();
+    $('#reservation').show();
+  });
+  $('#reservation-form').submit(reserveTrip);
+});