+
+
+
+
+
+
+
diff --git a/systray_world_clock/static/src/js/SystrayWorldClock.js b/systray_world_clock/static/src/js/SystrayWorldClock.js
new file mode 100644
index 000000000..32e33d484
--- /dev/null
+++ b/systray_world_clock/static/src/js/SystrayWorldClock.js
@@ -0,0 +1,136 @@
+/** @odoo-module **/
+import { Component, useState, onMounted,useRef } from "@odoo/owl";
+import { useService } from "@web/core/utils/hooks";
+import { Dropdown } from "@web/core/dropdown/dropdown";
+import { registry } from "@web/core/registry";
+
+export class Analogue extends Component {
+ static template = "systray_world_clock.AnalogueInterface";
+
+ setup() {
+ super.setup();
+ this.hoursHandRef = useRef("hoursHand");
+ this.minutesHandRef = useRef("minutesHand");
+ this.secondsHandRef = useRef("secondsHand");
+ this.clockElementRef = useRef("clockElement");
+ onMounted(() => {
+ this.renderClock();
+ this.interval = setInterval(() => {
+ this.renderClock();
+ }, 1000);
+ });
+ }
+
+ calcTime(offset) {
+ const d = new Date();
+ const utc = d.getTime() + (d.getTimezoneOffset() * 60000);
+ const nd = new Date(utc + (3600000 * offset));
+ const options = {
+ year: 'numeric',
+ month: 'numeric',
+ day: 'numeric',
+ hour: 'numeric',
+ minute: 'numeric',
+ hour12: true
+ };
+ return [nd, nd.toLocaleString('en-US', options)];
+ }
+
+ renderClock() {
+ const [nd, localestring] = this.calcTime(this.props.offset);
+ const h = ((nd.getHours() % 12) + nd.getMinutes() / 59) * 30;
+ const m = nd.getMinutes() * 6;
+ const s = nd.getSeconds() * 6;
+
+ // Accessing the refs safely
+ if (this.hoursHandRef.el) this.hoursHandRef.el.style.transform = `rotate(${h}deg)`;
+ if (this.minutesHandRef.el) this.minutesHandRef.el.style.transform = `rotate(${m}deg)`;
+ if (this.secondsHandRef.el) this.secondsHandRef.el.style.transform = `rotate(${s}deg)`;
+
+ const clockElement = this.clockElementRef.el;
+ if (clockElement) {
+ if (18 <= nd.getHours() || nd.getHours() < 6) {
+ clockElement.classList.add('night-clock');
+ } else {
+ clockElement.classList.remove('night-clock');
+ }
+ }
+ }
+
+ willUnmount() {
+ clearInterval(this.interval);
+ }
+}
+
+export class WorldClock extends Component {
+ static components = { Dropdown, Analogue };
+ static template = "systray_world_clock.Systray_clock";
+
+ setup() {
+ super.setup();
+ this.orm = useService("orm");
+ this.action = useService("action");
+ this.state = useState({
+ isOpen: false,
+ notes: [],
+ });
+
+ this.loadClocks();
+ }
+
+ async loadClocks() {
+ const fields = ['name', 'tz', 'offset'];
+ const result = await this.orm.call("systray.world.clock.config", "search_read", [], { fields });
+
+ if (result.length > 0) {
+ this.state.isOpen = true;
+ const data = result.map(clock => {
+ const offsetStr = clock.offset.toString().replace('.', '_');
+ const currentClockClass = 'clock' + offsetStr + clock.id;
+ const [nd, localestring] = this.calcTime(clock.offset);
+ return {
+ id: clock.id,
+ name: clock.name,
+ offset: clock.offset,
+ tz: clock.tz,
+ currentClockClass,
+ nd,
+ localestring,
+ };
+ });
+ this.state.notes = data;
+ }
+ }
+
+ calcTime(offset) {
+ const d = new Date();
+ const utc = d.getTime() + (d.getTimezoneOffset() * 60000);
+ const nd = new Date(utc + (3600000 * offset));
+ const options = {
+ year: 'numeric',
+ month: 'numeric',
+ day: 'numeric',
+ hour: 'numeric',
+ minute: 'numeric',
+ hour12: true,
+ };
+ return [nd, nd.toLocaleString('en-US', options)];
+ }
+
+ onClickSettings(ev) {
+ ev.stopPropagation();
+ this.action.doAction({
+ type: 'ir.actions.act_window',
+ name: 'Clock Settings',
+ res_model: 'systray.world.clock.config',
+ view_mode: 'list,form',
+ target: 'current',
+ views: [[false, 'list'], [false, 'form']],
+ });
+ }
+}
+
+export const systrayItem = {
+ Component: WorldClock,
+};
+registry.category("systray").add("WorldClock", systrayItem, { sequence: 0 });
diff --git a/systray_world_clock/static/src/scss/systray_world_clock.scss b/systray_world_clock/static/src/scss/systray_world_clock.scss
new file mode 100644
index 000000000..e48478f77
--- /dev/null
+++ b/systray_world_clock/static/src/scss/systray_world_clock.scss
@@ -0,0 +1,143 @@
+.systray_clock_dropdown {
+ padding: 2em;
+ width: 1100px;
+}
+.settings_tz {
+ position: relative;
+ top: -0.5rem;
+ color: blueviolet;
+ background: lavender;
+ border: aliceblue;
+ float:right;
+ }
+
+#clocks_container {
+ display: flex;
+ justify-content: space-evenly;
+ flex-wrap: wrap;
+ .time-info {
+ padding: 10px 30px;
+ margin: 2em 0;
+ min-height: 50px;
+ border: 1px solid #dddddd;
+ border-radius: 10px;
+ background-color: transparent;
+ }
+}
+.clocks_container:not(:last-child) {
+ padding: 10px;
+ min-height: 50px;
+ border-bottom: 1px solid #9DA1AA;
+ background-color: transparent;
+}
+.clocks_container > p {
+ font-size: 20px;
+}
+
+//button
+:root {
+ --primary-light: #8abdff;
+ --primary: #6d5dfc;
+ --primary-dark: #5b0eeb;
+ --white: #FFFFFF;
+ --greyLight-1: #E4EBF5;
+ --greyLight-2: #c8d0e7;
+ --greyLight-3: #bec8e4;
+ --greyDark: #9baacf;
+}
+$shadow: .3rem .3rem .6rem var(--greyLight-2),
+-.2rem -.2rem .5rem var(--white);
+$inner-shadow: inset .2rem .2rem .5rem var(--greyLight-2),
+inset -.2rem -.2rem .5rem var(--white);
+
+/* CLOCK */
+.clock {
+ grid-column: 2 / 3;
+ grid-row: 1 / 3;
+ width: 12rem;
+ height: 12rem;
+ justify-self: center;
+ box-shadow: $shadow;
+ border-radius: 50%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ position: relative;
+ .hand {
+ position: absolute;
+ transform-origin: bottom;
+ bottom: 6rem;
+ border-radius: .2rem;
+ z-index: 200;
+ }
+ .hours {
+ width: .4rem;
+ height: 3.2rem;
+ background: var(--greyLight-3);
+
+ }
+ .minutes {
+ width: .4rem;
+ height: 4.6rem;
+ background: var(--greyDark);
+ }
+ .seconds {
+ width: .2rem;
+ height: 5.2rem;
+ background: var(--primary);
+ }
+ .point {
+ position: absolute;
+ width: .8rem;
+ height: .8rem;
+ border-radius: 50%;
+ background: var(--primary);
+ z-index: 300;
+ }
+ .in-border {
+ width: 95%;
+ height: 95%;
+ border-radius: 50%;
+ display: flex;
+ position: relative;
+ box-shadow: $inner-shadow;
+ .center {
+ width: 60%;
+ height: 60%;
+ position: absolute;
+ box-shadow: inset 1px 1px 1px var(--greyLight-2),
+ inset -1px -1px 1px var(--white);
+ border-radius: 50%;
+ top: 20%;
+ left: 20%;
+ filter: blur(1px);
+ }
+ div.digit {
+ position: absolute;
+ inset: 1px;
+ text-align: center;
+ transform: rotate(calc(var(--i) * (360deg / 12)));
+ span {
+ display: inline-block;
+ font-size: 80%;
+ font-weight: 600;
+ transform: rotate(calc(var(--i) * (-360deg / 12)));
+ }
+ }
+ }
+}
+.night-clock {
+ background-color: black;
+ color: white;
+}
+.no_clocks_span {
+ font-size: 16px;
+ font-weight: 500;
+ color: #714b67;
+ text-align: center;
+ background-color: #f2f2f2;
+ padding: 10px;
+ border-radius: 5px;
+ display: inline-block;
+ margin-top: -17px;
+}
diff --git a/systray_world_clock/static/src/xml/systray_world_clock.xml b/systray_world_clock/static/src/xml/systray_world_clock.xml
new file mode 100644
index 000000000..0ae66e4d8
--- /dev/null
+++ b/systray_world_clock/static/src/xml/systray_world_clock.xml
@@ -0,0 +1,105 @@
+
+
+
+
+
+
+
+
+
+ Community
+
+
+ Enterprise
+
+
+ Odoo.sh
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + This module helps to Restrict Customers In POS. +
+Systray World Clock +
+
+ 
+
+
+
+
+ 
+ Email Us
+
+
+ 
+ Skype Us
+
+
+
+ Email Us
+
+
+
+ Skype Us
+
+
+ 
+
+
+
+ 
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+ Key + Highlights
+
+
+
+
+
+ 
+
+
+ + Different timezones. +
++ We can add different time zones. +
+
+
+
+
+
+
+
+
+ + Digital and Analogue time. +
++ It displays both analog and digital + timezone. +
+
+
+
+
+
+
+
+
+ + Theme +
++ Shows black theme at night. +
+
+
+
+
+
+
+
+
+ Systray World Clock
+
+ Are you ready to make your business more
+ organized?
+
+
+
+
+ Are you ready to make your business more
+ organized?
+
Improve now!
+
+
+ 
+ 
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ 
+
+
+
+
+
+
+
+
+ + World Clock icon in + + systray. +
+
+
+ + +
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+ + Configure + + Timezone. +
+
+
+ + By Clicking the configuration + icon in the systray, you can + configure the timezone. +
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+ + Set the Location and + + Time Zone. +
+
+
+ + You can configure the location + and timezone. +
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+ + View for + + field +
+
+
+ + The globe icon in systray opens + the interface with all the + clocks configured in the + settings. +
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+ + Night theme for + + Night. +
+
+
+ + If the time is night then the + background color will be dark. +
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + Available in Odoo Community and + Enterprise.
+
+
+
+
+
+
+
+
+
+
+ + Displays both Digital and + Analogue time.
+
+
+
+
+
+
+
+
+
+
+ + Shows dark theme at night.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ + This module adds a world + clock to the systray, + showing the current time + in multiple countries + across different time zones. +
+
+
+
+
+
+
+ + The clock appears in + the top-right systray + area of the Odoo interface + for quick and easy access. +
+
+
+
+
+
+ + Yes, you can display + clocks for multiple + countries or cities simultaneously. +
+
+
+
+
+
+
+
+ + Latest Release 18.0.1.0.0 +
+ + 15th July 2025 + +
+
+
+
+
+
+
+ Add
+
+
+
+ -
+
- + Initial Commit + +
+
+ + Related Products +
+ +
+ 
+ 
+ 
+ 
+ 
+ + Our Services
+
+
+
+
+
+
+
+
+
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+
+
+
+
+ ....
+
+
+
+
+
+
+
+
+
+
+
+ No clocks configured. Please add a clock
+ in the
+ settings.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 1
+
+
+ 2
+
+
+ 3
+
+
+ 4
+
+
+ 5
+
+
+ 6
+
+
+ 7
+
+
+ 8
+
+
+ 9
+
+
+ 10
+
+
+ 11
+
+
+ 12
+
+
+ -
+