diff --git a/server/content/news.php b/server/content/news.php index 41f9efa..b561202 100644 --- a/server/content/news.php +++ b/server/content/news.php @@ -1,22 +1,28 @@ Neuigkeiten"; $content .= '

Aktuelles der letzten zwölf Monate

'; - + $sp['output'] .= $tpl->load('card', [$content]); - + + $sp['output'] .= '
'; + + // Pagination + $sp['output'] .= $tpl->load('pagination', ['html-id' => 'pagination']); + // Menu $sp['menus'] .= $tpl->load('menu/modal', ['html-id' => 'menu-news', 'title' => 'Details']); - + + $sp['scripts'] .= $scripts->load('pagination', ['pageChange', 'page', 'pageCount', 'pagination']); $cardTemplate = $tpl->load('card', ['%CONTENT%', 'html-id' => '%ID%', 'css-class' => 'card-news']); $cardTemplate = str_replace("\n", '', $cardTemplate); $cardTemplate = str_replace("\r", '', $cardTemplate); $sp['scripts'] .= ""; $sp['scripts'] .= $scripts->load('news'); - -?> \ No newline at end of file + +?> diff --git a/server/scripts/news.js b/server/scripts/news.js index 6b55da4..ddece8e 100644 --- a/server/scripts/news.js +++ b/server/scripts/news.js @@ -1,3 +1,9 @@ +var firstCall = true; +var rows = []; +var page = 1; +var pageCount = 0; +const showCount = 10; + async function onNewsClicked(id) { var newsEntry = await dbGetData('news', id); if (newsEntry == null) return; @@ -11,23 +17,50 @@ async function onNewsClicked(id) { $('#menu-news').showMenu(); } +function pageChange() { + $('h1')[0].scrollIntoView({ behavior: "smooth" }); + drawList(); +} + function addCard(newsEntry) { - var content = '

' + newsEntry.title + '

'; + var badge = ''; + if (newsEntry.unread) { + badge += 'NEW '; + } + var content = '

' + badge + newsEntry.title + '

'; content += '

' + formatDate('d.m.Y', newsEntry.date) + '

'; content += '

' + newsEntry.description.replace('\n', '
') + '

'; if (newsEntry.html != '') { content += 'Mehr lesen'; } - $('.page-content').append(cardTemplate.replace('%ID%', 'card-news-' + newsEntry.id).replace('%CONTENT%', content)); + $('#news-entries').append(cardTemplate.replace('%ID%', 'card-news-' + newsEntry.id).replace('%CONTENT%', content)); +} + +async function drawList() { + $('.card-news').remove(); + if (rows.length > 0) { + var offset = (page - 1) * showCount; + var count = (page == pageCount ? (rows.length % showCount) : showCount); + if (count == 0) count = showCount; + + for (i = 0; i < count; i ++) { + addCard(rows[i + offset]); + } + } } var siteScript = async function() { - $('.card-news').remove(); + if (firstCall) { + firstCall = false; + initPagination(); + } + rows = []; var news = await dbGetData('news'); news.sort(function (a,b) { return b.date.localeCompare(a.date); }); + var newsRead = await dbSettingsGet('news_read_' + BOATCLASS); var now = new Date(); var lastYear = new Date(); lastYear.setFullYear(lastYear.getFullYear() - 1); @@ -36,8 +69,19 @@ var siteScript = async function() { newsEntry.date = new Date(Date.parse(newsEntry.date)); if (newsEntry.date > now) continue; if (newsEntry.date < lastYear) break; - addCard(newsEntry); + newsEntry.unread = (newsEntry.date > newsRead); + rows.push(newsEntry); } + pageCount = Math.ceil(rows.length / showCount); + if ((page < 1) || (page > pageCount)) { + if (page < 1) { + page = 1; + } else { + page = pageCount; + } + } + drawPagination(); + drawList(); dbSettingsSet('news_read_' + BOATCLASS, now); updateNewsBadge(); hideLoader();