v2
This commit is contained in:
HotSwapp
286
templates/support_modal.html
Normal file
286
templates/support_modal.html
Normal file
@@ -0,0 +1,286 @@
|
||||
<!-- 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>
|
||||
Reference in New Issue
Block a user