Ada-C8 · Guribot · Nov 28, 2017 · Nov 29, 2017 · Nov 29, 2017 · Nov 29, 2017
diff --git a/dist/index.html b/dist/index.html
@@ -2,19 +2,161 @@
 <html>
 <head>
   <meta charset="utf-8">
-  <title>My JavaScript App</title>
+  <title>backTREK</title>
   <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet">
 </head>
 <body>
   <header>
+    <div class="row">
 
-  </header>
-  <main>
+      <h1>backTREK</h1>
+      <a id="add-trip" class="button add-trip">+</a>
+    </div>
+    <form id="trip-search" class="small-12 medium-9 columns on-load">
+      <div class="form-holder search-type-holder small-12 medium-4 large-3 columns">
+        <select name="search-type">
+          <option value="name">Trip Name</option>
+          <option value="continent">Continent</option>
+          <option value="category">Category</option>
+          <option value="weeks">Duration</option>
+          <option value="cost">Cost</option>
+        </select>
+      </div>
 
-  </main>
-  <footer>
+      <div class="form-holder text-holder small-12 medium-8 large-9 columns">
+        <input type="text" name="query" />
+      </div>
+  </form>
+</header>
+<section id="intro-button">
+  <a class="button intro-button small-10 medium-5 columns" id="show-trips">See The World</a>
+</section>
+<main class="on-load">
+  <div id="loading">
+    <h3>Loading . . .</h2>
+  </div>
+  <section id="trip-list" class="trip-list" style="display: none;">
+    <ul>
+      <li class="headers">
+        <h4 id="name" class="sort name-col">Name</h4>
+        <h4 id="continent" class="sort cont-col">Continent</h4>
+        <h4 id="category" class="sort cat-col">Category</h4>
+        <h4 id="weeks" class="sort weeks-col">Duration</h4>
+        <h4 id="cost" class="sort cost-col">Cost</h4>
+      </li>
+    </ul>
+  </section>
+</main>
+<footer>
 
-  </footer>
-  <script src="app.bundle.js" type="text/javascript"></script>
+</footer>
+
+<script id="trip-template" type="text/template">
+  <li id="<%- id %>" class="trip-row" data-foo="bar">
+    <h6 class="name-col">
+      <%- name %>
+    </h6>
+    <h6 class="cont-col">
+      <%- continent %>
+    </h6>
+    <h6 class="cat-col">
+      <%- category %>
+    </h6>
+    <h6 class="weeks-col">
+      <%- weeks %> weeks
+    </h6>
+    <h6 class="cost-col">
+      $<%- cost.toFixed(2) %>
+    </h6>
+  </li>
+</script>
+
+<script id="empty-trip-template" type="text/template">
+  <li class="trip-row">
+    <h6 class="empty-col">
+      No trips match that criteria.
+    </h6>
+  </li>
+</script>
+
+<script id="trip-detail-template" type="text/template">
+  <div class="trip-detail-holder">
+    <p class="trip-details">
+      <%- about %>
+    </p>
+    <div class="reserve-holder">
+      <a id="reserve-btn" class="button reserve-btn">Reserve Your Spot!</a>
+    </div>
+  </div>
+</script>
+
+<script id="reserve-modal-template" type="text/template">
+  <section id="reserve-modal" class="reserve modal">
+    <div class="modal-shadow modal-close" id="modal-shadow">
+      <div class="modal-body small-11 medium-7 large-4 columns">
+        <a class="modal-close close-btn">X</a>
+        <h2>Make a Reservation</h2>
+        <form id="reservation-form" data-id="<%- id %>">
+          <span id="form-messages"></span>
+          <div id="reservation-name" class="reservation-form-holder small-12 columns">
+            <label for="name">Name:</label>
+            <input type="text" name="name" />
+          </div>
+          <div id="reservation-email" class="reservation-form-holder small-12 columns">
+            <label for="name">Email:</label>
+            <input type="text" name="email" />
+          </div>
+          <div class="reservation-form-holder small-12 columns">
+            <input type="submit" class="button" />
+          </div>
+        </form>
+      </div>
+    </div>
+  </section>
+</script>
+
+<script id="add-trip-modal-template" type="text/template">
+  <section id="add-trip-modal" class="add-trip-modal modal">
+    <div class="modal-shadow modal-close" id="modal-shadow">
+      <div class="modal-body small-11 medium-7 large-4 columns">
+        <a class="modal-close close-btn">X</a>
+        <h2>Create A Trip</h2>
+        <form id="add-trip-form">
+          <span id="form-messages"></span>
+          <div id="trip-name" class="add-trip-form-holder small-12 columns">
+            <label for="name">Name:</label>
+            <input type="text" name="name" />
+          </div>
+          <div id="trip-continent" class="add-trip-form-holder small-12 columns">
+            <label for="continent">Continent:</label>
+            <input type="text" name="continent" />
+          </div>
+          <div id="trip-category" class="add-trip-form-holder small-12 columns">
+            <label for="category">Category:</label>
+            <input type="text" name="category" />
+          </div>
+          <div id="trip-weeks" class="add-trip-form-holder small-12 columns">
+            <label for="weeks">Duration (week):</label>
+            <input type="text" name="weeks" />
+          </div>
+          <div id="trip-cost" class="add-trip-form-holder small-12 columns">
+            <label for="cost">Cost:</label>
+            <input type="text" name="cost" />
+          </div>
+          <div id="trip-about" class="add-trip-form-holder small-12 columns">
+            <label for="about">Description:</label>
+            <textarea name="about" />
+          </div>
+          <div class="add-trip-form-holder small-12 columns">
+            <input type="submit" class="button" />
+          </div>
+        </form>
+      </div>
+    </div>
+  </section>
+</script>
+
+<script src="app.bundle.js" type="text/javascript"></script>
 </body>
 </html>
diff --git a/src/app.js b/src/app.js
@@ -6,8 +6,208 @@ import _ from 'underscore';
 import './css/foundation.css';
 import './css/style.css';
 
-console.log('it loaded!');
+// Models and Collections
+import Trip from './app/models/trip';
+import TripList from './app/collections/trip-list';
+import Reservation from './app/models/reservation';
+
+let tripTemplate;
+let emptyTripTemplate;
+let tripDetailTemplate;
+let reserveModalTemplate;
+let addTripModalTemplate;
+
+// Trip List
+
+const tripList = new TripList();
+
+const render = function render(tripList) {
+  $('.trip-row').remove();
+  const tripListElement = $('#trip-list ul');
+  if (tripList.length > 0) {
+    tripList.forEach((trip) => {
+      const generatedHTML = $(tripTemplate(trip.attributes));
+      tripListElement.append(generatedHTML);
+    });
+  } else {
+    const generatedHTML = $(emptyTripTemplate());
+    tripListElement.append(generatedHTML);
+  }
+};
+
+const show = function show(e) {
+  // don't minimize trip details when the reserve button is clicked
+  if ($(e.target).is('#reserve-btn')) return;
+  const id = parseInt(findElementTripID(e));
+  const tripElement = $(`#${id}`);
+  if (tripElement.hasClass('show')) {
+    clearShow();
+  } else {
+    const trip = tripList.findWhere({id: id});
+    trip.fetch({
+      success: () => {
+        clearShow();
+        $('.trip-row').removeClass('show');
+        $('.trip-details').remove();
+        const generatedHTML = $(tripDetailTemplate(trip.attributes));
+        const reserveBtn = ('#reserve-btn');
+        tripElement.append(generatedHTML).addClass('show');
+      }
+    });
+  }
+};
+
+const clearShow = function clearShow() {
+  $('.trip-row').removeClass('show');
+  $('.trip-detail-holder').remove();
+};
+
+const sort = function sort(e) {
+  $('.current-sort').removeClass('current-sort');
+  let targetElement = $(e.target);
+  let field = targetElement[0].id;
+  tripList.comparator = field;
+  targetElement.addClass('current-sort');
+  tripList.sort();
+  render(tripList);
+};
+
+// Filtering
+
+const filter = function filter(e) {
+  e.preventDefault();
+  const form = $('#trip-search');
+  const searchData = getFormData(form, ['search-type', 'query']);
+  const newList = tripList.filterBy(searchData['search-type'], searchData['query']);
+  render(newList);
+};
+
+// Modals
+
+const addTripModal = function addTripModal() {
+  $('body').append(addTripModalTemplate());
+};
+
+const reserveModal = function reserveModal(e) {
+  const id = findElementTripID(e);
+  const generatedHTML = $(reserveModalTemplate({'id': id}));
+  const form = $('#reservation-form');
+  // form.on('submit', submitReservation);
+  $('body').append(generatedHTML);
+};
+
+const clearModal = function clearModal(e) {
+  if ($(e.target).hasClass('modal-close')) {
+    $('.modal').remove();
+  }
+};
+
+// Forms
+
+const submitTrip = function submitTrip(e) {
+  e.preventDefault();
+  clearErrors();
+  const form = $(e.target);
+  const formData = getFormData(form, ['name', 'continent', 'category', 'weeks', 'cost', 'about']);
+  const newTrip = new Trip(formData);
+  saveIfValid(newTrip, form, 'trip');
+};
+
+const submitReservation = function submitReservation(e) {
+  e.preventDefault();
+  clearErrors();
+  $('.form-messages').html('');
+  const form = $('#reservation-form');
+  const id = form.data('id');
+  const formData = getFormData(form, ['name', 'email']);
+  formData['tripID'] = id;
+  const newReservation = new Reservation(formData);
+  saveIfValid(newReservation, form, 'reservation');
+};
+
+const getFormData = function getFormData(target, values) {
+  const formData = {};
+  values.forEach((value) => {
+    let targetElement = target.find(`[name="${ value }"]`);
+    formData[value] = targetElement.val();
+  });
+  return formData;
+};
+
+const saveIfValid = function saveIfValid(object, form, type) {
+  if (object.isValid()) {
+    object.save({}, {
+      success: (response) => {
+        formSuccess(type, form)
+      },
+      error: (status, response) => {
+        const errors = ($.parseJSON(response.responseText))['errors'];
+        printErrors(errors, type);
+      },
+    });
+  } else {
+    printErrors(object.validationError, type);
+  }
+};
+
+const formSuccess = function formSuccess(item, form) {
+  const messageBox = $('#form-messages');
+  messageBox.html(`<p class="success">Successfully created ${item}!</p>`);
+  form[0].reset();
+}
+
+const printErrors = function printErrors(errors, type) {
+  for(let field in errors) {
+    let errorElementID = `#${type}-${field} label`
+    let errorElement = $(errorElementID);
+    errorElement.addClass('has-errors');
+    errorElement.append(`<p class="error">${errors[field]}</p>`);
+  }
+};
+
+const clearErrors = function clearErrors() {
+  $('.has-errors').removeClass('has-errors');
+  $('.error').remove();
+};
+
+const findElementTripID = function findElementTripID(e) {
+  return $(e.target).closest('li.trip-row').attr('id');
+};
 
 $(document).ready( () => {
-  $('main').html('<h1>Hello World!</h1>');
+  $('.on-load').hide();
+  tripTemplate = _.template($('#trip-template').html());
+  emptyTripTemplate = _.template($('#empty-trip-template').html());
+  tripDetailTemplate = _.template($('#trip-detail-template').html());
+  reserveModalTemplate = _.template($('#reserve-modal-template').html());
+  addTripModalTemplate = _.template($('#add-trip-modal-template').html());
+
+  tripList.on('update', render);
+
+  $('#intro-button').on('click', (e) => {
+    $('#intro-button').hide(200);
+    $('#loading').show(500);
+    tripList.fetch({
+      success: () => {
+        $('#loading').hide(200);
+        $('#trip-list').show(500);
+      },
+    });
+    $('.on-load').show(500);
+  });
+
+  $('#trip-list').on('click', 'li', show);
+
+  $('.sort').on('click', sort);
+
+  $('#add-trip').on('click', addTripModal);
+  $('body').on('click', '.modal-close', clearModal);
+
+  $('body').on('keyup', '#trip-search', filter);
+  $('#trip-search').on('submit', e => e.preventDefault());
+
+  $('#trip-list').on('click', '#reserve-btn', reserveModal);
+  $(document).on('submit', '#reservation-form', submitReservation);
+  $(document).on('submit', '#add-trip-form', submitTrip);
+
 });