Ada-C11 · shirley1chu · May 29, 2019 · May 29, 2019 · Jun 11, 2019 · Jun 11, 2019
diff --git a/index.css b/index.css
@@ -0,0 +1,8 @@
+ul {
+    list-style: none
+}
+
+.trip {
+    border: 2px solid;
+    display: table 
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,38 @@
+<!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">
+    <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>
+
+    <section id="status-message"></section>
+
+    <main>
+        <section class="current-trips">
+            <button id="load">Get Trips!</button>
+            <ul id="trip-list"></ul>
+        </section>
+
+        <section class="trip-container">
+
+            <ul id="trip-attributes">
+            </ul>
+
+            <section id='trip-form-container'>
+            </section>
+        </section>
+
+    </main>
+
+</body>
+
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,176 @@
+const tripListURL = '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);
+};
+
+//
+// Loading Trips
+//
+const loadTrips = () => {
+  reportStatus('Loading trips...');
+
+  const tripList = $('#trip-list');
+  tripList.empty();
+
+  // sends GET request to endpoint
+  axios.get(tripListURL)
+    .then((response) => {
+      tripList.append('<h1> All Trips </h1>')
+      reportStatus(`Successfully loaded ${response.data.length} trips`);
+      // parses through each response 
+      response.data.forEach((trip) => {
+        // adds each trip to list 
+        tripList.append(`<li class='trip' id=${trip.id}> Trip ${trip.id} : ${trip.name} </li>`);
+      });
+    })
+    .catch((error) => {
+      reportStatus(`Encountered an error while loading trips: ${error.message}`);
+      console.log(error);
+    });
+};
+
+// read into single trip 
+const readTrip = (tripID) => {
+  reportStatus('Loading trips...');
+
+  const tripAttributes = $('#trip-attributes');
+  tripAttributes.empty();
+
+  // compiles url for specific trip
+  const tripURL = tripListURL + '/' + tripID;
+
+  // sends GET request to endpoint
+  axios.get(tripURL)
+    .then((response) => {
+      reportStatus(`Successfully loaded Trip ${tripID}`);
+      // add header
+      tripAttributes.append(`<h1> Trip Details </h1>`);
+
+      // parse through hashy details object
+      for (let [detail, value] of Object.entries(response.data)) {
+        tripAttributes.append(`<li class='detail'> ${detail.charAt(0).toUpperCase() + detail.slice(1)}: ${value} </li>`);
+      }
+
+    })
+    .catch((error) => {
+      reportStatus(`Encountered an error while loading trips: ${error.message}`);
+      console.log(error);
+    });
+};
+
+const tripForm = (tripID) => {
+  reportStatus('Loading trip form');
+
+  const tripFormContainer = $('#trip-form-container');
+  tripFormContainer.empty();
+
+  const tripURL = tripListURL + '/' + tripID;
+
+
+  const form = `<form id='trip-form' class=${tripID}>
+    <div class="name-sec">
+      <label for="name">Name</label>
+      <input type="name" id="name">
+    </div>
+    <div class="email-sec">
+      <label for="email">Email</label>
+      <input type="email" id="email">
+    </div>
+    <button type="submit">Make reservation</button>
+  <form>`;
+
+  // sends GET request to endpoint
+  axios.get(tripURL)
+    .then((response) => {
+      reportStatus(`Successfully loaded Trip Form ${tripID}`);
+      // add header
+      tripFormContainer.append(`<h1> Reserve This Trip </h1>` + form);
+
+    })
+    .catch((error) => {
+      reportStatus(`Encountered an error while loading trips: ${error.message}`);
+      console.log(error);
+    });
+};
+
+
+const readFormData = () => {
+  const parsedFormData = {};
+
+  const nameFromForm = $(`#trip-form input[name="name"]`).val();
+  parsedFormData['name'] = nameFromForm ? nameFromForm : undefined;
+
+  const emailFromForm = $(`#trip-form input[name="email"]`).val();
+  parsedFormData['email'] = emailFromForm ? emailFromForm : undefined;
+
+  return parsedFormData;
+};
+
+const clearForm = () => {
+  $(`#trip-form input[name="name"]`).val('');
+  $(`#trip-form input[name="email"]`).val('');
+}
+
+
+const makeReservation = (tripID) => {
+  const tripURL = tripListURL + '/' + tripID;
+
+  event.preventDefault();
+
+  const tripData = readFormData();
+  console.log(tripData);
+
+  reportStatus('Sending trip data...');
+
+  axios.post(tripURL, tripData)
+    .then((response) => {
+      reportStatus(`Successfully added a trip with ID ${tripID}!`);
+      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}`);
+      }
+    });
+
+};
+
+
+//
+// OK GO!!!!!
+//
+$(document).ready(() => {
+  $('#load').click(loadTrips);
+  $('#trip-list').on('click', '.trip', function () {
+    readTrip(this.id);
+    tripForm(this.id)
+  });
+  $('#tripForm').on('submit', 'button', function () {
+    makeReservation(this.class)
+  });
+});
+
+
+
+
diff --git a/planning.txt b/planning.txt
@@ -0,0 +1,41 @@
+API Structure: 
+[{"id":70, "name":"Cairo to Zanzibar",
+"continent":"Africa", "category":"everything", 
+"weeks":5,"cost":9599.99
+}]
+
+Wave 1
+As a user on the home page with no trips listed, I want to click a button or link, so that I see a list of all trips.
+    ? all trips is ul - add shit as an li item 
+    /click button triggers event
+    /load api for trip num only
+    /index into array for each, interpolate as `trip ${tripid} : ${tripname} `
+
+Wave 2
+As a user on the home page with trips listed, I want to click on a specific trip, so that I see a new section appear with details of that trip.
+As a user on the home page, after I've selected a specific trip, I want to see the following fields listed in the new section of the page, so that I know the details of that trip:
+    ? trip details is its own ul
+    /click on list triggers show page
+    /build endpoint 
+    /load info for that specific trip
+
+
+Trip ID
+Trip name
+Continent
+Details about the trip
+Category of the trip
+Number of weeks duration of the trip
+Cost of the trip
+
+
+Wave 3
+
+1. load form when trip gets clicked -> trigger event, click
+name, email 
+
+2. send a post request when submit gets clicked
+    clear form 
+
+3. create new trip, with some info set 
+