From cdc6c6f86f83deb9a962bdaacccedffe4755b9aa Mon Sep 17 00:00:00 2001 From: Hadi Nategh Date: Mon, 23 Nov 2020 21:11:09 +0100 Subject: [PATCH] Implement widget countdown timer --- api/js/etemplate/et2_widget_countdown.js | 111 ++++++++++++++++++++++ api/js/etemplate/et2_widget_countdown.ts | 114 +++++++++++++++++++++++ api/js/etemplate/etemplate2.js | 2 +- api/js/etemplate/etemplate2.ts | 2 +- 4 files changed, 227 insertions(+), 2 deletions(-) create mode 100644 api/js/etemplate/et2_widget_countdown.js create mode 100644 api/js/etemplate/et2_widget_countdown.ts diff --git a/api/js/etemplate/et2_widget_countdown.js b/api/js/etemplate/et2_widget_countdown.js new file mode 100644 index 0000000000..a36f29b782 --- /dev/null +++ b/api/js/etemplate/et2_widget_countdown.js @@ -0,0 +1,111 @@ +"use strict"; +/** + * EGroupware eTemplate2 - Countdown timer widget + * + * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License + * @package etemplate + * @subpackage api + * @link http://www.egroupware.org + * @author Hadi Nategh + */ +var __extends = (this && this.__extends) || (function () { + var extendStatics = function (d, b) { + extendStatics = Object.setPrototypeOf || + ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) || + function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; }; + return extendStatics(d, b); + }; + return function (d, b) { + extendStatics(d, b); + function __() { this.constructor = d; } + d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); + }; +})(); +Object.defineProperty(exports, "__esModule", { value: true }); +/*egw:uses + /vendor/bower-asset/jquery/dist/jquery.js; + et2_core_baseWidget; +*/ +require("./et2_core_common"); +var et2_core_inheritance_1 = require("./et2_core_inheritance"); +var et2_core_widget_1 = require("./et2_core_widget"); +var et2_core_baseWidget_1 = require("./et2_core_baseWidget"); +/** + * Class which implements the "countdown" XET-Tag + */ +var et2_countdown = /** @class */ (function (_super) { + __extends(et2_countdown, _super); + /** + * Constructor + */ + function et2_countdown(_parent, _attrs, _child) { + var _this = + // Call the inherited constructor + _super.call(this, _parent, _attrs, et2_core_inheritance_1.ClassWithAttributes.extendAttributes(et2_countdown._attributes, _child || {})) || this; + _this.timer = null; + _this.container = null; + _this.days = null; + _this.hours = null; + _this.minutes = null; + _this.seconds = null; + // Build countdown dom container + _this.container = jQuery(document.createElement("div")) + .addClass("et2_countdown"); + _this.days = jQuery(document.createElement("span")) + .addClass("et2_countdown_days").appendTo(_this.container); + _this.hours = jQuery(document.createElement("span")) + .addClass("et2_countdown_hours").appendTo(_this.container); + _this.minutes = jQuery(document.createElement("span")) + .addClass("et2_countdown_minutes").appendTo(_this.container); + _this.seconds = jQuery(document.createElement("span")) + .addClass("et2_countdown_seconds").appendTo(_this.container); + // create a date widget + _this.time = et2_core_widget_1.et2_createWidget('date-time', {}); + _this.setDOMNode(_this.container[0]); + return _this; + } + et2_countdown.prototype.set_time = function (_time) { + if (_time == "") + return; + this.time.set_value(_time); + var self = this; + this.timer = setInterval(function () { + if (self._updateTimer() <= 0) + clearInterval(this.timer); + }, 1000); + }; + et2_countdown.prototype._updateTimer = function () { + var tempDate = new Date(); + var now = new Date(tempDate.getFullYear(), tempDate.getMonth(), tempDate.getDate(), tempDate.getHours(), tempDate.getMinutes() - tempDate.getTimezoneOffset(), tempDate.getSeconds()); + var time = new Date(this.time.getValue()); + var distance = time.getTime() - now.getTime(); + if (distance < 0) + return 0; + this.days.text(Math.floor(distance / (1000 * 60 * 60 * 24)) + this._getIndicator("days")); + this.hours.text(Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)) + this._getIndicator("hours")); + this.minutes.text(Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)) + this._getIndicator("minutes")); + this.seconds.text(Math.floor((distance % (1000 * 60)) / 1000) + this._getIndicator("seconds")); + return distance; + }; + et2_countdown.prototype._getIndicator = function (_v) { + return this.options.format == 's' ? egw.lang(_v).substr(0, 1) : egw.lang(_v); + }; + et2_countdown._attributes = { + time: { + name: "time", + type: "any", + default: "", + description: "" + }, + format: { + name: "display format", + type: "string", + default: "s", + description: "Defines display format; s (Initial letter) or l (Complete word) display, default is s." + } + }; + return et2_countdown; +}(et2_core_baseWidget_1.et2_baseWidget)); +exports.et2_countdown = et2_countdown; +et2_core_widget_1.et2_register_widget(et2_countdown, ["countdown"]); +//# sourceMappingURL=et2_widget_countdown.js.map \ No newline at end of file diff --git a/api/js/etemplate/et2_widget_countdown.ts b/api/js/etemplate/et2_widget_countdown.ts new file mode 100644 index 0000000000..ce12f8a78c --- /dev/null +++ b/api/js/etemplate/et2_widget_countdown.ts @@ -0,0 +1,114 @@ +/** + * EGroupware eTemplate2 - Countdown timer widget + * + * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License + * @package etemplate + * @subpackage api + * @link http://www.egroupware.org + * @author Hadi Nategh + */ + +/*egw:uses + /vendor/bower-asset/jquery/dist/jquery.js; + et2_core_baseWidget; +*/ + +import './et2_core_common'; +import {ClassWithAttributes} from "./et2_core_inheritance"; +import {et2_createWidget, et2_register_widget, WidgetConfig} from "./et2_core_widget"; +import {et2_date} from "./et2_widget_date"; +import {et2_baseWidget} from "./et2_core_baseWidget"; + +/** + * Class which implements the "countdown" XET-Tag + */ +export class et2_countdown extends et2_baseWidget { + static readonly _attributes: any = { + time: { + name: "time", + type: "any", + default: "", + description: "" + }, + format: { + name: "display format", + type: "string", + default: "s", // s or l + description: "Defines display format; s (Initial letter) or l (Complete word) display, default is s." + } + }; + + private time : et2_date; + + private timer = null; + private container : JQuery = null; + private days : JQuery = null; + private hours : JQuery = null; + private minutes : JQuery = null; + private seconds : JQuery = null; + + /** + * Constructor + */ + constructor(_parent, _attrs?: WidgetConfig, _child?: object) { + // Call the inherited constructor + super(_parent, _attrs, ClassWithAttributes.extendAttributes(et2_countdown._attributes, _child || {})); + + // Build countdown dom container + this.container = jQuery(document.createElement("div")) + .addClass("et2_countdown"); + this.days = jQuery(document.createElement("span")) + .addClass("et2_countdown_days").appendTo(this.container); + this.hours = jQuery(document.createElement("span")) + .addClass("et2_countdown_hours").appendTo(this.container); + this.minutes = jQuery(document.createElement("span")) + .addClass("et2_countdown_minutes").appendTo(this.container); + this.seconds = jQuery(document.createElement("span")) + .addClass("et2_countdown_seconds").appendTo(this.container); + // create a date widget + this.time = et2_createWidget('date-time', {}); + this.setDOMNode(this.container[0]); + } + + public set_time(_time) + { + if (_time == "") return; + this.time.set_value(_time); + let self = this; + this.timer = setInterval(function(){ + if (self._updateTimer() <= 0) clearInterval(this.timer); + }, 1000); + + } + + private _updateTimer() + { + let tempDate = new Date(); + let now = new Date( + tempDate.getFullYear(), + tempDate.getMonth(), + tempDate.getDate(), + tempDate.getHours(), + tempDate.getMinutes()-tempDate.getTimezoneOffset(), + tempDate.getSeconds() + ); + + let time = new Date (this.time.getValue()); + let distance = time.getTime() - now.getTime(); + + if (distance < 0) return 0; + + this.days.text(Math.floor(distance / (1000 * 60 * 60 * 24))+this._getIndicator("days")); + this.hours.text(Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))+this._getIndicator("hours")); + this.minutes.text(Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60))+this._getIndicator("minutes")); + this.seconds.text(Math.floor((distance % (1000 * 60)) / 1000)+this._getIndicator("seconds")); + + return distance; + } + + private _getIndicator(_v) + { + return this.options.format == 's' ? egw.lang(_v).substr(0,1) : egw.lang(_v); + } +} +et2_register_widget(et2_countdown, ["countdown"]); diff --git a/api/js/etemplate/etemplate2.js b/api/js/etemplate/etemplate2.js index 0046a59ffc..f993ae4c67 100644 --- a/api/js/etemplate/etemplate2.js +++ b/api/js/etemplate/etemplate2.js @@ -58,7 +58,7 @@ et2_widget_barcode; et2_widget_itempicker; et2_widget_script; - + et2_widget_countdown; et2_extension_nextmatch; et2_extension_customfields; diff --git a/api/js/etemplate/etemplate2.ts b/api/js/etemplate/etemplate2.ts index f1f1de6292..5a794be949 100644 --- a/api/js/etemplate/etemplate2.ts +++ b/api/js/etemplate/etemplate2.ts @@ -57,7 +57,7 @@ et2_widget_barcode; et2_widget_itempicker; et2_widget_script; - + et2_widget_countdown; et2_extension_nextmatch; et2_extension_customfields;