Added new form field web timepicker widget for Odoo Version 9.0

web_widget_timepicker/README.rst

@@ -0,0 +1,50 @@
+.. image:: https://img.shields.io/badge/licence-AGPL--3-blue.svg
+    :alt: License: AGPL-3
+
+==============================
+Timepicker widget in form view
+==============================
+
+This module defines a timepicker widget, to be used with either char fields
+or (function) fields of type character. Use ``widget='timepicker'`` in your form view
+definition.
+
+If you use the widget with a character field, the input field has the following default
+timepicker options:
+
+* By default direct input is disabled
+* By default the possible selection is based on 15 minute interval
+* By default 24 hour mode with H:i format
+* Scroll selection defaults to current server time
+
+The widget uses the jquery.timepicker plugin by Jon  Thornton
+
+
+Usage
+=====
+
+This module defines a new widget type for form views input fileds.
+
+Set the attribute ``widget=timepicker`` in a ``field`` tag in a form view.
+
+
+ToDo
+====
+
+Make timepicker options available in field defintion as additional attributes / options.
+
+
+Credits
+=======
+
+Jon Thornton (jquery.timepicker plugin)
+jquery.timepicker plugin - This software is made available under the open source MIT License. © 2014 Jon Thornton and contributors
+
+Odoo Community Association (OCA)
+
+
+Contributors
+------------
+
+* Michael Fried
+

web_widget_timepicker/__init__.py

@@ -0,0 +1,22 @@
+# -*- coding: utf-8 -*-
+##############################################################################
+#
+#    OpenERP, Open Source Management Solution
+#    Copyright (C) 2015 BADEP (<http://www.badep.ma>).
+#
+#    This program is free software: you can redistribute it and/or modify
+#    it under the terms of the GNU Affero General Public License as
+#    published by the Free Software Foundation, either version 3 of the
+#    License, or (at your option) any later version.
+#
+#    This program is distributed in the hope that it will be useful,
+#    but WITHOUT ANY WARRANTY; without even the implied warranty of
+#    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+#    GNU Affero General Public License for more details.
+#
+#    You should have received a copy of the GNU Affero General Public License
+#    along with this program.  If not, see <http://www.gnu.org/licenses/>.
+#
+##############################################################################
+
+

web_widget_timepicker/__openerp__.py

@@ -0,0 +1,51 @@
+# -*- coding: utf-8 -*-
+##############################################################################
+#
+#    OpenERP, Open Source Management Solution
+#    Copyright (C) 2016 Michael Fried @ Vividlab (<http://www.vividlab.de>).
+#
+#    This program is free software: you can redistribute it and/or modify
+#    it under the terms of the GNU Affero General Public License as
+#    published by the Free Software Foundation, either version 3 of the
+#    License, or (at your option) any later version.
+#
+#    This program is distributed in the hope that it will be useful,
+#    but WITHOUT ANY WARRANTY; without even the implied warranty of
+#    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+#    GNU Affero General Public License for more details.
+#
+#    You should have received a copy of the GNU Affero General Public License
+#    along with this program.  If not, see <http://www.gnu.org/licenses/>.
+#
+##############################################################################
+
+
+{
+    'name': '',
+    'version': '0.1',
+    'author': 'Vividlab, Odoo Community Association (OCA)',
+    'license': 'AGPL-3',
+    'category': 'Web',
+    'website': 'https://github.com/OCA/Web',
+
+    # any module necessary for this one to work correctly
+    'depends': [
+     'web'
+    ],
+
+    'css': [ 'static/src/css/jquery.timepicker.css',
+			 'static/src/css/timepicker.css',
+			],
+    'js': [  'static/src/js/timepicker_widget.js',
+			 'static/src/js/jquery.timepicker.js',
+			],
+    'qweb' : [ 'static/src/xml/time_picker.xml', ],
+
+    # always loaded
+    'data': [
+        'views/assets.xml',
+    ],
+
+    #Installation options
+    "installable": True,
+}

web_widget_timepicker/static/src/css/jquery.timepicker.css

@@ -0,0 +1,72 @@
+.ui-timepicker-wrapper {
+	overflow-y: auto;
+	height: 150px;
+	width: 6.5em;
+	background: #fff;
+	border: 1px solid #ddd;
+	-webkit-box-shadow:0 5px 10px rgba(0,0,0,0.2);
+	-moz-box-shadow:0 5px 10px rgba(0,0,0,0.2);
+	box-shadow:0 5px 10px rgba(0,0,0,0.2);
+	outline: none;
+	z-index: 10001;
+	margin: 0;
+}
+
+.ui-timepicker-wrapper.ui-timepicker-with-duration {
+	width: 13em;
+}
+
+.ui-timepicker-wrapper.ui-timepicker-with-duration.ui-timepicker-step-30,
+.ui-timepicker-wrapper.ui-timepicker-with-duration.ui-timepicker-step-60 {
+	width: 11em;
+}
+
+.ui-timepicker-list {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+
+.ui-timepicker-duration {
+	margin-left: 5px; color: #888;
+}
+
+.ui-timepicker-list:hover .ui-timepicker-duration {
+	color: #888;
+}
+
+.ui-timepicker-list li {
+	padding: 3px 0 3px 5px;
+	cursor: pointer;
+	white-space: nowrap;
+	color: #000;
+	list-style: none;
+	margin: 0;
+}
+
+.ui-timepicker-list:hover .ui-timepicker-selected {
+	background: #fff; color: #000;
+}
+
+li.ui-timepicker-selected,
+.ui-timepicker-list li:hover,
+.ui-timepicker-list .ui-timepicker-selected:hover {
+	background: #1980EC; color: #fff;
+}
+
+li.ui-timepicker-selected .ui-timepicker-duration,
+.ui-timepicker-list li:hover .ui-timepicker-duration {
+	color: #ccc;
+}
+
+.ui-timepicker-list li.ui-timepicker-disabled,
+.ui-timepicker-list li.ui-timepicker-disabled:hover,
+.ui-timepicker-list li.ui-timepicker-selected.ui-timepicker-disabled {
+	color: #888;
+	cursor: default;
+}
+
+.ui-timepicker-list li.ui-timepicker-disabled:hover,
+.ui-timepicker-list li.ui-timepicker-selected.ui-timepicker-disabled {
+	background: #f2f2f2;
+}

web_widget_timepicker/static/src/css/timepicker.css

@@ -0,0 +1,3 @@
+.oe_form_editable .oe_form .oe_form_field_time input {
+    width: 7em;
+}

web_widget_timepicker/static/src/js/timepicker_widget.js

@@ -0,0 +1,89 @@
+odoo.define('timepicker.form_widgets', function (require) {
+
+    "use strict";
+
+    var core = require('web.core');
+    var formats = require('web.formats');
+    var common = require('web.form_common');    
+
+    var _t = core._t;
+    
+    var TimePicker = common.AbstractField.extend(common.ReinitializeFieldMixin, {
+        template: "TimePickerField",
+        widget_class: 'oe_form_field_time',
+        events: {
+            'change input': 'store_dom_value',
+        },
+        init: function (field_manager, node) {
+            this._super(field_manager, node);
+
+            this.options = _.defaults( {}, {
+                disableTextInput: true,
+                forceRoundTime: true,
+                step: 15,
+                selectOnBlur: true,
+                timeFormat: 'H:i',
+                scrollDefault: 'now',
+            });
+        },
+        initialize_content: function() {
+            if(!this.get("effective_readonly")) {
+                this.$input = this.$el.find('input');
+                this.$input.timepicker(this.options); 
+                this.setupFocus(this.$('input'));                   
+            }   
+        },
+        is_syntax_valid: function() {
+            if (!this.get("effective_readonly") && this.$("input").size() > 0) {
+                try {
+                    this.parse_value(this.$('input').val(), '');
+                    return true;
+                } catch(e) {
+                    return false;
+                }
+            }
+            return true;
+        },
+        is_false: function() {
+            return this.get('value') === '' || this._super();
+        },
+        focus: function() {
+            var input = this.$('input:first')[0];
+            return input ? input.focus() : false;
+        },
+        set_dimensions: function (height, width) {
+            this._super(height, width);
+            this.$('input').css({
+                height: height,
+                width: width
+            });
+        },                        
+        store_dom_value: function () {
+            if (!this.get('effective_readonly')) {
+                this.internal_set_value(
+                    this.parse_value(
+                        this.$('input').val()));
+            }
+        },
+        parse_value: function(val, def) {
+            return formats.parse_value(val, this, def);  
+        },
+        format_value: function(val, def) {
+            return formats.format_value(val, this, def);
+        },
+        render_value: function() {
+            var show_value = this.format_value(this.get('value'), '');             
+
+            if (!this.get("effective_readonly")) {
+                this.$input = this.$el.find('input');
+                this.$input.val(show_value);
+            } else {
+                this.$(".oe_form_time_content").text(show_value);
+            }
+        },
+    });
+
+    core.form_widget_registry.add('timepicker', TimePicker);
+
+    return TimePicker;
+});

web_widget_timepicker/static/src/xml/time_picker.xml

@@ -0,0 +1,46 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<templates id="template" xml:space="preserve">
+	<t t-name="TimePickerField">
+	    <span t-att-class="'oe_form_field '+widget.widget_class" t-att-style="widget.node.attrs.style">
+	        <t t-if="!widget.get('effective_readonly')">
+	            <input t-att-type="'text'"
+	                class="o_timepicker_input"
+	                t-att-id="widget.id_for_label"
+	                t-att-tabindex="widget.node.attrs.tabindex"
+	                t-att-autofocus="widget.node.attrs.autofocus"
+	                t-att-placeholder="widget.node.attrs.placeholder"
+	                t-att-maxlength="widget.field.size"/>
+	            <span class="fa fa-clock-o o_timepicker_button"/>
+	        </t>
+	        <t t-if="widget.get('effective_readonly')">
+	            <span class="oe_form_time_content"></span>
+	        </t>
+	    </span>
+	</t>
+
+<!--  	<t t-name="TimePickerField">
+	    <span t-att-class="'oe_form_field '+widget.widget_class" t-att-style="widget.node.attrs.style">
+    	    <t t-if="!widget.get('effective_readonly')">
+	            <input t-att-type="'text'"
+	                class="o_timepicker_input"
+	                t-att-id="widget.id_for_label"
+	                t-att-tabindex="widget.node.attrs.tabindex"
+	                t-att-autofocus="widget.node.attrs.autofocus"
+	                t-att-placeholder="widget.node.attrs.placeholder"
+	                t-att-maxlength="widget.field.size"/>
+	            <span class="fa fa-clock-o o_timepicker_button"/>
+
+ 
+
+
+
+		   		<div class="o_timepicker">
+		        	<input type="text" class="o_timepicker_input"/>
+		        	<span class="fa fa-clock-o o_timepicker_button"/>
+		    	</div>
+ 		    </t>
+    </span>
+    </t>
+ -->
+</templates>

web_widget_timepicker/views/assets.xml

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<openerp>
+    <data>
+        <template id="assets_backend" name="web_widget_timepicker assets" inherit_id="web.assets_backend">
+            <xpath expr="." position="inside">
+                <script type="text/javascript" src="/web_widget_timepicker/static/src/js/jquery.timepicker.js"></script>
+                <script type="text/javascript" src="/web_widget_timepicker/static/src/js/timepicker_widget.js"></script>
+                <link rel="stylesheet" href="/web_widget_timepicker/static/src/css/jquery.timepicker.css"/>
+                <link rel="stylesheet" href="/web_widget_timepicker/static/src/css/timepicker.css"/>
+            </xpath>
+        </template>
+    </data>
+</openerp>