From 7015a46f94ea4868cd14fd1597c7237f6310baec Mon Sep 17 00:00:00 2001
From: Kobe <kobeamerijckx@outlook.com>
Date: Tue, 10 Jun 2025 12:04:29 +0200
Subject: [PATCH] company info on instance detail

---
 routes/__pycache__/main.cpython-313.pyc | Bin 81995 -> 81995 bytes
 templates/main/instance_detail.html     | 222 ++++++++++++++++++++----
 2 files changed, 187 insertions(+), 35 deletions(-)

diff --git a/routes/__pycache__/main.cpython-313.pyc b/routes/__pycache__/main.cpython-313.pyc
index 586c399a5ca4f4e93562c55e69038120e12f5f8b..5a1ec7d3803d581f1de9cabbe2836c611aa4d2e9 100644
GIT binary patch
delta 25
fcmX@zz<RoYmHRU<FBbz4NHKUca&P5kbZ`IwTx13E

delta 25
fcmX@zz<RoYmHRU<FBbz4i2rwQ<lf57=->bVWi<xv

diff --git a/templates/main/instance_detail.html b/templates/main/instance_detail.html
index 76a7f64..5af70e1 100644
--- a/templates/main/instance_detail.html
+++ b/templates/main/instance_detail.html
@@ -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