LotusGuild/tinker_tickets
4
0
Fork 0
Code Issues 46 Pull Requests Actions Packages Projects Releases Wiki Activity

Merge development into main: quick-win UX/perf batch (#76, #64, #99, #100)
Lint / PHP (phpcs PSR-12) (push) Successful in 37s
Details
Lint / JS (eslint) (push) Successful in 10s
Details
Lint / PHP requirements (version + extensions) (push) Successful in 35s
Details
Lint / Notify on failure (push) Skipped
Details
Security / PHP Security (semgrep) (push) Successful in 2m24s
Details
Lint / Deploy (push) Successful in 6s
Details

Browse Source 
- Consolidate dashboard clear-filters controls to one shared function (#76)
- Make SLA priority-alert banner update live on priority change (#64)
- Add HTTP Range/partial-content support to attachment downloads (#99)
- Paginate attachment listing (#100)
This commit is contained in:
jared
2026-09-08 21:18:14 -04:00
parent cef1689c05 e39b4f81ea
commit 23d94bfae7
6 changed files with 287 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files
api/download_attachment.php
+50 -3
View File
@@ -102,12 +102,50 @@ try {
// Sanitize filename for Content-Disposition
$safeFilename = preg_replace('/[^\w\s\-\.]/', '_', $attachment['original_filename']);
$fileSize = filesize($filePath);
// Parse a single-range "Range: bytes=start-end" request header (RFC 7233).
// Multi-range requests aren't supported; they fall through to a full 200 response.
$rangeStart = 0;
$rangeEnd = $fileSize - 1;
$isRangeRequest = false;
if (isset($_SERVER['HTTP_RANGE']) && preg_match('/^bytes=(\d*)-(\d*)$/', trim($_SERVER['HTTP_RANGE']), $m)) {
if ($m[1] === '' && $m[2] === '') {
// Malformed ("bytes=-") — ignore and serve the full file.
} elseif ($m[1] === '') {
// Suffix range: last N bytes
$suffixLength = (int)$m[2];
$rangeStart = max(0, $fileSize - $suffixLength);
$rangeEnd = $fileSize - 1;
$isRangeRequest = true;
} else {
$rangeStart = (int)$m[1];
$rangeEnd = ($m[2] === '') ? $fileSize - 1 : min((int)$m[2], $fileSize - 1);
$isRangeRequest = true;
}
if ($isRangeRequest && ($rangeStart > $rangeEnd || $rangeStart >= $fileSize)) {
http_response_code(416);
header('Content-Range: bytes */' . $fileSize);
exit;
}
}
$rangeLength = $rangeEnd - $rangeStart + 1;
header('Accept-Ranges: bytes');
header('Content-Type: ' . $attachment['mime_type']);
header('Content-Disposition: ' . $disposition . '; filename="' . $safeFilename . '"');
header('Content-Length: ' . $attachment['file_size']);
header('Cache-Control: private, max-age=3600');
header('X-Content-Type-Options: nosniff');
if ($isRangeRequest) {
http_response_code(206);
header('Content-Range: bytes ' . $rangeStart . '-' . $rangeEnd . '/' . $fileSize);
}
header('Content-Length: ' . $rangeLength);
// Prevent PHP from timing out on large files
set_time_limit(0);
@@ -125,9 +163,18 @@ try {
exit;
}
while (!feof($handle)) {
echo fread($handle, 8192);
fseek($handle, $rangeStart);
$remaining = $rangeLength;
$chunkSize = 8192;
while ($remaining > 0 && !feof($handle)) {
$read = ($remaining < $chunkSize) ? $remaining : $chunkSize;
$data = fread($handle, $read);
if ($data === false) {
break;
}
echo $data;
flush();
$remaining -= strlen($data);
}
fclose($handle);
api/upload_attachment.php
+12 -2
View File
@@ -114,6 +114,9 @@ if ($_SERVER['REQUEST_METHOD'] === 'GET') {
ResponseHelper::error('Invalid ticket ID format');
}
$offset = isset($_GET['offset']) ? max(0, (int)$_GET['offset']) : 0;
$limit = isset($_GET['limit']) ? min(100, max(1, (int)$_GET['limit'])) : 40;
try {
$conn = Database::getConnection();
$ticketModel = new TicketModel($conn);
@@ -123,7 +126,8 @@ if ($_SERVER['REQUEST_METHOD'] === 'GET') {
}
$attachmentModel = new AttachmentModel($conn);
$attachments = $attachmentModel->getAttachments($ticketId);
$total = $attachmentModel->getAttachmentCount($ticketId);
$attachments = $attachmentModel->getAttachments($ticketId, $limit, $offset);
// Add formatted file size and icon to each attachment
foreach ($attachments as &$att) {
@@ -131,7 +135,13 @@ if ($_SERVER['REQUEST_METHOD'] === 'GET') {
$att['icon'] = AttachmentModel::getFileIcon($att['mime_type']);
}
ResponseHelper::success(['attachments' => $attachments]);
ResponseHelper::success([
'attachments' => $attachments,
'total' => $total,
'offset' => $offset,
'limit' => $limit,
'has_more' => ($offset + $limit) < $total,
]);
} catch (Exception $e) {
ResponseHelper::serverError('Failed to load attachments');
}
assets/js/dashboard.js
+3 -8
View File
@@ -361,14 +361,9 @@ function initSidebarFilters() {
}
if (clearFiltersBtn) {
clearFiltersBtn.addEventListener('click', () => {
const params = new URLSearchParams(window.location.search);
['status','category','type',
'created_from','created_to','updated_from','updated_to','closed_from','closed_to'
].forEach(k => params.delete(k));
params.set('page', '1');
window.location.search = params.toString();
});
// Delegate to clearAllFilters() so both controls always clear the same
// complete set of filter params instead of two independently-maintained lists.
clearFiltersBtn.addEventListener('click', clearAllFilters);
}
}
assets/js/ticket.js
+202 -13
View File
@@ -452,6 +452,140 @@ function handleAssignmentChange() {
});
}
// ========================================
// SLA Priority-Alert Banner
// ========================================
const SLA_TARGET_HOURS = { 1: 8, 2: 24 };
const SLA_META = {
1: { cls: 'lt-sla-p1', icon: '[ ! ]', label: 'P1 Critical' },
2: { cls: 'lt-sla-p2', icon: '[ ~ ]', label: 'P2 High' },
};
let slaTickTimer = null;
function stopSlaTicker() {
if (slaTickTimer) {
clearInterval(slaTickTimer);
slaTickTimer = null;
}
}
function startSlaTicker(banner) {
stopSlaTicker();
const createdAt = parseInt(banner.dataset.createdAt, 10) * 1000;
const slaMs = parseInt(banner.dataset.slaHours, 10) * 3600 * 1000;
const deadline = createdAt + slaMs;
const elapsedEl = document.getElementById('slaElapsedTimer');
const countdownEl = document.getElementById('slaCountdownTimer');
const overrunEl = document.getElementById('slaOverrunTimer');
const fillBar = document.getElementById('slaProgressBar');
const progressWrap = document.getElementById('slaProgress');
function fmtHMS(ms) {
const s = Math.floor(Math.abs(ms) / 1000);
const h = Math.floor(s / 3600), m = Math.floor((s % 3600) / 60), ss = s % 60;
return [h, m, ss].map(n => String(n).padStart(2, '0')).join(':');
}
function tick() {
const now = Date.now();
const elapsed = now - createdAt;
const remaining = deadline - now;
const pct = Math.min(100, Math.round((elapsed / slaMs) * 100));
if (elapsedEl) elapsedEl.textContent = fmtHMS(elapsed);
if (fillBar) fillBar.style.width = pct + '%';
if (progressWrap) progressWrap.setAttribute('aria-label', 'SLA progress ' + pct + '%');
if (remaining > 0) {
if (countdownEl) countdownEl.textContent = fmtHMS(remaining) + ' remaining';
} else if (overrunEl) {
overrunEl.textContent = fmtHMS(-remaining);
}
}
tick();
slaTickTimer = setInterval(tick, 1000);
}
/**
* Render, update, or remove the SLA priority-alert banner for the given
* priority, matching what a fresh page load would show. Called on initial
* load and again whenever the ticket's priority changes client-side, so the
* banner never goes stale until a reload.
*/
function renderSlaBanner(priorityNum) {
const anchor = document.getElementById('priorityAlertBannerAnchor');
const existing = document.getElementById('priorityAlertBanner');
const meta = SLA_META[priorityNum];
const status = window.ticketData && window.ticketData.status;
if (!meta || status === 'Closed') {
if (existing) {
stopSlaTicker();
existing.remove();
}
return;
}
const createdAtSec = window.ticketData && window.ticketData.created_at_ts;
if (!createdAtSec || !anchor) return;
const slaTargetHours = SLA_TARGET_HOURS[priorityNum];
const elapsedSeconds = Math.floor(Date.now() / 1000) - createdAtSec;
const slaBreached = elapsedSeconds >= slaTargetHours * 3600;
const slaPct = Math.min(100, Math.round((elapsedSeconds / (slaTargetHours * 3600)) * 100));
const slaId = 'sla-' + window.ticketData.id;
let dismissed = false;
try {
dismissed = !!sessionStorage.getItem('lt_sla_dismissed_' + slaId);
} catch (e) { /* sessionStorage unavailable */ }
const banner = existing || document.createElement('div');
if (!existing) {
banner.id = 'priorityAlertBanner';
banner.setAttribute('role', 'alert');
banner.setAttribute('aria-live', 'polite');
banner.style.marginBottom = '0.75rem';
anchor.appendChild(banner);
}
banner.className = meta.cls;
banner.dataset.slaId = slaId;
banner.dataset.createdAt = String(createdAtSec);
banner.dataset.slaHours = String(slaTargetHours);
banner.hidden = dismissed;
banner.innerHTML =
`<span class="lt-sla-icon" aria-hidden="true">${meta.icon}</span>` +
'<div class="lt-sla-info">' +
`<div class="lt-sla-title">${lt.escHtml(meta.label)} — SLA: <span id="slaElapsedTimer"></span> elapsed of ${slaTargetHours}h limit` +
(slaBreached ? '&nbsp;<span class="lt-text-danger" id="slaBreachLabel">BREACHED</span>' : '') +
'</div>' +
`<div class="lt-sla-bar" aria-label="SLA progress ${slaPct}%" id="slaProgress">` +
`<div class="lt-sla-fill" id="slaProgressBar" style="width:${slaPct}%"></div>` +
'</div>' +
'</div>' +
(slaBreached
? `<div class="lt-sla-meta lt-text-danger" id="slaCountdownTimer">+<span id="slaOverrunTimer">${Math.round((elapsedSeconds - slaTargetHours * 3600) / 360) / 10}h</span> over</div>`
: '<div class="lt-sla-meta" id="slaCountdownTimer"></div>') +
'<button type="button" class="lt-sla-dismiss" aria-label="Dismiss">&#x2715;</button>';
banner.querySelector('.lt-sla-dismiss').addEventListener('click', function() {
banner.hidden = true;
stopSlaTicker();
try { sessionStorage.setItem('lt_sla_dismissed_' + slaId, '1'); } catch (e) { /* ignore */ }
});
if (dismissed) {
stopSlaTicker();
} else {
startSlaTicker(banner);
}
}
/**
* Handle metadata field changes (priority, category, type)
*/
@@ -475,10 +609,12 @@ function handleMetadataChanges() {
// Update window.ticketData
window.ticketData[fieldName] = fieldName === 'priority' ? parseInt(newValue) : newValue;
// For priority, update the TDS frame border accent
// For priority, update the TDS frame border accent and the
// SLA banner (which otherwise stays stale until reload)
if (fieldName === 'priority') {
const ticketFrame = document.querySelector('.lt-frame-ticket');
if (ticketFrame) ticketFrame.setAttribute('data-priority', newValue);
renderSlaBanner(window.ticketData.priority);
}
}
})
@@ -1027,35 +1163,62 @@ function resetUploadUI() {
}
}
function loadAttachments() {
const ticketId = window.ticketData.id;
const container = document.getElementById('attachmentsList');
const ATTACHMENT_PAGE_SIZE = 40;
let attachmentOffset = 0;
let attachmentTotal = 0;
function loadAttachments() {
const container = document.getElementById('attachmentsList');
if (!container) return;
lt.api.get(`/api/upload_attachment.php?ticket_id=${ticketId}`)
attachmentOffset = 0;
attachmentTotal = 0;
fetchAttachmentsPage(false);
}
function fetchAttachmentsPage(append) {
const ticketId = window.ticketData.id;
const container = document.getElementById('attachmentsList');
if (!container) return;
const loadMoreBtn = document.getElementById('attachmentsLoadMoreBtn');
if (loadMoreBtn) {
loadMoreBtn.disabled = true;
loadMoreBtn.textContent = 'Loading…';
}
lt.api.get(`/api/upload_attachment.php?ticket_id=${ticketId}&offset=${attachmentOffset}&limit=${ATTACHMENT_PAGE_SIZE}`)
.then(data => {
if (data.success) {
renderAttachments(data.attachments || []);
} else {
attachmentTotal = data.total;
attachmentOffset += (data.attachments || []).length;
renderAttachments(data.attachments || [], append, data.has_more);
} else if (!append) {
container.innerHTML = '<p class="lt-text-muted">Error loading attachments.</p>';
} else {
lt.toast.error('Error loading more attachments');
}
})
.catch(error => {
container.innerHTML = '<p class="lt-text-muted">Error loading attachments.</p>';
if (!append) {
container.innerHTML = '<p class="lt-text-muted">Error loading attachments.</p>';
} else {
lt.toast.error('Error loading more attachments');
}
});
}
function renderAttachments(attachments) {
function renderAttachments(attachments, append, hasMore) {
const container = document.getElementById('attachmentsList');
if (!container) return;
if (attachments.length === 0) {
if (!append && attachments.length === 0) {
container.innerHTML = '<p class="lt-text-muted">No files attached to this ticket.</p>';
return;
}
let html = '<div class="attachments-grid">';
let grid = append ? container.querySelector('.attachments-grid') : null;
let html = '';
attachments.forEach(att => {
const uploaderName = att.display_name || att.username || 'Unknown';
@@ -1095,8 +1258,34 @@ function renderAttachments(attachments) {
</div>`;
});
html += '</div>';
container.innerHTML = html;
if (grid) {
const temp = document.createElement('div');
temp.innerHTML = html;
while (temp.firstChild) {
grid.appendChild(temp.firstChild);
}
} else {
container.innerHTML = '<div class="attachments-grid">' + html + '</div>';
}
const remaining = attachmentTotal - attachmentOffset;
let loadMoreBtn = document.getElementById('attachmentsLoadMoreBtn');
if (hasMore && remaining > 0) {
if (!loadMoreBtn) {
loadMoreBtn = document.createElement('button');
loadMoreBtn.type = 'button';
loadMoreBtn.id = 'attachmentsLoadMoreBtn';
loadMoreBtn.className = 'lt-btn lt-btn-sm lt-w-full';
loadMoreBtn.style.marginTop = '0.6rem';
loadMoreBtn.addEventListener('click', function() { fetchAttachmentsPage(true); });
container.appendChild(loadMoreBtn);
}
loadMoreBtn.disabled = false;
loadMoreBtn.textContent = `Load more attachments (${remaining} remaining)`;
} else if (loadMoreBtn) {
loadMoreBtn.remove();
}
// Initialize lightbox on image thumbnails
if (window.lt && lt.lightbox) {
lt.lightbox.init('.lt-lightbox-trigger', { caption: 'title', loop: true });
models/AttachmentModel.php
+10 -2
View File
@@ -16,7 +16,7 @@ class AttachmentModel
/**
* Get all attachments for a ticket
*/
public function getAttachments($ticketId)
public function getAttachments($ticketId, int $limit = 0, int $offset = 0)
{
$sql = "SELECT a.*, u.username, u.display_name
FROM ticket_attachments a
@@ -24,8 +24,16 @@ class AttachmentModel
WHERE a.ticket_id = ?
ORDER BY a.uploaded_at DESC";
if ($limit > 0) {
$sql .= " LIMIT ? OFFSET ?";
}
$stmt = $this->conn->prepare($sql);
$stmt->bind_param("s", $ticketId);
if ($limit > 0) {
$stmt->bind_param("sii", $ticketId, $limit, $offset);
} else {
$stmt->bind_param("s", $ticketId);
}
$stmt->execute();
$result = $stmt->get_result();
views/TicketView.php
+10 -86
View File
@@ -114,6 +114,7 @@ $json_priority = json_encode($ticket['priority'], JSON_HEX_TAG);
$json_category = json_encode($ticket['category'], JSON_HEX_TAG);
$json_type = json_encode($ticket['type'], JSON_HEX_TAG);
$json_updated_at = json_encode($ticket['updated_at'], JSON_HEX_TAG);
$json_created_at_ts = json_encode((int)strtotime($ticket['created_at']), JSON_HEX_TAG);
$json_total_comments = json_encode((int)$totalComments, JSON_HEX_TAG);
$json_comment_page = json_encode((int)$commentPageSize, JSON_HEX_TAG);
$json_current_uid = json_encode((int)($currentUser['user_id'] ?? 0), JSON_HEX_TAG);
@@ -127,6 +128,7 @@ window.ticketData = {
category: {$json_category},
type: {$json_type},
updated_at: {$json_updated_at},
created_at_ts: {$json_created_at_ts},
totalComments: {$json_total_comments},
commentOffset: {$json_comment_page},
commentPageSize:{$json_comment_page},
@@ -209,95 +211,17 @@ include __DIR__ . '/layout_header.php';
</div>
</div>
<?php if ($priorityNum <= 2 && $ticket['status'] !== 'Closed') : ?>
<?php
$slaTargetHours = match ($priorityNum) {
1 => 8, 2 => 24, default => 72
};
$elapsedSeconds = time() - strtotime($ticket['created_at']);
$slaPct = min(100, round(($elapsedSeconds / ($slaTargetHours * 3600)) * 100));
$slaBreached = $elapsedSeconds >= ($slaTargetHours * 3600);
$slaClass = $priorityNum === 1 ? 'lt-sla-p1' : 'lt-sla-p2';
$slaIcon = $priorityNum === 1 ? '[ ! ]' : '[ ~ ]';
$slaLabel = $priorityNum === 1 ? 'P1 Critical' : 'P2 High';
$slaId = 'sla-' . htmlspecialchars($ticket['ticket_id'], ENT_QUOTES, 'UTF-8');
?>
<!-- SLA banner — P1/P2 only, dismissible per session -->
<div class="<?= $slaClass ?>" id="priorityAlertBanner" role="alert" aria-live="polite"
data-sla-id="<?= $slaId ?>"
data-created-at="<?= (int)strtotime($ticket['created_at']) ?>"
data-sla-hours="<?= $slaTargetHours ?>"
style="margin-bottom:0.75rem">
<span class="lt-sla-icon" aria-hidden="true"><?= $slaIcon ?></span>
<div class="lt-sla-info">
<div class="lt-sla-title">
<?= $slaLabel ?> — SLA: <span id="slaElapsedTimer"></span> elapsed of <?= $slaTargetHours ?>h limit
<?php if ($slaBreached) : ?>
&nbsp;<span class="lt-text-danger" id="slaBreachLabel">BREACHED</span>
<?php endif ?>
</div>
<div class="lt-sla-bar" aria-label="SLA progress <?= $slaPct ?>%" id="slaProgress">
<div class="lt-sla-fill" id="slaProgressBar" style="width:<?= $slaPct ?>%"></div>
</div>
</div>
<?php if (!$slaBreached) : ?>
<div class="lt-sla-meta" id="slaCountdownTimer"></div>
<?php else : ?>
<div class="lt-sla-meta lt-text-danger" id="slaCountdownTimer">+<span id="slaOverrunTimer"><?= round(($elapsedSeconds - $slaTargetHours * 3600) / 3600, 1) ?>h</span> over</div>
<?php endif ?>
<button type="button" class="lt-sla-dismiss" aria-label="Dismiss">&#x2715;</button>
</div>
<?php // SLA banner (P1/P2, non-Closed tickets) is rendered and kept live by
// renderSlaBanner() in ticket.js, so it can also rebuild/tear itself
// down when priority changes client-side without a page reload. ?>
<div id="priorityAlertBannerAnchor"></div>
<script nonce="<?= htmlspecialchars($nonce, ENT_QUOTES, 'UTF-8') ?>">
(function(){
var banner = document.getElementById('priorityAlertBanner');
var id = banner.dataset.slaId;
try { if (id && sessionStorage.getItem('lt_sla_dismissed_' + id)) banner.hidden = true; } catch(e) {}
banner.querySelector('.lt-sla-dismiss').addEventListener('click', function() {
banner.hidden = true;
try { if (id) sessionStorage.setItem('lt_sla_dismissed_' + id, '1'); } catch(e) {}
});
document.addEventListener('DOMContentLoaded', function() {
if (banner.hidden) return;
var createdAt = parseInt(banner.dataset.createdAt, 10) * 1000;
var slaMs = parseInt(banner.dataset.slaHours, 10) * 3600 * 1000;
var deadline = new Date(createdAt + slaMs);
var elapsedEl = document.getElementById('slaElapsedTimer');
var countdownEl = document.getElementById('slaCountdownTimer');
var overrunEl = document.getElementById('slaOverrunTimer');
var fillBar = document.getElementById('slaProgressBar');
var progressWrap = document.getElementById('slaProgress');
function fmtHMS(ms) {
var s = Math.floor(Math.abs(ms) / 1000);
var h = Math.floor(s / 3600), m = Math.floor((s % 3600) / 60), ss = s % 60;
return [h, m, ss].map(function(n){ return String(n).padStart(2,'0'); }).join(':');
document.addEventListener('DOMContentLoaded', function() {
if (typeof renderSlaBanner === 'function') {
renderSlaBanner(window.ticketData.priority);
}
function tick() {
var now = Date.now();
var elapsed = now - createdAt;
var remaining = deadline - now;
var pct = Math.min(100, Math.round((elapsed / slaMs) * 100));
if (elapsedEl) elapsedEl.textContent = fmtHMS(elapsed);
if (fillBar) fillBar.style.width = pct + '%';
if (progressWrap) progressWrap.setAttribute('aria-label', 'SLA progress ' + pct + '%');
if (remaining > 0) {
if (countdownEl) countdownEl.textContent = fmtHMS(remaining) + ' remaining';
} else {
if (overrunEl) overrunEl.textContent = fmtHMS(-remaining);
}
}
tick();
setInterval(tick, 1000);
});
})();
});
</script>
<?php endif ?>
<!-- ═══════════════════════════════════════════════════════════
TICKET DETAIL FRAME