Change "Settings - Email Reports" page to allow manual tz selection

CHANGELOG.md

@@ -14,6 +14,7 @@ All notable changes to this project will be documented in this file.
 - Add ntfy integration (#728)
 - Add ".txt" suffix to the filename when downloading ping body (#738)
 - Add API support for fetching ping bodies (#737)
+- Change "Settings - Email Reports" page to allow manual timezone selection
 
 ### Bug Fixes
 - Fix the most recent ping lookup in the "Ping Details" dialog

hc/accounts/views.py

@@ -29,6 +29,7 @@ from hc.accounts import forms
 from hc.accounts.decorators import require_sudo_mode
 from hc.accounts.models import Credential, Member, Profile, Project
 from hc.api.models import Channel, Check, TokenBucket
+from hc.lib.tz import all_timezones
 from hc.lib.webauthn import CreateHelper, GetHelper
 from hc.payments.models import Subscription
 
@@ -505,7 +506,12 @@ def project(request, code):
 def notifications(request):
     profile = request.profile
 
-    ctx = {"status": "default", "page": "profile", "profile": profile}
+    ctx = {
+        "status": "default",
+        "page": "profile",
+        "profile": profile,
+        "timezones": all_timezones,
+    }
 
     if request.method == "POST":
         form = forms.ReportSettingsForm(request.POST)

static/js/notifications.js

@@ -1,3 +1,3 @@
 $(function () {
-    $("#tz").val(Intl.DateTimeFormat().resolvedOptions().timeZone);
+    $("select[name=tz]").selectize();
 });

templates/accounts/notifications.html

@@ -32,8 +32,6 @@
                     {% csrf_token %}
                     <h2>Email Reports</h2>
 
-                    <input id="tz" type="hidden" name="tz" value="{{ profile.tz }}" />
-
                     <p>Periodic email reports:</p>
                     <label class="radio-container">
                         <input
@@ -94,16 +92,29 @@
                         Remind me <strong>hourly</strong>
                     </label>
 
+                    <br />
+                    <p>Time zone:</p>
+                    <select id="tz" name="tz" class="form-control" value="{{ profile.tz }}">
+                        <option{% if profile.tz == "UTC" %} selected{% endif %}>UTC</option>
+                        {% for tz in timezones %}
+                        <option{% if profile.tz == tz %} selected{% endif %}>{{ tz }}</option>
+                        {% endfor %}
+                    </select>
+
                     <br />
                     <p class="text-muted">
-                        Reports will be delivered to {{ profile.user.email }}. <br />
-                        {% if profile.next_report_date %}
+                        {% site_name %} will send reports to
+                        <strong>{{ profile.user.email }}</strong>,
+                        between 9:00 and 11:00 in your selected time zone.
+                    </p>
+                    {% if profile.next_report_date %}
+                    <p class="text-muted">
                         {% timezone profile.tz %}
                             Next {{ profile.reports }} report date is
                             {{ profile.next_report_date|date:"F j, Y" }}.
-                        {% endtimezone %}
-                        {% endif %}
+                        {% endtimezone 0%}
                     </p>
+                    {% endif %}
                     <br />
                     <button
                         type="submit"
@@ -124,6 +135,7 @@
 {% compress js %}
 <script src="{% static 'js/jquery-3.6.0.min.js' %}"></script>
 <script src="{% static 'js/bootstrap.min.js' %}"></script>
+<script src="{% static 'js/selectize.min.js' %}"></script>
 <script src="{% static 'js/notifications.js' %}"></script>
 {% endcompress %}
 {% endblock %}