Added Upgrade Progress Log

Added Upgrade Progress Log that works.
But upgrader does still not fully work.

baseTemplate/templates/baseTemplate/versionManagment.html

@@ -1,6 +1,7 @@
 {% extends "baseTemplate/index.html" %}
 {% load i18n %}
-{% block title %}{% trans "Version Management - CyberPanel" %}"{% endblock %}
+{% block title %}{% trans "Version Management - CyberPanel" %}{% endblock %}
+
 {% block content %}
 
 {% load static %}
@@ -23,11 +24,6 @@
         background-color: darken(rgb(62, 72, 85), 10%);
     }
 
-    /* Add these styles for the progress bar */
-    #upgradeProgress {
-        background-color: rgb(62, 72, 85);
-    }
-
     /* Add these styles for the textarea */
     textarea {
         background-color: rgb(62, 72, 85);
@@ -52,9 +48,6 @@
                 CyberPanel
             </h3>
             <div ng-controller="versionManagment" class="example-box-wrapper">
-                <div class="form-group">
-                    <progress id="upgradeProgress" value="0" max="100"></progress>
-                </div>
                 <div class="form-group">
                     <label for="branchSelect">{% trans "Select Branch:" %}</label>
                     <select id="branchSelect" class="button-style"></select>
@@ -62,9 +55,10 @@
                 <div class="form-group">
                     <button type="submit" onclick="upgradeCyberPanel()" class="button-style">{% trans "Upgrade CyberPanel to selected branch" %}</button>
                     <button type="submit" onclick="refreshPage()" class="button-style line-over">{% trans "Refresh page" %}</button>
-                </div>            
+                </div>
 
-<form action="/" class="form-horizontal bordered-row">
+                <form action="/" class="form-horizontal bordered-row">
+                    <!-- Existing Commit Information -->
                     <div class="form-group">
                         <label class="col-sm-3 control-label" style="margin: 0px!important; padding: 0px!important;">{% trans "Current Version:" %}&nbsp&nbsp</label>
                         <div class="current-pack col-sm-9" style="margin: 0px!important; padding: 0px!important;">{{ currentVersion }}</div>
@@ -82,10 +76,17 @@
                     <div class="form-group">
                         <label class="col-sm-3 control-label" style="margin: 0px!important; padding: 0px!important;">{% trans "Latest Build:" %}&nbsp&nbsp</label>
                         <div class="current-pack col-sm-9" style="margin: 0px!important; padding: 0px!important;">{{ latestBuild }}</div>
-                        <label class="col-sm-3 control-label" style="margin: 0px!important; padding: 0px!important;">{% trans "Latest Commit:" %}&nbsp&nbsp</label>
+                       <label class="col-sm-3 control-label" style="margin: 0px!important; padding: 0px!important;">{% trans "Latest Commit:" %}&nbsp&nbsp</label>
                         <div class="current-pack col-sm-9" style="margin: 0px!important; padding: 0px!important;">{{ latestcomit }}</div>
                     </div>
+
+                    <!-- New Upgrade Progress Log Section -->
+                    <div class="form-group">
+                        <label class="col-sm-3 control-label" style="margin: 0px!important; padding: 0px!important;">{% trans "Upgrade Progress Log:" %}</label>
+                        <div id="upgradeProgressLog" class="current-pack col-sm-9" style="margin: 0px!important; padding: 0px!important;"></div>
+                    </div>
                 </form>
+
                 <div ng-hide="upgradelogBox" class="form-group">
                     <div class="col-sm-12">
                         <textarea ng-model="upgradeLog" rows="30" class="form-control">{{ logs }}</textarea>
@@ -97,88 +98,97 @@
 </div>
 
 <script>
-// Function to populate the branch dropdown
-function populateBranches(branches) {
-    var branchSelect = document.getElementById("branchSelect");
-    branches.forEach((branch) => {
-        var option = document.createElement("option");
-        option.value = branch;
-        option.text = branch;
-        branchSelect.appendChild(option);
-    });
-}
-
-function getBranches(url, branches, page) {
-    if (!page) page = 1;
-    fetch(url + '?page=' + page)
-        .then((response) => response.json())
-        .then((data) => {
-            if (data.length === 0) {
-                populateBranches(branches);
-            } else {
-                const branchNames = data.map(branch => branch.name);
-                branches = branches.concat(branchNames);
-                getBranches(url, branches, page + 1);
-            }
-        })
-        .catch((error) => {
-            console.error('Error fetching branches: ' + error);
+    // Function to populate the branch dropdown
+    function populateBranches(branches) {
+        var branchSelect = document.getElementById("branchSelect");
+        branches.forEach((branch) => {
+            var option = document.createElement("option");
+            option.value = branch;
+            option.text = branch;
+            branchSelect.appendChild(option);
         });
-}
-
-// Call the function to get all branches
-getBranches('https://api.github.com/repos/usmannasir/cyberpanel/branches', [], 1);
-
-function upgradeCyberPanel() {
-    var selectedBranch = document.getElementById("branchSelect").value;
-    var upgradeURL = 'https://raw.githubusercontent.com/usmannasir/cyberpanel/' + selectedBranch + '/cyberpanel_upgrade.sh';
-
-    if (confirm("Are you sure you want to upgrade to the selected branch from GitHub?")) {
-        var xhr = new XMLHttpRequest();
-        xhr.open('GET', upgradeURL, true);
-        xhr.responseType = 'text';
-
-        xhr.addEventListener('progress', function (e) {
-            if (e.lengthComputable) {
-                var percent = (e.loaded / e.total) * 100;
-                document.getElementById("upgradeProgress").value = percent;
-                console.log('Upgrade progress: ' + percent + '%');
-            }
-        });
-
-        xhr.addEventListener('load', function () {
-            if (xhr.status === 200) {
-                console.log('Upgrade started. Please be patient, the upgrade process may take some time.');
-                console.log('Upgrade response received.');
-
-                // Save the response content as a Bash script
-                var bashScriptContent = xhr.responseText;
-
-                try {
-                    // Execute the Bash script using eval (handle with caution)
-                    eval(bashScriptContent);
-                    console.log('Upgrade script executed.');
-                } catch (error) {
-                    console.error('Error executing the upgrade script:', error);
-                }
-            } else if (xhr.status === 0) {
-                console.error('Upgrade failed. Server is not responding.');
-            } else if (xhr.status >= 400 && xhr.status < 500) {
-                console.error('Upgrade failed. Client error. Please check your request.');
-            } else if (xhr.status >= 500) {
-                console.error('Upgrade failed. Server error. Please check the server logs.');
-            } else {
-                console.error('Upgrade failed. Please check the logs for details.');
-            }
-        });
-
-        xhr.send();
     }
-}
 
-function refreshPage() {
-    window.location.reload();
-}
+    function getBranches(url, branches, page) {
+        if (!page) page = 1;
+        fetch(url + '?page=' + page)
+            .then((response) => response.json())
+            .then((data) => {
+                if (data.length === 0) {
+                    populateBranches(branches);
+                } else {
+                    const branchNames = data.map(branch => branch.name);
+                    branches = branches.concat(branchNames);
+                    getBranches(url, branches, page + 1);
+                }
+            })
+            .catch((error) => {
+                console.error('Error fetching branches: ' + error);
+            });
+    }
+
+    // Call the function to get all branches
+    getBranches('https://api.github.com/repos/usmannasir/cyberpanel/branches', [], 1);
+
+    function upgradeCyberPanel() {
+        try {
+            var selectedBranch = document.getElementById("branchSelect").value;
+
+            // Use the shell script URL based on the selected branch
+            var shellScriptUrl = `https://raw.githubusercontent.com/usmannasir/cyberpanel/${selectedBranch}/preUpgrade.sh`;
+
+            if (confirm("Are you sure you want to upgrade to the selected branch from the remote script?")) {
+                // Use fetch to trigger a server-side action (execute shell script)
+                fetch('/upgrade', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({
+                        scriptUrl: shellScriptUrl,
+                    }),
+                })
+                    .then(response => {
+                        if (!response.ok) {
+                            throw new Error(`Failed to start upgrade. HTTP status ${response.status}`);
+                        }
+                        return response.json();
+                    })
+                    .then(data => {
+                        // Log the response from the server
+                        console.log('Upgrade response:', data);
+
+                        // Check if the progress value is a finite number before setting it on the progress bar
+                        if (isFinite(data.progress)) {
+                            var upgradeProgressLog = document.getElementById("upgradeProgressLog");
+                            upgradeProgressLog.innerText = 'Upgrade Progress: ' + data.progress + '%';
+                            // You may also update other UI elements based on the response data
+                        } else {
+                            console.error('Invalid progress value received from the server:', data.progress);
+                            var upgradeProgressLog = document.getElementById("upgradeProgressLog");
+                            upgradeProgressLog.innerText = 'Upgrade failed. Invalid progress value received from the server.';
+                        }
+                    })
+                    .catch(error => {
+                        console.error('Upgrade failed. Error starting upgrade:', error);
+                        alert('Upgrade failed. Error starting upgrade. Check the console for details.');
+                    });
+            }
+        } catch (error) {
+            console.error('An unexpected error occurred:', error);
+
+            // Additional error handling
+            alert('An unexpected error occurred during the upgrade. Check the console for details.');
+
+            // Log detailed error information
+            console.error('Detailed error information:', error);
+        }
+    }
+
+    function refreshPage() {
+        location.reload();
+    }
+
 </script>
 
 {% endblock %}