1 files changed, 126 insertions, 28 deletions

diff --git a/webui/src/Timeline.js b/webui/src/Timeline.js
index bf35994..6e97842 100644
--- a/webui/src/Timeline.js
+++ b/webui/src/Timeline.js
@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import './Timeline.scss';
 import axios from 'axios';
+import Event from './Event';
 import EventNode from './Components/Timeline/EventNode';
 import DateNode from './Components/Timeline/DateNode';
 import EndNode from './Components/Timeline/EndNode';
@@ -23,6 +24,61 @@ class Timeline extends Component {
   componentDidMount() {
     this.fetchEventList();
     this.initWebsocketConnection();
+    this.initUserNotification();
+  }
+
+  initUserNotification() {
+    if(!('Notification' in window))
+      return;
+
+    // Not yet approved?
+    if (Notification.permission === 'default') {
+
+      // Request permission
+      return Notification.requestPermission(function() {
+        //console.log("Got permission!");
+      });
+    }
+  }
+
+  showUserNotification(event) {
+
+    if(!('Notification' in window))
+      return;
+
+    if(Notification.permission !== "granted")
+      return;
+
+    // define new notification
+    var n = new Notification(
+        event.getSubtitle(),
+        {
+          'body': event.getTitle(),
+          'tag' : "event-" + event.id
+        }
+    );
+
+    // notify when shown successfull
+    n.onshow = function () {
+      console.log("onshow");
+    };
+
+    // remove the notification from Notification Center when clicked.
+    n.onclick = function () {
+        this.close();
+        console.log("onclick");
+    };
+
+    // callback function when the notification is closed.
+    n.onclose = function () {
+      console.log("onclose");
+    };
+
+    // notification cannot be presented to the user, this event is fired if the permission level is set to denied or default.
+    n.onerror = function () {
+      console.log("onerror");
+    };
+
   }
 
   fetchEventList() {
@@ -41,7 +97,7 @@ class Timeline extends Component {
           {
             //obj.key = obj.id;
             //console.log(obj);
-            return obj;
+            return new Event(obj);
           }
         );
         this.setState({ events: events, loaded: true });
@@ -52,48 +108,90 @@ class Timeline extends Component {
       
   }
 
+  addOrUpdateEvent(event) {
+
+    this.setState((prevState, props) => {
+
+      var newEvents = [];
+      var inserted = false;
+
+      for(var key in prevState.events) {
+        if(prevState.hasOwnProperty(key))
+          continue;
+        var curEvent = prevState.events[key];
+
+        if(curEvent.id === event.id) {
+          newEvents.push(event);
+          inserted = true;
+        } else {
+          newEvents.push(curEvent);
+        }
+      }
+
+      if(!inserted) {
+        newEvents.push(event);
+      }
+
+      return {
+        events: newEvents
+      }
+    
+    });
+  }
+
+  getEventWithId(id) {
+    var self = this;
+
+    for(var key in self.state.events) {
+
+      if(self.state.hasOwnProperty(key))
+        continue;
+
+      var event = self.state.events[key];
+
+      if(event.id === id)
+        return event;
+
+    }
+
+    return undefined;
+  }
+
   handleJSONMessage(data) {
 
-    if(data.type === "event-update") {
+    var event;
 
-      this.setState((prevState, props) => {
+    if(data.type === "new-event") {
 
-        var newEvents = [];
-        var inserted = false;
+      event = new Event(data.event);
+      this.addOrUpdateEvent(event);
 
-        for(var key in prevState.events) {
-          if(prevState.hasOwnProperty(key))
-            continue;
-          var event = prevState.events[key];
+    } else if(data.type === "event-updated") {
 
-          if(event.id === data.event.id) {
-            newEvents.push(data.event);
-            inserted = true;
-          } else {
-            newEvents.push(event);
-          }
-        }
+      event = new Event(data.event);
+      this.addOrUpdateEvent(event);
 
-        if(!inserted) {
-          newEvents.push(data.event);
-        }
+    } else if(data.type === "event-success") {
 
-        return {
-          events: newEvents
-        }
-      
-      });
+      event = this.getEventWithId(data.id);
+
+      if(event && event.type === "WebhookAction") {
+
+        this.showUserNotification(event);
+
+      }
 
     } else {
-      console.log("Unknown event");
-      console.log(data);
+
+      console.log("Unknown event: " + data.type);
+
     }
   }
 
   initWebsocketConnection() {
     var self = this;
 
-    var scheme = window.location.protocol == "https" ? "wss" : "ws";
+    var scheme = window.location.protocol === "https" ? "wss" : "ws";
     var uri = scheme + "://" + window.location.hostname + ":9000";
 
     if (process.env.NODE_ENV === "development") {
@@ -104,7 +202,7 @@ class Timeline extends Component {
     this.wsSocket.binaryType = "arraybuffer";
 
     this.wsSocket.onopen = function() {
-      console.log("Connected!");
+      //console.log("Connected!");
       this.wsIsOpen = true;
     }