Initial commit for MMM-NextEvent, based on Boaz Arad's excellent MMM-CountDown.

No issue #

Author: cure

MMM-CountDown.css

@@ -0,0 +1,22 @@
+/*
+ *
+ * MMM-NextEvent
+ *
+ * 
+ * MIT Licensed.
+ *
+ * Custom here your css module
+ *
+ */
+
+.green {
+  color: #0f0;
+}
+
+.yellow {
+  color: #ff0;
+}
+
+.red {
+  color: #f00;
+}

MMM-CountDown.js

@@ -0,0 +1,110 @@
+Module.register("MMM-NextEvent",{
+	// Default module config.
+	defaults: {
+		event: "Next event",
+		date: "3000-01-01",
+		showHours: true,
+		showMinutes: true,
+		showSeconds: true,
+		customInterval: 1000,
+		daysLabel: 'd',
+		hoursLabel: 'h',
+		minutesLabel: 'm',
+		secondsLabel: 's',
+	},
+
+	// set update interval
+	start: function() {
+		var self = this;
+		self.getEvents();
+		setInterval(function() {
+			self.getEvents();
+			self.updateDom(); // no speed defined, so it updates instantly.
+		}, this.config.customInterval); 
+	},
+
+	updateDate: function(events) {
+		//console.log(events)
+		events.sort((a, b) => a.startDate.localeCompare(b.startDate))
+		if (typeof events[0] !== 'undefined') {
+			this.config.event = events[0].title;
+			this.config.date = events[0].startDateJ;
+		} else {
+			this.config.event = "Next event"
+			this.config.date = "0000-00-00"
+		}
+		this.updateDom(); // no speed defined, so it updates instantly.
+	},
+
+	getEvents: function() {
+		var now = moment().format("X")
+		var endOfDay = moment().endOf('day').format("X")
+		var filterFn = (event) => {
+			// Do not consider all-day events. Only consider events that start in the future in the next few days.
+			if ((event.isFullday !== true) && (event.startDate > now) && (event.startDate < endOfDay)) return true
+		}
+		var callbackFn = (events) => {
+			this.updateDate(events)
+		}
+		this.sendNotification("CALEXT2_EVENT_QUERY", {filter:filterFn, callback:callbackFn})
+	},
+
+	getStyles: function() {
+		return ["MMM-NextEvent.css"]
+	},
+
+	// Update function
+	getDom: function() {
+		var wrapper = document.createElement("div");
+
+		var timeWrapper = document.createElement("div");
+		var textWrapper = document.createElement("div");
+
+		textWrapper.className = "align-left week dimmed medium";
+		timeWrapper.className = "time bright xlarge light";
+		textWrapper.innerHTML=this.config.event;
+
+		var today = new Date(Date.now());
+		var target = new Date(this.config.date);
+		var timeDiff = target - today;
+
+		// Set days, hours, minutes and seconds
+		var diffDays = Math.floor(timeDiff / (1000 * 60 * 60 * 24));
+		var diffHours = Math.floor((timeDiff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+		var diffMinutes = Math.floor((timeDiff % (1000 * 60 * 60)) / (1000 * 60));
+		var diffSeconds = Math.floor((timeDiff % (1000 * 60)) / 1000);
+		
+		// Build the output
+		var hrs = '';
+		var mins = '';
+		var secs = '';
+		var days = '';
+		if (diffDays > 0) {
+			days = diffDays + this.config.daysLabel;
+		}
+
+		if(this.config.showHours == true) hrs = diffHours + this.config.hoursLabel;
+		if(this.config.showMinutes == true) mins = diffMinutes + this.config.minutesLabel;
+		if(this.config.showSeconds == true) secs = diffSeconds + this.config.secondsLabel;
+
+		if ((this.config.showMinutes == true) && (mins.length < 2)) { mins = "0" + mins; }
+		if ((this.config.showSeconds == true) && (secs.length < 2)) { secs = "0" + secs; }
+
+		if (this.config.date === "0000-00-00") {
+			timeWrapper.innerHTML = "Not today!";
+			timeWrapper.className = "time xlarge light green";
+		} else if (this.config.date !== "3000-01-01") {
+			timeWrapper.innerHTML = days + hrs + mins + secs;
+		}
+		if ((diffHours == 0) && (diffMinutes <= 5)) {
+			timeWrapper.className = "time xlarge light red";
+		} else if ((diffHours == 0) && (diffMinutes <= 10)) {
+			timeWrapper.className = "time xlarge light yellow";
+		}
+
+		wrapper.appendChild(textWrapper);
+		wrapper.appendChild(timeWrapper);
+
+		return wrapper;
+	}
+});

MMM-NextEvent.css

@@ -1,19 +1,32 @@
-# MMM-CountDown
-![Screenshot](https://github.com/boazarad/MMM-CountDown/raw/master/screenshots/screenshot.png)
+# MMM-NextEvent
 
-This is a module for the [MagicMirror²](https://github.com/MichMich/MagicMirror/) which can count down the days to a date/event.
+## Screenshot
+![Screenshot](https://github.com/cure/MMM-NextEvent/raw/main/screenshots/screenshot1.png)
+![Screenshot](https://github.com/cure/MMM-NextEvent/raw/main/screenshots/screenshot2.png)
+![Screenshot](https://github.com/cure/MMM-NextEvent/raw/main/screenshots/screenshot3.png)
+![Screenshot](https://github.com/cure/MMM-NextEvent/raw/main/screenshots/screenshot4.png)
 
-I've never written anything with Node.js before, so hopefully this isn't a total mess, if it is - feel free to lend a hand :)
+## Description
 
-## Using the module
+This is a module for [MagicMirror²](https://github.com/MichMich/MagicMirror/) which counts down to the next calendar event today. It is a slightly modified version of Boaz Arad's [MMM-CountDown](https://github.com/boazarad/MMM-CountDown), who did the hard work, thank you!
+
+This module requests an event list from [MMM-CalExt2](https://github.com/MMM-CalendarExt2/MMM-CalendarExt2) for the current date, and displays a countdown in hours and minutes to the next event. If there is no event later today, it displays a happy 'Not today!' message.
+
+## Installation
+
+```
+cd ~/MagicMirror/modules
+git clone --depth=1 https://github.com/cure/MMM-NextEvent
+```
+## Configuration
 
 To use this module, add the following configuration block to the modules array in the `config/config.js` file:
 
 ```js
 var config = {
     modules: [
         {
-            module: 'MMM-CountDown',
+            module: 'MMM-NextEvent',
             config: {
                 // See configuration options
             }
@@ -22,13 +35,12 @@ var config = {
 }
 ```
 
-## Configuration options
+### Configuration options
 
 | Option           | Description                                                                                                           |
 | ---------------- | --------------------------------------------------------------------------------------------------------------------- |
 | `position`       | *Required* Where do you want to place the counter (use standard magicmirror positions)                                |
-| `event`          | *Required* Name of event to count down to (displayed above counter)                                                   |
-| `date`           | *Required* Date to count down to (YYYY-MM-DD HH:MM:SS)                                                                |
+| `event`          | Name of the title displayed above counter when there is no next event. Default is 'Next event'                        |
 | `showHours`      | Decide whether or not to display the hours. Default is true                                                           |
 | `showMinutes`    | Decide whether or not to display the minutes. Default is true                                                         |
 | `showSeconds`    | Decide whether or not to display the seconds. Default is true                                                         |
@@ -37,5 +49,3 @@ var config = {
 | `hoursLabel`     | Choose how you wish to display your Hours label. Default is h                                                         |
 | `minutesLabel`   | Choose how you wish to display your Minutes label. Default is m                                                       |
 | `secondsLabel`   | Choose how you wish to display your Seconds label. Default is m                                                       |
-
-If either of the above are missing, the module will count down to the New Millenium (3000-01-01)

MMM-NextEvent.js

@@ -1,9 +1,9 @@
 {
-  "name": "MMM-CountDown",
+  "name": "MMM-NextEvent",
   "version": "1.0.0",
-  "description": "Count down to a specific event",
-  "main": "MMM-CountDown.js",
-  "author": "Boaz Arad",
+  "description": "Count down to the next calendar event of the day",
+  "main": "MMM-NextEvent.js",
+  "author": "Ward Vandewege",
   "license": "MIT",
   "devDependencies": {
     "grunt": "latest",