<%@ Page Title="Full Event Log" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" %>
<%@ Register Assembly="AjaxUploader" Namespace="AjaxUploader.Controls" TagPrefix="au" %> 
<asp:Content ID="TitleContent" ContentPlaceHolderID="TitleContent" runat="server">Full Event Log - AjaxUploader v5.0 Demos</asp:Content>
<asp:Content ID="HeaderContent" ContentPlaceHolderID="HeaderTitle" runat="server">Full Event Log</asp:Content> 
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server"> 
<div class="demo-card"> <div class="demo-card-header">Full Event Log with Timestamps</div> <div class="demo-card-body"> <p class="demo-description"> A comprehensive event log that captures every upload event with precise timestamps,
 event type badges, and detailed data. Useful for debugging and understanding the upload lifecycle.
 </p> <au:AjaxFileUpload ID="Uploader1" runat="server"
 AllowMultiple="true"
 ShowProgress="true" /> <div class="mt-3 d-flex justify-content-between align-items-center"> <div> <span class="badge bg-info me-1">SELECT</span> <span class="badge bg-primary me-1">START</span> <span class="badge bg-secondary me-1">PROGRESS</span> <span class="badge bg-success me-1">COMPLETE</span> <span class="badge bg-danger me-1">ERROR</span> <span class="badge bg-warning text-dark me-1">QUEUE</span> </div> <div> <button type="button" class="btn btn-outline-secondary btn-sm" onclick="clearLog()">Clear</button> <button type="button" class="btn btn-outline-primary btn-sm" onclick="exportLog()">Export</button> </div> </div> <div id="eventLog" class="mt-2 p-2 border rounded font-monospace"
 style="max-height:280px;overflow-y:auto;font-size:.78rem;background:#f8f9fa;"></div> <div id="counter" class="mt-1 text-muted small">0 events logged</div> <div class="code-panel"> <pre><code>// Attach all event handlers to build a full log
var events = [];
var uploader = AjaxUploader.getInstance('Uploader1');
uploader.on('select', function(f) { addEvent('SELECT', f.length + ' files'); });
uploader.on('taskStart', function(t) { addEvent('START', t.fileName); });
uploader.on('taskProgress', function(t) { addEvent('PROGRESS', t.percent + '%'); });
uploader.on('taskComplete', function(t) { addEvent('COMPLETE', t.fileName); });
uploader.on('taskError', function(t,e) { addEvent('ERROR', e); });
uploader.on('queueRender', function(q) { addEvent('QUEUE', q.length + ' items'); });</code></pre> </div> </div>
</div> 
</asp:Content> 
<asp:Content ID="ScriptsContent" ContentPlaceHolderID="ScriptsContent" runat="server">
<script> var eventLog = document.getElementById('eventLog');
 var counter = document.getElementById('counter');
 var events = [];

 var badgeColors = {
 SELECT: 'bg-info', START: 'bg-primary', PROGRESS: 'bg-secondary',
 COMPLETE: 'bg-success', ERROR: 'bg-danger', QUEUE: 'bg-warning text-dark',
 DONE: 'bg-success'
 };

 function addEvent(type, detail) {
 var now = new Date();
 var ts = now.toLocaleTimeString() + '.' + String(now.getMilliseconds()).padStart(3, '0');
 events.push({ time: ts, type: type, detail: detail });
 var div = document.createElement('div');
 div.innerHTML = '<span class="text-muted">' + ts + '</span> ' +
 '<span class="badge ' + (badgeColors[type] || 'bg-secondary') + '" style="width:70px;display:inline-block;">' +
 type + '</span> ' + (detail || '');
 eventLog.appendChild(div);
 eventLog.scrollTop = eventLog.scrollHeight;
 counter.textContent = events.length + ' events logged';
 }

 function clearLog() {
 eventLog.innerHTML = '';
 events = [];
 counter.textContent = '0 events logged';
 }

 function exportLog() {
 var text = events.map(function(e) { return e.time + '\t' + e.type + '\t' + e.detail; }).join('\n');
 var blob = new Blob([text], { type: 'text/plain' });
 var a = document.createElement('a');
 a.href = URL.createObjectURL(blob);
 a.download = 'upload-events.txt';
 a.click();
 }

 var uploader = AjaxUploader.getInstance('Uploader1');
 if (uploader) {
 uploader.on('select', function(files) { addEvent('SELECT', files.length + ' file(s) selected'); });
 uploader.on('taskStart', function(task) { addEvent('START', task.fileName + ' (' + AjaxUploader.formatSize(task.total) + ')'); });
 uploader.on('taskProgress', function(task) { addEvent('PROGRESS', task.fileName + ' ' + Math.round(task.percent) + '%'); });
 uploader.on('taskComplete', function(task) { addEvent('COMPLETE', task.fileName); });
 uploader.on('taskError', function(task, err) { addEvent('ERROR', task.fileName + ': ' + err); });
 uploader.on('queueRender', function(queue) { addEvent('QUEUE', queue.length + ' item(s)'); });
 uploader.on('complete', function() { addEvent('DONE', 'All uploads finished'); });
 }
</script>
</asp:Content>
