<%@ Page Title="Queue Priority" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" %>
<%@ Register Assembly="AjaxUploader" Namespace="AjaxUploader.Controls" TagPrefix="au" %>

<asp:Content ID="TitleContent" ContentPlaceHolderID="TitleContent" runat="server">Queue Priority - AjaxUploader v5.0 Demos</asp:Content>
<asp:Content ID="HeaderContent" ContentPlaceHolderID="HeaderTitle" runat="server">Queue Priority</asp:Content>

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">

<div class="demo-card">
    <div class="demo-card-header">Priority Queue Ordering</div>
    <div class="demo-card-body">
        <p class="demo-description">
            Assign priority levels to files in the upload queue. Higher priority files are uploaded
            first regardless of when they were added.
        </p>

        <div id="uploader"></div>
        <div class="mt-2">
            <button type="button" class="btn btn-primary btn-sm" id="btnStart" disabled>Start Upload</button>
        </div>
        <div id="queueList" class="mt-3"></div>
        <div id="status" class="mt-2 text-muted small"></div>

        <div class="code-panel">
            <pre><code>var uploader = AjaxUploader.create('#uploader', {
    uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/upload") %>',
    multiple: true,
    autoUpload: false,
    concurrency: 1,
    onSelect: function(files) {
        files.forEach(function(f) {
            // Default priority: normal
            // Change with uploader.setTaskPriority(taskId, 'high');
        });
    }
});

// Priorities: 'high', 'normal', 'low'</code></pre>
        </div>
    </div>
</div>

</asp:Content>

<asp:Content ID="ScriptsContent" ContentPlaceHolderID="ScriptsContent" runat="server">
<script>
    var queueList = document.getElementById('queueList');
    var btnStart = document.getElementById('btnStart');
    var status = document.getElementById('status');
    var fileQueue = [];

    var uploader = AjaxUploader.create(document.getElementById('uploader'), {
        uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/upload") %>',
        multiple: true,
        autoUpload: false,
        concurrency: 1,
        onSelect: function(files) {
            files.forEach(function(f) {
                fileQueue.push({ id: f.id || fileQueue.length, name: f.name, size: f.size, priority: 'normal' });
            });
            btnStart.disabled = false;
            renderQueue();
        },
        onTaskComplete: function(task) {
            status.textContent = task.fileName + ' completed.';
        },
        onComplete: function() {
            status.textContent = 'All uploads complete.';
            btnStart.disabled = true;
        }
    });

    function renderQueue() {
        var sorted = fileQueue.slice().sort(function(a, b) {
            var order = { high: 0, normal: 1, low: 2 };
            return order[a.priority] - order[b.priority];
        });
        queueList.innerHTML = '';
        sorted.forEach(function(item, i) {
            var colors = { high: 'danger', normal: 'secondary', low: 'light text-dark' };
            var div = document.createElement('div');
            div.className = 'p-2 mb-1 border rounded d-flex justify-content-between align-items-center';
            div.innerHTML = '<span>' + (i + 1) + '. ' + item.name +
                ' <small class="text-muted">(' + AjaxUploader.formatSize(item.size) + ')</small></span>' +
                '<span class="d-flex gap-1">' +
                '<button type="button" class="btn btn-outline-danger btn-sm' + (item.priority === 'high' ? ' active' : '') +
                '" onclick="setPriority(' + item.id + ',\'high\')">High</button>' +
                '<button type="button" class="btn btn-outline-secondary btn-sm' + (item.priority === 'normal' ? ' active' : '') +
                '" onclick="setPriority(' + item.id + ',\'normal\')">Normal</button>' +
                '<button type="button" class="btn btn-outline-info btn-sm' + (item.priority === 'low' ? ' active' : '') +
                '" onclick="setPriority(' + item.id + ',\'low\')">Low</button></span>';
            queueList.appendChild(div);
        });
    }

    function setPriority(id, level) {
        fileQueue.forEach(function(f) { if (f.id === id) f.priority = level; });
        renderQueue();
    }

    btnStart.addEventListener('click', function() {
        uploader.startUpload();
        btnStart.disabled = true;
    });
</script>
</asp:Content>
