Merge remote-tracking branch 'origin/master'

src/ts/@overflow/app/config/index.ts

@@ -46,7 +46,7 @@ import HistoryReadAllByProbeAndTypeReducer from '@overflow/history/redux/reducer
 import HistoryTypeReadAllReducer from '@overflow/meta/redux/reducer/history_type_read_all';
 import NotificationReadAllUnconfirmedReducer from '@overflow/notification/redux/reducer/read_all_unconfirmed';
 import NotificationReadAllReducer from '@overflow/notification/redux/reducer/read_all';
-
+import NotificationReadCountReducer from '@overflow/notification/redux/reducer/read_unconfirmed_count';
 
 import AsyncRequest from '@overflow/app/redux/saga/AsyncRequest';
 
@@ -117,6 +117,7 @@ const reduxConfig: ReduxConfig = {
     SensorRegistSensorConfigReducer,
     NotificationReadAllUnconfirmedReducer,
     NotificationReadAllReducer,
+    NotificationReadCountReducer,
   ],
   sagaWatchers: [
     AsyncRequest,

src/ts/@overflow/app/views/layout/LogoBar.tsx

@@ -9,8 +9,7 @@ import {
   Button,
   Icon,
 } from 'semantic-ui-react';
-import Notification from '@overflow/notification/react/Notification';
-
+import NotificationBadge from '@overflow/notification/react/NotificationBadge';
 
 export class LogoBar extends React.Component<any, any> {
 
@@ -25,11 +24,6 @@ export class LogoBar extends React.Component<any, any> {
   }
 
   public render(): JSX.Element {
-    let icon =
-        <Menu.Item position='right'>
-          <Icon name='bell'/>
-          <Label color='red'>10</Label>
-        </Menu.Item>;
 
     return (
       <Container fluid style={{ background: '#f8f8f8', 'paddingRight': '7px' }}>
@@ -40,10 +34,7 @@ export class LogoBar extends React.Component<any, any> {
           </Menu.Item>
 
 
-
-          <Popup trigger={icon} on='click' wide >
-            <Notification />
-          </Popup>
+          <NotificationBadge />
 
         </Menu>
       </Container>

src/ts/@overflow/app/views/layout/TitleBar.tsx

@@ -96,41 +96,34 @@ export class TitleBar extends React.Component<Props, State> {
   }
 
   public handleBreadcrumb = (path: string) => {
-    console.log(path);
+    if(path === '/probe' || path === '/sensor' || path === '/target') {
+      path = path + 's';
+    }
     this.props.onRedirect(path);
   }
 
+
   // temporary
   public renderBreadcrumb(): JSX.Element[] {
-
-    let options = [
-      {
-        text: 'Probes',
-        value: 'probes',
-      },
-      {
-        text: 'Targets',
-        value: 'targets',
-      },
-      {
-        text: 'Sensors',
-        value: 'sensors',
-      },
-    ];
-
     let elems: JSX.Element[] = new Array();
     let pathArr = this.props.location.split('/');
     let index: number = 0;
-
+    let path = '';
     for (let item of pathArr) {
-      if (item !== '' && !item.match(/^\d+$/)) {
-        let path = '/' + item;
-        elems.push(
-          <Breadcrumb.Section key={index++} onClick={this.handleBreadcrumb.bind(this, path)}>
-            {this.capitalizeFirst(item)}
-            {/* <Dropdown inline options={options} defaultValue={this.capitalizeFirst(item)}/> */}
-          </Breadcrumb.Section>);
-        elems.push(<Breadcrumb.Divider key={index++} />);
+      if (item !== '') {
+        path = path + '/' + item;
+        if (pathArr[pathArr.length - 1] !== item) {
+          elems.push(
+            <Breadcrumb.Section key={index++} onClick={this.handleBreadcrumb.bind(this, path)}>
+              {this.capitalizeFirst(item)}
+            </Breadcrumb.Section>);
+          elems.push(<Breadcrumb.Divider key={index++} icon='right angle' />);
+        } else {
+          elems.push(
+            <Breadcrumb.Section key={index++}>
+              {this.capitalizeFirst(item)}
+            </Breadcrumb.Section>);
+        }
       }
     }
     return elems;
@@ -144,7 +137,7 @@ export class TitleBar extends React.Component<Props, State> {
             <Header.Subheader>
               <Breadcrumb size='mini'>
                 <Breadcrumb.Section onClick={this.handleBreadcrumb.bind(this, '/')}>Home</Breadcrumb.Section>
-                <Breadcrumb.Divider />
+                <Breadcrumb.Divider icon='right angle' />
                 {this.renderBreadcrumb()}
               </Breadcrumb>
             </Header.Subheader>

src/ts/@overflow/notification/react/NotificationBadge.tsx

@@ -0,0 +1,28 @@
+import { connect, Dispatch } from 'react-redux';
+import {
+    NotificationBadge,
+    StateProps as StateProps,
+    DispatchProps as DispatchProps,
+} from './components/NotificationBadge';
+import { push as routerPush } from 'react-router-redux';
+import * as asyncRequestActions from '@overflow/commons/redux/action/asyncRequest';
+import Member from '@overflow/member/api/model/Member';
+import * as readUnconfirmedCntActions from '../redux/action/read_unconfirmed_count';
+
+export function mapStateToProps(state: any, props: any): StateProps {
+    return {
+        count: state.count,
+    };
+}
+
+export function mapDispatchToProps(dispatch: Dispatch<any>): DispatchProps {
+    return {
+        onReadUnconfirmedCount: (member: Member) => {
+            dispatch(asyncRequestActions.request('NotificationService', 'readUnconfirmedCount',
+                                                 readUnconfirmedCntActions.REQUEST, JSON.stringify(member)));
+        },
+    };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(NotificationBadge);
+

src/ts/@overflow/notification/react/components/NotificationBadge.tsx

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import {
+    Container,
+    Popup,
+    Menu,
+    Icon,
+    Label,
+} from 'semantic-ui-react';
+import Member from '@overflow/member/api/model/Member';
+import Notification from '../Notification';
+
+export interface StateProps {
+    count: number;
+}
+
+export interface DispatchProps {
+    onReadUnconfirmedCount(member: Member): void;
+}
+
+export type Props = StateProps & DispatchProps;
+
+export interface State {
+}
+
+export class NotificationBadge extends React.Component<Props, State> {
+
+    constructor(props: Props, context: State) {
+        super(props, context);
+        this.state = {
+        };
+    }
+    public componentWillMount(): void {
+        const member: Member = {
+            id: 1,
+        };
+        this.props.onReadUnconfirmedCount(member);
+    }
+
+
+    public render(): JSX.Element {
+        let icon =
+            <Menu.Item position='right'>
+                <Icon name='bell' />
+                <Label color='red'>{this.props.count}</Label>
+            </Menu.Item>;
+
+        return (
+            <Container fluid>
+                <Popup trigger={icon} on='click' wide >
+                    <Notification />
+                </Popup>
+            </Container>
+        );
+    }
+}

src/ts/@overflow/notification/redux/action/read_unconfirmed_count.ts

@@ -0,0 +1,7 @@
+export type REQUEST = '@overflow/notification/read_unconfirmed_count/REQUEST';
+export type REQUEST_SUCCESS = '@overflow/notification/read_unconfirmed_count/REQUEST/SUCCESS';
+export type REQUEST_FAILURE = '@overflow/notification/read_unconfirmed_count/REQUEST/FAILURE';
+
+export const REQUEST: REQUEST = '@overflow/notification/read_unconfirmed_count/REQUEST';
+export const REQUEST_SUCCESS: REQUEST_SUCCESS = '@overflow/notification/read_unconfirmed_count/REQUEST/SUCCESS';
+export const REQUEST_FAILURE: REQUEST_FAILURE = '@overflow/notification/read_unconfirmed_count/REQUEST/FAILURE';

src/ts/@overflow/notification/redux/reducer/read_unconfirmed_count.ts

@@ -0,0 +1,24 @@
+import Action from '@overflow/commons/redux/Action';
+import { ReducersMapObject } from 'redux';
+import Page from '@overflow/commons/api/model/Page';
+
+import * as ReadCountActionTypes from '../action/read_unconfirmed_count';
+import ReadUnconfirmedState, { defaultState as ReadCountDefaultState } from '../state/ReadUnconfirmedCount';
+
+const reducer: ReducersMapObject = {
+  [ReadCountActionTypes.REQUEST_SUCCESS]:
+  (state: ReadUnconfirmedState = ReadCountDefaultState, action: Action<number>):
+  ReadUnconfirmedState => {
+      return {
+      ...state,
+      count: <number>action.payload,
+    };
+  },
+  [ReadCountActionTypes.REQUEST_FAILURE]:
+  (state: ReadUnconfirmedState = ReadCountDefaultState, action: Action<Error>):
+  ReadUnconfirmedState => {
+    return state;
+  },
+};
+
+export default reducer;

src/ts/@overflow/notification/redux/state/ReadUnconfirmedCount.ts

@@ -0,0 +1,13 @@
+import Page from '@overflow/commons/api/model/Page';
+
+export interface State {
+  readonly count?: number;
+  readonly error?: Error;
+}
+
+export const defaultState: State = {
+  count: undefined,
+  error: undefined,
+};
+
+export default State;