Fix icon hover colors, text alignment, and UI improvements

This commit is contained in:
Krikorios
2026-02-25 23:25:59 +02:00
parent 00fda3e045
commit fcc4352afa
46 changed files with 4011 additions and 600 deletions
+40 -6
View File
@@ -112,6 +112,12 @@
<span>Bookings</span>
</a>
</li>
<li class="nav-item">
<a href="/admin/availability.html" class="nav-link">
<i class="fas fa-clock"></i>
<span>Availability</span>
</a>
</li>
</ul>
</div>
@@ -201,7 +207,7 @@
<div class="modal-content modal-lg">
<div class="modal-header">
<h2>Edit Service</h2>
<button class="modal-close" onclick="closeModal()">
<button class="modal-close" id="service-modal-close-btn">
<i class="fas fa-times"></i>
</button>
</div>
@@ -251,8 +257,8 @@ Network Management"></textarea>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-outline" onclick="closeModal()">Cancel</button>
<button class="btn btn-primary" onclick="saveService()">Save Changes</button>
<button class="btn btn-outline" id="service-modal-cancel-btn">Cancel</button>
<button class="btn btn-primary" id="service-modal-save-btn">Save Changes</button>
</div>
</div>
</div>
@@ -264,6 +270,34 @@ Network Management"></textarea>
document.addEventListener('DOMContentLoaded', function() {
loadServices();
document.getElementById('add-service-btn').addEventListener('click', openAddServiceModal);
document.getElementById('service-modal-close-btn')?.addEventListener('click', closeModal);
document.getElementById('service-modal-cancel-btn')?.addEventListener('click', closeModal);
document.getElementById('service-modal-save-btn')?.addEventListener('click', saveService);
document.querySelector('#service-modal .modal-overlay')?.addEventListener('click', closeModal);
const servicesGrid = document.getElementById('services-admin-grid');
servicesGrid?.addEventListener('click', function(e) {
const editBtn = e.target.closest('[data-action="edit-service"]');
if (editBtn) {
const id = editBtn.dataset.id;
if (id) editService(id);
return;
}
const deleteBtn = e.target.closest('[data-action="delete-service"]');
if (deleteBtn) {
const id = deleteBtn.dataset.id;
if (id) deleteService(id);
}
});
servicesGrid?.addEventListener('change', function(e) {
const toggle = e.target.closest('[data-action="toggle-service"]');
if (!toggle) return;
const id = toggle.dataset.id;
if (id) toggleService(id, toggle.checked);
});
});
async function loadServices() {
@@ -297,14 +331,14 @@ Network Management"></textarea>
<i class="fas ${service.icon || 'fa-cogs'}"></i>
</div>
<div class="service-actions">
<button class="btn btn-sm btn-icon" onclick="editService('${service.id}')">
<button class="btn btn-sm btn-icon" data-action="edit-service" data-id="${MSPE.escapeHtml(service.id || '')}">
<i class="fas fa-edit"></i>
</button>
<label class="toggle-switch">
<input type="checkbox" ${service.active ? 'checked' : ''} onchange="toggleService('${service.id}', this.checked)">
<input type="checkbox" ${service.active ? 'checked' : ''} data-action="toggle-service" data-id="${MSPE.escapeHtml(service.id || '')}">
<span class="toggle-slider"></span>
</label>
<button class="btn btn-sm btn-icon text-danger" onclick="deleteService('${service.id}')">
<button class="btn btn-sm btn-icon text-danger" data-action="delete-service" data-id="${MSPE.escapeHtml(service.id || '')}">
<i class="fas fa-trash"></i>
</button>
</div>