openpanel/templates/admini/php/settings.html

<!-- php/settings.html -->
{% extends 'base.html' %}

{% block content %}

<div class="row">
<div class="container">

<ul class="nav nav-pills nav-fill mb-3" id="ex1" role="tablist">
  <li class="active nav-item" role="presentation">
    <a data-bs-toggle="tab" href="#versions" class="nav-link active" aria-current="page" href="#"><span class="desktop-only">{{ _("PHP") }} </span>{{ _('versions') }}</a>
  </li>
  <li class="nav-item" role="presentation">
    <a class="nav-link" data-bs-toggle="tab" href="#extensions"><span class="desktop-only">{{ _("PHP") }} </span>{{ _('extensions') }}</a>
  </li>
  <li class="nav-item" role="presentation">
    <a class="nav-link" data-bs-toggle="tab" href="#settings" id="settingsLink"><span class="mobile-only">{{ _('default') }}</span><span class="desktop-only">{{ _('Default settings') }} <span class="badge bg-success">{{ _('New') }}</span></span></a>
  </li>
  <li class="nav-item" role="presentation">
    <a class="nav-link" id="get_php_options" data-bs-toggle="tab" href="#options"><span class="desktop-only">{{ _("PHP") }} </span>{{ _('options') }}</a>
  </li>
</ul>

        <div class="tab-content">

            <!-- PHP VERSION -->
            <div id="versions" class="tab-pane active">

        <p>{{ _('Changing the PHP version will stop all the processes on your site. It takes 1-2 seconds to complete. Be sure to check your script and plugin requirements to know which PHP version works best for your website.') }}</p>

                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>{{ _('Domain') }}</th>
                            <th>{{ _('Current') }} <span class="desktop-only">{{ _('PHP Version') }}</span></th>
                            <th>{{ _('Change') }} <span class="desktop-only"{{ _('>PHP version for domain') }}</span></th>
                        </tr>
                    </thead>
<tbody>
    {% for domain in domains %}
    <tr>
        <td>{{ domain.domain_url }}</td>
<td>
    <b style="color:
        {% set php_version = php_versions[domain.domain_id] %}
        {% if php_version == "/" %}
            inherit;
        {% else %}
            {% set php_version_numeric = php_version | float %}
            {% set php_version_integer = php_version_numeric | int %}
            {% if php_version_integer >= 8 %}
                green;
            {% elif php_version_integer >= 7 %}
                orange;
            {% else %}
                red;
            {% endif %}
        {% endif %}
    ">
        {{ php_version_numeric | string }}
    </b>
</td>




        <td>
<form method="POST" action="{{ url_for('change_php_version') }}">
    <input type="hidden" name="domain_url" value="{{ domain.domain_url }}">
    <input type="hidden" name="old_php_version" value="php{{ php_versions[domain.domain_id] }}">
    <div class="row">
        <div class="col-auto">
    <select class="form-select" name="new_php_version" id="new_php_version" {% if php_versions[domain.domain_id] == '/' %}disabled{% endif %}>
        {% for version in available_php_versions %}
        <option value="{{ version }}" {% if version == 'php' ~ php_versions[domain.domain_id] %}selected{% endif %}>{{ version }}</option>
        {% endfor %}
    </select></div><div class="col-auto">
                    <button type="submit" class="btn btn-{% if php_versions[domain.domain_id] == '/' %}secondary disabled{% else %}primary{% endif %} ">{{ _('Change') }} <span class="desktop-only">{{ _('PHP Version') }}</span></button>
                    </div></div>
</form>

        </td>
    </tr>
    {% endfor %}
</tbody>
                </table>
            </div>
            <!-- PHP EXTENSIONS -->
            <div id="extensions" class="tab-pane fade">
                    <div class="row g-3" id="php-extensions">
            </div>
            </div>
            <!-- PHP EXTENSIONS -->
            <div id="settings" class="tab-pane fade">
<div class="row g-3" id="php-settings">

<div class="col-md-3 col-xl-6">
    <div class="card card-one">
        <div class="card-header">
            <h6 class="card-title">{{ _('Default PHP version:') }}</h6>
        </div><!-- card-header -->
                <div class="card-body row">
                    <div class="col">
<p>{{ _('The PHP version that is used by default for newly added domains is the one that you choose here.') }}</p>

<p>{{ _('Current default PHP version:') }} <b>{{ php_default_version|replace('php', '') }}</b></p>

        <form method="POST" action="/change_default_php_version_for_new_domains">
            <div class="form-group">
                <label for="new_php_version">{{ _('Change PHP Version to be used for new domains:') }}</label>
<div class="container">
  <div class="row">
    <div class="col-sm">
                <select class="form-control" id="new_php_version" name="new_php_version">
        <option value="" selected disabled>{{ _('Select PHP Version') }}</option>
        {% for version in available_php_versions %}
        <option value="{{ version }}">{{ version|replace('php', '') }}</option>
                    {% endfor %}
                </select>
    </div>
    <div class="col-sm">
            <button type="submit" class="btn btn-primary">{{ _('Change') }}</button>
    </div>
  </div>
</div>



            </div>

        </form>


                </div>
            </div>

    </div>
</div>

<div class="col-md-6 col-xl-6">
    <div class="card card-one">
        <div class="card-header">
            <h6 class="card-title">{{ _('Install a new version') }}</h6>
        </div><!-- card-header -->
                <div class="card-body row">
                    <div class="col">
<p>{{ _('For best performance we recommend to only install PHP versions that you will be activelly using.') }}</p>

<p> {{ _("Currently installed PHP versions") }}: 
{% for version in available_php_versions %}
  <b>{{ version|replace('php', '') }}</b>{% if not loop.last %}, {% endif %}
{% endfor %}
</p>


        <label for="php-version-select">{{ _('Select PHP Version to Install:') }}</label>

<div class="container">
  <div class="row">
    <div class="col-sm">
<form id="install-php-form" method="post" action="/php/install">
    <div class="form-group">
        <select class="form-control" id="php-version-select" name="php_version">
            <option value="" selected disabled>{{ _('Select PHP Version') }}</option>
                        <ul class="list-unstyled" id="php-available-versions">
                         </ul>
        </select>
    </div>

    </div>
    <div class="col-sm">
    <button type="submit" class="btn btn-primary">{{ _('Install') }}</button>
</form>





<script>
    document.getElementById('install-php-form').addEventListener('submit', function(event) {
        event.preventDefault();  // Prevent default form submission

        const phpVersion = document.getElementById('php-version-select').value;

        if (!phpVersion) {
            alert('Please select a PHP version.');
            return;
        }

        // Create the data to send in the request
        const formData = new FormData();
        formData.append('php_version', phpVersion);

        // Send the form data using Fetch API
        fetch('/php/install', {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            // Handle the response data (e.g., show a success message)
            if (data.success) {
                alert('PHP installation started successfully.');
            } else {
                alert('Failed to start PHP installation: ' + data.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            //alert('An error occurred while installing PHP.');
        });
    });
</script>





    </div>
  </div>
</div>

                </div>
            </div>
    </div>
</div>
    

<div class="col-md-12 col-xl-12" id="install_in_progress"  style="display: none;">
    <div class="card card-one">
        <div class="card-header">
            <h6 class="card-title">{{ _('PHP version installation log') }}</h6>
        </div><!-- card-header -->
                <div class="card-body row">
                    <div class="col">

<pre id="log_progress" style="max-height: 250px;"></pre>
                </div>
            </div>
    </div>
</div>

<script>
$(document).ready(function () {
    // Function to check installation progress
    function checkInstallationProgress() {
        // Check if #settings is in the URL or the link is clicked
        if (window.location.hash === "#settings" || window.location.hash === "?set" || $('#settingsLink').hasClass('active')) {
            // Perform AJAX request
            $.ajax({
                url: '/php/check_install',
                type: 'GET',
                success: function (data) {
                    try {
                        // Try to parse the response as JSON
                        var jsonData = JSON.parse(data);

                        // Check if it's valid JSON
                        if (jsonData && typeof jsonData === 'object' && jsonData.message !== undefined) {
                            // Do nothing if it's JSON with a "message" property
                            return;
                        }
                    } catch (e) {
                        // If parsing as JSON fails, proceed to display the installation progress

                        // Update this line to include the logic for styling lines starting with "##"
                        $('#log_progress').html(data).each(function () {
                            // Split the content of the <pre> tag into lines
                            var lines = $(this).text().split('\n');

                            // Iterate through each line and apply styling if it starts with "##"
                            for (var i = 0; i < lines.length; i++) {
                                if (lines[i].trim().startsWith("##")) {
                                    lines[i] = '<b>' + lines[i].trim().substring(2) + '</b>';
                                }
                            }

                            // Join the lines back together and update the content of the <pre> tag
                            $(this).html(lines.join('\n'));
                        });

                            $('#install_in_progress').show();

                            // Scroll to the bottom of log
                            var logProgress = document.getElementById('log_progress');
                            logProgress.scrollTop = logProgress.scrollHeight;                       
                    }
                },
                error: function (error) {
                    console.error('Error:', error);
                    // Handle error if needed
                }
            });
        }
    }

    // Initial check
    checkInstallationProgress();

    // Set interval to check every 1 second
    setInterval(checkInstallationProgress, 1000);
});



</script>



<script>
$(document).ready(function () {
    // Send an AJAX request to the Flask endpoint
    $.ajax({
        type: "GET",
        url: "/php-check-available",
        dataType: "json",
        success: function (data) {
            // Handle the response data
            if (data.available_for_install && data.available_for_install.length > 0) {
                var phpVersions = data.available_for_install;

                // Get a reference to the select element
                var select = document.getElementById("php-version-select");

                // Remove any existing options from the select
                select.innerHTML = "";

                // Add the default disabled option
                var defaultOption = document.createElement("option");
                defaultOption.value = "";
                defaultOption.text = "{{ _('Select PHP Version') }}";
                defaultOption.disabled = true;
                defaultOption.selected = true;
                select.appendChild(defaultOption);

                // Populate the select with PHP versions (stripping "-fpm" and "php" prefix)
                for (var i = 0; i < phpVersions.length; i++) {
                    var version = phpVersions[i].replace(/-fpm$/, '').replace(/^php/, ''); // Removes "-fpm" and "php" prefix
                    var option = document.createElement("option");
                    option.value = version;
                    option.text = version;
                    select.appendChild(option);
                }
            } else {
                alert("{{ _('No PHP versions found.') }}");
            }
        },
        error: function (xhr, status, error) {
            console.error("Error fetching PHP versions:", status, error);
            alert("{{ _('Error fetching PHP versions.') }}");
        }
    });
});


</script>


            </div>
            </div>
<!-- PHP OPTIONS -->
<div id="options" class="tab-pane fade">
    <div class="row g-3" id="php-versions">
    </div>
</div>

<script>
    $(document).ready(function() {
        // Function to fetch and display PHP extensions data
        function fetchPhpExtensionsData() {
            $.ajax({
                url: '/php-extensions',
                type: 'GET',
                dataType: 'json',
                success: function(data) {
                    // Process the JSON data and display it in the #php-extensions section
                    var phpExtensionsContainer = $('#php-extensions');
                    phpExtensionsContainer.empty(); // Clear existing content

                    // Loop through the PHP versions and their extensions
                    for (var version in data) {
                        var extensions = data[version];

                        // Create a card for each PHP version and its extensions
                        var cardHtml = '<div class="col-md-6 col-xl-6">' +
                            '<div class="card card-one">' +
                            '<div class="card-header">' +
                            '<h6 class="card-title">PHP ' + version + '</h6>' +
                            '<nav class="nav nav-icon nav-icon-sm ms-auto">' +
                            '</nav>' +
                            '</div><!-- card-header -->' +
                            '<div class="card-body row">'; // Added "row" class to card-body

                        // Split extensions into two columns
                        var splitIndex = Math.ceil(extensions.length / 2);
                        var firstColumnExtensions = extensions.slice(0, splitIndex);
                        var secondColumnExtensions = extensions.slice(splitIndex);

                        // Create the first column
                        cardHtml += '<div class="col">';
                        cardHtml += '<ul class="list-unstyled">';
                        for (var i = 0; i < firstColumnExtensions.length; i++) {
                            cardHtml += '<li>' + firstColumnExtensions[i] + '</li>';
                        }
                        cardHtml += '</ul>';
                        cardHtml += '</div>'; // Close the first column

                        // Create the second column
                        cardHtml += '<div class="col">';
                        cardHtml += '<ul class="list-unstyled">';
                        for (var i = 0; i < secondColumnExtensions.length; i++) {
                            cardHtml += '<li>' + secondColumnExtensions[i] + '</li>';
                        }
                        cardHtml += '</ul>';
                        cardHtml += '</div>'; // Close the second column

                        cardHtml += '</div></div></div>'; // Close card-body, card, and col-md-6

                        phpExtensionsContainer.append(cardHtml);
                    }
                },
                error: function(error) {
                    console.log('Error:', error);
                }
            });
        }

        // Delay 50ms
        setTimeout(fetchPhpExtensionsData, 0);
        //setInterval(fetchPhpExtensionsData, 1000);
    });








    // Function to fetch PHP options and populate the tab
    function fetchPhpOptions() {
        // Make an Ajax request to fetch data from the /php-limits endpoint
        $.ajax({
            url: '/php-limits',
            type: 'GET',
            dataType: 'json',
            success: function(data) {
                // Process the JSON data and create a card for each PHP version
                var phpVersionsContainer = $('#php-versions');
                phpVersionsContainer.empty(); // Clear existing content
                for (var version in data) {
                    var phpConfiguration = data[version];
                    
                    // Create a card for each PHP version
                    var cardHtml = '<div class="col-md-6 col-xl-6">' +
                        '<div class="card card-one">' +
                        '<div class="card-header">' +
                        '<h6 class="card-title">PHP ' + version + '</h6>' +
                        '<nav class="nav nav-icon nav-icon-sm ms-auto">' +
                        '<a href="/php/php' + version + '.ini/editor" target="_blank" class="nav-link"><i class="bi bi-pencil-fill"></i> &nbsp; {{ _("Edit PHP.INI") }}</a>' +
                        '</nav>' +
                        '</div><!-- card-header -->' +
                        '<div class="card-body"><table class="table">' +
                        '<thead><tr><th>{{ _("Setting") }}</th><th>Value</th></tr></thead><tbody>';
                    
                    // Loop through the PHP configuration settings for this version
                    for (var setting in phpConfiguration) {
                        cardHtml += '<tr><td>' + setting + '</td><td>' + phpConfiguration[setting] + '</td></tr>';
                    }
                    
                    cardHtml += '</tbody></table></div></div></div>';
                    phpVersionsContainer.append(cardHtml);
                }
            },
            error: function(error) {
                console.log('Error:', error);
            }
        });
    }

    setTimeout(fetchPhpOptions, 0);
    //setInterval(fetchPhpOptions, 1000);
    // Attach the click event handler to the tab link
    $('#get_php_options').on('click', function() {
        // Fetch the PHP options and populate the tab
        fetchPhpOptions();
    });
</script>


        </div>
    </div>
</div>

<script>
document.addEventListener("DOMContentLoaded", function() {
  // Get the hash value from the URL
  var hash = window.location.hash;

  // Check if the hash corresponds to any of the tab links
  var tabLinks = document.querySelectorAll('.nav-link[data-bs-toggle="tab"]');
  for (var i = 0; i < tabLinks.length; i++) {
    var tabLink = tabLinks[i];
    var href = tabLink.getAttribute("href");
    
    // Check if the hash matches the href
    if (hash === href) {
      // Trigger a click event on the matching tab link
      tabLink.click();
      break; // Stop checking once a match is found
    }
  }
});
</script>

{% endblock %}