[feature] Introduce disableNextEvent to hide next sun event (#3769)

Hello and thank you for wanting to contribute to the MagicMirror²
project!

**Please make sure that you have followed these 4 rules before
submitting your Pull Request:**

> 1. Base your pull requests against the `develop` branch.
> 2. Include these infos in the description:
>
> - Does the pull request solve a **related** issue? No
> - If so, can you reference the issue like this `Fixes
#<issue_number>`? N/A
> - What does the pull request accomplish? Use a list if needed.
Introduce showNextEvent to show/hide next sun event
> - If it includes major visual changes please add screenshots.
>
![image](https://github.com/user-attachments/assets/410f6a82-e4fe-4c40-a477-8249149febf3)
> 3. Please run `npm run lint:prettier` before submitting so that
>    style issues are fixed.
> 4. Don't forget to add an entry about your changes to
>    the CHANGELOG.md file.

**Note**: Sometimes the development moves very fast. It is highly
recommended that you update your branch of `develop` before creating a
pull request to send us your changes. This makes everyone's lives
easier (including yours) and helps us out on the development team.

Thanks again and have a nice day!

---------

Co-authored-by: BugHaver <43462320+lsaadeh@users.noreply.github.com>

CHANGELOG.md

@@ -11,6 +11,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 planned for 2025-07-01
 
+### Added
+
+- [clock] Added option 'disableNextEvent' to hide next sun event.
+
 ### Changed
 
 - [refactor] Simplify module loading process

modules/default/clock/clock.js

@@ -25,7 +25,7 @@ Module.register("clock", {
 		analogShowDate: "top", // OBSOLETE, can be replaced with analogPlacement and showTime, options: false, 'top', or 'bottom'
 		secondsColor: "#888888", // DEPRECATED, use CSS instead. Class "clock-second-digital" for digital clock, "clock-second" for analog clock.
 
-		showSunTimes: false,
+		showSunTimes: false, // options: true, false, 'disableNextEvent'
 		showMoonTimes: false, // options: false, 'times' (rise/set), 'percent' (lit percent), 'phase' (current phase), or 'both' (percent & phase)
 		lat: 47.630539,
 		lon: -122.344147
@@ -171,21 +171,28 @@ Module.register("clock", {
 		if (this.config.showSunTimes) {
 			const sunTimes = SunCalc.getTimes(now, this.config.lat, this.config.lon);
 			const isVisible = now.isBetween(sunTimes.sunrise, sunTimes.sunset);
-			let nextEvent;
-			if (now.isBefore(sunTimes.sunrise)) {
-				nextEvent = sunTimes.sunrise;
-			} else if (now.isBefore(sunTimes.sunset)) {
-				nextEvent = sunTimes.sunset;
-			} else {
-				const tomorrowSunTimes = SunCalc.getTimes(now.clone().add(1, "day"), this.config.lat, this.config.lon);
-				nextEvent = tomorrowSunTimes.sunrise;
+			let sunWrapperInnerHTML = "";
+
+			if (this.config.showSunTimes !== "disableNextEvent") {
+				let nextEvent;
+				if (now.isBefore(sunTimes.sunrise)) {
+					nextEvent = sunTimes.sunrise;
+				} else if (now.isBefore(sunTimes.sunset)) {
+					nextEvent = sunTimes.sunset;
+				} else {
+					const tomorrowSunTimes = SunCalc.getTimes(now.clone().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`;
+
+				sunWrapperInnerHTML = `<span class="${isVisible ? "bright" : ""}"><i class="fas fa-sun" aria-hidden="true"></i> ${untilNextEventString}</span>`;
 			}
-			const untilNextEvent = moment.duration(moment(nextEvent).diff(now));
-			const untilNextEventString = `${untilNextEvent.hours()}h ${untilNextEvent.minutes()}m`;
-			sunWrapper.innerHTML
-				= `<span class="${isVisible ? "bright" : ""}"><i class="fas fa-sun" aria-hidden="true"></i> ${untilNextEventString}</span>`
-				  + `<span><i class="fas fa-arrow-up" aria-hidden="true"></i> ${formatTime(this.config, sunTimes.sunrise)}</span>`
-				  + `<span><i class="fas fa-arrow-down" aria-hidden="true"></i> ${formatTime(this.config, sunTimes.sunset)}</span>`;
+
+			sunWrapperInnerHTML += `<span><i class="fas fa-arrow-up" aria-hidden="true"></i> ${formatTime(this.config, sunTimes.sunrise)}</span>`
+			  + `<span><i class="fas fa-arrow-down" aria-hidden="true"></i> ${formatTime(this.config, sunTimes.sunset)}</span>`;
+
+			sunWrapper.innerHTML = sunWrapperInnerHTML;
 			digitalWrapper.appendChild(sunWrapper);
 		}
 

tests/configs/modules/clock/clock_showSunNoEvent.js

@@ -0,0 +1,20 @@
+let config = {
+	address: "0.0.0.0",
+	ipWhitelist: [],
+	timeFormat: 12,
+
+	modules: [
+		{
+			module: "clock",
+			position: "middle_center",
+			config: {
+				showSunTimes: "disableNextEvent"
+			}
+		}
+	]
+};
+
+/*************** DO NOT EDIT THE LINE BELOW ***************/
+if (typeof module !== "undefined") {
+	module.exports = config;
+}

tests/e2e/modules/clock_spec.js

@@ -92,6 +92,9 @@ describe("Clock module", () => {
 		it("should show the sun times", async () => {
 			const elem = await helpers.waitForElement(".clock .digital .sun");
 			expect(elem).not.toBeNull();
+
+			const elem2 = await helpers.waitForElement(".clock .digital .sun .fas.fa-sun");
+			expect(elem2).not.toBeNull();
 		});
 
 		it("should show the moon times", async () => {
@@ -100,6 +103,21 @@ describe("Clock module", () => {
 		});
 	});
 
+	describe("with showSunNextEvent disabled", () => {
+		beforeAll(async () => {
+			await helpers.startApplication("tests/configs/modules/clock/clock_showSunNoEvent.js");
+			await helpers.getDocument();
+		});
+
+		it("should show the sun times", async () => {
+			const elem = await helpers.waitForElement(".clock .digital .sun");
+			expect(elem).not.toBeNull();
+
+			const elem2 = document.querySelector(".clock .digital .sun .fas.fa-sun");
+			expect(elem2).toBeNull();
+		});
+	});
+
 	describe("with showWeek config enabled", () => {
 		beforeAll(async () => {
 			await helpers.startApplication("tests/configs/modules/clock/clock_showWeek.js");