mirror of
https://github.com/usmannasir/cyberpanel.git
synced 2026-06-27 18:29:37 +02:00
543 lines
19 KiB
HTML
543 lines
19 KiB
HTML
{% extends "baseTemplate/index.html" %}
|
|
{% load i18n %}
|
|
{% block title %}{% trans "WordPress Toolkit - CyberPanel" %}{% endblock %}
|
|
|
|
{% block header_scripts %}
|
|
<script>
|
|
// Create or get the CyberCP module
|
|
try {
|
|
angular.module('CyberCP');
|
|
} catch(err) {
|
|
angular.module('CyberCP', []);
|
|
}
|
|
|
|
// Now add our controller to the module
|
|
angular.module('CyberCP').controller('listWordPressSites', function($scope, $http) {
|
|
// Initialize scope variables with pre-serialized JSON
|
|
$scope.wpSites = {{ wpsite|safe }};
|
|
$scope.debug = {{ debug_info|safe }};
|
|
$scope.totalSites = {{ total_sites }};
|
|
$scope.userId = $scope.debug.user_id;
|
|
$scope.isAdmin = $scope.debug.is_admin;
|
|
$scope.wpSitesCount = $scope.debug.wp_sites_count;
|
|
|
|
$scope.deleteWPSite = function(site) {
|
|
if (confirm('Are you sure you want to delete this WordPress site? This action cannot be undone.')) {
|
|
window.location.href = "{% url 'ListWPSites' %}?DeleteID=" + site.id;
|
|
}
|
|
};
|
|
|
|
$scope.updateSetting = function(site, setting) {
|
|
var data = {
|
|
siteId: site.id,
|
|
setting: setting,
|
|
value: site[setting] ? 1 : 0
|
|
};
|
|
|
|
GLobalAjaxCall($http, "{% url 'UpdateWPSettings' %}", data,
|
|
function(response) {
|
|
if (!response.data.status) {
|
|
site[setting] = !site[setting];
|
|
new PNotify({
|
|
title: 'Operation Failed!',
|
|
text: response.data.error_message || 'Unknown error',
|
|
type: 'error'
|
|
});
|
|
} else {
|
|
new PNotify({
|
|
title: 'Success!',
|
|
text: 'Setting updated successfully.',
|
|
type: 'success'
|
|
});
|
|
}
|
|
},
|
|
function(response) {
|
|
site[setting] = !site[setting];
|
|
new PNotify({
|
|
title: 'Operation Failed!',
|
|
text: 'Could not connect to server, please try again.',
|
|
type: 'error'
|
|
});
|
|
}
|
|
);
|
|
};
|
|
|
|
// Function to fetch plugin data
|
|
function fetchPluginData(site) {
|
|
var data = { WPid: site.id };
|
|
GLobalAjaxCall($http, "{% url 'GetCurrentPlugins' %}", data,
|
|
function(response) {
|
|
if (response.data.status === 1) {
|
|
var plugins = JSON.parse(response.data.plugins);
|
|
site.activePlugins = plugins.filter(function(p) { return p.status === 'active'; }).length;
|
|
site.totalPlugins = plugins.length;
|
|
}
|
|
},
|
|
function(response) {
|
|
site.activePlugins = 'Error';
|
|
}
|
|
);
|
|
}
|
|
|
|
// Function to fetch theme data
|
|
function fetchThemeData(site) {
|
|
var data = { WPid: site.id };
|
|
GLobalAjaxCall($http, "{% url 'GetCurrentThemes' %}", data,
|
|
function(response) {
|
|
if (response.data.status === 1) {
|
|
var themes = JSON.parse(response.data.themes);
|
|
site.activeTheme = themes.find(function(t) { return t.status === 'active'; }).name;
|
|
site.totalThemes = themes.length;
|
|
}
|
|
},
|
|
function(response) {
|
|
site.activeTheme = 'Error';
|
|
}
|
|
);
|
|
}
|
|
|
|
// Fetch site data for each site
|
|
function fetchSiteData(site) {
|
|
var data = { WPid: site.id };
|
|
|
|
GLobalAjaxCall($http, "{% url 'FetchWPdata' %}", data,
|
|
function(response) {
|
|
if (response.data.status === 1) {
|
|
angular.extend(site, response.data.ret_data);
|
|
// After getting basic site data, fetch plugins and themes
|
|
fetchPluginData(site);
|
|
fetchThemeData(site);
|
|
}
|
|
},
|
|
function(response) {
|
|
new PNotify({
|
|
title: 'Operation Failed!',
|
|
text: 'Could not fetch site data, please refresh the page.',
|
|
type: 'error'
|
|
});
|
|
}
|
|
);
|
|
}
|
|
|
|
if ($scope.wpSites) {
|
|
$scope.wpSites.forEach(fetchSiteData);
|
|
}
|
|
|
|
// Initialize tooltips
|
|
angular.element(document).ready(function() {
|
|
$('[data-toggle="tooltip"]').tooltip();
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock %}
|
|
|
|
{% block styles %}
|
|
<style>
|
|
.container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
}
|
|
|
|
.wp-site-card {
|
|
background: white;
|
|
border: 1px solid #e6e6e6;
|
|
border-radius: 8px;
|
|
margin-bottom: 20px;
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.wp-site-card:hover {
|
|
box-shadow: 0 2px 6px rgba(0,0,0,0.12);
|
|
}
|
|
|
|
.wp-site-header {
|
|
padding: 12px 20px;
|
|
border-bottom: 1px solid #f0f0f0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
background: #f8f9fa;
|
|
border-radius: 8px 8px 0 0;
|
|
}
|
|
|
|
.wp-site-header a {
|
|
color: #0051c3;
|
|
text-decoration: none;
|
|
font-weight: 500;
|
|
margin-left: 8px;
|
|
}
|
|
|
|
.wp-site-content {
|
|
padding: 24px;
|
|
display: grid;
|
|
grid-template-columns: 200px 1fr;
|
|
gap: 24px;
|
|
}
|
|
|
|
.wp-site-preview {
|
|
width: 200px;
|
|
height: 150px;
|
|
object-fit: cover;
|
|
border-radius: 6px;
|
|
border: 1px solid #e6e6e6;
|
|
background: #f8f9fa;
|
|
}
|
|
|
|
.wp-site-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
}
|
|
|
|
.wp-site-info h3 {
|
|
margin: 0;
|
|
font-size: 18px;
|
|
color: #1a1a1a;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.status-section {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 16px;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.tools-section {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 16px;
|
|
}
|
|
|
|
.status-item, .tool-item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 12px 16px;
|
|
background: #f8f9fa;
|
|
border-radius: 6px;
|
|
border: 1px solid #e6e6e6;
|
|
min-height: 48px;
|
|
}
|
|
|
|
.status-item span:first-child, .tool-item span:first-child {
|
|
font-weight: 500;
|
|
color: #444;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.status-item span:last-child {
|
|
color: #666;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.toggle-switch {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 44px;
|
|
height: 22px;
|
|
}
|
|
|
|
.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: .3s;
|
|
border-radius: 22px;
|
|
}
|
|
|
|
.slider:before {
|
|
position: absolute;
|
|
content: "";
|
|
height: 18px;
|
|
width: 18px;
|
|
left: 2px;
|
|
bottom: 2px;
|
|
background-color: white;
|
|
transition: .3s;
|
|
border-radius: 50%;
|
|
box-shadow: 0 1px 2px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
input:checked + .slider {
|
|
background-color: #00847c;
|
|
}
|
|
|
|
input:checked + .slider:before {
|
|
transform: translateX(22px);
|
|
}
|
|
|
|
.action-buttons {
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
|
|
.btn-tool {
|
|
padding: 6px 12px;
|
|
border: 1px solid #e6e6e6;
|
|
border-radius: 4px;
|
|
background: white;
|
|
color: #444;
|
|
text-decoration: none;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
transition: all 0.2s ease;
|
|
height: 32px;
|
|
line-height: 20px;
|
|
}
|
|
|
|
.btn-tool:hover {
|
|
background: #f5f5f5;
|
|
border-color: #d9d9d9;
|
|
color: #1a1a1a;
|
|
}
|
|
|
|
.btn-tool i {
|
|
font-size: 14px;
|
|
color: #666;
|
|
}
|
|
|
|
.badge {
|
|
padding: 3px 8px;
|
|
border-radius: 12px;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.3px;
|
|
}
|
|
|
|
.bg-primary {
|
|
background-color: #00847c;
|
|
color: white;
|
|
}
|
|
|
|
.top-actions {
|
|
margin-bottom: 24px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 16px 24px;
|
|
background: white;
|
|
border-radius: 8px;
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
|
|
}
|
|
|
|
.top-actions h2 {
|
|
font-size: 20px;
|
|
color: #1a1a1a;
|
|
margin: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.search-box {
|
|
padding: 8px 16px;
|
|
border: 1px solid #e6e6e6;
|
|
border-radius: 4px;
|
|
width: 300px;
|
|
margin-right: 12px;
|
|
font-size: 14px;
|
|
color: #444;
|
|
transition: border-color 0.2s;
|
|
}
|
|
|
|
.search-box:focus {
|
|
outline: none;
|
|
border-color: #00847c;
|
|
}
|
|
|
|
.btn-primary {
|
|
background: #00847c;
|
|
color: white;
|
|
border: none;
|
|
padding: 8px 16px;
|
|
border-radius: 4px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: background 0.2s;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background: #006d66;
|
|
}
|
|
|
|
.site-selector {
|
|
margin-right: 8px;
|
|
width: 16px;
|
|
height: 16px;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
/* Loading state styling */
|
|
.loading {
|
|
color: #888;
|
|
font-style: italic;
|
|
}
|
|
|
|
/* Error state styling */
|
|
.error {
|
|
color: #dc3545;
|
|
font-size: 12px;
|
|
}
|
|
|
|
/* Tooltip styling */
|
|
[data-toggle="tooltip"] {
|
|
position: relative;
|
|
}
|
|
|
|
.tooltip {
|
|
background: rgba(0,0,0,0.8);
|
|
color: white;
|
|
padding: 4px 8px;
|
|
border-radius: 4px;
|
|
font-size: 12px;
|
|
position: absolute;
|
|
z-index: 1000;
|
|
display: none;
|
|
}
|
|
|
|
[data-toggle="tooltip"]:hover .tooltip {
|
|
display: block;
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
{% load static %}
|
|
{% csrf_token %}
|
|
|
|
<div class="container" ng-controller="listWordPressSites">
|
|
<div class="alert alert-info" ng-if="debug">
|
|
<h4>Debug Information</h4>
|
|
<p>Total WordPress Sites: {$ totalSites $}</p>
|
|
<p>User ID: {$ userId $}</p>
|
|
<p>Is Admin: {$ isAdmin $}</p>
|
|
<p>WP Sites Count: {$ wpSitesCount $}</p>
|
|
</div>
|
|
|
|
<div class="alert alert-info" ng-if="!wpSites || wpSites.length === 0">
|
|
No WordPress sites found. <a href="{% url 'createWordpress' %}" class="alert-link">Install WordPress</a> to get started.
|
|
</div>
|
|
|
|
<div ng-if="wpSites && wpSites.length > 0">
|
|
<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" ng-model="searchTerm" placeholder="Search WordPress installations...">
|
|
<a href="{% url 'createWordpress' %}" class="btn btn-primary">Install WordPress</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="wp-site-card" ng-repeat="site in wpSites | filter:searchTerm" 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>
|
|
<span class="badge bg-primary" ng-if="site.production_status">PRODUCTION</span>
|
|
</div>
|
|
<div class="action-buttons">
|
|
<a href="{% url 'WPHome' %}?ID={$ site.id $}" class="btn-tool">
|
|
<i class="fas fa-cog"></i> Manage
|
|
</a>
|
|
<button type="button" class="btn-tool" ng-click="deleteWPSite(site)">
|
|
<i class="fas fa-trash"></i> Delete
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="wp-site-content">
|
|
<img ng-src="{$ site.screenshot || '{% static 'websiteFunctions/images/wp-default.png' %}' $}"
|
|
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" ng-class="{loading: !site.version}">
|
|
<i class="fas fa-circle-notch fa-spin" ng-if="!site.version"></i>
|
|
{$ site.version || 'Loading...' $}
|
|
</span>
|
|
</div>
|
|
<div class="status-item">
|
|
<span>Plugins</span>
|
|
<span class="plugin-status" ng-class="{loading: !site.activePlugins}">
|
|
<i class="fas fa-circle-notch fa-spin" ng-if="!site.activePlugins"></i>
|
|
{$ site.activePlugins || 'Loading...' $}
|
|
</span>
|
|
</div>
|
|
<div class="status-item">
|
|
<span>Themes</span>
|
|
<span class="theme-status" ng-class="{loading: !site.activeTheme}">
|
|
<i class="fas fa-circle-notch fa-spin" ng-if="!site.activeTheme"></i>
|
|
{$ site.activeTheme || 'Loading...' $}
|
|
</span>
|
|
</div>
|
|
<div class="status-item">
|
|
<span>PHP</span>
|
|
<span class="php-version" ng-class="{loading: !site.phpVersion}">
|
|
<i class="fas fa-circle-notch fa-spin" ng-if="!site.phpVersion"></i>
|
|
{$ site.phpVersion || 'Loading...' $}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tools-section">
|
|
<div class="tool-item" data-toggle="tooltip" title="Allow search engines to index this site">
|
|
<span>Search engine indexing</span>
|
|
<label class="toggle-switch">
|
|
<input type="checkbox" ng-model="site.searchIndex" ng-change="updateSetting(site, 'search-indexing')">
|
|
<span class="slider"></span>
|
|
</label>
|
|
</div>
|
|
<div class="tool-item" data-toggle="tooltip" title="Enable WordPress debug mode">
|
|
<span>Debugging</span>
|
|
<label class="toggle-switch">
|
|
<input type="checkbox" ng-model="site.debugging" ng-change="updateSetting(site, 'debugging')">
|
|
<span class="slider"></span>
|
|
</label>
|
|
</div>
|
|
<div class="tool-item" data-toggle="tooltip" title="Protect site with password">
|
|
<span>Password protection</span>
|
|
<label class="toggle-switch">
|
|
<input type="checkbox" ng-model="site.passwordProtection" ng-change="updateSetting(site, 'password-protection')">
|
|
<span class="slider"></span>
|
|
</label>
|
|
</div>
|
|
<div class="tool-item" data-toggle="tooltip" title="Enable maintenance mode">
|
|
<span>Maintenance mode</span>
|
|
<label class="toggle-switch">
|
|
<input type="checkbox" ng-model="site.maintenanceMode" ng-change="updateSetting(site, 'maintenance-mode')">
|
|
<span class="slider"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock content %}
|
|
|
|
|