372 lines
16 KiB
HTML
372 lines
16 KiB
HTML
{% extends "common/base.html" %}
|
|
{% from "components/header.html" import header %}
|
|
|
|
{% block title %}{{ instance.name }} - DocuPulse{% endblock %}
|
|
|
|
{% block extra_css %}
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/settings.css') }}?v={{ 'css/settings.css'|asset_version }}">
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
{{ header(
|
|
title="Instance Details",
|
|
description=instance.name + " for " + instance.company,
|
|
icon="fa-server",
|
|
buttons=[
|
|
{
|
|
'text': 'Back to Instances',
|
|
'url': '/instances',
|
|
'icon': 'fa-arrow-left',
|
|
'class': 'btn-secondary'
|
|
}
|
|
]
|
|
) }}
|
|
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="row mb-4">
|
|
<!-- Activity Status Card -->
|
|
<div class="col-md-6">
|
|
<div class="card h-100">
|
|
<div class="card-body">
|
|
<div class="d-flex align-items-center">
|
|
<div class="flex-shrink-0">
|
|
<div class="status-icon-wrapper">
|
|
<i class="fas fa-circle-notch fa-spin {% if instance.status == 'active' %}text-success{% else %}text-danger{% endif %} fa-2x"></i>
|
|
</div>
|
|
</div>
|
|
<div class="flex-grow-1 ms-3">
|
|
<h5 class="card-title mb-1">Activity Status</h5>
|
|
<p class="card-text mb-0">
|
|
<span class="badge bg-{{ 'success' if instance.status == 'active' else 'danger' }}">
|
|
{{ instance.status|title }}
|
|
</span>
|
|
{% if instance.status_details %}
|
|
<small class="text-muted d-block mt-1">{{ instance.status_details }}</small>
|
|
{% endif %}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Authentication Status Card -->
|
|
<div class="col-md-6">
|
|
<div class="card h-100">
|
|
<div class="card-body">
|
|
<div class="d-flex align-items-center">
|
|
<div class="flex-shrink-0">
|
|
<div class="status-icon-wrapper">
|
|
<i class="fas fa-shield-alt {% if instance.connection_token %}text-success{% else %}text-warning{% endif %} fa-2x"></i>
|
|
</div>
|
|
</div>
|
|
<div class="flex-grow-1 ms-3">
|
|
<h5 class="card-title mb-1">Authentication Status</h5>
|
|
<p class="card-text mb-0">
|
|
<span class="badge bg-{{ 'success' if instance.connection_token else 'warning' }}">
|
|
{{ 'Authenticated' if instance.connection_token else 'Not Authenticated' }}
|
|
</span>
|
|
{% if not instance.connection_token %}
|
|
<small class="text-muted d-block mt-1">This instance needs to be authenticated</small>
|
|
{% endif %}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tabs Section -->
|
|
<div class="card">
|
|
<div class="card-header bg-white">
|
|
<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-building me-2"></i>Company Information
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="card-body">
|
|
<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="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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% 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');
|
|
const activityBadge = document.querySelector('.card:first-child .badge');
|
|
const activityDetails = document.querySelector('.card:first-child .text-muted');
|
|
|
|
if (activityIcon) {
|
|
activityIcon.className = `fas fa-circle-notch fa-spin ${data.status === 'active' ? 'text-success' : 'text-danger'} fa-2x`;
|
|
}
|
|
if (activityBadge) {
|
|
activityBadge.className = `badge bg-${data.status === 'active' ? 'success' : 'danger'}`;
|
|
activityBadge.textContent = data.status.charAt(0).toUpperCase() + data.status.slice(1);
|
|
}
|
|
if (activityDetails && data.status_details) {
|
|
activityDetails.textContent = data.status_details;
|
|
}
|
|
} catch (error) {
|
|
console.error('Error checking instance status:', error);
|
|
}
|
|
}
|
|
|
|
// 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');
|
|
const authBadge = document.querySelector('.card:last-child .badge');
|
|
const authDetails = document.querySelector('.card:last-child .text-muted');
|
|
|
|
if (authIcon) {
|
|
authIcon.className = `fas fa-shield-alt ${data.authenticated ? 'text-success' : 'text-warning'} fa-2x`;
|
|
}
|
|
if (authBadge) {
|
|
authBadge.className = `badge bg-${data.authenticated ? 'success' : 'warning'}`;
|
|
authBadge.textContent = data.authenticated ? 'Authenticated' : 'Not Authenticated';
|
|
}
|
|
if (authDetails) {
|
|
authDetails.textContent = data.authenticated ? '' : 'This instance needs to be authenticated';
|
|
}
|
|
} catch (error) {
|
|
console.error('Error checking authentication status:', error);
|
|
}
|
|
}
|
|
|
|
// 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() {
|
|
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
|
|
window.addEventListener('beforeunload', function() {
|
|
if (statusUpdateInterval) {
|
|
clearInterval(statusUpdateInterval);
|
|
}
|
|
});
|
|
</script>
|
|
{% endblock %} |