Ada-C10 · valgidzi · Nov 21, 2018 · Nov 21, 2018 · Nov 21, 2018 · Nov 21, 2018
diff --git a/index.css b/index.css
@@ -0,0 +1,42 @@
+body {
+  padding: 10px;
+  background-color: gainsboro;
+  text-align: center;
+}
+
+main {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+}
+
+ul {
+  list-style: none;
+}
+
+.status-message {
+  font-weight: 600;
+  padding: 10px;
+  font-size: 1rem;
+}
+
+.trip-list {
+  padding-top: 10px;
+}
+
+.trip-info {
+  height: 50vh;
+  overflow: scroll;
+}
+
+.current-trips {
+  grid-column: 1 / 2;
+}
+
+.trip-detail {
+  grid-column: 2 / 3;
+}
+
+#reserve-form {
+  text-align: center;
+  padding-top: 20px;
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <title>Trek</title>
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
+    <link rel="stylesheet" href="index.css">
+  </head>
+  <body>
+    <header>
+      <h1>Trek</h1>
+      <button type="button" class="btn btn-outline-info btn-lg" id="load-all-trips">Find your next adventure...</button>
+    </header>
+    <section class="status-message"></section>
+    <section class="form-errors"></section>
+    <main>
+      <section class="current-trips">
+
+        <ul id="trip-list"></ul>
+      </section>
+
+      <section class="trip-detail">
+        <div class="trip-info">
+          <ul id="trip-detail-list"></ul>
+        </div>
+
+        <form id="reserve-form">
+        </form>
+      </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,141 @@
+const URL = 'https://trektravel.herokuapp.com/trips'
+
+const reportStatus = (message) => {
+  $('.status-message').html(message);
+};
+
+const displayError = (error) => {
+  if (error.response === undefined) {
+    reportStatus(`${error.message}`)
+  } else {
+    reportStatus(`${error.message}: ${error.response.statusText}`);
+  }
+}
+
+const displayFormErrors = (error) => {
+  const formErrors = error.response.data.errors
+  $('.form-errors').empty();
+  for (const field in formErrors) {
+    for (const problem of formErrors[field]) {
+      $('.form-errors').append(`<p>${capitalize(field)}: ${problem}</p>`);
+    }
+  }
+};
+
+const displayNoContentError = (response) => {
+  reportStatus(`Request failed with status code ${response.status}: ${response.statusText}.`);
+};
+
+const capitalize = (string) => {
+  return string.replace(/^\w/, c => c.toUpperCase());
+}
+
+const sendGetRequest = (id) => {
+  const buildGetRequest = () => {
+    reportStatus('Loading...');
+    axios.get(URL + id)
+      .then((response) => {
+        if (response.status === 204) {
+          displayNoContentError(response);
+        } else {
+          let callback = response.data.length ? parseTripCollection : parseIndividualTrip
+          parseGetResponse(response, callback)
+        }
+      })
+      .catch((error) => {
+        displayError(error);
+      });
+  };
+  return buildGetRequest;
+};
+
+const parseGetResponse = (response, callback) => {
+  let tripData = response.data
+  let element = callback === parseTripCollection ? $('#trip-list') : $('#trip-detail-list')
+  element.empty();
+  callback(tripData, element);
+};
+
+const parseTripCollection = (tripData, element) => {
+  reportStatus(`Successfully loaded ${tripData.length} trips.`)
+  $('.form-errors').empty();
+  tripData.forEach((trip) => {
+    element.append(
+      `<li><button id="${trip.id}" class="btn btn-outline-secondary btn-block">
+      ${trip.name}</button></li>`);
+  });
+}
+
+const parseIndividualTrip = (tripData, element) => {
+  reportStatus(`Successfully loaded ${tripData.name}.`)
+  $('.form-errors').empty();
+  element.append(`<h3>${tripData.name}</h3>`);
+  const tripProperties = ['continent', 'category', 'weeks', 'cost']
+  tripProperties.forEach((prop) => {
+    let header = capitalize(prop);
+    element.append(
+      `<li>${header}: ${tripData[prop]}</li>`
+    )
+  });
+  element.append(`<p>${tripData.about}</p>`)
+  appendResForm(tripData);
+}
+
+const appendResForm = (tripData) => {
+  $('#reserve-form').empty();
+  $('#reserve-form').append(
+    `<h4>Make a reservation for ${tripData.name}</h4>
+    <input type="hidden" id="tripId" name="tripId" value="${tripData.id}">
+    <div>
+      <label for="name">Name</label>
+      <input type="text" name="name" />
+    </div>
+    <div>
+      <label for="email">Email</label>
+      <input type="text" name="email" />
+    </div>
+    <input type="submit" name="add-res" value="Submit"/>`)
+}
+
+const reserveTrip = (event) => {
+  event.preventDefault();
+  reportStatus('Sending request...');
+
+  const resFormData = {
+    name: $('input[name="name"]').val(),
+    email: $('input[name="email"]').val(),
+    id: $('input[id="tripId"]').val()
+  };
+
+  const uri = URL + `/${resFormData.id}` + '/reservations'
+
+  axios.post(uri, resFormData)
+    .then((response) => {
+      if (response.status === 204) {
+        displayNoContentError(response);
+      } else {
+        reportStatus(`Sucessfully reserved! Please save your reservation id: ${response.data.id}`);
+        $('.form-errors').empty();
+      }
+      $('#reserve-form')[0].reset();
+    })
+    .catch((error) => {
+        displayError(error);
+        if (error.response.data.errors) {
+          displayFormErrors(error);
+        }
+    });
+};
+
+$(document).ready(() => {
+  const getAllTrips = sendGetRequest('/');
+  $('#load-all-trips').click(getAllTrips);
+
+  $('ul').on('click', 'button', function(event) {
+    let id = '/' + $(this).attr('id');
+    const getTripDetails = sendGetRequest(id);
+    getTripDetails();
+  });
+
+  $('#reserve-form').submit(reserveTrip);
+});