Ada-C10 · leannerivera · Nov 27, 2018 · Nov 28, 2018 · dHelmgren · Nov 30, 2018
diff --git a/index.css b/index.css
@@ -0,0 +1,7 @@
+.hidden {
+  display: none;
+}
+
+article:hover {
+  cursor: pointer; /*for indicating that it can be clicked...*/
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Go Trekking!</title>
+    <meta charset="utf-8">
+    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <!--bootstrap-->
+  <link href="index.css" media="screen" rel="stylesheet" type="text/css"/>
+  </head>
+
+  <body>
+    <header>
+      <h1> Trek </h1>
+      <nav>
+        <a href="index.html">HOME </a>
+      </nav>
+    </header>
+    <main>
+      <button id="trip-view" class="btn">View Trips</button>
+      <section id="trip-info">
+
+      </section>
+    </main>
+    <footer>
+    </footer>
+
+    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> <!-- external link to jQuery library-->
+    <script src="index.js" type="text/javascript"></script>
+  </body>
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,155 @@
+const URL = "https://trektravel.herokuapp.com/trips/" //travel trip API
+
+// =======STATUS MESSAGES========
+const reportStatus = (message) => {
+  $('#status-message').html(message);
+};
+
+// =======HIDDEN TOGGLE=========
+const toggleMe = (id) => { //hide and show items
+  $(`article[id$=${id}] h3`).click(() => { //when article ending with id is clicked
+    $(`summary[id=trip-${id}]`).toggleClass("hidden"); //unhide loaded trip information
+    $(`form`).toggleClass("hidden"); //unhide form info
+    clearForm()  ;
+    $(`form`).submit( {"trip": id}, submitReservation); //FORM SUBMISSION FUNCTION, PASS ON DATA TO BE USED IN FORM, only submits per each trip
+    $(`article[id!=trip-info-${id}]`).toggleClass("hidden"); //hide trips that do not equal this article's id
+});
+}
+
+// =======FORM DATA========
+const readFormData = () => {
+  const parsedFormData = {};
+
+  const nameFromForm = $( `input[name='name']`).val();
+  parsedFormData['name'] = nameFromForm ? nameFromForm : undefined;
+  console.log(nameFromForm);
+
+  const emailFromForm = $(`input[name='email']`).val();
+  console.log(emailFromForm);
+  parsedFormData['email'] = emailFromForm ? emailFromForm : undefined;
+
+  console.log()
+  console.log(parsedFormData);
+  return parsedFormData;
+
+};
+
+const clearForm = () => { //clear out form after submission
+  $('form')[0].reset();
+}
+
+// =======FORM SUBMISSIONS=======
+  const submitReservation = (event) => {
+    const tripID = event.data.trip
+    event.preventDefault(); //prevents reload
+    const reserveData = readFormData();
+    const sendData = {
+        'name': reserveData["name"],
+        'email': reserveData["email"]
+    };
+    console.log(tripID);
+
+    const postURL = URL+tripID+"/reservations";
+
+    axios.post(postURL, sendData)
+      .then((response) => {
+        clearForm;
+        reportStatus(`Successfully submitted reservation ${response.data.id}!`);
+      })
+      .catch((error) => {
+        console.log(error.response);
+        if (error.response.data && error.response.data.errors) {
+          reportStatus(
+            `Encountered an error: ${error.message}`,
+            error.response.data.errors
+          );
+        } else {
+          reportStatus(`Encountered an error: ${error.message}`);
+        }
+      });
+  }
+
+// =======TRIPS LIST VIEW========
+const allTripView = () => {
+  let tripInfo = [];
+  const tripsSection = (data) => {return $(`
+    <article id='trip-info-${data.id}'>
+      <h3 class='name'> ${data.name}, ${data.continent} </h3>
+      <summary id='trip-${data.id}' class='hidden'>
+
+      </summary>
+    </article>
+    `)
+  };
+
+  axios.get(URL)
+  .then((response) => {
+    tripInfo = response.data;
+    console.log(tripInfo);
+    tripInfo.forEach((trip) => {
+      $("#trip-info").append(tripsSection(trip));
+      singleTripInfo(trip.id); //DOWNLOAD TRIP INFORMATION
+      toggleMe(trip.id); //TOGGLE FUNCTION WHEN ARTICLE CLICKED
+      });
+  })
+  .catch((error) => {
+    reportStatus(`Encountered an error while loading trips: ${error.message}`);
+      console.log(error);
+  });
+}
+
+// ========CREATE FORM ===============
+const createForm = () => {
+
+  return $(`
+    <form class='hidden'>
+      <label for="name">Name</label>
+      <input type="text" name="name" />
+      <label for="email">eMail</label>
+      <input type="text" name="email" />
+
+      <input type="submit" name="reservation" value="Reserve Your Space Now!"/>
+    </form>
+  `)
+}
+
+// ==========SINGLE TRIP INFO=========
+const singleTripInfo = (id) => {
+  let singleTrip = [];
+  const idURL = URL+id;
+
+  const singleTripInfo = (data) => { return $(`
+        <ul>
+          <li> ${data.id} </li>
+          <li> ${data.category} </li>
+          <li> ${data.weeks} </li>
+          <li> ${data.cost} </li>
+        </ul>
+        <p> ${data.about} </p>
+    `)};
+
+  axios.get(idURL)
+  .then((response) => {
+    singleTrip = response.data;
+    $(`#trip-${id}`).append(singleTripInfo(singleTrip)); // APPEND TO SUMMARY WITH TRIP ID
+   })
+  .catch((error) => {
+    reportStatus(`Encountered an error while loading trips: ${error.message}`);
+      console.log(error);
+  });
+};
+
+
+$(document).ready(() => {
+  $("#trip-view").click( () => {
+    allTripView();
+    $("#trip-view").hide();
+  });
+  $('main').append(createForm); //only one form for everyone
+});
+
+
+
+
+
+//