Timer Widget

Auteur: Dustin Mimbela

Prix du module Gratuit

Demander un devis

Documentation Complète du Module

Timer Widget for Odoo

A reusable timer widget component for Odoo. This technical module provides a clean, standard OWL component that can be integrated into any Odoo module requiring real-time timer functionality.

Lightweight, framework-agnostic, and follows Odoo's official patterns.

Key Features

Real-time Updates: Timer updates every second (or every 10ms with milliseconds enabled).
Configurable Format: Display as MM:SS or MM:SS.mmm with milliseconds.
Clean & Neutral: No hardcoded styles - customize as needed in your module.
OWL Component: Built with Odoo's OWL framework following official patterns.

Usage Guide

Step 1: Add Dependency

In your module's __manifest__.py, add timer_widget to dependencies:

{
    'name': 'My Module',
    'depends': ['base', 'timer_widget'],
    ...
}

Step 2: Import in JavaScript

Import the Timer component in your JavaScript file:

/** @odoo-module **/

import { Timer } from "@timer_widget/js/timer_widget";

class MyField extends Component {
    static components = { Timer };
    ...
}

Step 3: Use in Template

Add the Timer component to your XML template:

<!-- Basic usage (seconds only) -->
<Timer value="duration" ongoing="isRunning" />

<!-- With milliseconds -->
<Timer value="duration" ongoing="isRunning" showMilliseconds="true" />

Component Props

value (Number, required): Duration in seconds
ongoing (Boolean, optional): Whether timer is running (default: false)
showMilliseconds (Boolean, optional): Show milliseconds format (default: false)

Complete Example

Here's a complete example showing how to create a custom field widget using the Timer component:

Python Model

duration = fields.Float('Duration (seconds)')
is_running = fields.Boolean('Running')
start_time = fields.Datetime('Start Time')

def get_duration(self):
    """Get current duration including running time"""
    self.ensure_one()
    duration = self.duration
    if self.is_running and self.start_time:
        delta = fields.Datetime.now() - self.start_time
        duration += delta.total_seconds()
    return int(duration)

JavaScript Field Widget

import { Timer } from "@timer_widget/js/timer_widget";

class MyTimerField extends Component {
    static components = { Timer };
    
    setup() {
        this.orm = useService("orm");
        this.duration = 0;
        
        useRecordObserver(async (record) => {
            if (record.data.is_running) {
                this.duration = await this.orm.call(
                    "my.model", "get_duration", [record.resId]
                );
            } else {
                this.duration = Math.floor(record.data.duration);
            }
        });
    }
    
    get ongoing() {
        return this.props.record.data.is_running;
    }
}

XML Template

<t t-name="my_module.MyTimerField">
    <Timer value="duration" ongoing="ongoing" />
</t>

Help and Support

Besoin d’intégrer du matériel à Odoo POS ?

Développement de modules sur mesure, connexion directe de balances commerciales, imprimantes thermiques (IP/Bluetooth/USB) et flux d’automatisation.