[FEATURE] Time tracking widget for significant events joelshepherd#626

There is now two different way to count-up, but this one can also count time since something. I will be leaving both, choose whatever you want.

src/plugins/widgets/index.ts

@@ -1,4 +1,5 @@
 import countdown from './countdown';
+import since from './since';
 import css from "./css";
 import github from "./github";
 import greeting from "./greeting";
@@ -23,6 +24,7 @@ import bookmarks from "./bookmarks";
 export const widgetConfigs = [
   countdown,
   bookmarks,
+  since,
   css,
   github,
   greeting,

src/plugins/widgets/since/Since.sass

@@ -0,0 +1,3 @@
+.Since
+    &.relativeTime
+        font-style: italic;

src/plugins/widgets/since/Since.tsx

@@ -0,0 +1,28 @@
+import React, { FC } from "react";
+import { FormattedRelativeTime } from "react-intl";
+
+import { useTime } from "../../../hooks";
+import { Props, defaultData } from "./types";
+import "./Since.sass";
+
+const Since: FC<Props> = ({ data = defaultData }) => {
+
+  const from = useTime().getTime();
+  const to = data.time;
+  const diff = ((to - from) / 1000) | 0;
+
+
+  return (
+    <div className="Since">
+      <h3>
+        {data.title || "Since"}&nbsp;
+        {diff > 0 ? "will be" : "was"}&nbsp;
+        <span className={`Since relativeTime`}>
+          <FormattedRelativeTime value={diff} updateIntervalInSeconds={1} />
+        </span>
+      </h3>
+    </div>
+  );
+};
+
+export default Since;

src/plugins/widgets/since/SinceSettings.tsx

@@ -0,0 +1,63 @@
+import { format } from "date-fns";
+import React, { FC } from "react";
+import { defaultData, Props } from "./types";
+
+function formatDate(time: number): string {
+  return format(time, "yyyy-MM-dd");
+}
+
+function formatTime(time: number): string {
+  return format(time, "HH:mm:ss");
+}
+
+function buildDateObject(time: number, timeStr: string): Date {
+  return new Date(`${formatDate(time)} ${timeStr || "00:00:00"}`);
+}
+
+const SinceSettings: FC<Props> = ({ data = defaultData, setData }) => (
+  <div className="CssSettings">
+    <label>
+      What
+      <input
+        type="text"
+        value={data.title || ""}
+        onChange={(event) => setData({ ...data, title: event.target.value })}
+      />
+    </label>
+
+    <label>
+      When
+      <label>
+        Date
+        <input
+          type="date"
+          value={formatDate(data.time)}
+          onChange={(event) =>
+            setData({
+              ...data,
+              time: (event.target.value
+                ? new Date(event.target.value)
+                : new Date()
+              ).getTime(),
+            })
+          }
+        />
+      </label>
+      <label>
+        Time
+        <input
+          type="time"
+          value={formatTime(data.time)}
+          onChange={(event) => {
+            setData({
+              ...data,
+              time: buildDateObject(data.time, event.target.value).getTime(),
+            });
+          }}
+        />
+      </label>
+    </label>
+  </div>
+);
+
+export default SinceSettings;

src/plugins/widgets/since/index.ts

@@ -0,0 +1,13 @@
+import { Config } from '../../types';
+import Since from './Since';
+import SinceSettings from './SinceSettings';
+
+const config: Config = {
+  key: 'widget/since',
+  name: 'Since',
+  description: 'This widget tracks the time elapsed since or remaining until a specified event.',
+  dashboardComponent: Since,
+  settingsComponent: SinceSettings,
+};
+
+export default config;

src/plugins/widgets/since/types.ts

@@ -0,0 +1,12 @@
+import { API } from '../../types';
+
+type Data = {
+  time: number;
+  title?: string;
+};
+
+export type Props = API<Data>;
+
+export const defaultData: Data = {
+  time: Date.now(),
+};