From 7d55ff9c67d6bc8180315446098d6ef4eedb67fe Mon Sep 17 00:00:00 2001
From: Joseph Schorr <josephschorr@users.noreply.github.com>
Date: Mon, 27 Nov 2017 12:56:06 +0200
Subject: [PATCH] Add a <time-display> component for better display of time

---
 .../ui/time-display/time-display.component.html      |  1 +
 .../ui/time-display/time-display.component.ts        | 12 ++++++++++++
 static/js/quay.module.ts                             |  2 ++
 3 files changed, 15 insertions(+)
 create mode 100644 static/js/directives/ui/time-display/time-display.component.html
 create mode 100644 static/js/directives/ui/time-display/time-display.component.ts

diff --git a/static/js/directives/ui/time-display/time-display.component.html b/static/js/directives/ui/time-display/time-display.component.html
new file mode 100644
index 000000000..d209651d4
--- /dev/null
+++ b/static/js/directives/ui/time-display/time-display.component.html
@@ -0,0 +1 @@
+<span>{{ ::$ctrl.datetime | amDateFormat:'dddd, MMMM Do YYYY, h:mm A' }}</span>
\ No newline at end of file
diff --git a/static/js/directives/ui/time-display/time-display.component.ts b/static/js/directives/ui/time-display/time-display.component.ts
new file mode 100644
index 000000000..f3c513532
--- /dev/null
+++ b/static/js/directives/ui/time-display/time-display.component.ts
@@ -0,0 +1,12 @@
+import { Input, Component } from 'ng-metadata/core';
+
+/**
+ * A component that displays when an event occurred.
+ */
+@Component({
+  selector: 'timeDisplay',
+  templateUrl: '/static/js/directives/ui/time-display/time-display.component.html'
+})
+export class TimeDisplayComponent {
+  @Input('<') public datetime: any;
+}
diff --git a/static/js/quay.module.ts b/static/js/quay.module.ts
index 36b6913c9..f47094cc3 100644
--- a/static/js/quay.module.ts
+++ b/static/js/quay.module.ts
@@ -38,6 +38,7 @@ import { ClipboardCopyDirective } from './directives/ui/clipboard-copy/clipboard
 import { CorTabsModule } from './directives/ui/cor-tabs/cor-tabs.module';
 import { TriggerDescriptionComponent } from './directives/ui/trigger-description/trigger-description.component';
 import { TimeAgoComponent } from './directives/ui/time-ago/time-ago.component';
+import { TimeDisplayComponent } from './directives/ui/time-display/time-display.component';
 import { MarkdownModule } from './directives/ui/markdown/markdown.module';
 import * as Clipboard from 'clipboard';
 
@@ -81,6 +82,7 @@ import * as Clipboard from 'clipboard';
     ClipboardCopyDirective,
     TriggerDescriptionComponent,
     TimeAgoComponent,
+    TimeDisplayComponent,
   ],
   providers: [
     ViewArrayImpl,