Update polyfill for datetime-local

Bloody Firefox. We love to hate you. Proper CSS of the fill to come, SoonTM.

Closes #391

RIGS/hs.py

@@ -124,6 +124,7 @@ class EventChecklistEdit(generic.UpdateView):
         ec = models.EventChecklist.objects.get(pk=pk)
         context['event'] = ec.event
         context['edit'] = True
+        context['page_title'] = 'Edit Event Checklist for Event {}'.format(ec.event.display_id)
         return context
 
 
@@ -144,6 +145,7 @@ class EventChecklistCreate(generic.CreateView):
         epk = self.kwargs.get('pk')
         event = models.Event.objects.get(pk=epk)
         context['event'] = event
+        context['page_title'] = 'Create Event Checklist for Event {}'.format(event.display_id)
         return context
 
     def get_success_url(self):

RIGS/static/js/alert.js

@@ -3,4 +3,4 @@
   * Copyright 2011-2020 The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors)
   * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
   */
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("jquery"),require("./util.js")):"function"==typeof define&&define.amd?define(["jquery","./util.js"],t):(e="undefined"!=typeof globalThis?globalThis:e||self).Alert=t(e.jQuery,e.Util)}(this,(function(e,t){"use strict";function n(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}e=e&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e,t=t&&Object.prototype.hasOwnProperty.call(t,"default")?t.default:t;var r="alert",o=e.fn[r],i=function(){function r(e){this._element=e}var o,i,l,s=r.prototype;return s.close=function(e){var t=this._element;e&&(t=this._getRootElement(e)),this._triggerCloseEvent(t).isDefaultPrevented()||this._removeElement(t)},s.dispose=function(){e.removeData(this._element,"bs.alert"),this._element=null},s._getRootElement=function(n){var r=t.getSelectorFromElement(n),o=!1;return r&&(o=document.querySelector(r)),o||(o=e(n).closest(".alert")[0]),o},s._triggerCloseEvent=function(t){var n=e.Event("close.bs.alert");return e(t).trigger(n),n},s._removeElement=function(n){var r=this;if(e(n).removeClass("show"),e(n).hasClass("fade")){var o=t.getTransitionDurationFromElement(n);e(n).one(t.TRANSITION_END,(function(e){return r._destroyElement(n,e)})).emulateTransitionEnd(o)}else this._destroyElement(n)},s._destroyElement=function(t){e(t).detach().trigger("closed.bs.alert").remove()},r._jQueryInterface=function(t){return this.each((function(){var n=e(this),o=n.data("bs.alert");o||(o=new r(this),n.data("bs.alert",o)),"close"===t&&o[t](this)}))},r._handleDismiss=function(e){return function(t){t&&t.preventDefault(),e.close(this)}},o=r,l=[{key:"VERSION",get:function(){return"4.5.2"}}],(i=null)&&n(o.prototype,i),l&&n(o,l),r}();return e(document).on("click.bs.alert.data-api",'[data-dismiss="alert"]',i._handleDismiss(new i)),e.fn[r]=i._jQueryInterface,e.fn[r].Constructor=i,e.fn[r].noConflict=function(){return e.fn[r]=o,i._jQueryInterface},i}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("jquery"),require("./util.js")):"function"==typeof define&&define.amd?define(["jquery","./util.js"],t):(e="undefined"!=typeof globalThis?globalThis:e||self).Alert=t(e.jQuery,e.Util)}(this,(function(e,t){"use strict";function n(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}e=e&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e,t=t&&Object.prototype.hasOwnProperty.call(t,"default")?t.default:t;var r=e.fn.alert,o=function(){function r(e){this._element=e}var o,l,i,a=r.prototype;return a.close=function(e){var t=this._element;e&&(t=this._getRootElement(e)),this._triggerCloseEvent(t).isDefaultPrevented()||this._removeElement(t)},a.dispose=function(){e.removeData(this._element,"bs.alert"),this._element=null},a._getRootElement=function(n){var r=t.getSelectorFromElement(n),o=!1;return r&&(o=document.querySelector(r)),o||(o=e(n).closest(".alert")[0]),o},a._triggerCloseEvent=function(t){var n=e.Event("close.bs.alert");return e(t).trigger(n),n},a._removeElement=function(n){var r=this;if(e(n).removeClass("show"),e(n).hasClass("fade")){var o=t.getTransitionDurationFromElement(n);e(n).one(t.TRANSITION_END,(function(e){return r._destroyElement(n,e)})).emulateTransitionEnd(o)}else this._destroyElement(n)},a._destroyElement=function(t){e(t).detach().trigger("closed.bs.alert").remove()},r._jQueryInterface=function(t){return this.each((function(){var n=e(this),o=n.data("bs.alert");o||(o=new r(this),n.data("bs.alert",o)),"close"===t&&o[t](this)}))},r._handleDismiss=function(e){return function(t){t&&t.preventDefault(),e.close(this)}},o=r,i=[{key:"VERSION",get:function(){return"4.5.2"}}],(l=null)&&n(o.prototype,l),i&&n(o,i),r}();return e(document).on("click.bs.alert.data-api",'[data-dismiss="alert"]',o._handleDismiss(new o)),e.fn.alert=o._jQueryInterface,e.fn.alert.Constructor=o,e.fn.alert.noConflict=function(){return e.fn.alert=r,o._jQueryInterface},o}));

RIGS/static/js/datetime-fix.js

@@ -0,0 +1 @@
+$(document).ready((function(){var t;(t=document.createElement("input")).setAttribute("type","datetime-local"),("text"===t.type||navigator.userAgent.toLowerCase().indexOf("firefox")>-1)&&($("<link>").appendTo("head").attr({type:"text/css",rel:"stylesheet"}).attr("href",'{% static "css/flatpickr.css" %}'),$.when($.getScript('{% static "js/flatpickr.min.js" %}'),$.Deferred((function(t){$(t.resolve)}))).done((function(){$("input[type=datetime-local]").attr("type","text").flatpickr({dateFormat:"Y-m-dTH:m",enableTime:!0,altInput:!0,altFormat:"d/m/y H:m"})})))}));

RIGS/templates/event_checklist_form.html

@@ -5,8 +5,6 @@
 {% load profile_by_index from filters %}
 {% load button from filters %}
 
-{% block title %}{% if edit %}Edit{% else %}Create{% endif %} Event Checklist for Event N{{ event.pk|stringformat:"05d" }}{% endblock %}
-
 {% block css %}
     {{ block.super }}
     <link rel="stylesheet" href="{% static 'css/bootstrap-select.css' %}"/>
@@ -28,6 +26,8 @@
 
     <script src="{% static 'js/autocompleter.js' %}"></script>
 
+    {% include 'partials/datetime-fix.html' %}
+
     <script>
     $(document).ready(function () {
        {% if not object.pk %}
@@ -75,6 +75,7 @@
             newRow.find('select').addClass('selectpicker');
             newRow.find('.selectpicker').selectpicker('refresh');
             $(".selectpicker").each(function(){initPicker($(this))});
+            initDatetime();
             $(target).attr('data-pk', newID - 1);
         });
         $(document).on('click', 'button[data-action=delete]', function(event) {
@@ -92,7 +93,6 @@
 
 {% block content %}
     <div class="col-12">
-        <h3>{% if edit %}Edit{% else %}Create{% endif %} Event Checklist for Event N{{ event.pk|stringformat:"05d" }}</h3>
         {% include 'form_errors.html' %}
         {% if edit %}
         <form role="form" method="POST" action="{% url 'ec_edit' pk=object.pk %}">

RIGS/templates/event_form.html

@@ -9,6 +9,7 @@
     {{ block.super }}
     <link rel="stylesheet" href="{% static 'css/bootstrap-select.css' %}"/>
     <link rel="stylesheet" href="{% static 'css/ajax-bootstrap-select.css' %}"/>
+    <link rel="stylesheet" href="{% static 'css/flatpickr.css' %}"/>
 {% endblock %}
 
 {% block preload_js %}
@@ -26,6 +27,8 @@
 
     <script src="{% static 'js/autocompleter.js' %}"></script>
 
+    {% include 'partials/datetime-fix.html' %}
+
     <script>
         function setTime23Hours() {
             $('#{{ form.end_time.id_for_label }}').val('23:00');
@@ -45,11 +48,9 @@
 
         $(document).ready(function () {
             {% if not object.pk and not form.errors %}
-
                 $('.form-hws').slideUp(function () {
                     $('.form-is_rig').slideUp();
                 });
-
             {% elif not object.pk and form.errors %}
                 if ($('#{{form.is_rig.auto_id}}').attr('checked') != 'checked') {
                     $('.form-is_rig').hide();
@@ -73,45 +74,7 @@
                     }
                 });
             {% endif %}
-
-            function supportsDate() {
-                //return false; //for development
-                var input = document.createElement('input');
-                input.setAttribute('type','date');
-                var notADateValue = 'not-a-date';
-                input.setAttribute('value', notADateValue);
-                return !(input.value === notADateValue);
-            }
-            if(supportsDate()){
-                //Good, we'll use the browser implementation
-            }else{
-                //Rubbish browser - do JQuery backup
-                $('<link>')
-                  .appendTo('head')
-                  .attr({type : 'text/css', rel : 'stylesheet'})
-                  .attr('href', '{% static "css/bootstrap-datetimepicker.min.css" %}');
-                $.when(
-                    $.getScript( "{% static "js/moment.js" %}" ),
-                    $.getScript( "{% static "js/bootstrap-datetimepicker.js" %}" ),
-                    $.Deferred(function( deferred ){
-                        $( deferred.resolve );
-                    })
-                ).done(function(){
-                    $('input[type=date]').attr('type','text').datetimepicker({
-                        format: 'YYYY-MM-DD',
-                    });
-                    $('input[type=time]').attr('type','text').datetimepicker({
-                        format: 'HH:mm',
-                    });
-                    $('input[type=datetime-local]').attr('type','text').datetimepicker({
-                        format: 'YYYY-MM-DD[T]HH:mm',
-                        sideBySide: true,
-                    });
-                });
-
-            }
         });
-
         $(document).ready(function () {
             setupItemTable($("#{{ form.items_json.id_for_label }}").val());
         });

gulpfile.js

@@ -23,9 +23,8 @@ function styles(done) {
                     'node_modules/fullcalendar/dist/fullcalendar.print.css',
                     'node_modules/bootstrap-select/dist/css/bootstrap-select.css',
                     'node_modules/ajax-bootstrap-select/dist/css/ajax-bootstrap-select.css',
-                    //'node_modules/@forevolve/bootstrap-dark/dist/css/bootstrap-dark.css',
+                    'node_modules/flatpickr/dist/flatpickr.css',
                     'node_modules/@activix/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css'])
-    //.pipe(_if('**/bootstrap-dark.css', rename({basename:'dark-mode'})))
     .pipe(sourcemaps.init())
     .pipe(sass().on('error', sass.logError))
     .pipe(postcss([ autoprefixer() ]))
@@ -51,6 +50,7 @@ function scripts() {
                     'node_modules/bootstrap/js/dist/modal.js',
                     'node_modules/bootstrap/js/dist/alert.js',
 
+                    'node_modules/flatpickr/dist/flatpickr.min.js',
                     'node_modules/@fortawesome/fontawesome-free/js/all.js',
                     'node_modules/moment/moment.js',
                     'node_modules/fullcalendar/dist/fullcalendar.js',

package.json

@@ -5,7 +5,6 @@
   "author": "Tom Price",
   "license": "MIT",
   "dependencies": {
-    "@activix/bootstrap-datetimepicker": "^2.0.7",
     "@forevolve/bootstrap-dark": "^1.0.0-alpha.1075",
     "@fortawesome/fontawesome-free": "^5.13.1",
     "ajax-bootstrap-select": "^1.4.5",
@@ -14,6 +13,7 @@
     "bootstrap": "^4.5.2",
     "bootstrap-select": "^1.13.17",
     "dark-mode-switch": "^1.0.0",
+    "flatpickr": "^4.6.6",
     "fullcalendar": "^3.10.2",
     "gulp-if": "^3.0.0",
     "gulp-rename": "^2.0.0",

templates/partials/datetime-fix.html

@@ -0,0 +1,33 @@
+{% load static %}
+<script>
+function initDatetime() {
+    $('input[type=datetime-local]').not(':disabled').flatpickr({
+        dateFormat: 'Y-m-dTH:m',
+        enableTime: true,
+        altInput: true,
+        altFormat: "d/m/y H:m",
+    });
+}
+$(document).ready(function () {
+    function supportsDateTime() {
+        var input = document.createElement('input');
+        input.setAttribute('type','datetime-local');
+        return input.type !== "text";
+    }
+    //Firefox reports support for datetime-local without properly supporting it. Bah.
+    if(!supportsDateTime() || navigator.userAgent.toLowerCase().indexOf('firefox') > -1){
+        $('<link>')
+          .appendTo('head')
+          .attr({type : 'text/css', rel : 'stylesheet'})
+          .attr('href', '{% static "css/flatpickr.css" %}');
+        $.when(
+            $.getScript( '{% static "js/flatpickr.min.js" %}' ),
+            $.Deferred(function(deferred){
+                $(deferred.resolve);
+            })
+        ).done(function(){
+            initDatetime();
+        });
+    }
+});
+</script>