diff --git a/CHANGELOG.md b/CHANGELOG.md index d7e63e7e..2549defb 100755 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -14,6 +14,7 @@ This project adheres to [Semantic Versioning](http://semver.org/). ### Added - Finnish translation for "PRECIP", "UPDATE_INFO_MULTIPLE" and "UPDATE_INFO_SINGLE". +- Sun and Moon data to the `clock` module. ### Fixed - Force declaration of public ip adress in config file (ISSUE #1852) diff --git a/modules/default/clock/clock.js b/modules/default/clock/clock.js index d566c52f..4eb7a6d3 100644 --- a/modules/default/clock/clock.js +++ b/modules/default/clock/clock.js @@ -26,10 +26,15 @@ Module.register("clock",{ analogShowDate: "top", // options: false, 'top', or 'bottom' secondsColor: "#888888", timezone: null, + + showSunTimes: false, + showMoonTimes: false, + lat: 47.630539, + lon: -122.344147, }, // Define required scripts. getScripts: function() { - return ["moment.js", "moment-timezone.js"]; + return ["moment.js", "moment-timezone.js", "suncalc.js"]; }, // Define styles. getStyles: function() { @@ -93,11 +98,15 @@ Module.register("clock",{ var timeWrapper = document.createElement("div"); var secondsWrapper = document.createElement("sup"); var periodWrapper = document.createElement("span"); + var sunWrapper = document.createElement("div"); + var moonWrapper = document.createElement("div"); var weekWrapper = document.createElement("div"); // Style Wrappers dateWrapper.className = "date normal medium"; timeWrapper.className = "time bright large light"; secondsWrapper.className = "dimmed"; + sunWrapper.className = "sun dimmed small"; + moonWrapper.className = "moon dimmed small"; weekWrapper.className = "week dimmed medium"; // Set content of wrappers. @@ -142,6 +151,29 @@ Module.register("clock",{ timeWrapper.appendChild(periodWrapper); } + function formatTime(config, time) { + var formatString = hourSymbol + ':mm'; + if (config.showPeriod && config.timeFormat !== 24) { + formatString += config.showPeriodUpper ? 'A' : 'a'; + } + return moment(time).format(formatString); + } + if (this.config.showSunTimes) { + const sunTimes = SunCalc.getTimes(now, this.config.lat, this.config.lon); + const isVisible = now.isBetween(sunTimes.sunrise, sunTimes.sunset); + sunWrapper.innerHTML = '' + + '' + formatTime(this.config, sunTimes.sunrise) + '' + + '' + formatTime(this.config, sunTimes.sunset) + ''; + } + if (this.config.showMoonTimes) { + const moonIllumination = SunCalc.getMoonIllumination(now.toDate()); + const moonTimes = SunCalc.getMoonTimes(now, this.config.lat, this.config.lon); + const isVisible = now.isBetween(moonTimes.rise, moonTimes.set); + moonWrapper.innerHTML = ' ' + moonIllumination.fraction.toLocaleString(undefined, {style: 'percent'}) + '' + + ' ' + formatTime(this.config, moonTimes.rise) + ''+ + ' ' + formatTime(this.config, moonTimes.set) + ''; + } + /**************************************************************** * Create wrappers for ANALOG clock, only if specified in config */ @@ -210,6 +242,8 @@ Module.register("clock",{ // Display only a digital clock wrapper.appendChild(dateWrapper); wrapper.appendChild(timeWrapper); + wrapper.appendChild(sunWrapper); + wrapper.appendChild(moonWrapper); wrapper.appendChild(weekWrapper); } else if (this.config.displayType === "analog") { // Display only an analog clock @@ -244,6 +278,8 @@ Module.register("clock",{ digitalWrapper.style.cssFloat = "none"; digitalWrapper.appendChild(dateWrapper); digitalWrapper.appendChild(timeWrapper); + digitalWrapper.appendChild(sunWrapper); + digitalWrapper.appendChild(moonWrapper); digitalWrapper.appendChild(weekWrapper); var appendClocks = function(condition, pos1, pos2) { diff --git a/modules/default/clock/clock_styles.css b/modules/default/clock/clock_styles.css index 1df9bf83..7bd4554a 100644 --- a/modules/default/clock/clock_styles.css +++ b/modules/default/clock/clock_styles.css @@ -66,3 +66,10 @@ -ms-transform-origin: 50% 100%; transform-origin: 50% 100%; } + +.module.clock .sun, .module.clock .moon { + display: flex; +} +.module.clock .sun > *, .module.clock .moon > * { + flex: 1; +}