WIP: Add search to programs list

bower.json

@@ -1,9 +1,9 @@
 {
   "name": "dependencies",
   "dependencies": {
-    "jquery": "2.2.1",
-    "jqueryui": "1.11.4",
-    "bootstrap": "3.3.6",
+    "jquery": "3.7.1",
+    "jqueryui": "1.12.1",
+    "bootstrap": "4.6.2",
     "fullcalendar": "2.8.0"
   }
 }

radioco/apps/programmes/templates/programmes/episode_detail.html

@@ -8,16 +8,16 @@
 
 {% block page_title %}{{ episode }}{% endblock %}
 
-{% block programmes_class %}class="active"{% endblock %}
+{% block programmes_class %}active{% endblock %}
 
 {% block content %}
     <div class="container mb">
         <div class="row">
-            <div class="col-lg-10 col-lg-offset-1 centered">
+            <div class="col-lg-10 offset-lg-1 centered">
                 <img class="center-block img-responsive" src="{{ programme.photo.url }}" alt="...">
             </div>
 
-            <div class="col-lg-5 col-lg-offset-1 spacing">
+            <div class="col-lg-5 offset-lg-1 spacing">
                 <h4>{{ episode|title }}</h4>
 
                 <p>{% firstof episode.summary|safe episode.programme.synopsis|safe '' %}</p>
@@ -41,7 +41,7 @@ <h4>{% trans "Podcast" %}</h4>
                 </p>
             </div>
 
-            <div class="col-lg-4 col-lg-offset-1 spacing">
+            <div class="col-lg-4 offset-lg-1 spacing">
                 <h4>{% trans 'Programme Details' %}</h4>
                 <div class="hline"></div>
                 <p>
@@ -72,7 +72,7 @@ <h4>{% trans 'Programme Details' %}</h4>
         <! --/row -->
         {% if settings.DISQUS_ENABLE %}
             <div class="row">
-                <div class="col-lg-10 col-lg-offset-1 centered">
+                <div class="col-lg-10 offset-lg-1 centered">
                     {% set_disqus_identifier programme.id|stringformat:"i" %}
                     {% set_disqus_title programme.name %}
                     {% set_disqus_url episode.get_absolute_url %}

radioco/apps/programmes/templates/programmes/programme_detail.html

@@ -8,21 +8,21 @@
 
 {% block page_title %}{{ programme.name }}{% endblock %}
 
-{% block programmes_class %}class="active"{% endblock %}
+{% block programmes_class %}active{% endblock %}
 
 {% block content %}
     <div class="container mb">
         <div class="row">
-            <div class="col-lg-10 col-lg-offset-1 centered">
+            <div class="col-lg-10 offset-lg-1 centered">
                 <img class="center-block img-responsive" src="{{ programme.photo.url }}" alt="...">
             </div>
 
-            <div class="col-lg-5 col-lg-offset-1 spacing">
+            <div class="col-lg-5 offset-lg-1 spacing">
                 <h4>{{ programme.name }}</h4>
                 <p>{{ programme.synopsis|safe }}</p>
             </div>
 
-            <div class="col-lg-4 col-lg-offset-1 spacing">
+            <div class="col-lg-4 offset-lg-1 spacing">
                 <h4>{% trans 'Programme Details' %}</h4>
                 <div class="hline"></div>
                 <p><b>Language:</b> {{ language }}</p>
@@ -38,7 +38,7 @@ <h4>{% trans 'Programme Details' %}</h4>
         </div>
         {% if settings.DISQUS_ENABLE %}
             <div class="row mhb">
-                <div class="col-lg-10 col-lg-offset-1 centered">
+                <div class="col-lg-10 offset-lg-1 centered">
                     {% set_disqus_identifier programme.id|stringformat:"i" %}
                     {% set_disqus_title programme.name %}
                     {% set_disqus_url programme.get_absolute_url %}

radioco/apps/programmes/templates/programmes/programme_list.html

@@ -1,12 +1,65 @@
 {% extends "radioco/base.html" %}
 {% load staticfiles i18n fb_versions %}
-
+{% load i18n %}
 
 {% block page_title %}{% trans "Programme list" %}{% endblock %}
 
-{% block programmes_class %}class="active"{% endblock %}
+{% block programmes_class %}active{% endblock %}
 
 {% block content %}
+    <div class="container mb">
+
+        <div class="mb">
+            <form method="post">
+                {% csrf_token %}
+                <div class="input-group mb-3">
+                    <input
+                        name="name"
+                        type="text"
+                        class="form-control col-md-6 mr-4"
+                        placeholder="{% trans 'Type to search' %}"
+                        aria-label="Search"
+                        value="{{ name }}"
+                    />
+                    <select
+                        name="category"
+                        class="custom-select col-md-3 mr-4"
+                        value="{{ category }}"
+                    >
+                        <option value>{% trans 'Select a category...' %}</option>
+                        {% for opt in categories %}
+                            {% if category == "{{ opt.0 }}" %}
+                                <option selected value="{{ opt.0 }}">{{ opt.0 }}</option>
+                            {% else %}
+                                <option value="{{ opt.0 }}">{{ opt.0 }}</option>
+                            {% endif %}
+                        {% endfor %}
+                    </select>
+                    <div class="custom-control custom-switch mr-3" style="margin: auto;">
+                        {% if isActiveParam == "on" %}
+                            <input
+                                name="isActiveParam"
+                                type="checkbox"
+                                class="custom-control-input"
+                                id="isActiveSwitch"
+                                checked
+                            />
+                        {% else %}
+                            <input
+                                name="isActiveParam"
+                                type="checkbox"
+                                class="custom-control-input"
+                                id="isActiveSwitch"
+                            />
+                        {% endif %}
+                        <label class="custom-control-label" for="isActiveSwitch">{% trans 'Active programmes' %}</label>
+                    </div>
+                    <button type="submit" class="btn btn-primary">Search</button>
+                </div>
+            </form>
+        </div>
+    </div>
+
     {% for programme in programme_list %}
         <div class="container mb">
             <div class="row">

radioco/apps/programmes/urls.py

@@ -31,6 +31,7 @@
         ),
         name='list'
     ),
+    url(r'^search/$', views.programme_search, name='search'),
     url(r'^(?P<slug>[-\w]+)/$', views.programme_detail, name='detail'),
     url(
         r'^(?P<slug>[-\w]+)/(?P<season_number>\d+)x(?P<episode_number>\d+)/$',

radioco/apps/programmes/views.py

@@ -16,13 +16,55 @@
 
 
 import datetime
+from django.db.models import Q
 
 from django.shortcuts import render, get_object_or_404
 from django.utils import timezone
 
 from radioco.apps.programmes.models import Episode, Programme, Role, Participant
 
 
+def get_filtered_programmes(name, category, isActiveParam):
+    isActive = True if isActiveParam == 'on' else False
+    today = timezone.now()
+
+    if (isActive):
+        filterParam = (Q(end_date=None) | Q(end_date__gte=today)) & Q(name__icontains=name) & Q(category__icontains=category)
+    else:
+        filterParam = Q(end_date__lt=today) & Q(name__icontains=name) & Q(category__icontains=category)
+
+    filteredPrograms = Programme.objects.order_by('name').filter(filterParam)
+    return filteredPrograms
+
+
+def programme_search(request):
+    if request.method == 'POST':
+        name = request.POST.get('name', '')
+        category = request.POST.get('category', '')
+        isActiveParam = request.POST.get('isActiveParam', 'off')
+
+        context = {
+            'programme_list': get_filtered_programmes(name, category, isActiveParam),
+            'name': name,
+            'category': category,
+            'isActiveParam': isActiveParam,
+            'categories': Programme.CATEGORY_CHOICES,
+        }
+    else:
+        name = request.GET.get('name', '')
+        category = request.GET.get('category', '')
+        isActiveParam = request.GET.get('isActiveParam', 'on')
+
+        context = {
+            'programme_list': get_filtered_programmes(name, category, isActiveParam),
+            'name': name,
+            'category': category,
+            'isActiveParam': isActiveParam,
+            'categories': Programme.CATEGORY_CHOICES,
+        }
+    return render(request, 'programmes/programme_list.html', context)
+
+
 def programme_detail(request, slug):
     programme = get_object_or_404(Programme, slug=slug)
     context = {

radioco/apps/radioco/static/radioco/css/calendar.css

@@ -1,4 +1,4 @@
-#col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main {
+#col-sm-9 offset-sm-3 col-md-10 offset-md-2 main {
 	margin-top: 40px;
 	text-align: center;
 	font-size: 14px;

radioco/apps/radioco/static/radioco/css/style.css

@@ -96,34 +96,34 @@ a:focus {
 	font-weight: 900;
 }
 
-.navbar-header .navbar-brand {
+.navbar-light .navbar-brand {
 	color: white;
 }
 
-.navbar-default .navbar-nav > li > a {
+.navbar-light .navbar-nav .nav-link {
 	color: white;
 	font-weight: 700;
 	font-size: 12px;
 }
 
-.navbar-default .navbar-nav > .separator {
+.navbar-light .navbar-nav > .separator {
 	color: white;
 	font-weight: 700;
 	font-size: 12px;
     padding-top: 14px;
 	line-height: 20px;
 }
 
-.navbar-default .navbar-nav > li > a:hover {
+.navbar-light .navbar-nav .nav-link:hover {
 	color: #00b3fe;
 }
 
-.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
+.navbar-light .navbar-nav > .active > .nav-link, .navbar-light .navbar-nav > .active > .nav-link:hover, .navbar-light .navbar-nav > .active > .nav-link:focus {
 	color: #00b3fe;
 	background-color: transparent;
 }
 
-.navbar-default {
+.navbar-light {
 	background-color: #384452;
 	border-color: transparent;
 }

radioco/apps/radioco/templates/radioco/base.html

@@ -44,40 +44,35 @@
 <body>
 {% block intro %} {% endblock %}
 
-<div class="navbar navbar-default navbar-fixed-top" role="navigation">
+<nav class="navbar navbar-expand-lg navbar-light fixed-top" role="navigation">
     <div class="container">
-        <div class="navbar-header">
-            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
-                <span class="sr-only">Toggle Navigation</span>
-                <span class="icon-bar"></span>
-                <span class="icon-bar"></span>
-                <span class="icon-bar"></span>
-            </button>
-            <a class="navbar-brand" href="{% url 'home' %}">{{ site_config.site_name }}</a>
-        </div>
-
-        <div class="navbar-collapse collapse navbar-right">
-            <ul class="nav navbar-nav">
-                <li {% block index_class %}{% endblock %}>
-                    <a href="{% url 'home' %}">{% trans "home"|title %}</a>
+        <a class="navbar-brand" href="{% url 'home' %}">{{ site_config.site_name }}</a>
+        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+
+        <div class="collapse navbar-collapse" id="navbarNav">
+            <ul class="navbar-nav ml-auto">
+                <li class="nav-item {% block index_class %}{% endblock %}">
+                    <a class="nav-link" href="{% url 'home' %}">{% trans "home"|title %}</a>
                 </li>
-                <li {% block schedules_class %}{% endblock %}>
-                    <a href="{% url 'schedules:list' %}">{% trans "schedules"|title %}</a>
+                <li class="nav-item {% block schedules_class %}{% endblock %}">
+                    <a class="nav-link" href="{% url 'schedules:list' %}">{% trans "schedules"|title %}</a>
                 </li>
-                <li {% block programmes_class %}{% endblock %}>
-                    <a href="{% url 'programmes:list' %}">{% trans "programmes"|title %}</a>
+                <li class="nav-item {% block programmes_class %}{% endblock %}">
+                    <a class="nav-link" href="{% url 'programmes:list' %}">{% trans "programmes"|title %}</a>
                 </li>
-                <li {% block users_class %}{% endblock %}>
-                    <a href="{% url 'users:list' %}">{% trans "people"|title %}</a>
+                <li class="nav-item {% block users_class %}{% endblock %}">
+                    <a class="nav-link" href="{% url 'users:list' %}">{% trans "people"|title %}</a>
                 </li>
                 <li class="separator"></li>
-                <li>
-                    <a href="{% url 'admin:index' %}">{% trans "admin area"|title %}</a>
+                <li class="nav-item">
+                    <a class="nav-link" href="{% url 'admin:index' %}">{% trans "admin area"|title %}</a>
                 </li>
             </ul>
         </div>
     </div>
-</div>
+</nav>
 
 {% block page_title_wrapper %}
     <div id="blue">

radioco/apps/radioco/templates/radioco/index.html

@@ -17,7 +17,7 @@
         <div class="container">
             <div class="row">
                 {% if transmission %}
-                    <div class="col-lg-8 col-lg-offset-2">
+                    <div class="col-lg-8 offset-lg-2">
                         <h1>{% trans "On air"|upper %}</h1>
                         <h3>
                             <a href="{% url 'programmes:detail' transmission.slug %}">
@@ -36,13 +36,13 @@ <h5>
                             </div>
                         </div>
                     </div>
-                    <div class="col-lg-8 col-lg-offset-2 himg">
+                    <div class="col-lg-8 offset-lg-2 himg">
                         <a href="{% url 'programmes:detail' transmission.slug %}">
                             <img src="{{ transmission.programme.photo.url }}" class="img-responsive img-thumbnail">
                         </a>
                     </div>
                 {% else %}
-                    <div class="col-lg-8 col-lg-offset-2">
+                    <div class="col-lg-8 offset-lg-2">
                         <h3>{% trans 'There are currently no programmes on air' %}</h3>
                         <h1>{% trans 'Check all our programmes' %}</h1>
                         <h5><a href="{% url 'programmes:list' %}" class="btn btn-theme">{% trans 'See all' %}</a></h5>
@@ -140,12 +140,12 @@ <h5 class="a1" data-animate="fadeInUp">{{ programme.get_category_display }}</h5>
 
     <div class="container mtb">
         <div class="row">
-            <div class="col-lg-4 col-lg-offset-1">
+            <div class="col-lg-4 offset-lg-1">
                 <h4>{% trans 'More About Us.' %}</h4>
                 <p> {{ site_config.more_about_us }}</p>
             </div>
 
-            <div class="col-lg-4 col-lg-offset-1">
+            <div class="col-lg-4 offset-lg-1">
                 <h4>{% trans 'Latest Episodes' %}</h4>
                 <div class="hline"></div>
                 {% for episode in latest_episodes %}

radioco/apps/schedules/templates/schedules/schedules_list.html

@@ -7,7 +7,7 @@
     <link rel="stylesheet" href="{% static "radioco/css/calendar.css" %}" type="text/css"/>
 {% endblock %}
 
-{% block schedules_class %}class="active"{% endblock %}
+{% block schedules_class %}active{% endblock %}
 
 {% block page_title %}{% trans "Schedule" %}{% endblock %}