{% extends "layout.html" %}

{% block javascript %}
    <script type="text/javascript" src="/js/jquery-2.1.0.min.js"></script>
{% endblock %}

{% block content %}
    
    
    <div id="running-downloads-info" style="height:4em;" >
        <div class="left" style="width:100%;">Current: <span id="current-speed-value">0.00 Bytes</span>/s
        
            <a style="top:0; margin-left:10px; float:right;" href="{{ url('stop-running-downloads') }}">Stop<br>Downloads</a>
        </div>
        
    </div>
   
    <div id="running-downloads" style="width:100%;">
        
        <table data-template="running-download" style="display: none;">
            <tbody>
                <tr>
                    <td colspan="2" class="filename"></td>
                </tr>
                <tr>
                    <td>ID</td>
                    <td class="id"></td>
                </tr>
                <tr>
                    <td>Artist</td>
                    <td class="artist"></td>
                   
                </tr>
                <tr>
                    <td>Album</td>
                     <td class="album"></td>
                    
                </tr>
                <tr>
                    <td>Speed</td>
                    <td class="speed"></td>
                    
                </tr>
                <tr>
                    <td>Size</td>
                    <td class="size"></td>
                    
                </tr>
                <tr>
                    <td>Time</td>
                    <td class="time"></td>
                    
                </tr>
                <tr>    
                    <td>Status</td>
                    <td class="status"></td>
                    
                </tr>
                <tr>    
                    <td>Progress</td>
                    <td class="progress">
                        <div class="wrapper" style="position:relative; width: 100%; height: 100%;">
                            <div class="progressbar" style=""></div>
                            <div class="progress-value"></div>
                            <div class="error" style="display: none; width: 100%;"><a id="restart" href="">Restart</a><a id="remove" href="">Remove</a></div>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
        
        {% for download in runningDownloads %}
        <table data-type="running-download" data-download-id="{{ download.id }}" data-error="{% if download.status == 'error' %}true{% endif %}">
            <tbody>
                <tr>
                    <td colspan="2" class="filename">{{ download.filename }}</td>
                </tr>
                <tr>
                    <td>ID</td>
                    <td class="id">{{ (loop.index0 + 1) }}</td>
                </tr>
                <tr>
                    <td>Artist</td>
                    <td class="artist">{{ download.artist }}</td>
                   
                </tr>
                <tr>
                    <td>Album</td>
                     <td class="album">{{ download.album }}</td>
                    
                </tr>
                <tr>
                    <td>Speed</td>
                    <td class="speed">{% if download.speed > 0 %}{{ download.speed|bfos_format_bytes }}/s{% endif %}</td>
                    
                </tr>
                <tr>
                    <td>Size</td>
                    <td class="size">{{ download.size|bfos_format_bytes }}</td>
                    
                </tr>
                <tr>
                    <td>Time</td>
                    <td class="time">{% if download.time > 0 %}{{ download.time }}s{% endif %}</td>
                    
                </tr>
                <tr>    
                    <td>Status</td>
                    <td class="status">{{ download.status }}</td>
                    
                </tr>
                <tr>    
                    <td>Progress</td>
                    <td class="progress">
                        <div class="wrapper" style="position:relative; width: 100%; height: 100%;">
                            <div class="progressbar" style="width:{{ download.progress|number_format(0, '.', ',') }}%;"></div>
                            <div class="progress-value">{{ download.progress|number_format(0, '.', ',') }} %</div>
                            <div class="error" style="{% if download.status != 'error' %}display: none;{% endif %} width: 100%;"><a id="restart" href="{{ url('running-downloads-restart', {downloadId: download.id}) }}">Restart</a><a id="remove" href="{{ url('running-downloads-remove', {downloadId: download.id}) }}">Remove</a></div>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
        {% endfor %}
        
    </div>
    <script>
        
        // file size format function
        function fileSizeSI(a,b,c,d,e){return (b=Math,c=b.log,d=1e3,e=c(a)/c(d)|0,a/b.pow(d,e)).toFixed(2)+' '+(e?'kMGTPEZY'[--e]+'B':'Bytes')};
        
        // On document ready callback
        $(document).ready(function () {
            
            // define refresh period
            var refreshPeriodMs = 5000;
            
            /*
             * Refresh download progress every n seconds
             */ 
            
            // use a worker function
            (function worker() {
                $.ajax({
                  url: '/running-downloads', 
                  
                  success: function(data) {
                    
                    /*
                     * Refresh running download screen
                     */
                    
                    // remember synced running downloads
                    var syncedDownloads = [];
                    
                    
                    // iterate each known download and sync with retrieved list
                    $("[data-type='running-download']").each(function(index, node) {
                        
                        // 
                        var runningDownloadId = $(node).attr('data-download-id');
                        
                        // skip error
                        if($(node).attr('data-error') === 'true') {
                            
                            // remember this download as synced and continue
                            syncedDownloads.push(runningDownloadId);
                            
                            return;
                        }

        
                        // 
                        var synced = false;
                        
                        // find from retrieved data
                        // @NOTICE: I know, this is not efficient, but integrates better with retrieved datastructure
                        $.each(data, function(index, download) {
                            
                            // 
                            if(download.id === runningDownloadId) {
                                
                                // .. and sync
                                
                                // Check if error occured
                                if(download.status !== 'error') {
                                                                        
                                    // change speed
                                    $(node).find('.speed').text(fileSizeSI(download.speed) + '/s');

                                    // change time
                                    if(download.time > 0) {
                                        $(node).find('.time').text(download.time +'s');
                                    }

                                    // Set retrieved progress
                                    $(node).find('.progressbar').css('width', download.progress + '%');

                                    // @NOTICE: parse float to integer value
                                    $(node).find('.progress-value').text(parseInt(download.progress) + ' %');
                                    
                                } else {
                                
                                    // remove speed
                                    $(node).find('.speed').text('');

                                    // remove time
                                    $(node).find('.time').text('');
                                    
                                    // change status
                                    $(node).find('.status').text(download.status);
                                    
                                    // change error type
                                    $(node).attr('error-type', 'true');                                    
                                    
                                    // change error links
                                    $(node).find('#restart').attr('href', '/running-downloads-restart/'. runningDownloadId);
                                    $(node).find('#remove').attr('href', '/running-downloads-remove/'. runningDownloadId);
                                    $(node).find('.error').show();
                                }   
                                
                                // remember synced running download
                                syncedDownloads.push(runningDownloadId);
                                
                                //
                                synced = true;
                            }
                        });
                        
                        
                                                
                        // ..or remove
                        if(!synced) {
                            
                            // remove running download
                            $(node).remove();
                        }
                    });
                    
                    
                    // initialize current speed
                    var currentSpeed = 0;
                    
                    // add new running download if retrieved
                    $.each(data, function(index, download) {
                        
                        // Sum up current speed
                        currentSpeed = currentSpeed + parseInt(download.speed);                
                        
                        // check if this download is not already in the table
                        if($.inArray(download.id, syncedDownloads) === -1) {
                            
                            // copy template row and append
                            var newRunningDownload = $("[data-template=running-download]").clone()
                                    .attr('data-download-id', download.id)
                                    .attr('data-type', 'running-download')
                                    .attr('data-error', '')
                                    .removeAttr('data-template')
                                    .appendTo('#running-downloads');
                            
                            // fill table cells
                            newRunningDownload.find('.id').text(index + 1);
                            newRunningDownload.find('.filename').text(download.filename);
                            newRunningDownload.find('.artist').text(download.artist);
                            newRunningDownload.find('.album').text(download.album);
                            newRunningDownload.find('.speed').text(fileSizeSI(download.speed) + '/s');
                            newRunningDownload.find('.size').text(fileSizeSI(download.size));
                            
                            if(download.time > 0) {
                                newRunningDownload.find('.time').text(download.time + 's');
                            }
                            
                            newRunningDownload.find('.status').text(download.status);
                            
                            // set progress
                            newRunningDownload.find('.progressbar').css('width', download.progress);
                            newRunningDownload.find('.progress-value').text(parseInt(download.progress) + ' %');
                            
                            
                            // do special procedure with error downloads
                            if(download.status === 'error') {
                                
                                // Remove speed and time                                
                                newRunningDownload.find('.speed').text('');
                                newRunningDownload.find('.time').text('');
                                newRunningDownload.find('.status').text(download.status);
                                
                                // Set restart and remove links
                                newRunningDownload.find('#restart').attr('href', '/running-downloads-restart/'. download.id);
                                newRunningDownload.find('#remove').attr('href', '/running-downloads-remove/'. download.id);
                                
                                // show error links
                                newRunningDownload.find('.error').show();
                                
                                // change error state to true
                                newRunningDownload.attr('data-error', "true");
                            } 
                            
                            // display new running download
                            newRunningDownload.css('display', 'table');
                        }
                    });
                    
                    // change current Speed
                    $('#current-speed-value').text(fileSizeSI(currentSpeed));                    
                    
                  },
                  complete: function() {
                    // Schedule the next request when the current one's complete
                    setTimeout(worker, refreshPeriodMs);
                  }
                });
              })();
        });
    </script>
{% endblock %}