Ada-C10 · kayxn23 · Nov 21, 2018 · Nov 24, 2018 · Nov 24, 2018 · Nov 24, 2018
diff --git a/index.css b/index.css
@@ -0,0 +1,26 @@
+
+@media only screen and (min-width: 600px) and (min-width: 400px){
+    #website-container {
+        background-color: white;
+    }
+}
+
+body {
+  font-family: sans-serif;
+  display: grid;
+  grid-template-rows: 1fr;
+
+}
+
+main {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+}
+
+.hidden {
+  display: none;
+}
+
+.first-column, .second-column {
+  width: 60rem;
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+   <head>
+      <meta charset="utf-8">
+      <title>Trips with axios</title>
+      <!-- Latest compiled and minified CSS -->
+      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
+      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
+      <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 class="">
+      <h1 class="text-center">Trek!</h1>
+      <section class="text-center" id="status-message"></section>
+      </br>
+      <main class="container">
+         <div class="row">
+            <div class="col-sm-6 first-column">
+               <section class="current-trips">
+                  <section class="text-left">
+                     <button id="load" class="btn btn-primary">Get trips!</button>
+                  </section>
+                  <section>
+                     <ul id="trip-list"></ul>
+                  </section>
+               </section>
+            </div>
+            <div class="col-sm-6 second-column">
+               <section>
+                  <ul class="trip-details"></ul>
+               </section>
+               <section class="reserve-trip" >
+                  <form id="reservation-form" class="hidden" >
+                     <h1>Reserve Trip</h1>
+                     <section class="form-group">
+                        <label for="name">Your name:</label>
+                        <input type="text" class="form-control" name="name" />
+                     </section>
+                     <section class="form-group">
+                        <label for="email">Email:</label>
+                        <input type="email" class="form-control" name="email" />
+                     </section>
+                     <section class="form-group">
+                        <input type="hidden" class="form-control" name="tripId" />
+                     </section>
+                     <section class="form-group">
+                        <label for="trip-name">Trip Name:</label>
+                        <input type="text" class="form-control" name="tripName" />
+                     </section>
+                     <div class="form-group">
+                        <button type="submit" class="btn btn-primary" name="make-reservation"/>Reserve</button>
+                     </div>
+                  </form>
+               </section>
+            </div>
+         </div>
+      </main>
+   </body>
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,141 @@
+const URL = 'https://trektravel.herokuapp.com/trips';
+
+//
+// Status Management
+//
+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');
+  tripList.empty();
+
+  axios.get(URL)
+  .then((response) => {
+    reportStatus(`Successfully loaded ${response.data.length} trips`);
+    response.data.forEach((trip) => {
+
+      const loadTripDetails = () => {
+        const tripDetails = $('.trip-details');
+        tripDetails.empty();
+        const reserveTrip = $('#reservation-form'); //added this
+        // reserveTrip.empty(); //added this
+
+        const detailsURL = `https://trektravel.herokuapp.com/trips/${trip.id}`;
+
+        reportStatus('Loading trip details...');
+
+        axios.get(detailsURL)
+        .then((response) => {
+          reportStatus(`Successfully loaded trip details`);
+          const tripName = response.data.name;
+          const continent = response.data.continent;
+          const category = response.data.category;
+          const weeks = response.data.weeks;
+          const cost = response.data.cost;
+          const about = response.data.about;
+          const tripId = response.data.id;
+
+          tripDetails.append(`<h1>Trip Details</h1>
+            <li> Trip: ${tripName}</li>
+            <li> ${weeks} weeks</li>
+            <li> $${cost}</li>
+            <li> Continent: ${continent}</li>
+            <li> Category: ${category}</li>
+            <li> About: ${about}</li>`);
+
+            $( "#reservation-form" ).removeClass( "hidden");
+
+            $(`#reservation-form input[name="tripName"]`).val(`${tripName}`);
+            $(`#reservation-form input[name="tripId"]`).val(`${tripId}`);
+          });
+        };
+
+        tripList.append(`<li class="trip-details-${trip.id}">${trip.name}</li>`);
+        $(`.trip-details-${trip.id}`).click(loadTripDetails);
+      });
+    })
+    .catch((error) => {
+      reportStatus(`Encountered an error while loading trips: ${error.message}`);
+      console.log(error);
+    });
+  };
+
+
+
+  //
+  // Creating Reservation
+  //
+  const readFormData = () => {
+    const parsedFormData = {};
+
+    const inputs = ["tripId", "email", "name", "tripName"];
+
+    inputs.forEach((curInput) => {
+      const curData = $(`#reservation-form input[name="${curInput}"]`).val();
+      parsedFormData[curInput] = curData ? curData : undefined;
+    });
+
+    return parsedFormData;
+  };
+
+  const clearForm = () => {
+    $(`#reservation-form input[name="tripId"]`).val('');
+    $(`#reservation-form input[name="name"]`).val('');
+    $(`#reservation-form input[name="email"]`).val('');
+    $(`#reservation-form input[name="tripName"]`).val('');
+  }
+
+  const createReservation = (event) => {
+
+    event.preventDefault(); //avoids page reload
+
+    const reservationTripId = readFormData().tripId;
+    const reservationData = readFormData()
+
+    reportStatus('Sending reservation data...');
+
+    const reservationURL = `https://trektravel.herokuapp.com/trips/${reservationTripId}/reservations`;
+    console.log(reservationData);
+    axios.post(reservationURL, reservationData)
+    .then((response) => {
+      reportStatus(`Successfully added a reservation for ${response.data.name}!
+        A confirmation has been sent to ${response.data.email}`);
+        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(() => {
+      $('#load').click(loadTrips);
+      $('#reservation-form').submit(createReservation);
+    });