Clean up timezone selector behavior and add back to agenda RH panel

ietf/static/js/timezone.js

@@ -1,5 +1,5 @@
-        // Copyright The IETF Trust 2021, All Rights Reserved
-
+// Copyright The IETF Trust 2021, All Rights Reserved
+/* global moment */
 /*
  Timezone selection handling. Relies on the moment.js library.
 
@@ -8,21 +8,16 @@
  names. Time zone can be changed via the select input or by calling the use() method with
  the name of a time zone (or 'local' to guess the user's local timezone).
  */
-window.ietf_timezone; // public interface
-
 (function () {
     'use strict';
     // Callback for timezone change - called after current_timezone is updated
-    var timezone_change_callback;
-    var current_timezone;
+    let timezone_change_callback;
+    let current_timezone;
+    let tz_radios;
+    let tz_selects;
 
     // Select timezone to use. Arg is name of a timezone or 'local' to guess local tz.
     function use_timezone(newtz) {
-        // Guess local timezone if necessary
-        if (newtz.toLowerCase() === 'local') {
-            newtz = moment.tz.guess();
-        }
-
         if (current_timezone !== newtz) {
             current_timezone = newtz;
             // Update values of tz-select inputs but do not trigger change event
@@ -31,40 +26,52 @@ window.ietf_timezone; // public interface
             if (timezone_change_callback) {
                 timezone_change_callback(newtz);
             }
+            tz_radios.filter(`[value="${newtz}"]`).prop('checked', true);
+            tz_radios.filter(`[value!="${newtz}"]`).prop('checked', false);
+            tz_selects.val(newtz);
+            tz_selects.trigger('change.select2'); // notify only select2 of change to avoid change event storm
         }
     }
 
+    function handle_change_event(evt) {
+        const newtz = evt.target.value;
+        use_timezone(newtz); // use the requested timezone
+    }
+
     /* Initialize timezone system
      *
      * This will set the timezone to the value of 'current'. Set up the tz_change callback
      * before initializing.
      */
     function timezone_init(current) {
         var tz_names = moment.tz.names();
-        var select = $('select.tz-select');
-
-        select.empty();
+        if (current === 'local') {
+            current = moment.tz.guess();
+        }
+        tz_selects = $('select.tz-select');
+        tz_selects.empty();
         $.each(tz_names, function (i, item) {
-            select.append($('<option/>', {
+            tz_selects.append($('<option/>', {
                 selected: current === item,
                 html: item,
                 value: item
             }));
         });
-        select.on("change", function () {
-            use_timezone(this.value);
-        });
+        tz_radios = $('input.tz-select[type="radio"]');
+        tz_radios.filter('[value="local"]').prop('value', moment.tz.guess());
+        tz_radios.on('change', handle_change_event);
+        tz_selects.on('change', handle_change_event);
         /* When navigating back/forward, the browser may change the select input's
          * value after the window load event. It does not fire the change event on
          * the input when it does this. The pageshow event occurs after such an update,
          * so trigger the change event ourselves to be sure the UI stays consistent
          * with the timezone select input. */
-        window.addEventListener('pageshow', function () { select.trigger("change"); });
+        window.addEventListener('pageshow', function () { tz_selects.trigger("change"); });
         use_timezone(current);
     }
 
     // Expose public interface
-    ietf_timezone = {
+    window.ietf_timezone = {
         get_current_tz: function () { return current_timezone; },
         initialize: timezone_init,
         set_tz_change_callback: function (cb) { timezone_change_callback = cb; },

ietf/templates/meeting/agenda.html

@@ -25,7 +25,17 @@
     {% endif %}
     {# the contents of #extra-nav will be moved into the RH nav panel #}
     <div id="extra-nav" class="d-none">
-        <a class="nav-link now-link" href="#">Current session</a>
+        <div class="d-flex flex-column">
+          {% if now.date <= schedule.meeting.end_date %}
+              <a class="nav-link now-link" href="#">Current session</a>
+          {% endif %}
+          <div class="px-3">
+            Showing <span class="current-tz">{{ timezone }}</span> time
+          </div>
+          <div class="px-3 w-100">
+            {% include 'meeting/tz-display.html' with id_suffix="-rh" meeting_timezone=timezone minimal=True only %}
+          </div>
+        </div>
     </div>
     {# cache this part -- it takes 3-6 seconds to generate #}
     {% load cache %}
@@ -47,7 +57,7 @@ <h2>
             {{ schedule.meeting.agenda_info_note|removetags:"h1"|safe }}
         </p>
     {% endif %}
-    {% include 'meeting/tz-display.html' with id_suffix="" timezone=timezone %}
+    {% include 'meeting/tz-display.html' with meeting_timezone=timezone only %}
     {% include "meeting/agenda_filter.html" with filter_categories=filter_categories customize_button_text="Personalize the agenda view..." always_show=personalize %}
     {% include "meeting/agenda_personalize_buttonlist.html" with meeting=schedule.meeting only %}
     <div class="input-group mb-3">
@@ -311,8 +321,7 @@ <h2 class="mt-3">
 {% endcache %}
 {% endblock %}
 {% block js %}
-    <script src="{% static 'ietf/js/agenda_filter.js' %}">
-    </script>
+    <script src="{% static 'ietf/js/agenda_filter.js' %}"></script>
     <script>
         // Update the agenda display with specified filters
         function update_agenda_display(filter_params) {

ietf/templates/meeting/tz-display.html

@@ -1,35 +1,47 @@
+{% comment %}
+Include this to display a timezone select widget. Must also include timezone.js as a script.
+  {% import "meeting/tz-display.html" with meeting_timezone="America/Halifax" id_suffix="" minimal=False only %}
+
+Must provide the meeting_timezone option, which is the timezone to be used when the "Meeting" radio is
+selected. If id_suffix is given, it is appended to the element IDs and radio input names to differentiate
+multiple instances of the widget. If minimal is True, only the Meeting/Local/UTC radios are shown and no
+arbitrary timezone select input is included in the widget.
+
+As long as id_suffix is different, should allow for as many copies of the widget on a page as you'd like.
+{% endcomment %}
 {% load origin %}
 {% origin %}
-<div class="tz-display input-group my-3">
-    <label class="input-group-text border-primary bg-white fw-bold">Time zone:</label>
+{% firstof id_suffix "" as suffix %}
+<div class="tz-display {% if minimal %}btn-group{% else %}input-group{% endif %} my-3">
+    {% if not minimal %}<label class="input-group-text border-primary bg-white fw-bold">Time zone:</label>{% endif %}
+    {% if meeting_timezone is not None %}
+        <input type="radio"
+               name="tzradio{{ suffix }}"
+               class="btn-check tz-select"
+               id="meeting-timezone{{ suffix }}"
+               value="{{ meeting_timezone }}">
+        <label class="btn btn-outline-primary" for="meeting-timezone{{ suffix }}">Meeting</label>
+    {% endif %}
     <input type="radio"
-           {% if timezone == "meeting" %}checked{% endif %}
-           name="tzradio"
-           class="btn-check"
-           id="meeting-timezone{{ id_suffix }}"
-           onclick="ietf_timezone.use('{{ timezone }}')">
-    <label class="btn btn-outline-primary" for="meeting-timezone{{ id_suffix }}">Meeting</label>
+           name="tzradio{{ suffix }}"
+           class="btn-check tz-select"
+           id="local-timezone{{ suffix }}"
+           value="local">
+    <label class="btn btn-outline-primary" for="local-timezone{{ suffix }}">Local</label>
     <input type="radio"
-           {% if timezone == "local" %}checked{% endif %}
-           name="tzradio"
-           class="btn-check"
-           id="local-timezone{{ id_suffix }}"
-           onclick="ietf_timezone.use('local')">
-    <label class="btn btn-outline-primary" for="local-timezone{{ id_suffix }}">Local</label>
-    <input type="radio"
-           {% if timezone == "UTC" %}checked{% endif %}
-           name="tzradio"
-           class="btn-check"
-           id="utc-timezone{{ id_suffix }}"
-           onclick="ietf_timezone.use('UTC')">
-    <label class="btn btn-outline-primary" for="utc-timezone{{ id_suffix }}">UTC</label>
-    <select id="timezone-select{{ id_suffix }}"
-            class="tz-select select2-field form-select border-primary"
-            data-max-entries="1" data-minimum-input-length="0"
-            onchange="$('.tz-display input[name=tzradio]').prop('checked', false);">
-        {# Avoid blank while loading. JavaScript replaces the option list after init. #}
-        <option selected>
-            {{ timezone }}
-        </option>
-    </select>
-</div>
+           name="tzradio{{ suffix }}"
+           class="btn-check tz-select"
+           id="utc-timezone{{ suffix }}"
+           value="UTC">
+    <label class="btn btn-outline-primary" for="utc-timezone{{ suffix }}">UTC</label>
+    {% if not minimal %}
+        <select id="timezone-select{{ suffix }}"
+                class="tz-select select2-field form-select border-primary"
+                data-max-entries="1" data-minimum-input-length="0">
+            {# Avoid blank while loading. JavaScript replaces the option list after init. #}
+            <option selected>
+                {{ meeting_timezone }}
+            </option>
+        </select>
+    {% endif %}
+</div>

ietf/templates/meeting/upcoming.html

@@ -29,7 +29,7 @@ <h1>Upcoming Meetings</h1>
             {% endfor %}
         </div>
     {% endif %}
-    {% include 'meeting/tz-display.html' with id_suffix="" timezone="local" %}
+    {% include 'meeting/tz-display.html' with meeting_timezone=None only %}
     {% include 'meeting/agenda_filter.html' with filter_categories=filter_categories customize_button_text="Customize the meeting list..." only %}
     {% cache 600 upcoming-meetings entries.count %}
     {% if entries %}
@@ -104,7 +104,7 @@ <h1>Upcoming Meetings</h1>
         <h3 class="my-3">No upcoming meetings</h3>
     {% endif %}
 {% endcache %}
-{% include 'meeting/tz-display.html' with id_suffix="-bottom" timezone="local" %}
+{% include 'meeting/tz-display.html' with id_suffix="-bottom" meeting_timezone=None only %}
 <div id="calendar">
 </div>
 {% endblock %}
@@ -142,8 +142,7 @@ <h3 class="my-3">No upcoming meetings</h3>
                   {% endif %}
                 {% endfor %}];
 
-        $(document)
-            .ready(function () {
+        $(function () {
                 // Init with best guess at local timezone.
                 ietf_timezone.set_tz_change_callback(timezone_changed);
                 ietf_timezone.initialize('local');