[FEATURE] ajax more articles

main/models.py

@@ -298,8 +298,11 @@ 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)
+    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(
@@ -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 {

main/templates/main/blocks/articles_block.html

+{% 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

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)
             });
     }

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 id="searchResultWrapper">
+            {% include 'main/blocks/articles_block.html' with article_data_list=article_data_list %}
           </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 %}
-        <div class="flex justify-center">
-          {% include 'main/includes/button_animated.html' with btn_text="Zobrazit další" %}
       </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 %}