Jared Vititoe
2f9af856dc
- dashboard.css: replace all hardcoded Tailwind hex colors (#2d3748, #1a202c, #e2e8f0, #4a5568, #007cba, #3b82f6 etc.) in dark-mode sections and component styles with terminal CSS variables (--bg-*, --text-*, --border-color, --terminal-green/amber) - dashboard.css: fix card-priority colors white/black → var(--bg-primary) - dashboard.css: fix card-assignee border-radius: 50% → 0 (no circles rule) - dashboard.css: fix mobile bottom-sheet border-radius: 12px → 0 - dashboard.css: fix search-box focus border (#007cba → var(--terminal-green)) - dashboard.css: fix save-filter button blue (#3b82f6) → terminal green - dashboard.css: fix search-results-info blue highlight → terminal green - dashboard.css: fix btn-bulk/btn-secondary dark-mode bootstrap colors → terminal - ticket.css: replace comprehensive dark-mode Tailwind hex block with CSS vars - ticket.css: fix status-select white/black text → var(--bg-primary) - ticket.css: fix status-select.status-resolved hardcoded #28a745 → var(--status-open) - ticket.css: fix timeline dark-mode hardcoded colors → CSS vars - ticket.css: fix .slider:before background white → var(--bg-primary) - ticket.css: fix .btn-danger:hover color white → var(--bg-primary) - ticket.css: fix visibility-groups-list label border-radius: 4px → 0 - ticket.css: add will-change: opacity to age-warning/age-critical animations - views: bump CSS version strings to v=20260319c - views/DashboardView.php: add aria-labels to card view quick action buttons Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
358 lines
18 KiB
PHP
358 lines
18 KiB
PHP
<?php
|
|
// This file contains the HTML template for creating a new ticket
|
|
require_once __DIR__ . '/../middleware/SecurityHeadersMiddleware.php';
|
|
require_once __DIR__ . '/../middleware/CsrfMiddleware.php';
|
|
$nonce = SecurityHeadersMiddleware::getNonce();
|
|
?>
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Create New Ticket</title>
|
|
<link rel="icon" type="image/png" href="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/images/favicon.png">
|
|
<link rel="stylesheet" href="/assets/css/base.css">
|
|
<link rel="stylesheet" href="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/css/dashboard.css?v=20260319c">
|
|
<link rel="stylesheet" href="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/css/ticket.css?v=20260319c">
|
|
<script nonce="<?php echo $nonce; ?>" src="/assets/js/base.js"></script>
|
|
<script nonce="<?php echo $nonce; ?>" src="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/js/utils.js"></script>
|
|
<script nonce="<?php echo $nonce; ?>" src="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/js/dashboard.js?v=20260205"></script>
|
|
<script nonce="<?php echo $nonce; ?>">
|
|
// CSRF Token for AJAX requests
|
|
window.CSRF_TOKEN = '<?php echo CsrfMiddleware::getToken(); ?>';
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div class="user-header">
|
|
<div class="user-header-left">
|
|
<a href="/" class="back-link">[ ← DASHBOARD ]</a>
|
|
</div>
|
|
<div class="user-header-right">
|
|
<?php if (isset($GLOBALS['currentUser'])): ?>
|
|
<span class="user-name">[ <?php echo htmlspecialchars(strtoupper($GLOBALS['currentUser']['display_name'] ?? $GLOBALS['currentUser']['username'])); ?> ]</span>
|
|
<?php if ($GLOBALS['currentUser']['is_admin']): ?>
|
|
<span class="admin-badge">[ ADMIN ]</span>
|
|
<?php endif; ?>
|
|
<?php endif; ?>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- OUTER FRAME: Create Ticket Form Container -->
|
|
<div class="ascii-frame-outer">
|
|
<span class="bottom-left-corner">╚</span>
|
|
<span class="bottom-right-corner">╝</span>
|
|
|
|
<!-- SECTION 1: Form Header -->
|
|
<div class="ascii-section-header">Create New Ticket</div>
|
|
<div class="ascii-content">
|
|
<div class="ascii-frame-inner">
|
|
<div class="ticket-header">
|
|
<h2>New Ticket Form</h2>
|
|
<p style="color: var(--terminal-green); font-family: var(--font-mono); font-size: 0.9rem; margin-top: 0.5rem;">
|
|
Complete the form below to create a new ticket
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<?php if (isset($error)): ?>
|
|
<!-- DIVIDER -->
|
|
<div class="ascii-divider"></div>
|
|
|
|
<!-- ERROR SECTION -->
|
|
<div class="ascii-content">
|
|
<div class="ascii-frame-inner">
|
|
<div class="error-message" style="color: var(--priority-1); border: 2px solid var(--priority-1); padding: 1rem; background: rgba(231, 76, 60, 0.1);">
|
|
<strong>[ ! ] ERROR:</strong> <?php echo htmlspecialchars($error, ENT_QUOTES, 'UTF-8'); ?>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<?php endif; ?>
|
|
|
|
<!-- DIVIDER -->
|
|
<div class="ascii-divider"></div>
|
|
|
|
<form method="POST" action="<?php echo $GLOBALS['config']['BASE_URL']; ?>/ticket/create" class="ticket-form">
|
|
|
|
<!-- SECTION 2: Template Selection -->
|
|
<div class="ascii-section-header">Template Selection</div>
|
|
<div class="ascii-content">
|
|
<div class="ascii-frame-inner">
|
|
<div class="detail-group">
|
|
<label for="templateSelect">Use Template (Optional)</label>
|
|
<select id="templateSelect" class="editable" data-action="load-template">
|
|
<option value="">-- No Template --</option>
|
|
<?php if (isset($templates) && !empty($templates)): ?>
|
|
<?php foreach ($templates as $template): ?>
|
|
<option value="<?php echo $template['template_id']; ?>">
|
|
<?php echo htmlspecialchars($template['template_name']); ?>
|
|
</option>
|
|
<?php endforeach; ?>
|
|
<?php endif; ?>
|
|
</select>
|
|
<p style="color: var(--terminal-green); font-size: 0.85rem; margin-top: 0.5rem; font-family: var(--font-mono);">
|
|
Select a template to auto-fill form fields
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- DIVIDER -->
|
|
<div class="ascii-divider"></div>
|
|
|
|
<!-- SECTION 3: Basic Information -->
|
|
<div class="ascii-section-header">Basic Information</div>
|
|
<div class="ascii-content">
|
|
<div class="ascii-frame-inner">
|
|
<div class="detail-group">
|
|
<label for="title">Ticket Title *</label>
|
|
<input type="text" id="title" name="title" class="editable" required placeholder="Enter a descriptive title for this ticket">
|
|
</div>
|
|
<!-- Duplicate Warning Area -->
|
|
<div id="duplicateWarning" role="alert" aria-live="polite" aria-atomic="true" style="display: none; margin-top: 1rem; padding: 1rem; border: 2px solid var(--terminal-amber); background: rgba(241, 196, 15, 0.1);">
|
|
<div style="color: var(--terminal-amber); font-weight: bold; margin-bottom: 0.5rem;">
|
|
Possible Duplicates Found
|
|
</div>
|
|
<div id="duplicatesList" aria-live="polite"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- DIVIDER -->
|
|
<div class="ascii-divider"></div>
|
|
|
|
<!-- SECTION 4: Ticket Metadata -->
|
|
<div class="ascii-section-header">Ticket Metadata</div>
|
|
<div class="ascii-content">
|
|
<div class="ascii-frame-inner">
|
|
<div class="detail-group status-priority-row">
|
|
<div class="detail-quarter">
|
|
<label for="status">Status</label>
|
|
<select id="status" name="status" class="editable">
|
|
<option value="Open" selected>Open</option>
|
|
<option value="Closed">Closed</option>
|
|
</select>
|
|
</div>
|
|
<div class="detail-quarter">
|
|
<label for="priority">Priority</label>
|
|
<select id="priority" name="priority" class="editable">
|
|
<option value="1">P1 - Critical Impact</option>
|
|
<option value="2">P2 - High Impact</option>
|
|
<option value="3">P3 - Medium Impact</option>
|
|
<option value="4" selected>P4 - Low Impact</option>
|
|
</select>
|
|
</div>
|
|
<div class="detail-quarter">
|
|
<label for="category">Category</label>
|
|
<select id="category" name="category" class="editable">
|
|
<option value="Hardware">Hardware</option>
|
|
<option value="Software">Software</option>
|
|
<option value="Network">Network</option>
|
|
<option value="Security">Security</option>
|
|
<option value="General" selected>General</option>
|
|
</select>
|
|
</div>
|
|
<div class="detail-quarter">
|
|
<label for="type">Type</label>
|
|
<select id="type" name="type" class="editable">
|
|
<option value="Maintenance">Maintenance</option>
|
|
<option value="Install">Install</option>
|
|
<option value="Task">Task</option>
|
|
<option value="Upgrade">Upgrade</option>
|
|
<option value="Issue" selected>Issue</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- DIVIDER -->
|
|
<div class="ascii-divider"></div>
|
|
|
|
<!-- SECTION 4b: Assignment -->
|
|
<div class="ascii-section-header">Assignment</div>
|
|
<div class="ascii-content">
|
|
<div class="ascii-frame-inner">
|
|
<div class="detail-group">
|
|
<label for="assigned_to">Assign To (Optional)</label>
|
|
<select id="assigned_to" name="assigned_to" class="editable">
|
|
<option value="">-- Unassigned --</option>
|
|
<?php if (isset($allUsers) && !empty($allUsers)): ?>
|
|
<?php foreach ($allUsers as $user): ?>
|
|
<option value="<?php echo $user['user_id']; ?>">
|
|
<?php echo htmlspecialchars($user['display_name'] ?? $user['username']); ?>
|
|
</option>
|
|
<?php endforeach; ?>
|
|
<?php endif; ?>
|
|
</select>
|
|
<p style="color: var(--terminal-green); font-size: 0.85rem; margin-top: 0.5rem; font-family: var(--font-mono);">
|
|
Select a user to assign this ticket to
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- DIVIDER -->
|
|
<div class="ascii-divider"></div>
|
|
|
|
<!-- SECTION 5: Visibility Settings -->
|
|
<div class="ascii-section-header">Visibility Settings</div>
|
|
<div class="ascii-content">
|
|
<div class="ascii-frame-inner">
|
|
<div class="detail-group">
|
|
<label for="visibility">Ticket Visibility</label>
|
|
<select id="visibility" name="visibility" class="editable" data-action="toggle-visibility-groups">
|
|
<option value="public" selected>Public - All authenticated users</option>
|
|
<option value="internal">Internal - Specific groups only</option>
|
|
<option value="confidential">Confidential - Creator, assignee, admins only</option>
|
|
</select>
|
|
<p style="color: var(--terminal-green); font-size: 0.85rem; margin-top: 0.5rem; font-family: var(--font-mono);">
|
|
Controls who can view this ticket
|
|
</p>
|
|
</div>
|
|
<div id="visibilityGroupsContainer" class="detail-group" style="display: none; margin-top: 1rem;">
|
|
<label>Allowed Groups</label>
|
|
<div class="visibility-groups-list" style="display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.5rem;">
|
|
<?php
|
|
// Get all available groups
|
|
require_once __DIR__ . '/../models/UserModel.php';
|
|
$userModel = new UserModel($conn);
|
|
$allGroups = $userModel->getAllGroups();
|
|
foreach ($allGroups as $group):
|
|
?>
|
|
<label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer;">
|
|
<input type="checkbox" name="visibility_groups[]" value="<?php echo htmlspecialchars($group); ?>" class="visibility-group-checkbox">
|
|
<span class="group-badge"><?php echo htmlspecialchars($group); ?></span>
|
|
</label>
|
|
<?php endforeach; ?>
|
|
<?php if (empty($allGroups)): ?>
|
|
<span style="color: var(--text-muted);">No groups available</span>
|
|
<?php endif; ?>
|
|
</div>
|
|
<p style="color: var(--terminal-amber); font-size: 0.85rem; margin-top: 0.5rem; font-family: var(--font-mono);">
|
|
Select which groups can view this ticket
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- DIVIDER -->
|
|
<div class="ascii-divider"></div>
|
|
|
|
<!-- SECTION 6: Detailed Description -->
|
|
<div class="ascii-section-header">Detailed Description</div>
|
|
<div class="ascii-content">
|
|
<div class="ascii-frame-inner">
|
|
<div class="detail-group full-width">
|
|
<label for="description">Description *</label>
|
|
<textarea id="description" name="description" class="editable" rows="15" required placeholder="Provide a detailed description of the ticket..."></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- DIVIDER -->
|
|
<div class="ascii-divider"></div>
|
|
|
|
<!-- SECTION 6: Form Actions -->
|
|
<div class="ascii-section-header">Form Actions</div>
|
|
<div class="ascii-content">
|
|
<div class="ascii-frame-inner">
|
|
<div class="ticket-footer">
|
|
<button type="submit" class="btn primary">Create Ticket</button>
|
|
<button type="button" data-action="navigate" data-url="<?php echo $GLOBALS['config']['BASE_URL']; ?>/" class="btn back-btn">Cancel</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</form>
|
|
</div>
|
|
<!-- END OUTER FRAME -->
|
|
|
|
<script nonce="<?php echo $nonce; ?>">
|
|
// Duplicate detection with debounce
|
|
let duplicateCheckTimeout = null;
|
|
|
|
document.getElementById('title').addEventListener('input', function() {
|
|
clearTimeout(duplicateCheckTimeout);
|
|
const title = this.value.trim();
|
|
|
|
if (title.length < 5) {
|
|
document.getElementById('duplicateWarning').style.display = 'none';
|
|
return;
|
|
}
|
|
|
|
// Debounce: wait 500ms after user stops typing
|
|
duplicateCheckTimeout = setTimeout(() => {
|
|
checkForDuplicates(title);
|
|
}, 500);
|
|
});
|
|
|
|
function checkForDuplicates(title) {
|
|
fetch('/api/check_duplicates.php?title=' + encodeURIComponent(title))
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
const warningDiv = document.getElementById('duplicateWarning');
|
|
const listDiv = document.getElementById('duplicatesList');
|
|
|
|
if (data.success && data.duplicates && data.duplicates.length > 0) {
|
|
let html = '<ul style="margin: 0; padding-left: 1.5rem; color: var(--terminal-green);">';
|
|
data.duplicates.forEach(dup => {
|
|
html += `<li style="margin-bottom: 0.5rem;">
|
|
<a href="/ticket/${escapeHtml(dup.ticket_id)}" target="_blank" style="color: var(--terminal-green);">
|
|
#${escapeHtml(dup.ticket_id)}
|
|
</a>
|
|
- ${escapeHtml(dup.title)}
|
|
<span style="color: var(--terminal-amber);">(${dup.similarity}% match, ${escapeHtml(dup.status)})</span>
|
|
</li>`;
|
|
});
|
|
html += '</ul>';
|
|
html += '<p style="margin-top: 0.5rem; font-size: 0.85rem; color: var(--terminal-green-dim);">Consider checking these tickets before creating a new one.</p>';
|
|
|
|
listDiv.innerHTML = html;
|
|
warningDiv.style.display = 'block';
|
|
} else {
|
|
warningDiv.style.display = 'none';
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error checking duplicates:', error);
|
|
});
|
|
}
|
|
|
|
function toggleVisibilityGroups() {
|
|
const visibility = document.getElementById('visibility').value;
|
|
const groupsContainer = document.getElementById('visibilityGroupsContainer');
|
|
if (visibility === 'internal') {
|
|
groupsContainer.style.display = 'block';
|
|
} else {
|
|
groupsContainer.style.display = 'none';
|
|
document.querySelectorAll('.visibility-group-checkbox').forEach(cb => cb.checked = false);
|
|
}
|
|
}
|
|
|
|
// Event delegation for data-action handlers
|
|
document.addEventListener('click', function(event) {
|
|
const target = event.target.closest('[data-action]');
|
|
if (!target) return;
|
|
|
|
const action = target.dataset.action;
|
|
if (action === 'navigate') {
|
|
window.location.href = target.dataset.url;
|
|
}
|
|
});
|
|
|
|
document.addEventListener('change', function(event) {
|
|
const target = event.target.closest('[data-action]');
|
|
if (!target) return;
|
|
|
|
const action = target.dataset.action;
|
|
if (action === 'load-template') {
|
|
loadTemplate();
|
|
} else if (action === 'toggle-visibility-groups') {
|
|
toggleVisibilityGroups();
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|