{% extends "layout.html" %}
{% block content %}
    <script type="text/javascript" charset="utf-8">
            $(document).ready(function() {
                var oTable = $('#table-design').dataTable( {
                    "bProcessing": true,
                    "sAjaxDataProp": "data",
                    "sAjaxSource": "/backups.json",
                    "iDisplayLength": 25,
                    "aLengthMenu": [[25, 50, 100, 200, 500, -1], [25, 50, 100, 200, 500, "All"]],
                    "aaSorting": [[ 0, "desc" ]],
                    "aoColumnDefs": [
                        {
                              "aTargets": [ 4 ],
                              "mData": "backup_duration",
                              "mRender": function ( data, type, full ) {
                                 return secondsToHms(data * 3600);
                              }
                        },
                        {
                              "aTargets": [ 0 ],
                              "mData": "backup_start",
                              "mRender": function ( data, type, full ) {
                                var d = new Date(data);    
                                return d.getFullYear()+"/"+(d.getMonth()+1)+"/"+d.getDate()+" "+d.toLocaleTimeString();
                              }
                        },
                        {
                              "aTargets": [ 1 ],
                              "mData": "backup_start",
                              "mRender": function ( data, type, full ) {
                                var d = new Date(data);    
                                return d.getFullYear()+"/"+(d.getMonth()+1)+"/"+d.getDate()+" "+d.toLocaleTimeString();
                              }
                        }
                    ],
                    "aoColumns": [
                        { "mData":"backup_start"},
                        { "mData":"backup_end"  , "bVisible": false },
                        { "mData":"server_name" },
                        { "mData":"backup_name" },
                        { "mData":"backup_duration"},
                        { "mData":"status" },
                        { "mData":"written_bytes"  , "bVisible": false},
                        { "mData":"written_files_count"  , "bVisible": false},
                        { "mData":"total_files_count"  , "bVisible": false},
                        { "mData":"total_bytes" , "bVisible": false },
                        { "mData":"backup_location" , "bVisible": false },
                        { "mData":"description" , "bVisible": false },
                        { "mData":"log" , "bVisible": false },
                        { "mData":"TYPE" , "bVisible": false }
                    ]
                } );
            } );
            function fnShowHide( iCol )
            {
                /* Get the DataTables object again - this is not a recreation, just a get of the object */
                var oTable = $('#table-design').dataTable();
                 
                var bVis = oTable.fnSettings().aoColumns[iCol].bVisible;
                oTable.fnSetColumnVis( iCol, bVis ? false : true );
            }
            function secondsToHms(d) {
                d = Number(d);
                var h = Math.floor(d / 3600);
                var m = Math.floor(d % 3600 / 60);
                var s = Math.floor(d % 3600 % 60);
                return ((h > 0 ? h + ":" : "0:") + (m > 0 ? (m < 10 ? "0" : "") + m + ":" : "00:") + (s < 10 ? "0" : "") + s);
            }
        </script>
            <table style='text-align: center;' cellpadding="0" cellspacing="0" border="0" class="display" id="table-design">
    <thead style='text-align: center;'>
        <tr>
            <th>Backup start</th>
            <th>Backup end</th>
            <th>Server name</th>
            <th>Backup name</th>
            <th>Backup duration</th>
            <th>Status</th>
            <th>Written bytes</th>
            <th>Written files count</th>
            <th>Total files count</th>
            <th>Total bytes </th>
            <th>Backup location</th>
            <th>Description</th>
            <th>Log</th>
            <th>Type</th>
        </tr>
    </thead>
    <tbody>
        
    </tbody>
</table>
<br />
 <p>
    Backup start<input type="checkbox" onclick="fnShowHide( 0 );"/>
    Backup end<input type="checkbox" onclick="fnShowHide( 1 );"/>
    Server name<input type="checkbox" onclick="fnShowHide( 2 );"/>
    Backup name<input type="checkbox" onclick="fnShowHide( 3 );"/>
    Backup duration<input type="checkbox" onclick="fnShowHide( 4 );"/>
    Status<input type="checkbox" onclick="fnShowHide( 5 );"/>
    <br />
    Written bytes<input type="checkbox" onclick="fnShowHide( 6 );"/>
    Written files count<input type="checkbox" onclick="fnShowHide( 7 );"/>
    Total files count<input type="checkbox" onclick="fnShowHide( 8 );"/>
    Total bytes <input type="checkbox" onclick="fnShowHide( 9 );"/>
    <br />
    Backup location<input type="checkbox" onclick="fnShowHide( 10 );"/>
    Description<input type="checkbox" onclick="fnShowHide( 11 );"/>
    Log<input type="checkbox" onclick="fnShowHide( 12 );"/>
    Type<input type="checkbox" onclick="fnShowHide( 13 );"/>
</p>
<script>
$('input:checkbox').attr('checked', false);
$('input:checkbox:eq(0)').attr('checked', true);
$('input:checkbox:eq(2)').attr('checked', true);
$('input:checkbox:eq(3)').attr('checked', true);
$('input:checkbox:eq(4)').attr('checked', true);
$('input:checkbox:eq(5)').attr('checked', true);
</script>
{% endblock %}