feat: Implement dramatic ANSI art terminal redesign - Phase 1-3
This commit implements the complete HTML restructuring with nested ASCII box-drawing architecture, providing heavy decorations, elaborate framing, and visual hierarchy through box-drawing characters (╔╗╚╝ ═══ ├┤ ┌┐└┘). ## Phase 1: CSS Foundation - Added comprehensive nested ASCII frame system to dashboard.css - Created .ascii-frame-outer class with heavy double borders (╔╗╚╝) - Created .ascii-frame-inner class with single borders (┌┐) - Added .ascii-section-header with ╠═══ decoration - Added .ascii-subsection-header with ├─── decoration - Added .ascii-divider with ╞═══╡ connectors - Added .ascii-content wrapper class - Implemented priority-based color variants (P1-P5) for all frames ## Phase 2: Dashboard Restructuring - Wrapped entire dashboard in nested ASCII frames (ascii-frame-outer) - Created 5 major vertical sections with elaborate headers: * Dashboard Control Center (header + new ticket button) * Search & Filter (search form + results) * Table Controls (count + pagination + settings) * Bulk Operations (admin-only, conditional) * Ticket List (main table) - Added ASCII dividers (╞═══╡) between all sections - Nested each section in ascii-content > ascii-frame-inner - Added ╚╝ bottom corner characters as separate elements - Maintained all existing functionality (search, sort, filter, bulk ops) ## Phase 3: Ticket View Restructuring - Wrapped ticket-container in nested ASCII frames - Created 3 major vertical sections: * Ticket Information (header + metadata) * Content Sections (tab navigation) * Content Display (tab content area) - Added subsection headers (├───) for Description, Comments, Activity - Nested comment form and comment list in separate sub-frames - Added ASCII dividers between sections - Updated ticket.css for nested frame compatibility: * Removed border from .comments-section (frame handles it) * Added corner decorations (┌┐) to individual comments * Fixed padding/margin conflicts with nested structure ## Visual Impact - Every major section now has elaborate ASCII box frames - Section headers display as: ╠═══ SECTION NAME ═══╣ - Dividers show as: ╞═══════════════════════════╡ - 3+ levels of nesting creates strong visual hierarchy - Heavy decorations (╔╗╚╝) for outer containers - Light decorations (┌┐└┘) for inner sections - All priority colors preserved and applied to frames ## Technical Details - 229 lines added to dashboard.css (frame system) - DashboardView.php: Complete HTML restructuring (lines 104-316) - TicketView.php: Complete HTML restructuring (lines 148-334) - ticket.css: Added 34 lines of compatibility rules - All existing JavaScript event handlers preserved - All PHP backend logic unchanged - Zero breaking changes to functionality ## Files Modified - assets/css/dashboard.css: +229 lines (frame system + priority variants) - assets/css/ticket.css: +34 lines (compatibility rules) - views/DashboardView.php: Restructured with nested frames - views/TicketView.php: Restructured with nested frames ## Next Steps - Phase 4: Restructure CreateTicketView.php - Phase 5: Update hamburger menu & modals JavaScript - Phase 6: Add responsive design breakpoints 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -101,104 +101,150 @@
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="dashboard-header">
|
||||
<h1>Ticket Dashboard</h1>
|
||||
<button onclick="window.location.href='<?php echo $GLOBALS['config']['BASE_URL']; ?>/ticket/create'" class="btn create-ticket">New Ticket</button> </div>
|
||||
<div class="search-container">
|
||||
<form method="GET" action="" class="search-form">
|
||||
<!-- Preserve existing parameters -->
|
||||
<?php if (isset($_GET['status'])): ?>
|
||||
<input type="hidden" name="status" value="<?php echo htmlspecialchars($_GET['status']); ?>">
|
||||
<?php endif; ?>
|
||||
<?php if (isset($_GET['show_all'])): ?>
|
||||
<input type="hidden" name="show_all" value="<?php echo htmlspecialchars($_GET['show_all']); ?>">
|
||||
<?php endif; ?>
|
||||
<?php if (isset($_GET['category'])): ?>
|
||||
<input type="hidden" name="category" value="<?php echo htmlspecialchars($_GET['category']); ?>">
|
||||
<?php endif; ?>
|
||||
<?php if (isset($_GET['type'])): ?>
|
||||
<input type="hidden" name="type" value="<?php echo htmlspecialchars($_GET['type']); ?>">
|
||||
<?php endif; ?>
|
||||
<?php if (isset($_GET['sort'])): ?>
|
||||
<input type="hidden" name="sort" value="<?php echo htmlspecialchars($_GET['sort']); ?>">
|
||||
<?php endif; ?>
|
||||
<?php if (isset($_GET['dir'])): ?>
|
||||
<input type="hidden" name="dir" value="<?php echo htmlspecialchars($_GET['dir']); ?>">
|
||||
<?php endif; ?>
|
||||
|
||||
<input type="text"
|
||||
name="search"
|
||||
placeholder="Search tickets..."
|
||||
class="search-box"
|
||||
value="<?php echo isset($_GET['search']) ? htmlspecialchars($_GET['search']) : ''; ?>">
|
||||
<button type="submit" class="search-btn">Search</button>
|
||||
<?php if (isset($_GET['search']) && !empty($_GET['search'])): ?>
|
||||
<a href="?" class="clear-search-btn">Clear</a>
|
||||
<?php endif; ?>
|
||||
</form>
|
||||
</div>
|
||||
<?php if (isset($_GET['search']) && !empty($_GET['search'])): ?>
|
||||
<div class="search-results-info">
|
||||
Showing results for: "<strong><?php echo htmlspecialchars($_GET['search']); ?></strong>"
|
||||
(<?php echo $totalTickets; ?> ticket<?php echo $totalTickets != 1 ? 's' : ''; ?> found)
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
<div class="table-controls">
|
||||
<div class="ticket-count">
|
||||
Total Tickets: <?php echo $totalTickets; ?>
|
||||
</div>
|
||||
<div class="table-actions">
|
||||
<div class="pagination">
|
||||
<?php
|
||||
$currentParams = $_GET;
|
||||
|
||||
// Previous page button
|
||||
if ($page > 1) {
|
||||
$currentParams['page'] = $page - 1;
|
||||
$prevUrl = '?' . http_build_query($currentParams);
|
||||
echo "<button onclick='window.location.href=\"$prevUrl\"'>«</button>";
|
||||
}
|
||||
<!-- OUTER FRAME: Dashboard Container -->
|
||||
<div class="ascii-frame-outer">
|
||||
<span class="bottom-left-corner">╚</span>
|
||||
<span class="bottom-right-corner">╝</span>
|
||||
|
||||
// Page number buttons
|
||||
for ($i = 1; $i <= $totalPages; $i++) {
|
||||
$activeClass = ($i === $page) ? 'active' : '';
|
||||
$currentParams['page'] = $i;
|
||||
$pageUrl = '?' . http_build_query($currentParams);
|
||||
echo "<button class='$activeClass' onclick='window.location.href=\"$pageUrl\"'>$i</button>";
|
||||
}
|
||||
|
||||
// Next page button
|
||||
if ($page < $totalPages) {
|
||||
$currentParams['page'] = $page + 1;
|
||||
$nextUrl = '?' . http_build_query($currentParams);
|
||||
echo "<button onclick='window.location.href=\"$nextUrl\"'>»</button>";
|
||||
}
|
||||
?>
|
||||
</div>
|
||||
<div class="settings-icon">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<circle cx="12" cy="12" r="3"></circle>
|
||||
<path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
|
||||
</svg>
|
||||
<!-- SECTION 1: Dashboard Header & Actions -->
|
||||
<div class="ascii-section-header">Dashboard Control Center</div>
|
||||
<div class="ascii-content">
|
||||
<div class="ascii-frame-inner">
|
||||
<div class="dashboard-header">
|
||||
<h1>Ticket Dashboard</h1>
|
||||
<button onclick="window.location.href='<?php echo $GLOBALS['config']['BASE_URL']; ?>/ticket/create'" class="btn create-ticket">New Ticket</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php if ($GLOBALS['currentUser']['is_admin'] ?? false): ?>
|
||||
<div class="bulk-actions-toolbar" style="display: none;">
|
||||
<div class="bulk-actions-info">
|
||||
<span id="selected-count">0</span> tickets selected
|
||||
</div>
|
||||
<div class="bulk-actions-buttons">
|
||||
<button onclick="bulkClose()" class="btn btn-bulk">Close Selected</button>
|
||||
<button onclick="showBulkAssignModal()" class="btn btn-bulk">Assign Selected</button>
|
||||
<button onclick="showBulkPriorityModal()" class="btn btn-bulk">Change Priority</button>
|
||||
<button onclick="clearSelection()" class="btn btn-secondary">Clear Selection</button>
|
||||
</div>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
<!-- DIVIDER -->
|
||||
<div class="ascii-divider"></div>
|
||||
|
||||
<table>
|
||||
<!-- SECTION 2: Search & Filter -->
|
||||
<div class="ascii-section-header">Search & Filter</div>
|
||||
<div class="ascii-content">
|
||||
<div class="ascii-frame-inner">
|
||||
<form method="GET" action="" class="search-form">
|
||||
<!-- Preserve existing parameters -->
|
||||
<?php if (isset($_GET['status'])): ?>
|
||||
<input type="hidden" name="status" value="<?php echo htmlspecialchars($_GET['status']); ?>">
|
||||
<?php endif; ?>
|
||||
<?php if (isset($_GET['show_all'])): ?>
|
||||
<input type="hidden" name="show_all" value="<?php echo htmlspecialchars($_GET['show_all']); ?>">
|
||||
<?php endif; ?>
|
||||
<?php if (isset($_GET['category'])): ?>
|
||||
<input type="hidden" name="category" value="<?php echo htmlspecialchars($_GET['category']); ?>">
|
||||
<?php endif; ?>
|
||||
<?php if (isset($_GET['type'])): ?>
|
||||
<input type="hidden" name="type" value="<?php echo htmlspecialchars($_GET['type']); ?>">
|
||||
<?php endif; ?>
|
||||
<?php if (isset($_GET['sort'])): ?>
|
||||
<input type="hidden" name="sort" value="<?php echo htmlspecialchars($_GET['sort']); ?>">
|
||||
<?php endif; ?>
|
||||
<?php if (isset($_GET['dir'])): ?>
|
||||
<input type="hidden" name="dir" value="<?php echo htmlspecialchars($_GET['dir']); ?>">
|
||||
<?php endif; ?>
|
||||
|
||||
<input type="text"
|
||||
name="search"
|
||||
placeholder="Search tickets..."
|
||||
class="search-box"
|
||||
value="<?php echo isset($_GET['search']) ? htmlspecialchars($_GET['search']) : ''; ?>">
|
||||
<button type="submit" class="search-btn">Search</button>
|
||||
<?php if (isset($_GET['search']) && !empty($_GET['search'])): ?>
|
||||
<a href="?" class="clear-search-btn">Clear</a>
|
||||
<?php endif; ?>
|
||||
</form>
|
||||
<?php if (isset($_GET['search']) && !empty($_GET['search'])): ?>
|
||||
<div class="search-results-info">
|
||||
Showing results for: "<strong><?php echo htmlspecialchars($_GET['search']); ?></strong>"
|
||||
(<?php echo $totalTickets; ?> ticket<?php echo $totalTickets != 1 ? 's' : ''; ?> found)
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- DIVIDER -->
|
||||
<div class="ascii-divider"></div>
|
||||
|
||||
<!-- SECTION 3: Table Controls -->
|
||||
<div class="ascii-section-header">Table Controls</div>
|
||||
<div class="ascii-content">
|
||||
<div class="ascii-frame-inner">
|
||||
<div class="table-controls">
|
||||
<div class="ticket-count">
|
||||
Total Tickets: <?php echo $totalTickets; ?>
|
||||
</div>
|
||||
<div class="table-actions">
|
||||
<div class="pagination">
|
||||
<?php
|
||||
$currentParams = $_GET;
|
||||
|
||||
// Previous page button
|
||||
if ($page > 1) {
|
||||
$currentParams['page'] = $page - 1;
|
||||
$prevUrl = '?' . http_build_query($currentParams);
|
||||
echo "<button onclick='window.location.href=\"$prevUrl\"'>«</button>";
|
||||
}
|
||||
|
||||
// Page number buttons
|
||||
for ($i = 1; $i <= $totalPages; $i++) {
|
||||
$activeClass = ($i === $page) ? 'active' : '';
|
||||
$currentParams['page'] = $i;
|
||||
$pageUrl = '?' . http_build_query($currentParams);
|
||||
echo "<button class='$activeClass' onclick='window.location.href=\"$pageUrl\"'>$i</button>";
|
||||
}
|
||||
|
||||
// Next page button
|
||||
if ($page < $totalPages) {
|
||||
$currentParams['page'] = $page + 1;
|
||||
$nextUrl = '?' . http_build_query($currentParams);
|
||||
echo "<button onclick='window.location.href=\"$nextUrl\"'>»</button>";
|
||||
}
|
||||
?>
|
||||
</div>
|
||||
<div class="settings-icon">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<circle cx="12" cy="12" r="3"></circle>
|
||||
<path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- DIVIDER -->
|
||||
<div class="ascii-divider"></div>
|
||||
|
||||
<!-- SECTION 4: Bulk Actions (if admin) -->
|
||||
<?php if ($GLOBALS['currentUser']['is_admin'] ?? false): ?>
|
||||
<div class="ascii-section-header">Bulk Operations</div>
|
||||
<div class="ascii-content">
|
||||
<div class="ascii-frame-inner">
|
||||
<div class="bulk-actions-toolbar" style="display: none;">
|
||||
<div class="bulk-actions-info">
|
||||
<span id="selected-count">0</span> tickets selected
|
||||
</div>
|
||||
<div class="bulk-actions-buttons">
|
||||
<button onclick="bulkClose()" class="btn btn-bulk">Close Selected</button>
|
||||
<button onclick="showBulkAssignModal()" class="btn btn-bulk">Assign Selected</button>
|
||||
<button onclick="showBulkPriorityModal()" class="btn btn-bulk">Change Priority</button>
|
||||
<button onclick="clearSelection()" class="btn btn-secondary">Clear Selection</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- DIVIDER -->
|
||||
<div class="ascii-divider"></div>
|
||||
<?php endif; ?>
|
||||
|
||||
<!-- SECTION 5: Ticket Table -->
|
||||
<div class="ascii-section-header">Ticket List</div>
|
||||
<div class="ascii-content">
|
||||
<div class="ascii-frame-inner">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<?php if ($GLOBALS['currentUser']['is_admin'] ?? false): ?>
|
||||
@@ -263,6 +309,10 @@
|
||||
}
|
||||
?>
|
||||
</tbody>
|
||||
</table>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- END OUTER FRAME -->
|
||||
</body>
|
||||
</html>
|
||||
@@ -145,81 +145,108 @@ function formatDetails($details, $actionType) {
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div class="ticket-container" data-priority="<?php echo $ticket["priority"]; ?>">
|
||||
<div class="ticket-header">
|
||||
<h2><input type="text" class="editable title-input" value="<?php echo htmlspecialchars($ticket["title"]); ?>" data-field="title" disabled></h2>
|
||||
<div class="ticket-subheader">
|
||||
<div class="ticket-metadata">
|
||||
<div class="ticket-id">UUID <?php echo $ticket['ticket_id']; ?></div>
|
||||
<div class="ticket-user-info" style="font-size: 0.85rem; color: #666; margin-top: 0.25rem;">
|
||||
<?php
|
||||
$creator = $ticket['creator_display_name'] ?? $ticket['creator_username'] ?? 'System';
|
||||
echo "Created by: <strong>" . htmlspecialchars($creator) . "</strong>";
|
||||
if (!empty($ticket['created_at'])) {
|
||||
echo " on " . date('M d, Y H:i', strtotime($ticket['created_at']));
|
||||
}
|
||||
if (!empty($ticket['updater_display_name']) || !empty($ticket['updater_username'])) {
|
||||
$updater = $ticket['updater_display_name'] ?? $ticket['updater_username'];
|
||||
echo " • Last updated by: <strong>" . htmlspecialchars($updater) . "</strong>";
|
||||
if (!empty($ticket['updated_at'])) {
|
||||
echo " on " . date('M d, Y H:i', strtotime($ticket['updated_at']));
|
||||
}
|
||||
}
|
||||
?>
|
||||
<div class="ticket-container ascii-frame-outer" data-priority="<?php echo $ticket["priority"]; ?>">
|
||||
<span class="bottom-left-corner">╚</span>
|
||||
<span class="bottom-right-corner">╝</span>
|
||||
|
||||
<!-- SECTION 1: Ticket Header & Metadata -->
|
||||
<div class="ascii-section-header">Ticket Information</div>
|
||||
<div class="ascii-content">
|
||||
<div class="ascii-frame-inner">
|
||||
<div class="ticket-header">
|
||||
<h2><input type="text" class="editable title-input" value="<?php echo htmlspecialchars($ticket["title"]); ?>" data-field="title" disabled></h2>
|
||||
<div class="ticket-subheader">
|
||||
<div class="ticket-metadata">
|
||||
<div class="ticket-id">UUID <?php echo $ticket['ticket_id']; ?></div>
|
||||
<div class="ticket-user-info" style="font-size: 0.85rem; color: #666; margin-top: 0.25rem;">
|
||||
<?php
|
||||
$creator = $ticket['creator_display_name'] ?? $ticket['creator_username'] ?? 'System';
|
||||
echo "Created by: <strong>" . htmlspecialchars($creator) . "</strong>";
|
||||
if (!empty($ticket['created_at'])) {
|
||||
echo " on " . date('M d, Y H:i', strtotime($ticket['created_at']));
|
||||
}
|
||||
if (!empty($ticket['updater_display_name']) || !empty($ticket['updater_username'])) {
|
||||
$updater = $ticket['updater_display_name'] ?? $ticket['updater_username'];
|
||||
echo " • Last updated by: <strong>" . htmlspecialchars($updater) . "</strong>";
|
||||
if (!empty($ticket['updated_at'])) {
|
||||
echo " on " . date('M d, Y H:i', strtotime($ticket['updated_at']));
|
||||
}
|
||||
}
|
||||
?>
|
||||
</div>
|
||||
<div class="ticket-assignment" style="margin-top: 0.5rem;">
|
||||
<label style="font-weight: 500; margin-right: 0.5rem;">Assigned to:</label>
|
||||
<select id="assignedToSelect" class="assignment-select" style="padding: 0.25rem 0.5rem; border-radius: 4px; border: 1px solid var(--border-color, #ddd);">
|
||||
<option value="">Unassigned</option>
|
||||
<?php foreach ($allUsers as $user): ?>
|
||||
<option value="<?php echo $user['user_id']; ?>"
|
||||
<?php echo ($ticket['assigned_to'] == $user['user_id']) ? 'selected' : ''; ?>>
|
||||
<?php echo htmlspecialchars($user['display_name'] ?? $user['username']); ?>
|
||||
</option>
|
||||
<?php endforeach; ?>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-controls">
|
||||
<div class="status-priority-group">
|
||||
<select id="statusSelect" class="editable status-select status-<?php echo str_replace(' ', '-', strtolower($ticket["status"])); ?>" data-field="status" onchange="updateTicketStatus()">
|
||||
<option value="<?php echo $ticket['status']; ?>" selected>
|
||||
<?php echo $ticket['status']; ?> (current)
|
||||
</option>
|
||||
<?php foreach ($allowedTransitions as $transition): ?>
|
||||
<option value="<?php echo $transition['to_status']; ?>"
|
||||
data-requires-comment="<?php echo $transition['requires_comment'] ? '1' : '0'; ?>"
|
||||
data-requires-admin="<?php echo $transition['requires_admin'] ? '1' : '0'; ?>">
|
||||
<?php echo $transition['to_status']; ?>
|
||||
<?php if ($transition['requires_comment']): ?> *<?php endif; ?>
|
||||
<?php if ($transition['requires_admin']): ?> (Admin)<?php endif; ?>
|
||||
</option>
|
||||
<?php endforeach; ?>
|
||||
</select>
|
||||
<span class="priority-indicator priority-<?php echo $ticket["priority"]; ?>">P<?php echo $ticket["priority"]; ?></span>
|
||||
</div>
|
||||
<button id="editButton" class="btn" onclick="toggleEditMode()">Edit Ticket</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ticket-assignment" style="margin-top: 0.5rem;">
|
||||
<label style="font-weight: 500; margin-right: 0.5rem;">Assigned to:</label>
|
||||
<select id="assignedToSelect" class="assignment-select" style="padding: 0.25rem 0.5rem; border-radius: 4px; border: 1px solid var(--border-color, #ddd);">
|
||||
<option value="">Unassigned</option>
|
||||
<?php foreach ($allUsers as $user): ?>
|
||||
<option value="<?php echo $user['user_id']; ?>"
|
||||
<?php echo ($ticket['assigned_to'] == $user['user_id']) ? 'selected' : ''; ?>>
|
||||
<?php echo htmlspecialchars($user['display_name'] ?? $user['username']); ?>
|
||||
</option>
|
||||
<?php endforeach; ?>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-controls">
|
||||
<div class="status-priority-group">
|
||||
<select id="statusSelect" class="editable status-select status-<?php echo str_replace(' ', '-', strtolower($ticket["status"])); ?>" data-field="status" onchange="updateTicketStatus()">
|
||||
<option value="<?php echo $ticket['status']; ?>" selected>
|
||||
<?php echo $ticket['status']; ?> (current)
|
||||
</option>
|
||||
<?php foreach ($allowedTransitions as $transition): ?>
|
||||
<option value="<?php echo $transition['to_status']; ?>"
|
||||
data-requires-comment="<?php echo $transition['requires_comment'] ? '1' : '0'; ?>"
|
||||
data-requires-admin="<?php echo $transition['requires_admin'] ? '1' : '0'; ?>">
|
||||
<?php echo $transition['to_status']; ?>
|
||||
<?php if ($transition['requires_comment']): ?> *<?php endif; ?>
|
||||
<?php if ($transition['requires_admin']): ?> (Admin)<?php endif; ?>
|
||||
</option>
|
||||
<?php endforeach; ?>
|
||||
</select>
|
||||
<span class="priority-indicator priority-<?php echo $ticket["priority"]; ?>">P<?php echo $ticket["priority"]; ?></span>
|
||||
</div>
|
||||
<button id="editButton" class="btn" onclick="toggleEditMode()">Edit Ticket</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ticket-details">
|
||||
|
||||
<!-- DIVIDER -->
|
||||
<div class="ascii-divider"></div>
|
||||
|
||||
<!-- SECTION 2: Tab Navigation -->
|
||||
<div class="ascii-section-header">Content Sections</div>
|
||||
<div class="ascii-content">
|
||||
<div class="ticket-tabs">
|
||||
<button class="tab-btn active" onclick="showTab('description')">Description</button>
|
||||
<button class="tab-btn" onclick="showTab('comments')">Comments</button>
|
||||
<button class="tab-btn" onclick="showTab('activity')">Activity</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="description-tab" class="tab-content active">
|
||||
<div class="detail-group full-width">
|
||||
<label>Description</label>
|
||||
<textarea class="editable" data-field="description" disabled><?php echo $ticket["description"]; ?></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<!-- DIVIDER -->
|
||||
<div class="ascii-divider"></div>
|
||||
|
||||
<div id="comments-tab" class="tab-content">
|
||||
<div class="comments-section">
|
||||
<h2>Comments</h2>
|
||||
<div class="comment-form">
|
||||
<!-- SECTION 3: Tab Content Area -->
|
||||
<div class="ascii-section-header">Content Display</div>
|
||||
<div class="ascii-content">
|
||||
<div class="ascii-frame-inner">
|
||||
<div class="ticket-details">
|
||||
<div id="description-tab" class="tab-content active">
|
||||
<div class="ascii-subsection-header">Description</div>
|
||||
<div class="detail-group full-width">
|
||||
<label>Description</label>
|
||||
<textarea class="editable" data-field="description" disabled><?php echo $ticket["description"]; ?></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="comments-tab" class="tab-content">
|
||||
<div class="ascii-subsection-header">Comments Section</div>
|
||||
<div class="comments-section">
|
||||
<div class="ascii-frame-inner">
|
||||
<h2>Add Comment</h2>
|
||||
<div class="comment-form">
|
||||
<textarea id="newComment" placeholder="Add a comment..."></textarea>
|
||||
<div class="comment-controls">
|
||||
<div class="markdown-toggles">
|
||||
@@ -241,60 +268,70 @@ function formatDetails($details, $actionType) {
|
||||
<button onclick="addComment()" class="btn">Add Comment</button>
|
||||
</div>
|
||||
<div id="markdownPreview" class="markdown-preview" style="display: none;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="comments-list">
|
||||
<?php
|
||||
foreach ($comments as $comment) {
|
||||
// Use display_name_formatted which falls back appropriately
|
||||
$displayName = $comment['display_name_formatted'] ?? $comment['user_name'] ?? 'Unknown User';
|
||||
echo "<div class='comment'>";
|
||||
echo "<div class='comment-header'>";
|
||||
echo "<span class='comment-user'>" . htmlspecialchars($displayName) . "</span>";
|
||||
echo "<span class='comment-date'>" . date('M d, Y H:i', strtotime($comment['created_at'])) . "</span>";
|
||||
echo "</div>";
|
||||
echo "<div class='comment-text'>";
|
||||
if ($comment['markdown_enabled']) {
|
||||
// For markdown comments, use JavaScript to render
|
||||
echo "<script>document.write(marked.parse(" . json_encode($comment['comment_text']) . "))</script>";
|
||||
} else {
|
||||
// For non-markdown comments, convert line breaks to <br> and escape HTML
|
||||
echo nl2br(htmlspecialchars($comment['comment_text']));
|
||||
}
|
||||
echo "</div>";
|
||||
echo "</div>";
|
||||
}
|
||||
?>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="activity-tab" class="tab-content">
|
||||
<div class="timeline-container">
|
||||
<?php if (empty($timeline)): ?>
|
||||
<p>No activity recorded yet.</p>
|
||||
<?php else: ?>
|
||||
<?php foreach ($timeline as $event): ?>
|
||||
<div class="timeline-event">
|
||||
<div class="timeline-icon"><?php echo getEventIcon($event['action_type']); ?></div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-header">
|
||||
<strong><?php echo htmlspecialchars($event['display_name'] ?? $event['username'] ?? 'System'); ?></strong>
|
||||
<span class="timeline-action"><?php echo formatAction($event); ?></span>
|
||||
<span class="timeline-date"><?php echo date('M d, Y H:i', strtotime($event['created_at'])); ?></span>
|
||||
</div>
|
||||
<?php if (!empty($event['details'])): ?>
|
||||
<div class="timeline-details">
|
||||
<?php echo formatDetails($event['details'], $event['action_type']); ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
<?php endif; ?>
|
||||
|
||||
<!-- Comment List in separate sub-frame -->
|
||||
<div class="ascii-frame-inner">
|
||||
<h2>Comment History</h2>
|
||||
<div class="comments-list">
|
||||
<?php
|
||||
foreach ($comments as $comment) {
|
||||
// Use display_name_formatted which falls back appropriately
|
||||
$displayName = $comment['display_name_formatted'] ?? $comment['user_name'] ?? 'Unknown User';
|
||||
echo "<div class='comment'>";
|
||||
echo "<div class='comment-header'>";
|
||||
echo "<span class='comment-user'>" . htmlspecialchars($displayName) . "</span>";
|
||||
echo "<span class='comment-date'>" . date('M d, Y H:i', strtotime($comment['created_at'])) . "</span>";
|
||||
echo "</div>";
|
||||
echo "<div class='comment-text'>";
|
||||
if ($comment['markdown_enabled']) {
|
||||
// For markdown comments, use JavaScript to render
|
||||
echo "<script>document.write(marked.parse(" . json_encode($comment['comment_text']) . "))</script>";
|
||||
} else {
|
||||
// For non-markdown comments, convert line breaks to <br> and escape HTML
|
||||
echo nl2br(htmlspecialchars($comment['comment_text']));
|
||||
}
|
||||
echo "</div>";
|
||||
echo "</div>";
|
||||
}
|
||||
?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="activity-tab" class="tab-content">
|
||||
<div class="ascii-subsection-header">Activity Timeline</div>
|
||||
<div class="timeline-container">
|
||||
<?php if (empty($timeline)): ?>
|
||||
<p>No activity recorded yet.</p>
|
||||
<?php else: ?>
|
||||
<?php foreach ($timeline as $event): ?>
|
||||
<div class="timeline-event">
|
||||
<div class="timeline-icon"><?php echo getEventIcon($event['action_type']); ?></div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-header">
|
||||
<strong><?php echo htmlspecialchars($event['display_name'] ?? $event['username'] ?? 'System'); ?></strong>
|
||||
<span class="timeline-action"><?php echo formatAction($event); ?></span>
|
||||
<span class="timeline-date"><?php echo date('M d, Y H:i', strtotime($event['created_at'])); ?></span>
|
||||
</div>
|
||||
<?php if (!empty($event['details'])): ?>
|
||||
<div class="timeline-details">
|
||||
<?php echo formatDetails($event['details'], $event['action_type']); ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- END OUTER FRAME -->
|
||||
<script>
|
||||
// Initialize the ticket view
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
|
||||
Reference in New Issue
Block a user