improved websites list

This commit is contained in:
usmannasir 2025-05-22 14:53:38 +05:00
parent ee886c0c52
commit 45f959d2ec
2 changed files with 338 additions and 314 deletions

View File

@ -2371,6 +2371,14 @@ app.controller('listWebsites', function ($scope, $http, $window) {
$scope.currentPage = 1;
$scope.recordsToShow = 10;
$scope.expandedSites = {};
$scope.toggleSite = function(site) {
$scope.expandedSites[site.domain] = !$scope.expandedSites[site.domain];
};
$scope.isExpanded = function(domain) {
return !!$scope.expandedSites[domain];
};
// Initial fetch of websites
$scope.getFurtherWebsitesFromDB = function () {
$scope.loading = true; // Set loading to true when starting fetch
@ -2392,6 +2400,11 @@ app.controller('listWebsites', function ($scope, $http, $window) {
$scope.WebSitesList = JSON.parse(response.data.data);
$scope.pagination = response.data.pagination;
$("#listFail").hide();
// Expand the first website by default
if ($scope.WebSitesList.length > 0) {
$scope.expandedSites = {};
$scope.expandedSites[$scope.WebSitesList[0].domain] = true;
}
} else {
$("#listFail").fadeIn();
$scope.errorMessage = response.data.error_message;
@ -5510,6 +5523,14 @@ app.controller('listWebsites', function ($scope, $http, $window) {
$scope.currentPage = 1;
$scope.recordsToShow = 10;
$scope.expandedSites = {};
$scope.toggleSite = function(site) {
$scope.expandedSites[site.domain] = !$scope.expandedSites[site.domain];
};
$scope.isExpanded = function(domain) {
return !!$scope.expandedSites[domain];
};
// Initial fetch of websites
$scope.getFurtherWebsitesFromDB = function () {
$scope.loading = true; // Set loading to true when starting fetch
@ -5531,6 +5552,11 @@ app.controller('listWebsites', function ($scope, $http, $window) {
$scope.WebSitesList = JSON.parse(response.data.data);
$scope.pagination = response.data.pagination;
$("#listFail").hide();
// Expand the first website by default
if ($scope.WebSitesList.length > 0) {
$scope.expandedSites = {};
$scope.expandedSites[$scope.WebSitesList[0].domain] = true;
}
} else {
$("#listFail").fadeIn();
$scope.errorMessage = response.data.error_message;
@ -8996,6 +9022,14 @@ app.controller('listWebsites', function ($scope, $http, $window) {
$scope.currentPage = 1;
$scope.recordsToShow = 10;
$scope.expandedSites = {};
$scope.toggleSite = function(site) {
$scope.expandedSites[site.domain] = !$scope.expandedSites[site.domain];
};
$scope.isExpanded = function(domain) {
return !!$scope.expandedSites[domain];
};
// Initial fetch of websites
$scope.getFurtherWebsitesFromDB = function () {
$scope.loading = true; // Set loading to true when starting fetch
@ -9017,6 +9051,11 @@ app.controller('listWebsites', function ($scope, $http, $window) {
$scope.WebSitesList = JSON.parse(response.data.data);
$scope.pagination = response.data.pagination;
$("#listFail").hide();
// Expand the first website by default
if ($scope.WebSitesList.length > 0) {
$scope.expandedSites = {};
$scope.expandedSites[$scope.WebSitesList[0].domain] = true;
}
} else {
$("#listFail").fadeIn();
$scope.errorMessage = response.data.error_message;

View File

@ -81,192 +81,178 @@
</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 ng-repeat="web in WebSitesList track by $index" class="wp-site-item">
<div class="row wp-site-header" ng-click="toggleSite(web)" style="cursor:pointer;align-items:center;">
<div class="col-sm-1">
<img ng-src="https://api.microlink.io/?url={$ web.domain $}&screenshot=true&meta=false&embed=screenshot.url"
onerror="this.onerror=null; this.src='/static/images/icons/default-site.png';"
class="img-responsive" style="max-width: 60px; min-height:40px; background:#f5f5f5;">
</div>
<div class="col-sm-9">
<h4 style="margin:0;display:inline-block;">
<i class="fas" ng-class="{'fa-chevron-down': isExpanded(web.domain), 'fa-chevron-right': !isExpanded(web.domain)}" style="margin-right:10px;"></i>
{$ web.domain $}
</h4>
</div>
<div class="col-sm-2 text-right">
<a href="/websites/{$ web.domain $}" target="_self" title="Manage Website" class="btn btn-primary btn-sm">
<i class="fa fa-external-link"></i> {% trans "Manage" %}
</a>
</div>
</div>
<div class="wp-site-content" ng-if="isExpanded(web.domain)">
<div class="row">
<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-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 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-12">
<div class="col-md-3 content-box-header">
<i class="fa-solid fa-hard-drive 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="fa-solid 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="fa-solid 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)" class="wp-sites-link">
<i class="fa-brands fa-wordpress btn-icon text-muted" data-toggle="tooltip"
data-placement="right" title="Show WordPress Sites"></i>
<span ng-if="!web.loadingWPSites" class="wp-sites-count">
{$ (web.wp_sites && web.wp_sites.length) || 0 $} WordPress Sites
</span>
<span ng-if="web.loadingWPSites" class="loading-indicator">
Loading <i class="fa fa-spinner fa-spin"></i>
</span>
</a>
</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>
<!-- WordPress Sites Section -->
<div class="col-md-12" ng-if="web.showWPSites && web.wp_sites && web.wp_sites.length > 0" style="padding: 15px 30px;">
<div ng-repeat="wp in web.wp_sites" class="wp-site-item">
<div class="row">
<div class="col-sm-12">
<div class="wp-site-header">
<div class="row">
<div class="col-sm-8">
<h4>
<i class="fa-brands fa-wordpress" style="color: #00749C; margin-right: 8px;"></i>
{$ wp.title $}
<span ng-if="wp.loading || wp.loadingPlugins || wp.loadingTheme" class="loading-indicator">
<i class="fa fa-spinner fa-spin" style="color: #00749C; font-size: 14px;"></i>
</span>
</h4>
</div>
<div class="col-sm-4 text-right">
<button class="btn btn-outline-primary btn-sm wp-action-btn" ng-click="manageWP(wp.id)">
<i class="fa-solid fa-cog"></i> Manage
</button>
<button class="btn btn-outline-danger btn-sm wp-action-btn" ng-click="deleteWPSite(wp)">
<i class="fa-solid fa-trash"></i> Delete
</button>
</div>
<div class="col-md-3 content-box-header">
<span ng-bind="web.phpVersion"></span>
</div>
</div>
<div class="row">
<div class="col-md-3 content-box-header">
<i class="fa-solid fa-hard-drive 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="fa-solid 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="fa-solid 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="$event.stopPropagation(); showWPSites(web.domain)" class="wp-sites-link">
<i class="fa-brands fa-wordpress btn-icon text-muted" data-toggle="tooltip" data-placement="right" title="Show WordPress Sites"></i>
<span ng-if="!web.loadingWPSites" class="wp-sites-count">
{$ (web.wp_sites && web.wp_sites.length) || 0 $} WordPress Sites
</span>
<span ng-if="web.loadingWPSites" class="loading-indicator">
Loading <i class="fa fa-spinner fa-spin"></i>
</span>
</a>
</div>
</div>
<!-- WordPress Sites Section -->
<div class="col-md-12" ng-if="web.showWPSites && web.wp_sites && web.wp_sites.length > 0" style="padding: 15px 30px;">
<div ng-repeat="wp in web.wp_sites" class="wp-site-item">
<div class="row">
<div class="col-sm-12">
<div class="wp-site-header">
<div class="row">
<div class="col-sm-8">
<h4>
<i class="fa-brands fa-wordpress" style="color: #00749C; margin-right: 8px;"></i>
{$ wp.title $}
<span ng-if="wp.loading || wp.loadingPlugins || wp.loadingTheme" class="loading-indicator">
<i class="fa fa-spinner fa-spin" style="color: #00749C; font-size: 14px;"></i>
</span>
</h4>
</div>
<div class="col-sm-4 text-right">
<button class="btn btn-outline-primary btn-sm wp-action-btn" ng-click="manageWP(wp.id)">
<i class="fa-solid fa-cog"></i> Manage
</button>
<button class="btn btn-outline-danger btn-sm wp-action-btn" ng-click="deleteWPSite(wp)">
<i class="fa-solid fa-trash"></i> Delete
</button>
</div>
</div>
<div class="wp-site-content">
<div class="row">
<div class="col-sm-3">
<img ng-src="{$ wp.screenshot $}"
alt="{$ wp.title $}"
class="img-responsive"
style="max-width: 100%; margin-bottom: 10px; min-height: 150px; background: #f5f5f5;"
onerror="this.onerror=null; this.src='https://s.wordpress.org/style/images/about/WordPress-logotype-standard.png';">
<div class="text-center wp-action-buttons">
<a href="javascript:void(0);" ng-click="visitSite(wp)" class="btn btn-outline-secondary btn-sm wp-action-btn">
<i class="fa-solid fa-external-link"></i> Visit Site
</a>
<a href="{% url 'AutoLogin' %}?id={$ wp.id $}" target="_blank" class="btn btn-outline-primary btn-sm wp-action-btn">
<i class="fa-brands fa-wordpress"></i> WP Login
</a>
</div>
<div class="wp-site-content">
<div class="row">
<div class="col-sm-3">
<img ng-src="{$ wp.screenshot $}"
alt="{$ wp.title $}"
class="img-responsive"
style="max-width: 100%; margin-bottom: 10px; min-height: 150px; background: #f5f5f5;"
onerror="this.onerror=null; this.src='https://s.wordpress.org/style/images/about/WordPress-logotype-standard.png';">
<div class="text-center wp-action-buttons">
<a href="javascript:void(0);" ng-click="visitSite(wp)" class="btn btn-outline-secondary btn-sm wp-action-btn">
<i class="fa-solid fa-external-link"></i> Visit Site
</a>
<a href="{% url 'AutoLogin' %}?id={$ wp.id $}" target="_blank" class="btn btn-outline-primary btn-sm wp-action-btn">
<i class="fa-brands fa-wordpress"></i> WP Login
</a>
</div>
</div>
<div class="col-sm-9">
<div class="row">
<div class="col-sm-3">
<div class="info-box">
<label>WordPress</label>
<span>{$ wp.version || 'Loading...' $}</span>
<i ng-if="wp.loading" class="fa fa-spinner fa-spin" style="margin-left: 5px; font-size: 12px;"></i>
</div>
</div>
<div class="col-sm-3">
<div class="info-box">
<label>PHP Version</label>
<span>{$ wp.phpVersion || 'Loading...' $}</span>
<i ng-if="wp.loading" class="fa fa-spinner fa-spin" style="margin-left: 5px; font-size: 12px;"></i>
</div>
</div>
<div class="col-sm-3">
<div class="info-box">
<label>Theme</label>
<span>{$ wp.theme || 'Loading...' $}</span>
<i ng-if="wp.loadingTheme" class="fa fa-spinner fa-spin" style="margin-left: 5px; font-size: 12px;"></i>
</div>
</div>
<div class="col-sm-3">
<div class="info-box">
<label>Plugins</label>
<span>{$ wp.activePlugins || '0' $} active</span>
<i ng-if="wp.loadingPlugins" class="fa fa-spinner fa-spin" style="margin-left: 5px; font-size: 12px;"></i>
</div>
</div>
</div>
<div class="col-sm-9">
<div class="row">
<div class="col-sm-3">
<div class="info-box">
<label>WordPress</label>
<span>{$ wp.version || 'Loading...' $}</span>
<i ng-if="wp.loading" class="fa fa-spinner fa-spin" style="margin-left: 5px; font-size: 12px;"></i>
</div>
<div class="row mt-3">
<div class="col-sm-6">
<div class="checkbox">
<label>
<input type="checkbox"
ng-click="updateSetting(wp, 'search-indexing')"
ng-checked="wp.searchIndex == 1">
Search engine indexing
</label>
</div>
<div class="col-sm-3">
<div class="info-box">
<label>PHP Version</label>
<span>{$ wp.phpVersion || 'Loading...' $}</span>
<i ng-if="wp.loading" class="fa fa-spinner fa-spin" style="margin-left: 5px; font-size: 12px;"></i>
</div>
</div>
<div class="col-sm-3">
<div class="info-box">
<label>Theme</label>
<span>{$ wp.theme || 'Loading...' $}</span>
<i ng-if="wp.loadingTheme" class="fa fa-spinner fa-spin" style="margin-left: 5px; font-size: 12px;"></i>
</div>
</div>
<div class="col-sm-3">
<div class="info-box">
<label>Plugins</label>
<span>{$ wp.activePlugins || '0' $} active</span>
<i ng-if="wp.loadingPlugins" class="fa fa-spinner fa-spin" style="margin-left: 5px; font-size: 12px;"></i>
</div>
<div class="checkbox">
<label>
<input type="checkbox"
ng-click="updateSetting(wp, 'debugging')"
ng-checked="wp.debugging == 1">
Debugging
</label>
</div>
</div>
<div class="row mt-3">
<div class="col-sm-6">
<div class="checkbox">
<label>
<input type="checkbox"
ng-click="updateSetting(wp, 'search-indexing')"
ng-checked="wp.searchIndex == 1">
Search engine indexing
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox"
ng-click="updateSetting(wp, 'debugging')"
ng-checked="wp.debugging == 1">
Debugging
</label>
</div>
<div class="col-sm-6">
<div class="checkbox">
<label>
<input type="checkbox"
ng-model="wp.passwordProtection"
ng-init="wp.passwordProtection = wp.passwordProtection || false"
ng-change="togglePasswordProtection(wp)">
Password protection
</label>
</div>
<div class="col-sm-6">
<div class="checkbox">
<label>
<input type="checkbox"
ng-model="wp.passwordProtection"
ng-init="wp.passwordProtection = wp.passwordProtection || false"
ng-change="togglePasswordProtection(wp)">
Password protection
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox"
ng-click="updateSetting(wp, 'maintenance-mode')"
ng-checked="wp.maintenanceMode == 1">
Maintenance mode
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox"
ng-click="updateSetting(wp, 'maintenance-mode')"
ng-checked="wp.maintenanceMode == 1">
Maintenance mode
</label>
</div>
</div>
</div>
@ -276,145 +262,9 @@
</div>
</div>
</div>
<style>
.wp-site-item {
border: 1px solid #e0e0e0;
margin-bottom: 20px;
border-radius: 8px;
background: white;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.wp-site-header {
padding: 15px 20px;
border-bottom: 1px solid #e0e0e0;
background: #f8f9fa;
border-radius: 8px 8px 0 0;
}
.wp-site-header h4 {
margin: 0;
font-size: 18px;
line-height: 34px;
color: #2c3338;
font-weight: 500;
}
.wp-site-content {
padding: 20px;
}
.info-box {
margin-bottom: 15px;
background: #f8f9fa;
padding: 10px;
border-radius: 6px;
}
.info-box label {
display: block;
font-size: 12px;
color: #646970;
margin-bottom: 5px;
font-weight: 500;
}
.info-box span {
font-size: 14px;
font-weight: 600;
color: #2c3338;
}
.checkbox {
margin-bottom: 10px;
}
.mt-3 {
margin-top: 1rem;
}
/* Updated button styles */
.wp-action-btn {
margin: 0 4px;
padding: 6px 12px;
font-size: 13px;
font-weight: 500;
transition: all 0.2s ease;
border-width: 1.5px;
line-height: 1.5;
display: inline-flex;
align-items: center;
justify-content: center;
vertical-align: middle;
height: 32px;
}
.wp-action-btn i {
margin-right: 6px;
font-size: 14px;
display: inline-flex;
align-items: center;
}
.wp-action-buttons {
margin-top: 12px;
display: flex;
gap: 8px;
justify-content: center;
}
.wp-action-buttons .wp-action-btn {
min-width: 110px;
flex: 0 1 auto;
}
.btn-outline-primary {
color: #0073aa;
border-color: #0073aa;
}
.btn-outline-primary:hover {
background-color: #0073aa;
color: white;
}
.btn-outline-secondary {
color: #50575e;
border-color: #50575e;
}
.btn-outline-secondary:hover {
background-color: #50575e;
color: white;
}
.btn-outline-danger {
color: #dc3545;
border-color: #dc3545;
}
.btn-outline-danger:hover {
background-color: #dc3545;
color: white;
}
.wp-sites-link {
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 8px;
color: inherit;
text-decoration: none;
}
.wp-sites-link:hover {
color: inherit;
text-decoration: none;
}
.wp-sites-link i.btn-icon {
margin-right: 4px;
}
.wp-sites-count {
text-transform: none;
}
.loading-indicator {
display: inline-flex;
align-items: center;
gap: 8px;
color: #00749C;
font-size: 14px;
padding: 0 8px;
}
.loading-indicator i {
font-size: 14px;
margin-left: 4px;
}
</style>
<div id="listFail" class="alert alert-danger">
<p>{% trans "Cannot list websites. Error message:" %} {$ errorMessage $}</p>
</div>
</div>
<div id="listFail" class="alert alert-danger">
<p>{% trans "Cannot list websites. Error message:" %} {$ errorMessage $}</p>
</div>
</div>
</div>
@ -437,4 +287,139 @@
</div>
</div>
<style>
.wp-site-item {
border: 1px solid #e0e0e0;
margin-bottom: 20px;
border-radius: 8px;
background: white;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.wp-site-header {
padding: 15px 20px;
border-bottom: 1px solid #e0e0e0;
background: #f8f9fa;
border-radius: 8px 8px 0 0;
cursor:pointer;
}
.wp-site-header h4 {
margin: 0;
font-size: 18px;
line-height: 34px;
color: #2c3338;
font-weight: 500;
}
.wp-site-content {
padding: 20px;
}
.info-box {
margin-bottom: 15px;
background: #f8f9fa;
padding: 10px;
border-radius: 6px;
}
.info-box label {
display: block;
font-size: 12px;
color: #646970;
margin-bottom: 5px;
font-weight: 500;
}
.info-box span {
font-size: 14px;
font-weight: 600;
color: #2c3338;
}
.checkbox {
margin-bottom: 10px;
}
.mt-3 {
margin-top: 1rem;
}
.wp-action-btn {
margin: 0 4px;
padding: 6px 12px;
font-size: 13px;
font-weight: 500;
transition: all 0.2s ease;
border-width: 1.5px;
line-height: 1.5;
display: inline-flex;
align-items: center;
justify-content: center;
vertical-align: middle;
height: 32px;
}
.wp-action-btn i {
margin-right: 6px;
font-size: 14px;
display: inline-flex;
align-items: center;
}
.wp-action-buttons {
margin-top: 12px;
display: flex;
gap: 8px;
justify-content: center;
}
.wp-action-buttons .wp-action-btn {
min-width: 110px;
flex: 0 1 auto;
}
.btn-outline-primary {
color: #0073aa;
border-color: #0073aa;
}
.btn-outline-primary:hover {
background-color: #0073aa;
color: white;
}
.btn-outline-secondary {
color: #50575e;
border-color: #50575e;
}
.btn-outline-secondary:hover {
background-color: #50575e;
color: white;
}
.btn-outline-danger {
color: #dc3545;
border-color: #dc3545;
}
.btn-outline-danger:hover {
background-color: #dc3545;
color: white;
}
.wp-sites-link {
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 8px;
color: inherit;
text-decoration: none;
}
.wp-sites-link:hover {
color: inherit;
text-decoration: none;
}
.wp-sites-link i.btn-icon {
margin-right: 4px;
}
.wp-sites-count {
text-transform: none;
}
.loading-indicator {
display: inline-flex;
align-items: center;
gap: 8px;
color: #00749C;
font-size: 14px;
padding: 0 8px;
}
.loading-indicator i {
font-size: 14px;
margin-left: 4px;
}
</style>
{% endblock %}