Merge branch 'feature/pirati-cz-quidecek' into feature/pirati-cz

main/models.py

@@ -302,9 +302,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
@@ -331,9 +334,28 @@ 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()
+        article_list = self.get_article_data_list(1)
+        ctx["article_data_list"] = article_list
+        ctx["show_next_articles"] = MainArticlePage.objects.count() > len(article_list)
         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

@@ -8,7 +8,7 @@
     {% if show_next_tweet %}
       <div class="text-center">
           <a
-             onclick="showMoreTweets(this)"
+             onclick="showMoreTweets(event, this)"
              href="#"
              data-url="{{ page_url }}?page="
              data-page="2"
@@ -24,7 +24,8 @@
     {% endif %}
 </div>
 <script type="text/javascript">
-    function showMoreTweets(tweet) {
+    function showMoreTweets(event, tweet) {
+        event.preventDefault()
         let btn = tweet;
         let tweetsList = document.getElementById('tweetsList');
 
@@ -39,9 +40,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,49 @@
 
     <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>
-        {% endfor %}
-        <div class="flex justify-center">
-          {% include 'main/includes/button_animated.html' with btn_text="Zobrazit starší" %}
+        <div id="searchResultWrapper">
+          {% include 'main/blocks/articles_block.html' with article_data_list=article_data_list %}
         </div>
-      </div>
+        {% if show_next_articles %}
+          <div class="text-center">
+            <a
+              onclick="showMoreArticles(event, this)"
+              href="#"
+              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>
+
+        {% endif %}
     </div>
   </main>
+
+  <script type="text/javascript">
+    async function showMoreArticles(event, btn) {
+      event.preventDefault()
+
+      const searchResultWrapper = document.getElementById('searchResultWrapper')
+      const url = btn.getAttribute('data-url') + btn.getAttribute('data-months')
+
+      const response = await fetch(url, {
+        method: "GET",
+        headers: {"X-Requested-With": "XMLHttpRequest"},
+      })
+      const data = await response.json()
+
+      if (data.last_article) { btn.hide() }
+
+      searchResultWrapper.innerHTML = data.html
+      btn.setAttribute('data-months', parseInt(btn.getAttribute('data-months')) + 1)
+    }
+  </script>
 {% endblock content %}