114 lines
3.8 KiB
HTML
114 lines
3.8 KiB
HTML
{% extends "common/base.html" %}
|
|
{% from 'components/header.html' import header %}
|
|
|
|
{% block title %}Starred - DocuPulse{% 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 %}
|
|
<style>
|
|
.btn-group .btn.active {
|
|
background-color: #e6f3f4 !important;
|
|
border-color: #16767b !important;
|
|
color: #16767b !important;
|
|
}
|
|
|
|
.btn-group .btn:not(.active) {
|
|
background-color: #fff !important;
|
|
border-color: #e9ecef !important;
|
|
color: #6c757d !important;
|
|
}
|
|
</style>
|
|
<script src="{{ url_for('static', filename='js/file-grid.js') }}"></script>
|
|
<script>
|
|
let currentView = 'grid';
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Initialize view
|
|
initializeView();
|
|
});
|
|
|
|
async function initializeView() {
|
|
try {
|
|
const response = await fetch('/api/user/preferred_view');
|
|
const data = await response.json();
|
|
currentView = data.preferred_view || 'grid';
|
|
toggleView(currentView);
|
|
} catch (error) {
|
|
console.error('Error fetching preferred view:', error);
|
|
currentView = 'grid';
|
|
toggleView(currentView);
|
|
}
|
|
}
|
|
|
|
function toggleView(view) {
|
|
currentView = view;
|
|
const grid = document.getElementById('fileGrid');
|
|
const gridBtn = document.getElementById('gridViewBtn');
|
|
const listBtn = document.getElementById('listViewBtn');
|
|
|
|
// Reset both buttons first
|
|
gridBtn.classList.remove('active');
|
|
listBtn.classList.remove('active');
|
|
|
|
if (view === 'grid') {
|
|
grid.classList.remove('list-view');
|
|
gridBtn.classList.add('active');
|
|
} else {
|
|
grid.classList.add('list-view');
|
|
listBtn.classList.add('active');
|
|
}
|
|
|
|
// 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));
|
|
}
|
|
</script>
|
|
{% endblock %} |