Ada-C9 · CheerOnMars · May 23, 2018 · May 23, 2018 · May 24, 2018 · May 27, 2018
diff --git a/.DS_Store b/.DS_Store
diff --git a/index.css b/index.css
@@ -0,0 +1,48 @@
+body {
+  font-family: sans-serif;
+}
+
+main {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  padding: 2rem;
+}
+
+h1 {
+  border-bottom: 1px solid #424242;
+  font-size: 3em;
+  text-align: center;
+}
+
+h3 {
+  border-bottom: .75px solid #424242;
+  text-align: center;
+  padding-bottom: .5em;
+}
+
+button {
+  background-color: #26A69A;
+  padding: 0.85em 1em;
+  color: white;
+  font-size: .75em;
+  font-weight: bold;
+}
+
+ul {
+  list-style-type: none;
+}
+
+.current-trips li {
+  border: .5px solid black;
+  text-align: center;
+  padding: 2em;
+  margin-right: .5em;
+  margin-left: .5em;
+}
+
+section  {
+  margin-right: .5em;
+  margin-left: .5em;
+  padding-left: .5em;
+  padding-right: .5em;
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Trek</title>
+  <link href="index.css" media="screen" rel="stylesheet" type="text/css"/>
+</head>
+<body>
+
+  <nav>
+  </nav>
+
+  <header>
+    <section id="status-message"></section>
+    <h1>Trek</h1>
+    <button id="load">See All Trips</button>
+  </header>
+
+  <main>
+
+    <section class="current-trips" class="hidden">
+      <ul id="trip-list"></ul>
+    </section>
+
+    <section id="trip-location">
+      <div id="trip-details"> </div>
+      <button id="reserve-trip"> Reserve Trip </button>
+
+      <div id="new-reservation"  class="hidden">
+        <h3>Make a reservation</h3>
+        <form id="reservation-form">
+          <label for="name">Name</label>
+          <input type="text" name="name" />
+          <label for="email">Email</label>
+          <input type="text" name="email" />
+          <input type="submit" name="add-reservation" value="Add Reservation" />
+        </form>
+      </div>
+
+    </section>
+
+  </main>
+
+  <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>
+</body>
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,148 @@
+const URL = 'https://ada-backtrek-api.herokuapp.com/trips';
+
+
+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`);
+    tripList.append(`<h3>All Trips</h3>`)
+    response.data.forEach((trip) => {
+      tripList.append(`<li trip-id="${trip.id}"><a>${trip.name}</a></li>`);
+    });
+  })
+
+  .catch((error) => {
+    reportStatus(`Encountered an error while loading trips: ${error.message}`);
+    console.log(error);
+  });
+
+};
+
+const viewTrip = (id) => {
+  reportStatus('Loading trip...');
+
+  const tripDetail = $('#trip-details');
+  tripDetail.empty();
+
+  axios.get(URL + '/' + id)
+  .then((response) => {
+    if (response.status == 200) {
+      console.log();
+      reportStatus(`Successfully loaded trip #${id}`);
+      let trip = response.data;
+      let tripID_res = trip.id
+      // console.log(`res id`);
+      // console.log(tripID_res);
+      let tripDetails = `
+      <h3> ${trip.name} - Trip Details (ID <span>${trip.id}</span>) </h3>
+      <p> Continent: ${trip.continent} </p>
+      <p> Category: ${trip.category} </p>
+      <p> Duration: ${trip.weeks} weeks</p>
+      <p> Cost: $${trip.cost.toFixed(2)} </p>
+      <p> ${trip.about} </p>
+
+      `;
+      // $('span').hide()
+      $('#trip-details').append(tripDetails);
+    } else {
+      reportStatus(`Encountered an error while loading trip: ${error.message}`);
+    }
+  })
+
+  .catch((error) => {
+    reportStatus(`Encountered an error while loading trip: ${error.message}`);
+    console.log(error);
+  });
+};
+
+const FORM_FIELDS = ['name', 'email'];
+const inputField = name => $(`#reservation-form input[name="${name}"]`);
+
+const readFormData = () => {
+  const getInput = name => {
+    const input = inputField(name).val();
+    return input ? input : undefined;
+  };
+
+  const formData = {};
+  FORM_FIELDS.forEach((field) => {
+    formData[field] = getInput(field);
+  });
+
+  return formData;
+};
+
+const clearForm = () => {
+  FORM_FIELDS.forEach((field) => {
+    inputField(field).val('');
+  });
+}
+
+const reserveTrip = (event) => {
+  event.preventDefault();
+
+  const tripId = $('#trip-details span').text();
+  // const tripId = $('#trip-id');
+  const reservationURL = URL + '/' + tripId + '/reservations';
+  const reservationData = readFormData();
+  console.log();
+
+  reportStatus('Reserving trip...');
+
+  axios.post(reservationURL, reservationData)
+  .then((response) => {
+    reportStatus(`Successfully added a reservation 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}`);
+    }
+  });
+};
+
+$(document).ready(() => {
+  $("#trip-location").hide();
+
+  $('#load').click(loadtrips)
+
+  $('ul').on('click', 'li', function() {
+    let tripID = $(this).attr('trip-id');
+    viewTrip(tripID);
+    $('#trip-location').show();
+    $("#reserve-trip").show();
+    $("#new-reservation").hide();
+  });
+  $('#reserve-trip').click(function(){
+    $("#reserve-trip").hide();
+    $("#new-reservation").show();
+    let tripID = $(this).attr('trip-id');
+  });
+  $('#reservation-form').submit(reserveTrip);
+});