added bootstrap

jackfranklin · Aug 12, 2012 · 4b680b9 · 4b680b9
1 parent 0be80c9
commit 4b680b9
Show file tree

Hide file tree

Showing 179 changed files with 62,023 additions and 112 deletions.
diff --git a/ajax.gif b/ajax.gif
diff --git a/app.js b/app.js
@@ -1,6 +1,12 @@
 
 require(['backbone'], function (Backbone) {
   window.currentBook = null;
+  function showProcess() {
+    $(".alert-info").fadeIn();
+  }
+  function hideProcess() {
+    $(".alert-info").fadeOut();
+  }
 
   var Book = Backbone.Model.extend({
     defaults: { borrower: null },
@@ -30,6 +36,7 @@ require(['backbone'], function (Backbone) {
     el: "#detailed_view",
     template: $("#detailed_single_book_template").html(),
     render: function() {
+      this.$el.html("");
       var templ = _.template(this.template);
       this.$el.html(templ(this.model.toJSON()));
     }
@@ -46,11 +53,13 @@ require(['backbone'], function (Backbone) {
     render: function() {
       var self = this;
       self.$el.html("");
+      showProcess();
       bookShelf.fetch({
         success: function() {
           self.collection.each(function(item) {
             this.renderItem(item);
           }, self);
+          hideProcess();
         }
       });
     },
@@ -69,48 +78,35 @@ require(['backbone'], function (Backbone) {
       this.shelf = new ShelfView();
     },
     events: {
-      "click #addBookButton":"showAddBook",
-      "click #viewBooksButton":"showViewBooks",
-      "submit #checkout_book_form":"checkOutBook",
-      "click .checkOutBookButton": "showCheckOutBook",
+      "click .checkOutBookButton": "checkOutBook",
       "submit #add_book form": "addBook",
       "click .checkInBookButton": "checkInBook",
       "click .viewIndividualButton": "viewDetailedBook"
     },
-    showAddBook:function(){
-      $(".page").hide();
-      $("#add_book").show();
-      return false;
-    },
-    showViewBooks:function() {
-      $(".page").hide();
-      $("#all_books").show();
-      return false;
-    },
     showCheckOutBook: function(d) {
       var elem = $(d.target);
       var bookId = elem.attr("href").split("#")[1]
       window.currentBook = bookId;
-      $(".page").hide();
-      $("#checkout_book").show();
       return false;
     },
     checkOutBook: function(event) {
       var self = this;
+      var elem = $(event.target);
+      var bookId = elem.attr("href").split("#")[1]
+      window.currentBook = bookId;
       event.preventDefault();
-      var formData = $("#checkout_book_form").serialize();
-      console.log(formData);
+      var borrower = prompt("Please enter your name: ");
 
+      showProcess();
       $.ajax({
         url: "http://rkyve.herokuapp.com/books/" + window.currentBook + ".json",
         dataType: 'json',
         contentType: 'application/json',
         type: "PUT",
         success: function(d) {
           self.shelf.render();
-          $("viewBooksButton").trigger("click");
         },
-        data: JSON.stringify({ id: window.currentBook, borrower: formData.split("=")[1] })
+        data: JSON.stringify({ id: window.currentBook, borrower: borrower })
       });
       //var book = new Book({
         //id: window.currentBook,
@@ -125,21 +121,24 @@ require(['backbone'], function (Backbone) {
       var formData = {
         title: $("#bookTitle").val(),
         owner: $("#bookOwner").val(),
-        location: $("#bookLocation").val()
+        location: $("#bookLocation").val(),
+        author: $("#bookAuthor").val()
       };
+      console.log(formData);
+      showProcess();
       $.ajax({
         url: "http://rkyve.herokuapp.com/books.json",
         dataType: 'json',
         contentType: 'application/json',
         type: "POST",
         success: function(d) {
+          console.log("SUCCESS", d);
           self.shelf.render();
-          $("#viewBooksButton").trigger("click");
         },
         error: function(d) {
           //TODO: show a flash message or something?
+          console.log("ERROR", d);
           self.shelf.render();
-          $("#viewBooksButton").trigger("click");
         },
         data: JSON.stringify(formData)
       });
@@ -150,21 +149,19 @@ require(['backbone'], function (Backbone) {
       var elem = $(event.target);
       var bookId = elem.attr("href").split("#")[1]
       window.currentBook = bookId;
+      showProcess();
       $.ajax({
         url: "http://rkyve.herokuapp.com/books/" + window.currentBook + ".json",
         dataType: 'json',
         contentType: 'application/json',
         type: "PUT",
         success: function(d) {
           self.shelf.render();
-          $("viewBooksButton").trigger("click");
         },
         data: JSON.stringify({ id: window.currentBook, borrower: null })
       });
     },
     viewDetailedBook: function(event) {
-      $(".page").hide();
-      $("#detailed_view").show();
       event.preventDefault();
       var elem = $(event.target);
       var bookId = elem.attr("href").split("#")[1]

diff --git a/index.html b/index.html
@@ -5,52 +5,66 @@
     <title>RKyve</title>
     <script src="jam/require.js" type="text/javascript" charset="utf-8"></script>
     <script src="app.js" type="text/javascript" charset="utf-8"></script>
+    <link rel="stylesheet" href="/jam/bootstrap/css/bootstrap.css" type="text/css" />
+    <link rel="stylesheet" href="/jam/bootstrap/css/bootstrap-responsive.min.css" type="text/css" />
     <link rel="stylesheet" type="text/css" href="style.css" />
   </head>
   <body>
-    <ul id="nav">
-      <li><a href="#" id="viewBooksButton">View all Books</a></li>
-      <li><a href="#" id="addBookButton">Add Book</a></li>
-    </ul>
-    <div id="all_books" class="page">
-      <table>
-        <thead><th>ID</th><th>Title</th><th>Owner</th><th>Location</th><th>Borrower</th><th>Action</th><th>View</th></thead>
-        <tbody></tbody>
-      </table>
-    </div>
-    <div id="add_book" class="page">
-      <form>
-        <div>
-          <label for="bookTitle">Title</label>
-          <input type="text" id="bookTitle" />
-        </div>
-        <div>
-          <label for="bookOwner">Owner</label>
-          <input type="text" id="bookOwner" />
-        </div>
-        <div>
-          <label for="bookLocation">Location</label>
-          <input type="text" id="bookLocation" />
-        </div>
-        <input type="submit" />
-      </form>
-    </div>
 
-    <div id="checkout_book" class="page">
-      <form id="checkout_book_form">
-        <div>
-          <label>Your Name: </label>
-          <input type="text" name="borrower" id="borrower" />
+    <div class="navbar navbar-fixed-top">
+      <div class="navbar-inner">
+        <div class="container">
+          <a class="brand">RKyve</a>
         </div>
-        <input type="submit" value="Check Out!" />
-      </form>
+      </div>
+    </div><!-- end nav bar -->
+    <div class="container-fluid">
+      <div class="alert alert-info">Processing...</div>
+    </div>
+    <div class="container-fluid">
+      <div id="all_books" class="page row">
+        <span class="span12">
+          <table class="table-bordered table-striped table">
+            <thead><th>ID</th><th>Title</th><th>Owner</th><th>Location</th><th>Borrower</th><th>Action</th></thead>
+            <tbody></tbody>
+          </table>
+        </span>
+      </div><!--end all books -->
+      <hr />
+      <div class="row">
+        <span class="span4">
+          <h3>Add a Book</h3>
+          <div id="add_book" class="page">
+            <form>
+              <div>
+                <label for="bookTitle">Title</label>
+                <input type="text" id="bookTitle" />
+              </div>
+              <div>
+                <label for="bookOwner">Owner</label>
+                <input type="text" id="bookOwner" />
+              </div>
+              <div>
+                <label for="bookLocation">Location</label>
+                <input type="text" id="bookLocation" />
+              </div>
+              <div>
+                <label for="bookAuthor">Author</label>
+                <input type="text" id="bookAuthor" />
+              </div>
+              <input type="submit" />
+            </form>
+          </div>
+        </span>
+        <span class="span8">
+          <h3>Detailed View</h3>
+          <div id="detailed_view" class="page">Select a book from above to view in more detail here</div>
+        </span>
+      </div><!-- end row -->
     </div>
-
-    <div id="detailed_view" class="page"></div>
-
     <script id="single_book_template" type="text/template">
         <td><%= id %></td>
-        <td><%= title %></td>
+        <td><a href="#<%=id %>" class="viewIndividualButton"><%= title %></a></td>
         <td><%= owner %></td>
         <td><%= location %></td>
         <td>
@@ -65,7 +79,6 @@
           ::
           <a href="#<%= id %>" class="checkInBookButton">Check In</a>
         </td>
-        <td><a href="#<%= id %>" class="viewIndividualButton">Detail View</a></td>
     </script>
 
     <script id="detailed_single_book_template" type="text/template">

diff --git a/jam/bootstrap/.jamignore b/jam/bootstrap/.jamignore
@@ -0,0 +1,36 @@
+# Numerous always-ignore extensions
+*.diff
+*.err
+*.orig
+*.log
+*.rej
+*.swo
+*.swp
+*.zip
+*.vi
+*~
+*.sass-cache
+
+# OS or Editor folders
+.DS_Store
+._*
+Thumbs.db
+.cache
+.project
+.settings
+.tmproj
+*.esproj
+nbproject
+*.sublime-project
+*.sublime-workspace
+
+# Komodo
+*.komodoproject
+.komodotools
+
+# Folders to ignore
+.hg
+.svn
+.CVS
+.idea
+node_modules
diff --git a/jam/bootstrap/.travis.yml b/jam/bootstrap/.travis.yml
@@ -0,0 +1,3 @@
+language: node_js
+node_js:
+  - 0.6