diff --git a/main/models.py b/main/models.py index 4127fb07853f5a7f452a8de3173184899479c5f2..74636d60577589df46eeb0b8e25ac29ea4a9660a 100644 --- a/main/models.py +++ b/main/models.py @@ -298,9 +298,12 @@ class MainArticlesPage( class Meta: verbose_name = "Rozcestník článků" - def get_article_data_list(self): - last_month = timezone.now().today().replace(day=1) - timedelta(days=1) - first_day_of_last_month = last_month.replace(day=1) + def get_article_data_list(self, month_back): + first_day_of_last_month = None + last_month = timezone.now().today() + for x in range(month_back): + last_month = last_month.replace(day=1) - timedelta(days=1) + first_day_of_last_month = last_month.replace(day=1) sorted_article_qs = MainArticlePage.objects.filter( date__gt=first_day_of_last_month @@ -327,9 +330,27 @@ class MainArticlesPage( def get_context(self, request, *args, **kwargs): ctx = super().get_context(request, args, kwargs) - ctx["article_data_list"] = self.get_article_data_list() + ctx["article_data_list"] = self.get_article_data_list(1) + ctx["show_next_articles"] = len(MainArticlePage.objects.all()) > len(self.get_article_data_list(1)) return ctx + def get_articles_response(self, request): + article_list = self.get_article_data_list(int(request.GET.get('months', None))) + context = { + "article_data_list": article_list + } + data = { + 'html': render(request, 'main/blocks/articles_block.html', context).content.decode("utf-8"), + 'last_article': article_list[-1] == MainArticlePage.objects.all().order_by('-date').last() + } + 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_articles_response(request) + @staticmethod def get_empty_month_data(date_obj): return { diff --git a/main/templates/main/blocks/articles_block.html b/main/templates/main/blocks/articles_block.html new file mode 100644 index 0000000000000000000000000000000000000000..0946fd767187bffa672df29961311a1cb06cf00b --- /dev/null +++ b/main/templates/main/blocks/articles_block.html @@ -0,0 +1,28 @@ +{% for month_article_data in article_data_list %} + <div class="mb-4"> + <h3 class="head-7xl mb-4 xl:hidden"> + {{ month_article_data.month_text }} + </h3> + <div class="flex flex-col justify-between xl:flex-row"> + <div class="xl:pt-8"> + {% for article_page in month_article_data.left_column %} + {% include 'main/includes/work_article_preview.html' %} + {% empty %} + <div class="p-7 flex flex-col max-w-xl mb-8" /> + {% endfor %} + </div> + <div class="relative border border-violet-400 mx-8 hidden xl:block"> + <div class="absolute bg-violet-400 p-1 text-white font-bold" style="transform: translateX(-50%); top: -1rem"> + {{ month_article_data.month_text }} + </div> + </div> + <div class="xl:pt-14"> + {% for article_page in month_article_data.right_column %} + {% include 'main/includes/work_article_preview.html' %} + {% empty %} + <div class="p-7 flex flex-col max-w-xl mb-8" /> + {% endfor %} + </div> + </div> + </div> +{% endfor %} \ No newline at end of file diff --git a/main/templates/main/blocks/twitter_block.html b/main/templates/main/blocks/twitter_block.html index b72ea961a8e6158c468bc3ba68e3f0545a08d029..cfbd1060265e88534c2e52a0a6b4e42c37cb81bd 100644 --- a/main/templates/main/blocks/twitter_block.html +++ b/main/templates/main/blocks/twitter_block.html @@ -9,7 +9,6 @@ <div class="text-center"> <a onclick="showMoreTweets(this)" - href="#" data-url="{{ page_url }}?page=" data-page="2" class="btn btn__slide__wrap"> @@ -39,9 +38,7 @@ tweetsList.innerHTML += data.html; if (tweet.getAttribute('data-page') === data.last_page) btn.hide(); - console.log(tweet.getAttribute('data-page')) let dataPage = parseInt(tweet.getAttribute('data-page')) + 1 - console.log(dataPage) tweet.setAttribute('data-page', dataPage) }); } diff --git a/main/templates/main/main_articles_page.html b/main/templates/main/main_articles_page.html index d57689731a43f899e2cdbc7dcd108a110cf67484..120059dc6e22e3d8529a06cedc6aed4ac7faef4b 100644 --- a/main/templates/main/main_articles_page.html +++ b/main/templates/main/main_articles_page.html @@ -18,38 +18,43 @@ <div class="grid-container article-section"> <div class="grid-full mb-8"> - {% for month_article_data in article_data_list %} - <div class="mb-4"> - <h3 class="head-7xl mb-4 xl:hidden"> - {{ month_article_data.month_text }} - </h3> - <div class="flex flex-col justify-between xl:flex-row"> - <div class="xl:pt-8"> - {% for article_page in month_article_data.left_column %} - {% include 'main/includes/work_article_preview.html' %} - {% empty %} - <div class="p-7 flex flex-col max-w-xl mb-8" /> - {% endfor %} - </div> - <div class="relative border border-violet-400 mx-8 hidden xl:block"> - <div class="absolute bg-violet-400 p-1 text-white font-bold" style="transform: translateX(-50%); top: -1rem"> - {{ month_article_data.month_text }} - </div> - </div> - <div class="xl:pt-14"> - {% for article_page in month_article_data.right_column %} - {% include 'main/includes/work_article_preview.html' %} - {% empty %} - <div class="p-7 flex flex-col max-w-xl mb-8" /> - {% endfor %} - </div> - </div> + <div id="searchResultWrapper"> + {% include 'main/blocks/articles_block.html' with article_data_list=article_data_list %} </div> - {% endfor %} - <div class="flex justify-center"> - {% include 'main/includes/button_animated.html' with btn_text="Zobrazit další" %} - </div> </div> + <div class="text-center"> + <a + onclick="showMoreArticles(this)" + data-url="{{ page_url }}?months=" + data-months="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> </main> + <script type="text/javascript"> + function showMoreArticles(article) { + let btn = article; + let searchResultWrapper = document.getElementById('searchResultWrapper'); + + let url = article.getAttribute('data-url') + article.getAttribute('data-months') + fetch(url, { + method: "GET", + headers: { + "X-Requested-With": "XMLHttpRequest", + }, + }).then((response) => response.json()) + .then((data) => { + searchResultWrapper.innerHTML = data.html; + let dataMonths = parseInt(article.getAttribute('data-months')) + 1 + article.setAttribute('data-months', dataMonths) + }); + } + </script> {% endblock content %}