CyberPanel/websiteFunctions/templates/websiteFunctions/WPsitesList.html

{% extends "baseTemplate/index.html" %}
{% load i18n %}
{% block title %}{% trans "WordPress Toolkit - CyberPanel" %}{% endblock %}
{% block content %}

    {% load static %}
    {% get_current_language as LANGUAGE_CODE %}
    <!-- Current language: {{ LANGUAGE_CODE }} -->

    <script>
        $(document).ready(function () {
            $('[data-toggle="tooltip"]').tooltip();
        });
    </script>

    <style>
        table { /* tables still need 'cellspacing="0"' in the markup */
            border-collapse: separate;
            border-spacing: 0;
        }

        .table-spacing {
            border-spacing: 0em .9em;
        }

        table th:nth-child(1) {

            /* Safari 3-4, iOS 1-3.2, Android 1.6- */
            -webkit-border-radius: 3px 0px 0px 3px;

            /* Firefox 1-3.6 */
            -moz-border-radius: 3px 0px 0px 3px;

            /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
            border-radius: 3px 0px 0px 3px;
        }

        table th:nth-child(1) {

            /* Safari 3-4, iOS 1-3.2, Android 1.6- */
            -webkit-border-radius: 20px 0px 0px 20px;

            /* Firefox 1-3.6 */
            -moz-border-radius: 20px 0px 0px 20px;

            /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
            border-radius: 20px 0px 0px 20px;
        }

        table th:nth-last-child(1) {
            /* Safari 3-4, iOS 1-3.2, Android 1.6- */
            -webkit-border-radius: 0px 20px 20px 0px;

            /* Firefox 1-3.6 */
            -moz-border-radius: 0px 20px 20px 0px;

            /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
            border-radius: 0px 20px 20px 0px;
        }

        table td:nth-child(1) {

            /* Safari 3-4, iOS 1-3.2, Android 1.6- */
            -webkit-border-radius: 20px 0px 0px 20px;

            /* Firefox 1-3.6 */
            -moz-border-radius: 20px 0px 0px 20px;

            /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
            border-radius: 20px 0px 0px 20px;
        }

        table td:nth-last-child(1) {
            /* Safari 3-4, iOS 1-3.2, Android 1.6- */
            -webkit-border-radius: 0px 20px 20px 0px;

            /* Firefox 1-3.6 */
            -moz-border-radius: 0px 20px 20px 0px;

            /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
            border-radius: 0px 20px 20px 0px;
        }

        .wp-site-card {
            background: white;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            margin-bottom: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }

        .wp-site-header {
            padding: 15px;
            border-bottom: 1px solid #f0f0f0;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .wp-site-content {
            padding: 20px;
        }

        .wp-site-preview {
            width: 200px;
            height: 150px;
            object-fit: cover;
            border-radius: 4px;
            border: 1px solid #e0e0e0;
            float: left;
            margin-right: 20px;
        }

        .wp-site-info {
            margin-left: 220px;
        }

        .status-section {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
            margin-bottom: 20px;
        }

        .tools-section {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
        }

        .status-item, .tool-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 8px;
            background: #f8f9fa;
            border-radius: 4px;
        }

        .toggle-switch {
            position: relative;
            display: inline-block;
            width: 50px;
            height: 24px;
        }

        .toggle-switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            transition: .4s;
            border-radius: 24px;
        }

        .slider:before {
            position: absolute;
            content: "";
            height: 16px;
            width: 16px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            transition: .4s;
            border-radius: 50%;
        }

        input:checked + .slider {
            background-color: #2196F3;
        }

        input:checked + .slider:before {
            transform: translateX(26px);
        }

        .action-buttons {
            display: flex;
            gap: 10px;
        }

        .btn-tool {
            padding: 5px 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            background: white;
            color: #333;
            text-decoration: none;
            font-size: 12px;
        }

        .btn-tool:hover {
            background: #f8f9fa;
        }

        .warning-badge {
            background: #ffc107;
            color: #000;
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 12px;
        }

        .top-actions {
            margin-bottom: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .search-box {
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            width: 300px;
        }
    </style>


    <div ng-controller="listWebsites" class="container">

        <div class="top-actions">
            <h2>WordPress Toolkit {% if help_url %}<a href="{{ help_url }}" class="btn-tool">Help</a>{% endif %}</h2>
            <div>
                <input type="text" class="search-box" placeholder="Search WordPress installations...">
                <a href="{% url 'createWordpress' %}" class="btn btn-primary">Install WordPress</a>
            </div>
        </div>

        {% for site in wpsite %}
        <div class="wp-site-card" data-site-id="{{ site.id }}">
            <div class="wp-site-header">
                <div>
                    <input type="checkbox" class="site-selector">
                    <a href="{{ site.url }}" target="_blank">{{ site.url }}</a>
                    {% if site.production_status %}<span class="badge bg-primary">PRODUCTION</span>{% endif %}
                </div>
                <div class="action-buttons">
                    <a href="{% url 'WPHome' %}?ID={{ site.id }}" class="btn-tool">
                        <i class="fas fa-cog"></i> Manage
                    </a>
                    <button onclick="DeleteWPNow('{% url 'ListWPSites' %}?DeleteID={{ site.id }}')" class="btn-tool">
                        <i class="fas fa-trash"></i> Delete
                    </button>
                </div>
            </div>
            <div class="wp-site-content">
                <img src="{% if site.screenshot %}{{ site.screenshot }}{% else %}{% static 'images/wp-default.png' %}{% endif %}" 
                     class="wp-site-preview" alt="{{ site.title }}">
                
                <div class="wp-site-info">
                    <h3>{{ site.title }} <a href="{% url 'AutoLogin' %}?id={{ site.id }}" target="_blank" class="btn-tool">Login</a></h3>
                    
                    <div class="status-section">
                        <div class="status-item">
                            <span>WordPress</span>
                            <span class="wp-version" data-site-id="{{ site.id }}">Loading...</span>
                        </div>
                        <div class="status-item">
                            <span>Plugins</span>
                            <span class="plugin-status" data-site-id="{{ site.id }}">Loading...</span>
                        </div>
                        <div class="status-item">
                            <span>Themes</span>
                            <span class="theme-status" data-site-id="{{ site.id }}">Loading...</span>
                        </div>
                        <div class="status-item">
                            <span>PHP</span>
                            <span class="php-version" data-site-id="{{ site.id }}">Loading...</span>
                        </div>
                    </div>

                    <div class="tools-section">
                        <div class="tool-item">
                            <span>Search engine indexing</span>
                            <label class="toggle-switch">
                                <input type="checkbox" class="search-indexing" data-site-id="{{ site.id }}">
                                <span class="slider"></span>
                            </label>
                        </div>
                        <div class="tool-item">
                            <span>Debugging</span>
                            <label class="toggle-switch">
                                <input type="checkbox" class="debugging" data-site-id="{{ site.id }}">
                                <span class="slider"></span>
                            </label>
                        </div>
                        <div class="tool-item">
                            <span>Password protection</span>
                            <label class="toggle-switch">
                                <input type="checkbox" class="password-protection" data-site-id="{{ site.id }}">
                                <span class="slider"></span>
                            </label>
                        </div>
                        <div class="tool-item">
                            <span>Maintenance mode</span>
                            <label class="toggle-switch">
                                <input type="checkbox" class="maintenance-mode" data-site-id="{{ site.id }}">
                                <span class="slider"></span>
                            </label>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {% endfor %}

    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Function to fetch and update site data
            function updateSiteData(siteId) {
                fetch(`/FetchWPdata?WPid=${siteId}`)
                    .then(response => response.json())
                    .then(data => {
                        if (data.status === 1) {
                            const site = data.ret_data;
                            
                            // Update version
                            document.querySelector(`.wp-version[data-site-id="${siteId}"]`).textContent = site.version;
                            
                            // Update toggles
                            document.querySelector(`.search-indexing[data-site-id="${siteId}"]`).checked = site.searchIndex === 1;
                            document.querySelector(`.debugging[data-site-id="${siteId}"]`).checked = site.debugging === 1;
                            document.querySelector(`.password-protection[data-site-id="${siteId}"]`).checked = site.passwordprotection === 1;
                            document.querySelector(`.maintenance-mode[data-site-id="${siteId}"]`).checked = site.maintenanceMode === 1;
                        }
                    });
            }

            // Update data for all sites
            document.querySelectorAll('.wp-site-card').forEach(card => {
                const siteId = card.dataset.siteId;
                updateSiteData(siteId);
            });

            // Handle toggle changes
            document.querySelectorAll('.toggle-switch input').forEach(toggle => {
                toggle.addEventListener('change', function() {
                    const siteId = this.dataset.siteId;
                    const setting = this.className;
                    const value = this.checked ? 1 : 0;

                    // Send update to server (you'll need to implement these endpoints)
                    fetch(`/UpdateWPSettings`, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                        },
                        body: JSON.stringify({
                            siteId: siteId,
                            setting: setting,
                            value: value
                        })
                    });
                });
            });
        });
    </script>

{% endblock %}