Merge pull request #27 from olegvodyanov/add_separation
All checks were successful
continuous-integration/drone/push Build is passing

add_separation
This commit is contained in:
Олег Водянов 2025-04-23 15:24:30 +04:00 committed by GitHub
commit 8720c08250
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 42 additions and 21 deletions

View File

@ -20,6 +20,7 @@ def links_list(request):
try:
page = int(request.GET.get('page', 1))
per_page = int(request.GET.get('per_page', 8))
watched = bool(request.GET.get('watched', ""))
except ValueError:
return JsonResponse({'error': 'Invalid page or per_page'}, status=400)
@ -28,7 +29,8 @@ def links_list(request):
all_links = Link.objects.all().order_by('-id') # latest first
total = all_links.count()
results = list(all_links[offset:limit].values('id', 'url', 'watched'))
limit_results = list(all_links[offset:limit].values('id', 'url', 'watched'))
results = filter(lambda row: row['watched'] == str(watched), limit_results)
return JsonResponse({
'results': results,

View File

@ -4,6 +4,7 @@ const newLinksContainer = document.getElementById('newLinksContainer');
const watchedLinksContainer = document.getElementById('watchedLinksContainer');
const PER_PAGE = 8;
const WATCHED = false;
let currentPage = 1;
let linksData = [];
@ -14,32 +15,50 @@ function extractReelId(url) {
}
function loadLinks() {
const cacheKeyWatched = `links_cache_page_${currentPage}_per_${PER_PAGE}&watched='true'`;
const cachedWatched = localStorage.getItem(cacheKeyWatched);
const cacheKey = `links_cache_page_${currentPage}_per_${PER_PAGE}`;
const cached = localStorage.getItem(cacheKey);
if (cachedWatched) {
const data = JSON.parse(cachedWatched);
linksData = data.results;
renderPaginatedList(
linksData,watchedLinksContainer,true,data.page,data.pages
);
}
if (cached) {
const data = JSON.parse(cached);
linksData = data.results;
renderPaginatedList(
linksData.filter(l => !l.watched),newLinksContainer,false,data.page,data.pages
);
renderPaginatedList(
linksData.filter(l => l.watched),watchedLinksContainer,true,data.page,data.pages
linksData,watchedLinksContainer,true,data.page,data.pages
);
}
// Always fetch fresh data in the background
fetch(`/api/links/?page=${currentPage}&per_page=${PER_PAGE}&watched='true'`)
.then(response => response.json())
.then(data => {
localStorage.setItem(cacheKeyWatched, JSON.stringify(data));
if (!cachedWatched) {
linksData = data.results;
renderPaginatedList(
linksData,watchedLinksContainer,true,data.page,data.pages
);
}
})
.catch(err => console.error(err));
fetch(`/api/links/?page=${currentPage}&per_page=${PER_PAGE}`)
.then(res => res.json())
.then(response => response.json())
.then(data => {
localStorage.setItem(cacheKey, JSON.stringify(data));
if (!cached) {
linksData = data.results;
renderPaginatedList(
linksData.filter(l => !l.watched),newLinksContainer,false,data.page,data.pages
);
renderPaginatedList(
linksData.filter(l => l.watched),watchedLinksContainer,true,data.page,data.pages
linksData,newLinksContainer,false,data.page,data.pages
);
}
})
@ -68,11 +87,11 @@ function renderPaginatedList(linkList, container, isWatched, page, totalPages) {
const navigation = document.createElement('div');
navigation.className = 'd-flex justify-content-center mt-4 gap-2';
const prevBtn = document.createElement('button');
prevBtn.innerText = '← Previous';
prevBtn.className = 'btn btn-outline-primary';
prevBtn.disabled = page <= 1;
prevBtn.onclick = () => {
const previousBtn = document.createElement('button');
previousBtn.innerText = '← Previous';
previousBtn.className = 'btn btn-outline-primary';
previousBtn.disabled = page <= 1;
previousBtn.onclick = () => {
currentPage--;
loadLinks();
};
@ -86,7 +105,7 @@ function renderPaginatedList(linkList, container, isWatched, page, totalPages) {
loadLinks();
};
navigation.appendChild(prevBtn);
navigation.appendChild(previousBtn);
navigation.appendChild(nextBtn);
container.appendChild(navigation);
}
@ -152,8 +171,8 @@ function deleteLink(linkId) {
fetch(`/api/links/${linkId}/delete/`, {
method: 'DELETE'
})
.then(res => {
if (res.ok) {
.then(response => {
if (response.ok) {
linksData = linksData.filter(link => link.id !== linkId);
currentPage = 1;
loadLinks();
@ -175,10 +194,10 @@ function markLinkWatched(linkId) {
fetch(`/api/links/${linkId}/watched/`, {
method: 'PATCH'
})
.then(res => res.json())
.then(response => response.json())
.then(updatedLink => {
// Update the local array
const idx = linksData.findIndex(l => l.id === updatedLink.id);
const idx = linksData.findIndex(link => link.id === updatedLink.id);
if (idx !== -1) {
linksData[idx] = updatedLink;
}
@ -198,7 +217,7 @@ addLinkBtn.addEventListener('click', () => {
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ url: newUrl })
})
.then(res => res.json())
.then(response => response.json())
.then(addedLink => {
// update local data
linksData.push(addedLink);