Notifications

tasklist/src/app/app.module.ts

@@ -4,6 +4,7 @@ import { MyApp } from './app.component';
 import { Home } from '../pages/home/home';
 import { ListProject } from '../pages/listProject/listProject';
 import { ListTask, PopOverPage } from '../pages/listTask/listTask';
+import { ListNotification } from '../pages/listNotification/listNotification';
 import { ModalAddProject } from '../pages/modalAddProject/modalAddProject';
 import { ModalAddTask } from '../pages/modalAddTask/modalAddTask';
 import { Login } from '../pages/login/login';
@@ -24,6 +25,7 @@ import { Config } from '../config/config';
     ModalAddTask,
     PopOverPage,
 	  MyTask,
+    ListNotification,
     DetailTaskPopover
   ],
   imports: [
@@ -43,6 +45,7 @@ import { Config } from '../config/config';
     ModalAddTask,
     PopOverPage,
 	  MyTask,
+    ListNotification,
     DetailTaskPopover
   ],
   providers: [

tasklist/src/pages/listNotification/listNotification.html

@@ -0,0 +1,33 @@
+<ion-header>
+  <ion-navbar align-title="left" class="bar-positive" color="main">
+    <button ion-button menuToggle>
+      <ion-icon name="menu"></ion-icon>
+    </button>
+
+    <ion-title>Notifications</ion-title>
+  </ion-navbar>
+</ion-header>
+
+<ion-content>
+  <ion-list inset>
+
+    <ion-item *ngFor="let notification of notifications">
+      <ion-item (click)="notificationTapped($event, notification)" class="notification {{notification.is_read ? 'read' : 'not-read'}} {{notification.target_type}}-{{notification.target_intention}}">
+        <table>
+          <tr>
+            <td class="container-icon">
+              <ion-icon *ngIf="notification.is_read" name="notifications-outline"></ion-icon>
+              <ion-icon *ngIf="!notification.is_read" name="notifications"></ion-icon>
+            </td>
+            <td class="container-content">
+              <p class="title">{{notification.title}}</p>
+              <p class="text">{{notification.text}}</p>
+              <p class="sender">From: <span class="name">{{notification.sender.username}}</span></p>
+            </td>
+          </tr>
+        </table>
+      </ion-item>
+    </ion-item>
+
+  </ion-list>
+</ion-content>

tasklist/src/pages/listNotification/listNotification.scss

@@ -0,0 +1,18 @@
+list-notification {
+
+  .notification {
+    .container-icon {
+      width: 40px;
+    }
+    .title {
+      font-size: 1.5rem;
+      font-weight: bold;
+    }
+    .sender {
+      .name {
+        font-weight: bold;
+      }
+    }
+  }
+
+}

tasklist/src/pages/listNotification/listNotification.ts

@@ -0,0 +1,69 @@
+import { Component } from '@angular/core';
+
+import { NavController, NavParams, ToastController } from 'ionic-angular';
+
+import { NotificationService } from "../../services/notificationService";
+
+@Component({
+  selector: 'list-notification',
+  templateUrl: 'listNotification.html',
+  providers: [NotificationService]
+})
+export class ListNotification {
+  notifications: Array<any>;
+
+  constructor(
+    public navCtrl: NavController,
+    public navParams: NavParams,
+    public toastCtrl: ToastController,
+    private notificationService: NotificationService
+  ) {
+    this.getDataFromApi();
+  }
+
+  getDataFromApi() {
+    this.notificationService.listNotifications().subscribe(
+      response => {
+        this.notifications = response.json()
+      },
+      err => {
+        let toast = this.toastCtrl.create({
+          message: 'Error : Connection server',
+          dismissOnPageChange: true
+        });
+        toast.present();
+      }
+    );
+  }
+
+  notificationTapped(event, notification) {
+    // Mark notification as read or unread
+    let handler;
+    if( notification.is_read ) {
+      handler = this.notificationService.markNotificationAsUnread(notification.id);
+    } else {
+      handler = this.notificationService.markNotificationAsRead(notification.id);
+    }
+
+    handler.subscribe(
+      response => {
+        let toast = this.toastCtrl.create({
+          message: 'Notification "' + notification.title + '"' + (notification.is_read ? 'was marked as unread' : 'was mark as read'),
+          duration: 3000
+        });
+        toast.present();
+
+        // Refresh project list
+        this.getDataFromApi();
+      },
+      err => {
+        let toast = this.toastCtrl.create({
+          message: 'Error : Connection server',
+          dismissOnPageChange: true
+        });
+        toast.present();
+      }
+    );
+  }
+
+}

tasklist/src/pages/listProject/listProject.html

@@ -7,6 +7,9 @@
     <ion-title>Projects</ion-title>
 
     <ion-buttons end>
+      <button ion-button icon-only (click)="notificationTapped()">
+        <ion-icon name="notifications"></ion-icon>
+      </button>
       <button ion-button icon-only (click)="openModal()">
         <ion-icon name="add-circle"></ion-icon>
       </button>

tasklist/src/pages/listProject/listProject.ts

@@ -3,6 +3,7 @@ import { Component } from '@angular/core';
 import { ModalController, NavController, NavParams, ToastController } from 'ionic-angular';
 
 import { ListTask } from '../listTask/listTask';
+import { ListNotification } from '../listNotification/listNotification';
 import { ModalAddProject } from '../modalAddProject/modalAddProject';
 import {ProjectService} from '../../services/projectService';
 import { Project } from '../../models/projectModel';
@@ -38,6 +39,10 @@ export class ListProject {
     });
   }
 
+  notificationTapped() {
+    this.navCtrl.push(ListNotification);
+  }
+
   deleteProject(item) {
     let title = item.name;
 

tasklist/src/pages/login/login.ts

@@ -45,7 +45,7 @@ export class Login {
         // Redirect after control
         this.storage.set('username', this.username);
         this.storage.set('password', this.password);
-        this.storage.set('token', data.token)
+        this.storage.set('token', data.token);
         this.navCtrl.setRoot(ListProject, { });
       },
       err => {

tasklist/src/services/notificationService.ts

@@ -0,0 +1,66 @@
+import {Http, Headers, RequestOptions, URLSearchParams} from '@angular/http';
+import 'rxjs/add/operator/map';
+import {Injectable} from "@angular/core";
+import { Observable } from 'rxjs/Rx';
+import { Storage } from '@ionic/storage';
+import { Config } from '../config/config';
+
+@Injectable()
+export class NotificationService {
+  public serverURL:string;
+  public propertiesURL:string;
+
+  constructor(public storage: Storage, protected http:Http, private _config:Config) {
+    this.serverURL = _config.get('apiUrl');
+    this.propertiesURL = this.serverURL + '/notification';
+  }
+
+  buildOptions(params){
+    let headers = new Headers();
+    let storage = new Storage();
+
+    return storage.get("token").then(
+      (token) => {
+        headers.append('Authorization', 'Token ' + token);
+        let options;
+        if(params){
+          options = new RequestOptions({ headers: headers, search: params });
+        }
+        else {
+          options = new RequestOptions({ headers: headers });
+        }
+        return options;
+      }
+    )
+  }
+
+  listNotifications() {
+    return Observable
+      .fromPromise(this.buildOptions(null))
+      .switchMap((options) => this.http.get(this.propertiesURL, options));
+  }
+
+  getNotification(id) {
+    return Observable
+      .fromPromise(this.buildOptions(null))
+      .switchMap((options) => this.http.get(this.propertiesURL + '/' + id, options));
+  }
+
+  markNotificationAsRead(id) {
+    let data = new URLSearchParams();
+    data.append('is_read', 'True');
+
+    return Observable
+      .fromPromise(this.buildOptions(null))
+      .switchMap((options) => this.http.patch(this.propertiesURL + '/' + id, data, options));
+  }
+
+  markNotificationAsUnread(id) {
+    let data = new URLSearchParams();
+    data.append('is_read', 'False');
+
+    return Observable
+      .fromPromise(this.buildOptions(null))
+      .switchMap((options) => this.http.patch(this.propertiesURL + '/' + id, data, options));
+  }
+}