Ada-C8 · SesameSeeds · Nov 28, 2017 · Dec 1, 2017 · Dec 2, 2017 · Dec 3, 2017
diff --git a/dist/index.html b/dist/index.html
@@ -1,20 +1,111 @@
 <!DOCTYPE html>
 <html>
-<head>
-  <meta charset="utf-8">
-  <title>My JavaScript App</title>
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-</head>
-<body>
-  <header>
-
-  </header>
-  <main>
-
-  </main>
-  <footer>
-
-  </footer>
-  <script src="app.bundle.js" type="text/javascript"></script>
-</body>
+
+    <head>
+      <meta charset="utf-8">
+      <title>Trekkin'</title>
+      <meta name="viewport" content="width=device-width, initial-scale=1">
+    </head>
+
+    <body>
+
+      <header>
+        <h1>Trekkin' - Go Global!</h1>
+
+        <section id="status-messages">
+          <ul>
+          </ul>
+        </section>
+      </header>
+
+      <aside class="columns large-6 small-12">
+        <section id="trip-description"></section>
+
+        <h3>Reserve a Trip!</h3>
+
+        <form id="reservation-trip-form" method="post">
+          <label for="name">Full Name</label>
+          <input type="text" name="name"></input>
+
+          <label for="email">E-Mail</label>
+          <input type="text" name="email"></input>
+
+          <label for="age">Age</label>
+          <input type="number" name="age"></input>
+
+          <input type="submit" value="Reserve Trip!" class="button"></input>
+        </form>
+
+        <h3>Add a Trip!</h3>
+
+        <form id="add-trip-form">
+          <label for="name">Trip Name</label>
+          <input type="text" name="name"></input>
+
+          <label for="category">Category</label>
+          <input type="text" name="category"></input>
+
+          <label for="continent">Continent</label>
+          <input type="text" name="continent"></input>
+
+          <label for="weeks">Weeks</label>
+          <input type="number" name="weeks"></input>
+
+          <label for="cost">Cost</label>
+          <input type="number" name="cost"></input>
+
+          <label for="about">About</label>
+          <input type="text" name="about"></input>
+
+          <input type="submit" value="Add Trip!" class="button"></input>
+        </form>
+
+      </aside>
+
+      <main class="row">
+        <section class="trips column large-4 small-12">
+          <table>
+            <thead>
+              <th class="sort name">Name</th>
+              <th class="sort id">Trip ID</th>
+              <th class="sort category">Category</th>
+              <th class="sort continent">Continent</th>
+              <th class="sort weeks">Weeks</th>
+              <th class="sort cost">Cost</th>
+            </thead>
+            <tbody id="trips-list"></tbody>
+          </table>
+        </section>
+
+      </main>
+
+      <footer>
+        &copy; 2017, Stef - Keeping it simple.
+      </footer>
+
+      <script type = "text/template" id="trip-template">
+        <tr class="trip" data-id="<%- id %>">
+          <td><%- name %></td>
+          <td><%- id %></td>
+          <td><%- category %></td>
+          <td><%- continent %></td>
+          <td><%- weeks %></td>
+          <td><%- cost %></td>
+        </tr>
+      </script>
+
+      <script type = "text/template" id="trip-details-template">
+        <h2><%- name %></h2>
+        <p><%- id %></p>
+        <p><%- category %></p>
+        <p><%- continent %></p>
+        <p><%- weeks %></p>
+        <p><%- cost %></p>
+        <p><%- about %></p>
+      </script>
+
+      <script src="app.bundle.js" type="text/javascript"></script>
+
+  </body>
+
 </html>
diff --git a/src/app.js b/src/app.js
@@ -1,13 +1,204 @@
-// Vendor Modules
+// Vendor Modules.
 import $ from 'jquery';
 import _ from 'underscore';
 
-// CSS
+// CSS.
 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';
+
+// DOM Selectors.
+const $tripsList = $('#trips-list')
+const $tripDescription = $('#trip-description')
+const $reservationTripForm = $('#reservation-trip-form')
+
+// Templates for trip list and details.
+let tripTemplate;
+let tripDetailsTemplate;
+
+// Start of trip list.
+const tripList = new TripList();
+
+const render = function render(tripList) {
+  console.log(tripList);
+  const $trips = $('#trips-list')
+
+  // Remember to empty, so things don't repeat.
+  $trips.empty();
+  tripList.forEach((trip) => {
+    $trips.append(tripTemplate(trip.attributes));
+    console.log(trip.attributes);
+    console.log('It loaded!');
+  });
+};
+
+const fields = ['name', 'id', 'category', 'continent', 'weeks', 'cost', 'about'];
+
+const reservationFields = ['name', 'email', 'age'];
+
+// const updateStatusMessageFrom = (messageHash) => {
+//   $('#status-messages ul').empty();
+//   for(let messageType in messageHash) {
+//     messageHash[messageType].forEach((message) => {
+//       $('#status-messages ul').append($(`<li>${messageType}:  ${message}</li>`));
+//       console.log(`<li>${messageType}:  ${message}</li>`);
+//     })
+//   }
+//   $('#status-messages').show();
+// }
+//
+// const updateStatusMessageWith = (message) => {
+//   $('#status-messages ul').empty();
+//   $('#status-messages ul').append(`<li>${message}</li>`);
+//   $('#status-messages').show();
+// }
+
+const events = {
+  // Add a bloody trip
+  addTrip(event) {
+    event.preventDefault();
+    const tripData = {};
+    fields.forEach( (field) => {
+      const val = $(`input[name=${field}]`).val();
+      if (val != '') {
+        tripData[field] = val;
+      }
+    });
+
+    const trip = new Trip(tripData);
+
+    if (trip.isValid()) {
+      // tripList.add(trip);
+      trip.save({}, {
+        success: events.successfullSave,
+        error: events.failedSave,
+      });
+    } else {
+      console.log('Trip is invalid, sad trombone.');
+      console.log(trip.validationError);
+
+      // updateStatusMessageFrom(trip.validationError);
+    }
+  },
+
+  successfullSave(trip, response) {
+    console.log('Success!');
+    console.log(trip);
+    console.log(response);
+    $('#status-messages ul').empty();
+    $('#status-messages ul').append(`<li>${trip.get('title')} added to ze listy list list!</li>`);
+    $('#status-messages').show();
+    tripList.fetch();
+  },
+
+  failedSave(trip, response) {
+    console.log('ERROR!');
+    console.log(trip);
+    console.log(response);
+    $('#status-messages ul').empty();
+    console.log(response.responseJSON.errors);
+
+    for(let key in response.responseJSON.errors) {
+      response.responseJSON.errors[key].forEach((error) => {
+        $('#status-messages ul').append(`<li>${key}: ${error}</li>`);
+      })
+    }
+    $('#status-messages').show();
+    trip.destroy();
+  },
+
+  // Make a reservation
+
+
+
+  addReservation(event){
+    event.preventDefault();
+    let reserveData = {};
+
+    reservationFields.forEach((field) => {
+      console.log(`assigning ${field}`);
+      const value = $(`#reservation-trip-form input[name=${field}]`).val();
+      console.log(value);
+      reserveData[field] = value;
+    });
+
+    console.log('Your reservation has been added!');
+    console.log(reserveData);
+
+    const reservation = new Reservation(reserveData);
+    reservation.urlRoot = `https://ada-backtrek-api.herokuapp.com/trips/1/reservations`;
+
+    reservation.save();
+
+  },
+
+  // Sort Trips
+  sortTrips(event) {
+    console.log(event);
+    console.log(this);
+    // Get the class list of the selected element
+    const classes = $(this).attr('class').split(/\s+/);
+
+    classes.forEach((className) => {
+      if (fields.includes(className)) {
+        if (className === tripList.comparator) {
+          tripList.models.reverse();
+          tripList.trigger('sort', tripList);
+        }
+        else {
+          tripList.comparator = className;
+          tripList.sort();
+        }
+      }
+    });
+
+    $('.sort-field').removeClass('sort-field');
+    $(this).addClass('sort-field');
+  },
+};
 
 $(document).ready( () => {
-  $('main').html('<h1>Hello World!</h1>');
+
+  // $('#reservation-trip-form').submit((event) => {
+  //   event.preventDefault();
+  //
+  //   const url = $('form').attr('action');
+  //   console.log(url);
+  //   const id = ($('form').attr('tripid'));
+  //   const reservationUrl = `${url}${id}/reservations`;
+  //   const formData = $('form').serialize();
+  //
+  //   $.post(reservationUrl, formData, (response) => {
+  //     $('#message').html('<p> Trip Reserved! </p>');
+  //     console.log(response);
+  //   });
+  // });
+
+  // Get those trip deets.
+  $tripsList.on('click', 'tr', function getTrip() {
+    const trip = new Trip({ id: $(this).attr('data-id') })
+    $tripDescription.empty();
+
+    trip.fetch().done(() => {
+      $tripDescription.append(tripDetailsTemplate(trip.attributes));
+    });
+  });
+
+
+  tripTemplate = _.template($('#trip-template').html());
+  tripList.on('update', render, tripList);
+  tripList.fetch();
+
+  tripDetailsTemplate = _.template($('#trip-details-template').html());
+
+  $('#add-trip-form').submit(events.addTrip);
+
+  $('#reservation-trip-form').submit(events.addReservation);
+
+  $('.sort').click(events.sortTrips);
+  tripList.on('sort', render, tripList);
 });
diff --git a/src/app/collections/trip_list.js b/src/app/collections/trip_list.js
@@ -0,0 +1,15 @@
+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;
+  }
+});
+
+export default TripList;
diff --git a/src/app/models/reservation.js b/src/app/models/reservation.js
@@ -0,0 +1,32 @@
+import Backbone from 'backbone';
+
+const Reservation = Backbone.Model.extend({
+
+  validate: function(attributes) {
+    const error = {};
+
+    if (!attributes.name) {
+      error['name'] = 'Full Name cannot be blank!';
+    }
+
+    if (!attributes.email) {
+      error['email'] = 'E-Mail cannot be blank!';
+    }
+
+    if (!attributes.age) {
+      error['age'] = 'Age cannot be blank!';
+    } else if (isNaN(attributes.age)) {
+      error['age'] = 'Age must be a number!';
+    }
+
+    console.log('Error!');
+    console.log(error);
+    if (Object.keys(error).length > 0) {
+      return error;
+    } else {
+      return false;
+    }
+  }
+});
+
+export default Reservation;