Browse Source

timestamp - diff for humans pipe

Carsten Porth 5 years ago
parent
commit
209840e11a

+ 1 - 0
app/package.json

@@ -43,6 +43,7 @@
     "firebase": "^5.2.0",
     "ionic-angular": "3.9.2",
     "ionicons": "3.0.0",
+    "javascript-time-ago": "^1.0.31",
     "rxjs": "5.5.11",
     "sw-toolbox": "3.6.0",
     "twit": "^2.2.11",

+ 1 - 1
app/src/components/tweet-header/tweet-header.html

@@ -5,5 +5,5 @@
       {{ user.name }}
       <span class="twitter-handle">@{{user.screen_name}}</span>
   </div>
-  <div class="timestamp">{{ tweetCreatedAt }}</div>
+  <div class="timestamp">{{ tweetCreatedAt | diffForHumans }}</div>
 </div>

+ 23 - 0
app/src/pipes/diff-for-humans/diff-for-humans.ts

@@ -0,0 +1,23 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import TimeAgo from 'javascript-time-ago';
+import en from 'javascript-time-ago/locale/en';
+
+TimeAgo.locale(en);
+const timeAgo = new TimeAgo('en-US');
+
+/**
+ * Generated class for the DiffForHumansPipe pipe.
+ *
+ * See https://angular.io/api/core/Pipe for more info on Angular Pipes.
+ */
+@Pipe({
+  name: 'diffForHumans',
+})
+export class DiffForHumansPipe implements PipeTransform {
+  /**
+   * Takes a timestamp and makes the diff readable for humans.
+   */
+  transform(value: string, ...args) {
+    return timeAgo.format(new Date(value));
+  }
+}

+ 5 - 2
app/src/pipes/pipes.module.ts

@@ -1,8 +1,11 @@
 import { NgModule } from '@angular/core';
 import { FriendlyNumberPipe } from './friendly-number/friendly-number';
+import { DiffForHumansPipe } from './diff-for-humans/diff-for-humans';
 @NgModule({
-	declarations: [FriendlyNumberPipe],
+	declarations: [FriendlyNumberPipe,
+    DiffForHumansPipe],
 	imports: [],
-	exports: [FriendlyNumberPipe]
+	exports: [FriendlyNumberPipe,
+    DiffForHumansPipe]
 })
 export class PipesModule {}