Kobe/docupulse
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

company info on instance detail

Browse Source
This commit is contained in:
Kobe
2025-06-10 12:04:29 +02:00
parent b96d5e4487
commit 7015a46f94
2 changed files with 187 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

222
templates/main/instance_detail.html
View File

@@ -85,17 +85,7 @@
<ul class="nav nav-tabs card-header-tabs" id="instanceTabs" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="overview-tab" data-bs-toggle="tab" data-bs-target="#overview" type="button" role="tab" aria-controls="overview" aria-selected="true">
<i class="fas fa-info-circle me-2"></i>Overview
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="statistics-tab" data-bs-toggle="tab" data-bs-target="#statistics" type="button" role="tab" aria-controls="statistics" aria-selected="false">
<i class="fas fa-chart-bar me-2"></i>Statistics
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="settings-tab" data-bs-toggle="tab" data-bs-target="#settings" type="button" role="tab" aria-controls="settings" aria-selected="false">
<i class="fas fa-cog me-2"></i>Settings
<i class="fas fa-building me-2"></i>Company Information
</button>
</li>
</ul>
@@ -104,25 +94,41 @@
<div class="tab-content" id="instanceTabsContent">
<!-- Overview Tab -->
<div class="tab-pane fade show active" id="overview" role="tabpanel" aria-labelledby="overview-tab">
<div class="alert alert-info">
<i class="fas fa-info-circle me-2"></i>
Overview content will be available soon.
</div>
</div>
<!-- Statistics Tab -->
<div class="tab-pane fade" id="statistics" role="tabpanel" aria-labelledby="statistics-tab">
<div class="alert alert-info">
<i class="fas fa-info-circle me-2"></i>
Statistics content will be available soon.
</div>
</div>
<!-- Settings Tab -->
<div class="tab-pane fade" id="settings" role="tabpanel" aria-labelledby="settings-tab">
<div class="alert alert-info">
<i class="fas fa-info-circle me-2"></i>
Settings content will be available soon.
<div class="row">
<div class="col-md-6">
<h5 class="mb-3">Company Details</h5>
<div class="mb-3">
<label class="form-label text-muted">Company Name</label>
<p class="mb-0" id="company-name">Loading...</p>
</div>
<div class="mb-3">
<label class="form-label text-muted">Industry</label>
<p class="mb-0" id="company-industry">Loading...</p>
</div>
<div class="mb-3">
<label class="form-label text-muted">Description</label>
<p class="mb-0" id="company-description">Loading...</p>
</div>
</div>
<div class="col-md-6">
<h5 class="mb-3">Contact Information</h5>
<div class="mb-3">
<label class="form-label text-muted">Email</label>
<p class="mb-0" id="company-email">Loading...</p>
</div>
<div class="mb-3">
<label class="form-label text-muted">Phone</label>
<p class="mb-0" id="company-phone">Loading...</p>
</div>
<div class="mb-3">
<label class="form-label text-muted">Website</label>
<p class="mb-0" id="company-website">Loading...</p>
</div>
<div class="mb-3">
<label class="form-label text-muted">Address</label>
<p class="mb-0" id="company-address">Loading...</p>
</div>
</div>
</div>
</div>
</div>
@@ -133,17 +139,41 @@
</div>
{% endblock %}
{% block scripts %}
{% block extra_js %}
<script>
// Basic test to verify script execution
console.log('Script block loaded');
// Test function to verify DOM elements exist
function testElements() {
console.log('Testing DOM elements...');
const elements = [
'company-name',
'company-industry',
'company-description',
'company-email',
'company-phone',
'company-website',
'company-address'
];
elements.forEach(id => {
const element = document.getElementById(id);
console.log(`Element ${id} exists:`, !!element);
});
}
let statusUpdateInterval;
// Function to check instance status
async function checkInstanceStatus() {
console.log('checkInstanceStatus called');
try {
const response = await fetch(`/instances/{{ instance.id }}/status`);
if (!response.ok) throw new Error('Failed to check instance status');
const data = await response.json();
console.log('Status data:', data);
// Update activity status
const activityIcon = document.querySelector('.status-icon-wrapper .fa-circle-notch');
@@ -167,11 +197,13 @@ async function checkInstanceStatus() {
// Function to check authentication status
async function checkAuthStatus() {
console.log('checkAuthStatus called');
try {
const response = await fetch(`/instances/{{ instance.id }}/auth-status`);
if (!response.ok) throw new Error('Failed to check authentication status');
const data = await response.json();
console.log('Auth data:', data);
// Update authentication status
const authIcon = document.querySelector('.card:last-child .fa-shield-alt');
@@ -193,21 +225,141 @@ async function checkAuthStatus() {
}
}
// Function to fetch company information
async function fetchCompanyInfo() {
console.log('fetchCompanyInfo called');
try {
// First get JWT token
console.log('Getting management token...');
const tokenResponse = await fetch(`{{ instance.main_url }}/api/admin/management-token`, {
method: 'POST',
headers: {
'X-API-Key': '{{ instance.connection_token }}',
'Accept': 'application/json'
}
});
console.log('Token response status:', tokenResponse.status);
if (!tokenResponse.ok) {
console.error('Failed to get management token:', tokenResponse.status);
throw new Error('Failed to get management token');
}
const tokenData = await tokenResponse.json();
console.log('Token data received:', tokenData);
if (!tokenData.token) {
console.error('No token in response');
throw new Error('No token received');
}
// Then fetch settings using the JWT token
console.log('Fetching settings from:', `{{ instance.main_url }}/api/admin/settings`);
const response = await fetch(`{{ instance.main_url }}/api/admin/settings`, {
headers: {
'Accept': 'application/json',
'Authorization': `Bearer ${tokenData.token}`
}
});
console.log('Settings response status:', response.status);
if (!response.ok) {
console.error('Settings fetch failed:', response.status);
throw new Error('Failed to fetch company information');
}
const data = await response.json();
console.log('Settings data received:', data);
// Update company details
document.getElementById('company-name').textContent = data.company_name || 'Not set';
document.getElementById('company-industry').textContent = data.company_industry || 'Not set';
document.getElementById('company-description').textContent = data.company_description || 'Not set';
// Update contact information
const emailElement = document.getElementById('company-email');
const phoneElement = document.getElementById('company-phone');
const websiteElement = document.getElementById('company-website');
// Update email with mailto link
if (data.company_email && data.company_email !== 'Not set') {
emailElement.innerHTML = `<a href="mailto:${data.company_email}" class="text-decoration-none">
<i class="fas fa-envelope me-2"></i>${data.company_email}
</a>`;
} else {
emailElement.textContent = 'Not set';
}
// Update phone with tel link
if (data.company_phone && data.company_phone !== 'Not set') {
phoneElement.innerHTML = `<a href="tel:${data.company_phone}" class="text-decoration-none">
<i class="fas fa-phone me-2"></i>${data.company_phone}
</a>`;
} else {
phoneElement.textContent = 'Not set';
}
// Update website with external link
if (data.company_website && data.company_website !== 'Not set') {
// Ensure website has http/https prefix
let websiteUrl = data.company_website;
if (!websiteUrl.startsWith('http://') && !websiteUrl.startsWith('https://')) {
websiteUrl = 'https://' + websiteUrl;
}
websiteElement.innerHTML = `<a href="${websiteUrl}" target="_blank" rel="noopener noreferrer" class="text-decoration-none">
<i class="fas fa-globe me-2"></i>${data.company_website}
</a>`;
} else {
websiteElement.textContent = 'Not set';
}
// Format address
const addressParts = [
data.company_address,
data.company_city,
data.company_state,
data.company_zip,
data.company_country
].filter(Boolean);
document.getElementById('company-address').textContent = addressParts.length ? addressParts.join(', ') : 'Not set';
console.log('Company info update complete');
} catch (error) {
console.error('Error in fetchCompanyInfo:', error);
// Show error state in all fields
const fields = ['company-name', 'company-industry', 'company-description',
'company-email', 'company-phone', 'company-website', 'company-address'];
fields.forEach(field => {
document.getElementById(field).textContent = 'Error loading data';
});
}
}
// Function to update all statuses
async function updateAllStatuses() {
await Promise.all([
checkInstanceStatus(),
checkAuthStatus()
]);
console.log('Starting updateAllStatuses...');
try {
await Promise.all([
checkInstanceStatus(),
checkAuthStatus(),
fetchCompanyInfo()
]);
console.log('All statuses updated successfully');
} catch (error) {
console.error('Error in updateAllStatuses:', error);
}
}
// Initialize status updates
document.addEventListener('DOMContentLoaded', function() {
console.log('DOM loaded, initializing updates...');
testElements(); // Test if elements exist
// Initial update
updateAllStatuses();
// Set up periodic updates (every 30 seconds)
statusUpdateInterval = setInterval(updateAllStatuses, 30000);
console.log('Periodic updates initialized');
});
// Clean up interval when page is unloaded