made major changes to interface.

can now mark comics as read!
also added a recently added section.

comic/templates/base.html

@@ -72,7 +72,7 @@
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
     <script src="/static/js/bootstrap.min.js"></script>
     <script src="/static/js/jasny-bootstrap.min.js"></script>
-    <script src="/static/js/jQuery-2.2.2.min.js"></script>
+    <script src="/static/js/jquery-2.2.2.min.js"></script>
     <script src="/static/js/js.cookie.js"></script>
     <script type="text/javascript" src="https://cdn.datatables.net/t/bs/dt-1.10.11,b-colvis-1.1.2,r-2.0.2/datatables.min.js"></script>
  {% block script %}

comic/templates/comic/comic_list.html

@@ -3,10 +3,19 @@
 
 {% block content %}
 <div class="container">
+    <form id="comic_form" method="post" action="/comic/edit/">
+        {% csrf_token %}
     <table class="table table-bordered table-striped table-hover" id="comic_list">
-        <caption><h2>Comics</h2></caption>
+        <caption><h2>Comics</h2> mark selected issues as:
+            <select name="func" id="func_selector">
+                <option value="choose">Choose...</option>
+                <option value="read">Read</option>
+                <option value="unread">Un-Read</option>
+            </select>
+        </caption>
         <thead>
         <tr>
+            <th id="select-all"><input type="checkbox" id="select-all-cb"></th>
             <th><center><span class="glyphicon glyphicon-file"></span></center></th>
             <th width="100%">File/Folder</th>
             <th>Status</th>
@@ -20,30 +29,17 @@
         </tr>
         </tbody>
     </table>
-<!--/.nav-collapse
-    <h2 class="center">Comics</h2>
-    <div class="list-group">
-    {% if file_list %}
-        {% for file in file_list %}
-            {% if file.isdir %}
-                <a href="/comic/{{ file.location }}/" class="glyphicon {{ file.icon }} list-group-item"> {{ file }}{{ file.label | safe }}</a>
-            {% endif %}
-            {% if file.iscb %}
-                <a href="/comic/read/{{ file.location }}/{{ file.cur_page }}/" class="glyphicon {{ file.icon }} list-group-item"> {{ file }}{{ file.label | safe }}</a>
-            {% endif %}
-        {% endfor %}
-    {% else %}
-        <p class="list-group-item">No comics.</p>
-    {% endif %}
-    </div>-->
+    </form>
 </div>
+
 {% endblock %}
 
 {% block script %}
 <script>
 $(document).ready(function() {
-    $('#comic_list').DataTable({
+    var table = $('#comic_list').DataTable({
         "processing": true,
+        "stateSave": true,
         "ajax": {
             "type": "POST",
             "url": "{{ json_url }}",
@@ -52,25 +48,68 @@ $(document).ready(function() {
             },
         },
         "rowCallback": function( row, data, index ) {
-            var r = $(row)
-            r.attr('data-href', data['url']);
-            r.attr('style', 'cursor: pointer;')
-            r.click(function() {
+            var r = $(row);
+            var cols = $('td:nth-child(n+2)', row);
+            cols.attr('data-href', data['url']);
+            cols.attr('style', 'cursor: pointer;')
+            cols.click(function() {
                 window.document.location = $(this).data("href");
             });
-
+            var tds = $('td:eq(0)', row);
+            if (data['type'] == 'directory'){
+                tds.html('');
+            } else {
+                tds.html('<input type="checkbox" name="selected" value="'+data['selector']+'" data-type="'+data['type']+'"/>');
+                var cb = $('input', tds);
+                cb.change(function() {
+                    $(this).closest('tr').toggleClass('info')
+                });
+            };
+        },
+        "drawCallback": function( settings ) {
+            var tds = $('table tr td:first-child');
+            tds.click(function(event){
+                if (!$(event.target).is('input')) {
+                    var $cb = $('input', this)
+                    $cb.click();
+                };
+            });
         },
         "columns": [
+            { "data" : "blank", "orderable": false },
             { "data" : "icon", "orderable": false },
             { "data" : "name" },
             { "data" : "label" },
         ],
 
-        "order": [[ 1, 'asc' ]],
+        "order": [[ 2, 'asc' ]],
     });
     $(".clickable-row").click(function() {
         window.document.location = $(this).data("href");
     });
+    $('#func_selector').on('change', function() {
+        $.post('/comic/edit/', $('#comic_form').serialize())
+        .done(function(){
+            $('#func_selector').val('choose');
+            $('#select-all input').prop('checked', false);
+            table.ajax.reload();
+        }).fail(function(){
+            alert('Error Submitting Change');
+        })
+
+    });
+    $('#select-all').click(function(event){
+        var cb = $('input', this)
+        if (!$(event.target).is('input')) {
+            cb.click();
+        };
+        $('table tr td:first-child input').each(function(chkbx) {
+            row = $(this)
+            if (row.prop('checked') != cb.prop('checked')){
+                row.click();
+            }
+        });
+    });
 } );
 </script>
 {% endblock %}

comic/templates/comic/recent_comics.html

@@ -0,0 +1,123 @@
+{% extends "base.html" %}
+{% block title %}{{ title }}{% endblock %}
+
+{% block content %}
+<div class="container">
+    <form id="comic_form" method="post" action="/comic/edit/">
+        {% csrf_token %}
+        <table class="table table-bordered table-striped table-hover" id="comic_list">
+            <caption><h2>Recent Comics</h2>
+                mark selected issues as:
+                <select name="func" id="func_selector">
+                    <option value="choose">Choose...</option>
+                    <option value="read">Read</option>
+                    <option value="unread">Un-Read</option>
+                </select>
+            </caption>
+            <thead>
+            <tr>
+                <th id="select-all"><input type="checkbox" id="select-all-cb"></th>
+                <th>
+                    <center><span class="glyphicon glyphicon-file"></span></center>
+                </th>
+                <th width="100%">File/Folder</th>
+                <th>Date&nbsp;Added</th>
+                <th>Status</th>
+            </tr>
+            </thead>
+            <tbody>
+            <tr class="clickable-row" data-href="/comic/">
+                <td>
+                    <center><span class="glyphicon glyphicon-file"></span></center>
+                </td>
+                <td>loading data</td>
+                <td><span class="label label-primary pull-right">1/23</span></td>
+            </tr>
+            </tbody>
+        </table>
+    </form>
+</div>
+
+{% endblock %}
+
+{% block script %}
+<script>
+$(document).ready(function() {
+
+    var table = $('#comic_list').DataTable({
+        "processing": true,
+        "stateSave": true,
+        "serverSide": true,
+        "ajax": {
+            "type": "POST",
+            "url": "/comic/recent/json/",
+            "data": function ( d ) {
+                d.csrfmiddlewaretoken = Cookies.get('csrftoken');
+            },
+        },
+        "rowCallback": function( row, data, index ) {
+            var r = $(row);
+            var cols = $('td:nth-child(n+2)', row);
+            cols.attr('data-href', data['url']);
+            cols.attr('style', 'cursor: pointer;')
+            cols.click(function() {
+                window.document.location = $(this).data("href");
+            });
+            var tds = $('td:eq(0)', row);
+            tds.html('<input type="checkbox" name="selected" value="'+data['selector']+'" data-type="'+data['type']+'"/>');
+            var cb = $('input', tds);
+            cb.change(function() {
+                $(this).closest('tr').toggleClass('info')
+            });
+
+        },
+        "drawCallback": function( settings ) {
+            var tds = $('table tr td:first-child');
+            tds.click(function(event){
+                if (!$(event.target).is('input')) {
+                    var $cb = $('input', this)
+                    $cb.click();
+                };
+            });
+        },
+        "columns": [
+            { "data" : "selector", "orderable": false },
+            { "data" : "icon", "orderable": false },
+            { "data" : "name" },
+            { "data" : "date" },
+            { "data" : "label", "orderable": false },
+        ],
+
+        "order": [[ 3, 'asc' ]],
+    });
+    $(".clickable-row").click(function() {
+        window.document.location = $(this).data("href");
+    });
+    $('#func_selector').on('change', function() {
+        $.post('/comic/edit/', $('#comic_form').serialize())
+        .done(function(){
+            $('#func_selector').val('choose');
+            $('#select-all input').prop('checked', false);
+            table.ajax.reload();
+        }).fail(function(){
+            alert('Error Submitting Change');
+        })
+
+    });
+    $('#select-all').click(function(event){
+        var cb = $('input', this)
+        if (!$(event.target).is('input')) {
+            cb.click();
+        };
+        $('table tr td:first-child input').each(function(chkbx) {
+            row = $(this)
+            if (row.prop('checked') != cb.prop('checked')){
+                row.click();
+            }
+        });
+    });
+} );
+
+
+</script>
+{% endblock %}