overdueRemindersWidget.js

//
// Settings
//

const MAX_TASKS_SHOWN = 5;
const NOW = new Date();
const BG_COLOR = Color.black();
const TITLE_COLOR = Color.white();
const TITLE_FONT = Font.systemFont(20);
const OVERDUE_COLOR = new Color("#f73c82");
const NO_OVERDUE_COLOR = new Color("#61b0a5");
const GET_BODY_FONT = fontSize => Font.thinMonospacedSystemFont(fontSize);

//
// Utils
//

const compareReminderDuedates = (reminderA, reminderB) =>
  reminderA.dueDate - reminderB.dueDate;
const sortRemindersByDuedateAsc = reminders =>
  reminders.sort(compareReminderDuedates);

/** Round date down to 00:00 */
const stripTime = date => new Date(new Date(date).setHours(0, 0, 0, 0));

/** d1 - d2: will be negative if d2 > d1 */
const daysBetween = (d1, d2) => {
  const differenceMs = stripTime(d1).getTime() - stripTime(d2).getTime();
  return Math.floor(differenceMs / 86400000);
};

const getOverdueTasks = async () => {
  const all = await Reminder.allIncomplete();
  return sortRemindersByDuedateAsc(
    all.filter(task => task.dueDate && task.dueDate < NOW)
  );
};

//

const getWidget = async () => {
  const overdueTasks = await getOverdueTasks();

  const widget = new ListWidget();
  widget.backgroundColor = BG_COLOR;

  const title = widget.addText(`Overdue tasks (${overdueTasks.length})`);
  title.textColor = TITLE_COLOR;
  title.font = TITLE_FONT;

  widget.addSpacer(5);

  if (overdueTasks.length) {
    overdueTasks.slice(0, MAX_TASKS_SHOWN).forEach(({ title, dueDate }) => {
      const task = widget.addText(`(-${daysBetween(NOW, dueDate)}) ${title}`);
      task.textColor = OVERDUE_COLOR;
      task.font = GET_BODY_FONT(16);
      task.lineLimit = 1;
    });
  } else {
    const noTasks = widget.addText("All caught up!");
    noTasks.textColor = NO_OVERDUE_COLOR;
    noTasks.font = GET_BODY_FONT(18);
  }

  return widget;
};

(async () => {
  const widget = await getWidget();
  if (config.runsInWidget) {
    Script.setWidget(widget);
    Script.complete();
  } else await widget.presentMedium();
})();