Wave1, gives all trips

Ada-C8 · sairagula · Nov 30, 2017 · Dec 1, 2017 · Dec 1, 2017 · Dec 1, 2017
commit 471d6b52aba280c75137f3861217b12ce09cb527
diff --git a/dist/index.html b/dist/index.html
@@ -2,19 +2,95 @@
 <html>
 <head>
   <meta charset="utf-8">
-  <title>My JavaScript App</title>
+  <title>Back Trek</title>
   <meta name="viewport" content="width=device-width, initial-scale=1">
+
+  <!-- <link href="style.css" media="screen" rel="stylesheet" type="text/css"> -->
+
+  <script
+  src="https://code.jquery.com/jquery-3.2.1.js"
+  integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
+  crossorigin="anonymous">
+</script>
+
+<!-- <script type="text/javascript" src="trip.js"></script> -->
+
+<script src="https://cdn.jsdelivr.net/foundation/6.2.4/foundation.min.js"></script>
+
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/foundation/6.2.4/foundation.min.css">
+
 </head>
 <body>
   <header>
-
+    <div class="header">
+      <h1 class="header_word">Travel Trek<h1>
+        <button id="load" class="button">  See all trips </button>
+    </div>
   </header>
-  <main>
 
-  </main>
-  <footer>
+    <main>
+      <section>
+        <div id='trips'>
+          <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>
+        </div>
+      </section>
+    <!-- <div id="fail"></div> -->
+      <div id="trip">
+        <!-- <p><strong><%- name %></strong></p>
+        <p>Continent: <%- continent %></p>
+        <p>Category: <%- category %></p>
+        <p>Weeks: <%- weeks %></p>
+        <p>Cost: <%- cost %></p>
+      </script> -->
+      </div>
+    </main>
+    <footer>
+      <!-- &copy; Sairagul Abdukhalieva , 2017 -->
+    </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><strong><%- name %></strong></p>
+      <p>Continent: <%- continent %></p>
+      <p>Category: <%- category %></p>
+      <p>Weeks: <%- weeks %></p>
+      <p>Cost: <%- cost %></p>
+    </script> -->
 
-  </footer>
-  <script src="app.bundle.js" type="text/javascript"></script>
-</body>
-</html>
+    <script src="app.bundle.js" type="text/javascript"></script>
+  </body>
+  </html>
diff --git a/src/app.js b/src/app.js
@@ -6,8 +6,56 @@ import _ from 'underscore';
 import './css/foundation.css';
 import './css/style.css';
 
+// Our components
+// import Trip from './app/models/trip';
+import TripList from './app/collections/trip_list';
 console.log('it loaded!');
 
-$(document).ready( () => {
-  $('main').html('<h1>Hello World!</h1>');
-});
+// const TRIP_FIELDS = ['id', 'name', 'continent', 'category', 'weeks', 'cost'];
+const tripList = new TripList();
+// const trip = new Trip();
+
+let tripsTemplate;
+
+const render = function render(tripList){
+  const tripsTableElement = $('#trip-list');
+  $('thead').hide();
+
+  tripsTableElement.html('');
+
+
+  tripList.forEach((trip) => {
+    const generatedHTML = $(tripsTemplate(trip.attributes));
+    generatedHTML.on('click',(event) => {
+      renderTrip(trip)
+      $('#trips').hide();
+      $('#trip').show();
+    }); //.on
+    tripsTableElement.append(generatedHTML);
+  }); //tripList
+};  // render
+  const renderTrip = function render(trip){
+    const tripTableElement = $('#trip');
+    tripTableElement.html('');
+
+    const generatedHTML = $(tripsTemplate(trip.attributes));
+    tripTableElement.html(generatedHTML);
+  }
+
+  // const loadtrip = function loadtrip(){
+  //   trip.fetch();
+  //   trip.on('update', renderTrip, trip);
+  // }
+
+
+  $(document).ready(() => {
+    tripsTemplate = _.template($('#trips-template').html());
+    $('#trip-list').hide();
+    $('#load').on('click', function(){
+      $('#trip-list').show();
+    });
+    tripList.fetch();
+    tripList.on('update',render);
+
+
+  });
diff --git a/src/app/collections/trip_list.js b/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;
diff --git a/src/app/models/trip.js b/src/app/models/trip.js
@@ -0,0 +1,27 @@
+import Backbone from 'backbone';
+
+const Trip = Backbone.Model.extend({
+  defaults: {
+    name: 'Unknown'
+  },
+//urlRoot(){
+//return `https://ada-backtrek-api.herokuapp.com/trips/${this.get('tripID')}/reservations`
+//}
+  // validate(attributes) {
+  //   const errors = {};
+  //   if (!attributes.name) {
+  //     errors.name = ['cannot be blank'];
+  //   }
+  //
+  //   if (!attributes.email) {
+  //     errors.email = ['cannot be blank'];
+  //   }
+  //
+  //   if (Object.keys(errors).length < 1) {
+  //     return false;
+  //   }
+  //   return errors;
+  // },
+});
+
+export default Trip;
diff --git a/src/css/style.css b/src/css/style.css
@@ -1,2 +1,95 @@
 
 /* Your styles go here! */
+.header{
+   text-align: center;
+   padding-bottom: 2%;
+   background-image: url("http://2.bp.blogspot.com/-cIFih6LY4x8/U2i6PX7HYTI/AAAAAAAAFyk/oGQO3pXUlTc/s1600/Twitter-Header-1500x500-Size-18.jpg");
+ }
+
+ .header_word{
+   padding-top: 5%;
+   color: #FF5733;
+   font-weight: 700;
+   font-family: fantasy;
+   font-style: italic;
+ }
+ #load{
+    text-align: center;
+    border: 1px black solid;
+    border-radius: .2em ;
+    background-color: lightblue;
+    color: black;
+    margin-top: 2%;
+  }
+
+  #load:hover, input.button:hover{
+    background-color: lightsteelblue;
+  }
+
+  /*********BODY************/
+
+
+#trips{
+  background-color: AZURE;
+  color: navy;
+  font-family: sans-serif;
+  font-size: 10pt;
+  padding-left: 5%;
+  padding-top: 5%;
+}
+/*#trips table{
+  display: none;
+}*/
+
+tr th{
+  padding-right: 22%;
+  padding-bottom: 2%;
+}
+
+tr td{
+  padding-bottom: 1%;
+}
+
+tr:hover.selected td,
+tr:hover td {
+  background-color: #FFEFC6;
+  cursor: pointer;
+}
+
+
+#trip{
+  border-radius: .5em;
+  background-color: AZURE;
+  color: #FF5733;
+}
+
+.reserve, .tripname{
+  text-align: center;
+}
+
+.button a, input.button{
+  text-align: center;
+  border: 1px black solid;
+  border-radius: .2em ;
+  background-color: lightblue;
+  color: black;
+  margin-top: 2%;
+}
+p{
+  color: maroon;
+}
+b{
+  color: navy;
+}
+strong{
+  color: green; /* Success message */
+}
+/*footer{
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  padding: 1rem;
+  background-color: #efefef;
+  text-align: center;
+}*/