2025-05-16 20:02:49 -04:00
|
|
|
<?php
|
|
|
|
|
// This file contains the HTML template for a ticket
|
2026-01-01 18:25:19 -05:00
|
|
|
// It receives $ticket, $comments, and $timeline variables from the controller
|
|
|
|
|
|
|
|
|
|
// Helper functions for timeline display
|
|
|
|
|
function getEventIcon($actionType) {
|
|
|
|
|
$icons = [
|
|
|
|
|
'create' => '✨',
|
|
|
|
|
'update' => '📝',
|
|
|
|
|
'comment' => '💬',
|
|
|
|
|
'view' => '👁️',
|
|
|
|
|
'assign' => '👤',
|
|
|
|
|
'status_change' => '🔄'
|
|
|
|
|
];
|
|
|
|
|
return $icons[$actionType] ?? '•';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function formatAction($event) {
|
|
|
|
|
$actions = [
|
|
|
|
|
'create' => 'created this ticket',
|
|
|
|
|
'update' => 'updated this ticket',
|
|
|
|
|
'comment' => 'added a comment',
|
|
|
|
|
'view' => 'viewed this ticket',
|
|
|
|
|
'assign' => 'assigned this ticket',
|
|
|
|
|
'status_change' => 'changed the status'
|
|
|
|
|
];
|
|
|
|
|
return $actions[$event['action_type']] ?? $event['action_type'];
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function formatDetails($details, $actionType) {
|
|
|
|
|
if ($actionType === 'update' && is_array($details)) {
|
|
|
|
|
$changes = [];
|
|
|
|
|
foreach ($details as $field => $value) {
|
|
|
|
|
if ($field === 'old_value' || $field === 'new_value') continue;
|
|
|
|
|
$changes[] = "<strong>" . htmlspecialchars($field) . ":</strong> " . htmlspecialchars($value);
|
|
|
|
|
}
|
|
|
|
|
return implode(', ', $changes);
|
|
|
|
|
}
|
|
|
|
|
return '';
|
|
|
|
|
}
|
2025-05-16 20:02:49 -04:00
|
|
|
?>
|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
<title>Ticket #<?php echo $ticket['ticket_id']; ?></title>
|
|
|
|
|
<link rel="icon" type="image/png" href="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/images/favicon.png">
|
|
|
|
|
<link rel="stylesheet" href="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/css/dashboard.css">
|
|
|
|
|
<link rel="stylesheet" href="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/css/ticket.css">
|
|
|
|
|
<script src="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/js/dashboard.js"></script>
|
|
|
|
|
<script src="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/js/ticket.js"></script>
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
|
|
|
|
|
<script>
|
|
|
|
|
// Store ticket data in a global variable
|
|
|
|
|
window.ticketData = {
|
|
|
|
|
ticket_id: "<?php echo $ticket['ticket_id']; ?>",
|
|
|
|
|
title: "<?php echo htmlspecialchars($ticket['title']); ?>",
|
|
|
|
|
status: "<?php echo $ticket['status']; ?>",
|
|
|
|
|
priority: "<?php echo $ticket['priority']; ?>",
|
|
|
|
|
category: "<?php echo $ticket['category']; ?>",
|
|
|
|
|
type: "<?php echo $ticket['type']; ?>"
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
2026-01-01 16:14:56 -05:00
|
|
|
<div class="user-header">
|
|
|
|
|
<div class="user-header-left">
|
|
|
|
|
<a href="/" class="back-link">← Dashboard</a>
|
2026-01-01 15:40:32 -05:00
|
|
|
</div>
|
2026-01-01 16:14:56 -05:00
|
|
|
<div class="user-header-right">
|
2026-01-01 15:40:32 -05:00
|
|
|
<?php if (isset($GLOBALS['currentUser'])): ?>
|
2026-01-01 16:14:56 -05:00
|
|
|
<span class="user-name">👤 <?php echo htmlspecialchars($GLOBALS['currentUser']['display_name'] ?? $GLOBALS['currentUser']['username']); ?></span>
|
2026-01-01 15:40:32 -05:00
|
|
|
<?php if ($GLOBALS['currentUser']['is_admin']): ?>
|
2026-01-01 16:14:56 -05:00
|
|
|
<span class="admin-badge">Admin</span>
|
2026-01-01 15:40:32 -05:00
|
|
|
<?php endif; ?>
|
|
|
|
|
<?php endif; ?>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2026-01-01 16:14:56 -05:00
|
|
|
<style>
|
|
|
|
|
.user-header {
|
|
|
|
|
background: var(--header-bg, #2c3e50);
|
2026-01-01 16:40:04 -05:00
|
|
|
padding: 0.5rem 1rem;
|
2026-01-01 17:33:39 -05:00
|
|
|
margin-right: 60px; /* Space for theme toggle */
|
|
|
|
|
margin-left: 50px; /* Space for hamburger menu */
|
2026-01-01 16:14:56 -05:00
|
|
|
color: var(--header-text, white);
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
align-items: center;
|
|
|
|
|
border-bottom: 1px solid var(--border-color, #ddd);
|
2026-01-01 16:40:04 -05:00
|
|
|
box-sizing: border-box;
|
2026-01-01 16:14:56 -05:00
|
|
|
}
|
|
|
|
|
body.light-mode .user-header {
|
|
|
|
|
--header-bg: #f8f9fa;
|
|
|
|
|
--header-text: #333;
|
|
|
|
|
--border-color: #dee2e6;
|
|
|
|
|
}
|
|
|
|
|
body.dark-mode .user-header {
|
|
|
|
|
--header-bg: #2c3e50;
|
|
|
|
|
--header-text: white;
|
|
|
|
|
--border-color: #444;
|
|
|
|
|
}
|
|
|
|
|
.user-header-left, .user-header-right {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
2026-01-01 16:40:04 -05:00
|
|
|
gap: 0.75rem;
|
|
|
|
|
flex-shrink: 1;
|
|
|
|
|
min-width: 0;
|
2026-01-01 16:14:56 -05:00
|
|
|
}
|
|
|
|
|
.back-link {
|
|
|
|
|
color: var(--header-text);
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
font-weight: bold;
|
2026-01-01 16:40:04 -05:00
|
|
|
font-size: 1rem;
|
|
|
|
|
white-space: nowrap;
|
2026-01-01 16:14:56 -05:00
|
|
|
}
|
|
|
|
|
.back-link:hover {
|
|
|
|
|
text-decoration: underline;
|
|
|
|
|
}
|
|
|
|
|
.user-name {
|
|
|
|
|
color: var(--header-text);
|
2026-01-01 16:40:04 -05:00
|
|
|
font-size: 0.9rem;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
text-overflow: ellipsis;
|
2026-01-01 16:14:56 -05:00
|
|
|
}
|
|
|
|
|
.admin-badge {
|
|
|
|
|
background: #e74c3c;
|
|
|
|
|
color: white;
|
2026-01-01 16:40:04 -05:00
|
|
|
padding: 0.2rem 0.4rem;
|
2026-01-01 16:14:56 -05:00
|
|
|
border-radius: 4px;
|
2026-01-01 16:40:04 -05:00
|
|
|
font-size: 0.75rem;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
}
|
|
|
|
|
/* Responsive design for smaller screens */
|
|
|
|
|
@media (max-width: 768px) {
|
|
|
|
|
.user-header {
|
|
|
|
|
padding: 0.5rem 0.75rem;
|
|
|
|
|
}
|
|
|
|
|
.back-link {
|
|
|
|
|
font-size: 0.9rem;
|
|
|
|
|
}
|
|
|
|
|
.user-name {
|
|
|
|
|
font-size: 0.85rem;
|
|
|
|
|
}
|
2026-01-01 16:14:56 -05:00
|
|
|
}
|
|
|
|
|
</style>
|
2025-05-16 20:02:49 -04:00
|
|
|
<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">
|
2026-01-01 16:14:56 -05:00
|
|
|
<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>
|
2026-01-01 18:36:34 -05:00
|
|
|
<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>
|
2026-01-01 16:14:56 -05:00
|
|
|
</div>
|
2025-05-16 20:02:49 -04:00
|
|
|
<div class="header-controls">
|
|
|
|
|
<div class="status-priority-group">
|
2025-09-05 11:08:56 -04:00
|
|
|
<span id="statusDisplay" class="status-<?php echo str_replace(' ', '-', $ticket["status"]); ?>"><?php echo $ticket["status"]; ?></span>
|
2025-05-16 20:02:49 -04:00
|
|
|
<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">
|
|
|
|
|
<div class="ticket-tabs">
|
|
|
|
|
<button class="tab-btn active" onclick="showTab('description')">Description</button>
|
|
|
|
|
<button class="tab-btn" onclick="showTab('comments')">Comments</button>
|
2026-01-01 18:25:19 -05:00
|
|
|
<button class="tab-btn" onclick="showTab('activity')">Activity</button>
|
2025-05-16 20:02:49 -04:00
|
|
|
</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>
|
|
|
|
|
|
|
|
|
|
<div id="comments-tab" class="tab-content">
|
|
|
|
|
<div class="comments-section">
|
|
|
|
|
<h2>Comments</h2>
|
|
|
|
|
<div class="comment-form">
|
|
|
|
|
<textarea id="newComment" placeholder="Add a comment..."></textarea>
|
|
|
|
|
<div class="comment-controls">
|
|
|
|
|
<div class="markdown-toggles">
|
|
|
|
|
<div class="preview-toggle">
|
|
|
|
|
<label class="switch">
|
|
|
|
|
<input type="checkbox" id="markdownMaster" onchange="toggleMarkdownMode()">
|
|
|
|
|
<span class="slider round"></span>
|
|
|
|
|
</label>
|
|
|
|
|
<span class="toggle-label">Enable Markdown</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="preview-toggle">
|
|
|
|
|
<label class="switch">
|
|
|
|
|
<input type="checkbox" id="markdownToggle" onchange="togglePreview()" disabled>
|
|
|
|
|
<span class="slider round"></span>
|
|
|
|
|
</label>
|
|
|
|
|
<span class="toggle-label">Preview Markdown</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<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) {
|
2026-01-01 15:40:32 -05:00
|
|
|
// Use display_name_formatted which falls back appropriately
|
|
|
|
|
$displayName = $comment['display_name_formatted'] ?? $comment['user_name'] ?? 'Unknown User';
|
2025-05-16 20:02:49 -04:00
|
|
|
echo "<div class='comment'>";
|
|
|
|
|
echo "<div class='comment-header'>";
|
2026-01-01 15:40:32 -05:00
|
|
|
echo "<span class='comment-user'>" . htmlspecialchars($displayName) . "</span>";
|
2025-05-16 20:02:49 -04:00
|
|
|
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']) {
|
2025-09-05 11:08:56 -04:00
|
|
|
// For markdown comments, use JavaScript to render
|
2025-05-16 20:02:49 -04:00
|
|
|
echo "<script>document.write(marked.parse(" . json_encode($comment['comment_text']) . "))</script>";
|
|
|
|
|
} else {
|
2025-09-05 11:08:56 -04:00
|
|
|
// For non-markdown comments, convert line breaks to <br> and escape HTML
|
|
|
|
|
echo nl2br(htmlspecialchars($comment['comment_text']));
|
2025-05-16 20:02:49 -04:00
|
|
|
}
|
|
|
|
|
echo "</div>";
|
|
|
|
|
echo "</div>";
|
|
|
|
|
}
|
|
|
|
|
?>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2026-01-01 18:25:19 -05:00
|
|
|
|
|
|
|
|
<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; ?>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2025-05-16 20:02:49 -04:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<script>
|
|
|
|
|
// Initialize the ticket view
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
|
|
|
if (typeof showTab === 'function') {
|
|
|
|
|
showTab('description');
|
|
|
|
|
} else {
|
|
|
|
|
console.error('showTab function not defined');
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
</script>
|
2025-09-05 11:08:56 -04:00
|
|
|
<script>
|
|
|
|
|
// Make ticket data available to JavaScript
|
|
|
|
|
window.ticketData = {
|
|
|
|
|
id: <?php echo json_encode($ticket['ticket_id']); ?>,
|
|
|
|
|
status: <?php echo json_encode($ticket['status']); ?>,
|
|
|
|
|
priority: <?php echo json_encode($ticket['priority']); ?>,
|
|
|
|
|
category: <?php echo json_encode($ticket['category']); ?>,
|
|
|
|
|
type: <?php echo json_encode($ticket['type']); ?>,
|
|
|
|
|
title: <?php echo json_encode($ticket['title']); ?>
|
|
|
|
|
};
|
|
|
|
|
console.log('Ticket data loaded:', window.ticketData);
|
|
|
|
|
</script>
|
2025-05-16 20:02:49 -04:00
|
|
|
</body>
|
|
|
|
|
</html>
|
