Ada-C8 · SaraChandler · Nov 30, 2017 · Nov 30, 2017 · Dec 1, 2017 · Dec 1, 2017
diff --git a/dist/index.html b/dist/index.html
@@ -2,19 +2,156 @@
 <html>
 <head>
   <meta charset="utf-8">
-  <title>My JavaScript App</title>
+  <title>BackTREK</title>
+  <script src="app.bundle.js" type="text/javascript"></script>
+  <link rel="shortcut icon" href="favicon.png">
   <meta name="viewport" content="width=device-width, initial-scale=1">
 </head>
 <body>
   <header>
-
+    <h1>BackTREK</h1>
   </header>
-  <main>
+  <main class="clearfix">
+    <section id="status-messages">
+      <button class="clear float-right">
+        <img src="http://www.pvhc.net/img20/nlgmjpfrmyobtykevzjz.png" alt="Clear">
+      </button>
+
+      <ul>
+      </ul>
+    </section>
+
+    <section class="row">
+    <section class="centerme columns medium-6 small-12"><button type="button" class="hollow button" id="load"> Look at Available Trips! </button></section>
+    <section class="centerme columns medium-6 small-12"><button type="button" class="hollow button" id="newtripform"> Add a New Trip! </button></section>
+    </section>
+
+    <section class="columns " id="new-form">
+      <h2>Add a Trip!</h2>
+      <section class="form">
+        <form id="newtrip" >
+      <section>
+        <label>Name</label>
+        <input type="text" id="name" name="name"></input>
+      </section>
+      <section>
+        <label>Continent</label>
+        <input type="text" id="continent" name="continent"></input>
+      </section>
+      <section>
+        <label>About</label>
+        <input type="text" id="about" name="about"></input>
+      </section>
+      <section>
+        <label>Category</label>
+        <input type="text" id="category" name="category"></input>
+      </section>
+      <section>
+        <label>Weeks</label>
+        <input type="number" id="weeks" name="weeks"></input>
+      </section>
+      <section>
+        <label>Cost</label>
+        <input type="number" id="cost" name="cost"></input>
+      </section>
+
+      <section class="button">
+        <button type="submit">Create Trip</button>
+      </section>
+    </form>
+      </section>
+    </section>
+  <!-- </main> -->
+
+    <section class="row">
+
+    <section class="trips columns medium-6 small-12" id="trips-table">
+      <h2>Trips!</h2>
+
+      <table>
+        <thead>
+          <th class="sort name">Name</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>
+          <th class="sort id">ID</th>
+        </thead>
+        <tbody id="trip-list">
+        </tbody>
+      </table>
+    </section>
+
+    <section class="columns medium-6 small-12" id="trip">
+      <section class="onetrip">
+        <p>
 
-  </main>
+        </p>
+      </section>
+    </section>
+
+
+
+    </section>
+
+  <!-- </main> -->
   <footer>
 
   </footer>
-  <script src="app.bundle.js" type="text/javascript"></script>
+
+  <script type="text/template" id="atrip-template">
+    <section class="onetrip">
+    <h2 class="name"><%- name %></h2>
+    <p class="about"><%- about %></p>
+    <p class="weeks"><%- weeks %></p>
+    <p class="cost"><%- cost %></p>
+    </section>
+    <h2>Make a Reservation!</h2>
+    <section class="form">
+      <form id="rezform" atripid="<%- id %>" >
+    <section>
+      <label>Name</label>
+      <input type="text" id="name" name="name"></input>
+    </section>
+    <section>
+      <label>Age</label>
+      <input type="text" id="age" name="age"></input>
+    </section>
+    <section>
+      <label>Email</label>
+      <input type="text" id="email" name="email"></input>
+    </section>
+
+    <section class="button">
+      <button type="submit">Make Reservation</button>
+    </section>
+  </form>
+    </section>
+  </script>
+
+  <script type="text/template" id="trip-template">
+    <tr class="trip" atrip-id="<%- id %>" >
+      <td>
+        <%- name %>
+      </td>
+      <td>
+        <%- category %>
+      </td>
+      <td>
+        <%- continent %>
+      </td>
+      <td>
+        <%- weeks %>
+      </td>
+      <td>
+        <%- cost %>
+      </td>
+      <td>
+        <%- id %>
+      </td>
+    </tr>
+  </script>
+
+
 </body>
 </html>
diff --git a/src/app.js b/src/app.js
@@ -6,8 +6,156 @@ import _ from 'underscore';
 import './css/foundation.css';
 import './css/style.css';
 
+import Trip from './app/models/trip';
+import Reservation from './app/models/reservation';
+import TripList from './app/collections/trip_list';
+
 console.log('it loaded!');
 
+const tripList = new TripList();
+let tripTemplate;
+let atripTemplate;
+let trip;
+
+const render = function render(tripList) {
+  const $tripList = $('#trip-list');
+  $tripList.empty();
+  tripList.forEach((trip) => {
+    $tripList.append(tripTemplate(trip.attributes));
+  });
+};
+
+const seeTrip = function seeTrip(id){
+  trip = tripList.get(id);
+  trip.fetch({success: events.getTrip});
+}
+
+const updateStatusMessageWith = (message) => {
+  $('#status-messages ul').empty();
+  $('#status-messages ul').append(`<li>${message}</li>`);
+  $('#status-messages').show();
+}
+
+const tripFields = ['name', 'continent', 'about', 'category', 'weeks', 'cost'];
+const rezFields = ['name', 'age', 'email'];
+const events = {
+  showTrips() {
+    $('#trips-table').toggle({'display': 'block'});
+  },
+  showNewForm() {
+    $('#new-form').toggle({'display': 'block'});
+  },
+  getTrip(trip) {
+  const $onetrip = $('.onetrip');
+      $onetrip.empty();
+      $onetrip.append(atripTemplate(trip.attributes));
+  },
+  makeReservation(event){
+    event.preventDefault();
+    const rezData = {};
+    rezFields.forEach( (field) => {
+      const val = $(`#rezform input[name=${field}]`).val();
+      if (val != '') {
+        rezData[field] = val;
+      }
+    });
+    const reservation = new Reservation(rezData);
+
+    if (reservation.isValid()) {
+      const tripID = $(event.currentTarget.attributes.atripid).val();
+      console.log(tripID)
+      reservation.urlRoot = `${(new Trip()).urlRoot}${tripID}/reservations`;
+      reservation.save({}, {
+        success: events.successfullSave,
+        error: events.failedSave,
+      });
+    } else {
+      updateStatusMessageWith('reservation is invalid');
+    }
+  },
+  successfullSave(reservation, response) {
+    $('#rezform.input').val('');
+    updateStatusMessageWith('reservation added!')
+  },
+  failedSave(reservation, response) {
+    updateStatusMessageWith('reservation failed!');
+    reservation.destroy();
+  },
+  addTrip(event) {
+   event.preventDefault();
+   const tripData = {};
+   tripFields.forEach( (field) => {
+     const val = $(`#newtrip input[name=${field}]`).val();
+     if (val != '') {
+       tripData[field] = val;
+     }
+   });
+   const trip = new Trip(tripData);
+
+   if (trip.isValid()) {
+
+     trip.save({}, {
+       success: events.successfullTripSave,
+       error: events.failedTripSave,
+     });
+   } else {
+
+     updateStatusMessageWith('Trip was invalid.');
+   }
+
+ },
+ successfullTripSave(trip, response) {
+   $('#newtrip.input').val('');
+   updateStatusMessageWith('Trip added!')
+ },
+ failedTripSave(trip, response) {
+   updateStatusMessageWith('Trip failed!');
+   trip.destroy();
+ },
+ sortTrips(event) {
+    $('.current-sort-field').removeClass('current-sort-field');
+    $(this).addClass('current-sort-field');
+
+
+    let classes = $(this).attr('class').split(/\s+/);
+
+    classes.forEach((className) => {
+      if (tripFields.includes(className)) {
+        if (className === tripList.comparator) {
+          tripList.models.reverse();
+          tripList.trigger('sort', tripList);
+        }
+        else {
+          tripList.comparator = className;
+          tripList.sort();
+        }
+      }
+    });
+  },
+
+};
+
 $(document).ready( () => {
-  $('main').html('<h1>Hello World!</h1>');
+  tripTemplate = _.template($('#trip-template').html());
+  atripTemplate = _.template($('#atrip-template').html());
+  $('#load').on('click', function() {
+      events.showTrips();
+  });
+  tripList.on('update', render, tripList);
+  tripList.fetch();
+
+  $('#trips-table').on('click', '.trip', function() {
+    let tripID = $(this).attr('atrip-id');
+    seeTrip(tripID);
+  })
+  $('#newtripform').on('click', function() {
+      events.showNewForm();
+  });
+
+  $('.sort').click(events.sortTrips);
+  tripList.on('sort', render, tripList);
+
+  $('#newtrip').submit(events.addTrip);
+  $(document).on('submit', '#rezform', events.makeReservation);
+  // $('main').html('<h1>Hello World!</h1>');
 });
diff --git a/src/app/collections/trip_list.js b/src/app/collections/trip_list.js
@@ -0,0 +1,9 @@
+import Backbone from 'backbone';
+import Trip from '../models/trip';
+
+const TripList = Backbone.Collection.extend({
+  model: Trip,
+  url: 'https://ada-backtrek-api.herokuapp.com/trips/',
+});
+
+export default TripList;
diff --git a/src/app/models/reservation.js b/src/app/models/reservation.js
@@ -0,0 +1,11 @@
+import Backbone from 'backbone';
+
+const Reservation = Backbone.Model.extend({
+  initialize: function(attributes) {
+  },
+  validate: function(attributes) {
+    const errors = {};
+    const rezFields = ['name', 'age', 'email'];
+  }
+});
+export default Reservation;
diff --git a/src/app/models/trip.js b/src/app/models/trip.js
@@ -0,0 +1,8 @@
+import Backbone from 'backbone';
+
+const Trip = Backbone.Model.extend({
+  urlRoot: 'https://ada-backtrek-api.herokuapp.com/trips/',
+});
+
+
+export default Trip;