Add cron expression tester and samples in the cron cheatsheet page

CHANGELOG.md

@@ -14,6 +14,7 @@ All notable changes to this project will be documented in this file.
 - Upgrade to Django 4.2
 - Add email fallback for Signal notifications that hit rate limit
 - Make warnings about no backup second factor more assertive
+- Add cron expression tester and sample expressions in the cron cheatsheet page
 
 ### Bug Fixes
 - Fix notification query in the Log page

hc/front/views.py

@@ -460,7 +460,7 @@ def docs_search(request):
 
 
 def docs_cron(request):
-    return render(request, "front/docs_cron.html", {})
+    return render(request, "front/docs_cron.html", {"page": "docs-cron"})
 
 
 @require_POST

static/css/docs_cron.css

@@ -1,4 +1,12 @@
+.page-docs-cron h1 {
+    font-size: 24px;
+    font-weight: bold;
+}
 
+.page-docs-cron h2 {
+    margin-top: 32px;
+    font-weight: bold;
+}
 
 .cron-example th {
     background: var(--cheatsheet-example-bg);
@@ -51,4 +59,20 @@
 
 .cron-example td.minor {
     color: var(--text-muted);
+}
+
+.page-docs-cron #test-area {
+    max-width: 920px;
+}
+
+.page-docs-cron #cron-preview {
+    margin-top: 20px;
+}
+
+#common-cron-expressions td:nth-child(2) {
+    font-family: monospace;
+}
+
+#common-cron-expressions td:last-child {
+    text-align: right;
 }

static/js/docs_cron.js

@@ -0,0 +1,41 @@
+$(function () {
+    var base = document.getElementById("base-url").getAttribute("href").slice(0, -1);
+    var tz = Intl.DateTimeFormat().resolvedOptions().timeZone;
+
+    var currentPreviewHash = "";
+    function updateCronPreview() {
+        var schedule = $("#schedule").val();
+
+        // Don't try preview with empty values, or if values have not changed
+        if (!schedule || schedule == currentPreviewHash)
+            return;
+
+        // OK, we're good
+        currentPreviewHash = schedule;
+        $("#cron-preview-title").text("Updating...");
+
+        var token = $('input[name=csrfmiddlewaretoken]').val();
+        $.ajax({
+            url: base + "/checks/cron_preview/",
+            type: "post",
+            headers: {"X-CSRFToken": token},
+            data: {schedule: schedule, tz: tz},
+            success: function(data) {
+                if (schedule != currentPreviewHash) {
+                    return;  // ignore stale results
+                }
+
+                $("#cron-preview" ).html(data);
+            }
+        });
+    }
+
+    $("#common-cron-expressions button").click(function() {
+        var schedule = $(this).closest("tr").find("td:nth-child(2n)").text();
+        $("#schedule").val(schedule);
+        updateCronPreview();
+    });
+
+    $("#schedule").on("keyup", updateCronPreview);
+    updateCronPreview();
+});

templates/front/docs_cron.html

@@ -1,5 +1,5 @@
 {% extends "base.html" %}
-{% load hc_extras %}
+{% load compress hc_extras static %}
 
 {% block title %}Cron Expression Syntax Cheatsheet - {{ site_name }}{% endblock %}
 
@@ -30,7 +30,6 @@
 <br />
 
 <div id="cron-examples">
-
     <div class="panel panel-default">
         <div class="panel-heading">
             <h3 class="panel-title">Basics</h3>
@@ -470,9 +469,104 @@
             <pre>cat /etc/timezone</pre>
         </div>
     </div>
-
-
-
 </div> <!-- cron examples -->
 
+<div id="test-area">
+    <h2>Test Any Cron Expression</h2>
+
+    <input
+        id="schedule"
+        class="form-control"
+        type="text"
+        name=""
+        value="0 9,12,18 * * *"
+        autocomplete="off" />
+    {% csrf_token %}
+
+
+    <div id="cron-preview"></div>
+
+    <h2>Common Cron Expressions</h2>
+
+    <table id="common-cron-expressions" class="table">
+        <tr>
+            <td>Every minute</td>
+            <td>* * * * *</td>
+            <td><button class="btn btn-default">Test</button></td>
+        </tr>
+        <tr>
+            <td>Every 5 minutes</td>
+            <td>*/5 * * * *</td>
+            <td><button class="btn btn-default">Test</button></td>
+        </tr>
+        <tr>
+            <td>Every 15 minutes</td>
+            <td>*/15 * * * *</td>
+            <td><button class="btn btn-default">Test</button></td>
+        </tr>
+        <tr>
+            <td>Every 30 minutes</td>
+            <td>*/30 * * * *</td>
+            <td><button class="btn btn-default">Test</button></td>
+        </tr>
+        <tr>
+            <td>Every hour</td>
+            <td>0 * * * *</td>
+            <td><button class="btn btn-default">Test</button></td>
+        </tr>
+        <tr>
+            <td>At 30 minutes past every hour</td>
+            <td>30 * * * *</td>
+            <td><button class="btn btn-default">Test</button></td>
+        </tr>
+        <tr>
+            <td>Every 2 hours</td>
+            <td>0 */2 * * *</td>
+            <td><button class="btn btn-default">Test</button></td>
+        </tr>
+        <tr>
+            <td>Every 3 hours</td>
+            <td>0 */3 * * *</td>
+            <td><button class="btn btn-default">Test</button></td>
+        </tr>
+        <tr>
+            <td>Every 6 hours</td>
+            <td>0 */6 * * *</td>
+            <td><button class="btn btn-default">Test</button></td>
+        </tr>
+        <tr>
+            <td>At 3AM every day</td>
+            <td>0 3 * * *</td>
+            <td><button class="btn btn-default">Test</button></td>
+        </tr>
+        <tr>
+            <td>At 3AM every Monday</td>
+            <td>0 3 * * MON</td>
+            <td><button class="btn btn-default">Test</button></td>
+        </tr>
+        <tr>
+            <td>At 8AM, only on workdays</td>
+            <td>0 8 * * 1-5</td>
+            <td><button class="btn btn-default">Test</button></td>
+        </tr>
+        <tr>
+            <td>At the midnight of the first day of every month</td>
+            <td>0 0 1 * *</td>
+            <td><button class="btn btn-default">Test</button></td>
+        </tr>
+        <tr>
+            <td>At the start of every third month</td>
+            <td>0 0 1 */3 *</td>
+            <td><button class="btn btn-default">Test</button></td>
+        </tr>
+
+    </table>
+</div>
+
 {% endblock %}
+
+{% block scripts %}
+{% compress js %}
+<script src="{% static 'js/docs_cron.js' %}"></script>
+{% endcompress %}
+{% endblock %}