Fix #28 -- Add date(time)picker

pretalx · May 25, 2017 · 003a87c · 003a87c
1 parent e7dcb68
commit 003a87c
Show file tree

Hide file tree

Showing 12 changed files with 16,836 additions and 1 deletion.
diff --git a/src/pretalx/orga/context_processors.py b/src/pretalx/orga/context_processors.py
@@ -2,6 +2,7 @@
 from django.urls import resolve
 
 from pretalx.event.models import Event
+from pretalx.orga.utils.i18n import get_javascript_format, get_moment_locale
 
 
 def add_events(request):
@@ -15,3 +16,11 @@ def add_events(request):
             'url_name': url_name,
         }
     return dict()
+
+
+def locale_context(request):
+    ctx = {}
+    ctx['js_datetime_format'] = get_javascript_format('DATETIME_INPUT_FORMATS')
+    ctx['js_date_format'] = get_javascript_format('DATE_INPUT_FORMATS')
+    ctx['js_locale'] = get_moment_locale()
+    return ctx
diff --git a/src/pretalx/orga/forms/cfp.py b/src/pretalx/orga/forms/cfp.py
@@ -16,6 +16,9 @@ class Meta:
         fields = [
             'headline', 'text', 'deadline',
         ]
+        widgets = {
+            'deadline': forms.DateTimeInput(attrs={'class': 'datetimepickerfield'})
+        }
 
 
 class CfPForm(ReadOnlyFlag, I18nModelForm):
@@ -25,6 +28,9 @@ class Meta:
         fields = [
             'headline', 'text', 'deadline',
         ]
+        widgets = {
+            'deadline': forms.DateTimeInput(attrs={'class': 'datetimepickerfield'})
+        }
 
 
 class QuestionForm(ReadOnlyFlag, I18nModelForm):

diff --git a/src/pretalx/orga/forms/event.py b/src/pretalx/orga/forms/event.py
@@ -51,6 +51,11 @@ class Meta:
             'name', 'slug', 'is_public', 'date_from', 'date_to', 'timezone',
             'email', 'locale'
         ]
+        widgets = {
+            'date_from': forms.DateInput(attrs={'class': 'datepickerfield'}),
+            'date_to': forms.DateInput(attrs={'class': 'datepickerfield',
+                                              'data-date-after': '#id_date_from'}),
+        }
 
 
 class MailSettingsForm(ReadOnlyFlag, I18nFormMixin, HierarkeyForm):

diff --git a/src/pretalx/orga/templates/orga/base.html b/src/pretalx/orga/templates/orga/base.html
@@ -17,9 +17,12 @@
     {% compress js %}
         <script type="text/javascript" src="{% static "vendored/jquery-3.1.1.js" %}"></script>
         <script type="text/javascript" src="{% static "vendored/bootstrap-4-dev/dist/js/bootstrap.js" %}"></script>
+        <script type="text/javascript" src="{% static "vendored/moment-with-locales.js" %}"></script>
+        <script type="text/javascript" src="{% static "vendored/datetimepicker/bootstrap-datetimepicker.js" %}"></script>
+        <script type="text/javascript" src="{% static "orga/js/main.js" %}"></script>
     {% endcompress %}
 </head>
-<body>
+<body data-datetimeformat="{{ js_datetime_format }}" data-dateformat="{{ js_date_format }}" data-datetimelocale="{{ js_locale }}">
 <div id="wrapper">
     <nav class="navbar navbar-toggleable-md navbar-inverse navbar-static-top bg-primary">
         <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"

diff --git a/src/pretalx/orga/utils/__init__.py b/src/pretalx/orga/utils/__init__.py
diff --git a/src/pretalx/orga/utils/i18n.py b/src/pretalx/orga/utils/i18n.py
@@ -0,0 +1,64 @@
+# Inspired by https://github.com/asaglimbeni/django-datetime-widget/blob/master/datetimewidget/widgets.py
+# Copyright (c) 2013, Alfredo Saglimbeni (BSD license)
+import re
+
+from django.conf import settings
+from django.utils import translation
+from django.utils.formats import get_format
+
+date_conversion_to_moment = {
+    '%a': 'ddd',
+    '%A': 'dddd',
+    '%w': 'd',
+    '%d': 'DD',
+    '%b': 'MMM',
+    '%B': 'MMMM',
+    '%m': 'MM',
+    '%y': 'YY',
+    '%Y': 'YYYY',
+    '%H': 'HH',
+    '%I': 'hh',
+    '%p': 'a',
+    '%M': 'mm',
+    '%S': 'ss',
+    '%f': 'SSSSSS',
+    '%z': 'ZZ',
+    '%Z': 'zz',
+    '%j': 'DDDD',
+    '%U': 'ww',  # fuzzy translation
+    '%W': 'WW',
+    '%c': '',
+    '%x': '',
+    '%X': ''
+}
+
+moment_locales = {
+    'af', 'az', 'bs', 'de-at', 'en-gb', 'et', 'fr-ch', 'hi', 'it', 'ko', 'me', 'ms-my', 'pa-in', 'se', 'sr', 'th',
+    'tzm-latn', 'zh-hk', 'ar', 'be', 'ca', 'de', 'en-ie', 'eu', 'fr', 'hr', 'ja', 'ky', 'mi', 'my', 'pl', 'si', 'ss',
+    'tlh', 'uk', 'zh-tw', 'ar-ly', 'bg', 'cs', 'dv', 'en-nz', 'fa', 'fy', 'hu', 'jv', 'lb', 'mk', 'nb', 'pt-br', 'sk',
+    'sv', 'tl-ph', 'uz', 'ar-ma', 'bn', 'cv', 'el', 'eo', 'fi', 'gd', 'hy-am', 'ka', 'lo', 'ml', 'ne', 'pt', 'sl', 'sw',
+    'tr', 'vi', 'ar-sa', 'bo', 'cy', 'en-au', 'es-do', 'fo', 'gl', 'id', 'kk', 'lt', 'mr', 'nl', 'ro', 'sq', 'ta',
+    'tzl', 'x-pseudo', 'ar-tn', 'br', 'da', 'en-ca', 'es', 'fr-ca', 'he', 'is', 'km', 'lv', 'ms', 'nn', 'ru', 'sr-cyrl',
+    'te', 'tzm', 'zh-cn',
+}
+
+toJavascript_re = re.compile(r'(?<!\w)(' + '|'.join(date_conversion_to_moment.keys()) + r')\b')
+
+
+def get_javascript_format(format_name):
+    f = get_format(format_name)[0]
+    return toJavascript_re.sub(
+        lambda x: date_conversion_to_moment[x.group()],
+        f
+    )
+
+
+def get_moment_locale(locale=None):
+    cur_lang = locale or translation.get_language()
+    if cur_lang in moment_locales:
+        return cur_lang
+    if '-' in cur_lang or '_' in cur_lang:
+        main = cur_lang.replace("_", "-").split("-")[0]
+        if main in moment_locales:
+            return main
+    return settings.LANGUAGE_CODE
diff --git a/src/pretalx/settings.py b/src/pretalx/settings.py
@@ -234,6 +234,7 @@
                 'django.template.context_processors.tz',
                 'django.contrib.messages.context_processors.messages',
                 'pretalx.orga.context_processors.add_events',
+                'pretalx.orga.context_processors.locale_context',
             ],
             'loaders': template_loaders
         },

diff --git a/src/pretalx/static/orga/js/main.js b/src/pretalx/static/orga/js/main.js
@@ -0,0 +1,62 @@
+$(function () {
+    "use strict";
+
+    $(".datetimepickerfield").each(function () {
+        $(this).datetimepicker({
+            format: $("body").attr("data-datetimeformat"),
+            locale: $("body").attr("data-datetimelocale"),
+            useCurrent: false,
+            showClear: !$(this).prop("required"),
+            icons: {
+                time: 'fa fa-clock-o',
+                date: 'fa fa-calendar',
+                up: 'fa fa-chevron-up',
+                down: 'fa fa-chevron-down',
+                previous: 'fa fa-chevron-left',
+                next: 'fa fa-chevron-right',
+                today: 'fa fa-screenshot',
+                clear: 'fa fa-trash',
+                close: 'fa fa-remove'
+            }
+        });
+    });
+
+    $(".datepickerfield").each(function () {
+        var opts = {
+            format: $("body").attr("data-dateformat"),
+            locale: $("body").attr("data-datetimelocale"),
+            useCurrent: false,
+            showClear: !$(this).prop("required"),
+            icons: {
+                time: 'fa fa-clock-o',
+                date: 'fa fa-calendar',
+                up: 'fa fa-chevron-up',
+                down: 'fa fa-chevron-down',
+                previous: 'fa fa-chevron-left',
+                next: 'fa fa-chevron-right',
+                today: 'fa fa-screenshot',
+                clear: 'fa fa-trash',
+                close: 'fa fa-remove'
+            }
+        };
+        $(this).datetimepicker(opts);
+    });
+
+
+    $(".datetimepicker[data-date-after], .datepickerfield[data-date-after]").each(function() {
+        var later_field = $(this),
+            earlier_field = $($(this).attr("data-date-after")),
+            update = function () {
+                var earlier = earlier_field.data('DateTimePicker').date(),
+                    later = later_field.data('DateTimePicker').date();
+                if (earlier === null) {
+                    earlier = false;
+                } else if (later !== null && later.isBefore(earlier) && !later.isSame(earlier)) {
+                    later_field.data('DateTimePicker').date(earlier.add(1, 'h'));
+                }
+                later_field.data('DateTimePicker').minDate(earlier);
+            };
+        update();
+        earlier_field.on("dp.change", update);
+    });
+});
diff --git a/src/pretalx/static/orga/scss/main.scss b/src/pretalx/static/orga/scss/main.scss
@@ -2,6 +2,7 @@
 @import "../../common/scss/_flags";
 @import "../../vendored/bootstrap-4-dev/scss/bootstrap";
 @import "../../vendored/fontawesome/scss/font-awesome";
+@import "../../vendored/datetimepicker/_bootstrap-datetimepicker";
 @import "_dashboard";
 @import "_layout";
 @import "_schedule";