mirror of
https://github.com/usmannasir/cyberpanel.git
synced 2025-11-08 14:26:16 +01:00
improved wp listing page
This commit is contained in:
usmannasir
@@ -1,6 +1,6 @@
|
|||||||
{% extends "baseTemplate/index.html" %}
|
{% extends "baseTemplate/index.html" %}
|
||||||
{% load i18n %}
|
{% load i18n %}
|
||||||
{% block title %}{% trans "WordPress Sites - CyberPanel" %}{% endblock %}
|
{% block title %}{% trans "WordPress Toolkit - CyberPanel" %}{% endblock %}
|
||||||
{% block content %}
|
{% block content %}
|
||||||
|
|
||||||
{% load static %}
|
{% load static %}
|
||||||
@@ -81,151 +81,290 @@
|
|||||||
border-radius: 0px 20px 20px 0px;
|
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>
|
</style>
|
||||||
|
|
||||||
|
|
||||||
<div ng-controller="listWebsites" class="container">
|
<div ng-controller="listWebsites" class="container">
|
||||||
|
|
||||||
<div id="page-title">
|
<div class="top-actions">
|
||||||
<h2 id="domainNamePage">{% trans "List WordPress Websites" %}
|
<h2>WordPress Toolkit {% if help_url %}<a href="{{ help_url }}" class="btn-tool">Help</a>{% endif %}</h2>
|
||||||
<a class="pull-right btn btn-primary"
|
<div>
|
||||||
href="{% url "createWordpress" %}">{% trans "Create WordPress Website" %}</a>
|
<input type="text" class="search-box" placeholder="Search WordPress installations...">
|
||||||
<a style="margin-right: 1%" class="pull-right btn btn-primary"
|
<a href="{% url 'createWordpress' %}" class="btn btn-primary">Install WordPress</a>
|
||||||
data-toggle="modal"
|
</div>
|
||||||
data-target="#scaningmodal"
|
|
||||||
href="#">{% trans "Scan WordPress " %}</a>
|
|
||||||
</h2>
|
|
||||||
<img ng-hide="cyberPanelLoading" id="cyberPanelLoading" src="{% static 'images/loading.gif' %}">
|
|
||||||
<p>{% trans "On this page you can launch, list, modify and delete Wordpress Sites from your server." %}</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{% for site in wpsite %}
|
||||||
<table class="table-spacing" style="width: 100%">
|
<div class="wp-site-card" data-site-id="{{ site.id }}">
|
||||||
<thead style="color: white; background-color: #0a6ebd">
|
<div class="wp-site-header">
|
||||||
<tr>
|
<div>
|
||||||
<th style="padding: 18px; color: white; width: 161px; font-size: 12px;">WordPress Site Title</th>
|
<input type="checkbox" class="site-selector">
|
||||||
<th style="padding: 18px; color: white; width: 161px; font-size: 12px;">Login</th>
|
<a href="{{ site.url }}" target="_blank">{{ site.url }}</a>
|
||||||
<th style="padding: 18px; color: white; width: 161px; font-size: 12px;">Domain</th>
|
{% if site.production_status %}<span class="badge bg-primary">PRODUCTION</span>{% endif %}
|
||||||
<th style="padding: 18px; color: white; width: 161px; font-size: 12px;">Action</th>
|
</div>
|
||||||
</tr>
|
<div class="action-buttons">
|
||||||
</thead>
|
<a href="{% url 'WPHome' %}?ID={{ site.id }}" class="btn-tool">
|
||||||
|
<i class="fas fa-cog"></i> Manage
|
||||||
<tbody style="background-color: #d9eefa">
|
|
||||||
{% for sub in wpsite %}
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td style="padding: 13px;">
|
|
||||||
<a href="{% url 'WPHome' %}?ID={{ sub.id }}">
|
|
||||||
<p style="font-weight: bold; text-transform: uppercase; ">{{ sub.title }}</p>
|
|
||||||
</a>
|
</a>
|
||||||
|
<button onclick="DeleteWPNow('{% url 'ListWPSites' %}?DeleteID={{ site.id }}')" class="btn-tool">
|
||||||
</td>
|
<i class="fas fa-trash"></i> Delete
|
||||||
<td style="padding: 13px;">
|
|
||||||
<a title="Auto Login" style="margin-right: 2%; margin-left: 10px;"
|
|
||||||
target="_blank"
|
|
||||||
href="{% url 'AutoLogin' %}?id={{ sub.id }}">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1.5em"
|
|
||||||
style="margin: 3px;" height="1.5em" preserveAspectRatio="xMidYMid meet"
|
|
||||||
viewBox="0 0 16 16">
|
|
||||||
<g fill="#006600">
|
|
||||||
<path d="M12.633 7.653c0-.848-.305-1.435-.566-1.892l-.08-.13c-.317-.51-.594-.958-.594-1.48c0-.63.478-1.218 1.152-1.218c.02 0 .039.002.058.003l.031.003A6.838 6.838 0 0 0 8 1.137A6.855 6.855 0 0 0 2.266 4.23c.16.005.313.009.442.009c.717 0 1.828-.087 1.828-.087c.37-.022.414.521.044.565c0 0-.371.044-.785.065l2.5 7.434l1.5-4.506l-1.07-2.929c-.369-.022-.719-.065-.719-.065c-.37-.022-.326-.588.043-.566c0 0 1.134.087 1.808.087c.718 0 1.83-.087 1.83-.087c.37-.022.413.522.043.566c0 0-.372.043-.785.065l2.48 7.377l.684-2.287l.054-.173c.27-.86.469-1.495.469-2.046zM1.137 8a6.864 6.864 0 0 0 3.868 6.176L1.73 5.206A6.837 6.837 0 0 0 1.137 8z"></path>
|
|
||||||
<path d="M6.061 14.583L8.121 8.6l2.109 5.78c.014.033.03.064.049.094a6.854 6.854 0 0 1-4.218.109zm7.96-9.876c.03.219.047.453.047.706c0 .696-.13 1.479-.522 2.458l-2.096 6.06a6.86 6.86 0 0 0 2.572-9.224z"></path>
|
|
||||||
<path fill-rule="evenodd"
|
|
||||||
d="M0 8c0-4.411 3.589-8 8-8c4.41 0 8 3.589 8 8s-3.59 8-8 8c-4.411 0-8-3.589-8-8zm.367 0c0 4.209 3.424 7.633 7.633 7.633c4.208 0 7.632-3.424 7.632-7.633C15.632 3.79 12.208.367 8 .367C3.79.367.367 3.79.367 8z"></path>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
</a>
|
|
||||||
</td>
|
|
||||||
<td style="padding: 13px;">
|
|
||||||
<a target="_blank" style="color: #6aa7ff"
|
|
||||||
href="http://{{ sub.url }}">Visit
|
|
||||||
<i class="glyph-icon icon-external-link-square" title="{{ sub.url }}"></i></a>
|
|
||||||
</td>
|
|
||||||
|
|
||||||
<td style="padding: 13px;">
|
|
||||||
|
|
||||||
<button
|
|
||||||
data-toggle="modal"
|
|
||||||
data-target="#DeleteMember" aria-label=""
|
|
||||||
onclick="DeleteWPNow('{% url 'ListWPSites' %}?DeleteID={{ sub.id }}')"
|
|
||||||
type="button" class="btn btn-border btn-alt border-red btn-link font-red">
|
|
||||||
Delete
|
|
||||||
</button>
|
|
||||||
<div id="DeleteMember" class="modal fade" role="dialog">
|
|
||||||
<div class="modal-dialog">
|
|
||||||
<!-- Modal content-->
|
|
||||||
<div class="modal-content">
|
|
||||||
<div class="modal-header">
|
|
||||||
<button type="button" class="close" data-dismiss="modal">×
|
|
||||||
</button>
|
|
||||||
<h4 class="modal-title">Delete WordPress Site
|
|
||||||
<img ng-hide="$parent.cyberPanelLoading"
|
|
||||||
src="/static/images/loading.gif"
|
|
||||||
style="display: none;">
|
|
||||||
</h4>
|
|
||||||
</div>
|
|
||||||
<div class="modal-body">
|
|
||||||
<form name="DeleteDocumentRootForm" action="/"
|
|
||||||
class="form-horizontal">
|
|
||||||
|
|
||||||
<span>Do you want to delete the site?</span>
|
|
||||||
</div>
|
|
||||||
<div class="modal-footer">
|
|
||||||
<button type="button" class="btn btn-primary"
|
|
||||||
onclick="FinalDeleteWPNow()">Yes
|
|
||||||
</button>
|
|
||||||
<button type="button" ng-disabled="savingSettings"
|
|
||||||
class="btn btn-default" data-dismiss="modal">
|
|
||||||
Cancel
|
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</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>
|
</div>
|
||||||
|
|
||||||
|
<div class="tools-section">
|
||||||
</td>
|
<div class="tool-item">
|
||||||
|
<span>Search engine indexing</span>
|
||||||
|
<label class="toggle-switch">
|
||||||
</tr>
|
<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 %}
|
{% endfor %}
|
||||||
|
|
||||||
</tbody>
|
</div>
|
||||||
</table>
|
|
||||||
|
|
||||||
|
<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;
|
||||||
|
|
||||||
<!------------Start scaning wordpress Modal --->
|
// Update version
|
||||||
<div id="scaningmodal" class="modal fade" role="dialog">
|
document.querySelector(`.wp-version[data-site-id="${siteId}"]`).textContent = site.version;
|
||||||
<div class="modal-dialog">
|
|
||||||
<!-- Modal content-->
|
|
||||||
<div class="modal-content">
|
|
||||||
<div class="modal-header">
|
|
||||||
<button type="button" class="close" data-dismiss="modal">×
|
|
||||||
</button>
|
|
||||||
<h4 class="modal-title">Scan WordPress Sites
|
|
||||||
<img ng-hide="$parent.cyberPanelLoading"
|
|
||||||
src="/static/images/loading.gif"
|
|
||||||
style="display: none;">
|
|
||||||
</h4>
|
|
||||||
</div>
|
|
||||||
<div class="modal-body">
|
|
||||||
<span>Do you want to Scan Worpress site?</span>
|
|
||||||
</div>
|
|
||||||
<div class="modal-footer">
|
|
||||||
<button type="button" class="btn btn-primary"
|
|
||||||
ng-click="ScanWordpressSite()">Yes
|
|
||||||
</button>
|
|
||||||
<button type="button" ng-disabled="savingSettings"
|
|
||||||
class="btn btn-default" data-dismiss="modal">
|
|
||||||
Cancel
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!------------End scaning wordpress Modal --->
|
|
||||||
|
|
||||||
|
// 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;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
</div>
|
// 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 %}
|
{% endblock %}
|
||||||
|
|||||||
Reference in New Issue
Block a user