468 lines
20 KiB
HTML
468 lines
20 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Starred - DocuPulse{% endblock %}
|
|
|
|
{% block content %}
|
|
<meta name="csrf-token" content="{{ csrf_token }}">
|
|
<div class="container mt-4">
|
|
<div class="row mb-4">
|
|
<div class="col">
|
|
<h2>Starred Items</h2>
|
|
<div class="text-muted">Your starred files and folders from all rooms</div>
|
|
</div>
|
|
</div>
|
|
<div class="card shadow-sm mb-4">
|
|
<div class="card-header d-flex justify-content-between align-items-center bg-white">
|
|
<div class="d-flex align-items-center gap-3">
|
|
<div class="btn-group btn-group-sm" role="group" style="margin-right: 0.5rem;">
|
|
<button type="button" id="gridViewBtn" class="btn btn-outline-secondary active" onclick="toggleView('grid')">
|
|
<i class="fas fa-th-large"></i>
|
|
</button>
|
|
<button type="button" id="listViewBtn" class="btn btn-outline-secondary" onclick="toggleView('list')">
|
|
<i class="fas fa-list"></i>
|
|
</button>
|
|
</div>
|
|
<h5 class="mb-0">Files</h5>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="d-flex align-items-center gap-2 mb-3">
|
|
<div class="ms-auto" style="max-width: 300px; position: relative;">
|
|
<input type="text" id="quickSearchInput" class="form-control form-control-sm" placeholder="Quick search files..." autocomplete="off" style="padding-right: 2rem;" />
|
|
<button id="clearSearchBtn" type="button" style="position: absolute; right: 0.25rem; top: 50%; transform: translateY(-50%); display: none; border: none; background: transparent; font-size: 1.2rem; color: #888; cursor: pointer; z-index: 2;">×</button>
|
|
</div>
|
|
</div>
|
|
<div id="fileGrid" class="row row-cols-1 row-cols-md-2 row-cols-lg-4 g-4"></div>
|
|
<div id="fileError" class="text-danger mt-2"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Details Modal -->
|
|
<div id="detailsModal" class="modal fade" tabindex="-1" aria-labelledby="detailsModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="detailsModalLabel">Item Details</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body" id="detailsModalBody">
|
|
<!-- Populated by JS -->
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
let currentView = 'grid';
|
|
let lastSelectedIndex = -1;
|
|
let sortColumn = 'name'; // Set default sort column to name
|
|
let sortDirection = 1; // 1 for ascending, -1 for descending
|
|
let batchDeleteItems = null;
|
|
let currentFiles = [];
|
|
|
|
// Initialize the view and fetch files
|
|
async function initializeView() {
|
|
try {
|
|
const response = await fetch('/api/user/preferred_view');
|
|
const data = await response.json();
|
|
currentView = data.preferred_view || 'grid';
|
|
} catch (error) {
|
|
console.error('Error fetching preferred view:', error);
|
|
currentView = 'grid';
|
|
}
|
|
|
|
// First fetch files
|
|
await fetchFiles();
|
|
|
|
// Then toggle view after files are loaded
|
|
toggleView(currentView);
|
|
|
|
// Sort files by name by default
|
|
sortFiles('name');
|
|
}
|
|
|
|
function formatDate(ts) {
|
|
if (!ts) return '';
|
|
const d = new Date(ts * 1000);
|
|
return d.toLocaleDateString() + ' ' + d.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});
|
|
}
|
|
|
|
function toggleView(view) {
|
|
currentView = view;
|
|
const grid = document.getElementById('fileGrid');
|
|
const gridBtn = document.getElementById('gridViewBtn');
|
|
const listBtn = document.getElementById('listViewBtn');
|
|
if (view === 'grid') {
|
|
grid.classList.remove('table-mode');
|
|
gridBtn.classList.add('active');
|
|
listBtn.classList.remove('active');
|
|
} else {
|
|
grid.classList.add('table-mode');
|
|
gridBtn.classList.remove('active');
|
|
listBtn.classList.add('active');
|
|
}
|
|
renderFiles(currentFiles);
|
|
// Save the new preference
|
|
fetch('/api/user/preferred_view', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRFToken': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
|
|
},
|
|
body: JSON.stringify({ preferred_view: view })
|
|
})
|
|
.then(response => {
|
|
if (!response.ok) {
|
|
throw new Error('Network response was not ok');
|
|
}
|
|
return response.json();
|
|
})
|
|
.then(data => {
|
|
console.log('Preferred view saved:', data);
|
|
})
|
|
.catch(error => console.error('Error saving preferred view:', error));
|
|
}
|
|
|
|
function sortFiles(column) {
|
|
if (sortColumn === column) {
|
|
sortDirection *= -1; // Toggle direction
|
|
} else {
|
|
sortColumn = column;
|
|
sortDirection = 1;
|
|
}
|
|
currentFiles.sort((a, b) => {
|
|
let valA = a[column];
|
|
let valB = b[column];
|
|
// For size, convert to number
|
|
if (column === 'size') {
|
|
valA = typeof valA === 'number' ? valA : 0;
|
|
valB = typeof valB === 'number' ? valB : 0;
|
|
}
|
|
// For name/type, compare as strings
|
|
if (typeof valA === 'string' && typeof valB === 'string') {
|
|
return valA.localeCompare(valB) * sortDirection;
|
|
}
|
|
// For date (modified), compare as numbers
|
|
return (valA - valB) * sortDirection;
|
|
});
|
|
renderFiles(currentFiles);
|
|
}
|
|
|
|
function renderFiles(files) {
|
|
if (!files) return;
|
|
currentFiles = files;
|
|
const grid = document.getElementById('fileGrid');
|
|
grid.innerHTML = '';
|
|
|
|
if (!files.length) {
|
|
grid.innerHTML = '<div class="col"><div class="text-muted">No starred items yet.</div></div>';
|
|
return;
|
|
}
|
|
|
|
if (currentView === 'list') {
|
|
let table = `<table><thead><tr>
|
|
<th></th>
|
|
<th>Room</th>
|
|
<th onclick="sortFiles('name')" style="cursor:pointer;">Name ${(sortColumn==='name') ? (sortDirection===1?'▲':'▼') : ''}</th>
|
|
<th onclick="sortFiles('modified')" style="cursor:pointer;">Date Modified ${(sortColumn==='modified') ? (sortDirection===1?'▲':'▼') : ''}</th>
|
|
<th onclick="sortFiles('type')" style="cursor:pointer;">Type ${(sortColumn==='type') ? (sortDirection===1?'▲':'▼') : ''}</th>
|
|
<th onclick="sortFiles('size')" style="cursor:pointer;">Size ${(sortColumn==='size') ? (sortDirection===1?'▲':'▼') : ''}</th>
|
|
<th class='file-actions'></th>
|
|
</tr></thead><tbody>`;
|
|
files.forEach((file, idx) => {
|
|
let icon = file.type === 'folder'
|
|
? `<i class='fas fa-folder' style='font-size:1.5rem;color:#16767b;'></i>`
|
|
: `<i class='fas fa-file-alt' style='font-size:1.5rem;color:#741b5f;'></i>`;
|
|
let size = file.size !== '-' ? (file.size > 0 ? (file.size < 1024*1024 ? (file.size/1024).toFixed(1)+' KB' : (file.size/1024/1024).toFixed(2)+' MB') : '0 KB') : '-';
|
|
let actionsArr = [];
|
|
let dblClickAction = '';
|
|
if (file.type === 'folder') {
|
|
dblClickAction = `ondblclick=\"window.location.href='/room/${file.room_id}?path=${encodeURIComponent(file.path ? file.path + '/' + file.name : file.name)}'\"`;
|
|
} else {
|
|
dblClickAction = `ondblclick=\"window.location.href='/api/rooms/${file.room_id}/files/${encodeURIComponent(file.name)}?path=${encodeURIComponent(file.path)}'\"`;
|
|
}
|
|
actionsArr.push(`<button class='btn btn-sm file-action-btn' title='${file.starred ? 'Unstar' : 'Star'}' style='background-color:${file.starred ? 'rgba(255,215,0,0.15)' : 'rgba(22,118,123,0.08)'};color:${file.starred ? '#ffd700' : '#16767b'};' onclick='event.stopPropagation();toggleStar("${file.name}", "${file.path}", ${file.room_id})'><i class='fas fa-star'></i></button>`);
|
|
actionsArr.push(`<button class='btn btn-sm file-action-btn' title='Details' style='background-color:rgba(22,118,123,0.08);color:#16767b;' onclick='event.stopPropagation();showDetailsModal(${idx})'><i class='fas fa-info-circle'></i></button>`);
|
|
const actions = actionsArr.join('');
|
|
table += `<tr ${dblClickAction} onclick='navigateToFile(${file.room_id}, "${file.name}", "${file.path}", "${file.type}")'>
|
|
<td class='file-icon'><span style="display:inline-flex;align-items:center;gap:1.2rem;">${icon}</span></td>
|
|
<td class='room-name'><button class='btn btn-sm' style='background-color:rgba(22,118,123,0.08);color:#16767b;' onclick='event.stopPropagation();window.location.href="/rooms/${file.room_id}"'><i class='fas fa-door-open me-1'></i>${file.room_name || 'Room ' + file.room_id}</button></td>
|
|
<td class='file-name' title='${file.name}'>${file.name}</td>
|
|
<td class='file-date'>${formatDate(file.modified)}</td>
|
|
<td class='file-type'>${file.type}</td>
|
|
<td class='file-size'>${size}</td>
|
|
<td class='file-actions'>${actions}</td>
|
|
</tr>`;
|
|
});
|
|
table += '</tbody></table>';
|
|
grid.innerHTML = table;
|
|
} else {
|
|
files.forEach((file, idx) => {
|
|
let icon = file.type === 'folder'
|
|
? `<i class='fas fa-folder' style='font-size:2.5rem;color:#16767b;'></i>`
|
|
: `<i class='fas fa-file-alt' style='font-size:2.5rem;color:#741b5f;'></i>`;
|
|
let size = file.size !== '-' ? (file.size > 0 ? (file.size < 1024*1024 ? (file.size/1024).toFixed(1)+' KB' : (file.size/1024/1024).toFixed(2)+' MB') : '0 KB') : '-';
|
|
let actionsArr = [];
|
|
let dblClickAction = '';
|
|
if (file.type === 'folder') {
|
|
dblClickAction = `ondblclick=\"window.location.href='/room/${file.room_id}?path=${encodeURIComponent(file.path ? file.path + '/' + file.name : file.name)}'\"`;
|
|
} else {
|
|
dblClickAction = `ondblclick=\"window.location.href='/api/rooms/${file.room_id}/files/${encodeURIComponent(file.name)}?path=${encodeURIComponent(file.path)}'\"`;
|
|
}
|
|
actionsArr.push(`<button class='btn btn-sm file-action-btn' title='${file.starred ? 'Unstar' : 'Star'}' style='background-color:${file.starred ? 'rgba(255,215,0,0.15)' : 'rgba(22,118,123,0.08)'};color:${file.starred ? '#ffd700' : '#16767b'};' onclick='event.stopPropagation();toggleStar("${file.name}", "${file.path}", ${file.room_id})'><i class='fas fa-star'></i></button>`);
|
|
actionsArr.push(`<button class='btn btn-sm file-action-btn' title='Details' style='background-color:rgba(22,118,123,0.08);color:#16767b;' onclick='event.stopPropagation();showDetailsModal(${idx})'><i class='fas fa-info-circle'></i></button>`);
|
|
const actions = actionsArr.join('');
|
|
grid.innerHTML += `
|
|
<div class='col'>
|
|
<div class='card file-card h-100 border-0 shadow-sm position-relative' ${dblClickAction} onclick='navigateToFile(${file.room_id}, "${file.name}", "${file.path}", "${file.type}")'>
|
|
<div class='card-body d-flex flex-column align-items-center justify-content-center text-center'>
|
|
<div class='mb-2'>${icon}</div>
|
|
<div class='fw-semibold file-name-ellipsis' title='${file.name}'>${file.name}</div>
|
|
<div class='text-muted small'>${formatDate(file.modified)}</div>
|
|
<div class='text-muted small'>${size}</div>
|
|
<div class='mt-2'><button class='btn btn-sm' style='background-color:rgba(22,118,123,0.08);color:#16767b;' onclick='event.stopPropagation();window.location.href="/rooms/${file.room_id}"'><i class='fas fa-door-open me-1'></i>${file.room_name || 'Room ' + file.room_id}</button></div>
|
|
</div>
|
|
<div class='card-footer bg-white border-0 d-flex justify-content-center gap-2'>${actions}</div>
|
|
</div>
|
|
</div>`;
|
|
});
|
|
}
|
|
}
|
|
|
|
function fetchFiles() {
|
|
fetch('/api/rooms/starred')
|
|
.then(r => r.json())
|
|
.then(files => {
|
|
if (files) {
|
|
window.currentFiles = files;
|
|
// Sort files by name by default
|
|
window.currentFiles.sort((a, b) => {
|
|
if (a.name < b.name) return -1;
|
|
if (a.name > b.name) return 1;
|
|
return 0;
|
|
});
|
|
renderFiles(files);
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error loading files:', error);
|
|
document.getElementById('fileGrid').innerHTML = '<div class="col"><div class="text-danger">Failed to load files. Please try refreshing the page.</div></div>';
|
|
});
|
|
}
|
|
|
|
function toggleStar(filename, path = '', roomId) {
|
|
const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
|
|
fetch(`/api/rooms/${roomId}/star`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRFToken': csrfToken
|
|
},
|
|
body: JSON.stringify({
|
|
filename: filename,
|
|
path: path
|
|
})
|
|
})
|
|
.then(r => r.json())
|
|
.then(res => {
|
|
if (res.success) {
|
|
// Remove the file from the current view since it's no longer starred
|
|
currentFiles = currentFiles.filter(f => !(f.name === filename && f.path === path && f.room_id === roomId));
|
|
renderFiles(currentFiles);
|
|
} else {
|
|
console.error('Failed to toggle star:', res.error);
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error toggling star:', error);
|
|
});
|
|
}
|
|
|
|
function navigateToFile(roomId, filename, path, type) {
|
|
if (file.type === 'folder') {
|
|
window.location.href = `/room/${roomId}?path=${encodeURIComponent(path ? path + '/' + filename : filename)}`;
|
|
} else {
|
|
window.location.href = `/api/rooms/${roomId}/files/${encodeURIComponent(filename)}?path=${encodeURIComponent(path)}`;
|
|
}
|
|
}
|
|
|
|
function showDetailsModal(idx) {
|
|
const item = currentFiles[idx];
|
|
const icon = item.type === 'folder'
|
|
? `<i class='fas fa-folder' style='font-size:2.2rem;color:#16767b;'></i>`
|
|
: `<i class='fas fa-file-alt' style='font-size:2.2rem;color:#741b5f;'></i>`;
|
|
const uploaderPic = item.uploader_profile_pic
|
|
? `/uploads/profile_pics/${item.uploader_profile_pic}`
|
|
: '/static/default-avatar.png';
|
|
const detailsHtml = `
|
|
<div class='d-flex align-items-center gap-3 mb-3'>
|
|
<div>${icon}</div>
|
|
<div style='min-width:0;'>
|
|
<div class='fw-bold' style='font-size:1.1rem;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;' title='${item.name}'>${item.name}</div>
|
|
<div class='text-muted small'>${item.type === 'folder' ? 'Folder' : 'File'}</div>
|
|
</div>
|
|
</div>
|
|
<div class='mb-2 d-flex align-items-center gap-2'>
|
|
<img src='${uploaderPic}' alt='Profile Picture' class='rounded-circle border' style='width:28px;height:28px;object-fit:cover;'>
|
|
<span class='fw-semibold' style='font-size:0.98rem;'>${item.uploaded_by || '-'}</span>
|
|
</div>
|
|
<div class='mb-2 text-muted' style='font-size:0.92rem;'><i class='far fa-clock me-1'></i>${formatDate(item.modified)}</div>
|
|
<hr style='margin:0.7rem 0 0.5rem 0; border-color:#e6f3f4;'>
|
|
<div style='font-size:0.91rem;color:#555;'><strong style='color:#16767b;'>Room:</strong> <button class='btn btn-sm' style='background-color:rgba(22,118,123,0.08);color:#16767b;' onclick='window.location.href=\"/room/${item.room_id}\"'><i class='fas fa-door-open me-1'></i>${item.room_name || 'Room ' + item.room_id}</button></div>
|
|
<div style='font-size:0.91rem;color:#555;'><strong style='color:#16767b;'>Path:</strong> <span style='word-break:break-all;'>${(item.path ? item.path + '/' : '') + item.name}</span></div>
|
|
<div style='font-size:0.91rem;color:#555;'><strong style='color:#16767b;'>Size:</strong> ${item.size === '-' ? '-' : (item.size > 0 ? (item.size < 1024*1024 ? (item.size/1024).toFixed(1)+' KB' : (item.size/1024/1024).toFixed(2)+' MB') : '0 KB')}</div>
|
|
<div style='font-size:0.91rem;color:#555;'><strong style='color:#16767b;'>Uploaded at:</strong> ${item.uploaded_at ? new Date(item.uploaded_at).toLocaleString() : '-'}</div>
|
|
`;
|
|
document.getElementById('detailsModalBody').innerHTML = detailsHtml;
|
|
var modal = new bootstrap.Modal(document.getElementById('detailsModal'));
|
|
modal.show();
|
|
}
|
|
|
|
// Live search
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
initializeView();
|
|
|
|
const quickSearchInput = document.getElementById('quickSearchInput');
|
|
const clearSearchBtn = document.getElementById('clearSearchBtn');
|
|
let searchTimeout = null;
|
|
|
|
quickSearchInput.addEventListener('input', function() {
|
|
const query = quickSearchInput.value.trim().toLowerCase();
|
|
clearSearchBtn.style.display = query.length > 0 ? 'block' : 'none';
|
|
|
|
if (searchTimeout) clearTimeout(searchTimeout);
|
|
searchTimeout = setTimeout(() => {
|
|
if (query.length === 0) {
|
|
fetchFiles();
|
|
return;
|
|
}
|
|
|
|
const filteredFiles = currentFiles.filter(file =>
|
|
file.name.toLowerCase().includes(query)
|
|
);
|
|
renderFiles(filteredFiles);
|
|
}, 200);
|
|
});
|
|
|
|
clearSearchBtn.addEventListener('click', function() {
|
|
quickSearchInput.value = '';
|
|
clearSearchBtn.style.display = 'none';
|
|
fetchFiles();
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
.file-name-ellipsis {
|
|
max-width: 140px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
display: inline-block;
|
|
vertical-align: bottom;
|
|
}
|
|
@media (min-width: 992px) {
|
|
.file-name-ellipsis { max-width: 180px; }
|
|
}
|
|
.file-action-btn {
|
|
min-width: 32px;
|
|
min-height: 32px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 5px;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition: opacity 0.15s;
|
|
}
|
|
.card:hover > .card-footer .file-action-btn {
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
}
|
|
.card-footer.bg-white.border-0.d-flex.justify-content-center.gap-2 {
|
|
min-height: 40px;
|
|
}
|
|
.card.file-card {
|
|
cursor: pointer;
|
|
}
|
|
.card.file-card .file-action-btn {
|
|
cursor: pointer;
|
|
}
|
|
#fileGrid.table-mode {
|
|
padding: 0;
|
|
}
|
|
#fileGrid.table-mode table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
background: #fff;
|
|
}
|
|
#fileGrid.table-mode th, #fileGrid.table-mode td {
|
|
padding: 0.5rem 1rem;
|
|
border-bottom: 1px solid #e9ecef;
|
|
text-align: left;
|
|
font-size: 0.95rem;
|
|
vertical-align: middle;
|
|
}
|
|
#fileGrid.table-mode th {
|
|
background: #f8f9fa;
|
|
color: #6c757d;
|
|
font-weight: 500;
|
|
}
|
|
#fileGrid.table-mode tr:hover td {
|
|
background-color: rgba(22, 118, 123, 0.08);
|
|
transition: background 0.15s;
|
|
}
|
|
#fileGrid.table-mode .file-icon {
|
|
width: 40px;
|
|
text-align: center;
|
|
}
|
|
#fileGrid.table-mode .file-actions {
|
|
min-width: 90px;
|
|
text-align: right;
|
|
}
|
|
#fileGrid.table-mode .file-action-btn {
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
min-width: 28px;
|
|
min-height: 28px;
|
|
font-size: 0.875rem;
|
|
margin-left: 0.25rem;
|
|
}
|
|
/* Disable text selection for file grid and table rows/cards */
|
|
#fileGrid, #fileGrid * {
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
}
|
|
#fileGrid .card.file-card {
|
|
cursor: pointer;
|
|
}
|
|
#fileGrid.table-mode tr {
|
|
cursor: pointer;
|
|
}
|
|
.btn-group.btn-group-sm .btn {
|
|
background-color: #fff;
|
|
border-color: #e9ecef;
|
|
color: #6c757d;
|
|
transition: background-color 0.15s, color 0.15s;
|
|
}
|
|
.btn-group.btn-group-sm .btn.active, .btn-group.btn-group-sm .btn:active {
|
|
background-color: #e6f3f4 !important;
|
|
color: #16767b !important;
|
|
border-color: #16767b !important;
|
|
box-shadow: none;
|
|
}
|
|
.btn-group.btn-group-sm .btn:focus {
|
|
box-shadow: 0 0 0 0.1rem #16767b33;
|
|
}
|
|
.btn-group.btn-group-sm .btn:hover:not(.active) {
|
|
background-color: #f8f9fa;
|
|
color: #16767b;
|
|
}
|
|
</style>
|
|
{% endblock %} |