Update instance_detail.html
This commit is contained in:
@@ -88,6 +88,11 @@
|
|||||||
<i class="fas fa-building me-2"></i>Company Information
|
<i class="fas fa-building me-2"></i>Company Information
|
||||||
</button>
|
</button>
|
||||||
</li>
|
</li>
|
||||||
|
<li class="nav-item" role="presentation">
|
||||||
|
<button class="nav-link" id="contacts-tab" data-bs-toggle="tab" data-bs-target="#contacts" type="button" role="tab" aria-controls="contacts" aria-selected="false">
|
||||||
|
<i class="fas fa-users me-2"></i>Contacts
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
@@ -98,45 +103,205 @@
|
|||||||
<div class="col-md-6">
|
<div class="col-md-6">
|
||||||
<h5 class="mb-3">Company Details</h5>
|
<h5 class="mb-3">Company Details</h5>
|
||||||
<div class="mb-3">
|
<div class="mb-3">
|
||||||
<label class="form-label text-muted">Company Name</label>
|
<div class="d-flex">
|
||||||
<p class="mb-0" id="company-name">Loading...</p>
|
<div class="text-muted me-2" style="min-width: 120px;" id="company-name-label">Company Name:</div>
|
||||||
|
<div class="company-value" id="company-name-value">Loading...</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="mb-3">
|
<div class="mb-3">
|
||||||
<label class="form-label text-muted">Industry</label>
|
<div class="d-flex">
|
||||||
<p class="mb-0" id="company-industry">Loading...</p>
|
<div class="text-muted me-2" style="min-width: 120px;">Industry:</div>
|
||||||
|
<div class="company-value" id="company-industry">Loading...</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="mb-3">
|
<div class="mb-3">
|
||||||
<label class="form-label text-muted">Description</label>
|
<div class="d-flex">
|
||||||
<p class="mb-0" id="company-description">Loading...</p>
|
<div class="text-muted me-2" style="min-width: 120px;">Description:</div>
|
||||||
|
<div class="company-value" id="company-description">Loading...</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-md-6">
|
<div class="col-md-6">
|
||||||
<h5 class="mb-3">Contact Information</h5>
|
<h5 class="mb-3">Contact Information</h5>
|
||||||
<div class="mb-3">
|
<div class="mb-3">
|
||||||
<label class="form-label text-muted">Email</label>
|
<div class="d-flex">
|
||||||
<p class="mb-0" id="company-email">Loading...</p>
|
<div class="text-muted me-2" style="min-width: 120px;">Email:</div>
|
||||||
|
<div class="company-value" id="company-email">Loading...</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="mb-3">
|
<div class="mb-3">
|
||||||
<label class="form-label text-muted">Phone</label>
|
<div class="d-flex">
|
||||||
<p class="mb-0" id="company-phone">Loading...</p>
|
<div class="text-muted me-2" style="min-width: 120px;">Phone:</div>
|
||||||
|
<div class="company-value" id="company-phone">Loading...</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="mb-3">
|
<div class="mb-3">
|
||||||
<label class="form-label text-muted">Website</label>
|
<div class="d-flex">
|
||||||
<p class="mb-0" id="company-website">Loading...</p>
|
<div class="text-muted me-2" style="min-width: 120px;">Website:</div>
|
||||||
|
<div class="company-value" id="company-website">Loading...</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="mb-3">
|
<div class="mb-3">
|
||||||
<label class="form-label text-muted">Address</label>
|
<div class="d-flex">
|
||||||
<p class="mb-0" id="company-address">Loading...</p>
|
<div class="text-muted me-2" style="min-width: 120px;">Address:</div>
|
||||||
|
<div class="company-value" id="company-address">Loading...</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Contacts Tab -->
|
||||||
|
<div class="tab-pane fade" id="contacts" role="tabpanel" aria-labelledby="contacts-tab">
|
||||||
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||||
|
<h5 class="mb-0">Contact List</h5>
|
||||||
|
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addContactModal">
|
||||||
|
<i class="fas fa-plus me-2"></i>Add Contact
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Contacts Table -->
|
||||||
|
<div class="table-responsive">
|
||||||
|
<table class="table table-hover">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Name</th>
|
||||||
|
<th>Email</th>
|
||||||
|
<th>Phone</th>
|
||||||
|
<th>Company</th>
|
||||||
|
<th>Position</th>
|
||||||
|
<th>Status</th>
|
||||||
|
<th>Actions</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody id="contactsTableBody">
|
||||||
|
<tr>
|
||||||
|
<td colspan="7" class="text-center">Loading contacts...</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Add Contact Modal -->
|
||||||
|
<div class="modal fade" id="addContactModal" tabindex="-1" aria-labelledby="addContactModalLabel" aria-hidden="true">
|
||||||
|
<div class="modal-dialog modal-dialog-centered">
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-header">
|
||||||
|
<h5 class="modal-title" id="addContactModalLabel">Add New Contact</h5>
|
||||||
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
<form id="addContactForm" onsubmit="addContact(event)">
|
||||||
|
<div class="mb-3">
|
||||||
|
<label for="name" class="form-label">Name</label>
|
||||||
|
<input type="text" class="form-control" id="name" name="name" required>
|
||||||
|
</div>
|
||||||
|
<div class="mb-3">
|
||||||
|
<label for="email" class="form-label">Email</label>
|
||||||
|
<input type="email" class="form-control" id="email" name="email" required>
|
||||||
|
</div>
|
||||||
|
<div class="mb-3">
|
||||||
|
<label for="phone" class="form-label">Phone</label>
|
||||||
|
<input type="tel" class="form-control" id="phone" name="phone">
|
||||||
|
</div>
|
||||||
|
<div class="mb-3">
|
||||||
|
<label for="company" class="form-label">Company</label>
|
||||||
|
<input type="text" class="form-control" id="company" name="company">
|
||||||
|
</div>
|
||||||
|
<div class="mb-3">
|
||||||
|
<label for="position" class="form-label">Position</label>
|
||||||
|
<input type="text" class="form-control" id="position" name="position">
|
||||||
|
</div>
|
||||||
|
<div class="mb-3">
|
||||||
|
<label for="status" class="form-label">Status</label>
|
||||||
|
<select class="form-select" id="status" name="status">
|
||||||
|
<option value="active">Active</option>
|
||||||
|
<option value="inactive">Inactive</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="text-end">
|
||||||
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
||||||
|
<button type="submit" class="btn btn-primary">Add Contact</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Edit Contact Modal -->
|
||||||
|
<div class="modal fade" id="editContactModal" tabindex="-1" aria-labelledby="editContactModalLabel" aria-hidden="true">
|
||||||
|
<div class="modal-dialog modal-dialog-centered">
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-header">
|
||||||
|
<h5 class="modal-title" id="editContactModalLabel">Edit Contact</h5>
|
||||||
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
<form id="editContactForm" onsubmit="updateContact(event)">
|
||||||
|
<input type="hidden" id="edit-contact-id" name="id">
|
||||||
|
<div class="mb-3">
|
||||||
|
<label for="edit-name" class="form-label">Name</label>
|
||||||
|
<input type="text" class="form-control" id="edit-name" name="name" required>
|
||||||
|
</div>
|
||||||
|
<div class="mb-3">
|
||||||
|
<label for="edit-email" class="form-label">Email</label>
|
||||||
|
<input type="email" class="form-control" id="edit-email" name="email" required>
|
||||||
|
</div>
|
||||||
|
<div class="mb-3">
|
||||||
|
<label for="edit-phone" class="form-label">Phone</label>
|
||||||
|
<input type="tel" class="form-control" id="edit-phone" name="phone">
|
||||||
|
</div>
|
||||||
|
<div class="mb-3">
|
||||||
|
<label for="edit-company" class="form-label">Company</label>
|
||||||
|
<input type="text" class="form-control" id="edit-company" name="company">
|
||||||
|
</div>
|
||||||
|
<div class="mb-3">
|
||||||
|
<label for="edit-position" class="form-label">Position</label>
|
||||||
|
<input type="text" class="form-control" id="edit-position" name="position">
|
||||||
|
</div>
|
||||||
|
<div class="mb-3">
|
||||||
|
<label for="edit-status" class="form-label">Status</label>
|
||||||
|
<select class="form-select" id="edit-status" name="status">
|
||||||
|
<option value="active">Active</option>
|
||||||
|
<option value="inactive">Inactive</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="text-end">
|
||||||
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
||||||
|
<button type="submit" class="btn btn-primary">Save Changes</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Delete Contact Modal -->
|
||||||
|
<div class="modal fade" id="deleteContactModal" tabindex="-1" aria-labelledby="deleteContactModalLabel" aria-hidden="true">
|
||||||
|
<div class="modal-dialog modal-dialog-centered">
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-header">
|
||||||
|
<h5 class="modal-title" id="deleteContactModalLabel">Delete Contact</h5>
|
||||||
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
<p>Are you sure you want to delete this contact? This action cannot be undone.</p>
|
||||||
|
<div class="text-end">
|
||||||
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
||||||
|
<button type="button" class="btn btn-danger" id="confirmDelete">Delete</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block extra_js %}
|
{% block extra_js %}
|
||||||
@@ -148,7 +313,7 @@ console.log('Script block loaded');
|
|||||||
function testElements() {
|
function testElements() {
|
||||||
console.log('Testing DOM elements...');
|
console.log('Testing DOM elements...');
|
||||||
const elements = [
|
const elements = [
|
||||||
'company-name',
|
'company-name-value',
|
||||||
'company-industry',
|
'company-industry',
|
||||||
'company-description',
|
'company-description',
|
||||||
'company-email',
|
'company-email',
|
||||||
@@ -277,10 +442,35 @@ async function fetchCompanyInfo() {
|
|||||||
const data = await response.json();
|
const data = await response.json();
|
||||||
console.log('Settings data received:', data);
|
console.log('Settings data received:', data);
|
||||||
|
|
||||||
|
// Update company name separately with debugging
|
||||||
|
const companyNameElement = document.getElementById('company-name-value');
|
||||||
|
const companyNameLabel = document.getElementById('company-name-label');
|
||||||
|
console.log('Before update - Label:', companyNameLabel?.textContent);
|
||||||
|
console.log('Before update - Value:', companyNameElement?.textContent);
|
||||||
|
|
||||||
|
if (companyNameElement) {
|
||||||
|
companyNameElement.textContent = data.company_name || 'Not set';
|
||||||
|
}
|
||||||
|
|
||||||
|
// Ensure label text is set
|
||||||
|
if (companyNameLabel && !companyNameLabel.textContent) {
|
||||||
|
companyNameLabel.textContent = 'Company Name:';
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('After update - Label:', companyNameLabel?.textContent);
|
||||||
|
console.log('After update - Value:', companyNameElement?.textContent);
|
||||||
|
|
||||||
// Update company details
|
// Update company details
|
||||||
document.getElementById('company-name').textContent = data.company_name || 'Not set';
|
const updateElement = (id, value) => {
|
||||||
document.getElementById('company-industry').textContent = data.company_industry || 'Not set';
|
const element = document.getElementById(id);
|
||||||
document.getElementById('company-description').textContent = data.company_description || 'Not set';
|
if (element && element.classList.contains('company-value')) {
|
||||||
|
element.textContent = value || 'Not set';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Update other company details
|
||||||
|
updateElement('company-industry', data.company_industry);
|
||||||
|
updateElement('company-description', data.company_description);
|
||||||
|
|
||||||
// Update contact information
|
// Update contact information
|
||||||
const emailElement = document.getElementById('company-email');
|
const emailElement = document.getElementById('company-email');
|
||||||
@@ -288,35 +478,41 @@ async function fetchCompanyInfo() {
|
|||||||
const websiteElement = document.getElementById('company-website');
|
const websiteElement = document.getElementById('company-website');
|
||||||
|
|
||||||
// Update email with mailto link
|
// Update email with mailto link
|
||||||
if (data.company_email && data.company_email !== 'Not set') {
|
if (emailElement && emailElement.classList.contains('company-value')) {
|
||||||
emailElement.innerHTML = `<a href="mailto:${data.company_email}" class="text-decoration-none" style="color: var(--primary-color);">
|
if (data.company_email && data.company_email !== 'Not set') {
|
||||||
<i class="fas fa-envelope me-2"></i>${data.company_email}
|
emailElement.innerHTML = `<a href="mailto:${data.company_email}" class="text-decoration-none" style="color: var(--primary-color);">
|
||||||
</a>`;
|
<i class="fas fa-envelope me-2"></i>${data.company_email}
|
||||||
} else {
|
</a>`;
|
||||||
emailElement.textContent = 'Not set';
|
} else {
|
||||||
|
emailElement.textContent = 'Not set';
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Update phone with tel link
|
// Update phone with tel link
|
||||||
if (data.company_phone && data.company_phone !== 'Not set') {
|
if (phoneElement && phoneElement.classList.contains('company-value')) {
|
||||||
phoneElement.innerHTML = `<a href="tel:${data.company_phone}" class="text-decoration-none" style="color: var(--primary-color);">
|
if (data.company_phone && data.company_phone !== 'Not set') {
|
||||||
<i class="fas fa-phone me-2"></i>${data.company_phone}
|
phoneElement.innerHTML = `<a href="tel:${data.company_phone}" class="text-decoration-none" style="color: var(--primary-color);">
|
||||||
</a>`;
|
<i class="fas fa-phone me-2"></i>${data.company_phone}
|
||||||
} else {
|
</a>`;
|
||||||
phoneElement.textContent = 'Not set';
|
} else {
|
||||||
|
phoneElement.textContent = 'Not set';
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Update website with external link
|
// Update website with external link
|
||||||
if (data.company_website && data.company_website !== 'Not set') {
|
if (websiteElement && websiteElement.classList.contains('company-value')) {
|
||||||
// Ensure website has http/https prefix
|
if (data.company_website && data.company_website !== 'Not set') {
|
||||||
let websiteUrl = data.company_website;
|
// Ensure website has http/https prefix
|
||||||
if (!websiteUrl.startsWith('http://') && !websiteUrl.startsWith('https://')) {
|
let websiteUrl = data.company_website;
|
||||||
websiteUrl = 'https://' + websiteUrl;
|
if (!websiteUrl.startsWith('http://') && !websiteUrl.startsWith('https://')) {
|
||||||
|
websiteUrl = 'https://' + websiteUrl;
|
||||||
|
}
|
||||||
|
websiteElement.innerHTML = `<a href="${websiteUrl}" target="_blank" rel="noopener noreferrer" class="text-decoration-none" style="color: var(--primary-color);">
|
||||||
|
<i class="fas fa-globe me-2"></i>${data.company_website}
|
||||||
|
</a>`;
|
||||||
|
} else {
|
||||||
|
websiteElement.textContent = 'Not set';
|
||||||
}
|
}
|
||||||
websiteElement.innerHTML = `<a href="${websiteUrl}" target="_blank" rel="noopener noreferrer" class="text-decoration-none" style="color: var(--primary-color);">
|
|
||||||
<i class="fas fa-globe me-2"></i>${data.company_website}
|
|
||||||
</a>`;
|
|
||||||
} else {
|
|
||||||
websiteElement.textContent = 'Not set';
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Format address
|
// Format address
|
||||||
@@ -327,16 +523,19 @@ async function fetchCompanyInfo() {
|
|||||||
data.company_zip,
|
data.company_zip,
|
||||||
data.company_country
|
data.company_country
|
||||||
].filter(Boolean);
|
].filter(Boolean);
|
||||||
document.getElementById('company-address').textContent = addressParts.length ? addressParts.join(', ') : 'Not set';
|
updateElement('company-address', addressParts.length ? addressParts.join(', ') : 'Not set');
|
||||||
|
|
||||||
console.log('Company info update complete');
|
console.log('Company info update complete');
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Error in fetchCompanyInfo:', error);
|
console.error('Error in fetchCompanyInfo:', error);
|
||||||
// Show error state in all fields
|
// Show error state in all fields
|
||||||
const fields = ['company-name', 'company-industry', 'company-description',
|
const fields = ['company-name-value', 'company-industry', 'company-description',
|
||||||
'company-email', 'company-phone', 'company-website', 'company-address'];
|
'company-email', 'company-phone', 'company-website', 'company-address'];
|
||||||
fields.forEach(field => {
|
fields.forEach(field => {
|
||||||
document.getElementById(field).textContent = 'Error loading data';
|
const element = document.getElementById(field);
|
||||||
|
if (element && element.classList.contains('company-value')) {
|
||||||
|
element.textContent = 'Error loading data';
|
||||||
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -374,5 +573,375 @@ window.addEventListener('beforeunload', function() {
|
|||||||
clearInterval(statusUpdateInterval);
|
clearInterval(statusUpdateInterval);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Contacts Management Functions
|
||||||
|
async function fetchContacts() {
|
||||||
|
try {
|
||||||
|
// First get JWT token
|
||||||
|
console.log('Getting management token for contacts...');
|
||||||
|
const tokenResponse = await fetch(`{{ instance.main_url }}/api/admin/management-token`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'X-API-Key': '{{ instance.connection_token }}',
|
||||||
|
'Accept': 'application/json'
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!tokenResponse.ok) {
|
||||||
|
throw new Error('Failed to get management token');
|
||||||
|
}
|
||||||
|
|
||||||
|
const tokenData = await tokenResponse.json();
|
||||||
|
if (!tokenData.token) {
|
||||||
|
throw new Error('No token received');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Then fetch contacts using the JWT token
|
||||||
|
const response = await fetch(`{{ instance.main_url }}/api/admin/contacts`, {
|
||||||
|
headers: {
|
||||||
|
'Accept': 'application/json',
|
||||||
|
'Authorization': `Bearer ${tokenData.token}`
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error('Failed to fetch contacts');
|
||||||
|
}
|
||||||
|
|
||||||
|
const contacts = await response.json();
|
||||||
|
const contactsList = document.getElementById('contactsTableBody');
|
||||||
|
contactsList.innerHTML = '';
|
||||||
|
|
||||||
|
if (contacts.length === 0) {
|
||||||
|
contactsList.innerHTML = `
|
||||||
|
<div class="text-center text-muted py-4">
|
||||||
|
<i class="fas fa-users fa-2x mb-3"></i>
|
||||||
|
<p>No contacts found</p>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
contacts.forEach(contact => {
|
||||||
|
const row = document.createElement('tr');
|
||||||
|
row.innerHTML = `
|
||||||
|
<td>${contact.username}</td>
|
||||||
|
<td>${contact.email || 'Not set'}</td>
|
||||||
|
<td>${contact.phone || 'Not set'}</td>
|
||||||
|
<td>${contact.company || 'Not set'}</td>
|
||||||
|
<td>${contact.position || 'Not set'}</td>
|
||||||
|
<td>
|
||||||
|
<span class="badge ${contact.is_active ? 'bg-success' : 'bg-danger'}">
|
||||||
|
${contact.is_active ? 'Active' : 'Inactive'}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<div class="btn-group">
|
||||||
|
<button class="btn btn-sm btn-outline-primary" onclick="editContact(${contact.id})">
|
||||||
|
<i class="fas fa-edit"></i>
|
||||||
|
</button>
|
||||||
|
<button class="btn btn-sm btn-outline-danger" onclick="deleteContact(${contact.id})">
|
||||||
|
<i class="fas fa-trash"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
`;
|
||||||
|
contactsList.appendChild(row);
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error fetching contacts:', error);
|
||||||
|
const contactsList = document.getElementById('contactsTableBody');
|
||||||
|
contactsList.innerHTML = `
|
||||||
|
<div class="text-center text-danger py-4">
|
||||||
|
<i class="fas fa-exclamation-circle fa-2x mb-3"></i>
|
||||||
|
<p>Error loading contacts</p>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function addContact(event) {
|
||||||
|
event.preventDefault();
|
||||||
|
try {
|
||||||
|
// First get JWT token
|
||||||
|
const tokenResponse = await fetch(`{{ instance.main_url }}/api/admin/management-token`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'X-API-Key': '{{ instance.connection_token }}',
|
||||||
|
'Accept': 'application/json'
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!tokenResponse.ok) {
|
||||||
|
throw new Error('Failed to get management token');
|
||||||
|
}
|
||||||
|
|
||||||
|
const tokenData = await tokenResponse.json();
|
||||||
|
if (!tokenData.token) {
|
||||||
|
throw new Error('No token received');
|
||||||
|
}
|
||||||
|
|
||||||
|
const formData = new FormData(event.target);
|
||||||
|
const response = await fetch(`{{ instance.main_url }}/api/admin/contacts`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Accept': 'application/json',
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
'Authorization': `Bearer ${tokenData.token}`
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
username: formData.get('name'),
|
||||||
|
email: formData.get('email'),
|
||||||
|
phone: formData.get('phone'),
|
||||||
|
company: formData.get('company'),
|
||||||
|
position: formData.get('position'),
|
||||||
|
status: formData.get('status')
|
||||||
|
})
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error('Failed to add contact');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Close modal and refresh list
|
||||||
|
const modal = bootstrap.Modal.getInstance(document.getElementById('addContactModal'));
|
||||||
|
modal.hide();
|
||||||
|
fetchContacts();
|
||||||
|
|
||||||
|
// Show success message
|
||||||
|
showToast('Contact added successfully', 'success');
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error adding contact:', error);
|
||||||
|
showToast('Error adding contact', 'error');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function editContact(id) {
|
||||||
|
try {
|
||||||
|
// First get JWT token
|
||||||
|
const tokenResponse = await fetch(`{{ instance.main_url }}/api/admin/management-token`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'X-API-Key': '{{ instance.connection_token }}',
|
||||||
|
'Accept': 'application/json'
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!tokenResponse.ok) {
|
||||||
|
throw new Error('Failed to get management token');
|
||||||
|
}
|
||||||
|
|
||||||
|
const tokenData = await tokenResponse.json();
|
||||||
|
if (!tokenData.token) {
|
||||||
|
throw new Error('No token received');
|
||||||
|
}
|
||||||
|
|
||||||
|
const response = await fetch(`{{ instance.main_url }}/api/admin/contacts/${id}`, {
|
||||||
|
headers: {
|
||||||
|
'Accept': 'application/json',
|
||||||
|
'Authorization': `Bearer ${tokenData.token}`
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error('Failed to fetch contact details');
|
||||||
|
}
|
||||||
|
|
||||||
|
const contact = await response.json();
|
||||||
|
|
||||||
|
// Populate form
|
||||||
|
document.getElementById('edit-contact-id').value = contact.id;
|
||||||
|
document.getElementById('edit-name').value = contact.username;
|
||||||
|
document.getElementById('edit-email').value = contact.email || '';
|
||||||
|
document.getElementById('edit-phone').value = contact.phone || '';
|
||||||
|
document.getElementById('edit-company').value = contact.company || '';
|
||||||
|
document.getElementById('edit-position').value = contact.position || '';
|
||||||
|
document.getElementById('edit-status').value = contact.is_active ? 'active' : 'inactive';
|
||||||
|
|
||||||
|
// Show modal
|
||||||
|
const modal = new bootstrap.Modal(document.getElementById('editContactModal'));
|
||||||
|
modal.show();
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error fetching contact details:', error);
|
||||||
|
showToast('Error loading contact details', 'error');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function updateContact(event) {
|
||||||
|
event.preventDefault();
|
||||||
|
try {
|
||||||
|
// First get JWT token
|
||||||
|
const tokenResponse = await fetch(`{{ instance.main_url }}/api/admin/management-token`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'X-API-Key': '{{ instance.connection_token }}',
|
||||||
|
'Accept': 'application/json'
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!tokenResponse.ok) {
|
||||||
|
throw new Error('Failed to get management token');
|
||||||
|
}
|
||||||
|
|
||||||
|
const tokenData = await tokenResponse.json();
|
||||||
|
if (!tokenData.token) {
|
||||||
|
throw new Error('No token received');
|
||||||
|
}
|
||||||
|
|
||||||
|
const formData = new FormData(event.target);
|
||||||
|
const id = formData.get('id');
|
||||||
|
|
||||||
|
const response = await fetch(`{{ instance.main_url }}/api/admin/contacts/${id}`, {
|
||||||
|
method: 'PUT',
|
||||||
|
headers: {
|
||||||
|
'Accept': 'application/json',
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
'Authorization': `Bearer ${tokenData.token}`
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
username: formData.get('name'),
|
||||||
|
email: formData.get('email'),
|
||||||
|
phone: formData.get('phone'),
|
||||||
|
company: formData.get('company'),
|
||||||
|
position: formData.get('position'),
|
||||||
|
status: formData.get('status') === 'active'
|
||||||
|
})
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error('Failed to update contact');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Close modal and refresh list
|
||||||
|
const modal = bootstrap.Modal.getInstance(document.getElementById('editContactModal'));
|
||||||
|
modal.hide();
|
||||||
|
fetchContacts();
|
||||||
|
|
||||||
|
// Show success message
|
||||||
|
showToast('Contact updated successfully', 'success');
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error updating contact:', error);
|
||||||
|
showToast('Error updating contact', 'error');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function deleteContact(id) {
|
||||||
|
// Store the contact ID for the delete confirmation
|
||||||
|
const deleteModal = new bootstrap.Modal(document.getElementById('deleteContactModal'));
|
||||||
|
document.getElementById('confirmDelete').onclick = async () => {
|
||||||
|
try {
|
||||||
|
// First get JWT token
|
||||||
|
const tokenResponse = await fetch(`{{ instance.main_url }}/api/admin/management-token`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'X-API-Key': '{{ instance.connection_token }}',
|
||||||
|
'Accept': 'application/json'
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!tokenResponse.ok) {
|
||||||
|
throw new Error('Failed to get management token');
|
||||||
|
}
|
||||||
|
|
||||||
|
const tokenData = await tokenResponse.json();
|
||||||
|
if (!tokenData.token) {
|
||||||
|
throw new Error('No token received');
|
||||||
|
}
|
||||||
|
|
||||||
|
const response = await fetch(`{{ instance.main_url }}/api/admin/contacts/${id}`, {
|
||||||
|
method: 'DELETE',
|
||||||
|
headers: {
|
||||||
|
'Accept': 'application/json',
|
||||||
|
'Authorization': `Bearer ${tokenData.token}`
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error('Failed to delete contact');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Close modal and refresh list
|
||||||
|
deleteModal.hide();
|
||||||
|
fetchContacts();
|
||||||
|
|
||||||
|
// Show success message
|
||||||
|
showToast('Contact deleted successfully', 'success');
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error deleting contact:', error);
|
||||||
|
showToast('Error deleting contact', 'error');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Show the delete confirmation modal
|
||||||
|
deleteModal.show();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Helper function to show toast messages
|
||||||
|
function showToast(title, message, type = 'info') {
|
||||||
|
const toast = document.createElement('div');
|
||||||
|
toast.className = `toast align-items-center text-white bg-${type} border-0`;
|
||||||
|
toast.setAttribute('role', 'alert');
|
||||||
|
toast.setAttribute('aria-live', 'assertive');
|
||||||
|
toast.setAttribute('aria-atomic', 'true');
|
||||||
|
|
||||||
|
toast.innerHTML = `
|
||||||
|
<div class="d-flex">
|
||||||
|
<div class="toast-body">
|
||||||
|
<strong>${title}</strong><br>
|
||||||
|
${message}
|
||||||
|
</div>
|
||||||
|
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
const toastContainer = document.getElementById('toastContainer') || (() => {
|
||||||
|
const container = document.createElement('div');
|
||||||
|
container.id = 'toastContainer';
|
||||||
|
container.className = 'toast-container position-fixed bottom-0 end-0 p-3';
|
||||||
|
document.body.appendChild(container);
|
||||||
|
return container;
|
||||||
|
})();
|
||||||
|
|
||||||
|
toastContainer.appendChild(toast);
|
||||||
|
const bsToast = new bootstrap.Toast(toast);
|
||||||
|
bsToast.show();
|
||||||
|
|
||||||
|
toast.addEventListener('hidden.bs.toast', () => {
|
||||||
|
toast.remove();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Event Listeners
|
||||||
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
// ... existing event listeners ...
|
||||||
|
|
||||||
|
// Fetch contacts when contacts tab is shown
|
||||||
|
document.getElementById('contacts-tab').addEventListener('shown.bs.tab', fetchContacts);
|
||||||
|
|
||||||
|
// Debug the company name label
|
||||||
|
const label = document.getElementById('company-name-label');
|
||||||
|
if (label) {
|
||||||
|
console.log('Company name label found:', label);
|
||||||
|
|
||||||
|
// Create a MutationObserver to watch for changes
|
||||||
|
const observer = new MutationObserver(function(mutations) {
|
||||||
|
mutations.forEach(function(mutation) {
|
||||||
|
console.log('Label changed:', mutation);
|
||||||
|
console.log('Old value:', mutation.oldValue);
|
||||||
|
console.log('New value:', label.textContent);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Start observing
|
||||||
|
observer.observe(label, {
|
||||||
|
attributes: true,
|
||||||
|
childList: true,
|
||||||
|
characterData: true,
|
||||||
|
subtree: true
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
console.log('Company name label not found');
|
||||||
|
}
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
Reference in New Issue
Block a user