msgCenter component, profilePicture pipe, images migration

src/app/theme/msgCenter/msgCenter.component.ts

@@ -1,8 +1,109 @@
 import {Component, ViewEncapsulation} from 'angular2/core';
+import {ProfilePicturePipe} from '../pipes/image/profile-picture.pipe';
 
 @Component({
     selector: 'msg-center',
     styles: [ require('./msgCenter.scss') ],
-    template: require('./msgCenter.html')
+    template: require('./msgCenter.html'),
+    pipes: [ProfilePicturePipe]
 })
-export class MsgCenter {}
+export class MsgCenter  {
+  users = {
+    0: {
+      name: 'Vlad'
+    },
+    1: {
+      name: 'Kostya'
+    },
+    2: {
+      name: 'Andrey'
+    },
+    3: {
+      name: 'Nasta'
+    }
+  };
+
+  notifications = [
+    {
+      userId: 0,
+      template: '&name posted a new article.',
+      time: '1 min ago'
+    },
+    {
+      userId: 1,
+      template: '&name changed his contact information.',
+      time: '2 hrs ago'
+    },
+    {
+      image: 'assets/img/shopping-cart.svg',
+      template: 'New orders received.',
+      time: '5 hrs ago'
+    },
+    {
+      userId: 2,
+      template: '&name replied to your comment.',
+      time: '1 day ago'
+    },
+    {
+      userId: 3,
+      template: 'Today is &name\'s birthday.',
+      time: '2 days ago'
+    },
+    {
+      image: 'assets/img/comments.svg',
+      template: 'New comments on your post.',
+      time: '3 days ago'
+    },
+    {
+      userId: 1,
+      template: '&name invited you to join the event.',
+      time: '1 week ago'
+    }
+  ];
+
+  messages = [
+    {
+      userId: 3,
+      text: 'After you get up and running, you can place Font Awesome icons just about...',
+      time: '1 min ago'
+    },
+    {
+      userId: 0,
+      text: 'You asked, Font Awesome delivers with 40 shiny new icons in version 4.2.',
+      time: '2 hrs ago'
+    },
+    {
+      userId: 1,
+      text: 'Want to request new icons? Here\'s how. Need vectors or want to use on the...',
+      time: '10 hrs ago'
+    },
+    {
+      userId: 2,
+      text: 'Explore your passions and discover new ones by getting involved. Stretch your...',
+      time: '1 day ago'
+    },
+    {
+      userId: 3,
+      text: 'Get to know who we are - from the inside out. From our history and culture, to the...',
+      time: '1 day ago'
+    },
+    {
+      userId: 1,
+      text: 'Need some support to reach your goals? Apply for scholarships across a variety of...',
+      time: '2 days ago'
+    },
+    {
+      userId: 0,
+      text: 'Wrap the dropdown\'s trigger and the dropdown menu within .dropdown, or...',
+      time: '1 week ago'
+    }
+  ];
+
+  getMessage(msg) {
+    var text = msg.template;
+    if (msg.userId || msg.userId === 0) {
+      text = text.replace('&name', '<strong>' + this.users[msg.userId].name + '</strong>');
+    }
+    return text;
+  };
+}