286 lines
13 KiB
HTML
286 lines
13 KiB
HTML
<!-- Support Ticket Modal -->
|
|
<div class="modal fade" id="supportModal" tabindex="-1" aria-labelledby="supportModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header bg-primary text-white">
|
|
<h5 class="modal-title" id="supportModalLabel">
|
|
<i class="fas fa-bug me-2"></i>Submit Internal Issue
|
|
</h5>
|
|
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="supportForm">
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3">
|
|
<label for="contactName" class="form-label">Reporter Name *</label>
|
|
<input type="text" class="form-control" id="contactName" required>
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<label for="contactEmail" class="form-label">Reporter Email *</label>
|
|
<input type="email" class="form-control" id="contactEmail" required>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3">
|
|
<label for="ticketCategory" class="form-label">Issue Type *</label>
|
|
<select class="form-select" id="ticketCategory" required>
|
|
<option value="">Select issue type...</option>
|
|
<option value="bug_report" selected>Bug Report</option>
|
|
<option value="qa_issue">QA Issue</option>
|
|
<option value="feature_request">Feature Request</option>
|
|
<option value="database_issue">Database Issue</option>
|
|
<option value="system_error">System Error</option>
|
|
<option value="user_access">User Access</option>
|
|
<option value="performance">Performance Issue</option>
|
|
<option value="documentation">Documentation</option>
|
|
<option value="configuration">Configuration</option>
|
|
<option value="testing">Testing Request</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<label for="ticketPriority" class="form-label">Priority</label>
|
|
<select class="form-select" id="ticketPriority">
|
|
<option value="low">Low</option>
|
|
<option value="medium" selected>Medium</option>
|
|
<option value="high">High</option>
|
|
<option value="urgent">Urgent</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="ticketSubject" class="form-label">Issue Summary *</label>
|
|
<input type="text" class="form-control" id="ticketSubject" maxlength="200" required>
|
|
<div class="form-text">Brief summary of the bug/issue</div>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="ticketDescription" class="form-label">Detailed Description *</label>
|
|
<textarea class="form-control" id="ticketDescription" rows="5" required placeholder="Steps to reproduce: 1. 2. 3. Expected behavior: Actual behavior: Additional context:"></textarea>
|
|
<div class="form-text">Include steps to reproduce, expected vs actual behavior, error messages, etc.</div>
|
|
</div>
|
|
|
|
<!-- System Information (auto-populated) -->
|
|
<div class="card bg-light mb-3">
|
|
<div class="card-body">
|
|
<h6 class="card-title">
|
|
<i class="fas fa-info-circle me-1"></i>System Information
|
|
<small class="text-muted">(automatically included)</small>
|
|
</h6>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<small><strong>Current Page:</strong> <span id="currentPageInfo">Loading...</span></small>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<small><strong>Browser:</strong> <span id="browserInfo">Loading...</span></small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="alert alert-info">
|
|
<i class="fas fa-info-circle me-2"></i>
|
|
<strong>Note:</strong> Your issue will be assigned a tracking number and the development team will be notified automatically.
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
|
<button type="button" class="btn btn-primary" id="submitSupportTicket">
|
|
<i class="fas fa-bug me-2"></i>Submit Issue
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Support Ticket Success Modal -->
|
|
<div class="modal fade" id="supportSuccessModal" tabindex="-1" aria-labelledby="supportSuccessLabel" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header bg-success text-white">
|
|
<h5 class="modal-title" id="supportSuccessLabel">
|
|
<i class="fas fa-check-circle me-2"></i>Issue Submitted Successfully
|
|
</h5>
|
|
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body text-center">
|
|
<div class="mb-3">
|
|
<i class="fas fa-bug fa-3x text-success mb-3"></i>
|
|
<h4>Issue logged successfully!</h4>
|
|
</div>
|
|
<div class="alert alert-success">
|
|
<strong>Issue ID:</strong> <span id="newTicketNumber"></span>
|
|
</div>
|
|
<p>Your issue has been logged and the development team has been notified. You'll receive updates on the resolution progress.</p>
|
|
<div class="mt-4">
|
|
<h6>What happens next?</h6>
|
|
<ul class="list-unstyled text-start">
|
|
<li><i class="fas fa-check text-success me-2"></i>Issue logged in tracking system</li>
|
|
<li><i class="fas fa-users text-warning me-2"></i>Development team has been notified</li>
|
|
<li><i class="fas fa-code text-info me-2"></i>Issue will be triaged and prioritized</li>
|
|
<li><i class="fas fa-bell text-primary me-2"></i>You'll get status updates via email</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-success" data-bs-dismiss="modal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Support ticket functionality
|
|
let supportSystem = {
|
|
currentPageInfo: 'Unknown',
|
|
browserInfo: 'Unknown',
|
|
|
|
init: function() {
|
|
this.detectSystemInfo();
|
|
this.setupEventListeners();
|
|
},
|
|
|
|
detectSystemInfo: function() {
|
|
// Get current page information
|
|
const path = window.location.pathname;
|
|
const pageNames = {
|
|
'/': 'Dashboard',
|
|
'/login': 'Login Page',
|
|
'/customers': 'Customer Management',
|
|
'/files': 'File Cabinet',
|
|
'/financial': 'Financial/Ledger',
|
|
'/documents': 'Document Management',
|
|
'/import': 'Data Import',
|
|
'/search': 'Advanced Search',
|
|
'/admin': 'System Administration'
|
|
};
|
|
|
|
this.currentPageInfo = pageNames[path] || `Page: ${path}`;
|
|
|
|
// Get browser information
|
|
const userAgent = navigator.userAgent;
|
|
let browserName = 'Unknown';
|
|
|
|
if (userAgent.includes('Chrome') && !userAgent.includes('Edg')) {
|
|
browserName = 'Chrome';
|
|
} else if (userAgent.includes('Firefox')) {
|
|
browserName = 'Firefox';
|
|
} else if (userAgent.includes('Safari') && !userAgent.includes('Chrome')) {
|
|
browserName = 'Safari';
|
|
} else if (userAgent.includes('Edg')) {
|
|
browserName = 'Edge';
|
|
}
|
|
|
|
this.browserInfo = `${browserName} (${navigator.platform})`;
|
|
|
|
// Update modal display
|
|
document.getElementById('currentPageInfo').textContent = this.currentPageInfo;
|
|
document.getElementById('browserInfo').textContent = this.browserInfo;
|
|
},
|
|
|
|
setupEventListeners: function() {
|
|
// Auto-populate user info if logged in
|
|
const supportModal = document.getElementById('supportModal');
|
|
supportModal.addEventListener('show.bs.modal', this.populateUserInfo.bind(this));
|
|
|
|
// Submit button
|
|
document.getElementById('submitSupportTicket').addEventListener('click', this.submitTicket.bind(this));
|
|
|
|
// Form validation
|
|
const form = document.getElementById('supportForm');
|
|
form.addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
supportSystem.submitTicket();
|
|
});
|
|
},
|
|
|
|
populateUserInfo: function() {
|
|
// Try to get current user info from the global app state
|
|
if (window.app && window.app.user) {
|
|
const user = window.app.user;
|
|
document.getElementById('contactName').value = `${user.first_name || ''} ${user.last_name || ''}`.trim() || user.username;
|
|
document.getElementById('contactEmail').value = user.email;
|
|
}
|
|
},
|
|
|
|
submitTicket: async function() {
|
|
const form = document.getElementById('supportForm');
|
|
if (!form.checkValidity()) {
|
|
form.classList.add('was-validated');
|
|
return;
|
|
}
|
|
|
|
const submitBtn = document.getElementById('submitSupportTicket');
|
|
const originalText = submitBtn.innerHTML;
|
|
submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Submitting...';
|
|
submitBtn.disabled = true;
|
|
|
|
try {
|
|
const ticketData = {
|
|
contact_name: document.getElementById('contactName').value,
|
|
contact_email: document.getElementById('contactEmail').value,
|
|
category: document.getElementById('ticketCategory').value,
|
|
priority: document.getElementById('ticketPriority').value,
|
|
subject: document.getElementById('ticketSubject').value,
|
|
description: document.getElementById('ticketDescription').value,
|
|
current_page: this.currentPageInfo,
|
|
browser_info: this.browserInfo
|
|
};
|
|
|
|
const response = await fetch('/api/support/tickets', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify(ticketData)
|
|
});
|
|
|
|
const result = await response.json();
|
|
|
|
if (response.ok) {
|
|
// Hide support modal
|
|
bootstrap.Modal.getInstance(document.getElementById('supportModal')).hide();
|
|
|
|
// Show success modal
|
|
document.getElementById('newTicketNumber').textContent = result.ticket_number;
|
|
new bootstrap.Modal(document.getElementById('supportSuccessModal')).show();
|
|
|
|
// Reset form
|
|
form.reset();
|
|
form.classList.remove('was-validated');
|
|
|
|
} else {
|
|
throw new Error(result.detail || 'Failed to submit ticket');
|
|
}
|
|
|
|
} catch (error) {
|
|
console.error('Error submitting support ticket:', error);
|
|
this.showAlert('Failed to submit support ticket: ' + error.message, 'error');
|
|
} finally {
|
|
submitBtn.innerHTML = originalText;
|
|
submitBtn.disabled = false;
|
|
}
|
|
},
|
|
|
|
showAlert: function(message, type = 'info') {
|
|
// Use existing notification system if available
|
|
if (window.showNotification) {
|
|
window.showNotification(message, type);
|
|
} else {
|
|
alert(message);
|
|
}
|
|
}
|
|
};
|
|
|
|
// Initialize when DOM is loaded
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
supportSystem.init();
|
|
});
|
|
|
|
// Global function to open support modal
|
|
window.openSupportModal = function() {
|
|
new bootstrap.Modal(document.getElementById('supportModal')).show();
|
|
};
|
|
</script> |