Initial commit

This is a first attempt at tracking an interactive todo list. It's currently built around the idea that you'll have items that repeat on a daily basis, so every day at midnight it will rotate out the previous day and in the current day. Completed todos are currently only stored as local storage on the browser, but should probably eventually be sent to another server somewhere that can coordinate the list of todos. This would more easily allow family members to add todos from their phone or similar.

Lots more to do here, including making the way it tracks daily items smarter. This is a good first step, though.
This commit is contained in:
2019-03-19 15:29:29 -05:00
commit 1e7c17eaa5
2 changed files with 161 additions and 0 deletions

90
MMM-todo.js Normal file
View File

@ -0,0 +1,90 @@
Module.register("MMM-todo", {
defaults: {
todos: []
},
start: function() {
var self = this
setTimeout(function() {
self.dailyUpdate()
}, self.getTimeToMidnight() - new Date())
},
dailyUpdate: function() {
var self = this
self.updateDom()
setTimeout(function() {
self.dailyUpdate()
}, 24 * 60 * 60 * 1000)
},
getDom: function() {
var self = this
var today = new Date()
var todayStr = self.getDateString(today)
var yesterday = new Date()
yesterday.setDate(today.getDate() - 1)
var yesterdayStr = self.getDateString(yesterday)
var wrapper = document.createElement("div")
self.config.todos.forEach(element => {
var id = element.id
// this is ugly. do better.
if (element.isToday) {
id = id + "_" + todayStr
} else if (element.isYesterday) {
id = id + "_" + yesterdayStr
}
wrapper.appendChild(self.getCheckbox(element.label, id))
});
return wrapper
},
getDateString(date) {
var td = String(date.getDate()).padStart(2, '0')
var tm = String(date.getMonth() + 1).padStart(2, '0')
var ty = date.getFullYear()
return ty + tm + td
},
getTimeToMidnight() {
var timeToMidnight = new Date()
timeToMidnight.setHours(24, 0, 0, 0)
return timeToMidnight
},
getCheckbox: function(label, id) {
var container = document.createElement("label")
container.className = "container"
container.innerText = label
var cb = document.createElement("input")
cb.type = "checkbox"
if (id !== undefined) {
cb.id = id
}
if (localStorage.getItem(cb.id)) {
cb.checked = true
}
cb.onclick = function(ev) {
localStorage.setItem(ev.target.id, cb.checked)
}
var cm = document.createElement("span")
cm.className = "checkmark"
container.appendChild(cb)
container.appendChild(cm)
return container
},
getStyles: function() {
return [this.file("MMM-todo.css")]
}
})