Optimize <select name="tz"> initialization

static/js/add-check-modal.js

@@ -1,7 +1,6 @@
 $(function () {
     var base = document.getElementById("base-url").getAttribute("href").slice(0, -1);
     var modal = $("#add-check-modal");
-    var timezones = document.getElementById("all-timezones").textContent;
     var period = document.getElementById("add-check-period");
     var periodUnit = document.getElementById("add-check-period-unit");
     var scheduleField = document.getElementById("add-check-schedule");
@@ -24,13 +23,6 @@ $(function () {
         options: $("#my-checks-tags div").map(divToOption).get()
     });
 
-    $("#add-check-tz").selectize({
-        labelField: "value",
-        searchField: ["value"],
-        options: timezones.split(",").map(tz => {return {value: tz}})
-    });
-
-
     function updateScheduleExtras() {
         var kind = $('#add-check-modal input[name=kind]:checked').val();
         modal.removeClass("cron").removeClass("simple").addClass(kind);
@@ -46,6 +38,7 @@ $(function () {
     modal.on("shown.bs.modal", function() {
         updateScheduleExtras();
         validateSchedule();
+        $("#add-check-tz")[0].selectize.setValue("UTC", true);
         $("#add-check-name").focus();
     });
 

static/js/initialize-timezone-selects.js

@@ -0,0 +1,8 @@
+$(function() {
+    var timezones = document.getElementById("all-timezones").textContent;
+    $("select[name=tz]").selectize({
+        labelField: "value",
+        searchField: ["value"],
+        options: timezones.split(",").map(tz => ({value: tz}))
+    });
+});

static/js/update-timeout-modal.js

@@ -34,7 +34,7 @@ $(function () {
         currentPreviewHash = "";
         $("#cron-preview").html("<p>Updating...</p>");
         $("#schedule").val(this.dataset.schedule);
-        $("#tz").selectpicker("val", this.dataset.tz);
+        $("#tz")[0].selectize.setValue(this.dataset.tz, true);
         var minutes = parseInt(this.dataset.grace / 60);
         $("#update-timeout-grace-cron").val(minutes);
         updateCronPreview();

templates/front/add_check_modal.html

@@ -108,9 +108,7 @@
                             Time Zone
                         </label>
                         <div class="col-sm-9">
-                            <select id="add-check-tz" name="tz" class="form-control">
-                                <option>UTC</option>
-                            </select>
+                            <select id="add-check-tz" name="tz" class="form-control"></select>
                         </div>
                     </div>
 
@@ -145,5 +143,3 @@
         </form>
     </div>
 </div>
-
-<script id="all-timezones" type="data">{{ timezones|join:"," }}</script>

templates/front/details.html

@@ -350,6 +350,7 @@
 {% endblock %}
 
 {% block scripts %}
+<script id="all-timezones" type="data">UTC,{{ timezones|join:"," }}</script>
 {% compress js %}
 <script src="{% static 'js/jquery-3.6.0.min.js' %}"></script>
 <script src="{% static 'js/bootstrap.min.js' %}"></script>
@@ -365,5 +366,6 @@
 <script src="{% static 'js/adaptive-setinterval.js' %}"></script>
 <script src="{% static 'js/ping_details.js' %}"></script>
 <script src="{% static 'js/details.js' %}"></script>
+<script src="{% static 'js/initialize-timezone-selects.js' %}"></script>
 {% endcompress %}
 {% endblock %}

templates/front/my_checks.html

@@ -91,6 +91,7 @@
 {% endblock %}
 
 {% block scripts %}
+<script id="all-timezones" type="data">UTC,{{ timezones|join:"," }}</script>
 {% compress js %}
 <script src="{% static 'js/jquery-3.6.0.min.js' %}"></script>
 <script src="{% static 'js/bootstrap.min.js' %}"></script>
@@ -104,5 +105,6 @@
 <script src="{% static 'js/ping_details.js' %}"></script>
 <script src="{% static 'js/checks.js' %}"></script>
 <script src="{% static 'js/add-check-modal.js' %}"></script>
+<script src="{% static 'js/initialize-timezone-selects.js' %}"></script>
 {% endcompress %}
 {% endblock %}

templates/front/update_timeout_modal.html

@@ -86,15 +86,7 @@
                             <div class="form-group">
                                 <label for="tz">Server's Time Zone</label>
                                 <br />
-                                <select
-                                    id="tz"
-                                    name="tz"
-                                    class="selectpicker form-control"
-                                    data-live-search="true">
-                                    <option>UTC</option>
-                                    {% for tz in timezones %}
-                                    <option>{{ tz }}</option>{% endfor %}
-                                </select>
+                                <select id="tz" name="tz" class="form-control"></select>
                             </div>
                         </div>
                         <div class="col-md-4">