Spaces:
Sleeping
Sleeping
File size: 4,291 Bytes
58c1398 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 | /**
* Support Page Logic - Aadhaar Pro
*/
document.addEventListener('DOMContentLoaded', () => {
initSupportPage();
});
function initSupportPage() {
loadRecentTickets();
setupTicketForm();
}
/**
* Handle new ticket submission
*/
function setupTicketForm() {
const form = document.getElementById('ticket-form');
if (!form) return;
form.addEventListener('submit', async (e) => {
e.preventDefault();
const data = {
subject: document.getElementById('tick-subject').value.trim(),
category: document.getElementById('tick-category').value,
message: document.getElementById('tick-message').value.trim()
};
if (!data.subject || !data.message) {
alert('Please provide both a subject and a message.');
return;
}
try {
const btn = form.querySelector('button[type="submit"]');
const originalBtnHtml = btn.innerHTML;
btn.disabled = true;
btn.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i> Submitting...';
const res = await fetch('/api/support/create', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(data)
});
const resData = await res.json();
btn.disabled = false;
btn.innerHTML = originalBtnHtml;
if (res.ok && resData.success) {
alert(`Ticket ${resData.ticket_number} submitted successfully! Our team will get back to you soon.`);
form.reset();
loadRecentTickets(); // Refresh list
} else {
alert('Submission failed: ' + (resData.error || 'Unknown error'));
}
} catch (err) {
console.error('Support ticket error:', err);
alert('An error occurred. Please try again later.');
}
});
}
/**
* Load recent support tickets (API Integration)
*/
async function loadRecentTickets() {
const container = document.getElementById('tickets-container');
if (!container) return;
try {
const res = await fetch('/api/support/list');
const tickets = await res.json();
if (Array.isArray(tickets) && tickets.length > 0) {
container.innerHTML = tickets.map(t => `
<div class="ticket-status-item" onclick="viewTicket('${t.id}')">
<div class="ticket-info">
<span class="id">#${t.ticket_number}</span>
<div class="subject">${t.subject}</div>
<div class="date">${t.date}</div>
</div>
<span class="status-tag status-${t.status}">
${t.status.toUpperCase()}
</span>
</div>
`).join('');
} else {
container.innerHTML = '<p style="color: var(--text-muted); font-size: 0.85rem; padding: 10px;">No support tickets found.</p>';
}
} catch (err) {
console.error('Error loading tickets:', err);
container.innerHTML = '<p class="error-text">Failed to load ticket history.</p>';
}
}
/**
* Basic view ticket placeholder (could be expanded to a modal or detail page)
*/
async function viewTicket(ticketId) {
try {
const res = await fetch(`/api/support/ticket/${ticketId}`);
const t = await res.json();
if (t.error) {
alert(t.error);
return;
}
let messageThread = t.messages.map(m => `
<div class="msg-bubble ${m.sender}">
<div class="msg-meta">${m.sender === 'user' ? 'You' : 'Admin'} • ${m.time}</div>
<div class="msg-text">${m.message}</div>
</div>
`).join('');
// For now, using a simple prompt-based interaction or just an alert with history
alert(`TICKET: #${t.ticket_number}\nSUBJECT: ${t.subject}\nSTATUS: ${t.status.toUpperCase()}\n\nLATEST MESSAGES:\n${t.messages.map(m => `[${m.time}] ${m.sender.toUpperCase()}: ${m.message}`).join('\n')}`);
} catch (err) {
console.error('Error fetching ticket detail:', err);
}
}
|