[FEATURE] select ajax

elections2021/constants.py

@@ -124,7 +124,6 @@ REGION_CHOICES = [(code, name) for code, slug, name, name2 in REGION_DATA]
 REGION_NAME_VARIANT = {code: name2 for code, slug, name, name2 in REGION_DATA}
 REGION_SLUGS = {slug: code for code, slug, name, name2 in REGION_DATA}
 REGION_OPTIONS = [(slug, name) for code, slug, name, name2 in REGION_DATA]
-REGION_NAMES = [name for code, slug, name, name2 in REGION_DATA]
 
 PIRATES = "pirati"
 STAN = "stan"

main/models.py

@@ -23,7 +23,7 @@ from wagtail.core.fields import RichTextField, StreamField
 from wagtail.core.models import Page
 from wagtailmetadata.models import MetadataPageMixin
 
-from elections2021.constants import REGION_CHOICES, REGION_NAMES  # pozor, import ze sousedního modulu
+from elections2021.constants import REGION_CHOICES  # pozor, import ze sousedního modulu
 from shared.const import RICH_TEXT_DEFAULT_FEATURES
 from shared.forms import SubscribeForm
 from shared.models import (  # MenuMixin,
@@ -163,13 +163,39 @@ class MainHomePage(MenuMixin, ExtendedMetadataHomePageMixin, MetadataPageMixin,
         tweets_page = request.GET.get('page', 1)
         tweet_paginator = Paginator(Tweet.objects.order_by("-twitter_id"), self.max_items)
         context["tweet_list"] = tweet_paginator.get_page(tweets_page)
-        context["regions"] = REGION_NAMES
+        context["regions"] = REGION_CHOICES
+        last_month = timezone.now().today().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
+        ).order_by("-date")
+        context["article_data_list"] = sorted_article_qs[:3]
         return context
 
     def serve(self, request, *args, **kwargs):
 
         if not request.META.get('HTTP_X_REQUESTED_WITH') == 'XMLHttpRequest':
             return super().serve(request, *args, **kwargs)
+        if 'region' in request.GET:
+            last_month = timezone.now().today().replace(day=1) - timedelta(days=1)
+            first_day_of_last_month = last_month.replace(day=1)
+            if request.GET.get('region', None) == 'VSK':
+                sorted_article_qs = MainArticlePage.objects.filter(
+                    date__gt=first_day_of_last_month
+                ).order_by("-date")
+            else:
+                sorted_article_qs = MainArticlePage.objects.filter(
+                    date__gt=first_day_of_last_month, region=request.GET.get('region', None)
+                ).order_by("-date")
+            context = {
+                "article_data_list": sorted_article_qs[:3]
+            }
+            data = {
+                'html': render(request, 'main/includes/small_article_preview.html', context).content.decode("utf-8")
+            }
+            return JsonResponse(data=data, safe=False)
+        else:
             tweet_paginator = Paginator(Tweet.objects.order_by("-twitter_id"), self.max_items)
             tweet_page = tweet_paginator.get_page(request.GET.get('page', 1))
             context = {

main/templates/main/blocks/regions_block.html

@@ -10,23 +10,36 @@
       </div>
       <div class="w-12/12 lg:w-5/12">
         <div class="flex flex-col justify-center">
-          <div class="select">
-            <select class="select__control form-field__control" value="">
-              <option>Všechny kraje</option>
+          <div class="select search-filters">
+            <select class="select__control form-field__control" name="search-type">
+              <option value="VSK">Všechny kraje</option>
               {% for region in regions %}
-                <option>{{ region }}</option>
+                <option value="{{ region.0 }}">{{ region.1 }}</option>
               {% endfor %}
             </select>
           </div>
-
-          {% for article_page in region_article_list %}
-            <div class="mb-3">
-              {% include 'main/includes/small_article_preview.html' %}
+            <div class="mb-3 search-result-wrapper">
+              {% include 'main/includes/small_article_preview.html' with article_data_list=article_data_list %}
             </div>
-          {% endfor %}
         </div>
       </div>
     </div>
     <div></div>
   </div>
 </div>
+<script type="text/javascript">
+    let $searchLinksWrapper = $('.search-filters');
+    let links = $searchLinksWrapper.find('select');
+    $(links).change(function (e) {
+        e.preventDefault();
+        let $resultWrappers = $('.search-result-wrapper');
+        $.ajax({
+            method: "GET",
+            processData: false,
+            contentType: false,
+            url: "{{ page_url }}?region=" + $(this).val(),
+          }).then(function (data) {
+            $resultWrappers.html(data.html);
+          });
+    })
+</script>
\ No newline at end of file

main/templates/main/includes/small_article_preview.html

+{% for article_page in article_data_list  %}
     <div class="flex">
       <img
           src="https://i.picsum.photos/id/523/132/132.jpg?hmac=XjW7KxLZNbta7gMDNvldHNGwA9XyxpjBFUGkJqrMR4o"
@@ -14,3 +15,4 @@
         {% include 'main/includes/button_animated.html' with btn_link=article_page.url btn_text="Číst dále" %}
       </div>
     </div>
+{% endfor %}