georges/MSPE
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix icon hover colors, text alignment, and UI improvements

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
admin/media.html
+82 -40
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>
@@ -154,7 +160,7 @@
</div>
<div class="header-right">
<button class="btn btn-primary" onclick="openUploadModal()">
<button class="btn btn-primary" id="open-upload-btn">
<i class="fas fa-upload"></i> Upload Files
</button>
@@ -234,7 +240,7 @@
</select>
</div>
<div class="toolbar-right">
<button class="btn btn-outline btn-sm" onclick="createFolder()">
<button class="btn btn-outline btn-sm" id="create-folder-btn">
<i class="fas fa-folder-plus"></i> New Folder
</button>
<div class="view-toggle">
@@ -279,13 +285,13 @@
<!-- Bulk Actions -->
<div class="bulk-actions" id="bulk-actions" style="display: none;">
<span class="selected-count">0 selected</span>
<button class="btn btn-outline btn-sm" onclick="moveSelected()">
<button class="btn btn-outline btn-sm" id="move-selected-btn">
<i class="fas fa-folder"></i> Move
</button>
<button class="btn btn-outline btn-sm" onclick="downloadSelected()">
<button class="btn btn-outline btn-sm" id="download-selected-btn">
<i class="fas fa-download"></i> Download
</button>
<button class="btn btn-danger btn-sm" onclick="deleteSelected()">
<button class="btn btn-danger btn-sm" id="delete-selected-btn">
<i class="fas fa-trash"></i> Delete
</button>
</div>
@@ -299,7 +305,7 @@
<div class="modal-container">
<div class="modal-header">
<h2>Upload Files</h2>
<button class="modal-close" onclick="closeUploadModal()">&times;</button>
<button class="modal-close" id="upload-modal-close">&times;</button>
</div>
<div class="modal-body">
<div class="upload-dropzone" id="dropzone">
@@ -327,7 +333,7 @@
</div>
</div>
<div class="modal-footer">
<button class="btn btn-outline" onclick="closeUploadModal()">Cancel</button>
<button class="btn btn-outline" id="upload-cancel-btn">Cancel</button>
<button class="btn btn-primary" id="start-upload" disabled>
<i class="fas fa-upload"></i> Start Upload
</button>
@@ -341,7 +347,7 @@
<div class="modal-container modal-lg">
<div class="modal-header">
<h2 id="view-title">File Details</h2>
<button class="modal-close" onclick="closeViewModal()">&times;</button>
<button class="modal-close" id="view-modal-close">&times;</button>
</div>
<div class="modal-body">
<div class="media-view-content">
@@ -373,7 +379,7 @@
<label>URL</label>
<div class="url-copy">
<input type="text" id="detail-url" readonly>
<button class="btn btn-sm btn-outline" onclick="copyDetailUrl()">
<button class="btn btn-sm btn-outline" id="copy-detail-url-btn">
<i class="fas fa-copy"></i>
</button>
</div>
@@ -386,13 +392,13 @@
</div>
</div>
<div class="modal-footer">
<button class="btn btn-danger" onclick="deleteFromView()">
<button class="btn btn-danger" id="delete-from-view-btn">
<i class="fas fa-trash"></i> Delete
</button>
<button class="btn btn-outline" onclick="downloadFile()">
<button class="btn btn-outline" id="download-view-file-btn">
<i class="fas fa-download"></i> Download
</button>
<button class="btn btn-primary" onclick="saveDetails()">
<button class="btn btn-primary" id="save-details-btn">
<i class="fas fa-save"></i> Save
</button>
</div>
@@ -404,17 +410,72 @@
let allMedia = [];
document.addEventListener('DOMContentLoaded', function() {
setupEventListeners();
loadMedia();
// Search & Filter
});
function setupEventListeners() {
document.getElementById('media-search').addEventListener('input', MSPE.debounce(filterMedia, 300));
document.getElementById('type-filter').addEventListener('change', filterMedia);
document.getElementById('folder-filter').addEventListener('change', filterMedia);
// File Input for Upload
document.getElementById('file-input').addEventListener('change', handleFileSelect);
document.getElementById('start-upload').addEventListener('click', uploadFiles);
});
document.getElementById('open-upload-btn')?.addEventListener('click', openUploadModal);
document.getElementById('create-folder-btn')?.addEventListener('click', createFolder);
document.getElementById('move-selected-btn')?.addEventListener('click', moveSelected);
document.getElementById('download-selected-btn')?.addEventListener('click', downloadSelected);
document.getElementById('delete-selected-btn')?.addEventListener('click', deleteSelected);
document.getElementById('upload-modal-close')?.addEventListener('click', closeUploadModal);
document.getElementById('upload-cancel-btn')?.addEventListener('click', closeUploadModal);
document.getElementById('view-modal-close')?.addEventListener('click', closeViewModal);
document.getElementById('copy-detail-url-btn')?.addEventListener('click', copyDetailUrl);
document.getElementById('delete-from-view-btn')?.addEventListener('click', deleteFromView);
document.getElementById('download-view-file-btn')?.addEventListener('click', () => downloadFile());
document.getElementById('save-details-btn')?.addEventListener('click', saveDetails);
document.querySelector('#upload-modal .modal-backdrop')?.addEventListener('click', closeUploadModal);
document.querySelector('#view-modal .modal-backdrop')?.addEventListener('click', closeViewModal);
const dropzone = document.getElementById('dropzone');
const fileInput = document.getElementById('file-input');
dropzone.addEventListener('click', () => fileInput.click());
dropzone.addEventListener('dragover', (e) => {
e.preventDefault();
dropzone.classList.add('dragover');
});
dropzone.addEventListener('dragleave', () => {
dropzone.classList.remove('dragover');
});
dropzone.addEventListener('drop', (e) => {
e.preventDefault();
dropzone.classList.remove('dragover');
fileInput.files = e.dataTransfer.files;
handleFileSelect({ target: fileInput });
});
document.getElementById('media-grid').addEventListener('click', function(event) {
const actionBtn = event.target.closest('[data-action]');
if (!actionBtn) return;
const { action, id, path } = actionBtn.dataset;
if (action === 'view' && id) {
viewMedia(id);
} else if (action === 'copy' && path) {
copyUrl(path);
} else if (action === 'delete' && id) {
deleteMedia(id);
}
});
document.getElementById('media-grid').addEventListener('change', function(event) {
if (event.target.matches('.media-checkbox input')) {
updateBulkActions();
}
});
}
async function loadMedia() {
try {
@@ -454,9 +515,9 @@
: `<i class="fas fa-file-${getFileIcon(item.type)}"></i>`
}
<div class="media-overlay">
<button class="btn btn-sm" onclick="viewMedia('${item.id}')"><i class="fas fa-eye"></i></button>
<button class="btn btn-sm" onclick="copyUrl('/${item.path}')"><i class="fas fa-link"></i></button>
<button class="btn btn-sm" onclick="deleteMedia('${item.id}')"><i class="fas fa-trash"></i></button>
<button class="btn btn-sm" data-action="view" data-id="${item.id}"><i class="fas fa-eye"></i></button>
<button class="btn btn-sm" data-action="copy" data-path="/${item.path}"><i class="fas fa-link"></i></button>
<button class="btn btn-sm" data-action="delete" data-id="${item.id}"><i class="fas fa-trash"></i></button>
</div>
</div>
<div class="media-info">
@@ -464,7 +525,7 @@
<span class="media-size">${formatBytes(item.size)}</span>
</div>
<label class="media-checkbox">
<input type="checkbox" name="selected[]" value="${item.id}" onchange="updateBulkActions()">
<input type="checkbox" name="selected[]" value="${item.id}">
<span class="checkmark"></span>
</label>
</div>
@@ -618,25 +679,6 @@
document.getElementById('view-modal').classList.remove('active');
}
// Drag & Drop
const dropzone = document.getElementById('dropzone');
const fileInput = document.getElementById('file-input');
dropzone.addEventListener('click', () => fileInput.click());
dropzone.addEventListener('dragover', (e) => {
e.preventDefault();
dropzone.classList.add('dragover');
});
dropzone.addEventListener('dragleave', () => {
dropzone.classList.remove('dragover');
});
dropzone.addEventListener('drop', (e) => {
e.preventDefault();
dropzone.classList.remove('dragover');
fileInput.files = e.dataTransfer.files;
handleFileSelect({ target: fileInput });
});
function updateBulkActions() {
const checked = document.querySelectorAll('.media-checkbox input:checked');
const bulkActions = document.getElementById('bulk-actions');