Fix icon hover colors, text alignment, and UI improvements
This commit is contained in:
+40
-6
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user