Merge 5814488f21 into ad79aa45cf

web_widget_timer/__init__.py

@@ -0,0 +1,3 @@
+# -*- coding: utf-8 -*-
+# Copyright 2016 Onestein (<http://www.onestein.eu>)
+# License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl.html).

web_widget_timer/__manifest__.py

@@ -0,0 +1,18 @@
+# -*- coding: utf-8 -*-
+# Copyright 2016 Onestein (<http://www.onestein.eu>)
+# License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl.html).
+
+{
+    'name': 'Web Widget Timer',
+    'summary': 'This module introduces a new timer widget for form views.',
+    'category': 'Extra Tools',
+    'version': '10.0.1.0.0',
+    'author': 'Onestein, Odoo Community Association (OCA)',
+    'license': 'AGPL-3',
+    'website': 'https://github.com/OCA/web',
+    'depends': ['web'],
+    'data': [
+        'views/web_timer.xml',
+    ],
+    'qweb': ['static/src/xml/web_timer.xml',],
+}

web_widget_timer/readme/CONTRIBUTORS.rst

@@ -0,0 +1 @@
+* Antonio Esposito <a.esposito@onestein.nl>

web_widget_timer/readme/DESCRIPTION.rst

@@ -0,0 +1 @@
+This module introduces a new timer widget to be used in form views.

web_widget_timer/readme/USAGE.rst

@@ -0,0 +1,34 @@
+To use the timer widget in a form view you need to relate it to a date field
+also present in the view (ref_date in the example below).
+
+   <widget type="timer" reference_date='ref_date'></widget>
+
+By default, the timer will count up from the referred date, showing, in black,
+days, hours, minutes and seconds past since the referred date. If the referred
+date is in the future, instead, the timer will show the same informations in red.
+
+Anyway it's possible to customize this behavior through several attributes you
+can provide to the widget. Such options are:
+
+- counting (accepts 'up' and 'down'; 'up' is default): if it's set to down, the widget's behavior is inverted and it will count down to the referred date;
+- hours (accepts '0' and '1'; '1' is default): if it's set to 0, the widget won't show hours;
+- minutes (accepts '0' and '1': '1' is default): if it's set to 0, the widget won't show minutes;
+- seconds (accepts '0' and '1': '1' is default): if it's set to 0, the widget won't show seconds;
+
+The example below will render a down-counting timer which only shows days and hours:
+
+   <widget type="timer" reference_date='ref_date' counting='down' seconds='0' minutes='0'></widget>
+
+The widget dinamically adapts to changes on the referred date and it's automatically hidden if the referred date is not set.
+
+.. figure:: static/description/code_down.png
+   :alt: Code for Down-Counting Timer
+
+.. figure:: static/description/result_down.png
+   :alt: Down-Counting Timer Rendering
+
+.. figure:: static/description/code_up.png
+   :alt: Code for Up-Counting Timer
+
+.. figure:: static/description/result_up.png
+   :alt: Up-Counting Timer Rendering

web_widget_timer/static/src/js/web_timer.js

@@ -0,0 +1,94 @@
+odoo.define("web.datetime.timer", function (require) {
+    "use strict";
+    var core = require('web.core');
+    var form_common = require('web.form_common');
+
+    var TimerWidget = form_common.FormWidget.extend(form_common.ReinitializeWidgetMixin, {
+
+        template: 'TimerWidget',
+
+        init: function () {
+            this._super.apply(this, arguments);
+
+            var date_field = (this.node.attrs && this.node.attrs.reference_date) || false;
+
+            if (date_field) {
+                this.set({"reference_date_name": date_field});
+                this.field_manager.on("field_changed:" + date_field, this, function() {
+                    this.set({"reference_date": this.field_manager.get_field_value(date_field)});
+                    this.set({"countDate": new Date(this.get("reference_date")).getTime()});
+                });
+            }
+
+            var hours = true;
+            if (this.node.attrs && this.node.attrs.hours == '0')
+                hours = false;
+
+            var minutes = true;
+            if (this.node.attrs && this.node.attrs.minutes == '0')
+                minutes = false;
+
+            var seconds = true;
+            if (this.node.attrs && this.node.attrs.seconds == '0')
+                seconds = false;
+
+            var options = {
+                counting: (this.node.attrs && this.node.attrs.counting == 'down' && 'down') || 'up',
+                hours: hours,
+                minutes: minutes,
+                seconds: seconds,
+            }
+            this.options = options;
+
+            var self = this;
+            var x = setInterval(function() {
+
+                var now = new Date().getTime();
+                var distance = 0;
+                var invert = false;
+                var countDate = self.get("countDate");
+
+                if (countDate) {
+                    distance = now - countDate;
+                    if (distance < 0) {
+                        invert = true;
+                        distance = -distance;
+                    }
+
+                    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
+                    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+                    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
+                    var seconds = Math.floor((distance % (1000 * 60)) / 1000);
+
+                    if (!self.options.hours) minutes += hours * 60;
+                    if (!self.options.minutes) seconds += minutes * 60;
+
+                    var txt = days + "d "
+                    if (self.options.hours) txt += hours + "h ";
+                    if (self.options.minutes) txt += minutes + "m ";
+                    if (self.options.seconds) txt += seconds + "s ";
+
+
+                    if (invert) txt += "until ";
+                    else txt += "since ";
+
+                    txt += "<b>" + self.field_manager.fields[date_field].string + "</b>";
+
+                    var color = 'black'
+                    if ((invert && self.options.counting == 'up') || (!invert && self.options.counting == 'down')) color ='red';
+
+                    this.$(".o_web_timer_field_draw." + self.get("reference_date_name")).html(txt).css("color",color).css('display','block');
+                }
+                else
+                {
+                    var txt =
+                    this.$(".o_web_timer_field_draw." + self.get("reference_date_name")).css('display','none');
+                }
+
+            }, 1000);
+
+        },
+    });
+    core.form_custom_registry.add('timer', TimerWidget);
+
+});

web_widget_timer/static/src/xml/web_timer.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<templates xml:space="preserve">
+    <t t-name="TimerWidget" id="TimerWidget">
+        <div class="o_web_timer_field_draw">
+            <p t-att-class="'o_web_timer_field_draw '+ widget.get('reference_date_name')"></p>
+        </div>
+    </t>
+</templates>

web_widget_timer/views/web_timer.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+    <template name="Web Timer Assets" id="web_timer_assets" inherit_id="web.assets_backend">
+        <xpath expr="." position="inside">
+            <script src="/web_widget_timer/static/src/js/web_timer.js"/>
+        </xpath>
+    </template>
+</odoo>