Update TGBeta.ps1

TGBeta.ps1

@@ -929,7 +929,12 @@ function GetHtmlContent {
     </div>
 <script>
 
-    // Central function to handle DattoRMM visibility
+    // =======================================================================
+    // SECTION 1: DattoRMM Visibility and Options Management
+    // =======================================================================
+    // Toggles the visibility of DattoRMM-related elements based on the
+    // state of the "installDattoRMMCheckbox". If checked, the related
+    // containers are displayed; otherwise, they are hidden.
     function toggleDattoRMMVisibility() {
         const dattoRMMCheckbox = document.getElementById('installDattoRMMCheckbox');
         const optionsContainer = document.getElementById('dattoRMMOptionsContainer');
@@ -947,7 +952,12 @@ function GetHtmlContent {
         }
     }
 
-    // Function to update "Select All" checkbox state
+    // =======================================================================
+    // SECTION 2: Checkbox "Select All" Utility Functions
+    // =======================================================================
+    // Updates the state of a "Select All" checkbox based on the status of
+    // a group of checkboxes. If every checkbox in the group is checked,
+    // then the "Select All" checkbox is checked; otherwise, it is unchecked.
     function updateSelectAllCheckbox(selectAllId, checkboxGroupSelector) {
         const selectAllCheckbox = document.getElementById(selectAllId);
         const checkboxes = document.querySelectorAll(checkboxGroupSelector);
@@ -956,21 +966,25 @@ function GetHtmlContent {
         selectAllCheckbox.checked = Array.from(checkboxes).every(checkbox => checkbox.checked);
     }
 
-    // Function to handle "Select All" logic for the left column
+    // Toggles all checkboxes in the left column when the "Select All" checkbox is toggled.
+    // Also calls toggleDattoRMMVisibility() to adjust DattoRMM-related elements.
     function toggleLeftColumnCheckboxes(selectAllCheckbox) {
         const leftCheckboxes = document.querySelectorAll('#leftColumn input[type="checkbox"]:not(#selectAllLeftCheckbox)');
-
-        // Toggle all checkboxes
         leftCheckboxes.forEach(checkbox => {
             checkbox.checked = selectAllCheckbox.checked;
         });
 
-        // Handle DattoRMM visibility
+        // Update the DattoRMM visibility based on the current state.
         toggleDattoRMMVisibility();
     }
 
-    // Function to handle checkbox changes in the Onboard tab
+    // =======================================================================
+    // SECTION 3: Onboard Tab Checkbox Management
+    // =======================================================================
+    // This function is called when an individual checkbox on the Onboard tab changes.
+    // It updates both the DattoRMM visibility and the state of the "Select All" checkbox.
     function toggleOnboardCheckboxes(selectedCheckbox) {
+        
         // Update DattoRMM visibility
         toggleDattoRMMVisibility();
 
@@ -978,13 +992,18 @@ function GetHtmlContent {
         updateSelectAllCheckbox('selectAllLeftCheckbox', '#onboardTab input[type="checkbox"]:not(#selectAllLeftCheckbox)');
     }
 
-    // Attach event listeners to dynamically update the "Select All" checkbox
+    // Attach change event listeners to each individual checkbox (except the "Select All")
+    // in the Onboard tab so that the "Select All" checkbox is updated automatically.
     document.querySelectorAll('#onboardTab input[type="checkbox"]:not(#selectAllLeftCheckbox)').forEach(checkbox => {
         checkbox.addEventListener('change', () => {
             updateSelectAllCheckbox('selectAllLeftCheckbox', '#onboardTab input[type="checkbox"]:not(#selectAllLeftCheckbox)');
         });
     });
 
+        // =======================================================================
+        // SECTION 4: Offboard Tab Checkbox Management
+        // =======================================================================
+        // Toggles all offboarding checkboxes based on the state of the "Select All" offboard checkbox.
         function toggleOffboardCheckboxes(selectAllCheckbox) {
             const checkboxes = document.querySelectorAll('#offboardTab input[type="checkbox"]:not(#selectAllOffboardCheckbox)');
             checkboxes.forEach(checkbox => {
@@ -992,17 +1011,25 @@ function GetHtmlContent {
             });
         }
 
+        // Updates the "Select All" checkbox in the offboard tab.
         function updateSelectAllOffboard() {
             const selectAllCheckbox = document.getElementById('selectAllOffboardCheckbox');
             const checkboxes = document.querySelectorAll('#offboardTab input[type="checkbox"]:not(#selectAllOffboardCheckbox)');
             selectAllCheckbox.checked = Array.from(checkboxes).every(checkbox => checkbox.checked);
         }
 
+        // Attach change event listeners to each offboard checkbox (except the "Select All")
+        // to update the "Select All" checkbox accordingly.
         document.querySelectorAll('#offboardTab input[type="checkbox"]:not(#selectAllOffboardCheckbox)').forEach(checkbox => {
             checkbox.addEventListener('change', updateSelectAllOffboard);
         });
 
-
+        // =======================================================================
+        // SECTION 5: Offboarding Task Trigger
+        // =======================================================================
+        // Gathers the names of all selected offboarding tasks and sends them to
+        // the '/offboard' endpoint via a POST request.
+        // If no tasks are selected, a log message is appended.
         function triggerOffboard() {
             const checkboxes = document.querySelectorAll('#offboardTab input[type="checkbox"]:not(#selectAllOffboardCheckbox)');
             const selectedTasks = Array.from(checkboxes)
@@ -1035,6 +1062,12 @@ function GetHtmlContent {
                 });
         }
 
+        // =======================================================================
+        // SECTION 6: Windows Performance Radio Buttons Management
+        // =======================================================================
+        // When the checkbox controlling Windows performance tweaks is toggled,
+        // this function displays or hides the radio button group and resets them
+        // to a default state (with the third radio button checked, assumed to be "None").
         function toggleRadioButtons(checkbox) {
             const radioGroup = document.getElementById("windowsPerformanceOptions");
             if (checkbox.checked) {
@@ -1050,6 +1083,12 @@ function GetHtmlContent {
             }
         }
 
+        // =======================================================================          
+        // SECTION 7: System Tweaks Trigger
+        // =======================================================================
+        // Checks the state of various tweak checkboxes and the selected radio option
+        // for Windows performance. Logs the selected options and would typically trigger
+        // the associated system tweaks (the actual implementations are placeholders).
         function triggerTweaks() {
             // Get the state of the checkboxes
             const setEdgeDefaultSearch = document.getElementById('setedgedefaultsearchCheckbox').checked;
@@ -1126,6 +1165,11 @@ function GetHtmlContent {
             alert("Tweaks applied successfully!");
         }
 
+        // =======================================================================
+        // SECTION 8: DattoRMM Options Toggle
+        // =======================================================================
+        // Similar to toggleDattoRMMVisibility, this function additionally checks or
+        // unchecks the sub-options checkboxes within the DattoRMM options container.
         function toggleDattoRMMOptions() {
             const dattoRMMCheckbox = document.getElementById('installDattoRMMCheckbox');
             const optionsContainer = document.getElementById('dattoRMMOptionsContainer');
@@ -1155,12 +1199,13 @@ function GetHtmlContent {
             }
         }
 
-
+        // =======================================================================
+        // SECTION 9: Tab Navigation
+        // =======================================================================
+        // Handles tab switching by adding and removing the "active" class from
+        // tab buttons and content containers. Also sets the aria-expanded attribute.
         const tabButtons = document.querySelectorAll('.tab-button');
         const tabContents = document.querySelectorAll('.tab-content');
-        const logArea = document.getElementById('logArea');
-        const fetchSitesButton = document.getElementById('fetchSitesButton');
-        const n8nPasswordInput = document.getElementById('n8nPassword');
        
         tabButtons.forEach(button => {
             button.addEventListener('click', () => {
@@ -1175,16 +1220,31 @@ function GetHtmlContent {
             });
         });
 
+         // =======================================================================
+        // SECTION 10: n8n Password Input and Fetch Sites Button
+        // =======================================================================
+        // Enables or disables the "fetch sites" button based on the length of the
+        // password input. Also listens for the Enter key press to trigger fetching.
+        const logArea = document.getElementById('logArea');
+        const fetchSitesButton = document.getElementById('fetchSitesButton');
+        const n8nPasswordInput = document.getElementById('n8nPassword');
+
         n8nPasswordInput.addEventListener('input', () => {
             fetchSitesButton.disabled = n8nPasswordInput.value.length < 4;
         });
-         // Trigger fetchSites() on Enter key press
+
+         // Trigger fetchSites() on Enter key press if the password length requirement is met.
             n8nPasswordInput.addEventListener('keydown', (event) => {
                 if (event.key === 'Enter' && n8nPasswordInput.value.length >= 12) {
                     fetchSites(); // Call the fetchSites function
                 }
         });
 
+        // =======================================================================
+        // SECTION 11: Fetch Sites from n8n
+        // =======================================================================
+        // Fetches sites from the '/getn8npw' endpoint using the provided password.
+        // Populates the DattoRMM dropdown with the received site options.
         async function fetchSites() {
             const password = document.getElementById('n8nPassword').value;
             const dropdown = document.getElementById('dattoRmmDropdown');
@@ -1210,6 +1270,7 @@ function GetHtmlContent {
                 const sites = await response.json();
                 dropdown.innerHTML = '';
 
+                // Create and append an option for each fetched site.
                 sites.forEach(site => {
                     const option = document.createElement('option');
                     // Adjust property names based on your actual data
@@ -1226,6 +1287,11 @@ function GetHtmlContent {
             }
         }
         
+        // =======================================================================
+        // SECTION 12: Installation Trigger for Modules and Tasks
+        // =======================================================================
+        // Checks the state of various installation-related checkboxes and triggers
+        // the installation process in priority order using asynchronous fetch calls.
         function triggerInstall() {
             const dropdown = document.getElementById('dattoRmmDropdown');
             const UID = dropdown && dropdown.options[dropdown.selectedIndex]
@@ -1361,7 +1427,11 @@ function GetHtmlContent {
         
 
       
-
+        // =======================================================================
+        // SECTION 13: Session End and Window Unload Handling
+        // =======================================================================
+        // Sends a request to the server to properly end the session when the user
+        // closes or refreshes the window. Also logs the session termination.
         function endSession() {
             appendLog("Session ended. Closing application...", "yellow");
             fetch('/quit', { method: 'GET' })
@@ -1376,7 +1446,7 @@ function GetHtmlContent {
               });
         }
 
-        // Intercept window close or refresh
+        // Intercept window close or refresh events to clean up the session.
         window.addEventListener('beforeunload', (event) => {
             endSession(); // Clean up on window close
            
@@ -1384,9 +1454,10 @@ function GetHtmlContent {
 
         
 
-
+        // =======================================================================
-
+        // SECTION 14: Log Management and Polling
-
+        // =======================================================================
+        // Appends a new log message to the designated log area.
         function appendLog(message, color = "white") {
             const log = document.createElement('p');
             log.style.color = color;
@@ -1395,9 +1466,8 @@ function GetHtmlContent {
         }
 
 
-        // -------------------------------------------------------------------
+        // Poll the server for new log entries every 3 seconds.
-        // 3) POLL THE SERVER LOGS (NEW)
+        // Only new messages (beyond the last count) are appended to the log area.
-        // -------------------------------------------------------------------
         let lastLogCount = 0;
         async function fetchLogs() {
             try {
@@ -1415,9 +1485,9 @@ function GetHtmlContent {
                 console.error("Error fetching logs:", err);
             }
         }
-        // Poll logs every 3 seconds (feel free to adjust)
+         // Set up the polling interval (every 3000 milliseconds = 3 seconds).
         setInterval(fetchLogs, 3000);
-        // -------------------------------------------------------------------
+        
     </script>
 </body>
 </html>