Now shows read in website, and can be toggled by clicking, two extra options in sidebar (read/unread books)

cps/templates/detail.html

@@ -100,6 +100,18 @@
         </div>
         </p>
       {% endif %}  
+      <p>
+        <div class="custom_columns" id="have_read">
+          Read
+          {% if have_read %}
+            <span class="glyphicon glyphicon-ok"></span>
+          {% else %}
+            <span class="glyphicon glyphicon-remove"></span>
+          {% endif %}
+          <form id="have_read_form" action="{{ url_for('toggle_read', id=entry.id)}}" method="POST") >
+          </form>
+        </div>
+      </p>
         
 
       {% if entry.comments|length > 0 and entry.comments[0].text|length > 0%}
@@ -201,3 +213,34 @@
 </div>
 {% endblock %}
 
+{% block js %}
+<script src="http://malsup.github.com/jquery.form.js"></script>
+<script>
+  $( document ).ready(function() {
+    var haveReadForm = $('#have_read_form');
+    haveReadForm.ajaxForm();
+  });
+  $("#have_read").attr('unselectable','on')
+     .css({'-moz-user-select':'-moz-none',
+           '-moz-user-select':'none',
+           '-o-user-select':'none',
+           '-khtml-user-select':'none', /* you could also put this in a class */
+           '-webkit-user-select':'none',/* and add the CSS class here instead */
+           '-ms-user-select':'none',
+           'user-select':'none'
+     }).bind('selectstart', function(){ return false; });
+  $("#have_read").click(function() {
+    var haveReadForm = $('#have_read_form');
+    if ($("#have_read").find('span').hasClass('glyphicon-ok')) {
+      $("#have_read").find('span').removeClass('glyphicon-ok');
+      $("#have_read").find('span').addClass('glyphicon-remove');
+    } else {
+      $("#have_read").find('span').removeClass('glyphicon-remove');
+      $("#have_read").find('span').addClass('glyphicon-ok');
+    }
+    haveReadForm.submit()
+  });
+</script>
+{% endblock %}
+
+

cps/templates/layout.html

@@ -128,6 +128,10 @@
               {% if g.user.show_best_rated_books() %}
               <li><a href="{{url_for('best_rated_books')}}"><span class="glyphicon glyphicon-star"></span> {{_('Best rated Books')}}</a></li>
               {%endif%}
+              {% if g.user.show_read_and_unread() %}
+              <li><a href="{{url_for('read_books')}}"><span class="glyphicon glyphicon-eye-open"></span> {{_('Read Books')}}</a></li>
+              <li><a href="{{url_for('unread_books')}}"><span class="glyphicon glyphicon-eye-close"></span> {{_('Unread Books')}}</a></li>
+              {%endif%}
               {% if g.user.show_random_books() %}
               <li id="nav_rand"><a href="{{url_for('discover')}}"><span class="glyphicon glyphicon-random"></span> {{_('Discover')}}</a></li>
               {%endif%}

cps/templates/user_edit.html

@@ -68,6 +68,10 @@
         <input type="checkbox" name="show_author" id="show_author" {% if content.show_author() %}checked{% endif %}>
         <label for="show_author">{{_('Show author selection')}}</label>
     </div>
+    <div class="form-group">
+        <input type="checkbox" name="show_read_and_unread" id="show_read_and_unread" {% if content.show_read_and_unread() %}checked{% endif %}>
+        <label for="show_read_and_unread">{{_('Show read and unread')}}</label>
+    </div>
     <div class="form-group">
         <input type="checkbox" name="show_detail_random" id="show_detail_random" {% if content.show_detail_random() %}checked{% endif %}>
         <label for="show_detail_random">{{_('Show random books in detail view')}}</label>