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;
+  };
+}

src/app/theme/msgCenter/msgCenter.html

@@ -15,13 +15,14 @@
         <a href>Settings</a>
       </div>
       <div class="msg-list">
-        <!--<a href class="clearfix" ng-repeat="msg in notifications">-->
-          <!--<div class="img-area"><img ng-class="{'photo-msg-item' : !msg.image}" ng-src="{{::( msg.image ||  (users[msg.userId].name | profilePicture) )}}"></div>-->
-          <!--<div class="msg-area">-->
-            <!--<div ng-bind-html="getMessage(msg)"></div>-->
-            <!--<span>{{ msg.time }}</span>-->
-          <!--</div>-->
-        <!--</a>-->
+        <a *ngFor="#msg of notifications" href class="clearfix" >
+          <div class="img-area"><img [ngClass]="{'photo-msg-item': !msg.image}" src="{{ ( msg.image ||  (users[msg.userId].name | profilePicture)) }}"></div>
+          <div class="msg-area">
+            <div [innerHTML]="getMessage(msg)"></div>
+
+            <span>{{ msg.time }}</span>
+          </div>
+        </a>
       </div>
       <a href>See all notifications</a>
     </div>
@@ -39,15 +40,15 @@
         <a href>Settings</a>
       </div>
       <div class="msg-list">
-        <!--<a href class="clearfix" ng-repeat="msg in messages">-->
-          <!--<div class="img-area"><img class="photo-msg-item" ng-src="{{::( users[msg.userId].name | profilePicture )}}"></div>-->
-          <!--<div class="msg-area">-->
-            <!--<div>{{ msg.text }}</div>-->
-            <!--<span>{{ msg.time }}</span>-->
-          <!--</div>-->
-        <!--</a>-->
+        <a *ngFor="#msg of messages" href class="clearfix">
+          <div class="img-area"><img [ngClass]="{'photo-msg-item': !msg.image}" src="{{ ( msg.image ||  (users[msg.userId].name | profilePicture)) }}"></div>
+          <div class="msg-area">
+            <div>{{ msg.text }}</div>
+            <span>{{ msg.time }}</span>
+          </div>
+        </a>
       </div>
       <a href>See all messages</a>
     </div>
   </li>
-</ul>
+</ul>

src/app/theme/pipes/image/profile-picture.pipe.ts

@@ -0,0 +1,11 @@
+import {Pipe, PipeTransform} from 'angular2/core';
+import {layoutPaths} from '../../theme.constants';
+
+@Pipe({name: 'profilePicture'})
+export class ProfilePicturePipe implements PipeTransform {
+
+  transform(input: string, args:string[]): string {
+    let ext = args[0] || 'png';
+    return layoutPaths.images.profile + input + '.' + ext;
+  }
+}

src/app/theme/theme.constants.ts

@@ -0,0 +1,10 @@
+export const IMAGES_ROOT = 'assets/img/';
+
+export const layoutPaths = {
+  images: {
+    root: IMAGES_ROOT,
+    profile: IMAGES_ROOT + 'app/profile/',
+    amMap: 'assets/img/theme/vendor/ammap//dist/ammap/images/',
+    amChart: 'assets/img/theme/vendor/amcharts/dist/amcharts/images/'
+  }
+};