CyberPanel/websiteFunctions/templates/websiteFunctions/listWebsites.html

{% extends "baseTemplate/index.html" %}
{% load i18n %}
{% block title %}{% trans "Websites Hosted - 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>

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

        <div id="page-title">
            <h2 id="domainNamePage">{% trans "List Websites" %}
                <a class="pull-right btn btn-primary" href="{% url "createWebsite" %}">{% trans "Create Website" %}</a>
            </h2>
            <img ng-hide="cyberPanelLoading" src="{% static 'images/loading.gif' %}">
            <p>{% trans "On this page you can launch, list, modify and delete websites from your server." %}</p>
        </div>

        <div class="col-sm-10" style="padding: 0px; box-shadow: 0px 0px 1px 0px #888888; margin-bottom: 2%">
            <input ng-change="searchWebsites()" placeholder="Search..." ng-model="patternAdded" name="dom" type="text"
                   class="form-control" required>
        </div>

        <div class="col-sm-2">
            <div class="form-group">
                <select ng-model="recordsToShow" ng-change="getFurtherWebsitesFromDB()"
                        class="form-control" id="example-select">
                    <option>10</option>
                    <option>50</option>
                    <option>100</option>
                </select>
            </div>
        </div>

        <div ng-repeat="web in WebSitesList track by $index" class="panel col-md-12"
             style="padding: 0px; box-shadow: 0px 0px 1px 0px #888888;">
            <div class="">
                <div class="table-responsive no-gutter text-nowrap" style="overflow-x: hidden;">

                    <div style="border-bottom: 1px solid #888888" class="col-md-12">
                        <div class="col-lg-10 content-box-header" style="text-transform: none;">
                            <a href="http://{$ web.domain $}" target="_blank" title="Visit Site">
                                <h2 style="display: inline; color: #414C59;" ng-bind="web.domain"></h2>
                            </a>
                            <a target="_self" href="/filemanager/{$ web.domain $}" title="Open File Manager"> --
                                {% trans "File Manager" %}</a>
                        </div>
                        <div class="col-md-2 content-box-header" style="text-transform: none;">
                            <a href="/websites/{$ web.domain $}" target="_self" title="Manage Website">
                                <i class="p fa fa-external-link btn-icon">&emsp;</i>
                                <span>{% trans "Manage" %}</span>
                            </a>
                        </div>
                    </div>

                    <div class="col-md-12">
                        <div class="col-md-3 content-box-header">
                            <i class="p fa fa-sticky-note btn-icon text-muted" data-toggle="tooltip"
                               data-placement="right" title="State">&emsp;</i>
                            <span ng-bind="web.state" style="text-transform: none"></span>
                        </div>
                        <div class="col-md-3 content-box-header">
                            <i class="p fa fa-map-marker btn-icon text-muted" data-toggle="tooltip"
                               data-placement="right" title="IP Address">&emsp;</i>
                            <span ng-bind="web.ipAddress"></span>
                        </div>
                        <div class="col-md-3 content-box-header">
                            <i class="p fa fa-lock btn-icon text-muted" data-toggle="tooltip" data-placement="right"
                               title="SSL">&emsp;</i>
                            <span><a ng-click="issueSSL(web.domain)" href=""
                                     style="text-transform: none">{% trans "Issue SSL" %}</a></span>
                        </div>
                        <div class="col-md-3 content-box-header">
                            <span ng-bind="web.phpVersion"></span>
                        </div>
                    </div>

                    <div class="col-md-12">
                        <div class="col-md-3 content-box-header">
                            <i class="p fa fa-hdd-o btn-icon text-muted" data-toggle="tooltip"
                               data-placement="right"
                               title="Disk Usage">&emsp;</i>
                            <span ng-bind="web.diskUsed" style="text-transform: none"></span>
                        </div>
                        <div class="col-md-3 content-box-header">
                            <i class="p fa fa-cubes btn-icon text-muted" data-toggle="tooltip"
                               data-placement="right"
                               title="Packages">&emsp;</i>
                            <span ng-bind="web.package" style="text-transform: none"></span>
                        </div>
                        <div class="col-md-3 content-box-header">
                            <i class="p fa fa-user btn-icon text-muted" data-toggle="tooltip" data-placement="right"
                               title="Owner">&emsp;</i>
                            <span ng-bind="web.admin" style="text-transform: none"></span>
                        </div>
                        <div class="col-md-3 content-box-header">
                            <a href="javascript:void(0);" ng-click="showWPSites(web.domain)" style="cursor: pointer;">
                                <i class="p fa fa-wordpress btn-icon text-muted" data-toggle="tooltip" 
                                   data-placement="right" title="Show WordPress Sites">&emsp;</i>
                                <span ng-if="web.wp_sites && web.wp_sites.length > 0" style="text-transform: none">
                                    {$ web.wp_sites.length $} WordPress Sites
                                </span>
                            </a>
                        </div>
                    </div>

                    <!-- WordPress Sites Section -->
                    <div class="col-md-12" ng-if="web.showWPSites && web.wp_sites && web.wp_sites.length > 0">
                        <div ng-repeat="wp in web.wp_sites" style="margin: 15px 0; padding: 20px; background: white; border: 1px solid #ddd; border-radius: 4px;">
                            <div class="row">
                                <div class="col-md-6">
                                    <span style="font-size: 16px;" ng-bind="wp.title"></span>
                                </div>
                                <div class="col-md-6 text-right">
                                    <button class="btn btn-default btn-sm" style="margin-right: 5px;" ng-click="visitSite(wp.url)">Visit Site</button>
                                    <button class="btn btn-default btn-sm" style="margin-right: 5px;" ng-click="wpLogin(wp.id)">WP Login</button>
                                    <button class="btn btn-primary btn-sm" ng-click="manageWP(wp.id)">MANAGE</button>
                                </div>
                            </div>

                            <div class="row" style="margin-top: 30px;">
                                <div class="col-md-3">
                                    <div style="border-top: 1px solid #ddd; padding-top: 15px;">
                                        <div style="color: #666; font-size: 12px; margin-bottom: 5px;">WordPress</div>
                                        <div ng-bind="wp.version || 'Unknown'"></div>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div style="border-top: 1px solid #ddd; padding-top: 15px;">
                                        <div style="color: #666; font-size: 12px; margin-bottom: 5px;">PHP Version</div>
                                        <div ng-bind="wp.phpVersion || 'Unknown'"></div>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div style="border-top: 1px solid #ddd; padding-top: 15px;">
                                        <div style="color: #666; font-size: 12px; margin-bottom: 5px;">Theme</div>
                                        <div ng-bind="wp.theme || 'Unknown'"></div>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div style="border-top: 1px solid #ddd; padding-top: 15px;">
                                        <div style="color: #666; font-size: 12px; margin-bottom: 5px;">Plugins</div>
                                        <div>{$ wp.activePlugins || '0' $} active</div>
                                    </div>
                                </div>
                            </div>

                            <div class="row" style="margin-top: 20px;">
                                <div class="col-md-6">
                                    <div style="margin-bottom: 10px;">
                                        <input type="checkbox" ng-model="wp.searchIndex" ng-change="updateSetting(wp, 'search-indexing')" style="margin-right: 5px;">
                                        <span style="color: #666;">Search engine indexing</span>
                                    </div>
                                    <div>
                                        <input type="checkbox" ng-model="wp.debugging" ng-change="updateSetting(wp, 'debugging')" style="margin-right: 5px;">
                                        <span style="color: #666;">Debugging</span>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div style="margin-bottom: 10px;">
                                        <input type="checkbox" ng-model="wp.passwordProtection" ng-change="updateSetting(wp, 'password-protection')" style="margin-right: 5px;">
                                        <span style="color: #666;">Password protection</span>
                                    </div>
                                    <div>
                                        <input type="checkbox" ng-model="wp.maintenanceMode" ng-change="updateSetting(wp, 'maintenance-mode')" style="margin-right: 5px;">
                                        <span style="color: #666;">Maintenance mode</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div id="listFail" class="alert alert-danger">
                        <p>{% trans "Cannot list websites. Error message:" %} {$ errorMessage $}</p>
                    </div>
                </div>
            </div>
        </div>
        <div style="margin-top: 2%" class="row">
            <div class="col-md-12">
                <div class="row">
                    <div class="col-md-9">
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <select ng-model="currentPage" class="form-control"
                                    ng-change="getFurtherWebsitesFromDB()">
                                <option ng-repeat="page in pagination">{$ $index + 1 $}</option>
                            </select>
                        </div>
                    </div>
                </div> <!-- end row -->
            </div>
        </div>
    </div>

{% endblock %}