135 lines
4.9 KiB
HTML
135 lines
4.9 KiB
HTML
{% extends "common/base.html" %}
|
|
{% from 'components/header.html' import header %}
|
|
|
|
{% block title %}Starred - DocuPulse{% endblock %}
|
|
|
|
{% block extra_css %}
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/starred.css', v=config.CSS_VERSION) }}">
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
{{ header(
|
|
title="Starred",
|
|
description="View and manage your starred files and documents.",
|
|
icon="fa-star"
|
|
) }}
|
|
|
|
<div class="container-fluid py-4">
|
|
<div class="card shadow-sm">
|
|
<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">
|
|
{% include 'components/search_bar.html' %}
|
|
<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>
|
|
|
|
{% include 'components/details_modal.html' %}
|
|
{% endblock %}
|
|
|
|
{% block extra_js %}
|
|
<script src="{{ url_for('static', filename='js/file-grid.js', v=config.CSS_VERSION) }}"></script>
|
|
<script src="{{ url_for('static', filename='js/starred.js', v=config.CSS_VERSION) }}"></script>
|
|
<script>
|
|
// Add event logging for starred actions
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Log when starred page is viewed
|
|
fetch('/api/events/log', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRFToken': '{{ csrf_token }}'
|
|
},
|
|
body: JSON.stringify({
|
|
event_type: 'starred_view',
|
|
details: {
|
|
user_id: '{{ current_user.id }}',
|
|
timestamp: new Date().toISOString()
|
|
}
|
|
})
|
|
});
|
|
|
|
// Log when view is toggled
|
|
const gridViewBtn = document.getElementById('gridViewBtn');
|
|
const listViewBtn = document.getElementById('listViewBtn');
|
|
|
|
if (gridViewBtn && listViewBtn) {
|
|
gridViewBtn.addEventListener('click', function() {
|
|
logViewChange('grid');
|
|
});
|
|
|
|
listViewBtn.addEventListener('click', function() {
|
|
logViewChange('list');
|
|
});
|
|
}
|
|
|
|
function logViewChange(viewType) {
|
|
fetch('/api/events/log', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRFToken': '{{ csrf_token }}'
|
|
},
|
|
body: JSON.stringify({
|
|
event_type: 'starred_view_change',
|
|
details: {
|
|
user_id: '{{ current_user.id }}',
|
|
view_type: viewType,
|
|
timestamp: new Date().toISOString()
|
|
}
|
|
})
|
|
});
|
|
}
|
|
|
|
// Log when search is performed
|
|
const searchInput = document.querySelector('.search-input');
|
|
if (searchInput) {
|
|
searchInput.addEventListener('input', debounce(function(e) {
|
|
if (e.target.value.length > 0) {
|
|
fetch('/api/events/log', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRFToken': '{{ csrf_token }}'
|
|
},
|
|
body: JSON.stringify({
|
|
event_type: 'starred_search',
|
|
details: {
|
|
user_id: '{{ current_user.id }}',
|
|
search_term: e.target.value,
|
|
timestamp: new Date().toISOString()
|
|
}
|
|
})
|
|
});
|
|
}
|
|
}, 500));
|
|
}
|
|
|
|
// Debounce function to limit API calls
|
|
function debounce(func, wait) {
|
|
let timeout;
|
|
return function executedFunction(...args) {
|
|
const later = () => {
|
|
clearTimeout(timeout);
|
|
func(...args);
|
|
};
|
|
clearTimeout(timeout);
|
|
timeout = setTimeout(later, wait);
|
|
};
|
|
}
|
|
});
|
|
</script>
|
|
{% endblock %} |