Ada-C10 · jfahmy · Nov 21, 2018 · Nov 21, 2018 · Nov 21, 2018 · Nov 26, 2018
diff --git a/assets/fire2.jpg b/assets/fire2.jpg
diff --git a/index.css b/index.css
@@ -0,0 +1,95 @@
+.container {
+  display: grid;
+  grid-gap: 25px;
+  grid-template-areas:
+    "header  header"
+    "content details"
+    "content details"
+    "content book"
+    "content book"
+    "content book";
+}
+
+header {
+  background-color: grey;
+  background: rgb(204, 204, 204); /* Fallback for older browsers without RGBA-support */
+  background: rgba(204, 204, 204, 0.5);
+  grid-area: header;
+  padding-bottom: 2%;
+  color: white;
+  border-radius: 5px;
+}
+
+.book {
+  background-color: white;
+  background: rgb(204, 204, 204); /* Fallback for older browsers without RGBA-support */
+  background: rgba(204, 204, 204, 0.5);
+  grid-area: book;
+  color: white;
+  border-radius: 5px;
+}
+
+.content {
+  background-color: white;
+  background: rgb(204, 204, 204); /* Fallback for older browsers without RGBA-support */
+  background: rgba(204, 204, 204, 0.5);
+  grid-area: content;
+  color: white;
+  border-radius: 5px;
+}
+
+.details {
+  background-color: white;
+  background: rgb(204, 204, 204); /* Fallback for older browsers without RGBA-support */
+  background: rgba(204, 204, 204, 0.5);
+  grid-area: details;
+  color: white;
+  border-radius: 5px;
+}
+
+ul {
+  list-style: none;
+}
+
+#escape-list {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 8%;
+}
+
+body {
+ background: url(./assets/fire2.jpg);
+ background-repeat: no-repeat;
+ background-size: cover;
+ margin: 4%;
+ padding-top: 2%;
+}
+
+header h1 {
+  padding: 2%;
+  padding-left: 5%;
+  font-size: 80px !important;
+  font-family: 'Black Ops One', cursive !important;
+  padding-bottom: 0%;
+}
+
+.form-info {
+  padding:4%;
+}
+
+#load {
+  margin: 5%;
+  background-color:#cc3300;
+  font-size: 2em;
+}
+
+input[name="book-escape"] {
+  background-color:#cc3300;
+  float: right;
+}
+
+.detail-list {
+  padding: 5%;
+  margin-right: 5%;
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+<head>
+  <meta charset="utf-8">
+  <title>Trek Project</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">
+  <link rel="stylesheet"
+   href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
+   integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
+   crossorigin="anonymous">
+   <link href="https://fonts.googleapis.com/css?family=Black+Ops+One" rel="stylesheet">
+</head>
+<body>
+  <main class="container">
+    <header>
+      <h1>Wreck</h1>
+    </header>
+
+    <section class="content">
+      <button id="load" class="btn btn-primary"> View Escape Options </button>
+      <ul id="escape-list"></ul>
+    </section>
+
+    <article class="details hidden">
+      <ul class="detail-list">
+      </ul>
+    </article>
+
+    <section class="book hidden">
+      <section class="form-info">
+        <h1>Book getaway: </h1>
+        <section id="status-message"></section>
+        <form id="escape-form">
+          <div class="form-group">
+            <label for="name">Name:</label>
+            <input type="text" name="name" class="form-control"/>
+          </div>
+
+          <div class="form-group">
+            <label for="email">Email:</label>
+            <input type="text" name="email" class="form-control" />
+          </div>
+
+          <div class="form-group">
+            <label for="escape">Escape: </label>
+            <input type="text" name="escape" class="form-control" />
+          </div>
+
+          <input type="hidden" name="id" value="">
+
+          <input type="submit" name="book-escape" value="Book Escape" class="btn btn-primary"/>
+        </form>
+      </section>
+    </section>
+  </main>
+</body>
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,124 @@
+$(document).ready( function() {
+
+// error handling
+const printError = (error) => {
+    if (error.response.data && error.response.data.errors) {
+      // User our new helper method
+      reportError(
+        `Encountered an error: ${error.message}`,
+        error.response.data.errors
+      );
+    } else {
+      reportStatus(`Encountered an error: ${error.message}`);
+    }
+}
+
+const reportError = (message, errors) => {
+  let content = `<p>${message}</p>`
+  content += "<ul>";
+  for (const field in errors) {
+    for (const problem of errors[field]) {
+      content += `<li>${field}: ${problem}</li>`;
+    }
+  }
+  content += "</ul>";
+  reportStatus(content);
+};
+
+const reportStatus = (message) => {
+  $('#status-message').html(message);
+};
+
+
+// load index of all trips/escapes
+const loadEscapes = () => {
+
+  const getUrl = "https://trektravel.herokuapp.com/trips"
+  const escapeList = $('#escape-list');
+
+    axios.get(getUrl)
+        .then((response) => {
+          escapeList.prepend(`<h2>Quick! Get out of here! </h2>`);
+          response.data.forEach((escape) => {
+            const $tripItem = $(`<li>${escape.name}</li>`);
+
+              // creating an event related to each trip after adding it to our index list
+              $tripItem.click(() => {
+              axios.get(getUrl + '/' + escape.id)
+                  .then((response) => {
+                    showDetailLink(response)
+                  })
+                  .catch((error) => {
+                    printError(error)
+                  });
+              })
+
+            escapeList.append($tripItem);
+          })
+          $( "#load" ).remove();
+        })
+        .catch((error) => {
+        console.log(error);
+        });
+}
+
+const showDetailLink = (response) => {
+  let escape = response.data
+  $('.detail-list').empty()
+  $('.detail-list').prepend(`<h1>${escape.name}</h1>`)
+
+  $('.detail-list').append(`<li><b>Continent:</b> ${escape.continent}</li>
+  <li><b>Category:</b> ${escape.category}</li>
+  <li><b>Weeks:</b> ${escape.weeks}</li>
+  <li><b>Cost:</b> ${escape.cost}</li>
+  <li><b>About:</b> ${escape.about}</li>`)
+  // console.log($('input[name="escape"]'))
+  $('input[name="escape"]').val(`${escape.name}`)
+  $('input[name="id"]').val(`${escape.id}`)
+  $('.hidden').removeClass("hidden")
+}
+
+
+// happens when form submit is executed, creates object literal from form fields
+const readFormData = () => {
+  const formData = {};
+  const name = $(`input[name="name"]`).val();
+    formData['name'] = name ? name : undefined;
+  const email = $(`input[name="email"]`).val();
+    formData['email'] = email ? email : undefined;
+  const escape = $(`input[name="escape"]`).val();
+    formData['escape'] = escape ? escape : undefined;
+  const id = $(`input[name="id"]`).val();
+    formData['id'] = id ? id : undefined;
+  return formData;
+};
+
+
+const bookEscape = () => {
+  //keeps page from refreshing on the submit (default behavior reloads page)
+    event.preventDefault();
+
+    const bookingInfo = readFormData()
+    //clears out form data
+    $( '#escape-form' ).each(function(){
+      this.reset();
+    });
+
+      // build url needed to execute post request
+      const postUrl = `https://trektravel.herokuapp.com/trips/${bookingInfo.id}/reservations`
+      axios.post(postUrl, bookingInfo)
+        .then((response) => {
+          reportStatus('Successfully booked!');
+        })
+        .catch((error) => {
+          printError(error)
+        });
+}
+
+  // event to load all escapes
+  $('#load').click(loadEscapes);
+
+  // creates submit event for the escape booking form
+  $('input[name="book-escape"]').click(bookEscape)
+
+});