Merge 8dae91724b into 32121ffad1

application/views/helpers/FormDateTime.php

@@ -51,7 +51,7 @@ class Zend_View_Helper_FormDateTime extends Zend_View_Helper_FormElement
         $type = $attribs['local'] === true ? 'datetime-local' : 'datetime';
         unset($attribs['local']);  // Unset local to not render it again in $this->_htmlAttribs($attribs)
         $html5 =  sprintf(
-            '<input type="%s" data-use-datetime-picker name="%s" id="%s" step="1" value="%s"%s%s%s',
+            '<input type="%s" name="%s" id="%s" step="1" value="%s"%s%s%s',
             $type,
             $this->view->escape($name),
             $this->view->escape($id),

library/Icinga/Web/JavaScript.php

@@ -43,7 +43,6 @@ class JavaScript
         'js/icinga/behavior/selectable.js',
         'js/icinga/behavior/modal.js',
         'js/icinga/behavior/input-enrichment.js',
-        'js/icinga/behavior/datetime-picker.js',
         'js/icinga/behavior/copy-to-clipboard.js'
     ];
 

public/css/icinga/controls.less

@@ -213,69 +213,3 @@ form:has(input.search:focus) > .search-icon {
     max-height: 2em;
   }
 }
-
-// Datetime picker colors
-
-// The less variables are essentially the official dark theme for the flatpickr
-@fp-calendarBackground: #3f4458;
-@fp-calendarBorderColor: darken(#3f4458, 50%);
-
-@fp-monthForeground: #fff;
-@fp-monthBackground: #3f4458;
-
-@fp-weekdaysBackground: transparent;
-@fp-weekdaysForeground: #fff;
-
-@fp-dayForeground: fadeout(white, 5%);
-@fp-dayHoverBackground: lighten(@fp-calendarBackground, 25%);
-
-@fp-todayColor: #eee;
-@fp-today_fg_color: #3f4458;
-
-@fp-selectedDayBackground: #80CBC4;
-
-.icinga-datetime-picker .flatpickr-day.today {
-  &:hover,
-  &:focus {
-    color: @fp-today_fg_color;
-  }
-}
-
-@light-mode: {
-  :root {
-    // These are actually the default colors for the flatpickr
-
-    @fp-dayForeground: #393939;
-    @fp-dayHoverBackground: #e6e6e6;
-
-    --fp-calendarBackground: #ffffff;
-    --fp-calendarBorderColor: @fp-dayHoverBackground;
-
-    --fp-arrowColor: fadeout(@fp-dayForeground, 40%);
-    --fp-arrow_hover_color: #f64747;
-
-    --fp-monthForeground: fadeout(black, 10%);
-    --fp-monthBackground: transparent;
-
-    --fp-weekdaysBackground: transparent;
-    --fp-weekdaysForeground: fadeout(black, 46%);
-    --fp-weekNumberForeground: fadeout(@fp-dayForeground, 70%);
-
-    --fp-dayForeground: @fp-dayForeground;
-    --fp-dayHoverBackground: @fp-dayHoverBackground;
-    --fp-disabledDayForeground: fadeout(@fp-dayForeground, 90%);
-    --fp-outsideRangeDayForeground: fadeout(@fp-dayForeground, 70%);
-    --fp-selectedDayBackground: #569FF7;
-    --fp-todayColor: #959ea9;
-
-    --fp-timeHoverBg: lighten(@fp-dayHoverBackground, 3);
-
-    --fp-hoverInvertedBg: fadeout(black, 95%);
-
-    --fp-numChooserSvgFillColor: fadeout(fadeout(black, 10%), 50%);
-    --fp-hoverNumChooserBg: fadeout(black, 90%);
-    --fp-numChooserBorderColor: fadeout(@fp-dayForeground, 85%);
-  }
-};
-
-// Datetime picker colors (end)

public/js/icinga/behavior/datetime-picker.js

@@ -1,223 +0,0 @@
-// SPDX-FileCopyrightText: 2021 Icinga GmbH <https://icinga.com>
-// SPDX-License-Identifier: GPL-3.0-or-later
-
-/**
- * DatetimePicker - Behavior for inputs that should show a date and time picker
- */
-;(function(Icinga, $) {
-
-    'use strict';
-
-    try {
-        var Flatpickr = require('icinga/icinga-php-library/vendor/flatpickr');
-        var notjQuery = require('icinga/icinga-php-library/notjQuery');
-    } catch (e) {
-        console.warn('Unable to provide datetime picker. Libraries not available:', e);
-        return;
-    }
-
-    Icinga.Behaviors = Icinga.Behaviors || {};
-
-    /**
-     * Behavior for datetime pickers.
-     *
-     * @param icinga {Icinga} The current Icinga Object
-     */
-    var DatetimePicker = function(icinga) {
-        Icinga.EventListener.call(this, icinga);
-        this.icinga = icinga;
-
-        /**
-         * The formats the server expects
-         *
-         * In a syntax flatpickr understands. Based on https://flatpickr.js.org/formatting/
-         *
-         * @type {string}
-         */
-        this.server_full_format = 'Y-m-d\\TH:i:S';
-        this.server_date_format = 'Y-m-d';
-        this.server_time_format = 'H:i:S';
-
-        /**
-         * The flatpickr instances created
-         *
-         * @type {Map<Flatpickr, string>}
-         * @private
-         */
-        this._pickers = new Map();
-
-        this.on('rendered', '#main > .container, #modal-content', this.onRendered, this);
-        this.on('close-column', this.onCloseContainer, this);
-        this.on('close-modal', this.onCloseContainer, this);
-    };
-
-    DatetimePicker.prototype = new Icinga.EventListener();
-
-    /**
-     * Add flatpickr widget on selected inputs
-     *
-     * @param event {Event}
-     */
-    DatetimePicker.prototype.onRendered = function(event) {
-        var _this = event.data.self;
-        var containerId = event.target.dataset.icingaContainerId;
-        var inputs = event.target.querySelectorAll('input[data-use-datetime-picker]');
-
-        // Cleanup left-over pickers from the previous content
-        _this.cleanupPickers(containerId);
-
-        $.each(inputs, function () {
-            if (this.type !== 'text') {
-                // Ignore native inputs. Browser widgets are (mostly) superior.
-                // TODO: This makes the type distinction below useless.
-                //       Refactor this once we decided how we continue here in the future.
-                return;
-            }
-
-            var server_format = _this.server_full_format;
-            if (this.type === 'date') {
-                server_format = _this.server_date_format;
-            } else if (this.type === 'time') {
-                server_format = _this.server_time_format;
-            }
-
-            // Inject calendar container into a new empty div, inside the column/modal but outside the form.
-            // See https://github.com/flatpickr/flatpickr/issues/2054 for details.
-            var appendTo = document.createElement('div');
-            this.form.parentNode.insertBefore(appendTo, this.form.nextSibling);
-
-            var enableTime = server_format !== _this.server_date_format;
-            var disableDate = server_format === _this.server_time_format;
-            var dateTimeFormatter = _this.createFormatter(! disableDate, enableTime);
-            var options = {
-                locale: _this.loadFlatpickrLocale(),
-                appendTo: appendTo,
-                altInput: true,
-                enableTime: enableTime,
-                noCalendar: disableDate,
-                dateFormat: server_format,
-                formatDate: function (date, format, locale) {
-                    return format === this.dateFormat
-                        ? Flatpickr.formatDate(date, format, locale)
-                        : dateTimeFormatter.format(date);
-                }
-            };
-
-            for (name in this.dataset) {
-                if (name.length > 9 && name.substr(0, 9) === 'flatpickr') {
-                    var value = this.dataset[name];
-                    if (value === '') {
-                        value = true;
-                    }
-
-                    options[name.charAt(9).toLowerCase() + name.substr(10)] = value;
-                }
-            }
-
-            var element = this;
-            if (!! options.wrap) {
-                element = this.parentNode;
-            }
-
-            var fp = Flatpickr(element, options);
-            fp.calendarContainer.classList.add('icinga-datetime-picker');
-
-            if (! !!options.wrap) {
-                this.parentNode.insertBefore(_this.renderIcon(), fp.altInput.nextSibling);
-            }
-
-            _this._pickers.set(fp, containerId);
-        });
-    };
-
-    /**
-     * Cleanup all flatpickr instances in the closed container
-     *
-     * @param event {Event}
-     */
-    DatetimePicker.prototype.onCloseContainer = function (event) {
-        var _this = event.data.self;
-        var containerId = event.target.dataset.icingaContainerId;
-
-        _this.cleanupPickers(containerId);
-    };
-
-    /**
-     * Destroy all flatpickr instances in the container with the given id
-     *
-     * @param containerId {String}
-     */
-    DatetimePicker.prototype.cleanupPickers = function (containerId) {
-        this._pickers.forEach(function (cId, fp) {
-            if (cId === containerId) {
-                this._pickers.delete(fp);
-                fp.destroy();
-            }
-        }, this);
-    };
-
-    /**
-     * Close all other flatpickr instances and keep the given one
-     *
-     * @param fp {Flatpickr}
-     */
-    DatetimePicker.prototype.closePickers = function (fp) {
-        var containerId = this._pickers.get(fp);
-        this._pickers.forEach(function (cId, fp2) {
-            if (cId === containerId && fp2 !== fp) {
-                fp2.close();
-            }
-        }, this);
-    };
-
-    DatetimePicker.prototype.createFormatter = function (withDate, withTime) {
-        var options = {};
-        if (withDate) {
-            options.year = 'numeric';
-            options.month = 'numeric';
-            options.day = 'numeric';
-        }
-        if (withTime) {
-            options.hour = 'numeric';
-            options.minute = 'numeric';
-            options.timeZoneName = 'short';
-            options.timeZone = this.icinga.config.timezone;
-        }
-
-        return new Intl.DateTimeFormat([this.icinga.config.locale, 'en'], options);
-    };
-
-    DatetimePicker.prototype.loadFlatpickrLocale = function () {
-        switch (this.icinga.config.locale) {
-            case 'ar':
-                return require('icinga/icinga-php-library/vendor/flatpickr/l10n/ar').Arabic;
-            case 'de':
-                return require('icinga/icinga-php-library/vendor/flatpickr/l10n/de').German;
-            case 'es':
-                return require('icinga/icinga-php-library/vendor/flatpickr/l10n/es').Spanish;
-            case 'fi':
-                return require('icinga/icinga-php-library/vendor/flatpickr/l10n/fi').Finnish;
-            case 'fr':
-                return require('icinga/icinga-php-library/vendor/flatpickr/l10n/fr').French;
-            case 'it':
-                return require('icinga/icinga-php-library/vendor/flatpickr/l10n/it').Italian;
-            case 'ja':
-                return require('icinga/icinga-php-library/vendor/flatpickr/l10n/ja').Japanese;
-            case 'pt':
-                return require('icinga/icinga-php-library/vendor/flatpickr/l10n/pt').Portuguese;
-            case 'ru':
-                return require('icinga/icinga-php-library/vendor/flatpickr/l10n/ru').Russian;
-            case 'uk':
-                return require('icinga/icinga-php-library/vendor/flatpickr/l10n/uk').Ukrainian;
-            default:
-                return 'default';
-        }
-    };
-
-    DatetimePicker.prototype.renderIcon = function () {
-        return notjQuery.render('<i class="icon fa fa-calendar" role="image"></i>');
-    };
-
-    Icinga.Behaviors.DatetimePicker = DatetimePicker;
-
-})(Icinga, jQuery);