add sun/moon rise/set times

Icons become bold when the object is above the horizon. Also shows
percent of moon illumination.

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)

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 = '<span class="' + (isVisible ? 'bold' : 'light') + '"><i class="fa fa-sun-o" aria-hidden="true"></i></span>' +
+				'<span><i class="fa fa-arrow-up" aria-hidden="true"></i>' + formatTime(this.config, sunTimes.sunrise) + '</span>' +
+				'<span><i class="fa fa-arrow-down" aria-hidden="true"></i>' + formatTime(this.config, sunTimes.sunset) + '</span>';
+		}
+		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 = '<span class="' + (isVisible ? 'bold' : 'light') + '"><i class="fa fa-moon-o" aria-hidden="true"></i> ' + moonIllumination.fraction.toLocaleString(undefined, {style: 'percent'}) + '</span>' +
+				'<span><i class="fa fa-arrow-up" aria-hidden="true"></i> ' + formatTime(this.config, moonTimes.rise) + '</span>'+
+				'<span><i class="fa fa-arrow-down" aria-hidden="true"></i> ' + formatTime(this.config, moonTimes.set) + '</span>';
+		}
+
 		/****************************************************************
 		 * 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) {

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;
+}