From e658962bd38d8163af01ce2e162944e489959d24 Mon Sep 17 00:00:00 2001
From: usmannasir <usman@cyberpersons.com>
Date: Sat, 12 Apr 2025 19:27:10 +0500
Subject: [PATCH] front end for n8n version

---
 .../websiteFunctions/DockerSiteHome.html      | 75 +++++++------------
 1 file changed, 25 insertions(+), 50 deletions(-)

diff --git a/websiteFunctions/templates/websiteFunctions/DockerSiteHome.html b/websiteFunctions/templates/websiteFunctions/DockerSiteHome.html
index 4a64ef5ea..4804b25c8 100644
--- a/websiteFunctions/templates/websiteFunctions/DockerSiteHome.html
+++ b/websiteFunctions/templates/websiteFunctions/DockerSiteHome.html
@@ -915,7 +915,7 @@
                 }
             });
             
-            // Angular extension for container action handling
+            // Add n8n version checking and update functionality
             angular.module('WebsitesApp').run(['$rootScope', function($rootScope) {
                 // Add custom icon rendering for container actions
                 $rootScope.renderIcon = function(iconName) {
@@ -949,9 +949,9 @@
                     };
                 }
                 
-                // Add n8n version checking function
-                $rootScope.checkN8nVersion = function(container) {
-                    // Simulate version check
+                // Initialize n8n version info for containers
+                $rootScope.initializeN8nVersion = function(container) {
+                    // This would normally come from the backend
                     container.n8nVersion = {
                         current: '1.0.0',
                         latest: '1.1.0',
@@ -970,6 +970,17 @@
                         container.updatingN8n = false;
                     }, 3000);
                 };
+
+                // Initialize version info when loading containers
+                var originalLunchcontainer = $rootScope.Lunchcontainer;
+                if (originalLunchcontainer) {
+                    $rootScope.Lunchcontainer = function(containerId) {
+                        var result = originalLunchcontainer(containerId);
+                        // Initialize version info after container is loaded
+                        $rootScope.initializeN8nVersion($rootScope.web);
+                        return result;
+                    };
+                }
             }]);
         });
     </script>
@@ -1144,6 +1155,12 @@
                                 <h3>
                                     <i class="fa fa-cube"></i>
                                     n8n Container: {$ web.name $}
+                                    <div class="version-info" style="font-size: 14px; margin-top: 5px; color: #666;">
+                                        <i class="fa fa-code-fork"></i> Version {$ web.n8nVersion.current || '...' $}
+                                        <span ng-if="web.n8nVersion.updateAvailable" class="label label-warning" style="margin-left: 10px;">
+                                            Update available: {$ web.n8nVersion.latest $}
+                                        </span>
+                                    </div>
                                     <span class="workflow-status" ng-class="{'active': web.status === 'running', 'error': web.status !== 'running'}">
                                         <i class="fa" ng-class="{'fa-check-circle': web.status === 'running', 'fa-times-circle': web.status !== 'running'}"></i>
                                         {$ web.status $}
@@ -1165,57 +1182,15 @@
                                     <a class="btn btn-info" href="http://{$ location.hostname $}:{$ web.ports['5678/tcp'][0].HostPort $}" target="_blank" ng-if="web.status === 'running'">
                                         <i class="fa fa-external-link"></i><span>Open n8n</span>
                                     </a>
-                                    <button class="btn btn-success" ng-click="checkN8nVersion(web)" ng-if="web.status === 'running'">
-                                        <i class="fa fa-refresh"></i><span>Check Version</span>
+                                    <button class="btn btn-success" ng-click="updateN8n(web)" ng-if="web.status === 'running' && web.n8nVersion.updateAvailable" ng-disabled="web.updatingN8n">
+                                        <i class="fa" ng-class="{'fa-refresh fa-spin': web.updatingN8n, 'fa-arrow-up': !web.updatingN8n}"></i>
+                                        <span ng-if="!web.updatingN8n">Update to {$ web.n8nVersion.latest $}</span>
+                                        <span ng-if="web.updatingN8n">Updating...</span>
                                     </button>
                                 </div>
                             </div>
                             
                             <div class="container-body">
-                                <!-- Version Info Box -->
-                                <div class="info-box" ng-if="web.n8nVersion">
-                                    <h4>
-                                        <i class="fa fa-info-circle"></i> <span>n8n Version Information</span>
-                                        <button class="btn btn-sm btn-success pull-right" ng-click="updateN8n(web)" ng-disabled="web.updatingN8n">
-                                            <i class="fa" ng-class="{'fa-refresh fa-spin': web.updatingN8n, 'fa-arrow-up': !web.updatingN8n}"></i>
-                                            <span ng-if="!web.updatingN8n">Update n8n</span>
-                                            <span ng-if="web.updatingN8n">Updating...</span>
-                                        </button>
-                                    </h4>
-                                    <div class="row">
-                                        <div class="col-md-6">
-                                            <table class="table">
-                                                <tbody>
-                                                    <tr>
-                                                        <td width="40%"><strong>Current Version:</strong></td>
-                                                        <td><code>{$ web.n8nVersion.current $}</code></td>
-                                                    </tr>
-                                                    <tr>
-                                                        <td><strong>Latest Version:</strong></td>
-                                                        <td><code>{$ web.n8nVersion.latest $}</code></td>
-                                                    </tr>
-                                                    <tr>
-                                                        <td><strong>Update Available:</strong></td>
-                                                        <td>
-                                                            <span class="label" ng-class="{'label-success': !web.n8nVersion.updateAvailable, 'label-warning': web.n8nVersion.updateAvailable}">
-                                                                {$ web.n8nVersion.updateAvailable ? 'Yes' : 'No' $}
-                                                            </span>
-                                                        </td>
-                                                    </tr>
-                                                </tbody>
-                                            </table>
-                                        </div>
-                                        <div class="col-md-6">
-                                            <div class="alert" ng-class="{'alert-info': !web.n8nVersion.updateAvailable, 'alert-warning': web.n8nVersion.updateAvailable}">
-                                                <i class="fa" ng-class="{'fa-info-circle': !web.n8nVersion.updateAvailable, 'fa-exclamation-triangle': web.n8nVersion.updateAvailable}"></i>
-                                                <span ng-if="!web.n8nVersion.updateAvailable">Your n8n installation is up to date.</span>
-                                                <span ng-if="web.n8nVersion.updateAvailable">
-                                                    A new version of n8n is available. Click the update button to upgrade to version {$ web.n8nVersion.latest $}.
-                                                </span>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
                                 <div class="row">
                                     <div class="col-md-6">
                                         <div class="info-box">