fix(list card): update due date formatting

sereneblue · Jan 9, 2021 · a75dcd9 · a75dcd9
1 parent 28ca516
commit a75dcd9
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 7 deletions.
diff --git a/src/components/column/ListCard.svelte b/src/components/column/ListCard.svelte
@@ -4,7 +4,7 @@
   import type { Card } from '../../datastore/models';
   import { PRIORITY, LABEL_COLOR } from '../../types';
   import type { TimeEntry } from '../../types';
-  import { formatDate, formatForStopwatch, formatTime } from '../../util';
+  import { beforeDate, formatDate, formatForStopwatch, formatTime } from '../../util';
   
   export let c: Card;
   export let isFocused: boolean = false;
@@ -82,7 +82,13 @@
           </div>
         {/if}
         {#if card.due}
-          <div class={card.isComplete ? "flex items-center rounded text-white bg-green-500 p-1" : card.due < new Date().getTime() ? "flex items-center rounded text-white bg-orange-600 p-1" : "flex items-center rounded p-1"}>
+          <div class={
+              card.isComplete ? "flex items-center rounded text-white bg-green-500 p-1" : 
+              beforeDate(card.due, 'today') ? 
+                "flex items-center rounded text-white bg-red-600 p-1" : 
+                beforeDate(card.due, 'tomorrow') ? 
+                  "flex items-center rounded text-white bg-orange-600 p-1" : 
+                  "flex items-center rounded p-1"}>
             <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
             <span class="ml-1">{formatDate(card.due)}</span>
           </div>

diff --git a/src/util/index.ts b/src/util/index.ts
@@ -1,7 +1,22 @@
 import { customAlphabet } from 'nanoid';
 
-let d: Date = new Date();
-let currentYear: number = new Date().getFullYear();
+const d: Date = new Date();
+const day: number = d.getDate();
+const month: number = d.getMonth();
+const year: number = d.getFullYear();
+
+const beforeDate = (timestamp: number, when: string): boolean => {
+  let tmpDate = new Date();
+
+  if (when === 'today') {
+    return timestamp < tmpDate.getTime();
+  } else if (when === 'tomorrow') {
+    tmpDate.setDate(tmpDate.getDate() + 1);
+    return timestamp < tmpDate.getTime();
+  }
+
+  return false;
+}
 
 const clickOutside = (node: Node, closeAction: Function): object => {
   const handleClick = (event: Event) => {
@@ -42,11 +57,17 @@ const getTimestamps = (d: Date): object => {
 const formatDate = (timestamp: number): string => {
   d.setTime(timestamp);
 
-  if (d.getFullYear() == currentYear) {
-    return d.toLocaleString('en', { month: 'short', day: 'numeric' });
+  if (
+    d.getDate() === day &&
+    d.getMonth() === month &&
+    d.getFullYear() === year
+  ) {
+    return d.toLocaleString('default', { hour: 'numeric', minute: 'numeric' });
+  } else if (d.getFullYear() == year) {
+    return d.toLocaleString('default', { month: 'short', day: 'numeric' });
   }
 
-  return d.toLocaleString('en', { month: 'short', day: 'numeric', year: 'numeric' });
+  return d.toLocaleString('default', { year: 'numeric' });
 }
 
 const formatForStopwatch = (seconds: number): string => {
@@ -85,6 +106,7 @@ const formatTime = (seconds: number): string => {
 const nanoid = customAlphabet('2346789ABCDEFGHJKLMNPQRTUVWXYZabcdefghijkmnpqrtwxyz', 10);
 
 export {
+  beforeDate,
   clickOutside,
   getTimestamps,
   formatDate,