916 lines
33 KiB
JavaScript
916 lines
33 KiB
JavaScript
import React from "react";
|
|
import { inject, observer } from "mobx-react";
|
|
import { Link } from "react-router-dom";
|
|
import { Helmet } from "react-helmet";
|
|
import "../../styles/constants.scss";
|
|
import "../../styles/style.scss";
|
|
import "./style.scss";
|
|
import { LINKS } from "../../routes";
|
|
import startcase from "lodash.startcase";
|
|
import Route from "./routes";
|
|
import moment from 'moment';
|
|
import {
|
|
Icon,
|
|
Button,
|
|
Modal,
|
|
notification
|
|
} from 'antd';
|
|
import {
|
|
// Divider,
|
|
// Drawer,
|
|
// List,
|
|
// ListItem,
|
|
IconMenu,
|
|
// IconButton,
|
|
// MenuItem,
|
|
DropDownMenu,
|
|
RaisedButton,
|
|
Paper,
|
|
Dialog,
|
|
Snackbar,
|
|
// Toolbar,
|
|
ToolbarGroup,
|
|
ToolbarSeparator,
|
|
// ToolbarTitle,
|
|
// Badge
|
|
} from 'material-ui';
|
|
import IconUserCircle from 'material-ui/svg-icons/action/account-circle';
|
|
import ShoppingCart from 'material-ui/svg-icons/action/shopping-cart';
|
|
import DepositDialog from './../DepositDialog';
|
|
import WithdrawDialog from './../WithdrawDialog';
|
|
import IconMenus from 'material-ui/svg-icons/navigation/menu';
|
|
import LoadingDialog from '../LoadingDialog/index';
|
|
import * as _ from 'lodash'; // TODO: remove this, import only needed module from lodash
|
|
import { black } from "material-ui/styles/colors";
|
|
import cinnamonSugar from 'cinnamon-sugar';
|
|
import ButterToast from 'butter-toast';
|
|
import 'material-design-icons/iconfont/material-icons.css';
|
|
import { grey400, darkBlack, lightBlack } from 'material-ui/styles/colors';
|
|
// import { getMobileOperatingSystem } from '../../stores/firebase';
|
|
import Alert from "../../components/Alert";
|
|
import EmptyComponent from '../EmptyComponent';
|
|
import NumberFormat from 'react-number-format';
|
|
import faker from 'faker';
|
|
import { Route as RouteDOM } from 'react-router-dom'
|
|
import WalletComponent from "./WalletComponent";
|
|
import { APP_TYPE } from "../../config/app";
|
|
|
|
|
|
//new material ui
|
|
import AppBar from '@material-ui/core/AppBar';
|
|
import Toolbar from '@material-ui/core/Toolbar';
|
|
import IconButton from '@material-ui/core/IconButton';
|
|
import Typography from '@material-ui/core/Typography';
|
|
import InputBase from '@material-ui/core/InputBase';
|
|
import Badge from '@material-ui/core/Badge';
|
|
import MenuItem from '@material-ui/core/MenuItem';
|
|
import Menu from '@material-ui/core/Menu';
|
|
import { withStyles } from '@material-ui/core/styles';
|
|
import MenuIcon from '@material-ui/icons/Menu';
|
|
import SearchIcon from '@material-ui/icons/Search';
|
|
import AccountCircle from '@material-ui/icons/AccountCircle';
|
|
import CartIcon from '@material-ui/icons/ShoppingCart';
|
|
import NotificationsIcon from '@material-ui/icons/Notifications';
|
|
import MoreIcon from '@material-ui/icons/MoreVert';
|
|
import CancelIcon from '@material-ui/icons/Cancel';
|
|
import ListIcon from '@material-ui/icons/FormatListBulleted';
|
|
import { styles } from './styles';
|
|
|
|
import Drawer from '@material-ui/core/Drawer';
|
|
// import Button from '@material-ui/core/Button';
|
|
import List from '@material-ui/core/List';
|
|
import Divider from '@material-ui/core/Divider';
|
|
import ListItem from '@material-ui/core/ListItem';
|
|
import ListItemIcon from '@material-ui/core/ListItemIcon';
|
|
import ListItemText from '@material-ui/core/ListItemText';
|
|
import InboxIcon from '@material-ui/icons/MoveToInbox';
|
|
import MailIcon from '@material-ui/icons/Mail';
|
|
|
|
faker.locale = 'id_ID';
|
|
@inject("appstate")
|
|
@observer
|
|
class App extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.props = props;
|
|
this.state = {
|
|
scriptTawkto: false,
|
|
redirect: false,
|
|
open: (window.innerWidth < 600) ? false : true,
|
|
openSecondary: false,
|
|
value: '',
|
|
additionalData: {},
|
|
valueMultiple: [''],
|
|
valueSingle: '',
|
|
visible: false,
|
|
selectedMenu: this.props.location.pathname,
|
|
projectId: 'project-id',
|
|
breadcrumbs: this
|
|
.props
|
|
.location
|
|
.pathname
|
|
.split('/')
|
|
.map(path => startcase(path)),
|
|
|
|
anchorEl: null,
|
|
mobileMoreAnchorEl: null,
|
|
left: false,
|
|
};
|
|
this.defaultState = Object.assign({}, this.state);
|
|
this.user = props.appstate.user;
|
|
this.authStore = props.appstate.auth;
|
|
this.globalUI = props.appstate.globalUI;
|
|
this.http = props.appstate.http;
|
|
this.appstate = props.appstate;
|
|
this.settingStore = props.appstate.setting;
|
|
this.transactionStore = props.appstate.transaction;
|
|
this.dashboardStore = props.appstate.dashboard;
|
|
this.taskStore = props.appstate.task;
|
|
this.appStore = props.appstate.app;
|
|
this.profileStore = props.appstate.profile;
|
|
this.notificationStore = props.appstate.notification;
|
|
//
|
|
// if (getMobileOperatingSystem() !== 'iOS') {
|
|
// this.messaging = firebase.messaging();
|
|
// this.notification();
|
|
// }
|
|
}
|
|
|
|
openNotification(type, title, content, icon) {
|
|
if (type) {
|
|
notification[type]({
|
|
message: (title) ? title : 'Title',
|
|
description: (content) ? content :
|
|
<p style={{ color: "black" }}>This is the content of the notification. This is the content of the notification.
|
|
This is the content of the notification.</p>,
|
|
icon: <Icon type={(icon) ? icon : "smile-circle"} style={{ color: 'black' }} />
|
|
});
|
|
notification.open();
|
|
|
|
} else {
|
|
notification.open({
|
|
message: (title) ? title : 'Title',
|
|
description: (content) ? <p style={{ color: "black" }}>{content}</p> :
|
|
<p style={{ color: "black" }}>This is the content of the notification. This is the content of the notification.
|
|
This is the content of the notification.</p>,
|
|
icon: <Icon type={(icon) ? icon : "smile-circle"} style={{ color: '#108ee9' }} />
|
|
});
|
|
}
|
|
};
|
|
|
|
notification = () => {
|
|
console.log('called again?');
|
|
this.messaging.onMessage((payload) => {
|
|
console.log("Message received cok.", payload);
|
|
// alert(payload.notification.body);
|
|
const toast = cinnamonSugar({
|
|
kind: 'crisp',
|
|
theme: 'info',
|
|
// picture: 'http://lorempixel.com/150/150/people',
|
|
title: <a href={payload.notification.click_action}>{payload.notification.title}</a>, // you can also add jsx code here!
|
|
// message: JSON.stringify(payload), // you can also add jsx code here!
|
|
message: payload.notification.body, // you can also add jsx code here!
|
|
toastTimeout: 4000,
|
|
icon: 'bell' // literally any font awesome 4.7 icon
|
|
// you may also add here regular butter-toast options, such as toastTimeout,
|
|
// name, sticky, etc..
|
|
});
|
|
ButterToast.raise(toast)
|
|
});
|
|
};
|
|
|
|
showModal = () => {
|
|
this.setState({
|
|
visible: true,
|
|
});
|
|
};
|
|
|
|
handleOk = (e) => {
|
|
console.log(e);
|
|
this.setState({
|
|
visible: false,
|
|
});
|
|
};
|
|
|
|
handleCancel = (e) => {
|
|
console.log(e);
|
|
this.setState({
|
|
visible: false,
|
|
});
|
|
};
|
|
|
|
componentDidMount() {
|
|
// this.checkIsLogin();
|
|
// this.settingStore.getAll();
|
|
this.authStore.getProfile();
|
|
|
|
setTimeout(() => {
|
|
console.log(this.authStore.userProfile, 'this.authStore.userProfile this.authStore.userProfile');
|
|
}, 2500)
|
|
// this.user.getUserGeolocation();
|
|
// this.appStore.getAppType();
|
|
// this.profileStore.getProfile();
|
|
// this.notificationStore.getList()
|
|
|
|
notification.config({
|
|
placement: 'bottomRight',
|
|
duration: 10,
|
|
style: {
|
|
width: 350,
|
|
color: "black"
|
|
},
|
|
});
|
|
}
|
|
|
|
componentWillMount() {
|
|
}
|
|
|
|
componentWillReceiveProps(nextProps) {
|
|
// will be true
|
|
// const locationChanged = nextProps.location !== this.props.location;
|
|
//
|
|
// this.checkIsLogin();
|
|
}
|
|
|
|
checkIsLogin() {
|
|
// if (!this.authStore.isLoggedIn ) { console.log(this.props.history);
|
|
// this.props.history.replace(LINKS.LOGIN); }
|
|
}
|
|
|
|
willLogout() {
|
|
Modal.confirm({
|
|
title: 'Log out the system?',
|
|
content: 'Are sure sure you want to log out the system?',
|
|
okText: 'Confirm',
|
|
cancelText: 'Cancel',
|
|
visible: this.state.visible,
|
|
zIndex: 3000,
|
|
onOk: () => {
|
|
this.authStore.logout();
|
|
this.setState({
|
|
visible: false,
|
|
redirect: true
|
|
});
|
|
},
|
|
onCancel: () => {
|
|
this.setState({
|
|
visible: false,
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
handleToggleIcon = () => this.setState({ open: !this.state.open });
|
|
handleToggleIconSecondary = () => this.setState({ openSecondary: !this.state.openSecondary });
|
|
handleClose = () => this.setState({ open: false });
|
|
|
|
|
|
handleChangeSingle = (event, value) => {
|
|
this.setState({
|
|
valueSingle: value,
|
|
});
|
|
};
|
|
|
|
handleChangeMultiple = (event, value) => {
|
|
this.setState({
|
|
valueMultiple: value,
|
|
});
|
|
};
|
|
|
|
handleOpenMenu = () => {
|
|
this.setState({
|
|
openMenu: true,
|
|
});
|
|
}
|
|
|
|
handleOnRequestChange = (value) => {
|
|
this.setState({
|
|
openMenu: value,
|
|
});
|
|
}
|
|
|
|
handleChange = (event, index, value) => this.setState({ value });
|
|
|
|
changeRoute = (path) => {
|
|
this.setState({ selectedMenu: path });
|
|
if (window.innerWidth < 600) {
|
|
this.handleClose()
|
|
}
|
|
}
|
|
|
|
toggle = () => {
|
|
this.setState({
|
|
collapsed: !this.state.collapsed
|
|
});
|
|
};
|
|
|
|
toggleDrawer = () => {
|
|
this.setState({
|
|
open: !this.state.open
|
|
});
|
|
};
|
|
|
|
|
|
//new
|
|
handleProfileMenuOpen = event => {
|
|
this.setState({ anchorEl: event.currentTarget });
|
|
};
|
|
|
|
handleMenuClose = () => {
|
|
this.setState({ anchorEl: null });
|
|
this.handleMobileMenuClose();
|
|
};
|
|
|
|
handleMobileMenuOpen = event => {
|
|
this.setState({ mobileMoreAnchorEl: event.currentTarget });
|
|
};
|
|
|
|
handleMobileMenuClose = () => {
|
|
this.setState({ mobileMoreAnchorEl: null });
|
|
};
|
|
|
|
toggleDrawerNew = (open) => () => {
|
|
this.setState({
|
|
left: open,
|
|
});
|
|
};
|
|
|
|
render() {
|
|
const { anchorEl, mobileMoreAnchorEl } = this.state;
|
|
const { classes } = this.props;
|
|
|
|
const { redirect } = this.state;
|
|
if (redirect) {
|
|
this.props.history.replace(LINKS.LOGIN);
|
|
// return <Redirect to={{
|
|
// pathname: '/login',
|
|
// state: {from: this.props.location}
|
|
// }}/>
|
|
}
|
|
const styles = {
|
|
Paper: {
|
|
height: 38,
|
|
width: 38,
|
|
background: '#fff',
|
|
marginRight: 16,
|
|
padding: 4
|
|
},
|
|
ImageRounded: {
|
|
display: 'block',
|
|
borderRadius: '50%',
|
|
maxWidth: '100%',
|
|
marginTop: '0px'
|
|
}
|
|
};
|
|
|
|
const { userData } = this.appstate;
|
|
// const applicationIcon = (this.settingStore.isIconEmpty) ? "/assets/images/bankbtn.png" : this.http.appendImagePath(this.settingStore.setting.icon);
|
|
// let applicationIcon = "http://giift.asacreative.com/giift_logo_wide.4d15de72.png";
|
|
let applicationIcon = require('../../../../assets/images/logo_new.png');
|
|
let applicationName = 'Giift';
|
|
if (APP_TYPE === 'btn') {
|
|
applicationIcon = "https://www.niaga.asia/wp-content/uploads/2021/02/IMG-20210223-WA0025.jpg";
|
|
applicationName = "KB Bukopin";
|
|
}
|
|
|
|
let onNotifRowClick = (record) => {
|
|
// if(record.notification.type == 'order_seller' && _.get(record,'notification.additional_data.user_order_store_id',false) != false){
|
|
// return `${LINKS.ORDER}/${record.notification.additional_data.user_order_store_id}`;
|
|
// }
|
|
// else if(record.notification.type == 'order_seller' && _.get(record,'notification.additional_data.user_order_store_id',false) == false){
|
|
// return `${LINKS.ORDER}`;
|
|
// }
|
|
return `${LINKS.ORDER}`;
|
|
}
|
|
|
|
const isMenuOpen = Boolean(anchorEl);
|
|
const isMobileMenuOpen = Boolean(mobileMoreAnchorEl);
|
|
|
|
const renderMenu = (
|
|
<Menu
|
|
anchorEl={anchorEl}
|
|
anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
|
|
transformOrigin={{ vertical: 'top', horizontal: 'right' }}
|
|
open={isMenuOpen}
|
|
onClose={this.handleMenuClose}
|
|
>
|
|
<Link onClick={this
|
|
.changeRoute
|
|
.bind(this, '/app/profile')} to={LINKS.PROFILE}>
|
|
<MenuItem>Profile</MenuItem>
|
|
</Link>
|
|
<Link onClick={this
|
|
.changeRoute
|
|
.bind(this, '/app/transaction')} to={LINKS.TRANSACTION}>
|
|
<MenuItem>Transaction</MenuItem>
|
|
</Link>
|
|
{/* <Link onClick={this.willLogout.bind(this)}> */}
|
|
<MenuItem onClick={this.willLogout.bind(this)}>Sign Out</MenuItem>
|
|
{/* </Link> */}
|
|
</Menu>
|
|
);
|
|
|
|
const renderMobileMenu = (
|
|
<Menu
|
|
anchorEl={mobileMoreAnchorEl}
|
|
anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
|
|
transformOrigin={{ vertical: 'top', horizontal: 'right' }}
|
|
open={isMobileMenuOpen}
|
|
onClose={this.handleMobileMenuClose}
|
|
>
|
|
{window.location.pathname.split("/")[2] == "shop" ? (
|
|
<MenuItem>
|
|
<IconButton color="inherit">
|
|
<Badge badgeContent={4} color="secondary">
|
|
<CartIcon />
|
|
</Badge>
|
|
</IconButton>
|
|
<p>Cart</p>
|
|
</MenuItem>
|
|
) : ""}
|
|
<MenuItem>
|
|
<IconButton color="inherit">
|
|
<Badge badgeContent={11} color="secondary">
|
|
<NotificationsIcon />
|
|
</Badge>
|
|
</IconButton>
|
|
<p>Notifications</p>
|
|
</MenuItem>
|
|
<Link onClick={this
|
|
.changeRoute
|
|
.bind(this, '/app/profile')} to={LINKS.PROFILE}>
|
|
<MenuItem>
|
|
<IconButton color="inherit">
|
|
<AccountCircle />
|
|
</IconButton>
|
|
<p>Profile</p>
|
|
</MenuItem>
|
|
</Link>
|
|
<Link onClick={this
|
|
.changeRoute
|
|
.bind(this, '/transaction')} to={LINKS.TRANSACTION}>
|
|
<MenuItem>
|
|
<IconButton color="inherit">
|
|
<ListIcon />
|
|
</IconButton>
|
|
<p>Transaction</p>
|
|
</MenuItem>
|
|
</Link>
|
|
{/* <Link onClick={this
|
|
.changeRoute
|
|
.bind(this, '/login')} to={LINKS.LOGIN}> */}
|
|
<MenuItem onClick={this.willLogout.bind(this)}>
|
|
<IconButton color="inherit">
|
|
<CancelIcon />
|
|
</IconButton>
|
|
<p>Sign Out</p>
|
|
</MenuItem>
|
|
{/* </Link> */}
|
|
</Menu>
|
|
);
|
|
|
|
const sideList = (
|
|
<div className={classes.list}>
|
|
<div className={classes.backgroundLogo}>
|
|
<Link onClick={this
|
|
.changeRoute
|
|
.bind(this, '/app/dashboard')} to={LINKS.DASHBOARD}>
|
|
<img
|
|
style={{
|
|
width: "100%",
|
|
height: "100%"
|
|
}}
|
|
src={applicationIcon} />
|
|
</Link>
|
|
</div>
|
|
<Divider />
|
|
<List>
|
|
<Link onClick={this
|
|
.changeRoute
|
|
.bind(this, '/app/dashboard')} to={LINKS.DASHBOARD}><MenuItem
|
|
className={(this.state.selectedMenu === '/app/dashboard') ? "menuAkunItem active" : 'menuAkunItem'}><span
|
|
className="menuAkun">Home</span></MenuItem></Link>
|
|
{/* <Link onClick={this
|
|
.changeRoute
|
|
.bind(this, '/app/dashboard')} to={LINKS.DASHBOARD}><MenuItem
|
|
className={(this.state.selectedMenu === '/app/flight') ? "menuAkunItem active" : 'menuAkunItem'}><span
|
|
className="menuAkun">Flight</span></MenuItem></Link>
|
|
|
|
<Link onClick={this
|
|
.changeRoute
|
|
.bind(this, '/app/hotel')} to={LINKS.HOTEL}><MenuItem
|
|
className={(this.state.selectedMenu === '/app/hotel') ? "menuAkunItem active" : 'menuAkunItem'}><span
|
|
className="menuAkun">Hotel</span></MenuItem></Link>
|
|
|
|
<Link onClick={this
|
|
.changeRoute
|
|
.bind(this, '/app/car')} to={LINKS.CAR}><MenuItem
|
|
className={(this.state.selectedMenu === '/app/car') ? "menuAkunItem active" : 'menuAkunItem'}><span
|
|
className="menuAkun">Car</span></MenuItem></Link>
|
|
|
|
<Link onClick={this
|
|
.changeRoute
|
|
.bind(this, '/app/shop')} to={LINKS.ITEMS}><MenuItem
|
|
className={(this.state.selectedMenu === '/app/shop') ? "menuAkunItem active" : 'menuAkunItem'}><span
|
|
className="menuAkun">Shop</span></MenuItem></Link>
|
|
|
|
<Link onClick={this
|
|
.changeRoute
|
|
.bind(this, '/app/vouchers')}
|
|
to={LINKS.VOUCHERS}
|
|
><MenuItem
|
|
className={(this.state.selectedMenu === '/app/vouchers') ? "menuAkunItem active" : 'menuAkunItem'}><span
|
|
className="menuAkun">Vouchers</span></MenuItem></Link> */}
|
|
|
|
</List>
|
|
<Divider />
|
|
<List>
|
|
<div style={{ padding: 15 }}>
|
|
<a>
|
|
<WalletComponent />
|
|
</a>
|
|
</div>
|
|
</List>
|
|
</div>
|
|
);
|
|
|
|
return (
|
|
<div className="app-container">
|
|
<Helmet>
|
|
<meta charSet="utf-8" />
|
|
<title>{applicationName}</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<link rel="icon" type="image/png" href={applicationIcon} sizes="96x96" />
|
|
</Helmet>
|
|
|
|
<ButterToast trayPosition="bottom-right" />
|
|
<Snackbar
|
|
open={this.globalUI.snackbarVisibility}
|
|
message={this.globalUI.snackbarMessage}
|
|
autoHideDuration={3000} />
|
|
|
|
<Dialog
|
|
style={{ margin: 'auto' }}
|
|
open={this.globalUI.loadingVisibility}>
|
|
<div style={{ textAlign: 'center' }}>
|
|
<LoadingDialog />
|
|
</div>
|
|
</Dialog>
|
|
<DepositDialog />
|
|
<WithdrawDialog />
|
|
|
|
<div className={classes.root}>
|
|
<AppBar style={{ zIndex: 1 }} position="fixed">
|
|
<Toolbar className={classes.toolbar}>
|
|
<div className={classes.sectionMobile}>
|
|
<IconButton className={classes.menuButton} color="action" aria-label="Open drawer" onClick={this.toggleDrawerNew(true)}>
|
|
<MenuIcon />
|
|
</IconButton>
|
|
</div>
|
|
<Link onClick={this
|
|
.changeRoute
|
|
.bind(this, '/app/dashboard')} to={LINKS.DASHBOARD}>
|
|
<img
|
|
className={classes.title}
|
|
style={{
|
|
width: 70,
|
|
height: 40
|
|
}}
|
|
src={applicationIcon} />
|
|
</Link>
|
|
<div className={classes.search}>
|
|
<div className={classes.searchIcon}>
|
|
<SearchIcon />
|
|
</div>
|
|
<InputBase
|
|
placeholder="Search…"
|
|
classes={{
|
|
root: classes.inputRoot,
|
|
input: classes.inputInput,
|
|
}}
|
|
/>
|
|
</div>
|
|
<div className={classes.grow} />
|
|
<div className={classes.sectionDesktop}>
|
|
<WalletComponent />
|
|
{window.location.pathname.split("/")[2] == "shop" ? (<IconButton color="action" >
|
|
<Badge badgeContent={4} color="secondary">
|
|
<CartIcon />
|
|
</Badge>
|
|
</IconButton>) : ""}
|
|
|
|
<IconButton color="action">
|
|
<Badge badgeContent={17} color="secondary">
|
|
<NotificationsIcon />
|
|
</Badge>
|
|
</IconButton>
|
|
<IconButton
|
|
aria-owns={isMenuOpen ? 'material-appbar' : undefined}
|
|
aria-haspopup="true"
|
|
onClick={this.handleProfileMenuOpen}
|
|
color="action"
|
|
>
|
|
<AccountCircle />
|
|
</IconButton>
|
|
</div>
|
|
<div className={classes.sectionMobile}>
|
|
<IconButton aria-haspopup="true" onClick={this.handleMobileMenuOpen} color="action">
|
|
<MoreIcon />
|
|
</IconButton>
|
|
</div>
|
|
</Toolbar>
|
|
</AppBar>
|
|
{renderMenu}
|
|
{renderMobileMenu}
|
|
</div>
|
|
<Drawer open={this.state.left} onClose={this.toggleDrawerNew(false)}>
|
|
<div
|
|
tabIndex={0}
|
|
role="button"
|
|
onClick={this.toggleDrawerNew(false)}
|
|
onKeyDown={this.toggleDrawerNew(false)}
|
|
>
|
|
{sideList}
|
|
</div>
|
|
</Drawer>
|
|
{/* <Toolbar className="toolbarAkunTiket">
|
|
<ToolbarGroup>
|
|
<IconButton className="hide-on-med-and-up" onClick={() => this.toggleDrawer()}><IconMenus /></IconButton>
|
|
|
|
<Link onClick={this
|
|
.changeRoute
|
|
.bind(this, '/app/dashboard')} to={LINKS.DASHBOARD}>
|
|
<img
|
|
style={{
|
|
width: 100,
|
|
height: 30
|
|
}}
|
|
src={applicationIcon} />
|
|
</Link>
|
|
|
|
<ToolbarSeparator className="hide-on-small-only" style={{marginLeft: 30, marginRight: 30}}/>
|
|
<IconButton className="hide-on-small-only" style={{marginRight: 10}}
|
|
onClick={() => this.toggleDrawer()}>
|
|
<IconMenus/>
|
|
</IconButton>
|
|
<Button className="toolbar-button-sysinfo hide-on-small-only" size="small" type="dashed"
|
|
style={{marginRight: (window.innerWidth < 600) ? 2 : 10}}
|
|
onClick={() => this.openNotification(null, "System Information", "This is your computer locale timezone", "clock-circle")}>
|
|
<Icon type="clock-circle"/> <span className="hide-on-small-only">{moment().format('h:mm:ss A')}</span>
|
|
</Button>
|
|
|
|
<Button className="toolbar-button-sysinfo hide-on-small-only" size="small" type="dashed"
|
|
style={{marginRight: (window.innerWidth < 600) ? 2 : 10}}
|
|
onClick={() => this.openNotification(null, "System Information", "This is your computer locale timezone", "environment")}>
|
|
<Icon type="environment"/><span className="hide-on-small-only">{this.user.userGeolocation.ip}</span>
|
|
</Button>
|
|
|
|
<Link onClick={this
|
|
.changeRoute
|
|
.bind(this, '/app/dashboard')} to={LINKS.DASHBOARD}><MenuItem
|
|
className={(this.state.selectedMenu === '/app/dashboard') ? "menuAkunItem active" : 'menuAkunItem'}><span
|
|
className="menuAkun">Home</span></MenuItem></Link>
|
|
|
|
<Link onClick={this
|
|
.changeRoute
|
|
.bind(this, '/app/dashboard')} to={LINKS.DASHBOARD}><MenuItem
|
|
className={(this.state.selectedMenu === '/app/flight') ? "menuAkunItem active" : 'menuAkunItem'}><span
|
|
className="menuAkun">Flight</span></MenuItem></Link>
|
|
|
|
<Link onClick={this
|
|
.changeRoute
|
|
.bind(this, '/app/hotel')} to={LINKS.HOTEL}><MenuItem
|
|
className={(this.state.selectedMenu === '/app/hotel') ? "menuAkunItem active" : 'menuAkunItem'}><span
|
|
className="menuAkun">Hotel</span></MenuItem></Link>
|
|
|
|
<Link onClick={this
|
|
.changeRoute
|
|
.bind(this, '/app/car')} to={LINKS.CAR}><MenuItem
|
|
className={(this.state.selectedMenu === '/app/car') ? "menuAkunItem active" : 'menuAkunItem'}><span
|
|
className="menuAkun">Car</span></MenuItem></Link>
|
|
|
|
<Link onClick={this
|
|
.changeRoute
|
|
.bind(this, '/app/shop')} to={LINKS.ITEMS}><MenuItem
|
|
className={(this.state.selectedMenu === '/app/shop') ? "menuAkunItem active" : 'menuAkunItem'}><span
|
|
className="menuAkun">Shop</span></MenuItem></Link>
|
|
|
|
<Link onClick={this
|
|
.changeRoute
|
|
.bind(this, '/app/vouchers')}
|
|
to={LINKS.VOUCHERS}
|
|
><MenuItem
|
|
className={(this.state.selectedMenu === '/app/vouchers') ? "menuAkunItem active" : 'menuAkunItem'}><span
|
|
className="menuAkun">Vouchers</span></MenuItem></Link>
|
|
|
|
<Button className="toolbar-button-sysinfo hide-on-small-only" size="small" type="dashed"
|
|
style={{marginRight: (window.innerWidth < 600) ? 2 : 10}}
|
|
onClick={() => this.openNotification(null, "System Information", "This is your computer locale timezone", "calendar")}>
|
|
<Icon type="calendar"/><span className="hide-on-small-only">{this.user.userGeolocation.time_zone}</span>
|
|
</Button>
|
|
|
|
<Button className="toolbar-button-sysinfo hide-on-small-only" size="small" type="dashed"
|
|
style={{marginRight: (window.innerWidth < 600) ? 2 : 10}}
|
|
onClick={() => this.openNotification(null, "System Information", "This is your computer locale timezone", "home")}>
|
|
<Icon type="home"/> <span
|
|
className="hide-on-small-only">{this.user.userGeolocation.latitude}, {this.user.userGeolocation.longitude}</span>
|
|
</Button>
|
|
|
|
</ToolbarGroup>
|
|
<ToolbarGroup>
|
|
<WalletComponent />
|
|
|
|
{window.location.pathname.split("/")[2] == "shop" ? (
|
|
<IconMenu
|
|
anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
|
|
targetOrigin={{ vertical: 'top', horizontal: 'right' }}
|
|
onClick={() => this.notificationStore.readAll()}
|
|
iconButtonElement={
|
|
<div>
|
|
<IconButton className="menuAkunItem" tooltip="Cart center"
|
|
tooltipPosition="bottom-center">
|
|
<ShoppingCart />
|
|
</IconButton>
|
|
</div>
|
|
}
|
|
>
|
|
<List>
|
|
{
|
|
(this.notificationStore.list.length) ?
|
|
this.notificationStore.list.slice(0, 5).map((item, index) => {
|
|
return (
|
|
<Link to={onNotifRowClick(item)}>
|
|
<ListItem
|
|
primaryText={item.notification.title}
|
|
secondaryText={
|
|
<div>
|
|
<p>
|
|
<span
|
|
style={{ color: darkBlack }}>{item.notification.description.substr(0, 40)}{(item.notification.description.length > 40) ? '...' : ""}</span>
|
|
</p>
|
|
<p style={{ fontSize: 10, color: black }}>{moment(item.created_at).fromNow()}</p>
|
|
</div>
|
|
}
|
|
secondaryTextLines={2}
|
|
/>
|
|
</Link>
|
|
);
|
|
}) : <EmptyComponent width="" image="default4" type="empty" header=""
|
|
content="No notification yet! " />
|
|
}
|
|
<Link to={`${LINKS.CART_DETAIL}`}>
|
|
<ListItem
|
|
primaryText={
|
|
<div style={{ textAlign: 'center' }}>
|
|
<p>View All</p>
|
|
</div>
|
|
}
|
|
/>
|
|
</Link>
|
|
</List>
|
|
</IconMenu>
|
|
) : (<div />)}
|
|
|
|
|
|
<IconMenu
|
|
anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
|
|
targetOrigin={{ vertical: 'top', horizontal: 'right' }}
|
|
onClick={() => this.notificationStore.readAll()}
|
|
iconButtonElement={
|
|
<div>
|
|
{userData.role === 'admin' ? (
|
|
<div>
|
|
{this.notificationStore.unread_notif === 0 ?
|
|
<IconButton className="menuAkunItem" tooltip="Notification center"
|
|
tooltipPosition="bottom-center">
|
|
<img className="img-responsive" src="/assets/images/icon/toa.png" alt="" />
|
|
</IconButton> :
|
|
<Badge
|
|
badgeContent={this.notificationStore.unread_notif}
|
|
primary={true}
|
|
badgeStyle={{ top: 15, right: 12 }}
|
|
>
|
|
<IconButton className="menuAkunItem" tooltip="Notification center"
|
|
tooltipPosition="bottom-center">
|
|
<img className="img-responsive" src="/assets/images/icon/toa.png" alt="" />
|
|
</IconButton>
|
|
</Badge>
|
|
}
|
|
</div>
|
|
) : (
|
|
<div>
|
|
{this.notificationStore.unread_notif === 0 ?
|
|
<IconButton className="menuAkunItem" tooltip="Notification center"
|
|
tooltipPosition="bottom-center">
|
|
<img className="img-responsive" src="/assets/images/icon/toa.png" alt="" />
|
|
</IconButton> :
|
|
<Badge
|
|
badgeContent={this.notificationStore.unread_notif}
|
|
primary={true}
|
|
badgeStyle={{ top: 15, right: 12 }}
|
|
>
|
|
<IconButton className="menuAkunItem" tooltip="Notification center"
|
|
tooltipPosition="bottom-center">
|
|
<img className="img-responsive" src="/assets/images/icon/toa.png" alt="" />
|
|
</IconButton>
|
|
</Badge>
|
|
}
|
|
</div>
|
|
)}
|
|
|
|
</div>
|
|
}
|
|
>
|
|
<List>
|
|
{
|
|
(this.notificationStore.list.length) ?
|
|
this.notificationStore.list.slice(0, 5).map((item, index) => {
|
|
return (
|
|
<Link to={onNotifRowClick(item)}>
|
|
<ListItem
|
|
// leftAvatar={<Avatar src="images/ok-128.jpg" />}
|
|
primaryText={item.notification.title}
|
|
secondaryText={
|
|
<div>
|
|
<p>
|
|
<span
|
|
style={{ color: darkBlack }}>{item.notification.description.substr(0, 40)}{(item.notification.description.length > 40) ? '...' : ""}</span>
|
|
</p>
|
|
<p style={{ fontSize: 10, color: black }}>{moment(item.created_at).fromNow()}</p>
|
|
</div>
|
|
}
|
|
secondaryTextLines={2}
|
|
/>
|
|
</Link>
|
|
);
|
|
}) : <EmptyComponent width="" image="default4" type="empty" header=""
|
|
content="No item yet! " />
|
|
}
|
|
<Link to={`${LINKS.CART_DETAIL}`}>
|
|
<ListItem
|
|
primaryText={
|
|
<div style={{ textAlign: 'center' }}>
|
|
<p>View All</p>
|
|
</div>
|
|
}
|
|
/>
|
|
</Link>
|
|
</List>
|
|
</IconMenu>
|
|
|
|
<IconMenu
|
|
anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
|
|
targetOrigin={{ vertical: 'top', horizontal: 'right' }}
|
|
iconButtonElement={
|
|
<IconButton style={{ width: 'auto', height: 'auto' }}
|
|
iconStyle={{ width: 35, height: 'auto', borderRadius: '45%' }}>
|
|
{!!this.profileStore.userProfile.photo ?
|
|
<img src={this.http.appendImagePath(this.profileStore.userProfile.photo)} /> : <IconUserCircle />
|
|
}
|
|
|
|
</IconButton>
|
|
}
|
|
><List>
|
|
<ListItem
|
|
style={{ padding: '0px 16px 0px', fontSize: 14 }}
|
|
disabled={true}
|
|
primaryText={<span
|
|
style={{ fontWeight: 500 }}>{this.props.appstate.userData.email|| 'Username'}</span>}
|
|
secondaryText={<p
|
|
style={{ fontWeight: 400 }}>{_.capitalize(this.props.appstate.userData.role) || 'role'}</p>}
|
|
/>
|
|
</List>
|
|
<Divider />
|
|
<Link onClick={this
|
|
.changeRoute
|
|
.bind(this, '/app/transaction')} to={LINKS.TRANSACTION}> <MenuItem style={{ fontSize: 14 }}
|
|
primaryText="Transaction" /></Link>
|
|
<Link onClick={this
|
|
.changeRoute
|
|
.bind(this, '/app/profile')} to={LINKS.PROFILE}> <MenuItem style={{ fontSize: 14 }}
|
|
primaryText="Profile" /></Link>
|
|
<Link onClick={this
|
|
.changeRoute
|
|
.bind(this, '/login')} to={LINKS.LOGIN}>
|
|
<MenuItem onClick={() => { }} style={{ fontSize: 14 }} primaryText="Sign out" />
|
|
</Link>
|
|
</IconMenu>
|
|
</ToolbarGroup>
|
|
</Toolbar> */}
|
|
|
|
<div className="mainContent" style={{
|
|
// paddingLeft: (window.innerWidth < 600) ? '0px' : '50px',
|
|
// marginLeft: (window.innerWidth < 600) ? 'auto' : '50px',
|
|
// marginRight: (window.innerWidth < 600) ? '0' : '50px',
|
|
}}>
|
|
<div className="try" />
|
|
<Route />
|
|
</div>
|
|
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default withStyles(styles)(App);
|