diff --git a/main/models.py b/main/models.py index 9ac004f066ea82e451224ca96a30cf7883bd72f9..5954eac2852d5715799fb10cc51625083d56da6a 100644 --- a/main/models.py +++ b/main/models.py @@ -336,15 +336,19 @@ class MainArticlesPage( def get_context(self, request, *args, **kwargs): ctx = super().get_context(request, args, kwargs) - article_list = self.get_article_data_list(1) - ctx["article_data_list"] = article_list - ctx["show_next_articles"] = MainArticlePage.objects.filter( + article_timeline_list = self.get_article_data_list(1) + ctx["article_timeline_list"] = article_timeline_list + ctx["show_next_timeline_articles"] = MainArticlePage.objects.filter( article_type=ARTICLE_TYPES.WORK_TIMELINE - ).count() > len(article_list) - + ).count() > len(article_timeline_list) + article_list = MainArticlePage.objects.filter( + article_type=ARTICLE_TYPES.PRESS_RELEASE + ).order_by("-date") + ctx["article_article_list"] = article_list[:10] + ctx["show_next_article"] = len(article_list) > 4 return ctx - def get_articles_response(self, request): + def get_timeline_articles_response(self, request): article_list = self.get_article_data_list(int(request.GET.get("months", None))) context = {"article_data_list": article_list} data = { @@ -358,10 +362,30 @@ class MainArticlesPage( } return JsonResponse(data=data, safe=False) + def get_articles_response(self, request): + article_paginator = Paginator( + MainArticlePage.objects.filter( + article_type=ARTICLE_TYPES.PRESS_RELEASE + ).order_by("-date"), + 10, + ) + article_page = article_paginator.get_page(request.GET.get("page", 1)) + context = {"article_data_list": article_page.object_list} + html_content = render( + request, "main/includes/person_article_preview.html", context + ).content + data = { + "html": html_content.decode("utf-8"), + "last_page": article_page.paginator.num_pages, + } + return JsonResponse(data=data, safe=False) + def serve(self, request, *args, **kwargs): if not request.META.get("HTTP_X_REQUESTED_WITH") == "XMLHttpRequest": return super().serve(request, *args, **kwargs) if "months" in request.GET: + return self.get_timeline_articles_response(request) + if "page" in request.GET: return self.get_articles_response(request) @staticmethod diff --git a/main/templates/main/blocks/articles_article_list_block.html b/main/templates/main/blocks/articles_article_list_block.html deleted file mode 100644 index ea43fa6d4ef8204a6a0bd6b10009ce70213ccbba..0000000000000000000000000000000000000000 --- a/main/templates/main/blocks/articles_article_list_block.html +++ /dev/null @@ -1,14 +0,0 @@ -<section class="grid-container mb-4 justify-start xl:mb-14"> - <div class="grid-content-with-right-side"> - <div class="leading-6"> - <h2 class="head-4xl mb-5 xl:hidden"> - Články - </h2> - {{> molecules-person-article-preview }} - {{> molecules-person-article-preview }} - </div> - <div class="flex justify-center"> - {{> atoms-button-animated(btn-text: "Zobrazit další", classes-btn-hidden: "bg-black") }} - </div> - </div> -</section> diff --git a/main/templates/main/includes/person_article_preview.html b/main/templates/main/includes/person_article_preview.html new file mode 100644 index 0000000000000000000000000000000000000000..77c4d2578705b22099bff08cbecc682959835740 --- /dev/null +++ b/main/templates/main/includes/person_article_preview.html @@ -0,0 +1,15 @@ +{% for article_page in article_data_list %} + <div class="flex flex-col justify-between items-start mb-9"> + <div class="flex font-bold mb-4 text-xs text-white uppercase"> + <span class="bg-green-500 mr-1 px-1">Duben 2022</span> + <span class="bg-violet-600 mr-1 px-1">#ENERGETIKA</span> + </div> + <h4 class="head-3xl mb-4"> + {{ article_page.title }} + </h4> + <p class="mb-6"> + {{ article_page.perex }} + </p> + {% include 'main/includes/button_animated.html' with btn_link=article_page.url btn_text="Číst dále" %} + </div> +{% endfor %} diff --git a/main/templates/main/main_articles_page.html b/main/templates/main/main_articles_page.html index 264e5b223575a768423d1ca57d37b4b363177099..bef3128ea02fa1cf4f3a7fc673e5622a2e372318 100644 --- a/main/templates/main/main_articles_page.html +++ b/main/templates/main/main_articles_page.html @@ -32,13 +32,13 @@ <div class="mt-20"> <div class="grid-container article-section"> <div class="grid-full mb-8"> - <div id="searchResultWrapper"> - {% include 'main/blocks/articles_timeline_block.html' with article_data_list=article_data_list %} + <div id="showMoreTimelineResultsWrapper"> + {% include 'main/blocks/articles_timeline_block.html' with article_data_list=article_timeline_list %} </div> </div> <div class="flex justify-center"> <a - onclick="showMoreArticles(event, this)" + onclick="showMoreTimelineArticles(event, this)" href="#" data-url="{{ page_url }}?months=" data-months="2" @@ -56,17 +56,44 @@ </div> </template> <template v-if="isCurrentView('articles')"> - + <section class="grid-container mb-3 justify-start xl:mb-14"> + <div class="grid-content-with-right-side"> + <div class="leading-6"> + <h2 class="head-4xl mb-5 xl:hidden"> + Články + </h2> + <div id="searchArticleResultWrapper"> + {% include 'main/includes/person_article_preview.html' with article_data_list=article_article_list %} + </div> + <div class="flex justify-center"> + <a + onclick="showMoreArticles(event, this)" + href="#" + data-url="{{ page_url }}?page=" + data-page="2" + class="btn btn__slide__wrap" + > + <span class="btn text-sm bg-black text-white w-32 lg:text-base"> + Zobrazit další + </span> + <span class="btn text-sm bg-white text-black w-32 lg:text-base"> + Zobrazit další + </span> + </a> + </div> + </div> + </div> + </section> </template> </ui-view-provider> </div> </main> <script type="text/javascript"> - async function showMoreArticles(event, btn) { + async function showMoreTimelineArticles(event, btn) { event.preventDefault() - const searchResultWrapper = document.getElementById('searchResultWrapper') + const showMoreTimelineResultsWrapper = document.getElementById('showMoreTimelineResultsWrapper') const url = btn.getAttribute('data-url') + btn.getAttribute('data-months') const response = await fetch(url, { @@ -74,8 +101,25 @@ headers: {"X-Requested-With": "XMLHttpRequest"}, }) const data = await response.json() - searchResultWrapper.innerHTML = data.html + showMoreTimelineResultsWrapper.innerHTML = data.html btn.setAttribute('data-months', parseInt(btn.getAttribute('data-months')) + 1) } + + async function showMoreArticles(event, btn) { + event.preventDefault() + + let searchArticleResultWrapper = document.getElementById('searchArticleResultWrapper'); + let url = btn.getAttribute('data-url') + btn.getAttribute('data-page') + + const response = await fetch(url, { + method: "GET", + headers: {"X-Requested-With": "XMLHttpRequest"}, + }) + const data = await response.json() + searchArticleResultWrapper.innerHTML += data.html; + if (btn.getAttribute('data-page') === data.last_page) + btn.hide(); + btn.setAttribute('data-page', parseInt(btn.getAttribute('data-page')) + 1) + } </script> {% endblock content %}