When filtering by tags, put the selected tags in the query string. Fixes #191

CHANGELOG.md

@@ -8,6 +8,7 @@ All notable changes to this project will be documented in this file.
 - Added "Docs > Third-Party Resources" page.
 - Improved  layout and styling in "Login" page.
 - Separate "sign Up" and "Log In" forms.
+- "My Checks" page: support filtering checks by query string parameters.
 
 ### Bug Fixes
 - Timezones were missing in the "Change Schedule" dialog, fixed.

hc/front/views.py

@@ -75,6 +75,13 @@ def my_checks(request):
     channels = Channel.objects.filter(user=request.team.user)
     channels = list(channels.order_by("created"))
 
+    hidden_checks = set()
+    selected_tags = set(request.GET.getlist("tag", []))
+    if selected_tags:
+        for check in checks:
+            if not selected_tags.issubset(check.tags_list()):
+                hidden_checks.add(check)
+
     ctx = {
         "page": "checks",
         "checks": checks,
@@ -85,7 +92,9 @@ def my_checks(request):
         "ping_endpoint": settings.PING_ENDPOINT,
         "timezones": all_timezones,
         "num_available": request.team.check_limit - len(checks),
-        "sort": request.profile.sort
+        "sort": request.profile.sort,
+        "selected_tags": selected_tags,
+        "hidden_checks": hidden_checks
     }
 
     return render(request, "front/my_checks.html", ctx)

static/js/checks.js

@@ -66,20 +66,28 @@ $(function () {
 
     // Filtering by tags
     $("#my-checks-tags div").click(function() {
-        // .active has not been updated yet by bootstrap code,
-        // so cannot use it
         $(this).toggleClass('checked');
 
         // Make a list of currently checked tags:
         var checked = [];
+        var qs = [];
         $("#my-checks-tags .checked").each(function(index, el) {
             checked.push(el.textContent);
+            qs.push({"name": "tag", "value": el.textContent});
         });
 
+        // Update hash
+        if (window.history && window.history.replaceState) {
+            var url = "/checks/";
+            if (qs.length) {
+                url += "?" + $.param(qs);
+            }
+            window.history.replaceState({}, "", url);
+        }
+
         // No checked tags: show all
         if (checked.length == 0) {
             $("#checks-table tr.checks-row").show();
-            $("#checks-list > li").show();
             return;
         }
 
@@ -97,11 +105,8 @@ $(function () {
             $(element).show();
         }
 
-        // Desktop: for each row, see if it needs to be shown or hidden
+        // For each row, see if it needs to be shown or hidden
         $("#checks-table tr.checks-row").each(applyFilters);
-        // Mobile: for each list item, see if it needs to be shown or hidden
-        $("#checks-list > li").each(applyFilters);
-
     });
 
     $(".show-log").click(function(e) {

templates/front/my_checks.html

@@ -8,7 +8,7 @@
     {% if tags %}
     <div id="my-checks-tags" class="col-sm-12">
         {% for tag, status in tags %}
-            <div class="btn btn-xs {{ status }}">{{ tag }}</div>
+            <div class="btn btn-xs {{ status }} {% if tag in selected_tags %}checked{% endif%}">{{ tag }}</div>
         {% endfor %}
     </div>
     {% endif %}

templates/front/my_checks_desktop.html

@@ -45,7 +45,8 @@
         id="{{ check.code }}"
         class="checks-row"
         data-url="{{ check.url }}"
-        data-email="{{ check.email }}">
+        data-email="{{ check.email }}"
+        {% if check in hidden_checks %}style="display: none"{% endif %}>
 
         <td class="indicator-cell">
             <span class="status icon-{{ check.get_status }}" data-toggle="tooltip"></span>