Nkiru-Pipes-BackTrek

dist/index.html

@@ -10,11 +10,164 @@
 
   </header>
   <main>
+    <section>
+      <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" min="0"></input>
+
+        <label for="cost">Cost:</label>
+        <input type="number" name="cost" min="0" step=".01"></input>
+
+        <input type="submit" value="Add Trip"></input>
+      </form>
+    </section>
+
+    <section>
+      <button id="search-trips">Search Trips</button>
+    </section>
+
+    <section id"trip" class="row"></section>
+
+    <section id="trips" class="row">
+      <table>
+        <thead >
+          <!-- <th class="sort id">Id</th> -->
+          <th class="sort name">Name</th>
+          <th class="sort continent">Continent</th>
+          <th class="sort category">Category</th>
+          <th class="sort weeks">Weeks</th>
+          <th class="sort cost">Cost</th>
+        </thead>
+        <tbody id="trip-list">
+        </tbody>
+      </table>
+    </section>
+
+    <section>
+      <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" min="0"></input>
+
+        <label for="cost">Cost:</label>
+        <input type="number" name="cost" min="0" step=".01"></input>
+
+        <input type="submit" value="Add Trip"></input>
+      </form>
+    </section>
+    <div class="row">
+      <!-- <columns medium="6" large="3"> -->
+      <button id="search-trips">Search Trips</button>
+      <!-- </columns> -->
+    </div>
+
+
+    <section id="trip" class="row"></section>
+
+    <section id="trips" class="row">
+      <table>
+        <thead >
+          <th class="sort id">Id</th>
+          <th class="sort name">Name</th>
+          <th class="sort continent">Continent</th>
+          <th class="sort category">Category</th>
+          <th class="sort weeks">Weeks</th>
+          <th class="sort cost">Cost</th>
+        </thead>
+        <tbody id="trip-list">
+        </tbody>
+      </table>
+    </section>
   </main>
   <footer>
 
   </footer>
+
+  <script type="text/template" id="trips-template">
+    <tr>
+      <!-- <td>
+        <%- id %>
+      </td> -->
+      <td>
+        <%- name %>
+      </td>
+      <td>
+        <%- continent %>
+      </td>
+      <td>
+        <%- category %>
+      </td>
+      <td>
+        <%- weeks %>
+      </td>
+      <td>
+        <%- cost %>
+      </td>
+    </tr>
+  </script>
+
+  <script type="text/template" id="trip-template">
+    <p>
+      <%- name %>
+    </p>
+
+    <p>
+      <%- about %>
+    </p>
+
+    <p>
+      <%- continent %>
+    </p>
+
+    <p>
+      <%- category %>
+    </p>
+
+    <p>
+      <%- weeks %>
+    </p>
+
+    <p>
+      <%- cost %>
+    </p>
+
+    <form id="reservation-form" data-trip-id="<%- id %>">
+      <label for="name">Name:</label>
+      <input type="text" name="name"></input>
+
+      <label for="age">Age:</label>
+      <input type="number" name="age"></input>
+
+      <label for="email">Email:</label>
+      <input type="text" name="email"></input>
+
+      <input type="submit" value="Reserve"></input>
+    </form>
+  </script>
+
   <script src="app.bundle.js" type="text/javascript"></script>
 </body>
 </html>

src/app.js

@@ -6,8 +6,113 @@ import _ from 'underscore';
 import './css/foundation.css';
 import './css/style.css';
 
+// Other components
+import Trip from './app/models/trip';
+import Reservation from './app/models/reservation';
+import TripList from './app/collections/trip_list';
+
+const TRIP_FIELDS = ['name', 'continent', 'category', 'weeks', 'cost'];
 console.log('it loaded!');
 
-$(document).ready( () => {
-  $('main').html('<h1>Hello World!</h1>');
+// // Starts undefined - we'll set this in $(document).ready
+// // once we know the template is available
+let tripsTemplate;
+let tripTemplate;
+
+const renderTrips = function renderTrips(tripList) {
+  const tripsTableElement = $('#trip-list');  //check w/Dan if it acts like a global variable
+  tripsTableElement.html('');  //ensure empty prior to populating
+
+
+  tripList.forEach((trip) => {
+    const generatedHTML = $(tripsTemplate(trip.attributes)); // check w/Dan on attributes
+    generatedHTML.on('click', (event) => {
+      trip.fetch({
+        success: function(model, response) {
+          renderTrip(model);
+          $('#trips').hide();
+          $('#trip').show();
+        }
+      });
+    });
+
+    tripsTableElement.append(generatedHTML);
+  });
+};
+
+const renderTrip = function renderTrip(trip){
+    const tripTableElement = $('#trip');
+    tripTableElement.html('');
+
+    const generatedHTML = $(tripTemplate(trip.attributes));
+    tripTableElement.html(generatedHTML);
+};
+
+$(document).ready(() => {
+  tripsTemplate = _.template($('#trips-template').html());
+  tripTemplate = _.template($('#trip-template').html());
+
+  const tripList = new TripList();
+  tripList.on('update',renderTrips);
+
+  tripList.on('sort', renderTrips);
+
+  TRIP_FIELDS.forEach((field) => {
+    const headerElement = $(`th.sort.${ field }`);
+    headerElement.on('click', (event) => {
+      console.log(`sorting table by ${ field }`);
+      tripList.comparator = field; //property; meta data
+      tripList.sort();
+    });
+  });
+
+
+// retrieve all trips
+
+  $('#search-trips').on('click', function() {
+    tripList.fetch({
+      success: function (collection, response) {
+        $('#trips').show();
+        $('#trip').hide();
+      }
+    });
+  });
+
+
+// add a trip
+  $('#add-trip-form').on('submit', function(event) {
+    event.preventDefault();  //prevents page from refreshing
+
+    let tripData = {};
+
+    TRIP_FIELDS.forEach((field) => {
+      tripData[field] = $(`#add-trip-form input[name="${ field }"]`).val();  //loop through
+    });
+
+    let trip = new Trip(tripData); // backbone trip model
+
+    trip.save({}, {
+      success: function (model, response) {
+        tripList.add(model);
+      }
+    });
+  });
+
+  $('#trip').on('submit', '#reservation-form', function(event) {
+    event.preventDefault();
+    let reserveData = {};
+
+    ['name', 'age', 'email'].forEach((field) => {
+      reserveData[field] = $(`#reservation-form input[name="${ field }"]`).val();
+    });
+
+    let reservation = new Reservation(reserveData);
+    reservation.set('trip_id', $(this).data('tripId'));
+
+    reservation.save({}, {
+      success: function (model, response) {
+        console.log('reservation successful');
+      }
+    })
+  });
 });

src/app/collections/trip_list.js

@@ -0,0 +1,11 @@
+import Backbone from 'backbone';
+import Trip from '../models/trip';
+
+const TripList = Backbone.Collection.extend({
+  model: Trip,
+  url: 'https://ada-backtrek-api.herokuapp.com/trips',
+
+  comparator: 'id'
+});
+
+export default TripList;  //what the file represents

src/app/models/reservation.js

@@ -0,0 +1,13 @@
+import Backbone from 'backbone';
+
+const Reservation = Backbone.Model.extend({
+  // urlRoot: 'https://ada-backtrek-api.herokuapp.com/trips',
+  // url: function () {
+  //   return `${ this.urlRoot }/${ this.get('trip_id') }/reservations`;
+  // },
+  url: function () {
+    return `https://ada-backtrek-api.herokuapp.com/trips/${ this.get('trip_id') }/reservations`;
+
+});
+
+export default Reservation;

src/app/models/trip.js

@@ -0,0 +1,11 @@
+import Backbone from 'backbone';
+
+const Trip = Backbone.Model.extend({
+  urlRoot: 'https://ada-backtrek-api.herokuapp.com/trips',
+  defaults: {
+    name: 'unknown'
+  }
+
+});
+
+export default Trip;