瀏覽代碼

Friendly numbers pipe

Carsten Porth 5 年之前
父節點
當前提交
65eda4a6e5

+ 3 - 1
app/src/app/app.module.ts

@@ -21,6 +21,7 @@ import { TweetBodyComponent } from '../components/tweet-body/tweet-body';
 import { TweetActionsComponent } from '../components/tweet-actions/tweet-actions';
 import { ProfilePage } from '../pages/profile/profile';
 import { ProfileHeaderComponent } from '../components/profile-header/profile-header';
+import { PipesModule } from '../pipes/pipes.module';
 
 @NgModule({
   declarations: [
@@ -41,7 +42,8 @@ import { ProfileHeaderComponent } from '../components/profile-header/profile-hea
     BrowserModule,
     HttpClientModule,
     IonicModule.forRoot(MyApp),
-    IonicStorageModule.forRoot()
+    IonicStorageModule.forRoot(),
+    PipesModule
   ],
   bootstrap: [IonicApp],
   entryComponents: [

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

@@ -3,7 +3,7 @@
   <img src="{{ user.profile_banner_url }}" alt="{{ user.name }} - Banner" class="profile-banner">
   <img src="{{ user.profile_image_url_https }}" alt="{{ user.name }}" class="profile-picture">
   <div padding>
-    <p class="profile-stats">{{ user.followers_count }} Followers | {{ user.friends_count }} Following</p>
+    <p class="profile-stats">{{ user.followers_count | friendlyNumber }} Followers | {{ user.friends_count | friendlyNumber }} Following</p>
     <p class="profile-description" *ngIf="user.description">{{ user.description }}</p>
     <div class="profile-infos">
       <span class="user-location" *ngIf="user.location">

+ 2 - 2
app/src/components/tweet-actions/tweet-actions.html

@@ -5,10 +5,10 @@
   </div>
   <div class="retweets">
     <ion-icon name="ios-git-compare-outline"></ion-icon>
-    <span>{{ data.retweet_count }}</span>
+    <span>{{ data.retweet_count | friendlyNumber }}</span>
   </div>
   <div class="likes">
     <ion-icon name="ios-heart-outline"></ion-icon>
-    <span>{{ data.favorite_count }}</span>
+    <span>{{ data.favorite_count | friendlyNumber }}</span>
   </div>
 </div>

+ 24 - 0
app/src/pipes/friendly-number/friendly-number.ts

@@ -0,0 +1,24 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+/**
+ * Generated class for the FriendlyNumberPipe pipe.
+ *
+ * See https://angular.io/api/core/Pipe for more info on Angular Pipes.
+ */
+@Pipe({
+  name: 'friendlyNumber',
+})
+export class FriendlyNumberPipe implements PipeTransform {
+  /**
+   * Takes a value and 
+   */
+  transform(value:number, ...args) {
+    if (value > 1000000) {
+      return (value/1000000).toFixed(1) + "M";
+    } else if (value > 1000) {
+      return (value/1000).toFixed(1) + "k";
+    } else {
+      return value;
+    }
+  }
+}

+ 8 - 0
app/src/pipes/pipes.module.ts

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