+
+
+
+
+
+
+
+ 
+
+
+
+
+
+ Community
+
+
+ Enterprise
+
+
+ Odoo.sh
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/systray_world_clock/static/src/js/systray_world_clock.js b/systray_world_clock/static/src/js/systray_world_clock.js
new file mode 100644
index 000000000..708f27a91
--- /dev/null
+++ b/systray_world_clock/static/src/js/systray_world_clock.js
@@ -0,0 +1,168 @@
+/** @odoo-module **/
+import core from 'web.core';
+import SystrayMenu from 'web.SystrayMenu';
+import Widget from 'web.Widget';
+var QWeb = core.qweb;
+var ClockWidget = Widget.extend({
+ template: 'Systray_clock',
+ events: {
+ 'show.bs.dropdown': 'onClickWorldClock',
+ 'hide.bs.dropdown': 'stopTimer',
+ 'click .settings': 'onClickSettings'
+ },
+ /**
+ * Fetch data from the server to display the world clocks. Uses the RPC
+ * method to search and read data from the 'systray.world.clock.config'
+ * model with an empty domain and retrieves the 'name', 'tz', and
+ * 'offset' fields. The function then assigns the retrieved clock
+ * configurations to the ClockWidget instance's 'ClockConfigIds' property.
+ *
+ * @returns {Promise} A promise that resolves with the clock
+ * configurations retrieved from the server.
+ */
+ willStart: function () {
+ var self = this;
+ return self._rpc({
+ model: 'systray.world.clock.config',
+ method: 'search_read',
+ domain: [],
+ fields: ['name', 'tz', 'offset']
+ }).then(function (ClockConfigs) {
+ self.ClockConfigIds = ClockConfigs;
+ });
+ },
+ /**
+ * This function is called when the icon is clicked on the systray menu.
+ * Selects the clock container from the DOM, and then renders the clock
+ * interface and starts the interval timer to keep the clock updated.
+ */
+ onClickWorldClock: function (ev) {
+ ev.stopPropagation();
+ this.clocksContainer = this.el.querySelector('#clocks_container');
+ this.renderClock();
+ this.intrvl = setInterval(() => {
+ this.renderClock();
+ }, 1000);
+ },
+ // Calculating time based on the offset
+ calcTime: function (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)];
+ },
+ // Rendering the clock interface
+ renderClock: function () {
+ var interfaceTemplate;
+ // checks if no clocks are displayed.
+ if (!this.el.querySelector('.time-info')) {
+ if (this.ClockConfigIds.length > 0) {
+ this.clocksContainer.innerHTML = '';
+ }
+ this.clockRendered = false;
+ }
+ //calculates the time for each clock and updates the
+ // corresponding analogue clock display and digital time information.
+ for (let clock of this.ClockConfigIds) {
+ let offsetStr = clock.offset.toString().replace('.', '_');
+ let currentClockClass = 'clock' + offsetStr;
+
+ if (!this.clockRendered) {
+ interfaceTemplate = QWeb.render("AnalogueInterface", {
+ currentClockClass: currentClockClass,
+ country: clock.name
+ });
+ }
+ if (interfaceTemplate) {
+ this.clocksContainer.innerHTML += interfaceTemplate;
+ }
+ /**
+ * Updates the analogue time of a clock based on its time zone
+ * offset and renders it on the webpage.
+ *
+ * Behavior:
+ *
+ * *Uses calcTime function to calculate the current time of the
+ * clock based on its time zone offset.
+ *
+ * *Calculates the angle for each of the clock hands (hour,
+ * minute, and second) based on the current time.
+ *
+ * *Rotates each clock hand to the calculated
+ * angle using CSS transform: rotate() property.
+ *
+ * *Updates the digital time of the clock in the webpage by
+ * setting the HTML of #digital-info element with localestring.
+ *
+ * *Checks the current time and adds/removes night-clock class
+ * to the clock container based on whether it is daytime or
+ * nighttime.
+ */
+ this.updateAnalogueTime = function () {
+ const [nd, localestring] = this.calcTime(clock.offset);
+ var hoursArr = this.el.querySelectorAll('.' + currentClockClass + ' .hours');
+ var minutesArr = this.el.querySelectorAll('.' + currentClockClass + ' .minutes');
+ var secondsArr = this.el.querySelectorAll('.' + currentClockClass + ' .seconds');
+ let h = (nd.getHours() % 12) + nd.getMinutes() / 59;
+ let m = nd.getMinutes();
+ let s = nd.getSeconds();
+ h *= 30;
+ m *= 6;
+ s *= 6;
+ /**
+ * This function takes in a target element and a value, and
+ * sets the rotation style of the target element to the
+ * given value.
+ * @param target
+ * @param val
+ */
+ const rotation = (target, val) => {
+ target.style.transform = `rotate(${val}deg)`;
+ };
+ hoursArr.forEach(hours => rotation(hours, h));
+ minutesArr.forEach(minutes => rotation(minutes, m));
+ secondsArr.forEach(seconds => rotation(seconds, s));
+ $('#clocks_container .' + currentClockClass + '#digital-info').html(localestring);
+ if (18 <= nd.getHours() || nd.getHours() < 6) {
+ $('#clocks_container .clock.' + currentClockClass).addClass('night-clock');
+ }
+ else {
+ $('#clocks_container .' + currentClockClass).removeClass('night-clock');
+ }
+ };
+ // to update time in the clocks_container
+ this.updateTime = function () {
+ this.updateAnalogueTime();
+ };
+ this.updateTime();
+ }
+ this.clockRendered = true;
+ },
+ /**
+ * Stops the interval timer that updates the clocks when the dropdown is
+ * hidden. It clears the interval timer using the clearInterval method.
+ */
+ stopTimer: function () {
+ clearInterval(this.intrvl);
+ },
+ // opens settings
+ onClickSettings: function (ev) {
+ ev.stopPropagation();
+ this.do_action({
+ type: 'ir.actions.act_window',
+ name: 'Clock Settings',
+ res_model: 'systray.world.clock.config',
+ view_mode: 'list, form',
+ views: [[false, 'list'], [false, 'form']]
+ });
+ }
+});
+SystrayMenu.Items.push(ClockWidget);
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..5757dc1b7
--- /dev/null
+++ b/systray_world_clock/static/src/scss/systray_world_clock.scss
@@ -0,0 +1,129 @@
+.systray_clock_dropdown {
+ padding: 2em;
+ width: 1100px;
+ .settings {
+ position: absolute;
+ color: #fff;
+ left: 80em;
+ background-color: #71639e;
+ border: solid #71639e;
+ }
+}
+#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..e41705ebe
--- /dev/null
+++ b/systray_world_clock/static/src/xml/systray_world_clock.xml
@@ -0,0 +1,90 @@
+
+
+
+
+
+ 
+
+ + Systray World Clock
++ The World Clock in the Systray. +
+
+
+
+
+
+
+
+
+
+
+ + Explore this module +
+
+
+
+
+
+
+
+ + Overview +
+
+
+ + + This module provides users with a systray world clock feature + that allows them to track time zones for different cities + around the world.
+ +
+
+
+
+
+
+ + Features +
+
+
+
+ 
+
+
+
+
+ + Can add different timezones. +
+
+
+
+
+
+
+
+
+
+ + Displays the digital and analogue time.
+
+
+
+
+
+
+
+
+
+ + Clock faces changes color at nighttime.
+
+
+
+
+
+
+ + Screenshots +
+
+ 
+
+ + The Clocks will appear like this.
++ + The globe icon in systray opens the interface with all the clocks configured in the settings. The settings button opens the configuration page.
+
+
+ 
+
+
+ + Settings.
++ + Configure the Location and Timezone here.
+
+
+
+
+
+
+
+ 
+ 
+ 
+ 
+ 
+ 
+
+
+
+
+
+
+ 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
+
+
+
+
+
+
+
+ Need Help?
++
+
+
+
+
+
+
+
+
+
+
+
+ +91 86068 27707
+
+
+
+
+
+ 
+
+
+
+
+
+ +
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 1
+
+
+ 2
+
+
+ 3
+
+
+ 4
+
+
+ 5
+
+
+ 6
+
+
+ 7
+
+
+ 8
+
+
+ 9
+
+
+ 10
+
+
+ 11
+
+
+ 12
+
+
+