Ada-C8 · frankienakama · Nov 28, 2017 · Nov 28, 2017 · Nov 28, 2017 · Nov 28, 2017
diff --git a/dist/index.html b/dist/index.html
@@ -2,19 +2,131 @@
 <html>
 <head>
   <meta charset="utf-8">
-  <title>My JavaScript App</title>
+  <title>Back Trekking</title>
   <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link href="https://fonts.googleapis.com/css?family=Abril+Fatface|Roboto" rel="stylesheet">
 </head>
 <body>
-  <header>
 
+  <header class="hero">
+    <div class="hero-section-text">
+      <h1>Back Trekking</h1>
+      <span><h5>
+        <button id="show-trips" class="button secondary hollow">Show Trips</button>
+        <button id="trip-create-new-btn" class="button secondary hollow">Create New Trip</button>
+      </h5></span>
+    </div>
   </header>
+
   <main>
+<!-- MESSAGES -->
+    <span id="status-msg"></span>
+    <span id="confirmation-msg"></span>
+
+<!-- ADD TRIP #trip-create-new -->
+    <article id="trip-create-new" class="columns large-12 small-12">
+      <!-- create new trip form -->
+    </article>
 
+    <!-- SINGLE TRIP #trip-about -->
+    <article id="trip-about" class="columns large-4 small-4 hidden">
+    </article>
   </main>
+<!-- TRIP LIST #trip-list -->
+    <div id="list">
+      <section>
+        <table id="trip-list-table" class="hover stack">
+          <thead>
+            <th class="sort name" id="trip-name">Name</th>
+            <th class="sort continent">Continent</th>
+            <th class="sort category">Category</th>
+            <th class="sort weeks">Trip Length</th>
+            <th class="sort cost">Cost (in USD)</th>
+          </thead>
+          <tbody id="trip-list">
+          </tbody>
+        </table>
+      </section>
+    </div>
+
+<!--
   <footer>
+    &copy; 2017 Sara Frandsen
+  </footer> -->
+
+<!-------------------------->
+<!-------------------------->
+
+<!-- STATUS MESSAGE -->
+  <script type="text/template" id="status-msg-template">
+
+  </script>
+
+<!-- SINGLE TRIP TEMPLATE -->
+  <script type="text/template" id="trip-template">
+    <h2><%- name %></h2>
+    <p><%- about %></p>
+    <button id="new-reservation-btn" class="button secondary hollow">Reserve This Trip</button>
+    <section id="new-reservation"><!-- reservation form --></section>
+  </script>
+
+<!-- TRIPS TEMPLATE -->
+  <script type="text/template" id="trips-template">
+    <tr data-id="<%- id %>" id="<%- id %>" class="trips">
+      <td>
+        <%- name %>
+      </td>
+      <td>
+        <%- continent %>
+      </td>
+      <td>
+        <%- category %>
+      </td>
+      <td>
+        <%- weeks %> week(s)
+      </td>
+      <td>
+        $<%- cost %>
+      </td>
+    </tr>
+  </script>
+
+<!-- CREATE NEW TRIP TEMPLATE -->
+  <script type="text/template" id="create-new-trip-template">
+    <h2>Add a Trip</h2>
+    <form id="add-trip-form">
+      <label for="name">Name</label>
+      <input type="text" name="name"></input>
+      <label for="continent">Continent</label>
+      <input type="text" name="continent"></input>
+      <label for="about">About</label>
+      <input type="text" name="about"></input>
+      <label for="category">Category</label>
+      <input type="text" name="category"></input>
+      <label for="weeks">Weeks</label>
+      <input type="number" name="weeks"></input>
+      <label for="cost">Cost</label>
+      <input type="number" name="cost"></input>
+
+      <input type="submit" value="Create New Trip" class="button"></input>
+    </form>
+  </script>
+
+<!-- NEW RESERVATION TEMPLATE -->
+  <script type="text/template" id="new-reservation-template">
+    <h2>Make Reservation</h2>
+    <form id="reservation-form">
+      <label for="name" id="reservation-name">Name</label>
+      <input type="text" name="name"></input>
+      <label for="age" id="reservation-age">Age</label>
+      <input type="number" name="age"></input>
+      <label for="email" id="reservation-email">Email</label>
+      <input type="text" name="email"></input>
+
+      <input type="submit" value="Make Reservation" class="button"></input>
+    </form>
+  </script>
 
-  </footer>
   <script src="app.bundle.js" type="text/javascript"></script>
 </body>
 </html>
diff --git a/src/app.js b/src/app.js
@@ -1,13 +1,188 @@
 // Vendor Modules
 import $ from 'jquery';
 import _ from 'underscore';
-
 // CSS
 import './css/foundation.css';
 import './css/style.css';
+// OUR COMPONENTS
+import TripList from './collections/trip_list';
+import Trip from './models/trip';
+import Reservation from './models/reservation'
+
+// TRIP FIELDS
+const TRIP_FIELDS = ['id', 'name', 'about', 'continent', 'category', 'weeks', 'cost'];
+const RESERVATION_FIELDS = ['name', 'age', 'email'];
+
+// Trip COLLECTION
+const tripList = new TripList();
+
+// TEMPLATES
+///// still confused why /////
+let tripsTemplate;
+let aboutTemplate;
+let createNewTripTemplate;
+let newReservationTemplate;
+
+// RENDER LIST OF TRIPS
+const loadTrips = function loadTrips(tripList) {
+  const tripsTableElement = $('#trip-list');
+  tripsTableElement.html('');
+
+  tripList.forEach((trip) => {
+    const generatedHTML = $(tripsTemplate(trip.attributes));
+    tripsTableElement.append(generatedHTML);
+  });
+
+  // ADD COLOR TO HEADERS
+  $('th.sort').removeClass('current-sort-field');
+  $(`th.sort.${ tripList.comparator }`).addClass('current-sort-field');
+};
+
+const createNewTripHandler = function(event) {
+  event.preventDefault();
+
+  const tripData = {};
+  TRIP_FIELDS.forEach((field) => {
+    const inputElement = $(`#trip-create-new input[name="${ field }"]`);
+    const value = inputElement.val();
+    tripData[field] = value;
+    // clears form after submitted
+    inputElement.val('');
+  });
+
+  const trip = tripList.add(tripData);
+  trip.save({}, {
+    success: (model, response) => {
+      console.log('Create new trip: success');
+      console.log('Server response:');
+      console.log(response);
+    },
+    error: (model, response) => {
+      console.log('Create new trip: failure');
+      console.log('Server response:');
+      console.log(response);
+    },
+  });
+};
+
+///// RESERVATION FORM /////
+const newReservationHandler = function(event) {
+  event.preventDefault();
+
+  const reservationData = {};
+  RESERVATION_FIELDS.forEach((field) => {
+    const inputElement = $(`#reservation-form input[name="${ field }"]`);
+    const value = inputElement.val();
+    reservationData[field] = value;
+    // clears form after submitted
+    inputElement.val('');
+  });
+
+  // take reservation trip_id from #trip-about data id
+  reservationData.trip_id = $('#trip-about').data('id')
+  const reservation = new Reservation(reservationData);
+  reservation.save({}, {
+    success: (model, response) => {
+      console.log(reservation.url());
+      console.log('Create new reservation: success');
+    },
+    error: (model, response) => {
+      console.log('Create new reservation: failure');
+      console.log('Server response:');
+      console.log(response);
+    },
+  });
+};
+
+//////////////////////////
+///// DOCUMENT READY /////
+$(document).ready(() => {
+  // TEMPLATES
+  tripsTemplate = _.template($('#trips-template').html());
+  aboutTemplate = _.template($('#trip-template').html());
+  createNewTripTemplate = _.template($('#create-new-trip-template').html());
+  newReservationTemplate = _.template($('#new-reservation-template').html());
+
+  $('#show-trips').on('click', function() {
+    console.log('show trips: clicked');
+    /// need clarification on this /////
+    tripList.on('update', loadTrips);
+    tripList.on('sort', loadTrips);
+    tripList.fetch({
+      success: () => {
+        $('#trip-list-table').show();
+        console.log('show list table: success');
+        $('.hero').animate({height:'40vh'});
+      },
+    });
+  });
+
+  // RENDER SINGLE TRIP DETAILS TO DOM
+  $('#trip-list').on('click', 'tr', function() {
+    $('.hidden').show();
+    const aboutElement = $('#trip-about');
+    aboutElement.html('');
+    console.log('about: clicked');
+    // uses 'data' from html data-id
+    let tripID = $(this).data('id');
+    // set the id onto #trip-about to be used on reservation form
+    $('#trip-about').data('id', tripID);
+    console.log(tripID);
+    // uses tripID to find api address for single trip
+    let singleTrip = new Trip({id: tripID});
+    console.log(singleTrip.url());
+
+    // model refers to singleTrip
+    // model.fetch(): takes urlRoot and adds id?
+    //https://stackoverflow.com/questions/16544984/how-backbone-js-model-fetch-method-works
+    singleTrip.fetch({
+      success: (model) => {
+        const generatedHTML = $(aboutTemplate(model.attributes));
+        aboutElement.html(generatedHTML);
+
+        // RENDER 'RESERVATION' FORM TO DOM
+        $('#new-reservation-btn').on('click', function() {
+
+          $('#trip-about').animate({
+             scrollTop: $('#trip-about')[0].scrollHeight}, 2000);
+
+          const newReservationElement = $('#new-reservation');
+          newReservationElement.html('');
+          const generatedHTML = $(newReservationTemplate());
+          newReservationElement.html(generatedHTML);
+
+          console.log('load new reservation form: clicked');
+        });
+      },
+      error: (model) => {
+        console.log('singleTrip fetch: failure');
+        console.log(response);
+      },
+    });
+  })
+
+  // RENDER 'ADD NEW' FORM TO DOM
+  $('#trip-create-new-btn').on('click', function() {
+    const newTripElement = $('#trip-create-new');
+    newTripElement.html('');
+    const generatedHTML = $(createNewTripTemplate());
+    newTripElement.html(generatedHTML);
+
+    console.log('load add new form: clicked');
+  });
+})
 
-console.log('it loaded!');
+// submit new reservation
+$('#trip-about').on('submit', '#reservation-form', newReservationHandler);
+// submit new trip
+$('#trip-create-new').on('submit', createNewTripHandler);
 
-$(document).ready( () => {
-  $('main').html('<h1>Hello World!</h1>');
+// SORT BY CLICKED FIELD
+TRIP_FIELDS.forEach((field) => {
+  const headerElement = $(`th.sort.${ field }`);
+  headerElement.on('click', (event) => {
+    console.log(`Sorting table by ${ field }`);
+    tripList.comparator = field;
+    tripList.sort();
+  });
 });
diff --git a/src/collections/trip_list.js b/src/collections/trip_list.js
@@ -0,0 +1,14 @@
+import Backbone from 'backbone';
+import Trip from '../models/trip';
+
+const TripList = Backbone.Collection.extend({
+  model: Trip,
+  url: 'https://ada-backtrek-api.herokuapp.com/trips',
+
+  parse: function(response) {
+    return response;
+  },
+  comparator: 'name',
+});
+
+export default TripList;