diff --git a/CHANGELOG.md b/CHANGELOG.md index b54a0bf6..d6584d0e 100755 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -13,8 +13,9 @@ This project adheres to [Semantic Versioning](http://semver.org/). - cleanup installers folder, remove externalized scripts ### Added -- Finish translation for "PRECIP", "UPDATE_INFO_MULTIPLE" and "UPDATE_INFO_SINGLE". +- Finnish translation for "PRECIP", "UPDATE_INFO_MULTIPLE" and "UPDATE_INFO_SINGLE". - Added the ability to hide the temp label and weather icon in the `currentweather` module to allow showing only information such as wind and sunset/rise. +- 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..e6ac880b 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,41 @@ 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); + var nextEvent; + if (now.isBefore(sunTimes.sunrise)) { + nextEvent = sunTimes.sunrise; + } else if (now.isBefore(sunTimes.sunset)) { + nextEvent = sunTimes.sunset; + } else { + const tomorrowSunTimes = SunCalc.getTimes(now.add(1, 'day'), this.config.lat, this.config.lon); + nextEvent = tomorrowSunTimes.sunrise; + } + const untilNextEvent = moment.duration(moment(nextEvent).diff(now)); + const untilNextEventString = untilNextEvent.hours() + 'h ' + untilNextEvent.minutes() + 'm'; + sunWrapper.innerHTML = ' ' + untilNextEventString + '' + + '' + 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); + const illuminatedFractionString = moonIllumination.fraction.toLocaleString(undefined, {style: 'percent'}); + moonWrapper.innerHTML = ' ' + illuminatedFractionString + '' + + ' ' + formatTime(this.config, moonTimes.rise) + ''+ + ' ' + formatTime(this.config, moonTimes.set) + ''; + } + /**************************************************************** * Create wrappers for ANALOG clock, only if specified in config */ @@ -210,6 +254,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 +290,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..fa6c2d5d 100644 --- a/modules/default/clock/clock_styles.css +++ b/modules/default/clock/clock_styles.css @@ -66,3 +66,13 @@ -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; +}