+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+ Community
+
+
+ Enterprise
+
+
+
+
+
+
+
+
+ 
+
+ + Systray World Clock
++ The World Clock in the Systray.
+ +
+
+
+
+ 
+
+
+ + Explore This + Module
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ + Overview +
+
+
+
+
+
+
+ This module adds a world clock in the systray which
+ displays the time in different countries around the world.
+
+
+
+
+ 
+
+
+ + Features +
+
+
+
+
+
+
+
+
+ 
+
+ Different timezones.
+
+
+
+ Different timezones.
+
+
+ Digital and Analogue time.
+
+
+ Digital and Analogue time.
+
+
+ Shows black theme at night.
+
+
+ Shows black theme at night.
+
+
+
+ 
+
+
+ + Screenshots +
+
+
+
+
+
+
+
+
+
+ 
+
+ + Configure the Location and Timezone here.
+
+
+ 
+
+
+ +
+
+
+ 
+
+
+ +
+
+
+ 
+
+ + The globe icon in systray opens the interface with all the clocks + configured in the settings. The settings button opens the + configuration page. +
+
+
+
+
+ 
+
+
+ + Related + Products +
+
+
+
+
+
+
+
+
+ 
+ 
+ 
+ 
+ 
+
+
+
+
+ 
+
+
+ + Our Services +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ + Odoo + Customization
+
+
+
+
+ 
+
+
+ + Odoo + Implementation
+
+
+
+
+
+ 
+
+
+ + Odoo + Support
+
+
+
+
+ 
+
+
+ + Hire + Odoo + Developer
+
+
+
+
+ 
+
+
+ + Odoo + Integration
+
+
+
+
+
+ 
+
+
+ + Odoo + Migration
+
+
+
+
+ 
+
+
+ + Odoo + Consultancy
+
+
+
+
+ 
+
+
+ + Odoo + Implementation
+
+
+
+ 
+
+
+ + Odoo + Licensing Consultancy
+
+
+
+
+ 
+
+
+ + Our + Industries +
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ + Trading +
++ Easily procure + and + sell your products
+
+
+
+
+ 
+
+
+ + POS +
++ Easy + configuration + and convivial experience
+
+
+
+
+ 
+
+
+ + Education +
++ A platform for + educational management
+
+
+
+
+ 
+
+
+ + Manufacturing +
++ Plan, track and + schedule your operations
+
+
+
+
+ 
+
+
+ + E-commerce & Website +
++ Mobile + friendly, + awe-inspiring product pages
+
+
+
+
+ 
+
+
+ + Service Management +
++ Keep track of + services and invoice
+
+
+
+
+ 
+
+
+ + Restaurant +
++ Run your bar or + restaurant methodically
+
+
+
+ 
+
+
+ + Hotel Management +
++ An + all-inclusive + hotel management application
+
+
+
+ 
+
+
+ + Support +
+
+
+
\ No newline at end of file
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..4929868ac
--- /dev/null
+++ b/systray_world_clock/static/src/js/SystrayWorldClock.js
@@ -0,0 +1,135 @@
+/** @odoo-module **/
+
+import { Component, useState, onMounted} 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";
+ async setup() {
+ super.setup(...arguments);
+ onMounted(() => {
+ this.renderClock();
+ this.intrvl = setInterval(() => {
+ this.renderClock();
+ }, 1000);
+ });
+ }
+
+ calcTime(offset) {
+ // Calculating time based on the offset
+ const d = new Date(),
+ 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(){
+ //Update the analogue clock time
+ let [nd, localestring] = this.calcTime(this.props.offset);
+ let currentClockClass = this.props.currentClockClass;
+ let h = (nd.getHours() % 12) + nd.getMinutes() / 59;
+ let m = nd.getMinutes();
+ let s = nd.getSeconds();
+ h *= 30;
+ m *= 6;
+ s *= 6;
+ const $hoursArr = document.querySelector('.' + currentClockClass + ' .hours');
+ const $minutesArr = document.querySelector('.' + currentClockClass + ' .minutes');
+ const $secondsArr = document.querySelector('.' + currentClockClass + ' .seconds');
+ if($hoursArr){
+ $hoursArr.style.transform = `rotate(${h}deg)`
+ $minutesArr.style.transform = `rotate(${m}deg)`
+ $secondsArr.style.transform = `rotate(${s}deg)`
+ }
+ if (18 <= nd.getHours() || nd.getHours() < 6) {
+ $('#clocks_container .clock.' + currentClockClass).addClass('night-clock');
+ }
+ else {
+ $('#clocks_container .' + currentClockClass).removeClass('night-clock');
+ }
+ }
+}
+
+export class WorldClock extends Component {
+ static components = { Dropdown, Analogue }
+ static template = "systray_world_clock.Systray_clock";
+ async setup() {
+ // Initialize and fetch the data from the time zone
+ super.setup(...arguments);
+ this.orm = useService("orm");
+ this.action = useService("action");
+ this.state = useState({
+ isOpen: false,
+ notes: [],
+
+ })
+ const fields = ['name', 'tz', 'offset'];
+ const domain = [];
+ const result = await this.orm.call("systray.world.clock.config", "search_read", [], {
+ fields: ["name", "tz", "offset"],
+ domain: [],
+ });
+ this.ClockConfigIds = result;
+ if (result.length != 0){
+ this.state.isOpen = true
+ }
+ const data = []
+ for (let clock of result) {
+ let offsetStr = clock.offset.toString().replace('.', '_');
+ let currentClockClass = 'clock' + offsetStr;
+ this.offset = clock.offset
+ let [nd, localestring] = this.calcTime(clock.offset);
+ data.push({
+ 'id': clock.id,
+ 'name': clock.name,
+ 'offset': clock.offset,
+ 'tz': clock.tz,
+ 'currentClockClass': currentClockClass + clock.id,
+ 'nd': nd,
+ 'localestring': localestring
+ });
+ }
+ this.state.notes = data;
+ }
+ // Calculating time based on the offset
+ calcTime(offset) {
+ const d = new Date(),
+ 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)];
+ }
+ //Settings view for adding the different timezone
+ 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',
+ 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..f15f57325
--- /dev/null
+++ b/systray_world_clock/static/src/scss/systray_world_clock.scss
@@ -0,0 +1,132 @@
+.systray_clock_dropdown {
+ padding: 2em;
+ width: 1100px;
+}
+.settings_tz {
+ position: relative;
+ top: 0.5rem;
+ color: blueviolet;
+ background: lavender;
+ border: aliceblue;
+ }
+
+
+#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;
+}
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..f842e83b6
--- /dev/null
+++ b/systray_world_clock/static/src/xml/systray_world_clock.xml
@@ -0,0 +1,103 @@
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+ No clocks configured. Please add a clock
+ in the
+ settings.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 1
+
+
+ 2
+
+
+ 3
+
+
+ 4
+
+
+ 5
+
+
+ 6
+
+
+ 7
+
+
+ 8
+
+
+ 9
+
+
+ 10
+
+
+ 11
+
+
+ 12
+
+
+