LazyLibrarian/data/interfaces/bookstrap/series.html

<%inherit file="base.html"/>
<%!
    import lazylibrarian
%>
<%def name="headerIncludes()">
    <div id="subhead_container" class="row">
      <form action="search" method="get">
        <div id="subhead_menu"  class="col-xs-12 col-md-8">
        %if authorid != None:
          <a href="authorPage?AuthorID=${authorid}" class="btn btn-sm btn-primary"><i class="fa fa-chevron-left"></i> Return to Author</a>
        %else:
          <label for="dummy" class="control-label"> </label>
        %endif
        </div>
        <div class="clearfix visible-xs"><hr/></div>
        %if perm&lazylibrarian.perm_search:
        <div class="col-xs-12 col-md-4">
        <div class="form-group">
          <label class="sr-only">Search</label>
          <div class="input-group">
            <input type="text" class="form-control deletable input-sm col-xs-12" value="" onfocus="if(this.value==this.defaultValue) this.value='';" name="name" placeholder="Title / Author / ISBN" id="searchbox" name="searchbox">
            <span class="input-group-btn">
              <button type="submit" value="Book" class="btn btn-sm btn-primary" data-toggle="tooltip" data-placement="bottom" title="Search for book"><i class="fa fa-search"></i></button>
            </span>
          </div>
        </div>
        </div>
        %endif
      </form>
    </div>
</%def>

<%def name="body()">
  <h1>${title}</h1>
  <form action="series" method="get" class="form-inline">
    <div class="form-group">
      <label for="whichStatus" class="control-label">Status:</label>
      <select name="whichStatus" id="whichStatus" class="form-control input-sm">
        %for item in ['All', 'Complete', 'Partial', 'Empty', 'Skipped', 'Wanted', 'Active', 'Ignored']:
        <option value="${item}"
            %if whichStatus == item:
                selected = "selected"
            %endif
        >${item}</option>
        %endfor
      </select>
    </div>
    %if lazylibrarian.CONFIG['TOGGLES'] == True:
    &nbsp;&nbsp;Toggle: <a class="toggle-vis" data-column="1">Author</a> - <a class="toggle-vis" data-column="2">Series</a> - <a class="toggle-vis" data-column="3">Have</a> - <a class="toggle-vis" data-column="4">Status</a>
    %endif
  </form>
  <br>
  <form action="markSeries" method="get" class="form-inline">
    <div class="table-responsive">
      <table class="display table table-striped table-hover table-bordered" id="book_table">
        <thead>
          <tr>
            %if perm&lazylibrarian.perm_status:
            <th class="select text-center no-sort"><input type="checkbox" onClick="toggleAll(this)" /></th>
            %else:
            <td class="hidden"></td>
            %endif
            <th class="authorname">Author</th>
            <th class="series">Series Name</th>
            <th class="number text-center">Have</th>
            <th class="status text-center">Status</th>
          </tr>
        </thead>
      </table>
    </div>
    %if perm&lazylibrarian.perm_status:
    <div class="form-group">
      <label for="markSeries" class="control-label">Change selected series to: </label>
      <select id="markSeries" class="markSeries form-control input-sm" name="action">
        %for item in ['Skipped', 'Wanted', 'Active', 'Ignored']:
        <option value="${item}">${item}</option>
        %endfor
        %if lazylibrarian.CONFIG['USER_ACCOUNTS']:
        <option value="Unread">Unread</option>
        <option value="Read">Read</option>
        <option value="ToRead">To Read</option>
        %endif
      </select>
    </div>
    <input type="submit" class="markSeries btn btn-sm btn-default" value="Go">
    %endif
  </form>
  <p>&nbsp;</p>
</%def>
<%def name="headIncludes()">
</%def>
<%def name="javascriptIncludes()">
  <script type="text/javascript">
    $(document).ready(function()
    {
        $('#whichStatus').change(function(){
            %if authorid != None:
               window.location = 'series?AuthorID=${authorid}&whichStatus=' + $(this).val()
            %else:
               window.location = 'series?whichStatus=' + $(this).val()
            %endif
        })

        var oTable = $('#book_table').DataTable(
            {
                "order": [[3, 'desc']],
                "bAutoWidth": false,
                "stateSave": true,
                "columnDefs":
                    [{ targets: 'no-sort', orderable: false },
                    { targets: [0],
                        'class': 'text-center',
                        'render': function(data, type, row) {
                            return '<input type="checkbox" name="' + data + '" class="checkbox" />';}
                    },
                    { targets: [1], 'render': function(data, type, row) {
                    %if perm&lazylibrarian.perm_authorbooks:
                        return '<a href=\'authorPage?AuthorID=' + row[4] + '\'">' + row[1] + '</a>';}
                    %else:
                        return row[1]
                    %endif
                    },
                    { targets: [2], 'render': function(data, type, row) {
                        return '<a href="seriesMembers?seriesid=' + row[5] + '" target="_new">' + row[2] + '</a>';}
                    },
                    { targets: [3], 'render': function(data, type, row) {
                        percent = row[8]
                        if (percent <= 25) {css = 'danger'}
                        else if (percent <= 50) {css = 'warning'}
                        else if (percent <= 75) {css = 'info'}
                        else {css = 'success'};
                        bar = '<div class="progress center-block" style="width: 150px;"><div class="progress-bar-' +
                        css + ' progress-bar progress-bar-striped" role="progressbar" aria-valuenow="' + percent +
                        '" aria-valuemin="0" aria-valuemax="100" style="width: ' + percent +
                        '%;"><span class="sr-only">' + percent +
                        '% Complete</span><span class="progressbar-front-text">' + row[6] + '/' + row[7] +
                        '</span></div></div>';
                        return bar;}
                    },
                    { targets: [4],
                        'class': 'text-center',
                        'render': function(data, type, row) {
                            return  row[3];}
                    }
                    ],
                "oLanguage": {
                    "sSearch": "Filter: ",
                    "sLengthMenu":"_MENU_ rows per page",
                    "sEmptyTable": "No series found",
                    "sInfo":"Showing _START_ to _END_ of _TOTAL_ rows",
                    "sInfoEmpty":"Showing 0 to 0 of 0 rows",
                    "sInfoFiltered":"(filtered from _MAX_ total rows)"},
                "sPaginationType": "full_numbers",
                "aaSorting": [[3, 'desc']],
                "bServerSide": true,
                "sAjaxSource": 'getSeries?whichStatus=${whichStatus}&AuthorID=${authorid}',
                "bFilter": true,
                "aLengthMenu": [[5, 10, 15, 25, 50, 100, -1], [5, 10, 15, 25, 50, 100, "All"]],
                "iDisplayLength": ${lazylibrarian.CONFIG['DISPLAYLENGTH']},
                "fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
                    %if perm&lazylibrarian.perm_status == 0:
                      $('td', nRow).eq(0).addClass("hidden");
                    %endif
                    // hide author,status on small devices
                    //$('td', nRow).eq(1).addClass('hidden-xs');
                    //$('td', nRow).eq(3).addClass('hidden-xs');
                    return nRow;
                },
            });
        $('.dataTables_filter input').attr("placeholder", "Results filter");
        //$(window).resize(function() {oTable.draw(false)});
        $('a.toggle-vis').click(function (e) {
            e.preventDefault();
            var column = oTable.column( $(this).attr('data-column') );
            column.visible( ! column.visible() );
        } );
    });
  </script>
</%def>