Menu
I'm new to openerp's web dev, I would appreciate some help. I want to create count up timer widget, for example in a textbox, with start and a stop button (include in my new custom field or separate).
I made a small javascript function to count up time.
Should I create a new widget by extending basic FieldChar ? Create a new type of field ?
Where do I put my counter code, and how to display it on a char field (or new type of field) ?
I found some doc about how to extend with something like openerp.web.form.FieldChar :
openerp.web_mymodule = function(openerp) {
openerp.web.form.Field.include({
init: function(view, node) {
console.log('mine');
this._super(view, node);
}
});
}
I need some guidance to put all this together even with openerp's doc about how interface works.
Thanks in advance
Here is where I am: Module : web_uptimer
web_uptimer.js:
openerp.web_uptimer = function (openerp)
{
openerp.web.form.widgets.add('uptimer', 'openerp.web_uptimer.CountUp');
openerp.web_uptimer.CountUp = openerp.web.form.FieldChar.extend(
{
template : "uptimer.template",
init: function (view, code) {
this._super(view, code);
console.log('counting...');
alert('counting...');
}
});
}
web_uptimer.xml:
<?xml version="1.0" encoding="UTF-8"?>
<templates id="template" xml:space="preserve">
<t t-name="uptimer.template">
<html>
</html>
</t>
</templates>
my quick count up timer test:
<html>
<head>
<title></title>
<script type="text/javascript">
var counter = 0;
var minutes = 0;
var hours = 0;
var timer;
var todisplay;
var h2disp;
var m2disp;
var s2disp;
function countUP ()
{
counter = counter + 1;//increment the counter by 1
if(counter == 60)
{
counter = 0;
minutes = minutes + 1;
if(minutes == 60)
{
minutes = 0;
hours = hours + 1
}
}
if(counter < 10)
{
s2disp = "0" + counter;
}
else
{
s2disp = counter;
}
if(minutes < 10)
{
m2disp = "0" + minutes;
}
else
{
m2disp = minutes;
}
if(hours < 10)
{
h2disp = "0" + hours;
}
else
{
h2disp = hours;
}
todisplay = h2disp + ":" + m2disp + ":" + s2disp;
document.getElementById("timer_container").innerHTML = todisplay;
}
</script>
</head>
<body onload='timer=setInterval("countUP()", 1000 );'>
<div id="timer_container">00:00:00</div>
<div>
<button onclick='clearInterval(timer);'>Stop Timer</button>
<button onclick='timer=setInterval("countUP()", 1000 );'>Continue Timer</button>
</div>
</body>
</html>
233
I managed to do my timer as an openerp action for trial, the timer counts up, display is updated etc...
Now I want this to become an openerp field which I could use in forms:
I'm close to it, but buttons aren't working anymore.
Here is my code:
module name is web_example:
src/js/first_module.js:
openerp.web_example = function (openerp) {
openerp.web.form.widgets.add('FieldUpTimer', 'openerp.web.form.FieldUpTimer');
openerp.web.form.FieldUpTimer = openerp.web.form.FieldChar.extend({
template: 'web_example.action',
init: function () {
this._super.apply(this, arguments);
this._start = null;
this._watch = null;
},
start: function() {
this.$element.find('button#bstart').click(_.bind(this.mystart, this));
this.$element.find('button#bstart').click(this.mystart);
this._start = null;
},
countUP: function (counter,minutes,hours,timer,todisplay,h2disp,m2disp,s2disp)
{
var h, m, s;
// Subtracting javascript dates returns the difference in milliseconds
var diff = new Date() - this._start;
s = diff / 1000;
m = Math.floor(s / 60);
s -= 60*m;
h = Math.floor(m / 60);
m -= 60*h;
todisplay = _.str.sprintf("%02d:%02d:%02d", h, m, s);
document.getElementById("extimer").innerHTML = todisplay;
},
mystart: function () {
alert('pffff ça marche');
this.$element.addClass('oe_web_example_started')
.removeClass('oe_web_example_stopped');
//timer=setInterval(this.countUP(counter,minutes,hours,timer,todisplay,h2disp,m2disp,s2disp), 1000 );
this._start = new Date();
this._watch = setInterval(this.proxy('countUP'),33);
},
destroy: function () {
if (this._watch) {
clearInterval(this._watch);
}
this._super();
}
});
};
src/css/web_example.css:
.openerp .oe_web_example {
color: black;
background-color: white;
height: 100%;
}
.openerp .oe_web_example h4 {
margin: 0;
font-size: 100%;
}
.openerp .oe_web_example.oe_web_example_started .oe_web_example_start button,
.openerp .oe_web_example.oe_web_example_stopped .oe_web_example_stop button { display: none },
src/xml/web_example.xml: i remove < as I didn't (quickly) find a way to display html code correctly
templates>
div t-name="web_example.action" class="oe_web_example">
p>
button type="button" id="bstart">start</button>
h4 class="oe_web_example_timer" id="extimer">00:00:00</h4>
/p>
button type="button" id="bstop">Stop</button>
/div>
/templates>
/web_example.xml
<?xml version="1.0" encoding="utf-8"?>
<openerp>
<data>
<record model="ir.actions.act_window" id="action_web_example_form">
<field name="name">web_example_class</field>
<field name="res_model">web_example_class</field>
</record>
<record model="ir.ui.view" id="action_web_example_form_view">
<field name="name">web_example.form</field>
<field name="model">web_example_class</field>
<field name="type">form</field>
<field name="arch" type="xml">
<form string="Web Example View">
<field name="test2" widget="FieldUpTimer"/>
</form>
</field>
</record>
<menuitem name="WEB EXAMPLE" action="action_web_example_form" id="web_example_menu"/>
</data>
</openerp>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With