first commit
This commit is contained in:
Senad Uka
245
src/routes/app/components/ContactList.js
Normal file
245
src/routes/app/components/ContactList.js
Normal file
@@ -0,0 +1,245 @@
|
||||
import React, { Component } from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import PropTypes from 'prop-types';
|
||||
import Link from 'react-router';
|
||||
import ActionHome from 'material-ui/svg-icons/action/home';
|
||||
import ActionWork from 'material-ui/svg-icons/action/work';
|
||||
import MapsMyLocation from 'material-ui/svg-icons/maps/my-location';
|
||||
import MapsAddLocation from 'material-ui/svg-icons/maps/add-location';
|
||||
import MapsNearMe from 'material-ui/svg-icons/maps/near-me';
|
||||
import MapsLocalHospital from 'material-ui/svg-icons/maps/local-hospital';
|
||||
import MapsLocalPharmacy from 'material-ui/svg-icons/maps/local-pharmacy';
|
||||
import AutoComplete from 'material-ui/AutoComplete';
|
||||
import { fullWhite } from 'material-ui/styles/colors';
|
||||
import Dialog from 'material-ui/Dialog';
|
||||
import { List, ListItem, makeSelectable } from 'material-ui/List';
|
||||
import TextField from 'material-ui/TextField';
|
||||
import Divider from 'material-ui/Divider';
|
||||
import ArrowDropRight from 'material-ui/svg-icons/navigation-arrow-drop-right';
|
||||
import RaisedButton from 'material-ui/RaisedButton';
|
||||
// import FlatButton from 'material-ui/FlatButton';
|
||||
import IconButton from 'material-ui/IconButton';
|
||||
import Popover from 'material-ui/Popover';
|
||||
import CommunicationChatBubble from 'material-ui/svg-icons/communication/chat-bubble';
|
||||
import { indigo500 } from 'material-ui/styles/colors';
|
||||
import CommunicationEmail from 'material-ui/svg-icons/communication/email';
|
||||
import CommunicationTextsms from 'material-ui/svg-icons/communication/textsms';
|
||||
import CommunicationCall from 'material-ui/svg-icons/communication/call';
|
||||
import Close from 'material-ui/svg-icons/navigation/close';
|
||||
import $ from 'jquery';
|
||||
import Instance from '../../../components/Connection';
|
||||
|
||||
export default class ContactList extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.props = props;
|
||||
this.state = {
|
||||
open: false,
|
||||
data: {
|
||||
driverMobile: "",
|
||||
memberMobile: "",
|
||||
memberEmail: "",
|
||||
schedulerEmail: "",
|
||||
schedulerMobile: "",
|
||||
rideID: "",
|
||||
},
|
||||
anchorEl: null,
|
||||
formMode: 'hide',
|
||||
formDisplay: 'none',
|
||||
message: '',
|
||||
};
|
||||
this.handleMobileCall = this.handleMobileCall.bind(this);
|
||||
this.handleMailTo = this.handleMailTo.bind(this);
|
||||
this.handleSMS = this.handleSMS.bind(this);
|
||||
this.handleCancelMessage = this.handleCancelMessage.bind(this);
|
||||
|
||||
this.handleClick = this.handleClick.bind(this);
|
||||
this.handleRequestClose = this.handleRequestClose.bind(this);
|
||||
this.handleMessage = this.handleMessage.bind(this);
|
||||
this.handleMessageField = this.handleMessageField.bind(this);
|
||||
this.handleSend = this.handleSend.bind(this);
|
||||
}
|
||||
|
||||
|
||||
componentDidMount = () => {
|
||||
const self = this;
|
||||
if (this.props.data && this.props.data !== null) {
|
||||
this.setState(Object.assign(this.state, { data: this.props.data }));
|
||||
}
|
||||
}
|
||||
|
||||
componentWillReceiveProps = (nextProps) => {
|
||||
const self = this;
|
||||
if (nextProps.data && nextProps.data !== null) {
|
||||
this.setState(Object.assign(this.state, { data: nextProps.data }));
|
||||
}
|
||||
}
|
||||
|
||||
handleDriverMessage = (message) => {
|
||||
const rideID = this.state.data.rideID;
|
||||
let url = '/v1/nemt/rides/' + rideID + '/message/driver';
|
||||
url = encodeURI(url);
|
||||
Instance.getRawConn().post(url, { message: message }).then(function (res) {
|
||||
alert('Message Send');
|
||||
}).catch(function (err) {
|
||||
console.error(err);
|
||||
});
|
||||
}
|
||||
|
||||
handleMessage = (message) => {
|
||||
const rideID = this.state.data.rideID;
|
||||
let url = '/v1/nemt/rides/' + rideID + '/message';
|
||||
url = encodeURI(url);
|
||||
return Instance.getRawConn().post(url, { message: message });
|
||||
}
|
||||
|
||||
handleCancelMessage = () => {
|
||||
event.preventDefault();
|
||||
this.setState(Object.assign(this.state, { formDisplay: 'none', open: false }));
|
||||
console.log("handleCancelMessage")
|
||||
};
|
||||
|
||||
handleMailTo = (event, to, from, subject) => {
|
||||
event.preventDefault();
|
||||
this.setState(Object.assign(this.state, { formMode: subject, formDisplay: 'block' }));
|
||||
console.log("handleMailTo" + to + from + subject)
|
||||
};
|
||||
|
||||
handleMobileCall = (event, to, from, subject) => {
|
||||
event.preventDefault();
|
||||
this.setState(Object.assign(this.state, { formMode: subject, formDisplay: 'none' }));
|
||||
// window.open("tel:" + this.state.memberMobile );
|
||||
window.open("tel:" + to);
|
||||
|
||||
console.log("handleMobileCall" + "to " + to + "from " + from)
|
||||
};
|
||||
|
||||
handleSMS = (event, toMobilePhone, fromMobilePhone, subject) => {
|
||||
event.preventDefault();
|
||||
this.setState(Object.assign(this.state, { formMode: subject, formDisplay: 'block', message: '' }));
|
||||
}
|
||||
|
||||
handleSend = (event, toMobilePhone, fromMobilePhone, subject) => {
|
||||
event.preventDefault();
|
||||
const self = this;
|
||||
self.handleMessage(self.state.message).then(res => {
|
||||
alert('Message Sent');
|
||||
self.setState(Object.assign(self.state, { formMode: '', formDisplay: 'none', message: '' }));
|
||||
}).catch(console.error);
|
||||
};
|
||||
|
||||
handleClick = (event) => {
|
||||
event.preventDefault();
|
||||
this.setState(Object.assign(this.state, { open: true, anchorEl: event.currentTarget }));
|
||||
};
|
||||
|
||||
handleRequestClose = () => {
|
||||
this.setState(Object.assign(this.state, { formDisplay: 'none' }));
|
||||
this.setState(Object.assign(this.state, { open: false }));
|
||||
};
|
||||
|
||||
handleMessageField = (e) => {
|
||||
this.setState(Object.assign(this.state, { message: e.target.value }));
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div style={{ "padding": '0px', 'margin': '0px', 'align': 'top', 'display': 'inline' }} >
|
||||
|
||||
<a href="#" onClick={this.handleClick} > Contact </a>
|
||||
|
||||
<Popover
|
||||
open={this.state.open}
|
||||
anchorEl={this.state.anchorEl}
|
||||
anchorOrigin={{ horizontal: 'left', vertical: 'bottom' }}
|
||||
targetOrigin={{ horizontal: 'left', vertical: 'top' }}
|
||||
onRequestClose={this.handleRequestClose}
|
||||
>
|
||||
|
||||
<div id="popoverContentWrapper" >
|
||||
|
||||
<div id="smsFormWrapper" style={{ display: this.state.formDisplay }}>
|
||||
|
||||
<form className="form-vertical" style={{ paddingLeft: '20px', paddingRight: '20px' }} >
|
||||
<fieldset>
|
||||
<div className="form-group">
|
||||
<TextField
|
||||
floatingLabelText="Subject"
|
||||
hintText="Subject"
|
||||
value={this.state.formMode}
|
||||
// errorText="This field is required.
|
||||
// onChange={this.handleFirst}
|
||||
// onBlur={this.buttonValidated}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<TextField
|
||||
floatingLabelText="Message"
|
||||
hintText="Message Field"
|
||||
errorText="This field is required."
|
||||
multiLine={true}
|
||||
rows={3}
|
||||
onChange={this.handleMessageField}
|
||||
value={this.state.message}
|
||||
// onBlur={this.buttonValidated}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<RaisedButton
|
||||
label="Send"
|
||||
primary={true}
|
||||
onClick={this.handleSend}
|
||||
// disabled={!this.state.validated}
|
||||
/>
|
||||
<RaisedButton
|
||||
label="Cancel"
|
||||
onClick={this.handleCancelMessage}
|
||||
// disabled={!this.state.validated}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="divider" />
|
||||
<div className="form-group">
|
||||
<p className="text-small">By clicking Send, you agree to <a href="javascript:;"><i>terms</i></a> and <a href="javascript:;"><i>privacy policy</i></a></p>
|
||||
</div>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div id="contactListWrapper" >
|
||||
<List>
|
||||
<ListItem
|
||||
leftIcon={<CommunicationCall color={indigo500} onTouchTap={(e) => this.handleMobileCall(e, this.state.data.driverMobile, this.state.data.schedulerMobile, "Call to Driver from Scheduler")} />}
|
||||
insetChildren={true}
|
||||
rightIcon={<CommunicationChatBubble color={indigo500} onTouchTap={(e) => this.handleSMS(e, this.state.data.driverMobile, this.state.data.schedulerMobile, "SMS to Driver from Scheduler")} />}
|
||||
primaryText={this.state.data.driverMobile}
|
||||
secondaryText="Driver"
|
||||
/>
|
||||
<ListItem
|
||||
leftIcon={<CommunicationCall color={indigo500} onTouchTap={(e) => this.handleMobileCall(e, this.state.data.memberMobile, this.state.data.schedulerMobile, "Call to Member from Scheduler")} />}
|
||||
insetChildren={true}
|
||||
rightIcon={<CommunicationChatBubble color={indigo500} onTouchTap={(e) => this.handleSMS(e, this.state.data.memberMobile, this.state.data.schedulerMobile, "SMS to Member from Scheduler")} />}
|
||||
primaryText={this.state.data.memberMobile}
|
||||
secondaryText="Member"
|
||||
/>
|
||||
<ListItem color={indigo500}
|
||||
leftIcon={<CommunicationEmail onTouchTap={(e) => this.handleMailTo(e, this.state.data.memberEmail, 'no-reply@hcmhub.com', 'Email to Member from Scheduler')} />}
|
||||
primaryText={this.state.data.memberEmail}
|
||||
secondaryText="Member"
|
||||
/>
|
||||
</List>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</Popover>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
ContactList.PropTypes = {
|
||||
data: PropTypes.object.isRequired,
|
||||
}
|
||||
105
src/routes/app/components/ContactOption.js
Normal file
105
src/routes/app/components/ContactOption.js
Normal file
@@ -0,0 +1,105 @@
|
||||
import React from 'react';
|
||||
import Delete from 'material-ui/svg-icons/action/delete';
|
||||
import Create from 'material-ui/svg-icons/content/create';
|
||||
import Call from 'material-ui/svg-icons/communication/call';
|
||||
import TextSms from 'material-ui/svg-icons/communication/textsms';
|
||||
import Mail from 'material-ui/svg-icons/content/mail';
|
||||
import IconButton from 'material-ui/IconButton';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
const ContactOption = (props) => {
|
||||
const buttonStyle = {
|
||||
marginTop: -10
|
||||
};
|
||||
|
||||
const divStyle = {
|
||||
inlineSize: "max-content"
|
||||
};
|
||||
|
||||
const handleRemoveContact = (c) => {
|
||||
if (props.onContactDeleted) {
|
||||
props.onContactDeleted(c);
|
||||
} else {
|
||||
console.log('onContactDelete is undefined');
|
||||
console.log(c);
|
||||
}
|
||||
};
|
||||
|
||||
const handleUpdateContact = (c) => {
|
||||
if (props.onContactUpdated) {
|
||||
props.onContactUpdated(c);
|
||||
} else {
|
||||
console.log('onContactUpdate is undefined');
|
||||
console.log(c);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCustomAction = (c) => {
|
||||
console.log('This is a custom action: ', c);
|
||||
|
||||
if (props.onCustomAction) {
|
||||
props.onCustomAction(c);
|
||||
} else {
|
||||
console.log('onCustomAction is undefined');
|
||||
console.log(c);
|
||||
}
|
||||
}
|
||||
|
||||
let deleteButton = null
|
||||
if (props.showDelete) {
|
||||
deleteButton = (<IconButton onTouchTap={(e) => handleRemoveContact(props.contact)} style={buttonStyle}><Delete /></IconButton>);
|
||||
}
|
||||
|
||||
let updateButton = null;
|
||||
if (props.showEdit) {
|
||||
updateButton = (<IconButton onTouchTap={(e) => handleUpdateContact(props.contact)} style={buttonStyle}><Create /></IconButton>);
|
||||
}
|
||||
|
||||
const actionButton = [];
|
||||
if (props.showAction && props.contact.type.key) {
|
||||
switch (props.contact.type.key) {
|
||||
case "phone":
|
||||
case "landline":
|
||||
actionButton.push(<IconButton onTouchTap={(e) => handleCustomAction(props.contact)} style={buttonStyle}><Call /></IconButton>);
|
||||
break;
|
||||
case "mobile":
|
||||
case "sms":
|
||||
actionButton.push(<IconButton onTouchTap={(e) => handleCustomAction(props.contact)} style={buttonStyle}><TextSms /></IconButton>);
|
||||
actionButton.push(<IconButton onTouchTap={(e) => handleCustomAction(props.contact)} style={buttonStyle}><Call /></IconButton>);
|
||||
break;
|
||||
case "email":
|
||||
actionButton.push(<IconButton onTouchTap={(e) => handleCustomAction(props.contact)} style={buttonStyle}><Mail /></IconButton>);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={divStyle}>
|
||||
{deleteButton}
|
||||
{updateButton}
|
||||
{actionButton}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
ContactOption.propTypes = {
|
||||
contact: PropTypes.object.isRequired,
|
||||
showEdit: PropTypes.bool,
|
||||
showDelete: PropTypes.bool,
|
||||
showAction: PropTypes.bool,
|
||||
showName: PropTypes.bool,
|
||||
showDescription: PropTypes.bool,
|
||||
onContactDeleted: PropTypes.func,
|
||||
onContactUpdated: PropTypes.func,
|
||||
onCustomAction: PropTypes.func,
|
||||
};
|
||||
|
||||
ContactOption.defaultProps = {
|
||||
showEdit: true,
|
||||
showDelete: true,
|
||||
showName: true,
|
||||
showDescription: true,
|
||||
showAction: true,
|
||||
};
|
||||
|
||||
module.exports = ContactOption;
|
||||
65
src/routes/app/components/Geolocation.js
Normal file
65
src/routes/app/components/Geolocation.js
Normal file
@@ -0,0 +1,65 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
const GeolocationService = function () {
|
||||
let watcherID;
|
||||
let initTime;
|
||||
|
||||
const init = () => {
|
||||
if (navigator.geolocation) {
|
||||
stop();
|
||||
initTime = new Date();
|
||||
watcherID = navigator.geolocation.watchPosition(geoLocationSuccess, geoLocationError, geoLocationOption());
|
||||
// console.log(`Start finding location: Watcher ID (${watcherID})`);
|
||||
}
|
||||
};
|
||||
|
||||
const geoLocationSuccess = (position) => {
|
||||
const seconds = (new Date().getTime() - initTime.getTime()) / 1000;
|
||||
|
||||
// console.log(`Current Position (took ${seconds}s): `);
|
||||
localStorage.setItem('currentLocation', JSON.stringify({ lat: position.coords.latitude, long: position.coords.longitude }));
|
||||
|
||||
initTime = new Date();
|
||||
};
|
||||
|
||||
const geoLocationError = (error) => {
|
||||
console.error('Error to get position: ', error);
|
||||
// init();
|
||||
};
|
||||
|
||||
const geoLocationOption = () => {
|
||||
return {
|
||||
enableHighAccuracy: true,
|
||||
};
|
||||
};
|
||||
|
||||
const getCoordinates = () => {
|
||||
const currentLocation = localStorage.getItem('currentLocation');
|
||||
if (currentLocation) {
|
||||
let geo = JSON.parse(currentLocation);
|
||||
if (!geo.lat || !geo.long) {
|
||||
return { lat: 41.819078, long: -87.623129 };
|
||||
} else {
|
||||
return geo;
|
||||
}
|
||||
} else {
|
||||
return { lat: 41.819078, long: -87.623129 };
|
||||
};
|
||||
};
|
||||
|
||||
const stop = () => {
|
||||
if (watcherID) {
|
||||
navigator.geolocation.clearWatch(watcherID);
|
||||
}
|
||||
};
|
||||
|
||||
init();
|
||||
|
||||
return {
|
||||
Stop: stop,
|
||||
GetCoordinates: getCoordinates,
|
||||
};
|
||||
}();
|
||||
|
||||
module.exports = GeolocationService;
|
||||
63
src/routes/app/components/MainApp.js
Normal file
63
src/routes/app/components/MainApp.js
Normal file
@@ -0,0 +1,63 @@
|
||||
import React from 'react';
|
||||
import Header from 'components/Header';
|
||||
import Sidenav from 'components/Sidenav';
|
||||
import Footer from 'components/Footer';
|
||||
import Notifications from 'components/Notifications';
|
||||
import Notification from 'components/Shared/Notification';
|
||||
import GeolocationService from './Geolocation';
|
||||
|
||||
class MainApp extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.props = props;
|
||||
this.state = {
|
||||
user: {
|
||||
useruuid: '',
|
||||
name: ''
|
||||
}
|
||||
}
|
||||
|
||||
this.handleRide = this.handleRide.bind(this);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
const user = JSON.parse(localStorage.getItem('loggedUser'));
|
||||
if (user) {
|
||||
this.setState(Object.assign(this.state, { user: user }));
|
||||
}
|
||||
}
|
||||
|
||||
handleRide(ride) {
|
||||
if (this.props.onRideUpdate) {
|
||||
this.props.onRideUpdate(ride);
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const { children, location } = this.props;
|
||||
|
||||
return (
|
||||
<div className="main-app-container">
|
||||
<Sidenav />
|
||||
|
||||
<section id="page-container" className="app-page-container">
|
||||
<Header />
|
||||
|
||||
<div className="app-content-wrapper">
|
||||
<div className="app-content">
|
||||
<div className="full-height">
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
</section>
|
||||
<Notifications user={this.state.user} onRideUpdate={this.handleRide} />
|
||||
{/* <Notification user={this.state.user} onRideUpdate={this.handleRide} /> */}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = MainApp;
|
||||
1196
src/routes/app/components/NEMTLocation.js
Normal file
1196
src/routes/app/components/NEMTLocation.js
Normal file
File diff suppressed because it is too large
Load Diff
70
src/routes/app/components/RoadtripLink.js
Normal file
70
src/routes/app/components/RoadtripLink.js
Normal file
@@ -0,0 +1,70 @@
|
||||
import React from 'react';
|
||||
import Delete from 'material-ui/svg-icons/action/delete';
|
||||
import Create from 'material-ui/svg-icons/content/create';
|
||||
import Call from 'material-ui/svg-icons/communication/call';
|
||||
import TextSms from 'material-ui/svg-icons/communication/textsms';
|
||||
import Mail from 'material-ui/svg-icons/content/mail';
|
||||
import IconButton from 'material-ui/IconButton';
|
||||
import PropTypes from 'prop-types';
|
||||
import Instance from '../../../components/Connection';
|
||||
|
||||
const RoadTripLink = (props) => {
|
||||
const onClick = (e, r) => {
|
||||
let url = `/v1/nemt/rides/${r.ride_uuid}`;
|
||||
if (props.isOpened) {
|
||||
url = `/v1/ext/${r.ride_uuid}/${r.user.useruuid}`;
|
||||
}
|
||||
|
||||
Instance.getRawConn().get(url).then(res => {
|
||||
if (props.onRideClick) {
|
||||
props.onRideClick(res.data);
|
||||
} else {
|
||||
console.log(res.data);
|
||||
}
|
||||
}).catch(console.error);
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
let rideList = [];
|
||||
if (props.rides) {
|
||||
console.log(props.rides)
|
||||
rideList = props.rides.map((r, i) => {
|
||||
let separator = '|';
|
||||
if (props.rides.length === 1 || props.rides.length === i + 1) {
|
||||
separator = '';
|
||||
}
|
||||
if (props.isLink == true) {
|
||||
return (<span> <a href={location.href} onTouchTap={(e) => onClick(e, r)}>{r.trip_type.value}</a> {separator}</span>)
|
||||
} else {
|
||||
return (<span> {r.trip_type.value} {separator}</span>)
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
{rideList}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
RoadTripLink.propTypes = {
|
||||
visit: PropTypes.object.isRequired,
|
||||
rides: PropTypes.array.isRequired,
|
||||
currentRide: PropTypes.object,
|
||||
isOpened: PropTypes.bool,
|
||||
isLink: PropTypes.bool,
|
||||
onRideClick: PropTypes.func,
|
||||
};
|
||||
|
||||
RoadTripLink.defaultProps = {
|
||||
visit: {},
|
||||
rides: [],
|
||||
currentRide: {},
|
||||
isOpened: false,
|
||||
isLink: false,
|
||||
onRideClick: (ride) => { console.log(ride); },
|
||||
};
|
||||
|
||||
module.exports = RoadTripLink;
|
||||
25
src/routes/app/index.js
Normal file
25
src/routes/app/index.js
Normal file
@@ -0,0 +1,25 @@
|
||||
module.exports = {
|
||||
path: 'app',
|
||||
getChildRoutes(partialNextState, cb) {
|
||||
require.ensure([], (require) => {
|
||||
cb(null, [
|
||||
require('./routes/charts'),
|
||||
require('./routes/dashboard'),
|
||||
// require('./routes/ecommerce'),
|
||||
require('./routes/forms'),
|
||||
require('./routes/pageLayouts'),
|
||||
require('./routes/pages'),
|
||||
require('./routes/tables'),
|
||||
require('./routes/ui'),
|
||||
require('./routes/member'),
|
||||
require('./routes/organization'),
|
||||
require('./routes/users'),
|
||||
]);
|
||||
});
|
||||
},
|
||||
getComponent(nextState, cb) {
|
||||
require.ensure([], (require) => {
|
||||
cb(null, require('./components/MainApp'));
|
||||
});
|
||||
}
|
||||
};
|
||||
16
src/routes/app/routes/charts/index.js
Normal file
16
src/routes/app/routes/charts/index.js
Normal file
@@ -0,0 +1,16 @@
|
||||
module.exports = {
|
||||
path: 'chart',
|
||||
getChildRoutes(partialNextState, cb) {
|
||||
require.ensure([], (require) => {
|
||||
cb(null, [
|
||||
require('./routes/bar'),
|
||||
require('./routes/funnel'),
|
||||
require('./routes/line'),
|
||||
require('./routes/more'),
|
||||
require('./routes/pie'),
|
||||
require('./routes/radar'),
|
||||
require('./routes/scatter'),
|
||||
]);
|
||||
});
|
||||
}
|
||||
};
|
||||
546
src/routes/app/routes/charts/routes/bar/components/Bar.js
Normal file
546
src/routes/app/routes/charts/routes/bar/components/Bar.js
Normal file
@@ -0,0 +1,546 @@
|
||||
import React from 'react';
|
||||
import ReactEcharts from 'components/ReactECharts';
|
||||
import CHARTCONFIG from 'constants/ChartConfig';
|
||||
|
||||
const bar1 = {};
|
||||
const bar2 = {};
|
||||
const bar3 = {};
|
||||
const bar4 = {};
|
||||
const bar5 = {};
|
||||
|
||||
bar1.options = {
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
legend: {
|
||||
data: ['Evaporation', 'Precipitation'],
|
||||
textStyle: {
|
||||
color: CHARTCONFIG.color.text
|
||||
}
|
||||
},
|
||||
toolbox: {
|
||||
show: true,
|
||||
feature: {
|
||||
saveAsImage: {show: true, title: 'save'}
|
||||
}
|
||||
},
|
||||
calculable: true,
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: ['Jan.', 'Feb.', 'Mar.', 'Apr.', 'May', 'Jun.', 'Jul.', 'Aug.', 'Sep.', 'Oct.', 'Nov.', 'Dec.'],
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: CHARTCONFIG.color.text
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: CHARTCONFIG.color.splitLine
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: CHARTCONFIG.color.text
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: CHARTCONFIG.color.splitLine
|
||||
}
|
||||
},
|
||||
splitArea: {
|
||||
show: true,
|
||||
areaStyle: {
|
||||
color: CHARTCONFIG.color.splitArea
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: 'Evaporation',
|
||||
type: 'bar',
|
||||
data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
|
||||
markPoint: {
|
||||
data: [
|
||||
{type: 'max', name: 'Max'},
|
||||
{type: 'min', name: 'Min'}
|
||||
]
|
||||
},
|
||||
markLine: {
|
||||
data: [
|
||||
{type: 'average', name: 'Average'}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'Precipitation',
|
||||
type: 'bar',
|
||||
data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
|
||||
markPoint: {
|
||||
data: [
|
||||
{name: 'Highest', value: 182.2, xAxis: 7, yAxis: 183, symbolSize: 18},
|
||||
{name: 'Lowest', value: 2.3, xAxis: 11, yAxis: 3}
|
||||
]
|
||||
},
|
||||
markLine: {
|
||||
data: [
|
||||
{type: 'average', name: 'Average'}
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
bar2.options = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['Direct', 'Email', 'Affiliate', 'Video Ads', 'Search', 'Baidu', 'Google', 'Bing', 'Others'],
|
||||
textStyle: {
|
||||
color: CHARTCONFIG.color.text
|
||||
}
|
||||
},
|
||||
calculable: true,
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: ['Mon.', 'Tue.', 'Wed.', 'Thu.', 'Fri.', 'Sat.', 'Sun.'],
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: CHARTCONFIG.color.text
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: CHARTCONFIG.color.splitLine
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: CHARTCONFIG.color.text
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: CHARTCONFIG.color.splitLine
|
||||
}
|
||||
},
|
||||
splitArea: {
|
||||
show: true,
|
||||
areaStyle: {
|
||||
color: CHARTCONFIG.color.splitArea
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: 'Direct',
|
||||
type: 'bar',
|
||||
data: [320, 332, 301, 334, 390, 330, 320]
|
||||
},
|
||||
{
|
||||
name: 'Email',
|
||||
type: 'bar',
|
||||
stack: 'Ads',
|
||||
data: [120, 132, 101, 134, 90, 230, 210]
|
||||
},
|
||||
{
|
||||
name: 'Affiliate',
|
||||
type: 'bar',
|
||||
stack: 'Ads',
|
||||
data: [220, 182, 191, 234, 290, 330, 310]
|
||||
},
|
||||
{
|
||||
name: 'Video Ads',
|
||||
type: 'bar',
|
||||
stack: 'Ads',
|
||||
data: [150, 232, 201, 154, 190, 330, 410]
|
||||
},
|
||||
{
|
||||
name: 'Search',
|
||||
type: 'bar',
|
||||
data: [862, 1018, 964, 1026, 1679, 1600, 1570],
|
||||
markLine: {
|
||||
itemStyle: {
|
||||
normal: {
|
||||
lineStyle: {
|
||||
type: 'dashed'
|
||||
}
|
||||
}
|
||||
},
|
||||
data: [
|
||||
[{type: 'min'}, {type: 'max'}]
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'Baidu',
|
||||
type: 'bar',
|
||||
barWidth: 5,
|
||||
stack: 'Search',
|
||||
data: [620, 732, 701, 734, 1090, 1130, 1120]
|
||||
},
|
||||
{
|
||||
name: 'Google',
|
||||
type: 'bar',
|
||||
stack: 'Search',
|
||||
data: [120, 132, 101, 134, 290, 230, 220]
|
||||
},
|
||||
{
|
||||
name: 'Bing',
|
||||
type: 'bar',
|
||||
stack: 'Search',
|
||||
data: [60, 72, 71, 74, 190, 130, 110]
|
||||
},
|
||||
{
|
||||
name: 'Others',
|
||||
type: 'bar',
|
||||
stack: 'Search',
|
||||
data: [62, 82, 91, 84, 109, 110, 120]
|
||||
}
|
||||
]
|
||||
};
|
||||
bar3.options = {
|
||||
title: {
|
||||
text: 'World Population',
|
||||
subtext: 'From the Internet'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
legend: {
|
||||
data: ['2011', '2012'],
|
||||
textStyle: {
|
||||
color: CHARTCONFIG.color.text
|
||||
}
|
||||
},
|
||||
toolbox: {
|
||||
show: true,
|
||||
feature: {
|
||||
saveAsImage: {show: true, title: 'save'}
|
||||
}
|
||||
},
|
||||
calculable: true,
|
||||
xAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
boundaryGap: [0, 0.01],
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: CHARTCONFIG.color.text
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: CHARTCONFIG.color.splitLine
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World Population (10k)'],
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: CHARTCONFIG.color.text
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: CHARTCONFIG.color.splitLine
|
||||
}
|
||||
},
|
||||
splitArea: {
|
||||
show: true,
|
||||
areaStyle: {
|
||||
color: CHARTCONFIG.color.splitArea
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '2011',
|
||||
type: 'bar',
|
||||
data: [18203, 23489, 29034, 104970, 131744, 630230]
|
||||
},
|
||||
{
|
||||
name: '2012',
|
||||
type: 'bar',
|
||||
data: [19325, 23438, 31000, 121594, 134141, 681807]
|
||||
}
|
||||
]
|
||||
};
|
||||
bar4.options = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['Direct', 'Email', 'Affiliate', 'Video Ads', 'Search'],
|
||||
textStyle: {
|
||||
color: CHARTCONFIG.color.text
|
||||
}
|
||||
},
|
||||
toolbox: {
|
||||
show: true,
|
||||
feature: {
|
||||
saveAsImage: {show: true, title: 'save'}
|
||||
}
|
||||
},
|
||||
calculable: true,
|
||||
xAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: CHARTCONFIG.color.text
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: CHARTCONFIG.color.splitLine
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: ['Mon.', 'Tue.', 'Wed.', 'Thu.', 'Fri.', 'Sat.', 'Sun.'],
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: CHARTCONFIG.color.text
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: CHARTCONFIG.color.splitLine
|
||||
}
|
||||
},
|
||||
splitArea: {
|
||||
show: true,
|
||||
areaStyle: {
|
||||
color: CHARTCONFIG.color.splitArea
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: 'Direct',
|
||||
type: 'bar',
|
||||
stack: 'Sum',
|
||||
itemStyle: { normal: {label: {show: true, position: 'insideRight'}}},
|
||||
data: [320, 302, 301, 334, 390, 330, 320]
|
||||
},
|
||||
{
|
||||
name: 'Email',
|
||||
type: 'bar',
|
||||
stack: 'Sum',
|
||||
itemStyle: { normal: {label: {show: true, position: 'insideRight'}}},
|
||||
data: [120, 132, 101, 134, 90, 230, 210]
|
||||
},
|
||||
{
|
||||
name: 'Affiliate',
|
||||
type: 'bar',
|
||||
stack: 'Sum',
|
||||
itemStyle: { normal: {label: {show: true, position: 'insideRight'}}},
|
||||
data: [220, 182, 191, 234, 290, 330, 310]
|
||||
},
|
||||
{
|
||||
name: 'Video Ads',
|
||||
type: 'bar',
|
||||
stack: 'Sum',
|
||||
itemStyle: { normal: {label: {show: true, position: 'insideRight'}}},
|
||||
data: [150, 212, 201, 154, 190, 330, 410]
|
||||
},
|
||||
{
|
||||
name: 'Search',
|
||||
type: 'bar',
|
||||
stack: 'Sum',
|
||||
itemStyle: { normal: {label: {show: true, position: 'insideRight'}}},
|
||||
data: [820, 832, 901, 934, 1290, 1330, 1320]
|
||||
}
|
||||
]
|
||||
};
|
||||
bar5.options = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['Savings', 'Cost', 'Income'],
|
||||
textStyle: {
|
||||
color: CHARTCONFIG.color.text
|
||||
}
|
||||
},
|
||||
toolbox: {
|
||||
show: true,
|
||||
feature: {
|
||||
saveAsImage: {show: true, title: 'save'}
|
||||
}
|
||||
},
|
||||
calculable: true,
|
||||
xAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: CHARTCONFIG.color.text
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: CHARTCONFIG.color.splitLine
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
axisTick: {show: false},
|
||||
data: ['Mon.', 'Tue.', 'Wed.', 'Thu.', 'Fri.', 'Sat.', 'Sun.'],
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: CHARTCONFIG.color.text
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: CHARTCONFIG.color.splitLine
|
||||
}
|
||||
},
|
||||
splitArea: {
|
||||
show: true,
|
||||
areaStyle: {
|
||||
color: CHARTCONFIG.color.splitArea
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: 'Savings',
|
||||
type: 'bar',
|
||||
itemStyle: { normal: {label: {show: true, position: 'inside'}}},
|
||||
data: [200, 170, 240, 244, 200, 220, 210]
|
||||
},
|
||||
{
|
||||
name: 'Income',
|
||||
type: 'bar',
|
||||
stack: 'Sum',
|
||||
barWidth: 5,
|
||||
itemStyle: {normal: {
|
||||
label: {show: true}
|
||||
}},
|
||||
data: [320, 302, 341, 374, 390, 450, 420]
|
||||
},
|
||||
{
|
||||
name: 'Cost',
|
||||
type: 'bar',
|
||||
stack: 'Sum',
|
||||
itemStyle: {normal: {
|
||||
label: {show: true, position: 'left'}
|
||||
}},
|
||||
data: [-120, -132, -101, -134, -190, -230, -210]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
const Section1 = () => (
|
||||
<div className="row">
|
||||
<div className="col-xl-6">
|
||||
|
||||
<div className="box box-default">
|
||||
<div className="box-heading">Basic Column</div>
|
||||
<div className="box-body">
|
||||
<ReactEcharts option={bar1.options} showLoading={false} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div className="col-xl-6">
|
||||
|
||||
<div className="box box-default">
|
||||
<div className="box-heading">Stacked Column</div>
|
||||
<div className="box-body">
|
||||
<ReactEcharts option={bar2.options} showLoading={false} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const Section2 = () => (
|
||||
<div className="row">
|
||||
<div className="col-xl-6">
|
||||
|
||||
<div className="box box-default">
|
||||
<div className="box-heading">Basic Bar</div>
|
||||
<div className="box-body">
|
||||
<ReactEcharts option={bar3.options} showLoading={false} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div className="col-xl-6">
|
||||
|
||||
<div className="box box-default">
|
||||
<div className="box-heading">Stacked Bar</div>
|
||||
<div className="box-body">
|
||||
<ReactEcharts option={bar4.options} showLoading={false} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const Section3 = () => (
|
||||
<div className="row">
|
||||
<div className="col-xl-12">
|
||||
|
||||
<div className="box box-default">
|
||||
<div className="box-heading">Tornado</div>
|
||||
<div className="box-body">
|
||||
<ReactEcharts option={bar5.options} showLoading={false} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const Bar = () => (
|
||||
<div className="container-fluid no-breadcrumbs">
|
||||
<Section1 />
|
||||
<Section2 />
|
||||
<Section3 />
|
||||
</div>
|
||||
);
|
||||
|
||||
module.exports = Bar;
|
||||
8
src/routes/app/routes/charts/routes/bar/index.js
Normal file
8
src/routes/app/routes/charts/routes/bar/index.js
Normal file
@@ -0,0 +1,8 @@
|
||||
module.exports = {
|
||||
path: 'bar',
|
||||
getComponent(nextState, cb) {
|
||||
require.ensure([], (require) => {
|
||||
cb(null, require('./components/Bar'));
|
||||
});
|
||||
}
|
||||
};
|
||||
261
src/routes/app/routes/charts/routes/funnel/components/Funnel.js
Normal file
261
src/routes/app/routes/charts/routes/funnel/components/Funnel.js
Normal file
@@ -0,0 +1,261 @@
|
||||
import React from 'react';
|
||||
import ReactEcharts from 'components/ReactECharts';
|
||||
import CHARTCONFIG from 'constants/ChartConfig';
|
||||
|
||||
const funnel1 = {};
|
||||
const funnel2 = {};
|
||||
const funnel3 = {};
|
||||
|
||||
|
||||
funnel1.options = {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b} : {c}%'
|
||||
},
|
||||
toolbox: {
|
||||
show: true,
|
||||
feature: {
|
||||
saveAsImage: {show: true, title: 'save'}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['Dispaly', 'Click', 'Visit', 'Question', 'Order'],
|
||||
textStyle: {
|
||||
color: CHARTCONFIG.color.text
|
||||
}
|
||||
},
|
||||
calculable: true,
|
||||
series: [
|
||||
{
|
||||
name: 'Funnel',
|
||||
type: 'funnel',
|
||||
x: '10%',
|
||||
y: 60,
|
||||
// x2: 80,
|
||||
y2: 60,
|
||||
width: '80%',
|
||||
// height: {totalHeight} - y - y2,
|
||||
min: 0,
|
||||
max: 100,
|
||||
minSize: '0%',
|
||||
maxSize: '100%',
|
||||
sort: 'descending', // 'ascending', 'descending'
|
||||
gap: 10,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderColor: '#fff',
|
||||
borderWidth: 1,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'inside'
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
length: 10,
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
type: 'solid'
|
||||
}
|
||||
}
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
formatter: '{b}:{c}%'
|
||||
},
|
||||
labelLine: {
|
||||
show: true
|
||||
}
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{value: 60, name: 'Visit'},
|
||||
{value: 40, name: 'Question'},
|
||||
{value: 20, name: 'Order'},
|
||||
{value: 80, name: 'Click'},
|
||||
{value: 100, name: 'Dispaly'}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
funnel2.options = {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b} : {c}%'
|
||||
},
|
||||
toolbox: {
|
||||
feature: {
|
||||
saveAsImage: {show: true, title: 'save'}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['Display', 'Click', 'Visit', 'Question', 'Order'],
|
||||
textStyle: {
|
||||
color: CHARTCONFIG.color.text
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'Forecast',
|
||||
type: 'funnel',
|
||||
left: '10%',
|
||||
width: '80%',
|
||||
label: {
|
||||
normal: {
|
||||
formatter: '{b} Forecast'
|
||||
},
|
||||
emphasis: {
|
||||
position: 'inside',
|
||||
formatter: '{b} Forecast: {c}%'
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
normal: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
opacity: 0.7
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{value: 60, name: 'Visit'},
|
||||
{value: 40, name: 'Question'},
|
||||
{value: 20, name: 'Order'},
|
||||
{value: 80, name: 'Click'},
|
||||
{value: 100, name: 'Display'}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Reality',
|
||||
type: 'funnel',
|
||||
left: '10%',
|
||||
width: '80%',
|
||||
maxSize: '80%',
|
||||
label: {
|
||||
normal: {
|
||||
position: 'inside',
|
||||
formatter: '{c}%',
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
emphasis: {
|
||||
position: 'inside',
|
||||
formatter: '{b} Reality: {c}%'
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
opacity: 0.5,
|
||||
borderColor: '#fff',
|
||||
borderWidth: 2
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{value: 30, name: 'Visit'},
|
||||
{value: 10, name: 'Ask'},
|
||||
{value: 5, name: 'Order'},
|
||||
{value: 50, name: 'Click'},
|
||||
{value: 80, name: 'Display'}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
funnel3.options = {
|
||||
title: {
|
||||
text: 'Funnel',
|
||||
subtext: 'Fake Data'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b} : {c}%'
|
||||
},
|
||||
toolbox: {
|
||||
show: true,
|
||||
feature: {
|
||||
saveAsImage: {show: true, title: 'save'}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['Dispaly', 'Click', 'Visit', 'Question', 'Order'],
|
||||
textStyle: {
|
||||
color: CHARTCONFIG.color.text
|
||||
}
|
||||
},
|
||||
calculable: true,
|
||||
series: [
|
||||
{
|
||||
name: 'Funnel',
|
||||
type: 'funnel',
|
||||
width: '40%',
|
||||
data: [
|
||||
{value: 60, name: 'Visit'},
|
||||
{value: 40, name: 'Question'},
|
||||
{value: 20, name: 'Order'},
|
||||
{value: 80, name: 'Click'},
|
||||
{value: 100, name: 'Dispaly'}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Pyramid',
|
||||
type: 'funnel',
|
||||
x: '50%',
|
||||
sort: 'ascending',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
position: 'left'
|
||||
}
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{value: 60, name: 'Visit'},
|
||||
{value: 40, name: 'Question'},
|
||||
{value: 20, name: 'Order'},
|
||||
{value: 80, name: 'Click'},
|
||||
{value: 100, name: 'Dispaly'}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
const Funnel = () => (
|
||||
<div className="container-fluid no-breadcrumbs">
|
||||
|
||||
<div className="row">
|
||||
<div className="col-xl-6">
|
||||
|
||||
<div className="box box-default">
|
||||
<div className="box-heading">Basic Funnel</div>
|
||||
<div className="box-body">
|
||||
<ReactEcharts option={funnel1.options} showLoading={false} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div className="col-xl-6">
|
||||
|
||||
<div className="box box-default">
|
||||
<div className="box-heading">Multiple Funnel</div>
|
||||
<div className="box-body">
|
||||
<ReactEcharts option={funnel2.options} showLoading={false} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="box box-default">
|
||||
<div className="box-heading">Funnels</div>
|
||||
<div className="box-body">
|
||||
<ReactEcharts option={funnel3.options} showLoading={false} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
|
||||
module.exports = Funnel;
|
||||
8
src/routes/app/routes/charts/routes/funnel/index.js
Normal file
8
src/routes/app/routes/charts/routes/funnel/index.js
Normal file
@@ -0,0 +1,8 @@
|
||||
module.exports = {
|
||||
path: 'funnel',
|
||||
getComponent(nextState, cb) {
|
||||
require.ensure([], (require) => {
|
||||
cb(null, require('./components/Funnel'));
|
||||
});
|
||||
}
|
||||
};
|
||||
419
src/routes/app/routes/charts/routes/line/components/Line.js
Normal file
419
src/routes/app/routes/charts/routes/line/components/Line.js
Normal file
@@ -0,0 +1,419 @@
|
||||
import React from 'react';
|
||||
import ReactEcharts from 'components/ReactECharts';
|
||||
import CHARTCONFIG from 'constants/ChartConfig';
|
||||
|
||||
const line1 = {};
|
||||
const line2 = {};
|
||||
const line3 = {};
|
||||
const line4 = {};
|
||||
|
||||
line1.options = {
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
legend: {
|
||||
data: ['Highest temperature', 'Lowest temperature'],
|
||||
textStyle: {
|
||||
color: CHARTCONFIG.color.text
|
||||
}
|
||||
},
|
||||
toolbox: {
|
||||
show: true,
|
||||
feature: {
|
||||
saveAsImage: {show: true, title: 'save'}
|
||||
}
|
||||
},
|
||||
calculable: true,
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ['Mon.', 'Tue.', 'Wed.', 'Thu.', 'Fri.', 'Sat.', 'Sun.'],
|
||||
axisLabel: {
|
||||
formatter: '{value} °C',
|
||||
textStyle: {
|
||||
color: CHARTCONFIG.color.text
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: CHARTCONFIG.color.splitLine
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
formatter: '{value} °C',
|
||||
textStyle: {
|
||||
color: CHARTCONFIG.color.text
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: CHARTCONFIG.color.splitLine
|
||||
}
|
||||
},
|
||||
splitArea: {
|
||||
show: true,
|
||||
areaStyle: {
|
||||
color: CHARTCONFIG.color.splitArea
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: 'Highest temperature',
|
||||
type: 'line',
|
||||
data: [11, 11, 15, 13, 12, 13, 10],
|
||||
markPoint: {
|
||||
data: [
|
||||
{type: 'max', name: 'Max'},
|
||||
{type: 'min', name: 'Min'}
|
||||
]
|
||||
},
|
||||
markLine: {
|
||||
data: [
|
||||
{type: 'average', name: 'Average'}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'Lowest temperature',
|
||||
type: 'line',
|
||||
data: [1, -2, 2, 5, 3, 2, 0],
|
||||
markPoint: {
|
||||
data: [
|
||||
{name: 'Lowest temperature', value: -2, xAxis: 1, yAxis: -1.5}
|
||||
]
|
||||
},
|
||||
markLine: {
|
||||
data: [
|
||||
{type: 'average', name: 'Average'}
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
line2.options = {
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
legend: {
|
||||
data: ['Email', 'Affiliate', 'Video Ads', 'Direct', 'Search'],
|
||||
textStyle: {
|
||||
color: CHARTCONFIG.color.text
|
||||
}
|
||||
},
|
||||
toolbox: {
|
||||
show: true,
|
||||
feature: {
|
||||
saveAsImage: {show: true, title: 'save'}
|
||||
}
|
||||
},
|
||||
calculable: true,
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ['Mon.', 'Tue.', 'Wed.', 'Thu.', 'Fri.', 'Sat.', 'Sun.'],
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: CHARTCONFIG.color.text
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: CHARTCONFIG.color.splitLine
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: CHARTCONFIG.color.text
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: CHARTCONFIG.color.splitLine
|
||||
}
|
||||
},
|
||||
splitArea: {
|
||||
show: true,
|
||||
areaStyle: {
|
||||
color: CHARTCONFIG.color.splitArea
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: 'Email',
|
||||
type: 'line',
|
||||
stack: 'Sum',
|
||||
data: [120, 132, 101, 134, 90, 230, 210]
|
||||
},
|
||||
{
|
||||
name: 'Affiliate',
|
||||
type: 'line',
|
||||
stack: 'Sum',
|
||||
data: [220, 182, 191, 234, 290, 330, 310]
|
||||
},
|
||||
{
|
||||
name: 'Video Ads',
|
||||
type: 'line',
|
||||
stack: 'Sum',
|
||||
data: [150, 232, 201, 154, 190, 330, 410]
|
||||
},
|
||||
{
|
||||
name: 'Direct',
|
||||
type: 'line',
|
||||
stack: 'Sum',
|
||||
data: [320, 332, 301, 334, 390, 330, 320]
|
||||
},
|
||||
{
|
||||
name: 'Search',
|
||||
type: 'line',
|
||||
stack: 'Sum',
|
||||
data: [820, 932, 901, 934, 1290, 1330, 1320]
|
||||
}
|
||||
]
|
||||
};
|
||||
line3.options = {
|
||||
title: {
|
||||
text: 'Miles',
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
legend: {
|
||||
data: ['Intention', 'Pre-order', 'Deal closed'],
|
||||
textStyle: {
|
||||
color: CHARTCONFIG.color.text
|
||||
}
|
||||
},
|
||||
toolbox: {
|
||||
show: true,
|
||||
feature: {
|
||||
saveAsImage: {show: true, title: 'save'}
|
||||
}
|
||||
},
|
||||
calculable: true,
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ['Mon.', 'Tue.', 'Wed.', 'Thu.', 'Fri.', 'Sat.', 'Sun.'],
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: CHARTCONFIG.color.text
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: CHARTCONFIG.color.splitLine
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: CHARTCONFIG.color.text
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: CHARTCONFIG.color.splitLine
|
||||
}
|
||||
},
|
||||
splitArea: {
|
||||
show: true,
|
||||
areaStyle: {
|
||||
color: CHARTCONFIG.color.splitArea
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: 'Deal closed',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
itemStyle: {normal: {areaStyle: {type: 'default'}}},
|
||||
data: [10, 12, 21, 54, 260, 830, 710]
|
||||
},
|
||||
{
|
||||
name: 'Pre-order',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
itemStyle: {normal: {areaStyle: {type: 'default'}}},
|
||||
data: [30, 182, 434, 791, 390, 30, 10]
|
||||
},
|
||||
{
|
||||
name: 'Intention',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
itemStyle: {normal: {areaStyle: {type: 'default'}}},
|
||||
data: [1320, 1132, 601, 234, 120, 90, 20]
|
||||
}
|
||||
]
|
||||
};
|
||||
line4.options = {
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
legend: {
|
||||
data: ['Email', 'Affiliate', 'Video Ads', 'Direct', 'Search'],
|
||||
textStyle: {
|
||||
color: CHARTCONFIG.color.text
|
||||
}
|
||||
},
|
||||
toolbox: {
|
||||
show: true,
|
||||
feature: {
|
||||
saveAsImage: {show: true, title: 'save'}
|
||||
}
|
||||
},
|
||||
calculable: true,
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ['Mon.', 'Tue.', 'Wed.', 'Thu.', 'Fri.', 'Sat.', 'Sun.'],
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: CHARTCONFIG.color.text
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: CHARTCONFIG.color.splitLine
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: CHARTCONFIG.color.text
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: CHARTCONFIG.color.splitLine
|
||||
}
|
||||
},
|
||||
splitArea: {
|
||||
show: true,
|
||||
areaStyle: {
|
||||
color: CHARTCONFIG.color.splitArea
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: 'Email',
|
||||
type: 'line',
|
||||
stack: 'Sum',
|
||||
itemStyle: {normal: {areaStyle: {type: 'default'}}},
|
||||
data: [120, 132, 101, 134, 90, 230, 210]
|
||||
},
|
||||
{
|
||||
name: 'Affiliate',
|
||||
type: 'line',
|
||||
stack: 'Sum',
|
||||
itemStyle: {normal: {areaStyle: {type: 'default'}}},
|
||||
data: [220, 182, 191, 234, 290, 330, 310]
|
||||
},
|
||||
{
|
||||
name: 'Video Ads',
|
||||
type: 'line',
|
||||
stack: 'Sum',
|
||||
itemStyle: {normal: {areaStyle: {type: 'default'}}},
|
||||
data: [150, 232, 201, 154, 190, 330, 410]
|
||||
},
|
||||
{
|
||||
name: 'Direct',
|
||||
type: 'line',
|
||||
stack: 'Sum',
|
||||
itemStyle: {normal: {areaStyle: {type: 'default'}}},
|
||||
data: [320, 332, 301, 334, 390, 330, 320]
|
||||
},
|
||||
{
|
||||
name: 'Search',
|
||||
type: 'line',
|
||||
stack: 'Sum',
|
||||
itemStyle: {normal: {areaStyle: {type: 'default'}}},
|
||||
data: [820, 932, 901, 934, 1290, 1330, 1320]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
|
||||
const Line = () => (
|
||||
<div className="container-fluid no-breadcrumbs">
|
||||
|
||||
<div className="row">
|
||||
<div className="col-xl-6">
|
||||
|
||||
<div className="box box-default">
|
||||
<div className="box-heading">Base Line</div>
|
||||
<div className="box-body">
|
||||
<ReactEcharts option={line1.options} showLoading={false} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div className="col-xl-6">
|
||||
|
||||
<div className="box box-default">
|
||||
<div className="box-heading">Stacked Line</div>
|
||||
<div className="box-body">
|
||||
<ReactEcharts option={line2.options} showLoading={false} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="row">
|
||||
<div className="col-xl-6">
|
||||
|
||||
<div className="box box-default">
|
||||
<div className="box-heading">Base Area</div>
|
||||
<div className="box-body">
|
||||
<ReactEcharts option={line3.options} showLoading={false} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div className="col-xl-6">
|
||||
|
||||
<div className="box box-default">
|
||||
<div className="box-heading">Stacked Area</div>
|
||||
<div className="box-body">
|
||||
<ReactEcharts option={line4.options} showLoading={false} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
|
||||
module.exports = Line;
|
||||
8
src/routes/app/routes/charts/routes/line/index.js
Normal file
8
src/routes/app/routes/charts/routes/line/index.js
Normal file
@@ -0,0 +1,8 @@
|
||||
module.exports = {
|
||||
path: 'line',
|
||||
getComponent(nextState, cb) {
|
||||
require.ensure([], (require) => {
|
||||
cb(null, require('./components/Line'));
|
||||
});
|
||||
}
|
||||
};
|
||||
189
src/routes/app/routes/charts/routes/more/components/More.js
Normal file
189
src/routes/app/routes/charts/routes/more/components/More.js
Normal file
@@ -0,0 +1,189 @@
|
||||
import React from 'react';
|
||||
import ReactEcharts from 'components/ReactECharts';
|
||||
import CHARTCONFIG from 'constants/ChartConfig';
|
||||
|
||||
const gauge1 = {};
|
||||
const pie5 = {};
|
||||
|
||||
const heatmapHours = [
|
||||
'12a', '1a', '2a', '3a', '4a', '5a', '6a',
|
||||
'7a', '8a', '9a', '10a', '11a',
|
||||
'12p', '1p', '2p', '3p', '4p', '5p',
|
||||
'6p', '7p', '8p', '9p', '10p', '11p'];
|
||||
const heatmapDays = ['Saturday', 'Friday', 'Thursday',
|
||||
'Wednesday', 'Tuesday', 'Monday', 'Sunday'];
|
||||
|
||||
const heatmapDataSource = [[0, 0, 5], [0, 1, 1], [0, 2, 0], [0, 3, 0], [0, 4, 0], [0, 5, 0], [0, 6, 0], [0, 7, 0], [0, 8, 0], [0, 9, 0], [0, 10, 0], [0, 11, 2], [0, 12, 4], [0, 13, 1], [0, 14, 1], [0, 15, 3], [0, 16, 4], [0, 17, 6], [0, 18, 4], [0, 19, 4], [0, 20, 3], [0, 21, 3], [0, 22, 2], [0, 23, 5], [1, 0, 7], [1, 1, 0], [1, 2, 0], [1, 3, 0], [1, 4, 0], [1, 5, 0], [1, 6, 0], [1, 7, 0], [1, 8, 0], [1, 9, 0], [1, 10, 5], [1, 11, 2], [1, 12, 2], [1, 13, 6], [1, 14, 9], [1, 15, 11], [1, 16, 6], [1, 17, 7], [1, 18, 8], [1, 19, 12], [1, 20, 5], [1, 21, 5], [1, 22, 7], [1, 23, 2], [2, 0, 1], [2, 1, 1], [2, 2, 0], [2, 3, 0], [2, 4, 0], [2, 5, 0], [2, 6, 0], [2, 7, 0], [2, 8, 0], [2, 9, 0], [2, 10, 3], [2, 11, 2], [2, 12, 1], [2, 13, 9], [2, 14, 8], [2, 15, 10], [2, 16, 6], [2, 17, 5], [2, 18, 5], [2, 19, 5], [2, 20, 7], [2, 21, 4], [2, 22, 2], [2, 23, 4], [3, 0, 7], [3, 1, 3], [3, 2, 0], [3, 3, 0], [3, 4, 0], [3, 5, 0], [3, 6, 0], [3, 7, 0], [3, 8, 1], [3, 9, 0], [3, 10, 5], [3, 11, 4], [3, 12, 7], [3, 13, 14], [3, 14, 13], [3, 15, 12], [3, 16, 9], [3, 17, 5], [3, 18, 5], [3, 19, 10], [3, 20, 6], [3, 21, 4], [3, 22, 4], [3, 23, 1], [4, 0, 1], [4, 1, 3], [4, 2, 0], [4, 3, 0], [4, 4, 0], [4, 5, 1], [4, 6, 0], [4, 7, 0], [4, 8, 0], [4, 9, 2], [4, 10, 4], [4, 11, 4], [4, 12, 2], [4, 13, 4], [4, 14, 4], [4, 15, 14], [4, 16, 12], [4, 17, 1], [4, 18, 8], [4, 19, 5], [4, 20, 3], [4, 21, 7], [4, 22, 3], [4, 23, 0], [5, 0, 2], [5, 1, 1], [5, 2, 0], [5, 3, 3], [5, 4, 0], [5, 5, 0], [5, 6, 0], [5, 7, 0], [5, 8, 2], [5, 9, 0], [5, 10, 4], [5, 11, 1], [5, 12, 5], [5, 13, 10], [5, 14, 5], [5, 15, 7], [5, 16, 11], [5, 17, 6], [5, 18, 0], [5, 19, 5], [5, 20, 3], [5, 21, 4], [5, 22, 2], [5, 23, 0], [6, 0, 1], [6, 1, 0], [6, 2, 0], [6, 3, 0], [6, 4, 0], [6, 5, 0], [6, 6, 0], [6, 7, 0], [6, 8, 0], [6, 9, 0], [6, 10, 1], [6, 11, 0], [6, 12, 2], [6, 13, 1], [6, 14, 3], [6, 15, 4], [6, 16, 0], [6, 17, 0], [6, 18, 0], [6, 19, 0], [6, 20, 1], [6, 21, 2], [6, 22, 2], [6, 23, 6]];
|
||||
|
||||
const heatmapData = heatmapDataSource.map(item => [item[1], item[0], item[2] || '-']);
|
||||
const heatmap1 = {};
|
||||
|
||||
|
||||
gauge1.options = {
|
||||
tooltip: {
|
||||
formatter: '{a} <br/>{b} : {c}%'
|
||||
},
|
||||
toolbox: {
|
||||
show: true,
|
||||
feature: {
|
||||
saveAsImage: {show: true, title: 'save'}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'Business metric',
|
||||
type: 'gauge',
|
||||
detail: {formatter: '{value}%'},
|
||||
data: [{value: 50, name: 'Completion'}],
|
||||
title: {
|
||||
textStyle: {
|
||||
color: CHARTCONFIG.color.text
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
pie5.options = {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b}: {c} ({d}%)'
|
||||
},
|
||||
legend: {
|
||||
show: false,
|
||||
orient: 'vertical',
|
||||
x: 'left',
|
||||
data: ['Direct', 'Ads', 'Search', 'Email Marketing', 'Affiliates', 'Video Ads', 'Google', 'Bing', 'Others'],
|
||||
textStyle: {
|
||||
color: CHARTCONFIG.color.text
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'Traffic Source',
|
||||
type: 'pie',
|
||||
selectedMode: 'single',
|
||||
radius: [0, '30%'],
|
||||
|
||||
label: {
|
||||
normal: {
|
||||
position: 'inner'
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
normal: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{value: 355, name: 'Direct', selected: true},
|
||||
{value: 679, name: 'Ads'},
|
||||
{value: 1401, name: 'Search'}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Traffic Source',
|
||||
type: 'pie',
|
||||
radius: ['40%', '55%'],
|
||||
data: [
|
||||
{value: 355, name: 'Direct'},
|
||||
{value: 310, name: 'Email Marketing'},
|
||||
{value: 234, name: 'Affiliates'},
|
||||
{value: 135, name: 'Video Ads'},
|
||||
{value: 1048, name: 'Google'},
|
||||
{value: 251, name: 'Bing'},
|
||||
{value: 102, name: 'Others'}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
|
||||
heatmap1.options = {
|
||||
tooltip: {
|
||||
position: 'top'
|
||||
},
|
||||
animation: false,
|
||||
grid: {
|
||||
height: '50%',
|
||||
y: '10%'
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: heatmapHours,
|
||||
splitArea: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
data: heatmapDays,
|
||||
splitArea: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
visualMap: {
|
||||
min: 0,
|
||||
max: 10,
|
||||
calculable: true,
|
||||
orient: 'horizontal',
|
||||
left: 'center',
|
||||
bottom: '15%'
|
||||
},
|
||||
series: [{
|
||||
name: 'Punch Card',
|
||||
type: 'heatmap',
|
||||
data: heatmapData,
|
||||
label: {
|
||||
normal: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
emphasis: {
|
||||
shadowBlur: 10,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
}
|
||||
}]
|
||||
};
|
||||
|
||||
|
||||
const More = () => (
|
||||
<div className="container-fluid no-breadcrumbs">
|
||||
|
||||
<div className="row">
|
||||
<div className="col-xl-6">
|
||||
|
||||
<div className="box box-default">
|
||||
<div className="box-heading">Gauge</div>
|
||||
<div className="box-body">
|
||||
<ReactEcharts option={gauge1.options} showLoading={false} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div className="col-xl-6">
|
||||
|
||||
<div className="box box-default">
|
||||
<div className="box-heading">Pie</div>
|
||||
<div className="box-body">
|
||||
<ReactEcharts option={pie5.options} showLoading={false} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="box box-default">
|
||||
<div className="box-heading">Heatmap</div>
|
||||
<div className="box-body">
|
||||
<ReactEcharts option={heatmap1.options} showLoading={false} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
|
||||
module.exports = More;
|
||||
8
src/routes/app/routes/charts/routes/more/index.js
Normal file
8
src/routes/app/routes/charts/routes/more/index.js
Normal file
@@ -0,0 +1,8 @@
|
||||
module.exports = {
|
||||
path: 'more',
|
||||
getComponent(nextState, cb) {
|
||||
require.ensure([], (require) => {
|
||||
cb(null, require('./components/More'));
|
||||
});
|
||||
}
|
||||
};
|
||||
232
src/routes/app/routes/charts/routes/pie/components/Pie.js
Normal file
232
src/routes/app/routes/charts/routes/pie/components/Pie.js
Normal file
@@ -0,0 +1,232 @@
|
||||
import React from 'react';
|
||||
import ReactEcharts from 'components/ReactECharts';
|
||||
import CHARTCONFIG from 'constants/ChartConfig';
|
||||
|
||||
const pie1 = {};
|
||||
const pie2 = {};
|
||||
const pie4 = {};
|
||||
|
||||
pie1.options = {
|
||||
title: {
|
||||
text: 'Traffic Source',
|
||||
x: 'center'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b} : {c} ({d}%)'
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
x: 'left',
|
||||
data: ['Direct', 'Email', 'Affiliate', 'Video Ads', 'Search'],
|
||||
textStyle: {
|
||||
color: CHARTCONFIG.color.text
|
||||
}
|
||||
},
|
||||
toolbox: {
|
||||
show: true,
|
||||
feature: {
|
||||
saveAsImage: {show: true, title: 'save'}
|
||||
}
|
||||
},
|
||||
calculable: true,
|
||||
series: [
|
||||
{
|
||||
name: 'Vist source',
|
||||
type: 'pie',
|
||||
radius: '55%',
|
||||
center: ['50%', '60%'],
|
||||
data: [
|
||||
{value: 335, name: 'Direct'},
|
||||
{value: 310, name: 'Email'},
|
||||
{value: 234, name: 'Affiliate'},
|
||||
{value: 135, name: 'Video Ads'},
|
||||
{value: 1548, name: 'Search'}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
pie2.options = {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b} : {c} ({d}%)'
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
x: 'left',
|
||||
data: ['Direct', 'Email', 'Affiliate', 'Video Ads', 'Search'],
|
||||
textStyle: {
|
||||
color: CHARTCONFIG.color.text
|
||||
}
|
||||
},
|
||||
toolbox: {
|
||||
show: true,
|
||||
feature: {
|
||||
saveAsImage: {show: true, title: 'save'}
|
||||
}
|
||||
},
|
||||
calculable: true,
|
||||
series: [
|
||||
{
|
||||
name: 'Traffic source',
|
||||
type: 'pie',
|
||||
radius: ['50%', '70%'],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
position: 'center',
|
||||
textStyle: {
|
||||
fontSize: '30',
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{value: 335, name: 'Direct'},
|
||||
{value: 310, name: 'Email'},
|
||||
{value: 234, name: 'Affiliate'},
|
||||
{value: 135, name: 'Video Ads'},
|
||||
{value: 1548, name: 'Search'}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
pie4.options = {
|
||||
title: {
|
||||
text: 'Nightingale rose diagram',
|
||||
x: 'center'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b} : {c} ({d}%)'
|
||||
},
|
||||
legend: {
|
||||
x: 'center',
|
||||
y: 'bottom',
|
||||
data: ['rose1', 'rose2', 'rose3', 'rose4', 'rose5', 'rose6', 'rose7', 'rose8'],
|
||||
textStyle: {
|
||||
color: CHARTCONFIG.color.text
|
||||
}
|
||||
},
|
||||
toolbox: {
|
||||
show: true,
|
||||
feature: {
|
||||
saveAsImage: {show: true, title: 'save'}
|
||||
}
|
||||
},
|
||||
calculable: true,
|
||||
series: [
|
||||
{
|
||||
name: 'Radius model',
|
||||
type: 'pie',
|
||||
radius: [20, 110],
|
||||
center: ['25%', 200],
|
||||
roseType: 'radius',
|
||||
width: '40%', // for funnel
|
||||
max: 40, // for funnel
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true
|
||||
},
|
||||
labelLine: {
|
||||
show: true
|
||||
}
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{value: 10, name: 'rose1'},
|
||||
{value: 5, name: 'rose2'},
|
||||
{value: 15, name: 'rose3'},
|
||||
{value: 25, name: 'rose4'},
|
||||
{value: 20, name: 'rose5'},
|
||||
{value: 35, name: 'rose6'},
|
||||
{value: 30, name: 'rose7'},
|
||||
{value: 40, name: 'rose8'}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Area model',
|
||||
type: 'pie',
|
||||
radius: [30, 110],
|
||||
center: ['75%', 200],
|
||||
roseType: 'area',
|
||||
x: '50%', // for funnel
|
||||
max: 40, // for funnel
|
||||
sort: 'ascending', // for funnel
|
||||
data: [
|
||||
{value: 10, name: 'rose1'},
|
||||
{value: 5, name: 'rose2'},
|
||||
{value: 15, name: 'rose3'},
|
||||
{value: 25, name: 'rose4'},
|
||||
{value: 20, name: 'rose5'},
|
||||
{value: 35, name: 'rose6'},
|
||||
{value: 30, name: 'rose7'},
|
||||
{value: 40, name: 'rose8'}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
};
|
||||
|
||||
const Pie = () => (
|
||||
<div className="container-fluid no-breadcrumbs">
|
||||
|
||||
<div className="row">
|
||||
<div className="col-xl-6">
|
||||
|
||||
<div className="box box-default">
|
||||
<div className="box-heading">Basic Pie</div>
|
||||
<div className="box-body">
|
||||
<ReactEcharts option={pie1.options} showLoading={false} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div className="col-xl-6">
|
||||
|
||||
<div className="box box-default">
|
||||
<div className="box-heading">Doughnut</div>
|
||||
<div className="box-body">
|
||||
<ReactEcharts option={pie2.options} showLoading={false} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="row">
|
||||
<div className="col-xl-12">
|
||||
|
||||
<div className="box box-default">
|
||||
<div className="box-heading">Nightingale's Rose Diagram</div>
|
||||
<div className="box-body">
|
||||
<ReactEcharts option={pie4.options} showLoading={false} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
|
||||
module.exports = Pie;
|
||||
8
src/routes/app/routes/charts/routes/pie/index.js
Normal file
8
src/routes/app/routes/charts/routes/pie/index.js
Normal file
@@ -0,0 +1,8 @@
|
||||
module.exports = {
|
||||
path: 'pie',
|
||||
getComponent(nextState, cb) {
|
||||
require.ensure([], (require) => {
|
||||
cb(null, require('./components/Pie'));
|
||||
});
|
||||
}
|
||||
};
|
||||
333
src/routes/app/routes/charts/routes/radar/components/Radar.js
Normal file
333
src/routes/app/routes/charts/routes/radar/components/Radar.js
Normal file
@@ -0,0 +1,333 @@
|
||||
import React from 'react';
|
||||
import ReactEcharts from 'components/ReactECharts';
|
||||
import CHARTCONFIG from 'constants/ChartConfig';
|
||||
|
||||
const radar1 = {};
|
||||
const radar2 = {};
|
||||
const radar3 = {};
|
||||
|
||||
radar1.options = {
|
||||
title: {
|
||||
text: 'Budget vs spending'
|
||||
},
|
||||
tooltip: {},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
x: 'right',
|
||||
y: 'bottom',
|
||||
data: ['Allocated Budget', 'Actual Spending'],
|
||||
textStyle: {
|
||||
color: CHARTCONFIG.color.text
|
||||
}
|
||||
},
|
||||
toolbox: {
|
||||
show: true,
|
||||
feature: {
|
||||
saveAsImage: {show: true, title: 'save'}
|
||||
}
|
||||
},
|
||||
radar: [
|
||||
{
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
// for both indicator and axisLine, bad, better seperate them
|
||||
color: '#b1b1b1'
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(0,0,0,.1)'
|
||||
}
|
||||
},
|
||||
splitArea: {
|
||||
show: true,
|
||||
areaStyle: {
|
||||
color: CHARTCONFIG.color.splitArea
|
||||
}
|
||||
},
|
||||
indicator: [
|
||||
{ name: 'Miles', max: 6000},
|
||||
{ name: 'Administration', max: 16000},
|
||||
{ name: 'Information Techology', max: 30000},
|
||||
{ name: 'Customer Support', max: 38000},
|
||||
{ name: 'Development', max: 52000},
|
||||
{ name: 'Marketing', max: 25000}
|
||||
]
|
||||
}
|
||||
],
|
||||
calculable: true,
|
||||
series: [
|
||||
{
|
||||
name: 'Budget vs spending',
|
||||
type: 'radar',
|
||||
data: [
|
||||
{
|
||||
value: [4300, 10000, 28000, 35000, 50000, 19000],
|
||||
name: 'Allocated Budget'
|
||||
},
|
||||
{
|
||||
value: [5000, 14000, 28000, 31000, 42000, 21000],
|
||||
name: 'Actual Spending'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
radar2.options = {
|
||||
tooltip: {},
|
||||
legend: {
|
||||
x: 'center',
|
||||
data: ['Ronaldo', 'Andriy Shevchenko'],
|
||||
textStyle: {
|
||||
color: CHARTCONFIG.color.text
|
||||
}
|
||||
},
|
||||
toolbox: {
|
||||
show: true,
|
||||
feature: {
|
||||
saveAsImage: {show: true, title: 'save'}
|
||||
}
|
||||
},
|
||||
calculable: true,
|
||||
radar: [
|
||||
{
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
// for both indicator and axisLine, bad, better seperate them
|
||||
color: '#b1b1b1'
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(0,0,0,.1)'
|
||||
}
|
||||
},
|
||||
splitArea: {
|
||||
show: true,
|
||||
areaStyle: {
|
||||
color: CHARTCONFIG.color.splitArea
|
||||
}
|
||||
},
|
||||
indicator: [
|
||||
{name: 'Attack', max: 100},
|
||||
{name: 'Guard', max: 100},
|
||||
{name: 'Physical', max: 100},
|
||||
{name: 'Speed', max: 100},
|
||||
{name: 'Strength', max: 100},
|
||||
{name: 'Skill', max: 100}
|
||||
],
|
||||
radius: 130
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: 'Full of live data',
|
||||
type: 'radar',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
areaStyle: {
|
||||
type: 'default'
|
||||
}
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: [97, 42, 88, 94, 90, 86],
|
||||
name: 'Andriy Shevchenko'
|
||||
},
|
||||
{
|
||||
value: [97, 32, 74, 95, 88, 92],
|
||||
name: 'Ronaldo'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
radar3.options = {
|
||||
// title: {
|
||||
// text: 'Mutiple Radar'
|
||||
// },
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
legend: {
|
||||
x: 'center',
|
||||
data: ['Software', 'Galaxy Phone', 'iPhone', 'Precipitation', 'Evaporation'],
|
||||
textStyle: {
|
||||
color: CHARTCONFIG.color.text
|
||||
}
|
||||
},
|
||||
radar: [
|
||||
{
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
// for both indicator and axisLine, bad, better seperate them
|
||||
color: '#b1b1b1'
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(0,0,0,.1)'
|
||||
}
|
||||
},
|
||||
splitArea: {
|
||||
show: true,
|
||||
areaStyle: {
|
||||
color: CHARTCONFIG.color.splitArea
|
||||
}
|
||||
},
|
||||
indicator: [
|
||||
{text: 'Brand', max: 100},
|
||||
{text: 'Content', max: 100},
|
||||
{text: 'Usability', max: 100},
|
||||
{text: 'Features', max: 100}
|
||||
],
|
||||
center: ['25%', '40%'],
|
||||
radius: 80
|
||||
},
|
||||
{
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
// for both indicator and axisLine, bad, better seperate them
|
||||
color: '#b1b1b1'
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(0,0,0,.1)'
|
||||
}
|
||||
},
|
||||
splitArea: {
|
||||
show: true,
|
||||
areaStyle: {
|
||||
color: CHARTCONFIG.color.splitArea
|
||||
}
|
||||
},
|
||||
indicator: [
|
||||
{text: 'Look', max: 100},
|
||||
{text: 'Camera', max: 100},
|
||||
{text: 'System', max: 100},
|
||||
{text: 'Performance', max: 100},
|
||||
{text: 'Display', max: 100}
|
||||
],
|
||||
radius: 80,
|
||||
center: ['50%', '60%'],
|
||||
},
|
||||
{
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
// for both indicator and axisLine, bad, better seperate them
|
||||
color: '#b1b1b1'
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(0,0,0,.1)'
|
||||
}
|
||||
},
|
||||
splitArea: {
|
||||
show: true,
|
||||
areaStyle: {
|
||||
color: CHARTCONFIG.color.splitArea
|
||||
}
|
||||
},
|
||||
indicator: (function () {
|
||||
const res = [];
|
||||
for (let i = 1; i <= 12; i++) {
|
||||
res.push({text: `Mon. ${i}`, max: 100});
|
||||
}
|
||||
return res;
|
||||
}()),
|
||||
center: ['75%', '40%'],
|
||||
radius: 80
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
type: 'radar',
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
itemStyle: {normal: {areaStyle: {type: 'default'}}},
|
||||
data: [
|
||||
{
|
||||
value: [60, 73, 85, 40],
|
||||
name: 'Software'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'radar',
|
||||
radarIndex: 1,
|
||||
data: [
|
||||
{
|
||||
value: [85, 90, 90, 95, 95],
|
||||
name: 'Galaxy Phone'
|
||||
},
|
||||
{
|
||||
value: [95, 80, 95, 90, 93],
|
||||
name: 'iPhone'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'radar',
|
||||
radarIndex: 2,
|
||||
itemStyle: {normal: {areaStyle: {type: 'default'}}},
|
||||
data: [
|
||||
{
|
||||
name: 'Precipitation',
|
||||
value: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 75.6, 82.2, 48.7, 18.8, 6.0, 2.3],
|
||||
},
|
||||
{
|
||||
name: 'Evaporation',
|
||||
value: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 35.6, 62.2, 32.6, 20.0, 6.4, 3.3]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
const Radar = () => (
|
||||
<div className="container-fluid no-breadcrumbs">
|
||||
|
||||
<div className="row">
|
||||
<div className="col-xl-6">
|
||||
|
||||
<div className="box box-default">
|
||||
<div className="box-heading">Basic Radar</div>
|
||||
<div className="box-body">
|
||||
<ReactEcharts option={radar1.options} showLoading={false} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div className="col-xl-6">
|
||||
|
||||
<div className="box box-default">
|
||||
<div className="box-heading">Basic Filled Radar</div>
|
||||
<div className="box-body">
|
||||
<ReactEcharts option={radar2.options} showLoading={false} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="box box-default">
|
||||
<div className="box-heading">Basic Gauge</div>
|
||||
<div className="box-body">
|
||||
<ReactEcharts option={radar3.options} showLoading={false} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
|
||||
module.exports = Radar;
|
||||
8
src/routes/app/routes/charts/routes/radar/index.js
Normal file
8
src/routes/app/routes/charts/routes/radar/index.js
Normal file
@@ -0,0 +1,8 @@
|
||||
module.exports = {
|
||||
path: 'radar',
|
||||
getComponent(nextState, cb) {
|
||||
require.ensure([], (require) => {
|
||||
cb(null, require('./components/Radar'));
|
||||
});
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,366 @@
|
||||
import React from 'react';
|
||||
import ReactEcharts from 'components/ReactECharts';
|
||||
import CHARTCONFIG from 'constants/ChartConfig';
|
||||
|
||||
const scatter1 = {};
|
||||
const scatter2 = {};
|
||||
|
||||
scatter1.options = {
|
||||
title: {
|
||||
text: 'Height and weight distribution',
|
||||
subtext: 'Data: Heinz 2003'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
showDelay: 0,
|
||||
formatter(params) {
|
||||
if (params.value.length > 1) {
|
||||
return `${params.seriesName} :<br/>${
|
||||
params.value[0]}cm ${
|
||||
params.value[1]}kg `;
|
||||
}
|
||||
|
||||
return `${params.seriesName} :<br/>${
|
||||
params.name} : ${
|
||||
params.value}kg `;
|
||||
|
||||
},
|
||||
axisPointer: {
|
||||
show: true,
|
||||
type: 'cross',
|
||||
lineStyle: {
|
||||
type: 'dashed',
|
||||
width: 1
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['Femail', 'Male'],
|
||||
textStyle: {
|
||||
color: CHARTCONFIG.color.text
|
||||
}
|
||||
},
|
||||
toolbox: {
|
||||
show: true,
|
||||
feature: {
|
||||
saveAsImage: {show: true, title: 'save'}
|
||||
}
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
scale: true,
|
||||
axisLabel: {
|
||||
formatter: '{value} cm',
|
||||
textStyle: {
|
||||
color: CHARTCONFIG.color.text
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: CHARTCONFIG.color.splitLine
|
||||
}
|
||||
},
|
||||
splitArea: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
scale: true,
|
||||
axisLabel: {
|
||||
formatter: '{value} kg',
|
||||
textStyle: {
|
||||
color: CHARTCONFIG.color.text
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: CHARTCONFIG.color.splitLine
|
||||
}
|
||||
},
|
||||
splitArea: {
|
||||
show: true,
|
||||
areaStyle: {
|
||||
color: CHARTCONFIG.color.splitArea
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: 'Femail',
|
||||
type: 'scatter',
|
||||
data: [
|
||||
[161.2, 51.6], [167.5, 59.0], [159.5, 49.2], [157.0, 63.0], [155.8, 53.6],
|
||||
[170.0, 59.0], [159.1, 47.6], [166.0, 69.8], [176.2, 66.8], [160.2, 75.2],
|
||||
[172.5, 55.2], [170.9, 54.2], [172.9, 62.5], [153.4, 42.0], [160.0, 50.0],
|
||||
[147.2, 49.8], [168.2, 49.2], [175.0, 73.2], [157.0, 47.8], [167.6, 68.8],
|
||||
[159.5, 50.6], [175.0, 82.5], [166.8, 57.2], [176.5, 87.8], [170.2, 72.8],
|
||||
[174.0, 54.5], [173.0, 59.8], [179.9, 67.3], [170.5, 67.8], [160.0, 47.0],
|
||||
[154.4, 46.2], [162.0, 55.0], [176.5, 83.0], [160.0, 54.4], [152.0, 45.8],
|
||||
[162.1, 53.6], [170.0, 73.2], [160.2, 52.1], [161.3, 67.9], [166.4, 56.6],
|
||||
[168.9, 62.3], [163.8, 58.5], [167.6, 54.5], [160.0, 50.2], [161.3, 60.3],
|
||||
[167.6, 58.3], [165.1, 56.2], [160.0, 50.2], [170.0, 72.9], [157.5, 59.8],
|
||||
[167.6, 61.0], [160.7, 69.1], [163.2, 55.9], [152.4, 46.5], [157.5, 54.3],
|
||||
[168.3, 54.8], [180.3, 60.7], [165.5, 60.0], [165.0, 62.0], [164.5, 60.3],
|
||||
[156.0, 52.7], [160.0, 74.3], [163.0, 62.0], [165.7, 73.1], [161.0, 80.0],
|
||||
[162.0, 54.7], [166.0, 53.2], [174.0, 75.7], [172.7, 61.1], [167.6, 55.7],
|
||||
[151.1, 48.7], [164.5, 52.3], [163.5, 50.0], [152.0, 59.3], [169.0, 62.5],
|
||||
[164.0, 55.7], [161.2, 54.8], [155.0, 45.9], [170.0, 70.6], [176.2, 67.2],
|
||||
[170.0, 69.4], [162.5, 58.2], [170.3, 64.8], [164.1, 71.6], [169.5, 52.8],
|
||||
[163.2, 59.8], [154.5, 49.0], [159.8, 50.0], [173.2, 69.2], [170.0, 55.9],
|
||||
[161.4, 63.4], [169.0, 58.2], [166.2, 58.6], [159.4, 45.7], [162.5, 52.2],
|
||||
[159.0, 48.6], [162.8, 57.8], [159.0, 55.6], [179.8, 66.8], [162.9, 59.4],
|
||||
[161.0, 53.6], [151.1, 73.2], [168.2, 53.4], [168.9, 69.0], [173.2, 58.4],
|
||||
[171.8, 56.2], [178.0, 70.6], [164.3, 59.8], [163.0, 72.0], [168.5, 65.2],
|
||||
[166.8, 56.6], [172.7, 105.2], [163.5, 51.8], [169.4, 63.4], [167.8, 59.0],
|
||||
[159.5, 47.6], [167.6, 63.0], [161.2, 55.2], [160.0, 45.0], [163.2, 54.0],
|
||||
[162.2, 50.2], [161.3, 60.2], [149.5, 44.8], [157.5, 58.8], [163.2, 56.4],
|
||||
[172.7, 62.0], [155.0, 49.2], [156.5, 67.2], [164.0, 53.8], [160.9, 54.4],
|
||||
[162.8, 58.0], [167.0, 59.8], [160.0, 54.8], [160.0, 43.2], [168.9, 60.5],
|
||||
[158.2, 46.4], [156.0, 64.4], [160.0, 48.8], [167.1, 62.2], [158.0, 55.5],
|
||||
[167.6, 57.8], [156.0, 54.6], [162.1, 59.2], [173.4, 52.7], [159.8, 53.2],
|
||||
[170.5, 64.5], [159.2, 51.8], [157.5, 56.0], [161.3, 63.6], [162.6, 63.2],
|
||||
[160.0, 59.5], [168.9, 56.8], [165.1, 64.1], [162.6, 50.0], [165.1, 72.3],
|
||||
[166.4, 55.0], [160.0, 55.9], [152.4, 60.4], [170.2, 69.1], [162.6, 84.5],
|
||||
[170.2, 55.9], [158.8, 55.5], [172.7, 69.5], [167.6, 76.4], [162.6, 61.4],
|
||||
[167.6, 65.9], [156.2, 58.6], [175.2, 66.8], [172.1, 56.6], [162.6, 58.6],
|
||||
[160.0, 55.9], [165.1, 59.1], [182.9, 81.8], [166.4, 70.7], [165.1, 56.8],
|
||||
[177.8, 60.0], [165.1, 58.2], [175.3, 72.7], [154.9, 54.1], [158.8, 49.1],
|
||||
[172.7, 75.9], [168.9, 55.0], [161.3, 57.3], [167.6, 55.0], [165.1, 65.5],
|
||||
[175.3, 65.5], [157.5, 48.6], [163.8, 58.6], [167.6, 63.6], [165.1, 55.2],
|
||||
[165.1, 62.7], [168.9, 56.6], [162.6, 53.9], [164.5, 63.2], [176.5, 73.6],
|
||||
[168.9, 62.0], [175.3, 63.6], [159.4, 53.2], [160.0, 53.4], [170.2, 55.0],
|
||||
[162.6, 70.5], [167.6, 54.5], [162.6, 54.5], [160.7, 55.9], [160.0, 59.0],
|
||||
[157.5, 63.6], [162.6, 54.5], [152.4, 47.3], [170.2, 67.7], [165.1, 80.9],
|
||||
[172.7, 70.5], [165.1, 60.9], [170.2, 63.6], [170.2, 54.5], [170.2, 59.1],
|
||||
[161.3, 70.5], [167.6, 52.7], [167.6, 62.7], [165.1, 86.3], [162.6, 66.4],
|
||||
[152.4, 67.3], [168.9, 63.0], [170.2, 73.6], [175.2, 62.3], [175.2, 57.7],
|
||||
[160.0, 55.4], [165.1, 104.1], [174.0, 55.5], [170.2, 77.3], [160.0, 80.5],
|
||||
[167.6, 64.5], [167.6, 72.3], [167.6, 61.4], [154.9, 58.2], [162.6, 81.8],
|
||||
[175.3, 63.6], [171.4, 53.4], [157.5, 54.5], [165.1, 53.6], [160.0, 60.0],
|
||||
[174.0, 73.6], [162.6, 61.4], [174.0, 55.5], [162.6, 63.6], [161.3, 60.9],
|
||||
[156.2, 60.0], [149.9, 46.8], [169.5, 57.3], [160.0, 64.1], [175.3, 63.6],
|
||||
[169.5, 67.3], [160.0, 75.5], [172.7, 68.2], [162.6, 61.4], [157.5, 76.8],
|
||||
[176.5, 71.8], [164.4, 55.5], [160.7, 48.6], [174.0, 66.4], [163.8, 67.3]
|
||||
],
|
||||
markPoint: {
|
||||
data: [
|
||||
{type: 'max', name: 'Max'},
|
||||
{type: 'min', name: 'Min'}
|
||||
]
|
||||
},
|
||||
markLine: {
|
||||
data: [
|
||||
{type: 'average', name: 'Average'}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'Male',
|
||||
type: 'scatter',
|
||||
data: [
|
||||
[174.0, 65.6], [175.3, 71.8], [193.5, 80.7], [186.5, 72.6], [187.2, 78.8],
|
||||
[181.5, 74.8], [184.0, 86.4], [184.5, 78.4], [175.0, 62.0], [184.0, 81.6],
|
||||
[180.0, 76.6], [177.8, 83.6], [192.0, 90.0], [176.0, 74.6], [174.0, 71.0],
|
||||
[184.0, 79.6], [192.7, 93.8], [171.5, 70.0], [173.0, 72.4], [176.0, 85.9],
|
||||
[176.0, 78.8], [180.5, 77.8], [172.7, 66.2], [176.0, 86.4], [173.5, 81.8],
|
||||
[178.0, 89.6], [180.3, 82.8], [180.3, 76.4], [164.5, 63.2], [173.0, 60.9],
|
||||
[183.5, 74.8], [175.5, 70.0], [188.0, 72.4], [189.2, 84.1], [172.8, 69.1],
|
||||
[170.0, 59.5], [182.0, 67.2], [170.0, 61.3], [177.8, 68.6], [184.2, 80.1],
|
||||
[186.7, 87.8], [171.4, 84.7], [172.7, 73.4], [175.3, 72.1], [180.3, 82.6],
|
||||
[182.9, 88.7], [188.0, 84.1], [177.2, 94.1], [172.1, 74.9], [167.0, 59.1],
|
||||
[169.5, 75.6], [174.0, 86.2], [172.7, 75.3], [182.2, 87.1], [164.1, 55.2],
|
||||
[163.0, 57.0], [171.5, 61.4], [184.2, 76.8], [174.0, 86.8], [174.0, 72.2],
|
||||
[177.0, 71.6], [186.0, 84.8], [167.0, 68.2], [171.8, 66.1], [182.0, 72.0],
|
||||
[167.0, 64.6], [177.8, 74.8], [164.5, 70.0], [192.0, 101.6], [175.5, 63.2],
|
||||
[171.2, 79.1], [181.6, 78.9], [167.4, 67.7], [181.1, 66.0], [177.0, 68.2],
|
||||
[174.5, 63.9], [177.5, 72.0], [170.5, 56.8], [182.4, 74.5], [197.1, 90.9],
|
||||
[180.1, 93.0], [175.5, 80.9], [180.6, 72.7], [184.4, 68.0], [175.5, 70.9],
|
||||
[180.6, 72.5], [177.0, 72.5], [177.1, 83.4], [181.6, 75.5], [176.5, 73.0],
|
||||
[175.0, 70.2], [174.0, 73.4], [165.1, 70.5], [177.0, 68.9], [192.0, 102.3],
|
||||
[176.5, 68.4], [169.4, 65.9], [182.1, 75.7], [179.8, 84.5], [175.3, 87.7],
|
||||
[184.9, 86.4], [177.3, 73.2], [167.4, 53.9], [178.1, 72.0], [168.9, 55.5],
|
||||
[157.2, 58.4], [180.3, 83.2], [170.2, 72.7], [177.8, 64.1], [172.7, 72.3],
|
||||
[165.1, 65.0], [186.7, 86.4], [165.1, 65.0], [174.0, 88.6], [175.3, 84.1],
|
||||
[185.4, 66.8], [177.8, 75.5], [180.3, 93.2], [180.3, 82.7], [177.8, 58.0],
|
||||
[177.8, 79.5], [177.8, 78.6], [177.8, 71.8], [177.8, 116.4], [163.8, 72.2],
|
||||
[188.0, 83.6], [198.1, 85.5], [175.3, 90.9], [166.4, 85.9], [190.5, 89.1],
|
||||
[166.4, 75.0], [177.8, 77.7], [179.7, 86.4], [172.7, 90.9], [190.5, 73.6],
|
||||
[185.4, 76.4], [168.9, 69.1], [167.6, 84.5], [175.3, 64.5], [170.2, 69.1],
|
||||
[190.5, 108.6], [177.8, 86.4], [190.5, 80.9], [177.8, 87.7], [184.2, 94.5],
|
||||
[176.5, 80.2], [177.8, 72.0], [180.3, 71.4], [171.4, 72.7], [172.7, 84.1],
|
||||
[172.7, 76.8], [177.8, 63.6], [177.8, 80.9], [182.9, 80.9], [170.2, 85.5],
|
||||
[167.6, 68.6], [175.3, 67.7], [165.1, 66.4], [185.4, 102.3], [181.6, 70.5],
|
||||
[172.7, 95.9], [190.5, 84.1], [179.1, 87.3], [175.3, 71.8], [170.2, 65.9],
|
||||
[193.0, 95.9], [171.4, 91.4], [177.8, 81.8], [177.8, 96.8], [167.6, 69.1],
|
||||
[167.6, 82.7], [180.3, 75.5], [182.9, 79.5], [176.5, 73.6], [186.7, 91.8],
|
||||
[188.0, 84.1], [188.0, 85.9], [177.8, 81.8], [174.0, 82.5], [177.8, 80.5],
|
||||
[171.4, 70.0], [185.4, 81.8], [185.4, 84.1], [188.0, 90.5], [188.0, 91.4],
|
||||
[182.9, 89.1], [176.5, 85.0], [175.3, 69.1], [175.3, 73.6], [188.0, 80.5],
|
||||
[188.0, 82.7], [175.3, 86.4], [170.5, 67.7], [179.1, 92.7], [177.8, 93.6],
|
||||
[175.3, 70.9], [182.9, 75.0], [170.8, 93.2], [188.0, 93.2], [180.3, 77.7],
|
||||
[177.8, 61.4], [185.4, 94.1], [168.9, 75.0], [185.4, 83.6], [180.3, 85.5],
|
||||
[174.0, 73.9], [167.6, 66.8], [182.9, 87.3], [160.0, 72.3], [180.3, 88.6],
|
||||
[167.6, 75.5], [186.7, 101.4], [175.3, 91.1], [175.3, 67.3], [175.9, 77.7],
|
||||
[175.3, 81.8], [179.1, 75.5], [181.6, 84.5], [177.8, 76.6], [182.9, 85.0],
|
||||
[177.8, 102.5], [184.2, 77.3], [179.1, 71.8], [176.5, 87.9], [188.0, 94.3],
|
||||
[174.0, 70.9], [167.6, 64.5], [170.2, 77.3], [167.6, 72.3], [188.0, 87.3],
|
||||
[174.0, 80.0], [176.5, 82.3], [180.3, 73.6], [167.6, 74.1], [188.0, 85.9],
|
||||
[180.3, 73.2], [167.6, 76.3], [183.0, 65.9], [183.0, 90.9], [179.1, 89.1],
|
||||
[170.2, 62.3], [177.8, 82.7], [179.1, 79.1], [190.5, 98.2], [177.8, 84.1],
|
||||
[180.3, 83.2], [180.3, 83.2]
|
||||
],
|
||||
markPoint: {
|
||||
data: [
|
||||
{type: 'max', name: 'Max'},
|
||||
{type: 'min', name: 'Min'}
|
||||
]
|
||||
},
|
||||
markLine: {
|
||||
data: [
|
||||
{type: 'average', name: 'Average'}
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
function random() {
|
||||
const r = Math.round(Math.random() * 100);
|
||||
return (r * (r % 2 === 0 ? 1 : -1));
|
||||
}
|
||||
function randomDataArray() {
|
||||
const d = [];
|
||||
let len = 100;
|
||||
while (len--) {
|
||||
d.push([
|
||||
random(),
|
||||
random(),
|
||||
Math.abs(random()),
|
||||
]);
|
||||
}
|
||||
return d;
|
||||
}
|
||||
scatter2.options = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
showDelay: 0,
|
||||
axisPointer: {
|
||||
show: true,
|
||||
type: 'cross',
|
||||
lineStyle: {
|
||||
type: 'dashed',
|
||||
width: 1
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['scatter1', 'scatter2'],
|
||||
textStyle: {
|
||||
color: CHARTCONFIG.color.text
|
||||
}
|
||||
},
|
||||
toolbox: {
|
||||
show: true,
|
||||
feature: {
|
||||
saveAsImage: {show: true, title: 'save'}
|
||||
}
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
splitNumber: 4,
|
||||
scale: true,
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: CHARTCONFIG.color.text
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: CHARTCONFIG.color.splitLine
|
||||
}
|
||||
},
|
||||
splitArea: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
splitNumber: 4,
|
||||
scale: true,
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: CHARTCONFIG.color.text
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: CHARTCONFIG.color.splitLine
|
||||
}
|
||||
},
|
||||
splitArea: {
|
||||
show: true,
|
||||
areaStyle: {
|
||||
color: CHARTCONFIG.color.splitArea
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: 'scatter1',
|
||||
type: 'scatter',
|
||||
symbolSize(value) {
|
||||
return Math.round(value[2] / 5);
|
||||
},
|
||||
data: randomDataArray()
|
||||
},
|
||||
{
|
||||
name: 'scatter2',
|
||||
type: 'scatter',
|
||||
symbolSize(value) {
|
||||
return Math.round(value[2] / 5);
|
||||
},
|
||||
data: randomDataArray()
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
const Scatter = () => (
|
||||
<div className="container-fluid no-breadcrumbs">
|
||||
|
||||
<div className="row">
|
||||
<div className="col-xl-12">
|
||||
|
||||
<div className="box box-default">
|
||||
<div className="box-heading">Basic Scatter</div>
|
||||
<div className="box-body">
|
||||
<ReactEcharts option={scatter1.options} showLoading={false} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-xl-12">
|
||||
|
||||
<div className="box box-default">
|
||||
<div className="box-heading">Basic Bubble</div>
|
||||
<div className="box-body">
|
||||
<ReactEcharts option={scatter2.options} showLoading={false} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
|
||||
module.exports = Scatter;
|
||||
8
src/routes/app/routes/charts/routes/scatter/index.js
Normal file
8
src/routes/app/routes/charts/routes/scatter/index.js
Normal file
@@ -0,0 +1,8 @@
|
||||
module.exports = {
|
||||
path: 'Scatter',
|
||||
getComponent(nextState, cb) {
|
||||
require.ensure([], (require) => {
|
||||
cb(null, require('./components/Scatter'));
|
||||
});
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,71 @@
|
||||
import React from 'react';
|
||||
import ReactEcharts from 'components/ReactECharts';
|
||||
|
||||
const data = [{
|
||||
value: 350,
|
||||
name: 'Display',
|
||||
}, {
|
||||
value: 560,
|
||||
name: 'Social'
|
||||
}, {
|
||||
value: 980,
|
||||
name: 'Direct'
|
||||
}, {
|
||||
value: 760,
|
||||
name: 'Search'
|
||||
}, {
|
||||
value: 320,
|
||||
name: 'Referrals'
|
||||
}];
|
||||
|
||||
const pie = {};
|
||||
pie.options = {
|
||||
tooltip: {
|
||||
show: true,
|
||||
trigger: 'item',
|
||||
formatter: '{b}: {c} ({d}%)'
|
||||
},
|
||||
legend: {
|
||||
show: false,
|
||||
orient: 'vertical',
|
||||
x: 'right',
|
||||
data: ['Display', 'Social', 'Direct', 'Search', 'Referrals'],
|
||||
},
|
||||
series: [{
|
||||
type: 'pie',
|
||||
selectedMode: 'single',
|
||||
radius: ['40%', '52%'],
|
||||
color: [
|
||||
'#EFE04C',
|
||||
'#69D361',
|
||||
'#47DAB5',
|
||||
'#4AC3D6',
|
||||
'#5EA1DA',
|
||||
],
|
||||
label: {
|
||||
normal: {
|
||||
position: 'outside',
|
||||
formatter: '{b}',
|
||||
textStyle: {
|
||||
fontSize: 12
|
||||
}
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
normal: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
data,
|
||||
markPint: {
|
||||
symbol: 'diamond',
|
||||
data: [{symbol: 'diamond', }]
|
||||
}
|
||||
}]
|
||||
};
|
||||
|
||||
const Chart = () => (
|
||||
<ReactEcharts style={{height: '400px'}} option={pie.options} showLoading={false} />
|
||||
);
|
||||
|
||||
module.exports = Chart;
|
||||
83
src/routes/app/routes/dashboard/components/BenchmarkChart.js
Normal file
83
src/routes/app/routes/dashboard/components/BenchmarkChart.js
Normal file
@@ -0,0 +1,83 @@
|
||||
import React from 'react';
|
||||
import ReactEcharts from 'components/ReactECharts';
|
||||
import CHARTCONFIG from 'constants/ChartConfig';
|
||||
|
||||
const radar = {};
|
||||
radar.options = {
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
x: 'right',
|
||||
y: 'bottom',
|
||||
data: ['Plan Average', 'Independence Blue Cross & Blue Shield'],
|
||||
textStyle: {
|
||||
color: CHARTCONFIG.color.text
|
||||
}
|
||||
},
|
||||
toolbox: {
|
||||
show: false,
|
||||
},
|
||||
radar: [
|
||||
{
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
// for both indicator and axisLine, bad, better seperate them
|
||||
color: '#b1b1b1'
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(0,0,0,.1)'
|
||||
}
|
||||
},
|
||||
splitArea: {
|
||||
show: true,
|
||||
areaStyle: {
|
||||
color: CHARTCONFIG.color.splitArea
|
||||
}
|
||||
},
|
||||
indicator: [
|
||||
{ name: 'Miles', max: 6000},
|
||||
{ name: 'Administration', max: 16000},
|
||||
{ name: 'Info Tech', max: 30000},
|
||||
{ name: 'Customer Support', max: 38000},
|
||||
{ name: 'Development', max: 52000},
|
||||
{ name: 'Marketing', max: 25000}
|
||||
]
|
||||
}
|
||||
],
|
||||
calculable: true,
|
||||
series: [
|
||||
{
|
||||
name: 'Budget vs spending',
|
||||
type: 'radar',
|
||||
data: [
|
||||
{
|
||||
value: [5000, 14000, 28000, 31000, 42000, 21000],
|
||||
name: 'Plan Average',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: CHARTCONFIG.color.success
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
value: [4300, 10000, 28000, 35000, 50000, 19000],
|
||||
name: 'Independence Blue Cross & Blue Shield',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: CHARTCONFIG.color.info
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
|
||||
const Chart = () => (
|
||||
<ReactEcharts option={radar.options} showLoading={false} />
|
||||
);
|
||||
|
||||
module.exports = Chart;
|
||||
84
src/routes/app/routes/dashboard/components/Dashboard.js
Normal file
84
src/routes/app/routes/dashboard/components/Dashboard.js
Normal file
@@ -0,0 +1,84 @@
|
||||
import React from 'react';
|
||||
import QueueAnim from 'rc-queue-anim';
|
||||
import KPIsChart from './KPIsChart';
|
||||
import AquisitionChart from './AquisitionChart';
|
||||
import StatBoxes from './StatBoxes';
|
||||
import EngagementStats from './EngagementStats';
|
||||
import BenchmarkChart from './BenchmarkChart';
|
||||
|
||||
const Main = () => (
|
||||
<div className="row">
|
||||
<div className="col-xl-6">
|
||||
<div className="box box-default">
|
||||
<div className="box-body">
|
||||
<KPIsChart />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-xl-6">
|
||||
<div className="box box-default">
|
||||
<div className="box-body">
|
||||
<AquisitionChart />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const Engagement = () => (
|
||||
<div className="box box-default">
|
||||
<div className="box-body">
|
||||
<div className="row">
|
||||
<div className="col-xl-8">
|
||||
<div className="box box-transparent">
|
||||
<div className="box-header">Engagement</div>
|
||||
<div className="box-body">
|
||||
<div className="row text-center metrics">
|
||||
<div className="col-xs-6 col-md-3 metric-box">
|
||||
<span className="metric">2.6M</span>
|
||||
<span className="metric-info">Visits</span>
|
||||
</div>
|
||||
<div className="col-xs-6 col-md-3 metric-box">
|
||||
<span className="metric">4.5M</span>
|
||||
<span className="metric-info">Users</span>
|
||||
</div>
|
||||
<div className="col-xs-6 col-md-3 metric-box">
|
||||
<span className="metric">08:03</span>
|
||||
<span className="metric-info">RIDE DURATION</span>
|
||||
</div>
|
||||
<div className="col-xs-6 col-md-3 metric-box">
|
||||
<span className="metric">5.25</span>
|
||||
<span className="metric-info">MILES PER RIDE</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<EngagementStats />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-xl-4">
|
||||
<div className="box box-transparent">
|
||||
<div className="box-header">Benchmark</div>
|
||||
<div className="box-body">
|
||||
<BenchmarkChart />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const Dashboard = () => (
|
||||
<div className="container-fluid no-breadcrumbs page-dashboard">
|
||||
|
||||
<QueueAnim type="bottom" className="ui-animate">
|
||||
<Main />
|
||||
<div key="2"><StatBoxes /></div>
|
||||
<div key="3"><Engagement /></div>
|
||||
</QueueAnim>
|
||||
|
||||
</div>
|
||||
);
|
||||
|
||||
module.exports = Dashboard;
|
||||
133
src/routes/app/routes/dashboard/components/EngagementStats.js
Normal file
133
src/routes/app/routes/dashboard/components/EngagementStats.js
Normal file
@@ -0,0 +1,133 @@
|
||||
import React from 'react';
|
||||
import ReactEcharts from 'components/ReactECharts';
|
||||
import CHARTCONFIG from 'constants/ChartConfig';
|
||||
|
||||
// Engagment pie charts
|
||||
const labelTop = {
|
||||
normal: {
|
||||
show: true,
|
||||
position: 'center',
|
||||
formatter: '{b}',
|
||||
textStyle: {
|
||||
color: 'rgba(0,0,0,.54)',
|
||||
baseline: 'bottom',
|
||||
fontSize: 14
|
||||
}
|
||||
}
|
||||
};
|
||||
// const labelTop = {
|
||||
// normal : {
|
||||
// color: CHARTCONFIG.color.info,
|
||||
// label : {
|
||||
// show : true,
|
||||
// position : 'center',
|
||||
// formatter : '{b}',
|
||||
// textStyle: {
|
||||
// color: CHARTCONFIG.color.text,
|
||||
// baseline : 'bottom',
|
||||
// fontSize: 14
|
||||
// }
|
||||
// },
|
||||
// labelLine : {
|
||||
// show : false
|
||||
// }
|
||||
// }
|
||||
// };
|
||||
const labelFromatter = {
|
||||
normal: {
|
||||
label: {
|
||||
formatter(params) {
|
||||
return `${100 - params.value}%`;
|
||||
},
|
||||
textStyle: {
|
||||
color: 'rgba(0,0,0,.54)',
|
||||
baseline: 'bottom',
|
||||
fontSize: 12
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
const labelBottom = {
|
||||
normal: {
|
||||
color: 'rgba(0,0,0,.1)',
|
||||
label: {
|
||||
show: true,
|
||||
position: 'center'
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
};
|
||||
const radius = [65, 70];
|
||||
const pie = {};
|
||||
|
||||
const pie1 = {};
|
||||
const pie2 = {};
|
||||
const pie3 = {};
|
||||
const pie4 = {};
|
||||
|
||||
pie1.options = {
|
||||
series: [{
|
||||
type: 'pie',
|
||||
radius,
|
||||
itemStyle: labelFromatter,
|
||||
data: [
|
||||
{name: 'To Provider', value: 36, label: labelTop, labelLine: {normal: {show: false}}, itemStyle: {normal: {color: CHARTCONFIG.color.success}}},
|
||||
{name: 'other', value: 64, itemStyle: labelBottom}
|
||||
]
|
||||
}]
|
||||
};
|
||||
|
||||
pie2.options = {
|
||||
series: [{
|
||||
type: 'pie',
|
||||
radius,
|
||||
itemStyle: labelFromatter,
|
||||
data: [
|
||||
{name: 'From Provider', value: 45, label: labelTop, itemStyle: {normal: {color: CHARTCONFIG.color.info}}},
|
||||
{name: 'other', value: 55, itemStyle: labelBottom}
|
||||
]
|
||||
}]
|
||||
};
|
||||
pie3.options = {
|
||||
series: [{
|
||||
type: 'pie',
|
||||
radius,
|
||||
itemStyle: labelFromatter,
|
||||
data: [
|
||||
{name: 'Round Trip', value: 25, label: labelTop, itemStyle: {normal: {color: CHARTCONFIG.color.success}}},
|
||||
{name: 'other', value: 75, itemStyle: labelBottom}
|
||||
]
|
||||
}]
|
||||
};
|
||||
pie4.options = {
|
||||
series: [{
|
||||
type: 'pie',
|
||||
radius,
|
||||
itemStyle: labelFromatter,
|
||||
data: [
|
||||
{name: 'Referral', value: 75, label: labelTop, itemStyle: {normal: {color: CHARTCONFIG.color.info}}},
|
||||
{name: 'other', value: 25, itemStyle: labelBottom}
|
||||
]
|
||||
}]
|
||||
};
|
||||
|
||||
const Stats = () => (
|
||||
<div className="row">
|
||||
<div className="col-xl-3 col-lg-6">
|
||||
<ReactEcharts style={{height: '200px'}} option={pie1.options} showLoading={false} />
|
||||
</div>
|
||||
<div className="col-xl-3 col-lg-6">
|
||||
<ReactEcharts style={{height: '200px'}} option={pie2.options} showLoading={false} />
|
||||
</div>
|
||||
<div className="col-xl-3 col-lg-6">
|
||||
<ReactEcharts style={{height: '200px'}} option={pie3.options} showLoading={false} />
|
||||
</div>
|
||||
<div className="col-xl-3 col-lg-6">
|
||||
<ReactEcharts style={{height: '200px'}} option={pie4.options} showLoading={false} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
module.exports = Stats;
|
||||
108
src/routes/app/routes/dashboard/components/KPIsChart.js
Normal file
108
src/routes/app/routes/dashboard/components/KPIsChart.js
Normal file
@@ -0,0 +1,108 @@
|
||||
import React from 'react';
|
||||
import ReactEcharts from 'components/ReactECharts';
|
||||
import CHARTCONFIG from 'constants/ChartConfig';
|
||||
|
||||
const area = {};
|
||||
area.options = {
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
legend: {
|
||||
data: ['Rides', 'ER Visits'],
|
||||
textStyle: {
|
||||
color: CHARTCONFIG.color.text
|
||||
}
|
||||
},
|
||||
toolbox: {
|
||||
show: false
|
||||
},
|
||||
calculable: true,
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: ['Jan.', 'Feb.', 'Mar.', 'Apr.', 'May.', 'Jun.', 'Jul.', 'Aug.'],
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: CHARTCONFIG.color.text
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: CHARTCONFIG.color.splitLine
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
max: 100,
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: CHARTCONFIG.color.text
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: CHARTCONFIG.color.splitLine
|
||||
}
|
||||
},
|
||||
splitArea: {
|
||||
show: true,
|
||||
areaStyle: {
|
||||
color: CHARTCONFIG.color.splitArea
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: 'Rides',
|
||||
type: 'bar',
|
||||
data: [17, 11, 22, 35, 76, 40, 28, 25],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: CHARTCONFIG.color.info
|
||||
}
|
||||
},
|
||||
lineStyle: {
|
||||
normal: {
|
||||
color: CHARTCONFIG.color.info
|
||||
}
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: CHARTCONFIG.color.info
|
||||
}
|
||||
},
|
||||
symbol: 'diamond'
|
||||
},
|
||||
{
|
||||
name: 'ER Visits',
|
||||
type: 'bar',
|
||||
barCategoryGap: '35%',
|
||||
data: [15, 13, 20, 40, 81, 37, 26, 26],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: CHARTCONFIG.color.success
|
||||
}
|
||||
},
|
||||
lineStyle: {
|
||||
normal: {
|
||||
color: CHARTCONFIG.color.success
|
||||
}
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: CHARTCONFIG.color.success
|
||||
}
|
||||
},
|
||||
symbol: 'diamond'
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
const Chart = () => (
|
||||
<ReactEcharts style={{height: '400px'}} option={area.options} showLoading={false} />
|
||||
);
|
||||
|
||||
module.exports = Chart;
|
||||
62
src/routes/app/routes/dashboard/components/StatBoxes.js
Normal file
62
src/routes/app/routes/dashboard/components/StatBoxes.js
Normal file
@@ -0,0 +1,62 @@
|
||||
import React from 'react';
|
||||
import ReactEcharts from 'components/ReactECharts';
|
||||
import CHARTCONFIG from 'constants/ChartConfig';
|
||||
|
||||
const Statboxes = () => (
|
||||
<div className="row">
|
||||
<div className="col-xl-3 col-sm-6">
|
||||
<div className="box box-default">
|
||||
<div className="box-top">
|
||||
<span>35<span className="size-h5">%</span></span>
|
||||
</div>
|
||||
<div className="box-info">
|
||||
<span>Growth</span>
|
||||
</div>
|
||||
<div className="box-bottom">
|
||||
<i className="material-icons color-success">airplanemode_active</i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-xl-3 col-sm-6">
|
||||
<div className="box box-default">
|
||||
<div className="box-top">
|
||||
<span>42<span className="size-h5">%</span></span>
|
||||
</div>
|
||||
<div className="box-info">
|
||||
<span>New Users</span>
|
||||
</div>
|
||||
<div className="box-bottom">
|
||||
<i className="material-icons color-info">supervisor_account</i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-xl-3 col-sm-6">
|
||||
<div className="box box-default">
|
||||
<div className="box-top">
|
||||
<span>37<span className="size-h5">k</span></span>
|
||||
</div>
|
||||
<div className="box-info">
|
||||
<span>Savings</span>
|
||||
</div>
|
||||
<div className="box-bottom">
|
||||
<i className="material-icons color-warning">attach_money</i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-xl-3 col-sm-6">
|
||||
<div className="box box-default">
|
||||
<div className="box-top">
|
||||
<span>25<span className="size-h5">k</span></span>
|
||||
</div>
|
||||
<div className="box-info">
|
||||
<span>Miles</span>
|
||||
</div>
|
||||
<div className="box-bottom">
|
||||
<i className="material-icons color-danger">card_travel</i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
module.exports = Statboxes;
|
||||
8
src/routes/app/routes/dashboard/index.js
Normal file
8
src/routes/app/routes/dashboard/index.js
Normal file
@@ -0,0 +1,8 @@
|
||||
module.exports = {
|
||||
path: 'dashboard',
|
||||
getComponent(nextState, cb) {
|
||||
require.ensure([], (require) => {
|
||||
cb(null, require('./components/Dashboard'));
|
||||
});
|
||||
}
|
||||
};
|
||||
12
src/routes/app/routes/forms/index.js
Normal file
12
src/routes/app/routes/forms/index.js
Normal file
@@ -0,0 +1,12 @@
|
||||
module.exports = {
|
||||
path: 'form',
|
||||
getChildRoutes(partialNextState, cb) {
|
||||
require.ensure([], (require) => {
|
||||
cb(null, [
|
||||
require('./routes/components'),
|
||||
require('./routes/layouts'),
|
||||
require('./routes/steppers'),
|
||||
]);
|
||||
});
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,234 @@
|
||||
import React, {Component} from 'react';
|
||||
import AutoComplete from 'material-ui/AutoComplete';
|
||||
import MenuItem from 'material-ui/MenuItem';
|
||||
|
||||
//
|
||||
class AutoCompleteExampleSimple extends Component {
|
||||
state = {
|
||||
dataSource: [],
|
||||
};
|
||||
|
||||
handleUpdateInput = (value) => {
|
||||
this.setState({
|
||||
dataSource: [
|
||||
value,
|
||||
value + value,
|
||||
value + value + value,
|
||||
],
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="col-lg-6">
|
||||
<div className="box box-transparent">
|
||||
<div className="box-header">Simple examples</div>
|
||||
<div className="box-body">
|
||||
<AutoComplete
|
||||
hintText="Type anything"
|
||||
dataSource={this.state.dataSource}
|
||||
onUpdateInput={this.handleUpdateInput}
|
||||
/>
|
||||
<AutoComplete
|
||||
hintText="Type anything"
|
||||
dataSource={this.state.dataSource}
|
||||
onUpdateInput={this.handleUpdateInput}
|
||||
floatingLabelText="Full width"
|
||||
fullWidth
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
const dataSource1 = [
|
||||
{
|
||||
text: 'text-value1',
|
||||
value: (
|
||||
<MenuItem
|
||||
primaryText="text-value1"
|
||||
secondaryText="☺"
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
text: 'text-value2',
|
||||
value: (
|
||||
<MenuItem
|
||||
primaryText="text-value2"
|
||||
secondaryText="☺"
|
||||
/>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
const dataSource2 = ['12345', '23456', '34567'];
|
||||
|
||||
const dataSource3 = [
|
||||
{textKey: 'Some Text', valueKey: 'someFirstValue'},
|
||||
{textKey: 'Some Text', valueKey: 'someSecondValue'},
|
||||
];
|
||||
const dataSourceConfig = {
|
||||
text: 'textKey',
|
||||
value: 'valueKey',
|
||||
};
|
||||
|
||||
const AutoCompleteExampleDataSource = () => (
|
||||
<div className="col-lg-6">
|
||||
<div className="box box-transparent">
|
||||
<div className="box-header">Data sources</div>
|
||||
<div className="box-body">
|
||||
<AutoComplete
|
||||
hintText="text-value data"
|
||||
filter={AutoComplete.noFilter}
|
||||
dataSource={dataSource1}
|
||||
/><br />
|
||||
<AutoComplete
|
||||
floatingLabelText="showAllItems"
|
||||
filter={AutoComplete.noFilter}
|
||||
openOnFocus
|
||||
dataSource={dataSource2}
|
||||
/><br />
|
||||
<AutoComplete
|
||||
floatingLabelText="Same text, different values"
|
||||
filter={AutoComplete.noFilter}
|
||||
openOnFocus
|
||||
dataSource={dataSource3}
|
||||
dataSourceConfig={dataSourceConfig}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
|
||||
//
|
||||
const colors = [
|
||||
'Red',
|
||||
'Orange',
|
||||
'Yellow',
|
||||
'Green',
|
||||
'Blue',
|
||||
'Purple',
|
||||
'Black',
|
||||
'White',
|
||||
];
|
||||
|
||||
const fruit = [
|
||||
'Apple', 'Apricot', 'Avocado',
|
||||
'Banana', 'Bilberry', 'Blackberry', 'Blackcurrant', 'Blueberry',
|
||||
'Boysenberry', 'Blood Orange',
|
||||
'Cantaloupe', 'Currant', 'Cherry', 'Cherimoya', 'Cloudberry',
|
||||
'Coconut', 'Cranberry', 'Clementine',
|
||||
'Damson', 'Date', 'Dragonfruit', 'Durian',
|
||||
'Elderberry',
|
||||
'Feijoa', 'Fig',
|
||||
'Goji berry', 'Gooseberry', 'Grape', 'Grapefruit', 'Guava',
|
||||
'Honeydew', 'Huckleberry',
|
||||
'Jabouticaba', 'Jackfruit', 'Jambul', 'Jujube', 'Juniper berry',
|
||||
'Kiwi fruit', 'Kumquat',
|
||||
'Lemon', 'Lime', 'Loquat', 'Lychee',
|
||||
'Nectarine',
|
||||
'Mango', 'Marion berry', 'Melon', 'Miracle fruit', 'Mulberry', 'Mandarine',
|
||||
'Olive', 'Orange',
|
||||
'Papaya', 'Passionfruit', 'Peach', 'Pear', 'Persimmon', 'Physalis', 'Plum', 'Pineapple',
|
||||
'Pumpkin', 'Pomegranate', 'Pomelo', 'Purple Mangosteen',
|
||||
'Quince',
|
||||
'Raspberry', 'Raisin', 'Rambutan', 'Redcurrant',
|
||||
'Salal berry', 'Satsuma', 'Star fruit', 'Strawberry', 'Squash', 'Salmonberry',
|
||||
'Tamarillo', 'Tamarind', 'Tomato', 'Tangerine',
|
||||
'Ugli fruit',
|
||||
'Watermelon',
|
||||
];
|
||||
|
||||
const AutoCompleteExampleFilters = () => (
|
||||
<div className="col-lg-6">
|
||||
<div className="box box-transparent">
|
||||
<div className="box-header">Filters</div>
|
||||
<div className="box-body">
|
||||
<AutoComplete
|
||||
floatingLabelText="Type 'r', case insensitive"
|
||||
filter={AutoComplete.caseInsensitiveFilter}
|
||||
dataSource={colors}
|
||||
/>
|
||||
<br />
|
||||
<AutoComplete
|
||||
floatingLabelText="Type 'peah', fuzzy search"
|
||||
filter={AutoComplete.fuzzyFilter}
|
||||
dataSource={fruit}
|
||||
maxSearchResults={5}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
|
||||
class AutoCompleteExampleControlled extends Component {
|
||||
state = {
|
||||
searchText: '',
|
||||
};
|
||||
|
||||
handleUpdateInput = (searchText) => {
|
||||
this.setState({
|
||||
searchText,
|
||||
});
|
||||
};
|
||||
|
||||
handleNewRequest = () => {
|
||||
this.setState({
|
||||
searchText: '',
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="col-lg-6">
|
||||
<div className="box box-transparent">
|
||||
<div className="box-header">Controlled examples</div>
|
||||
<div className="box-body">
|
||||
<AutoComplete
|
||||
hintText="Type 'r', case insensitive"
|
||||
searchText={this.state.searchText}
|
||||
onUpdateInput={this.handleUpdateInput}
|
||||
onNewRequest={this.handleNewRequest}
|
||||
dataSource={colors}
|
||||
filter={(searchText, key) => (key.indexOf(searchText) !== -1)}
|
||||
openOnFocus
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const AutoCompleteSection = () => (
|
||||
<article className="article">
|
||||
<h2 className="article-title">Material Auto Complete</h2>
|
||||
|
||||
<section className="box box-default">
|
||||
<div className="box-body padding-xl">
|
||||
<div className="col-xl-10">
|
||||
<div className="row">
|
||||
<AutoCompleteExampleSimple />
|
||||
<AutoCompleteExampleDataSource />
|
||||
</div>
|
||||
|
||||
<div className="divider divider-lg divider-dashed" />
|
||||
<div className="row">
|
||||
<AutoCompleteExampleFilters />
|
||||
<AutoCompleteExampleControlled />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
);
|
||||
|
||||
module.exports = AutoCompleteSection;
|
||||
@@ -0,0 +1,99 @@
|
||||
import React from 'react';
|
||||
import Checkbox from 'material-ui/Checkbox';
|
||||
import ActionFavorite from 'material-ui/svg-icons/action/favorite';
|
||||
import ActionFavoriteBorder from 'material-ui/svg-icons/action/favorite-border';
|
||||
import Visibility from 'material-ui/svg-icons/action/visibility';
|
||||
import VisibilityOff from 'material-ui/svg-icons/action/visibility-off';
|
||||
|
||||
const styles = {
|
||||
checkbox: {
|
||||
maxWidth: 250,
|
||||
marginBottom: 16
|
||||
}
|
||||
};
|
||||
|
||||
const CheckboxExampleSimple = () => (
|
||||
<div className="row" >
|
||||
<div className="col-lg-6">
|
||||
<Checkbox
|
||||
label="Simple"
|
||||
style={styles.checkbox}
|
||||
/>
|
||||
<Checkbox
|
||||
checkedIcon={<ActionFavorite />}
|
||||
uncheckedIcon={<ActionFavoriteBorder />}
|
||||
label="Custom icon"
|
||||
style={styles.checkbox}
|
||||
/>
|
||||
<Checkbox
|
||||
checkedIcon={<Visibility />}
|
||||
uncheckedIcon={<VisibilityOff />}
|
||||
label="Custom icon of different shapes"
|
||||
style={styles.checkbox}
|
||||
/>
|
||||
<Checkbox
|
||||
label="Disabled unchecked"
|
||||
disabled
|
||||
style={styles.checkbox}
|
||||
/>
|
||||
<Checkbox
|
||||
label="Disabled checked"
|
||||
checked
|
||||
disabled
|
||||
style={styles.checkbox}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<Checkbox
|
||||
label="Label on the left"
|
||||
labelPosition="left"
|
||||
style={styles.checkbox}
|
||||
/>
|
||||
<Checkbox
|
||||
checkedIcon={<ActionFavorite />}
|
||||
uncheckedIcon={<ActionFavoriteBorder />}
|
||||
label="Custom icon"
|
||||
labelPosition="left"
|
||||
style={styles.checkbox}
|
||||
/>
|
||||
<Checkbox
|
||||
checkedIcon={<Visibility />}
|
||||
uncheckedIcon={<VisibilityOff />}
|
||||
label="Custom icon of different shapes"
|
||||
labelPosition="left"
|
||||
style={styles.checkbox}
|
||||
/>
|
||||
<Checkbox
|
||||
label="Disabled unchecked"
|
||||
disabled
|
||||
labelPosition="left"
|
||||
style={styles.checkbox}
|
||||
/>
|
||||
<Checkbox
|
||||
label="Disabled checked"
|
||||
checked
|
||||
disabled
|
||||
labelPosition="left"
|
||||
style={styles.checkbox}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const CheckboxSection = () => (
|
||||
<article className="article">
|
||||
<h2 className="article-title">Material Checkbox</h2>
|
||||
|
||||
<section className="box box-default">
|
||||
<div className="box-body padding-xl">
|
||||
<div className="col-xl-10">
|
||||
|
||||
<CheckboxExampleSimple />
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
);
|
||||
|
||||
module.exports = CheckboxSection;
|
||||
127
src/routes/app/routes/forms/routes/components/components/Chip.js
Normal file
127
src/routes/app/routes/forms/routes/components/components/Chip.js
Normal file
@@ -0,0 +1,127 @@
|
||||
import React from 'react';
|
||||
import Avatar from 'material-ui/Avatar';
|
||||
import Chip from 'material-ui/Chip';
|
||||
import FontIcon from 'material-ui/FontIcon';
|
||||
import SvgIconFace from 'material-ui/svg-icons/action/face';
|
||||
import {blue300, indigo900} from 'material-ui/styles/colors';
|
||||
|
||||
const styles = {
|
||||
chip: {
|
||||
margin: 4,
|
||||
},
|
||||
wrapper: {
|
||||
display: 'flex',
|
||||
flexWrap: 'wrap',
|
||||
},
|
||||
};
|
||||
|
||||
function handleRequestDelete() {
|
||||
console.log('You clicked the delete button.');
|
||||
}
|
||||
|
||||
function handleTouchTap() {
|
||||
console.log('You clicked the Chip.');
|
||||
}
|
||||
|
||||
/**
|
||||
* Examples of Chips, using an image [Avatar](/#/components/font-icon), [Font Icon](/#/components/font-icon) Avatar,
|
||||
* [SVG Icon](/#/components/svg-icon) Avatar, "Letter" (string) Avatar, and with custom colors.
|
||||
*
|
||||
* Chips with the `onRequestDelete` property defined will display a delete icon.
|
||||
*/
|
||||
export default class ChipExampleSimple extends React.Component {
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<div style={styles.wrapper}>
|
||||
<Chip
|
||||
style={styles.chip}
|
||||
>
|
||||
Text Chip
|
||||
</Chip>
|
||||
|
||||
<Chip
|
||||
onRequestDelete={handleRequestDelete}
|
||||
onTouchTap={handleTouchTap}
|
||||
style={styles.chip}
|
||||
>
|
||||
Deletable Text Chip
|
||||
</Chip>
|
||||
|
||||
<Chip
|
||||
onTouchTap={handleTouchTap}
|
||||
style={styles.chip}
|
||||
>
|
||||
<Avatar src="assets/images-demo/avatars/1.jpg" />
|
||||
Image Avatar Chip
|
||||
</Chip>
|
||||
|
||||
<Chip
|
||||
onRequestDelete={handleRequestDelete}
|
||||
onTouchTap={handleTouchTap}
|
||||
style={styles.chip}
|
||||
>
|
||||
<Avatar src="assets/images-demo/avatars/2.jpg" />
|
||||
Deletable Avatar Chip
|
||||
</Chip>
|
||||
</div>
|
||||
|
||||
<div className="divider divider-sm" />
|
||||
|
||||
<div style={styles.wrapper}>
|
||||
<Chip
|
||||
onTouchTap={handleTouchTap}
|
||||
style={styles.chip}
|
||||
>
|
||||
<Avatar icon={<FontIcon className="material-icons">perm_identity</FontIcon>} />
|
||||
FontIcon Avatar Chip
|
||||
</Chip>
|
||||
|
||||
<Chip
|
||||
onRequestDelete={handleRequestDelete}
|
||||
onTouchTap={handleTouchTap}
|
||||
style={styles.chip}
|
||||
>
|
||||
<Avatar color="#444" icon={<SvgIconFace />} />
|
||||
SvgIcon Avatar Chip
|
||||
</Chip>
|
||||
|
||||
<Chip onTouchTap={handleTouchTap} style={styles.chip}>
|
||||
<Avatar size={32}>A</Avatar>
|
||||
Text Avatar Chip
|
||||
</Chip>
|
||||
|
||||
<Chip
|
||||
backgroundColor={blue300}
|
||||
onRequestDelete={handleRequestDelete}
|
||||
onTouchTap={handleTouchTap}
|
||||
style={styles.chip}
|
||||
>
|
||||
<Avatar size={32} color={blue300} backgroundColor={indigo900}>
|
||||
MB
|
||||
</Avatar>
|
||||
Colored Chip
|
||||
</Chip>
|
||||
</div>
|
||||
|
||||
<div className="callout callout-warning no-margin-bottom">
|
||||
<p>Chips with the onRequestDelete property defined will display a delete icon.</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const ChipSection = () => (
|
||||
<article className="article">
|
||||
<h2 className="article-title">Material Chips</h2>
|
||||
<section className="box box-default">
|
||||
<div className="box-body padding-xl">
|
||||
<ChipExampleSimple />
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
);
|
||||
|
||||
module.exports = ChipSection;
|
||||
@@ -0,0 +1,35 @@
|
||||
import React from 'react';
|
||||
import QueueAnim from 'rc-queue-anim';
|
||||
import AutoComplete from './AutoComplete';
|
||||
import Checkbox from './Checkbox';
|
||||
import Chip from './Chip';
|
||||
import DatePicker from './DatePicker';
|
||||
import Dialog from './Dialog';
|
||||
import RadioButton from './RadioButton';
|
||||
import SelectField from './SelectField';
|
||||
import Slider from './Slider';
|
||||
import TextField from './TextField';
|
||||
import TimePicker from './TimePicker';
|
||||
import Toggle from './Toggle';
|
||||
|
||||
const Elements = () => (
|
||||
<div className="container-fluid with-maxwidth chapter">
|
||||
|
||||
<QueueAnim type="bottom" className="ui-animate">
|
||||
<div key="1"><RadioButton /></div>
|
||||
<div key="2"><Checkbox /></div>
|
||||
<div key="3"><Toggle /></div>
|
||||
<div key="4"><TextField /></div>
|
||||
<div key="5"><SelectField /></div>
|
||||
<div key="6"><AutoComplete /></div>
|
||||
<div key="7"><Slider /></div>
|
||||
<div key="8"><TimePicker /></div>
|
||||
<div key="9"><DatePicker /></div>
|
||||
<div key="10"><Dialog /></div>
|
||||
<div key="11"><Chip /></div>
|
||||
</QueueAnim>
|
||||
|
||||
</div>
|
||||
);
|
||||
|
||||
module.exports = Elements;
|
||||
@@ -0,0 +1,151 @@
|
||||
import React from 'react';
|
||||
import DatePicker from 'material-ui/DatePicker';
|
||||
import TextField from 'material-ui/TextField';
|
||||
import Toggle from 'material-ui/Toggle';
|
||||
//
|
||||
const DatePickerExampleSimple = () => (
|
||||
<div className="col-lg-6">
|
||||
<div className="box box-transparent">
|
||||
<div className="box-header">Simple examples</div>
|
||||
<div className="box-body">
|
||||
<DatePicker hintText="Portrait Dialog" />
|
||||
<DatePicker hintText="Landscape Dialog" mode="landscape" />
|
||||
<DatePicker hintText="Dialog Disabled" disabled />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
//
|
||||
const DatePickerExampleInline = () => (
|
||||
<div className="col-lg-6">
|
||||
<div className="box box-transparent">
|
||||
<div className="box-header">Inline examples</div>
|
||||
<div className="box-body">
|
||||
<DatePicker hintText="Portrait Inline Dialog" container="inline" />
|
||||
<DatePicker hintText="Landscape Inline Dialog" container="inline" mode="landscape" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
//
|
||||
const optionsStyle = {
|
||||
maxWidth: 300
|
||||
};
|
||||
|
||||
class DatePickerExampleToggle extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
const minDate = new Date();
|
||||
const maxDate = new Date();
|
||||
minDate.setFullYear(minDate.getFullYear() - 1);
|
||||
minDate.setHours(0, 0, 0, 0);
|
||||
maxDate.setFullYear(maxDate.getFullYear() + 1);
|
||||
maxDate.setHours(0, 0, 0, 0);
|
||||
|
||||
this.state = {
|
||||
minDate,
|
||||
maxDate,
|
||||
autoOk: false,
|
||||
disableYearSelection: false,
|
||||
};
|
||||
}
|
||||
|
||||
handleChangeMinDate = (event, date) => {
|
||||
this.setState({
|
||||
minDate: date,
|
||||
});
|
||||
};
|
||||
|
||||
handleChangeMaxDate = (event, date) => {
|
||||
this.setState({
|
||||
maxDate: date,
|
||||
});
|
||||
};
|
||||
|
||||
handleToggle = (event, toggled) => {
|
||||
this.setState({
|
||||
[event.target.name]: toggled,
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="box box-transparent">
|
||||
<div className="box-header">Ranged example</div>
|
||||
<div className="box-body">
|
||||
<div className="row">
|
||||
<div className="col-lg-6">
|
||||
<DatePicker
|
||||
floatingLabelText="Ranged Date Picker"
|
||||
autoOk={this.state.autoOk}
|
||||
minDate={this.state.minDate}
|
||||
maxDate={this.state.maxDate}
|
||||
disableYearSelection={this.state.disableYearSelection}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<div style={optionsStyle}>
|
||||
<DatePicker
|
||||
onChange={this.handleChangeMinDate}
|
||||
autoOk={this.state.autoOk}
|
||||
floatingLabelText="Min Date"
|
||||
defaultDate={this.state.minDate}
|
||||
disableYearSelection={this.state.disableYearSelection}
|
||||
/>
|
||||
<DatePicker
|
||||
onChange={this.handleChangeMaxDate}
|
||||
autoOk={this.state.autoOk}
|
||||
floatingLabelText="Max Date"
|
||||
defaultDate={this.state.maxDate}
|
||||
disableYearSelection={this.state.disableYearSelection}
|
||||
/>
|
||||
<div className="divider" />
|
||||
<Toggle
|
||||
name="autoOk"
|
||||
value="autoOk"
|
||||
label="Auto Ok"
|
||||
toggled={this.state.autoOk}
|
||||
onToggle={this.handleToggle}
|
||||
/>
|
||||
<div className="divider" />
|
||||
<Toggle
|
||||
name="disableYearSelection"
|
||||
value="disableYearSelection"
|
||||
label="Disable Year Selection"
|
||||
toggled={this.state.disableYearSelection}
|
||||
onToggle={this.handleToggle}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const DatePickerSection = () => (
|
||||
<article className="article">
|
||||
<h2 className="article-title">Material Date Picker</h2>
|
||||
|
||||
<section className="box box-default">
|
||||
<div className="box-body padding-xl">
|
||||
<div className="col-xl-10">
|
||||
<div className="row">
|
||||
<DatePickerExampleSimple />
|
||||
<DatePickerExampleInline />
|
||||
</div>
|
||||
|
||||
<div className="divider divider-xl divider-dashed" />
|
||||
<DatePickerExampleToggle />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
);
|
||||
|
||||
module.exports = DatePickerSection;
|
||||
@@ -0,0 +1,369 @@
|
||||
import React from 'react';
|
||||
import Dialog from 'material-ui/Dialog';
|
||||
import FlatButton from 'material-ui/FlatButton';
|
||||
import RaisedButton from 'material-ui/RaisedButton';
|
||||
import {RadioButton, RadioButtonGroup} from 'material-ui/RadioButton';
|
||||
import DatePicker from 'material-ui/DatePicker';
|
||||
|
||||
//
|
||||
class DialogExampleSimple extends React.Component {
|
||||
state = {
|
||||
open: false,
|
||||
};
|
||||
|
||||
handleOpen = () => {
|
||||
this.setState({open: true});
|
||||
};
|
||||
|
||||
handleClose = () => {
|
||||
this.setState({open: false});
|
||||
};
|
||||
|
||||
render() {
|
||||
const actions = [
|
||||
<FlatButton
|
||||
label="Cancel"
|
||||
primary
|
||||
onTouchTap={this.handleClose}
|
||||
/>,
|
||||
<FlatButton
|
||||
label="Submit"
|
||||
primary
|
||||
keyboardFocused
|
||||
onTouchTap={this.handleClose}
|
||||
/>,
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="col-lg-6">
|
||||
<div className="box box-transparent">
|
||||
<div className="box-header">Simple dialog</div>
|
||||
<div className="box-body">
|
||||
<RaisedButton label="Dialog" onTouchTap={this.handleOpen} />
|
||||
<Dialog
|
||||
title="Dialog With Actions"
|
||||
actions={actions}
|
||||
modal={false}
|
||||
open={this.state.open}
|
||||
onRequestClose={this.handleClose}
|
||||
>
|
||||
The actions in this window were passed in as an array of React objects.
|
||||
</Dialog>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
class DialogExampleModal extends React.Component {
|
||||
state = {
|
||||
open: false,
|
||||
};
|
||||
|
||||
handleOpen = () => {
|
||||
this.setState({open: true});
|
||||
};
|
||||
|
||||
handleClose = () => {
|
||||
this.setState({open: false});
|
||||
};
|
||||
|
||||
render() {
|
||||
const actions = [
|
||||
<FlatButton
|
||||
label="Cancel"
|
||||
primary
|
||||
onTouchTap={this.handleClose}
|
||||
/>,
|
||||
<FlatButton
|
||||
label="Submit"
|
||||
primary
|
||||
disabled
|
||||
onTouchTap={this.handleClose}
|
||||
/>,
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="col-lg-6">
|
||||
<div className="box box-transparent">
|
||||
<div className="box-header">Modal dialog</div>
|
||||
<div className="box-body">
|
||||
<RaisedButton label="Modal Dialog" onTouchTap={this.handleOpen} />
|
||||
<Dialog
|
||||
title="Dialog With Actions"
|
||||
actions={actions}
|
||||
modal
|
||||
open={this.state.open}
|
||||
>
|
||||
Only actions can close this dialog.
|
||||
</Dialog>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
const customContentStyle = {
|
||||
width: '100%',
|
||||
maxWidth: 'none',
|
||||
};
|
||||
|
||||
class DialogExampleCustomWidth extends React.Component {
|
||||
state = {
|
||||
open: false,
|
||||
};
|
||||
|
||||
handleOpen = () => {
|
||||
this.setState({open: true});
|
||||
};
|
||||
|
||||
handleClose = () => {
|
||||
this.setState({open: false});
|
||||
};
|
||||
|
||||
render() {
|
||||
const actions = [
|
||||
<FlatButton
|
||||
label="Cancel"
|
||||
primary
|
||||
onTouchTap={this.handleClose}
|
||||
/>,
|
||||
<FlatButton
|
||||
label="Submit"
|
||||
primary
|
||||
onTouchTap={this.handleClose}
|
||||
/>,
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="col-lg-6">
|
||||
<div className="box box-transparent">
|
||||
<div className="box-header">Styled dialog</div>
|
||||
<div className="box-body">
|
||||
<RaisedButton label="Dialog With Custom Width" onTouchTap={this.handleOpen} />
|
||||
<Dialog
|
||||
title="Dialog With Custom Width"
|
||||
actions={actions}
|
||||
modal
|
||||
contentStyle={customContentStyle}
|
||||
open={this.state.open}
|
||||
>
|
||||
This dialog spans the entire width of the screen.
|
||||
</Dialog>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
class DialogExampleDialogDatePicker extends React.Component {
|
||||
state = {
|
||||
open: false,
|
||||
};
|
||||
|
||||
handleOpen = () => {
|
||||
this.setState({open: true});
|
||||
};
|
||||
|
||||
handleClose = () => {
|
||||
this.setState({open: false});
|
||||
};
|
||||
|
||||
render() {
|
||||
const actions = [
|
||||
<FlatButton
|
||||
label="Ok"
|
||||
primary
|
||||
keyboardFocused
|
||||
onTouchTap={this.handleClose}
|
||||
/>,
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="col-lg-6">
|
||||
<div className="box box-transparent">
|
||||
<div className="box-header">Nested dialogs</div>
|
||||
<div className="box-body">
|
||||
<RaisedButton label="Dialog With Date Picker" onTouchTap={this.handleOpen} />
|
||||
<Dialog
|
||||
title="Dialog With Date Picker"
|
||||
actions={actions}
|
||||
modal={false}
|
||||
open={this.state.open}
|
||||
onRequestClose={this.handleClose}
|
||||
>
|
||||
Open a Date Picker dialog from within a dialog.
|
||||
<DatePicker hintText="Date Picker" />
|
||||
</Dialog>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
const styles = {
|
||||
radioButton: {
|
||||
marginTop: 16,
|
||||
},
|
||||
};
|
||||
|
||||
class DialogExampleScrollable extends React.Component {
|
||||
state = {
|
||||
open: false,
|
||||
};
|
||||
|
||||
handleOpen = () => {
|
||||
this.setState({open: true});
|
||||
};
|
||||
|
||||
handleClose = () => {
|
||||
this.setState({open: false});
|
||||
};
|
||||
|
||||
render() {
|
||||
const actions = [
|
||||
<FlatButton
|
||||
label="Cancel"
|
||||
primary
|
||||
onTouchTap={this.handleClose}
|
||||
/>,
|
||||
<FlatButton
|
||||
label="Submit"
|
||||
primary
|
||||
keyboardFocused
|
||||
onTouchTap={this.handleClose}
|
||||
/>,
|
||||
];
|
||||
|
||||
const radios = [];
|
||||
for (let i = 0; i < 30; i++) {
|
||||
radios.push(
|
||||
<RadioButton
|
||||
key={i}
|
||||
value={`value${i + 1}`}
|
||||
label={`Option ${i + 1}`}
|
||||
style={styles.radioButton}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="col-lg-6">
|
||||
<div className="box box-transparent">
|
||||
<div className="box-header">Scrollable dialog</div>
|
||||
<div className="box-body">
|
||||
<RaisedButton label="Scrollable Dialog" onTouchTap={this.handleOpen} />
|
||||
<Dialog
|
||||
title="Scrollable Dialog"
|
||||
actions={actions}
|
||||
modal={false}
|
||||
open={this.state.open}
|
||||
onRequestClose={this.handleClose}
|
||||
autoScrollBodyContent
|
||||
>
|
||||
<RadioButtonGroup name="shipSpeed" defaultSelected="not_light">
|
||||
{radios}
|
||||
</RadioButtonGroup>
|
||||
</Dialog>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
class DialogExampleAlert extends React.Component {
|
||||
state = {
|
||||
open: false,
|
||||
};
|
||||
|
||||
handleOpen = () => {
|
||||
this.setState({open: true});
|
||||
};
|
||||
|
||||
handleClose = () => {
|
||||
this.setState({open: false});
|
||||
};
|
||||
|
||||
render() {
|
||||
const actions = [
|
||||
<FlatButton
|
||||
label="Cancel"
|
||||
primary
|
||||
onTouchTap={this.handleClose}
|
||||
/>,
|
||||
<FlatButton
|
||||
label="Discard"
|
||||
primary
|
||||
onTouchTap={this.handleClose}
|
||||
/>,
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="col-lg-6">
|
||||
<div className="box box-transparent">
|
||||
<div className="box-header">Alert dialog</div>
|
||||
<div className="box-body">
|
||||
<RaisedButton label="Alert" onTouchTap={this.handleOpen} />
|
||||
<Dialog
|
||||
actions={actions}
|
||||
modal={false}
|
||||
open={this.state.open}
|
||||
onRequestClose={this.handleClose}
|
||||
>
|
||||
Discard draft?
|
||||
</Dialog>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const DialogSection = () => (
|
||||
<article className="article">
|
||||
<h2 className="article-title">Material Dialog</h2>
|
||||
|
||||
<section className="box box-default">
|
||||
<div className="box-body padding-xl">
|
||||
<div className="col-xl-10">
|
||||
|
||||
<div className="row">
|
||||
<DialogExampleSimple />
|
||||
<DialogExampleModal />
|
||||
</div>
|
||||
|
||||
<div className="divider divider-lg divider-dashed" />
|
||||
<div className="row">
|
||||
<DialogExampleCustomWidth />
|
||||
<DialogExampleDialogDatePicker />
|
||||
</div>
|
||||
|
||||
<div className="divider divider-lg divider-dashed" />
|
||||
<div className="row">
|
||||
<DialogExampleScrollable />
|
||||
<DialogExampleAlert />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
);
|
||||
|
||||
module.exports = DialogSection;
|
||||
@@ -0,0 +1,104 @@
|
||||
import React from 'react';
|
||||
import {RadioButton, RadioButtonGroup} from 'material-ui/RadioButton';
|
||||
import ActionFavorite from 'material-ui/svg-icons/action/favorite';
|
||||
import ActionFavoriteBorder from 'material-ui/svg-icons/action/favorite-border';
|
||||
|
||||
const styles = {
|
||||
block: {
|
||||
maxWidth: 250,
|
||||
},
|
||||
radioButton: {
|
||||
marginBottom: 16,
|
||||
},
|
||||
};
|
||||
|
||||
const RadioButtonExampleSimple = () => (
|
||||
<div className="row">
|
||||
<div className="col-lg-6">
|
||||
<RadioButtonGroup name="shipSpeed" defaultSelected="not_light">
|
||||
<RadioButton
|
||||
value="light"
|
||||
label="Simple"
|
||||
style={styles.radioButton}
|
||||
/>
|
||||
<RadioButton
|
||||
value="not_light"
|
||||
label="Selected by default"
|
||||
style={styles.radioButton}
|
||||
/>
|
||||
<RadioButton
|
||||
value="ludicrous"
|
||||
label="Custom icon"
|
||||
checkedIcon={<ActionFavorite />}
|
||||
uncheckedIcon={<ActionFavoriteBorder />}
|
||||
style={styles.radioButton}
|
||||
/>
|
||||
</RadioButtonGroup>
|
||||
<RadioButtonGroup name="shipName" defaultSelected="community">
|
||||
<RadioButton
|
||||
value="enterprise"
|
||||
label="Disabled unchecked"
|
||||
disabled
|
||||
style={styles.radioButton}
|
||||
/>
|
||||
<RadioButton
|
||||
value="community"
|
||||
label="Disabled checked"
|
||||
disabled
|
||||
style={styles.radioButton}
|
||||
/>
|
||||
</RadioButtonGroup>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<RadioButtonGroup name="notRight" labelPosition="left" defaultSelected="not_light" style={styles.block}>
|
||||
<RadioButton
|
||||
value="reverse"
|
||||
label="Label on the left"
|
||||
style={styles.radioButton}
|
||||
/>
|
||||
<RadioButton
|
||||
value="not_light"
|
||||
label="Selected by default"
|
||||
style={styles.radioButton}
|
||||
/>
|
||||
<RadioButton
|
||||
value="ludicrous"
|
||||
label="Custom icon"
|
||||
checkedIcon={<ActionFavorite />}
|
||||
uncheckedIcon={<ActionFavoriteBorder />}
|
||||
style={styles.radioButton}
|
||||
/>
|
||||
</RadioButtonGroup>
|
||||
<RadioButtonGroup name="shipName2" labelPosition="left" defaultSelected="community" style={styles.block}>
|
||||
<RadioButton
|
||||
value="enterprise"
|
||||
label="Disabled unchecked"
|
||||
disabled
|
||||
style={styles.radioButton}
|
||||
/>
|
||||
<RadioButton
|
||||
value="community"
|
||||
label="Disabled checked"
|
||||
disabled
|
||||
style={styles.radioButton}
|
||||
/>
|
||||
</RadioButtonGroup>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const RadioButtonSection = () => (
|
||||
<article className="article">
|
||||
<h2 className="article-title">Material Radio Button</h2>
|
||||
|
||||
<section className="box box-default">
|
||||
<div className="box-body padding-xl">
|
||||
<div className="col-xl-10">
|
||||
<RadioButtonExampleSimple />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
);
|
||||
|
||||
module.exports = RadioButtonSection;
|
||||
@@ -0,0 +1,155 @@
|
||||
import React from 'react';
|
||||
import SelectField from 'material-ui/SelectField';
|
||||
import MenuItem from 'material-ui/MenuItem';
|
||||
|
||||
class SelectFieldExampleSimple extends React.Component {
|
||||
state = {
|
||||
value: 1,
|
||||
};
|
||||
|
||||
handleChange = (event, index, value) => this.setState({value});
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="col-lg-6">
|
||||
<div className="box box-transparent">
|
||||
<div className="box-header">Simple examples</div>
|
||||
<div className="box-body">
|
||||
<SelectField
|
||||
floatingLabelText="Frequency"
|
||||
value={this.state.value}
|
||||
onChange={this.handleChange}
|
||||
>
|
||||
<MenuItem value={1} primaryText="Never" />
|
||||
<MenuItem value={2} primaryText="Every Night" />
|
||||
<MenuItem value={3} primaryText="Weeknights" />
|
||||
<MenuItem value={4} primaryText="Weekends" />
|
||||
<MenuItem value={5} primaryText="Weekly" />
|
||||
</SelectField>
|
||||
<br />
|
||||
<SelectField floatingLabelText="Frequency" value={1} disabled>
|
||||
<MenuItem value={1} primaryText="Disabled" />
|
||||
<MenuItem value={2} primaryText="Every Night" />
|
||||
</SelectField>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class SelectFieldExampleNullable extends React.Component {
|
||||
state = {
|
||||
value: null,
|
||||
};
|
||||
|
||||
handleChange = (event, index, value) => this.setState({value});
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="col-lg-6">
|
||||
<div className="box box-transparent">
|
||||
<div className="box-header">Nullable select</div>
|
||||
<div className="box-body">
|
||||
<SelectField
|
||||
floatingLabelText="Ready?"
|
||||
value={this.state.value}
|
||||
onChange={this.handleChange}
|
||||
>
|
||||
<MenuItem value={null} primaryText="" />
|
||||
<MenuItem value={false} primaryText="No" />
|
||||
<MenuItem value primaryText="Yes" />
|
||||
</SelectField>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
const longItems = [];
|
||||
for (let i = 0; i < 100; i++) {
|
||||
longItems.push(<MenuItem value={i} key={i} primaryText={`Item ${i}`} />);
|
||||
}
|
||||
class DropDownMenuLongMenuExample extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {value: 10};
|
||||
}
|
||||
|
||||
handleChange = (event, index, value) => this.setState({value});
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="col-lg-6">
|
||||
<div className="box box-transparent">
|
||||
<div className="box-header">Long examples</div>
|
||||
<div className="box-body">
|
||||
<SelectField
|
||||
onChange={this.handleChange}
|
||||
value={this.state.value}
|
||||
maxHeight={200}
|
||||
>
|
||||
{longItems}
|
||||
</SelectField>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
class SelectFieldExampleCustomLabel extends React.Component {
|
||||
state = {
|
||||
value: 1,
|
||||
};
|
||||
|
||||
handleChange = (event, index, value) => this.setState({value});
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="col-lg-6">
|
||||
<div className="box box-transparent">
|
||||
<div className="box-header">Label examples</div>
|
||||
<div className="box-body">
|
||||
<SelectField value={this.state.value} onChange={this.handleChange}>
|
||||
<MenuItem value={1} label="5 am - 12 pm" primaryText="Morning" />
|
||||
<MenuItem value={2} label="12 pm - 5 pm" primaryText="Afternoon" />
|
||||
<MenuItem value={3} label="5 pm - 9 pm" primaryText="Evening" />
|
||||
<MenuItem value={4} label="9 pm - 5 am" primaryText="Night" />
|
||||
</SelectField>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const SelectFieldSection = () => (
|
||||
<article className="article">
|
||||
<h2 className="article-title">Material Select Field</h2>
|
||||
|
||||
<section className="box box-default">
|
||||
<div className="box-body padding-xl">
|
||||
<div className="col-xl-10">
|
||||
|
||||
<div className="row">
|
||||
<SelectFieldExampleSimple />
|
||||
<SelectFieldExampleNullable />
|
||||
</div>
|
||||
<div className="row">
|
||||
<DropDownMenuLongMenuExample />
|
||||
<SelectFieldExampleCustomLabel />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
);
|
||||
|
||||
module.exports = SelectFieldSection;
|
||||
@@ -0,0 +1,120 @@
|
||||
import React from 'react';
|
||||
import Slider from 'material-ui/Slider';
|
||||
//
|
||||
const SliderExampleSimple = () => (
|
||||
<div className="box box-default">
|
||||
<div className="box-header">Simple examples</div>
|
||||
<div className="box-body">
|
||||
<Slider />
|
||||
<Slider defaultValue={0.5} />
|
||||
<Slider defaultValue={1} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
//
|
||||
const SliderExampleDisabled = () => (
|
||||
<div className="box box-default">
|
||||
<div className="box-header">Disabled examples</div>
|
||||
<div className="box-body">
|
||||
<Slider disabled />
|
||||
<Slider disabled value={0.5} />
|
||||
<Slider disabled value={1} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
//
|
||||
const SliderExampleStep = () => (
|
||||
<div className="box box-default">
|
||||
<div className="box-header">Stepped examples</div>
|
||||
<div className="box-body">
|
||||
<Slider step={0.10} value={1} />
|
||||
<Slider step={0.20} value={1} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
class SliderExampleControlled extends React.Component {
|
||||
state = {
|
||||
secondSlider: 50,
|
||||
};
|
||||
|
||||
handleSecondSlider = (event, value) => {
|
||||
this.setState({secondSlider: value});
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="box box-default">
|
||||
<div className="box-header">Controlled examples</div>
|
||||
<div className="box-body">
|
||||
<Slider
|
||||
min={0}
|
||||
max={100}
|
||||
step={1}
|
||||
defaultValue={50}
|
||||
value={this.state.secondSlider}
|
||||
onChange={this.handleSecondSlider}
|
||||
/>
|
||||
<div className="callout callout-info no-margin-bottom">
|
||||
<p>
|
||||
<span>{'The value of this slider is: '}</span>
|
||||
<span>{this.state.secondSlider}</span>
|
||||
<span>{' from a range of 0 to 100 inclusive'}</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const styles = {
|
||||
root: {
|
||||
display: 'flex',
|
||||
height: 124,
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-around',
|
||||
},
|
||||
};
|
||||
|
||||
const SliderExampleAxis = () => (
|
||||
<div className="box box-default">
|
||||
<div className="box-header">Alternative Axis Examples</div>
|
||||
<div className="box-body">
|
||||
<div style={styles.root}>
|
||||
<Slider style={{height: 100}} axis="y" defaultValue={0.5} />
|
||||
<Slider style={{width: 200}} axis="x-reverse" />
|
||||
<Slider style={{height: 100}} axis="y-reverse" defaultValue={1} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
|
||||
const SliderSection = () => (
|
||||
<article className="article">
|
||||
<h2 className="article-title">Material Slider</h2>
|
||||
<div className="row">
|
||||
<div className="col-xl-6">
|
||||
<SliderExampleSimple />
|
||||
</div>
|
||||
<div className="col-xl-6">
|
||||
<SliderExampleDisabled />
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-xl-6">
|
||||
<SliderExampleStep />
|
||||
</div>
|
||||
<div className="col-xl-6">
|
||||
<SliderExampleControlled />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<SliderExampleAxis />
|
||||
</article>
|
||||
);
|
||||
|
||||
module.exports = SliderSection;
|
||||
@@ -0,0 +1,117 @@
|
||||
import React from 'react';
|
||||
import TextField from 'material-ui/TextField';
|
||||
|
||||
const style = {
|
||||
width: '100%'
|
||||
};
|
||||
|
||||
//
|
||||
const TextFieldExampleSimple = () => (
|
||||
<div className="col-lg-6">
|
||||
<div className="box box-transparent">
|
||||
<div className="box-header">Simple examples</div>
|
||||
<div className="box-body">
|
||||
<TextField
|
||||
hintText="Hint Text"
|
||||
/><br />
|
||||
<br />
|
||||
<TextField
|
||||
hintText="The hint text can be as long as you want, it will wrap."
|
||||
/><br />
|
||||
<TextField
|
||||
id="text-field-default"
|
||||
defaultValue="Default Value"
|
||||
/><br />
|
||||
<TextField
|
||||
hintText="Hint Text"
|
||||
floatingLabelText="Floating Label Text"
|
||||
/><br />
|
||||
<TextField
|
||||
defaultValue="Default Value"
|
||||
floatingLabelText="Floating Label Text"
|
||||
/><br />
|
||||
<TextField
|
||||
hintText="Hint Text"
|
||||
floatingLabelText="Fixed Floating Label Text"
|
||||
floatingLabelFixed
|
||||
/><br />
|
||||
<TextField
|
||||
hintText="Password Field"
|
||||
floatingLabelText="Password"
|
||||
type="password"
|
||||
/><br />
|
||||
<TextField
|
||||
hintText="MultiLine with rows: 2 and rowsMax: 4"
|
||||
multiLine
|
||||
rows={2}
|
||||
rowsMax={4}
|
||||
/><br />
|
||||
<TextField
|
||||
hintText="Message Field"
|
||||
floatingLabelText="MultiLine and FloatingLabel"
|
||||
multiLine
|
||||
rows={2}
|
||||
/><br />
|
||||
<TextField
|
||||
hintText="Full width"
|
||||
fullWidth
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
|
||||
//
|
||||
const TextFieldExampleDisabled = () => (
|
||||
<div className="col-lg-6">
|
||||
<div className="box box-transparent">
|
||||
<div className="box-header">Disabled examples</div>
|
||||
<div className="box-body">
|
||||
<TextField
|
||||
disabled
|
||||
hintText="Disabled Hint Text"
|
||||
/><br />
|
||||
<br />
|
||||
<TextField
|
||||
disabled
|
||||
id="text-field-disabled"
|
||||
defaultValue="Disabled Value"
|
||||
/><br />
|
||||
<TextField
|
||||
disabled
|
||||
hintText="Disabled Hint Text"
|
||||
floatingLabelText="Floating Label Text"
|
||||
/><br />
|
||||
<TextField
|
||||
disabled
|
||||
hintText="Disabled Hint Text"
|
||||
defaultValue="Disabled With Floating Label"
|
||||
floatingLabelText="Floating Label Text"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
|
||||
const TextFieldSection = () => (
|
||||
<article className="article">
|
||||
<h2 className="article-title">Material Text Field</h2>
|
||||
|
||||
<section className="box box-default">
|
||||
<div className="box-body padding-xl">
|
||||
<div className="col-xl-10">
|
||||
|
||||
<div className="row">
|
||||
<TextFieldExampleSimple />
|
||||
<TextFieldExampleDisabled />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
);
|
||||
|
||||
module.exports = TextFieldSection;
|
||||
@@ -0,0 +1,89 @@
|
||||
import React from 'react';
|
||||
import TimePicker from 'material-ui/TimePicker';
|
||||
|
||||
const SimpleExamples = () => (
|
||||
<div className="box box-transparent">
|
||||
<div className="box-header">Simple examples</div>
|
||||
<div className="box-body">
|
||||
<TimePicker
|
||||
hintText="12hr Format"
|
||||
/>
|
||||
<TimePicker
|
||||
hintText="12hr Format with auto ok"
|
||||
autoOk
|
||||
/>
|
||||
<TimePicker
|
||||
format="24hr"
|
||||
hintText="24hr Format"
|
||||
/>
|
||||
<TimePicker
|
||||
disabled
|
||||
format="24hr"
|
||||
hintText="Disabled TimePicker"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
class ControlledExamples extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {value24: null, value12: null};
|
||||
}
|
||||
|
||||
handleChangeTimePicker24 = (event, date) => {
|
||||
this.setState({value24: date});
|
||||
};
|
||||
|
||||
handleChangeTimePicker12 = (event, date) => {
|
||||
this.setState({value12: date});
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="box box-transparent">
|
||||
<div className="box-header">Controlled examples</div>
|
||||
<div className="box-body">
|
||||
<TimePicker
|
||||
format="ampm"
|
||||
hintText="12hr Format"
|
||||
value={this.state.value12}
|
||||
onChange={this.handleChangeTimePicker12}
|
||||
/>
|
||||
<TimePicker
|
||||
format="24hr"
|
||||
hintText="24hr Format"
|
||||
value={this.state.value24}
|
||||
onChange={this.handleChangeTimePicker24}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const TimePickerSection = () => (
|
||||
<article className="article">
|
||||
<h2 className="article-title">Material Time Picker</h2>
|
||||
|
||||
<section className="box box-default">
|
||||
<div className="box-body padding-xl">
|
||||
<div className="col-xl-10">
|
||||
|
||||
<div className="row">
|
||||
<div className="col-lg-6">
|
||||
<SimpleExamples />
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<ControlledExamples />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
);
|
||||
|
||||
module.exports = TimePickerSection;
|
||||
@@ -0,0 +1,80 @@
|
||||
import React from 'react';
|
||||
import Toggle from 'material-ui/Toggle';
|
||||
|
||||
const styles = {
|
||||
toggle: {
|
||||
maxWidth: 250,
|
||||
marginBottom: 16
|
||||
},
|
||||
};
|
||||
|
||||
const ToggleExampleSimple = () => (
|
||||
<div className="row">
|
||||
<div className="col-md-6">
|
||||
<Toggle
|
||||
label="Simple"
|
||||
style={styles.toggle}
|
||||
/>
|
||||
<Toggle
|
||||
label="Toggled by default"
|
||||
defaultToggled
|
||||
style={styles.toggle}
|
||||
/>
|
||||
<Toggle
|
||||
label="Disabled"
|
||||
disabled
|
||||
style={styles.toggle}
|
||||
/>
|
||||
<Toggle
|
||||
label="Disabled"
|
||||
disabled
|
||||
defaultToggled
|
||||
style={styles.toggle}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<Toggle
|
||||
label="Label on the right"
|
||||
labelPosition="right"
|
||||
style={styles.toggle}
|
||||
/>
|
||||
<Toggle
|
||||
label="Toggled by default"
|
||||
labelPosition="right"
|
||||
defaultToggled
|
||||
style={styles.toggle}
|
||||
/>
|
||||
<Toggle
|
||||
label="Disabled"
|
||||
labelPosition="right"
|
||||
disabled
|
||||
style={styles.toggle}
|
||||
/>
|
||||
<Toggle
|
||||
label="Disabled"
|
||||
labelPosition="right"
|
||||
disabled
|
||||
defaultToggled
|
||||
style={styles.toggle}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const ToggleSection = () => (
|
||||
<article className="article">
|
||||
<h2 className="article-title">Material Toggle</h2>
|
||||
|
||||
<section className="box box-default">
|
||||
<div className="box-body padding-xl">
|
||||
<div className="col-xl-10">
|
||||
|
||||
<ToggleExampleSimple />
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
);
|
||||
|
||||
module.exports = ToggleSection;
|
||||
8
src/routes/app/routes/forms/routes/components/index.js
Normal file
8
src/routes/app/routes/forms/routes/components/index.js
Normal file
@@ -0,0 +1,8 @@
|
||||
module.exports = {
|
||||
path: 'components',
|
||||
getComponent(nextState, cb) {
|
||||
require.ensure([], (require) => {
|
||||
cb(null, require('./components/Components'));
|
||||
});
|
||||
}
|
||||
};
|
||||
250
src/routes/app/routes/forms/routes/layouts/components/Layouts.js
Normal file
250
src/routes/app/routes/forms/routes/layouts/components/Layouts.js
Normal file
@@ -0,0 +1,250 @@
|
||||
import React from 'react';
|
||||
import RaisedButton from 'material-ui/RaisedButton';
|
||||
import QueueAnim from 'rc-queue-anim';
|
||||
|
||||
const BasicForm = () => (
|
||||
<article className="article">
|
||||
<h2 className="article-title">Basic Form</h2>
|
||||
<div className="box box-default">
|
||||
<div className="box-body padding-xl">
|
||||
|
||||
<form role="form">
|
||||
<div className="form-group">
|
||||
<label htmlFor="exampleInputEmail1">Email address</label>
|
||||
<input type="email" className="form-control" id="exampleInputEmail1" placeholder="Enter email" />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label htmlFor="exampleInputPassword1">Password</label>
|
||||
<input type="password" className="form-control" id="exampleInputPassword1" placeholder="Password" />
|
||||
</div>
|
||||
<div className="checkbox">
|
||||
<label>
|
||||
<input type="checkbox" /> Check me out
|
||||
</label>
|
||||
</div>
|
||||
<RaisedButton label="Submit" primary className="btn-w-md" />
|
||||
<div className="divider" />
|
||||
</form>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
);
|
||||
|
||||
const HorizontalForm = () => (
|
||||
<article className="article">
|
||||
<h2 className="article-title">Horizontal Form</h2>
|
||||
<div className="box box-default">
|
||||
<div className="box-body padding-xl">
|
||||
|
||||
<form role="form">
|
||||
<div className="form-group row">
|
||||
<label htmlFor="inputEmail3" className="col-md-2 control-label">Email</label>
|
||||
<div className="col-md-10">
|
||||
<input type="email" className="form-control" id="inputEmail3" placeholder="Email" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group row">
|
||||
<label htmlFor="inputPassword3" className="col-md-2 control-label">Password</label>
|
||||
<div className="col-md-10">
|
||||
<input type="password" className="form-control" id="inputPassword3" placeholder="Password" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group row">
|
||||
<div className="offset-md-2 col-md-10">
|
||||
<div className="form-checkbox">
|
||||
<label className="form-check-label">
|
||||
<input className="form-check-input" type="checkbox" /> Remember me
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group row">
|
||||
<div className="offset-md-2 col-md-10">
|
||||
<RaisedButton label="Login" className="btn-w-md" />
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
);
|
||||
|
||||
const InlineForm = () => (
|
||||
<article className="article">
|
||||
<h2 className="article-title">Inline Form</h2>
|
||||
<div className="box box-default">
|
||||
<div className="box-body padding-xl">
|
||||
|
||||
<form className="form-inline" role="form">
|
||||
<label className="sr-only" htmlFor="inlineFormInput">Name</label>
|
||||
<input type="text" className="form-control mb-2 mr-sm-2 mb-sm-0" id="inlineFormInput" placeholder="Jane Doe" />
|
||||
|
||||
<label className="sr-only" htmlFor="inlineFormInputGroup">Username</label>
|
||||
<div className="input-group mb-2 mr-sm-2 mb-sm-0">
|
||||
<div className="input-group-addon">@</div>
|
||||
<input type="text" className="form-control" id="inlineFormInputGroup" placeholder="Username" />
|
||||
</div>
|
||||
|
||||
<div className="form-check mb-2 mr-sm-2 mb-sm-0">
|
||||
<label className="form-check-label">
|
||||
<input className="form-check-input" type="checkbox" /> Remember me
|
||||
</label>
|
||||
</div>
|
||||
<RaisedButton label="Login" secondary className="btn-w-md" />
|
||||
</form>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
);
|
||||
|
||||
const ColumnSizing = () => (
|
||||
<article className="article">
|
||||
<h2 className="article-title">ColumnSizing</h2>
|
||||
<div className="box box-default">
|
||||
<div className="box-body">
|
||||
|
||||
<div className="form-group">
|
||||
<div className="row">
|
||||
<div className="col-md-1">
|
||||
<input type="text" className="form-control" placeholder="col-md-1" />
|
||||
</div>
|
||||
<div className="col-md-11">
|
||||
<input type="text" className="form-control" placeholder="col-md-11" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="divider" />
|
||||
|
||||
<div className="row">
|
||||
<div className="col-md-2">
|
||||
<input type="text" className="form-control" placeholder="col-md-2" />
|
||||
</div>
|
||||
<div className="col-md-10">
|
||||
<input type="text" className="form-control" placeholder="col-md-10" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="divider" />
|
||||
|
||||
<div className="row">
|
||||
<div className="col-md-3">
|
||||
<input type="text" className="form-control" placeholder="col-md-3" />
|
||||
</div>
|
||||
<div className="col-md-9">
|
||||
<input type="text" className="form-control" placeholder="col-md-9" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="divider" />
|
||||
|
||||
<div className="row">
|
||||
<div className="col-md-4">
|
||||
<input type="text" className="form-control" placeholder="col-md-4" />
|
||||
</div>
|
||||
<div className="col-md-8">
|
||||
<input type="text" className="form-control" placeholder="col-md-8" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="divider" />
|
||||
|
||||
<div className="row">
|
||||
<div className="col-md-5">
|
||||
<input type="text" className="form-control" placeholder="col-md-5" />
|
||||
</div>
|
||||
<div className="col-md-7">
|
||||
<input type="text" className="form-control" placeholder="col-md-7" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="divider" />
|
||||
|
||||
<div className="row">
|
||||
<div className="col-md-6">
|
||||
<input type="text" className="form-control" placeholder="col-md-6" />
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<input type="text" className="form-control" placeholder="col-md-6" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="divider" />
|
||||
|
||||
<div className="row">
|
||||
<div className="col-md-7">
|
||||
<input type="text" className="form-control" placeholder="col-md-7" />
|
||||
</div>
|
||||
<div className="col-md-5">
|
||||
<input type="text" className="form-control" placeholder="col-md-5" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="divider" />
|
||||
|
||||
<div className="row">
|
||||
<div className="col-md-8">
|
||||
<input type="text" className="form-control" placeholder="col-md-8" />
|
||||
</div>
|
||||
<div className="col-md-4">
|
||||
<input type="text" className="form-control" placeholder="col-md-4" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="divider" />
|
||||
|
||||
<div className="row">
|
||||
<div className="col-md-9">
|
||||
<input type="text" className="form-control" placeholder="col-md-9" />
|
||||
</div>
|
||||
<div className="col-md-3">
|
||||
<input type="text" className="form-control" placeholder="col-md-3" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="divider" />
|
||||
|
||||
<div className="row">
|
||||
<div className="col-md-10">
|
||||
<input type="text" className="form-control" placeholder="col-md-10" />
|
||||
</div>
|
||||
<div className="col-md-2">
|
||||
<input type="text" className="form-control" placeholder="col-md-2" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="divider" />
|
||||
|
||||
<div className="row">
|
||||
<div className="col-md-11">
|
||||
<input type="text" className="form-control" placeholder="col-md-11" />
|
||||
</div>
|
||||
<div className="col-md-1">
|
||||
<input type="text" className="form-control" placeholder="col-md-1" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="divider" />
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
);
|
||||
|
||||
|
||||
const Page = () => (
|
||||
<section className="container-fluid with-maxwidth chapter">
|
||||
<QueueAnim type="bottom" className="ui-animate">
|
||||
<div key="1"><BasicForm /></div>
|
||||
<div key="2"><HorizontalForm /></div>
|
||||
<div key="3"><InlineForm /></div>
|
||||
<div key="4"><ColumnSizing /></div>
|
||||
</QueueAnim>
|
||||
</section>
|
||||
);
|
||||
|
||||
module.exports = Page;
|
||||
8
src/routes/app/routes/forms/routes/layouts/index.js
Normal file
8
src/routes/app/routes/forms/routes/layouts/index.js
Normal file
@@ -0,0 +1,8 @@
|
||||
module.exports = {
|
||||
path: 'layouts',
|
||||
getComponent(nextState, cb) {
|
||||
require.ensure([], (require) => {
|
||||
cb(null, require('./components/Layouts'));
|
||||
});
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,14 @@
|
||||
import React from 'react';
|
||||
import QueueAnim from 'rc-queue-anim';
|
||||
import VerticalNonLinear from './VerticalNonLinear';
|
||||
const Stepper = (props) => {
|
||||
return (
|
||||
<div className="container-fluid with-maxwidth chapter">
|
||||
<QueueAnim type="bottom" className="ui-animate">
|
||||
<div key="1"><VerticalNonLinear params={props.params} /></div>
|
||||
</QueueAnim>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
module.exports = Stepper;
|
||||
@@ -0,0 +1,993 @@
|
||||
import React, { Component } from 'react';
|
||||
import {
|
||||
Step,
|
||||
Stepper,
|
||||
StepButton,
|
||||
StepContent,
|
||||
} from 'material-ui/Stepper';
|
||||
import RaisedButton from 'material-ui/RaisedButton';
|
||||
import FlatButton from 'material-ui/FlatButton';
|
||||
import QueueAnim from 'rc-queue-anim';
|
||||
import { RadioButton, RadioButtonGroup } from 'material-ui/RadioButton';
|
||||
import ActionFavorite from 'material-ui/svg-icons/action/favorite';
|
||||
import ActionFavoriteBorder from 'material-ui/svg-icons/action/favorite-border';
|
||||
import AutoComplete from 'material-ui/AutoComplete';
|
||||
import SelectField from 'material-ui/SelectField';
|
||||
import MenuItem from 'material-ui/MenuItem';
|
||||
import { Tabs, Tab } from 'material-ui/Tabs';
|
||||
// import Slider from 'material-ui/Slider';
|
||||
import TimePicker from 'material-ui/TimePicker';
|
||||
import DatePicker from 'material-ui/DatePicker';
|
||||
import TextField from 'material-ui/TextField';
|
||||
// import Toggle from 'material-ui/Toggle';
|
||||
import Snackbar from 'material-ui/Snackbar';
|
||||
import { NEMTLocation } from '../../../../../components/NEMTLocation';
|
||||
import { request } from 'https';
|
||||
import Divider from 'material-ui/Divider';
|
||||
import Paper from 'material-ui/Paper';
|
||||
import Dialog from 'material-ui/Dialog';
|
||||
import Close from 'material-ui/svg-icons/navigation/close'
|
||||
import CommunicationCall from 'material-ui/svg-icons/communication/call'
|
||||
import Message from 'material-ui/svg-icons/communication/message'
|
||||
import Instance from '../../../../../../../components/Connection';
|
||||
import Checkbox from 'material-ui/Checkbox';
|
||||
import Popover from 'material-ui/Popover';
|
||||
|
||||
let DateTimeFormat;
|
||||
|
||||
|
||||
DateTimeFormat = global.Intl.DateTimeFormat;
|
||||
|
||||
export class DialogExampleSimple extends React.Component {
|
||||
state = {
|
||||
open: true,
|
||||
};
|
||||
|
||||
handleOpen = () => {
|
||||
this.setState({ open: true });
|
||||
};
|
||||
|
||||
handleClose = () => {
|
||||
this.setState({ open: false });
|
||||
};
|
||||
|
||||
render() {
|
||||
const actions = [
|
||||
<FlatButton
|
||||
label="Cancel"
|
||||
primary={true}
|
||||
onClick={this.handleClose}
|
||||
/>,
|
||||
<FlatButton
|
||||
label="Submit"
|
||||
primary={true}
|
||||
keyboardFocused={true}
|
||||
onClick={this.handleClose}
|
||||
/>,
|
||||
];
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Dialog
|
||||
title="Dialog With Actions"
|
||||
actions={actions}
|
||||
modal={false}
|
||||
open={this.state.open}
|
||||
onRequestClose={this.handleClose}
|
||||
>
|
||||
The actions in this window were passed in as an array of React objects.
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Dialogs can be nested. This example opens a Date Picker from within a Dialog.
|
||||
*/
|
||||
export class DialogExampleDialogDatePicker extends React.Component {
|
||||
state = {
|
||||
open: false,
|
||||
additionalPassenger:
|
||||
{
|
||||
passengerType: '',
|
||||
seatType: '',
|
||||
}
|
||||
};
|
||||
|
||||
handleOpen = () => {
|
||||
this.setState({ open: true });
|
||||
};
|
||||
|
||||
|
||||
handlePassengerTypeChange = (e, i, v, state) => {
|
||||
this.setState({ additionalPassenger: { passengerType: v } });
|
||||
};
|
||||
|
||||
handleSeatTypeChange = (e, i, v, state) => {
|
||||
this.setState({ additionalPassenger: { seatType: v } });
|
||||
};
|
||||
|
||||
handleClose = () => {
|
||||
this.setState({ open: false });
|
||||
};
|
||||
|
||||
render() {
|
||||
const actions = [
|
||||
<FlatButton
|
||||
label="Add"
|
||||
primary={true}
|
||||
keyboardFocused={true}
|
||||
onClick={this.handleClose}
|
||||
/>,
|
||||
<FlatButton
|
||||
label="Cancel"
|
||||
primary={false}
|
||||
keyboardFocused={false}
|
||||
onClick={this.handleClose}
|
||||
/>,
|
||||
];
|
||||
|
||||
return (
|
||||
<div>
|
||||
<RaisedButton style={{ fontSize: 5 }} label="+ Passenger" onClick={this.handleOpen} />
|
||||
<Dialog
|
||||
title="Add Passenger"
|
||||
actions={actions}
|
||||
modal={false}
|
||||
open={this.state.open}
|
||||
onRequestClose={this.handleClose}
|
||||
>
|
||||
<SelectField
|
||||
floatingLabelText="Passenger Type"
|
||||
value={this.state.additionalPassenger.passengerType}
|
||||
onChange={(e, i, v) => this.handlePassengerTypeChange(e, i, v, this)}
|
||||
autoWidth={true}
|
||||
>
|
||||
<MenuItem value={'Caregiver'} primaryText="Caregiver" />
|
||||
<MenuItem value={'Companion'} primaryText="Companion" />
|
||||
<MenuItem value={'Additional Patient'} primaryText="Additional Patient" />
|
||||
</SelectField>
|
||||
<SelectField
|
||||
floatingLabelText="Seat Type"
|
||||
value={this.state.additionalPassenger.seatType}
|
||||
onChange={(e, i, v) => this.handleSeatTypeChange(e, i, v, this)}
|
||||
autoWidth={true}
|
||||
>
|
||||
<MenuItem value={'Ambulatory'} primaryText="Ambulatory" />
|
||||
<MenuItem value={'Stretcher'} primaryText="Stretcher" />
|
||||
<MenuItem value={'Wheelchair'} primaryText="Wheelchair" />
|
||||
</SelectField>
|
||||
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
const names = [
|
||||
'Service Animal',
|
||||
'Cane / Quad Cane',
|
||||
'Electric Wheelchair',
|
||||
'Oxygen Tank',
|
||||
'Sign Language',
|
||||
'White Cane',
|
||||
'Leg Braces',
|
||||
'Crutches',
|
||||
'Manual Wheelchair',
|
||||
'Prothesis',
|
||||
'Walker',
|
||||
];
|
||||
|
||||
/**
|
||||
* `SelectField` can handle multiple selections. It is enabled with the `multiple` property.
|
||||
*/
|
||||
export class SelectFieldExampleMultiSelect extends Component {
|
||||
state = {
|
||||
values: [],
|
||||
};
|
||||
|
||||
handleChange = (event, index, values) => this.setState({ values });
|
||||
|
||||
menuItems(values) {
|
||||
return names.map((name) => (
|
||||
<MenuItem
|
||||
key={name}
|
||||
insetChildren={true}
|
||||
checked={values && values.indexOf(name) > -1}
|
||||
value={name}
|
||||
primaryText={name}
|
||||
autoWidth={false}
|
||||
style={{ width: 215 }}
|
||||
/>
|
||||
));
|
||||
}
|
||||
|
||||
render() {
|
||||
const { values } = this.state;
|
||||
return (
|
||||
<SelectField
|
||||
autoWidth={false}
|
||||
style={{ width: 215 }}
|
||||
multiple={true}
|
||||
value={values}
|
||||
floatingLabelText="Mobility Aids"
|
||||
label="Mobility Aids"
|
||||
onChange={this.handleChange}
|
||||
>
|
||||
{this.menuItems(values)}
|
||||
</SelectField>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const axios = require('axios');
|
||||
|
||||
const selectStyles = {
|
||||
customWidth: {
|
||||
width: 35,
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
var tripType = 'To Visit';
|
||||
var pickupTimeReturnDisplayMode = "none";
|
||||
/**
|
||||
* `SelectField` is implemented as a controlled component,
|
||||
* with the current selection set through the `value` property.
|
||||
* The `SelectField` can be disabled with the `disabled` property.
|
||||
*/
|
||||
export class SelectFieldExampleSimple extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.props = props;
|
||||
this.state = {
|
||||
value: 'to_visit',
|
||||
pickupTimeReturnDisplayMode: 'none',
|
||||
pickupTimeHide: false,
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.setState(Object.assign(this.state, { value: this.props.value }));
|
||||
}
|
||||
|
||||
handleChange(event, index, value, state) {
|
||||
let self = state
|
||||
tripType = value;
|
||||
switch (tripType) {
|
||||
|
||||
case 'from_visit':
|
||||
pickupTimeReturnDisplayMode = "none"
|
||||
self.setState(Object.assign(self.state, { pickupTimeReturnDisplayMode: 'none', value: 'from_visit', pickupTimeHide: false }));
|
||||
break;
|
||||
|
||||
case 'from_visit_call':
|
||||
pickupTimeReturnDisplayMode = "none"
|
||||
self.setState(Object.assign(self.state, { pickupTimeReturnDisplayMode: 'none', value: 'from_visit_call', pickupTimeHide: true }));
|
||||
break;
|
||||
|
||||
|
||||
case 'to_visit':
|
||||
pickupTimeReturnDisplayMode = "none"
|
||||
self.setState(Object.assign(self.state, { pickupTimeReturnDisplayMode: 'none', value: 'to_visit', pickupTimeHide: false }));
|
||||
break;
|
||||
|
||||
|
||||
case 'roundtrip':
|
||||
pickupTimeReturnDisplayMode = "block"
|
||||
self.setState(Object.assign(self.state, { pickupTimeReturnDisplayMode: 'block', value: 'roundtrip', pickupTimeHide: false }));
|
||||
break;
|
||||
|
||||
case 'roundtrip_call':
|
||||
pickupTimeReturnDisplayMode = "none";
|
||||
self.setState(Object.assign(self.state, { pickupTimeReturnDisplayMode: 'none', value: 'roundtrip_call', pickupTimeHide: false }));
|
||||
break;
|
||||
|
||||
default:
|
||||
self.setState(Object.assign(self.state, { pickupTimeReturnDisplayMode: 'block', value: 'roundtrip', pickupTimeHide: false }));
|
||||
break;
|
||||
}
|
||||
|
||||
if (this.props.handleChange) {
|
||||
this.props.handleChange(event, index, { pickupTimeReturnDisplayMode: self.state.pickupTimeReturnDisplayMode, selectField: this.state.value, pickupTimeHide: this.state.pickupTimeHide });
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div >
|
||||
<SelectField
|
||||
floatingLabelText="Trip Type"
|
||||
value={this.state.value}
|
||||
onChange={(e, i, v) => this.handleChange(e, i, v, this)}
|
||||
autoWidth={false}
|
||||
style={{ width: 230 }}
|
||||
>
|
||||
<MenuItem value={'to_visit'} primaryText="To Visit" />
|
||||
<MenuItem value={'from_visit'} primaryText="From Visit" />
|
||||
<MenuItem value={'from_visit_call'} primaryText="From Visit / Will Call" />
|
||||
<MenuItem value={'roundtrip'} primaryText="Round Trip" />
|
||||
<MenuItem value={'roundtrip_call'} primaryText="Round Trip / Will Call" />
|
||||
</SelectField>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function disableWeekends(date) {
|
||||
return date.getDay() === 0 || date.getDay() === 6;
|
||||
}
|
||||
|
||||
|
||||
const styles = {
|
||||
padding: '12px 18px',
|
||||
marginBottom: 12,
|
||||
fontWeight: 400,
|
||||
maxWidth: 250,
|
||||
radioButton: {
|
||||
marginTop: 6
|
||||
},
|
||||
checkbox: {
|
||||
marginTop: 16, fontWeight: 100, fontSize: 10
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
|
||||
// const styles = {
|
||||
// block: {
|
||||
// maxWidth: 250,
|
||||
// },
|
||||
// checkbox: {
|
||||
// marginBottom: 16,fontWeight:'regular'
|
||||
// },
|
||||
// };
|
||||
|
||||
function handleActive(tab) {
|
||||
console.log(`A tab with this route property ${tab.props.route} was activated.`);
|
||||
}
|
||||
|
||||
|
||||
const
|
||||
dataConfig = { text: 'text', value: 'value' };
|
||||
|
||||
|
||||
/**
|
||||
* A basic vertical non-linear implementation
|
||||
*/
|
||||
class VerticalNonLinear extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
stepIndex: 0,
|
||||
rideTypeValue: 0,
|
||||
providerID: 0,
|
||||
providerName: '',
|
||||
visitDate: new Date(),
|
||||
visitTime: new Date(),
|
||||
pickupLocation: null,
|
||||
pickupTime: new Date(),
|
||||
pickupTimeReturn: new Date(),
|
||||
pickupTimeReturnDisplayMode: 'none',
|
||||
open: false,
|
||||
message: 'Booking Ride',
|
||||
origin: {},
|
||||
destination: {},
|
||||
buttonPickupText: 'Member Address',
|
||||
buttodDropOffText: 'Choose Drop-Off location',
|
||||
buttonProviderText: 'Choose Provider',
|
||||
user: null,
|
||||
showUserSelection: true,
|
||||
userSelectionText: '',
|
||||
users: [],
|
||||
visit_external_id: "",
|
||||
notes: "",
|
||||
pickupTimeReturnDisplayMode: "none",
|
||||
eta: {
|
||||
distance_miles: 0,
|
||||
duration_seconds: 0,
|
||||
formatted_time: 0,
|
||||
showed: false,
|
||||
},
|
||||
trip_type: {
|
||||
key: "to_visit",
|
||||
value: ""
|
||||
},
|
||||
return_time: new Date(),
|
||||
pickupTimeHide: false,
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
const loggedUser = JSON.parse(localStorage.getItem("loggedUser"));
|
||||
let state = this;
|
||||
|
||||
let user = {
|
||||
useruuid: this.props.params.uuid
|
||||
}
|
||||
|
||||
if (user.useruuid !== loggedUser.useruuid) {
|
||||
Instance.getRawConn().get(`/v1/nemt/users/member/${user.useruuid}`)
|
||||
.then(function (res) {
|
||||
state.setState(Object.assign(state.state, { user: res.data, showUserSelection: true, userSelectionText: `${res.data.member} - ${res.data.name}` }));
|
||||
})
|
||||
.catch(err => {
|
||||
if (err.response.status !== 422) {
|
||||
console.error(err);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
Instance.getRawConn().get(`/v1/nemt/users/member`)
|
||||
.then(function (res) {
|
||||
let users = res.data.map(u => { return Object.assign(u, { userdata: `${u.member} - ${u.name}` }) });
|
||||
state.setState(Object.assign(state.state, { users: users, showUserSelection: true, stepIndex: 0 }));
|
||||
})
|
||||
.catch(err => {
|
||||
if (err.response.status !== 422) {
|
||||
console.error(err);
|
||||
}
|
||||
});
|
||||
|
||||
let visitTime = new Date(new Date().getTime() + (1 * 60 * 60 * 1000));
|
||||
let visitDate = visitTime;
|
||||
let pickupTime = new Date(visitTime.getTime() - (0.5 * 60 * 60 * 1000));
|
||||
let pickupTimeReturn = new Date(visitTime.getTime() - (0.5 * 60 * 60 * 1000));
|
||||
|
||||
this.setState(Object.assign(this.state, {
|
||||
visitDate: visitDate,
|
||||
visitTime: visitTime,
|
||||
pickupTime: pickupTime,
|
||||
pickupTimeReturn: pickupTimeReturn,
|
||||
}));
|
||||
}
|
||||
//for snackbar
|
||||
handleTouchTap() {
|
||||
this.setState(Object.assign(this.state, {
|
||||
open: true,
|
||||
}));
|
||||
};
|
||||
|
||||
handleRequestClose(state) {
|
||||
let self = state;
|
||||
self.setState(Object.assign(self.state, {
|
||||
open: false,
|
||||
}));
|
||||
};
|
||||
|
||||
handleNext(state) {
|
||||
let self = state;
|
||||
const { stepIndex } = self.state;
|
||||
if (stepIndex < 4) {
|
||||
self.setState(Object.assign(self.state, { stepIndex: stepIndex + 1 }));
|
||||
if (stepIndex === 3) {
|
||||
self.handleTouchTap();
|
||||
var requestRide = {
|
||||
user_uuid: state.state.user.useruuid,
|
||||
ride_type: "lyft",
|
||||
origin: state.state.origin,
|
||||
destination: state.state.destination,
|
||||
external_note: state.state.notes,
|
||||
visit_date: state.state.visitDate,
|
||||
visit_time: state.state.visitTime,
|
||||
pickup_time: state.state.pickupTime,
|
||||
visit_external_id: state.state.visit_external_id,
|
||||
distance: 0,
|
||||
duration: 0,
|
||||
eta: 0,
|
||||
trip_type: state.state.trip_type,
|
||||
return_time: state.state.return_time,
|
||||
};
|
||||
|
||||
if (self.state.eta.distance_miles) requestRide.distance = self.state.eta.distance_miles;
|
||||
if (self.state.eta.duration_seconds) requestRide.duration = self.state.eta.duration_seconds;
|
||||
|
||||
requestRide.origin.name = self.state.pickupLocation
|
||||
requestRide.destination.name = self.state.providerName
|
||||
|
||||
if (self.diffMinutes(state.state.pickupTime, new Date()) > 10) {
|
||||
requestRide.scheduled_pickup_range = {
|
||||
range_ms: null,
|
||||
timestamp_ms: new Date(self.state.pickupTime).getTime()
|
||||
}
|
||||
}
|
||||
|
||||
Instance.getRawConn().post('/v1/nemt/rides', requestRide).then(function (res) {
|
||||
self.handleRequestClose(self);
|
||||
window.location.href = '/#/app/page/map/' + res.data.ride_uuid;
|
||||
}).catch(console.error);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
diffMinutes(dt2, dt1) {
|
||||
var diff = (dt2.getTime() - dt1.getTime()) / 1000;
|
||||
diff /= 60;
|
||||
return Math.abs(Math.round(diff));
|
||||
}
|
||||
|
||||
handlePrev(state) {
|
||||
let self = state;
|
||||
const { stepIndex } = self.state;
|
||||
if (stepIndex > 0) {
|
||||
self.setState(Object.assign(self.state, { stepIndex: stepIndex - 1 }));
|
||||
}
|
||||
};
|
||||
|
||||
handleChange(value, state) {
|
||||
let self = state
|
||||
self.setState(Object.assign(self.state, {
|
||||
rideTypeValue: parseInt(value.target.defaultValue)
|
||||
}));
|
||||
};
|
||||
|
||||
handleProvider(value, state) {
|
||||
let self = state;
|
||||
console.log(value);
|
||||
self.setState(Object.assign(self.state, {
|
||||
providerID: value.value,
|
||||
providerName: value.text
|
||||
}));
|
||||
};
|
||||
|
||||
handleDate(event, date, state) {
|
||||
let self = state
|
||||
let visitTime = new Date(date.getTime() + (1 * 60 * 60 * 1000));
|
||||
let visitDate = date;
|
||||
let pickupTime = new Date(visitTime.getTime() - (0.5 * 60 * 60 * 1000));
|
||||
let pickupTimeReturn = new Date(visitTime.getTime() - (0.5 * 60 * 60 * 1000));
|
||||
|
||||
self.setState(Object.assign(self.state, {
|
||||
visitDate: visitDate,
|
||||
visitTime: visitTime,
|
||||
pickupTime: pickupTime,
|
||||
pickupTimeReturn: pickupTimeReturn,
|
||||
}));
|
||||
}
|
||||
|
||||
handleTime(value, date, state) {
|
||||
let self = state;
|
||||
self.setState(Object.assign(self.state, {
|
||||
visitDate: date,
|
||||
visitTime: date,
|
||||
pickupTime: new Date(date.getTime() - (0.5 * 60 * 60 * 1000)),
|
||||
pickupTimeReturn: new Date(date.getTime() - (0.5 * 60 * 60 * 1000)),
|
||||
}));
|
||||
}
|
||||
|
||||
handlePickupTime(value, date, state) {
|
||||
let self = state;
|
||||
console.log('Pickup Time', date);
|
||||
self.setState(Object.assign(self.state, {
|
||||
pickupTime: date,
|
||||
pickupTimeReturn: date
|
||||
}));
|
||||
}
|
||||
|
||||
handlePickupTimeReturn(value, date, state) {
|
||||
let self = state;
|
||||
self.setState(Object.assign(self.state, {
|
||||
return_time: date,
|
||||
pickupTimeReturn: date,
|
||||
pickupTimeReturnDisplayMode: 'block'
|
||||
}));
|
||||
}
|
||||
|
||||
handlePickup(value) {
|
||||
console.log(value);
|
||||
this.setState(Object.assign(this.state, {
|
||||
pickupLocation: value.text
|
||||
}));
|
||||
};
|
||||
|
||||
handleExternalID(e, value, state) {
|
||||
let self = state;
|
||||
self.setState(Object.assign(self.state, {
|
||||
visit_external_id: value
|
||||
}));
|
||||
}
|
||||
|
||||
handleNotes(e, value, state) {
|
||||
let self = state
|
||||
self.setState(Object.assign(self.state, {
|
||||
notes: value
|
||||
}));
|
||||
}
|
||||
|
||||
handleChangeVisitType(event, index, value, state) {
|
||||
let self = state;
|
||||
|
||||
let trip_type = {
|
||||
key: value.selectField,
|
||||
}
|
||||
|
||||
// console.log(event, index, value, state);
|
||||
// console.log(trip_type);
|
||||
|
||||
|
||||
self.setState(Object.assign(self.state, { pickupTimeReturnDisplayMode: value.pickupTimeReturnDisplayMode, trip_type: trip_type, pickupTimeHide: value.pickupTimeHide }));
|
||||
}
|
||||
|
||||
renderStepActions(step, state) {
|
||||
let self = state;
|
||||
return (
|
||||
<div style={{ margin: '12px 0' }}>
|
||||
{step !== 2 && (
|
||||
<RaisedButton
|
||||
label="Next"
|
||||
disableTouchRipple
|
||||
disableFocusRipple
|
||||
primary
|
||||
onTouchTap={() => self.handleNext(self)}
|
||||
style={{ marginRight: 12 }}
|
||||
/>
|
||||
)}
|
||||
{step === 2 && (
|
||||
<RaisedButton
|
||||
label="Confirm"
|
||||
disableTouchRipple
|
||||
disableFocusRipple
|
||||
primary
|
||||
onTouchTap={() => self.handleNext(self)}
|
||||
style={{ marginRight: 12 }}
|
||||
href=""
|
||||
/>
|
||||
)}
|
||||
{step > 0 && (
|
||||
<FlatButton
|
||||
label="Back"
|
||||
disableTouchRipple
|
||||
disableFocusRipple
|
||||
onTouchTap={() => self.handlePrev(self)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// checkValue = (value) => {
|
||||
// return value === this.state.rideTypeValue;
|
||||
// }
|
||||
updateCheck() {
|
||||
this.setState((oldState) => {
|
||||
return {
|
||||
checked: !oldState.checked,
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
getLocation() {
|
||||
var defaultPlace = {
|
||||
coords: {
|
||||
latitude: 41.851382,
|
||||
longitude: -87.675980
|
||||
}
|
||||
}
|
||||
if (navigator.geolocation) {
|
||||
// this.setPosition(defaultPlace);
|
||||
navigator.geolocation.getCurrentPosition(this.setPosition);
|
||||
} else {
|
||||
this.setPosition(defaultPlace);
|
||||
}
|
||||
}
|
||||
|
||||
setPosition(position) {
|
||||
localStorage.setItem('position', JSON.stringify({ latitude: position.coords.latitude, longitude: position.coords.longitude }));
|
||||
}
|
||||
|
||||
handleProviderChanged(res, state) {
|
||||
let self = state;
|
||||
let destination = {
|
||||
id: res.id,
|
||||
name: res.name,
|
||||
lat: res.lat,
|
||||
lng: res.lng,
|
||||
address: res.address
|
||||
}
|
||||
const name = res.name;
|
||||
|
||||
if (self.state.origin && self.state.origin.lat && self.state.origin.lng) {
|
||||
let url = self.state.origin.lat + '/' + self.state.origin.lng + '/' + destination.lat + '/' + destination.lng
|
||||
Instance.getRawConn().get('/v1/nemt/rides/eta/' + url).then(function (res) {
|
||||
let obj = {
|
||||
distance_miles: res.data.cost_estimates[0].estimated_distance_miles,
|
||||
duration_seconds: res.data.cost_estimates[0].estimated_duration_seconds,
|
||||
formatted_time: self.formatTime(res.data.cost_estimates[0].estimated_duration_seconds),
|
||||
showed: true,
|
||||
}
|
||||
|
||||
localStorage.setItem('eta', JSON.stringify(obj));
|
||||
console.log('ETA Info', obj);
|
||||
if (!self.state.eta.showed) {
|
||||
|
||||
self.setState(Object.assign(self.state, {
|
||||
message: ('BOOKING...Estimated Distance: ' + obj.distance_miles + ' miles\nEstimated Time: ' + obj.formatted_time),
|
||||
open: true,
|
||||
}));
|
||||
|
||||
}
|
||||
|
||||
self.setState(Object.assign(self.state, {
|
||||
eta: obj,
|
||||
buttonProviderText: name,
|
||||
providerName: name,
|
||||
destination: destination
|
||||
}));
|
||||
});
|
||||
} else {
|
||||
self.setState(Object.assign(self.state, {
|
||||
buttonProviderText: name,
|
||||
providerName: name,
|
||||
destination: destination
|
||||
}));
|
||||
}
|
||||
}
|
||||
|
||||
formatTime(sec_num) {
|
||||
var hours = Math.floor(sec_num / 3600);
|
||||
var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
|
||||
var seconds = sec_num - (hours * 3600) - (minutes * 60);
|
||||
|
||||
if (hours < 10) { hours = "0" + hours; }
|
||||
if (minutes < 10) { minutes = "0" + minutes; }
|
||||
if (seconds < 10) { seconds = "0" + seconds; }
|
||||
return hours + ':' + minutes + ':' + seconds;
|
||||
}
|
||||
|
||||
handlePickupChanged = (res, state) => {
|
||||
let origin = {
|
||||
id: res.id,
|
||||
name: res.name,
|
||||
lat: res.lat,
|
||||
lng: res.lng,
|
||||
address: res.address
|
||||
}
|
||||
|
||||
const name = res.name;
|
||||
|
||||
if (state.state.destination && state.state.destination.lat && state.state.destination.lng) {
|
||||
let url = origin.lat + '/' + origin.lng + '/' + state.state.destination.lat + '/' + state.state.destination.lng
|
||||
Instance.getRawConn().get('/v1/nemt/rides/eta/' + url).then(function (res) {
|
||||
let obj = {
|
||||
distance_miles: res.data.cost_estimates[0].estimated_distance_miles,
|
||||
duration_seconds: res.data.cost_estimates[0].estimated_duration_seconds,
|
||||
formatted_time: state.formatTime(res.data.cost_estimates[0].estimated_duration_seconds),
|
||||
showed: true,
|
||||
}
|
||||
|
||||
localStorage.setItem('eta', JSON.stringify(obj));
|
||||
if (!state.state.eta.showed) {
|
||||
|
||||
state.setState(Object.assign(state.state, {
|
||||
message: ('BOOKING...Estimated Distance: ' + obj.distance_miles + ' miles\nEstimated Time: ' + obj.formatted_time),
|
||||
open: true,
|
||||
}));
|
||||
|
||||
}
|
||||
|
||||
state.setState(Object.assign(state.state, {
|
||||
eta: obj,
|
||||
buttonPickupText: name,
|
||||
pickupLocation: name,
|
||||
origin: origin,
|
||||
}));
|
||||
});
|
||||
} else {
|
||||
state.setState(Object.assign(state.state, {
|
||||
buttonPickupText: name,
|
||||
pickupLocation: name,
|
||||
origin: origin
|
||||
}));
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
render() {
|
||||
// const { stepIndex } = this.state;
|
||||
this.getLocation();
|
||||
|
||||
const state = this;
|
||||
let userSelection;
|
||||
|
||||
let pickupTimeSelector;
|
||||
if (this.state.pickupTimeReturnDisplayMode !== 'none') {
|
||||
pickupTimeSelector = (
|
||||
<TimePicker
|
||||
autoWidth={false}
|
||||
style={{ width: 80, display: pickupTimeReturnDisplayMode }}
|
||||
format="ampm"
|
||||
underlineShow={true}
|
||||
hintText="Choose Return Time"
|
||||
floatingLabelText="Return Time"
|
||||
value={this.state.pickupTimeReturn}
|
||||
onChange={(e, d) => this.handlePickupTimeReturn(e, d, this)}
|
||||
minutesStep={5}
|
||||
/>)
|
||||
}
|
||||
|
||||
let pickupTime = (<TimePicker
|
||||
autoWidth={false}
|
||||
style={{ width: 80 }}
|
||||
format="ampm"
|
||||
underlineShow={true}
|
||||
hintText="Choose Pickup Time"
|
||||
floatingLabelText="Pickup Time"
|
||||
value={this.state.pickupTime}
|
||||
onChange={(e, d) => this.handlePickupTime(e, d, this)}
|
||||
minutesStep={5}
|
||||
/>);
|
||||
if (this.state.pickupTimeHide) pickupTime = null;
|
||||
|
||||
if (this.state.showUserSelection && this.state.users.length > 0) {
|
||||
const handleAutocomplete = (u) => {
|
||||
state.setState(Object.assign(state.state, { user: u, userSelectionText: u.userdata }));
|
||||
}
|
||||
const datasourceConfig = { text: 'userdata', value: 'useruuid' }
|
||||
userSelection = (
|
||||
<div>
|
||||
<AutoComplete style={{ fontSize: '10' }} dataSourceConfig={datasourceConfig} dataSource={this.state.users} floatingLabelText="Choose Member" filter={(searchText, key) => (key.toLowerCase().indexOf(searchText.toLowerCase()) !== -1)} maxSearchResults={5} onNewRequest={handleAutocomplete} searchText={this.state.userSelectionText} />
|
||||
</div>
|
||||
);
|
||||
} else if (this.state.showUserSelection && this.state.users.length === 0) {
|
||||
userSelection = (<div style={{ fontSize: '10' }} >
|
||||
<strong>Loading...</strong>
|
||||
</div>);
|
||||
} else {
|
||||
userSelection = (<div >
|
||||
<strong>{this.state.user.member}</strong> - {this.state.user.name}
|
||||
</div>);
|
||||
}
|
||||
|
||||
return (
|
||||
<article className="article padding-sm-v">
|
||||
<h2 className="article-title" style={{ paddingTop: 10, margin: 0 }} >Book Ride</h2>
|
||||
<div className="box box-default">
|
||||
<div className="box-body padding-xs">
|
||||
|
||||
<div style={{ maxWidth: 380, margin: 'auto' }}>
|
||||
<Stepper
|
||||
activeStep={this.state.stepIndex}
|
||||
linear={false}
|
||||
orientation="vertical"
|
||||
>
|
||||
<Step>
|
||||
<StepButton onClick={() => this.setState({ stepIndex: 0 })}>
|
||||
Member
|
||||
</StepButton>
|
||||
<StepContent>
|
||||
<form role="form">
|
||||
<a href="/#/app/page/eligibility" target="_new" >Verify Eligibility</a>
|
||||
<div className="divider" />
|
||||
<strong>OR</strong>
|
||||
|
||||
{userSelection}
|
||||
<div className="divider" />
|
||||
|
||||
<NEMTLocation type="flat" floatingLabelText='Choose Member Location' hintText="Choose Member Location" data={this.state} title={"Member Address"} value={""} buttonvalue={this.state.buttonPickupText} onPlaceChanged={(provider) => this.handlePickupChanged(provider, this)} fontSize={12} loadSuggestion={true} address={this.state.origin} />
|
||||
|
||||
|
||||
<Checkbox
|
||||
label="Member has consented to terms of use"
|
||||
checked={this.state.checked}
|
||||
onCheck={this.updateCheck.bind(this)}
|
||||
style={styles.checkbox}
|
||||
/>
|
||||
|
||||
<div className="divider" />
|
||||
</form>
|
||||
{this.renderStepActions(0, this)}
|
||||
</StepContent>
|
||||
</Step>
|
||||
|
||||
<Step>
|
||||
<StepButton onClick={() => this.setState({ stepIndex: 1 })}>
|
||||
Provider
|
||||
</StepButton>
|
||||
<StepContent>
|
||||
<form role="form">
|
||||
<NEMTLocation type="flat" data={this.state} title={"Provider"} value={""} buttonvalue={this.state.buttonProviderText} onPlaceChanged={(provider) => this.handleProviderChanged(provider, this)} fontSize={12} locationType="provider" loadSuggestion={true} address={this.state.destination} />
|
||||
{/* <div className="divider" /> */}
|
||||
</form>
|
||||
{this.renderStepActions(1, this)}
|
||||
</StepContent>
|
||||
</Step>
|
||||
|
||||
|
||||
<Step>
|
||||
<StepButton onClick={() => this.setState({ stepIndex: 2 })}>
|
||||
Visit Details
|
||||
</StepButton>
|
||||
<StepContent>
|
||||
<form role="form">
|
||||
<div className="form-group">
|
||||
<DatePicker formatDate={new DateTimeFormat('en-US', {
|
||||
weekday: 'short',
|
||||
day: 'numeric',
|
||||
month: 'long',
|
||||
year: 'numeric',
|
||||
}).format} style={{ maxWidth: 80 }} hintText="Visit Date" floatingLabelText="Date" container="inline" onChange={(e, d) => this.handleDate(e, d, this)} shouldDisableDate={disableWeekends} value={this.state.visitDate} />
|
||||
<TimePicker
|
||||
style={{ maxWidth: 80 }}
|
||||
format="ampm"
|
||||
hintText="Visit Time"
|
||||
floatingLabelText="Time"
|
||||
value={this.state.visitTime}
|
||||
onChange={(e, d) => this.handleTime(e, d, this)}
|
||||
minutesStep={5}
|
||||
/>
|
||||
</div>
|
||||
<div className="divider" />
|
||||
<div className="form-group">
|
||||
<TextField hintText="Visit External ID" floatingLabelText="External ID" onChange={(e, v) => this.handleExternalID(e, v, this)} value={this.state.visit_external_id} />
|
||||
</div>
|
||||
</form>
|
||||
|
||||
|
||||
{/* <TabsSection /> */}
|
||||
{this.renderStepActions(1, this)}
|
||||
</StepContent>
|
||||
</Step>
|
||||
|
||||
<Step>
|
||||
<StepButton onClick={() => this.setState({ stepIndex: 3 })}>
|
||||
Trip Details
|
||||
</StepButton>
|
||||
<StepContent>
|
||||
{/* <Paper zDepth={7}> */}
|
||||
<form>
|
||||
|
||||
<SelectFieldExampleSimple handleChange={(e, i, v) => this.handleChangeVisitType(e, i, v, this)} value={this.state.trip_type.key} />
|
||||
{pickupTime}
|
||||
{pickupTimeSelector}
|
||||
<SelectFieldExampleMultiSelect />
|
||||
<DialogExampleDialogDatePicker />
|
||||
<TextField
|
||||
underlineShow={true}
|
||||
hintText="Notes for Driver"
|
||||
floatingLabelText="Notes for Driver"
|
||||
onChange={(e, v) => this.handleNotes(e, v, this)}
|
||||
value={this.state.notes} multiLine={true}
|
||||
maxlength={250}
|
||||
rows={1}
|
||||
/>
|
||||
|
||||
|
||||
{/* <Divider /> */}
|
||||
|
||||
</form>
|
||||
|
||||
{/* </Paper> */}
|
||||
{this.renderStepActions(2, this)}
|
||||
</StepContent>
|
||||
</Step>
|
||||
</Stepper>
|
||||
</div>
|
||||
|
||||
<div style={{ maxWidth: 380, margin: 'auto' }}>
|
||||
<div className="divider divider-xl" />
|
||||
<div className="callout callout-info">
|
||||
<p>Complete steps <strong>1 - 4</strong> to schedule your ride!</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<Snackbar
|
||||
style={{ fontSize: '7' }}
|
||||
open={this.state.open}
|
||||
message={this.state.message}
|
||||
// message="Booking Ride"
|
||||
autoHideDuration={50000}
|
||||
onRequestClose={() => this.handleRequestClose(this)}
|
||||
/>
|
||||
|
||||
</div>
|
||||
</article>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default VerticalNonLinear;
|
||||
8
src/routes/app/routes/forms/routes/steppers/index.js
Normal file
8
src/routes/app/routes/forms/routes/steppers/index.js
Normal file
@@ -0,0 +1,8 @@
|
||||
module.exports = {
|
||||
path: 'steppers/:uuid',
|
||||
getComponent(nextState, cb) {
|
||||
require.ensure([], (require) => {
|
||||
cb(null, require('./components/Steppers'));
|
||||
});
|
||||
}
|
||||
};
|
||||
865
src/routes/app/routes/member/components/member.js
Normal file
865
src/routes/app/routes/member/components/member.js
Normal file
@@ -0,0 +1,865 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import QueueAnim from 'rc-queue-anim';
|
||||
import Instance from '../../../../../components/Connection';
|
||||
import $ from 'jquery';
|
||||
import dt from 'datatables.net';
|
||||
import responsive from 'datatables.net-responsive';
|
||||
import {
|
||||
Row,
|
||||
Col,
|
||||
Grid,
|
||||
Table,
|
||||
} from '@sketchpixy/rubix';
|
||||
import moment from 'moment';
|
||||
import ContentAdd from 'material-ui/svg-icons/content/add';
|
||||
import { Card, CardActions, CardHeader, CardMedia, CardTitle, CardText } from 'material-ui/Card';
|
||||
import FlatButton from 'material-ui/FlatButton';
|
||||
import RaisedButton from 'material-ui/RaisedButton';
|
||||
import GoogleAddressComponent from '../../organization/components/GoogleAddressComponent';
|
||||
import Delete from 'material-ui/svg-icons/action/delete';
|
||||
import IconButton from 'material-ui/IconButton';
|
||||
|
||||
|
||||
dt.responsive = responsive;
|
||||
$.dataTable = dt;
|
||||
|
||||
const formatTime = function (sec_num) {
|
||||
var hours = Math.floor(sec_num / 3600);
|
||||
var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
|
||||
var seconds = sec_num - (hours * 3600) - (minutes * 60);
|
||||
|
||||
if (hours < 10) { hours = "0" + hours; }
|
||||
if (minutes < 10) { minutes = "0" + minutes; }
|
||||
if (seconds < 10) { seconds = "0" + seconds; }
|
||||
return hours + ':' + minutes + ':' + seconds;
|
||||
}
|
||||
|
||||
const formatPhoneNumber = function (s) {
|
||||
var s2 = ("" + s).replace(/\D/g, '');
|
||||
var m = s2.match(/^(\d{3})(\d{3})(\d{4})$/);
|
||||
return (!m) ? null : "(" + m[1] + ") " + m[2] + "-" + m[3];
|
||||
}
|
||||
|
||||
|
||||
const Address = (props) => {
|
||||
let list = [];
|
||||
let buttonStyle = {
|
||||
marginTop: -10
|
||||
}
|
||||
|
||||
if (props.addresses && props.addresses !== null && props.addresses.length > 0) {
|
||||
const handleRemoveAddress = (a) => {
|
||||
if (props.onAddressRemoved) {
|
||||
props.onAddressRemoved(a);
|
||||
}
|
||||
}
|
||||
|
||||
list = props.addresses.map((c, i) => {
|
||||
let name = c.name;
|
||||
switch (c.address_type) {
|
||||
case "home":
|
||||
case "work":
|
||||
name = c.address_type_name;
|
||||
}
|
||||
if (i === 0) {
|
||||
return (<div className="row metrics" key={c.id}>
|
||||
<div className="col-xl-4 col-xs-4 col-md-4">
|
||||
<span className="metric-info">Name</span>
|
||||
<span className="metric">{name}</span>
|
||||
</div>
|
||||
<div className="col-xl-6 col-xs-6 col-md-6">
|
||||
<span className="metric-info">Address</span>
|
||||
<span className="metric">{c.address}</span>
|
||||
</div>
|
||||
<div className="col-xl-2 col-xs-2 col-md-2">
|
||||
<span className="metric-info">Actions</span>
|
||||
<span className="metric"><IconButton onTouchTap={(e) => handleRemoveAddress(c)} style={buttonStyle}><Delete /></IconButton></span>
|
||||
</div>
|
||||
</div>);
|
||||
} else {
|
||||
return (<div className="row metrics" key={c.id}>
|
||||
<div className="col-xl-4 col-xs-4 col-md-4">
|
||||
<span className="metric">{name}</span>
|
||||
</div>
|
||||
<div className="col-xl-6 col-xs-6 col-md-6">
|
||||
<span className="metric">{c.address}</span>
|
||||
</div>
|
||||
<div className="col-xl-2 col-xs-2 col-md-2">
|
||||
<span className="metric"><IconButton onTouchTap={(e) => handleRemoveAddress(c)} style={buttonStyle}><Delete /></IconButton></span>
|
||||
</div>
|
||||
</div>);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="box box-default">
|
||||
<div className="box-body">
|
||||
<div className="row">
|
||||
<div className="col-xl-12 col-xs-12 col-md-12">
|
||||
<div className="row metrics">
|
||||
<div className="col-xl-9 col-xs-9 col-md-9">
|
||||
<span className="metric">Addresses</span>
|
||||
</div>
|
||||
<div className="col-xl-3 col-xs-3 col-md-3">
|
||||
<GoogleAddressComponent title={"Member Address"} buttonValue={"+Address"} onSelectAddress={props.onAddressAdded} showType={true} />
|
||||
</div>
|
||||
</div>
|
||||
{list}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
};
|
||||
|
||||
const Main = (props) => {
|
||||
return (
|
||||
<div className="row">
|
||||
<div className="col-xl-12">
|
||||
<Header user={props.user} />
|
||||
</div>
|
||||
<div className="col-xl-6">
|
||||
<Address addresses={props.user.addresses} onAddressAdded={props.onAddressAdded} onAddressRemoved={props.onAddressRemoved} />
|
||||
</div>
|
||||
<div className="col-xl-12">
|
||||
<DatatableComponent rides={props.rides} />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
};
|
||||
|
||||
class DatatableComponent extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.props = props;
|
||||
this.state = {
|
||||
items: [],
|
||||
data: [],
|
||||
dataTable: null,
|
||||
rides: [],
|
||||
}
|
||||
|
||||
this.getDatatable = this.getDatatable.bind(this);
|
||||
}
|
||||
|
||||
|
||||
componentWillReceiveProps(nextProps) {
|
||||
const rides = nextProps.rides;
|
||||
const state = this;
|
||||
if (state.state.rides.length === 0) {
|
||||
|
||||
let list = rides.map(v => {
|
||||
var data = {
|
||||
id: v.ride_uuid,
|
||||
user_id: v.user.useruuid,
|
||||
memberName: v.user.name,
|
||||
time: '',
|
||||
pickup: '',
|
||||
destination: '',
|
||||
status: v.status.value,
|
||||
eta: 0,
|
||||
duration: 0,
|
||||
mileage: '0 miles',
|
||||
vehicle: v.vehicle.color + ' ' + v.vehicle.make + ' ' + v.vehicle.model,
|
||||
plate: v.vehicle.license_plate,
|
||||
mobile: v.driver.phone_number,
|
||||
lyftID: v.internal_id,
|
||||
rideID: v.ride_uuid
|
||||
};
|
||||
|
||||
if (!data.mobile) data.mobile = '';
|
||||
|
||||
if (v.visit_date) data.time = new Date(v.visit_time);
|
||||
|
||||
if (v.route.origin.name && v.route.origin.name !== '') data.pickup = v.route.origin.name;
|
||||
else data.pickup = v.route.origin.address;
|
||||
|
||||
if (v.route.destination.name && v.route.destination.name !== '') data.destination = v.route.destination.name;
|
||||
else data.destination = v.route.destination.address;
|
||||
|
||||
if (v.route.distance) data.mileage = v.route.distance + ' miles';
|
||||
if (v.route.duration) data.duration = formatTime(v.route.duration);
|
||||
if (v.route.eta) data.eta = formatTime(v.route.eta);
|
||||
|
||||
return data;
|
||||
})
|
||||
|
||||
$.fn.dataTable.moment = function (format, locale) {
|
||||
var types = $.fn.dataTable.ext.type;
|
||||
|
||||
// Add type detection
|
||||
types.detect.unshift(function (d) {
|
||||
return moment(d, format, locale, true).isValid() ?
|
||||
'moment-' + format :
|
||||
null;
|
||||
});
|
||||
|
||||
// Add sorting method - use an integer for the sorting
|
||||
types.order['moment-' + format + '-pre'] = function (d) {
|
||||
return moment(d, format, locale, true).unix();
|
||||
};
|
||||
};
|
||||
|
||||
$.fn.dataTable.moment('MM/DD/YYYY h:mm a');
|
||||
|
||||
state.setState(Object.assign(state.state, { rides: list }));
|
||||
if (state.state.rides.length > 0) {
|
||||
this.getDatatable();
|
||||
$(ReactDOM.findDOMNode(state.example))
|
||||
.addClass('nowrap')
|
||||
.dataTable({
|
||||
responsive: true,
|
||||
data: state.state.rides,
|
||||
columns: [
|
||||
{
|
||||
data: "time",
|
||||
fnCreatedCell: function (nTd, sData, oData, iRow, iCol) {
|
||||
$(nTd).html("<a href='/#/app/page/map/" + oData.id + "'>" + moment(oData.time).format('MM/DD/YYYY h:mm a') + "</a>");
|
||||
}
|
||||
},
|
||||
{ data: "status" },
|
||||
{
|
||||
data: "pickup",
|
||||
fnCreatedCell: function (nTd, sData, oData, iRow, iCol) {
|
||||
$(nTd).html("<a href='/#/app/page/map/" + oData.id + "'>" + oData.pickup + "</a>");
|
||||
}
|
||||
},
|
||||
{
|
||||
data: "destination",
|
||||
fnCreatedCell: function (nTd, sData, oData, iRow, iCol) {
|
||||
$(nTd).html("<a href='/#/app/page/map/" + oData.id + "'>" + oData.destination + "</a>");
|
||||
},
|
||||
render: function (data, type, row) {
|
||||
return "<a href='/#/app/page/map/" + row.id + "'>" + row.destination + "</a>";
|
||||
}
|
||||
},
|
||||
|
||||
{ data: "eta" },
|
||||
{ data: "duration" },
|
||||
{ data: "mileage" },
|
||||
{ data: "vehicle" },
|
||||
{ data: "plate" },
|
||||
{ data: "mobile" },
|
||||
{
|
||||
data: "lyftID",
|
||||
fnCreatedCell: function (nTd, sData, oData, iRow, iCol) {
|
||||
$(nTd).html("<a href='/#/app/page/map/" + oData.id + "'>" + oData.lyftID + "</a>");
|
||||
},
|
||||
render: function (data, type, row) {
|
||||
return "<a href='/#/app/page/map/" + row.id + "'>" + row.lyftID + "</a>";
|
||||
}
|
||||
},
|
||||
{
|
||||
data: "rideID",
|
||||
fnCreatedCell: function (nTd, sData, oData, iRow, iCol) {
|
||||
$(nTd).html("<a href='/#/app/page/map/" + oData.id + "'>" + oData.rideID + "</a>");
|
||||
},
|
||||
render: function (data, type, row) {
|
||||
return "<a href='/#/app/page/map/" + row.id + "'>" + row.rideID + "</a>";
|
||||
}
|
||||
}
|
||||
],
|
||||
dom: 'Bfrtip',
|
||||
buttons: [
|
||||
'copy', 'pdf'
|
||||
],
|
||||
// columns: TABLE_COLUMNS_SORT_STYLE,
|
||||
responsive: true,
|
||||
"bStateSave": true,
|
||||
details: {
|
||||
type: 'inline'
|
||||
},
|
||||
columnDefs: [
|
||||
{ targets: [-1, -3], orderable: true, className: 'dt-body-right mdl-data-table__cell--non-numeric' }
|
||||
],
|
||||
order: [[0, 'desc']]
|
||||
});
|
||||
|
||||
this.decorateButtons();
|
||||
this.decorateSelect();
|
||||
this.decorateSearchBar();
|
||||
this.decorateColumns();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
const rides = this.props.rides;
|
||||
const state = this;
|
||||
|
||||
if (rides.length > 0) {
|
||||
this.getDatatable();
|
||||
let list = rides.map(v => {
|
||||
var data = {
|
||||
id: v.ride_uuid,
|
||||
user_id: v.user.useruuid,
|
||||
memberName: v.passenger.first_name + ' ' + v.passenger.last_name,
|
||||
time: '',
|
||||
pickup: '',
|
||||
destination: '',
|
||||
status: v.status.value,
|
||||
eta: 0,
|
||||
duration: 0,
|
||||
mileage: '0 miles',
|
||||
vehicle: v.vehicle.color + ' ' + v.vehicle.make + ' ' + v.vehicle.model,
|
||||
plate: v.vehicle.license_plate,
|
||||
mobile: v.driver.phone_number,
|
||||
lyftID: v.internal_id,
|
||||
rideID: v.ride_uuid
|
||||
};
|
||||
|
||||
if (!data.mobile) data.mobile = '';
|
||||
|
||||
if (v.visit_date) data.time = new Date(v.visit_time);
|
||||
|
||||
if (v.route.origin.name && v.route.origin.name !== '') data.pickup = v.route.origin.name;
|
||||
else data.pickup = v.route.origin.address;
|
||||
|
||||
if (v.route.destination.name && v.route.destination.name !== '') data.destination = v.route.destination.name;
|
||||
else data.destination = v.route.destination.address;
|
||||
|
||||
if (v.route.distance) data.mileage = v.route.distance + ' miles';
|
||||
if (v.route.duration) data.duration = formatTime(v.route.duration);
|
||||
if (v.route.eta) data.eta = formatTime(v.route.eta);
|
||||
|
||||
return data;
|
||||
})
|
||||
|
||||
$.fn.dataTable.moment = function (format, locale) {
|
||||
var types = $.fn.dataTable.ext.type;
|
||||
|
||||
// Add type detection
|
||||
types.detect.unshift(function (d) {
|
||||
return moment(d, format, locale, true).isValid() ?
|
||||
'moment-' + format :
|
||||
null;
|
||||
});
|
||||
|
||||
// Add sorting method - use an integer for the sorting
|
||||
types.order['moment-' + format + '-pre'] = function (d) {
|
||||
return moment(d, format, locale, true).unix();
|
||||
};
|
||||
};
|
||||
|
||||
$.fn.dataTable.moment('MM/DD/YYYY h:mm a');
|
||||
|
||||
state.setState(Object.assign(state.state, { rides: list }));
|
||||
|
||||
$(ReactDOM.findDOMNode(state.example))
|
||||
.addClass('nowrap')
|
||||
.dataTable({
|
||||
responsive: true,
|
||||
data: state.state.rides,
|
||||
columns: [
|
||||
{
|
||||
data: "time",
|
||||
fnCreatedCell: function (nTd, sData, oData, iRow, iCol) {
|
||||
$(nTd).html("<a href='/#/app/page/map/" + oData.id + "'>" + moment(oData.time).format('MM/DD/YYYY h:mm a') + "</a>");
|
||||
}
|
||||
},
|
||||
{ data: "status" },
|
||||
{
|
||||
data: "pickup",
|
||||
fnCreatedCell: function (nTd, sData, oData, iRow, iCol) {
|
||||
$(nTd).html("<a href='/#/app/page/map/" + oData.id + "'>" + oData.pickup + "</a>");
|
||||
}
|
||||
},
|
||||
{
|
||||
data: "destination",
|
||||
fnCreatedCell: function (nTd, sData, oData, iRow, iCol) {
|
||||
$(nTd).html("<a href='/#/app/page/map/" + oData.id + "'>" + oData.destination + "</a>");
|
||||
},
|
||||
render: function (data, type, row) {
|
||||
return "<a href='/#/app/page/map/" + row.id + "'>" + row.destination + "</a>";
|
||||
}
|
||||
},
|
||||
|
||||
{ data: "eta" },
|
||||
{ data: "duration" },
|
||||
{ data: "mileage" },
|
||||
{ data: "vehicle" },
|
||||
{ data: "plate" },
|
||||
{ data: "mobile" },
|
||||
{
|
||||
data: "lyftID",
|
||||
fnCreatedCell: function (nTd, sData, oData, iRow, iCol) {
|
||||
$(nTd).html("<a href='/#/app/page/map/" + oData.id + "'>" + oData.lyftID + "</a>");
|
||||
},
|
||||
render: function (data, type, row) {
|
||||
return "<a href='/#/app/page/map/" + row.id + "'>" + row.lyftID + "</a>";
|
||||
}
|
||||
},
|
||||
{
|
||||
data: "rideID",
|
||||
fnCreatedCell: function (nTd, sData, oData, iRow, iCol) {
|
||||
$(nTd).html("<a href='/#/app/page/map/" + oData.id + "'>" + oData.rideID + "</a>");
|
||||
},
|
||||
render: function (data, type, row) {
|
||||
return "<a href='/#/app/page/map/" + row.id + "'>" + row.rideID + "</a>";
|
||||
}
|
||||
}
|
||||
],
|
||||
dom: 'Bfrtip',
|
||||
buttons: [
|
||||
'copy', 'pdf'
|
||||
],
|
||||
// columns: TABLE_COLUMNS_SORT_STYLE,
|
||||
responsive: true,
|
||||
"bStateSave": true,
|
||||
details: {
|
||||
type: 'inline'
|
||||
},
|
||||
columnDefs: [
|
||||
{ targets: [-1, -3], orderable: true, className: 'dt-body-right mdl-data-table__cell--non-numeric' }
|
||||
],
|
||||
order: [[0, 'desc']]
|
||||
});
|
||||
|
||||
this.decorateButtons();
|
||||
this.decorateSelect();
|
||||
this.decorateSearchBar();
|
||||
this.decorateColumns();
|
||||
}
|
||||
}
|
||||
|
||||
getDatatable() {
|
||||
let dataTable = (
|
||||
<Table ref={(c) => this.example = c} className='display' cellSpacing='0' width='100%'>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Pickp Time</th>
|
||||
<th>Status</th>
|
||||
<th>Origin</th>
|
||||
<th>Destination</th>
|
||||
<th>ETA</th>
|
||||
<th>Duration</th>
|
||||
<th>Mileage</th>
|
||||
<th>Vehicle</th>
|
||||
<th>Plate</th>
|
||||
<th>Driver Phone</th>
|
||||
<th>Lyft ID</th>
|
||||
<th>Ride ID</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</Table>)
|
||||
this.setState(Object.assign(this.state, { dataTable: null }));
|
||||
this.setState(Object.assign(this.state, { dataTable: dataTable }));
|
||||
}
|
||||
|
||||
decorateColumns() {
|
||||
let cols = $('td');
|
||||
let colStyle = {
|
||||
'font-family': 'Roboto, sans-serif',
|
||||
'font-size': '13px',
|
||||
'font-weight': '300',
|
||||
'text-align': 'left',
|
||||
};
|
||||
cols.css(colStyle);
|
||||
cols.removeClass('sorting_1');
|
||||
|
||||
let headers = $('th');
|
||||
let headerStyle = {
|
||||
'color': 'rgb(158, 158, 158)',
|
||||
'text-align': 'left',
|
||||
'font-weight': '600',
|
||||
'font-size': '12px'
|
||||
};
|
||||
headers.css(headerStyle);
|
||||
|
||||
let oddRows = $('.odd');
|
||||
let evenRows = $('.even');
|
||||
|
||||
let oddStyle = {
|
||||
'background': 'rgba(127, 221, 233, 0.4)',
|
||||
'text-shadow': 'none',
|
||||
'border-bottom': '1px solid rgb(224, 224, 224)',
|
||||
'color': 'rgba(0, 0, 0, 0.87)',
|
||||
'height': '45px'
|
||||
};
|
||||
oddRows.css(oddStyle);
|
||||
|
||||
let evenStyle = oddStyle;
|
||||
evenStyle['background'] = '#fff';
|
||||
|
||||
evenRows.css(evenStyle);
|
||||
}
|
||||
|
||||
decorateSelect() {
|
||||
let instance = this;
|
||||
let selectElement = $('select[class]');
|
||||
selectElement.addClass('mdl');
|
||||
|
||||
selectElement.click(function () {
|
||||
instance.decorateButtons();
|
||||
});
|
||||
|
||||
let selectLabel = $('#DataTables_Table_0_length > label');
|
||||
let style = {
|
||||
'color': 'rgb(158, 158, 158)',
|
||||
'text-align': 'left',
|
||||
'font-weight': '500',
|
||||
'font-size': '11px'
|
||||
};
|
||||
selectLabel.css(style);
|
||||
}
|
||||
|
||||
decorateSearchBar() {
|
||||
let instance = this;
|
||||
|
||||
let searchbar = $('input[type="search"]');
|
||||
searchbar.bind('input', function () {
|
||||
instance.decorateButtons();
|
||||
instance.decorateColumns();
|
||||
});
|
||||
|
||||
searchbar.addClass('mdl-textfield__input');
|
||||
searchbar.attr('placeholder', '');
|
||||
|
||||
let searchLabel = $('#DataTables_Table_0_filter > label');
|
||||
searchLabel.css({ 'color': '#fff' });
|
||||
searchbar.css({ 'color': 'rgb(158, 158, 158)' })
|
||||
|
||||
let searchFilter = $('#DataTables_Table_0_filter');
|
||||
searchFilter.append('<svg viewBox="0 0 24 24" style="display: inline-block; color: rgba(0, 0, 0, 0.87); fill: currentcolor; height: 24px; width: 24px; user-select: none; transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; margin-top: 12px;"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path></svg>');
|
||||
}
|
||||
|
||||
decorateButtons() {
|
||||
let instance = this;
|
||||
let paginateButtons = $('a.paginate_button');
|
||||
paginateButtons.addClass('mdl-button');
|
||||
|
||||
let selectedButton = $('a.paginate_button.current');
|
||||
selectedButton.addClass('mdl-button mdl-button--raised mdl-button--colored');
|
||||
|
||||
let style = {
|
||||
'background': 'rgb(0, 188, 212)',
|
||||
'font-weight': '400',
|
||||
};
|
||||
selectedButton.css(style);
|
||||
|
||||
paginateButtons.click(function () {
|
||||
instance.decorateButtons();
|
||||
instance.decorateColumns();
|
||||
});
|
||||
|
||||
let sortingButtons = $('th.sorting, th.sorting_asc, th.sorting_desc');
|
||||
sortingButtons.click(function () {
|
||||
instance.decorateButtons();
|
||||
instance.decorateColumns();
|
||||
});
|
||||
|
||||
let entriesLabel = $('#DataTables_Table_0_info');
|
||||
entriesLabel.css({
|
||||
'color': 'rgb(158, 158, 158)',
|
||||
'text-align': 'left',
|
||||
'font-weight': '400',
|
||||
'font-size': '12px'
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="box box-default">
|
||||
<div className="box-body">
|
||||
<div className="row">
|
||||
|
||||
<div className="col-xl-12 col-xs-12 col-md-12">
|
||||
<h2 className="article-title">Rides for this Member</h2>
|
||||
<Table ref={(c) => this.example = c} className='display' cellSpacing='0' width='100%'>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Pickp Time</th>
|
||||
<th>Status</th>
|
||||
<th>Origin</th>
|
||||
<th>Destination</th>
|
||||
<th>ETA</th>
|
||||
<th>Duration</th>
|
||||
<th>Mileage</th>
|
||||
<th>Vehicle</th>
|
||||
<th>Plate</th>
|
||||
<th>Driver Phone</th>
|
||||
<th>Lyft ID</th>
|
||||
<th>Ride ID</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</Table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const Rides = (props) => {
|
||||
let rides = [];
|
||||
let list = [];
|
||||
|
||||
if (props.user.rides && props.user.rides !== null && props.user.rides.length > 0) {
|
||||
rides = props.user.rides;
|
||||
rides.forEach(c => {
|
||||
let visit_time = ""
|
||||
if (c.visit_time) visit_time = moment(new Date(c.visit_time)).format('MM/DD/YYYY h:mm a');
|
||||
list.push(
|
||||
<div className="box" key={c.ride_uuid}>
|
||||
<div className="box-body">
|
||||
<div className="row">
|
||||
<div className="col-xl-6 col-xs-6 col-md-6">
|
||||
<span><strong>Pickup:</strong><br /><a href={"/#/app/page/map/" + c.ride_uuid}>{c.route.origin.name}</a></span>
|
||||
</div>
|
||||
<div className="col-xl-6 col-xs-6 col-md-6">
|
||||
<span><strong><a href={"/#/app/page/map/" + c.ride_uuid}>Details...</a></strong></span>
|
||||
</div>
|
||||
<div className="col-xl-12 col-xs-12 col-md-12">
|
||||
<span><strong>Destination:</strong><br /><a href={"/#/app/page/map/" + c.ride_uuid}>{c.route.destination.name}</a></span>
|
||||
</div>
|
||||
<div className="col-xl-6 col-xs-6 col-md-6">
|
||||
<span><strong>Date:</strong><br />{visit_time}</span>
|
||||
</div>
|
||||
<div className="col-xl-6 col-xs-6 col-md-6">
|
||||
<span><strong>Status:</strong><br />{c.status.value}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>);
|
||||
}, this);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="box box-default">
|
||||
<div className="box-body">
|
||||
<div className="row">
|
||||
<div className="col-xl-12 col-xs-12 col-md-12">
|
||||
<div className="box box-transparent">
|
||||
<div className="box-body">
|
||||
<div className="row metrics">
|
||||
<div className="col-xl-12 col-xs-12 col-md-12">
|
||||
<span className="metric">Rides</span>
|
||||
</div>
|
||||
</div>
|
||||
{list}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
};
|
||||
|
||||
const ContactInfo = (props) => {
|
||||
let contact = [];
|
||||
let list = [];
|
||||
if (props.user.contacts && props.user.contacts !== null && props.user.contacts.length > 0) {
|
||||
contact = props.user.contacts;
|
||||
contact.forEach(c => {
|
||||
let contact = c.contact
|
||||
if (c.type.key === 'phone') {
|
||||
contact = contact.replace('+1', '');
|
||||
contact = formatPhoneNumber(contact);
|
||||
}
|
||||
|
||||
list.push(<div className="row metrics" key={c.type.key + c.contact}>
|
||||
<div className="col-xl-6 col-xs-6 col-md-6">
|
||||
<span className="metric-info">{c.type.value}:</span>
|
||||
</div>
|
||||
<div className="col-xl-6 col-xs-6 col-md-6">
|
||||
<span className="metric-info">{contact}</span>
|
||||
</div>
|
||||
</div>);
|
||||
}, this);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="box box-default">
|
||||
<div className="box-body">
|
||||
<div className="row">
|
||||
<div className="col-xl-12 col-xs-12 col-md-12">
|
||||
<div className="box box-transparent">
|
||||
<div className="box-body">
|
||||
<div className="row metrics">
|
||||
<div className="col-xl-12 col-xs-12 col-md-12">
|
||||
<span className="metric">Contact Info</span>
|
||||
</div>
|
||||
</div>
|
||||
{list}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
};
|
||||
|
||||
const Header = (props) => {
|
||||
let gender = "Other";
|
||||
if (props.user.gender === "M") gender = "Male";
|
||||
if (props.user.gender === "F") gender = "Female";
|
||||
|
||||
let birthdate = "";
|
||||
if (props.user.birthdate) birthdate = moment(new Date(props.user.birthdate)).format('MM/DD/YYYY');
|
||||
|
||||
let phonenumber = "";
|
||||
if (props.user.phonenumber && props.user.phonenumber !== null && props.user.phonenumber !== "") {
|
||||
phonenumber = props.user.phonenumber
|
||||
phonenumber = phonenumber.replace('+1', '');
|
||||
phonenumber = formatPhoneNumber(phonenumber);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="box box-default">
|
||||
<div className="box-body">
|
||||
<RaisedButton href={"#/app/form/steppers/" + props.user.useruuid} label="Ride" labelPosition="after" primary icon={<ContentAdd />} />
|
||||
<h2 className="article-title">Member Details </h2>
|
||||
|
||||
<div className="row">
|
||||
<div className="col-xl-12">
|
||||
|
||||
<div className="row metrics">
|
||||
<div className="col-md-2">
|
||||
<span className="metric-info">Full Name</span>
|
||||
<span className="metric">{props.user.name}</span>
|
||||
</div>
|
||||
<div className="col-md-2">
|
||||
<span className="metric-info">Subscriber ID</span>
|
||||
<span className="metric">{props.user.member}</span>
|
||||
</div>
|
||||
<div className="col-md-2">
|
||||
<span className="metric-info">Gender</span>
|
||||
<span className="metric">{gender}</span>
|
||||
</div>
|
||||
|
||||
<div className="col-md-2">
|
||||
<span className="metric-info">Birth Date</span>
|
||||
<span className="metric">{birthdate}</span>
|
||||
</div>
|
||||
|
||||
<div className="col-md-2">
|
||||
<span className="metric-info">Mobile</span>
|
||||
<span className="metric">{phonenumber}</span>
|
||||
</div>
|
||||
<div className="col-xl-2">
|
||||
<span className="metric-info">Email</span>
|
||||
<span className="metric">{props.user.email}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
};
|
||||
|
||||
class Member extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.props = props;
|
||||
|
||||
this.getMember = this.getMember.bind(this);
|
||||
this.handleAddressAdded = this.handleAddressAdded.bind(this);
|
||||
this.handleAddressRemoved = this.handleAddressRemoved.bind(this);
|
||||
}
|
||||
|
||||
state = {
|
||||
user: {
|
||||
"useruuid": "",
|
||||
"name": "",
|
||||
"gender": "",
|
||||
"member": "",
|
||||
"birthdate": "",
|
||||
"email": "",
|
||||
"phonenumber": "",
|
||||
"profile": "",
|
||||
"contacts": [],
|
||||
"rides": [],
|
||||
"addresses": [],
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
const useruuid = this.props.params.user_uuid;
|
||||
this.getMember(useruuid);
|
||||
}
|
||||
|
||||
getMember(useruuid) {
|
||||
Instance.getRawConn().get(`/v1/nemt/users/member/${useruuid}`)
|
||||
.then(res => {
|
||||
if (res.data.rides && res.data.rides.length > 0) {
|
||||
res.data.rides = res.data.rides.map(ride => {
|
||||
if (!ride.driver.first_name) {
|
||||
ride.driver = {
|
||||
image_url: '',
|
||||
rating: '',
|
||||
first_name: '',
|
||||
phone_number: ''
|
||||
}
|
||||
}
|
||||
|
||||
if (!ride.vehicle.plate) {
|
||||
ride.vehicle = {
|
||||
color: '',
|
||||
image_url: '',
|
||||
license_plate: '',
|
||||
license_plate_state: '',
|
||||
make: '',
|
||||
model: '',
|
||||
year: 0
|
||||
}
|
||||
}
|
||||
|
||||
return ride;
|
||||
})
|
||||
} else {
|
||||
res.data.rides = [];
|
||||
}
|
||||
this.setState(Object.assign(this.state, { user: res.data }));
|
||||
})
|
||||
.catch(console.error);
|
||||
}
|
||||
|
||||
handleAddressAdded(address) {
|
||||
const user_uuid = this.props.params.user_uuid;
|
||||
const self = this;
|
||||
|
||||
const addressObj = {
|
||||
"id": address.id,
|
||||
"name": address.name,
|
||||
"address": address.address,
|
||||
"address_type": address.address_type,
|
||||
"lat": address.lat,
|
||||
"lng": address.lng,
|
||||
"type": address.type,
|
||||
"address": address.text,
|
||||
}
|
||||
|
||||
Instance.getRawConn().post(`/v1/nemt/users/member/${user_uuid}/address`, addressObj)
|
||||
.then(res => {
|
||||
this.getMember(user_uuid);
|
||||
})
|
||||
.catch(console.error);
|
||||
}
|
||||
|
||||
handleAddressRemoved(address) {
|
||||
const user_uuid = this.props.params.user_uuid;
|
||||
const self = this;
|
||||
|
||||
Instance.getRawConn().put(`/v1/nemt/users/member/${user_uuid}/address/${address.address_uuid}`).then(res => {
|
||||
this.getMember(user_uuid);
|
||||
}).catch(console.error);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="container-fluid no-breadcrumbs page-dashboard">
|
||||
<QueueAnim type="bottom" className="ui-animate">
|
||||
<Main user={this.state.user} rides={this.state.user.rides}
|
||||
onAddressAdded={this.handleAddressAdded} onAddressRemoved={this.handleAddressRemoved} />
|
||||
</QueueAnim>
|
||||
</div>)
|
||||
}
|
||||
}
|
||||
module.exports = Member;
|
||||
8
src/routes/app/routes/member/index.js
Normal file
8
src/routes/app/routes/member/index.js
Normal file
@@ -0,0 +1,8 @@
|
||||
module.exports = {
|
||||
path: 'member/:user_uuid',
|
||||
getComponent(nextState, cb) {
|
||||
require.ensure([], (require) => {
|
||||
cb(null, require('./components/member'));
|
||||
});
|
||||
}
|
||||
};
|
||||
234
src/routes/app/routes/membercard/components/member.js
Normal file
234
src/routes/app/routes/membercard/components/member.js
Normal file
@@ -0,0 +1,234 @@
|
||||
import React from 'react';
|
||||
import QueueAnim from 'rc-queue-anim';
|
||||
import Instance from './connection';
|
||||
const dateformat = require('dateformat');
|
||||
|
||||
const formatPhoneNumber = function (s) {
|
||||
var s2 = ("" + s).replace(/\D/g, '');
|
||||
var m = s2.match(/^(\d{3})(\d{3})(\d{4})$/);
|
||||
return (!m) ? null : "(" + m[1] + ") " + m[2] + "-" + m[3];
|
||||
}
|
||||
|
||||
const Main = (props) => {
|
||||
return (
|
||||
<div className="row">
|
||||
<div className="col-xl-12">
|
||||
<Header user={props.user} />
|
||||
</div>
|
||||
<div className="col-xl-6">
|
||||
<ContactInfo user={props.user} />
|
||||
</div>
|
||||
<div className="col-xl-6">
|
||||
<Rides user={props.user} />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
};
|
||||
|
||||
|
||||
const Rides = (props) => {
|
||||
let rides = [];
|
||||
let list = [];
|
||||
|
||||
if (props.user.rides && props.user.rides !== null && props.user.rides.length > 0) {
|
||||
rides = props.user.rides;
|
||||
rides.forEach(c => {
|
||||
let visit_time = ""
|
||||
if (c.visit_time) visit_time = dateformat(new Date(c.visit_time), "mm/dd/yyyy h:MM TT");
|
||||
list.push(
|
||||
<div className="box" key={c.ride_uuid}>
|
||||
<div className="box-body">
|
||||
<div className="row">
|
||||
<div className="col-xl-6 col-xs-6 col-md-6">
|
||||
<span><strong>Pickup:</strong><br /><a href={"/#/app/page/map/" + c.ride_uuid}>{c.route.origin.name}</a></span>
|
||||
</div>
|
||||
<div className="col-xl-6 col-xs-6 col-md-6">
|
||||
<span><strong><a href={"/#/app/page/map/" + c.ride_uuid}>Details...</a></strong></span>
|
||||
</div>
|
||||
<div className="col-xl-12 col-xs-12 col-md-12">
|
||||
<span><strong>Destination:</strong><br /><a href={"/#/app/page/map/" + c.ride_uuid}>{c.route.destination.name}</a></span>
|
||||
</div>
|
||||
<div className="col-xl-6 col-xs-6 col-md-6">
|
||||
<span><strong>Date:</strong><br />{visit_time}</span>
|
||||
</div>
|
||||
<div className="col-xl-6 col-xs-6 col-md-6">
|
||||
<span><strong>Status:</strong><br />{c.status.value}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>);
|
||||
}, this);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="box box-default">
|
||||
<div className="box-body">
|
||||
<div className="row">
|
||||
<div className="col-xl-12 col-xs-12 col-md-12">
|
||||
<div className="box box-transparent">
|
||||
<div className="box-body">
|
||||
<div className="row metrics">
|
||||
<div className="col-xl-12 col-xs-12 col-md-12">
|
||||
<span className="metric">Rides</span>
|
||||
</div>
|
||||
</div>
|
||||
{list}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
};
|
||||
|
||||
const ContactInfo = (props) => {
|
||||
let contact = [];
|
||||
let list = [];
|
||||
if (props.user.contacts && props.user.contacts !== null && props.user.contacts.length > 0) {
|
||||
contact = props.user.contacts;
|
||||
contact.forEach(c => {
|
||||
let contact = c.contact
|
||||
if (c.type.key === 'phone') {
|
||||
contact = contact.replace('+1', '');
|
||||
contact = formatPhoneNumber(contact);
|
||||
}
|
||||
|
||||
list.push(<div className="row metrics" key={c.type.key + c.contact}>
|
||||
<div className="col-xl-6 col-xs-6 col-md-6">
|
||||
<span className="metric-info">{c.type.value}:</span>
|
||||
</div>
|
||||
<div className="col-xl-6 col-xs-6 col-md-6">
|
||||
<span className="metric-info">{contact}</span>
|
||||
</div>
|
||||
</div>);
|
||||
}, this);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="box box-default">
|
||||
<div className="box-body">
|
||||
<div className="row">
|
||||
<div className="col-xl-12 col-xs-12 col-md-12">
|
||||
<div className="box box-transparent">
|
||||
<div className="box-body">
|
||||
<div className="row metrics">
|
||||
<div className="col-xl-12 col-xs-12 col-md-12">
|
||||
<span className="metric">Contact Info</span>
|
||||
</div>
|
||||
</div>
|
||||
{list}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
};
|
||||
|
||||
const Header = (props) => {
|
||||
let gender = "Other";
|
||||
if (props.user.gender === "M") gender = "Male";
|
||||
if (props.user.gender === "F") gender = "Female";
|
||||
|
||||
let birthdate = "";
|
||||
if (props.user.birthdate) birthdate = dateformat(new Date(props.user.birthdate), "mm/dd/yyyy");
|
||||
|
||||
let phonenumber = "";
|
||||
if (props.user.phonenumber && props.user.phonenumber !== null && props.user.phonenumber !== "") {
|
||||
phonenumber = props.user.phonenumber
|
||||
phonenumber = phonenumber.replace('+1', '');
|
||||
phonenumber = formatPhoneNumber(phonenumber);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="box box-default">
|
||||
<div className="box-body">
|
||||
<div className="row">
|
||||
<div className="col-xl-12 col-xs-12 col-md-12">
|
||||
<div className="box box-transparent">
|
||||
<div className="box-body">
|
||||
<div className="row metrics">
|
||||
<div className="col-xl-4 col-xs-4 col-md-4">
|
||||
<span className="metric-info">Member</span>
|
||||
<span className="metric">{props.user.member}</span>
|
||||
</div>
|
||||
<div className="col-xl-4 col-xs-4 col-md-4">
|
||||
<span className="metric-info">Name</span>
|
||||
<span className="metric">{props.user.name}</span>
|
||||
</div>
|
||||
<div className="col-xl-4 col-xs-4 col-md-4">
|
||||
<span className="metric-info">Gender</span>
|
||||
<span className="metric">{gender}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row metrics">
|
||||
<div className="col-xl-4 col-xs-4 col-md-4">
|
||||
<span className="metric-info">Birth Date</span>
|
||||
<span className="metric">{birthdate}</span>
|
||||
</div>
|
||||
<div className="col-xl-4 col-xs-4 col-md-4">
|
||||
<span className="metric-info">Email</span>
|
||||
<span className="metric">{props.user.email}</span>
|
||||
</div>
|
||||
<div className="col-xl-4 col-xs-4 col-md-4">
|
||||
<span className="metric-info">Phone Number</span>
|
||||
<span className="metric">{phonenumber}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
};
|
||||
|
||||
class Member extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.props = props;
|
||||
}
|
||||
|
||||
state = {
|
||||
user: {
|
||||
"useruuid": "",
|
||||
"name": "",
|
||||
"gender": "",
|
||||
"member": "",
|
||||
"birthdate": "",
|
||||
"email": "",
|
||||
"phonenumber": "",
|
||||
"profile": "",
|
||||
"contacts": [],
|
||||
"rides": [],
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
const useruuid = this.props.params.user_uuid;
|
||||
Instance.get(`/v1/nemt/users/member/${useruuid}`)
|
||||
.then(res => {
|
||||
this.setState(Object.assign(this.state, { user: res.data }));
|
||||
})
|
||||
.catch(err => {
|
||||
if (err.response.status === 422) {
|
||||
location.href = '/#/app/table/members';
|
||||
} else {
|
||||
console.error(err);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="container-fluid no-breadcrumbs page-dashboard">
|
||||
<QueueAnim type="bottom" className="ui-animate">
|
||||
<Main user={this.state.user} />
|
||||
</QueueAnim>
|
||||
</div>)
|
||||
}
|
||||
}
|
||||
module.exports = Member;
|
||||
8
src/routes/app/routes/membercard/index.js
Normal file
8
src/routes/app/routes/membercard/index.js
Normal file
@@ -0,0 +1,8 @@
|
||||
module.exports = {
|
||||
path: 'membercard/:user_uuid',
|
||||
getComponent(nextState, cb) {
|
||||
require.ensure([], (require) => {
|
||||
cb(null, require('./components/member'));
|
||||
});
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,202 @@
|
||||
import React from 'react';
|
||||
import Dialog from 'material-ui/Dialog';
|
||||
import TextField from 'material-ui/TextField';
|
||||
import RaisedButton from 'material-ui/RaisedButton';
|
||||
import FlatButton from 'material-ui/FlatButton';
|
||||
import SelectField from 'material-ui/SelectField';
|
||||
import MenuItem from 'material-ui/MenuItem';
|
||||
import Instance from '../../../../../components/Connection';
|
||||
|
||||
export default class ContactComponent extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.props = props;
|
||||
this.state = {
|
||||
buttonValue: '',
|
||||
openDialog: false,
|
||||
title: '',
|
||||
modalStyle: {
|
||||
width: '100%',
|
||||
maxWidth: '600px',
|
||||
},
|
||||
divStyle: {
|
||||
textAlign: 'left',
|
||||
textTransform: 'none !important',
|
||||
padding: '0px 5px 0px 0px',
|
||||
marginTop: -5,
|
||||
boxShadow: 'none',
|
||||
color: 'rgba(0, 0, 0, 0.3)',
|
||||
},
|
||||
contactTypeList: [],
|
||||
selectedContact: {
|
||||
id: '',
|
||||
type: {
|
||||
key: '',
|
||||
value: '',
|
||||
},
|
||||
contact: '',
|
||||
name: '',
|
||||
desc: '',
|
||||
},
|
||||
showDescription: true,
|
||||
showName: true,
|
||||
};
|
||||
|
||||
this.handleOpen = this.handleOpen.bind(this);
|
||||
this.handleClose = this.handleClose.bind(this);
|
||||
this.setProps = this.setProps.bind(this);
|
||||
this.handleSave = this.handleSave.bind(this);
|
||||
this.handleName = this.handleName.bind(this);
|
||||
this.handleDesc = this.handleDesc.bind(this);
|
||||
this.handleType = this.handleType.bind(this);
|
||||
this.handleContact = this.handleContact.bind(this);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.setProps(this.props);
|
||||
|
||||
Instance.getRawConn().get('/v1/nemt/users/contacttype').then(res => {
|
||||
const list = res.data.map(c => {
|
||||
return (<MenuItem value={c} primaryText={c.value} />);
|
||||
});
|
||||
|
||||
this.setState(Object.assign(this.state, { contactTypeList: list }));
|
||||
}).catch(console.error);
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps) {
|
||||
this.setProps(nextProps);
|
||||
}
|
||||
|
||||
setProps(propsParam) {
|
||||
const setProps = {
|
||||
buttonValue: propsParam.buttonValue,
|
||||
title: propsParam.title,
|
||||
showDescription: true,
|
||||
showName: true,
|
||||
};
|
||||
|
||||
if (propsParam.showDescription !== undefined || propsParam.showDescription !== null) {
|
||||
setProps.showDescription = propsParam.showDescription;
|
||||
}
|
||||
|
||||
if (propsParam.showName !== undefined || propsParam.showName !== null) {
|
||||
setProps.showName = propsParam.showName;
|
||||
}
|
||||
|
||||
this.setState(Object.assign(this.state, setProps));
|
||||
}
|
||||
|
||||
handleOpen() {
|
||||
this.setState(Object.assign(this.state, {
|
||||
openDialog: true,
|
||||
selectedContact: {
|
||||
id: '',
|
||||
type: {
|
||||
key: '',
|
||||
value: '',
|
||||
},
|
||||
contact: '',
|
||||
name: '',
|
||||
desc: '',
|
||||
},
|
||||
}));
|
||||
}
|
||||
|
||||
handleClose() {
|
||||
this.setState(Object.assign(this.state, { openDialog: false }));
|
||||
}
|
||||
|
||||
handleSave() {
|
||||
this.setState(Object.assign(this.state, { openDialog: false }));
|
||||
if (this.props.onNewContact) {
|
||||
this.props.onNewContact(this.state.selectedContact);
|
||||
} else {
|
||||
console.log(this.state.selectedContact);
|
||||
}
|
||||
}
|
||||
|
||||
handleName(e) {
|
||||
const selectedContact = this.state.selectedContact;
|
||||
selectedContact.name = e.target.value;
|
||||
this.setState(Object.assign(this.state, { selectedContact: selectedContact }));
|
||||
}
|
||||
|
||||
handleContact(e) {
|
||||
const selectedContact = this.state.selectedContact;
|
||||
selectedContact.contact = e.target.value;
|
||||
this.setState(Object.assign(this.state, { selectedContact: selectedContact }));
|
||||
}
|
||||
|
||||
handleDesc(e) {
|
||||
const selectedContact = this.state.selectedContact;
|
||||
selectedContact.desc = e.target.value;
|
||||
this.setState(Object.assign(this.state, { selectedContact: selectedContact }));
|
||||
}
|
||||
|
||||
handleType(e, i, v) {
|
||||
const selectedContact = this.state.selectedContact;
|
||||
selectedContact.type = v;
|
||||
this.setState(Object.assign(this.state, { selectedContact: selectedContact }));
|
||||
}
|
||||
|
||||
render() {
|
||||
let actions = [
|
||||
<FlatButton
|
||||
label="Cancel"
|
||||
primary={false}
|
||||
onClick={this.handleClose}
|
||||
/>,
|
||||
<FlatButton
|
||||
label="Add Contact"
|
||||
primary={true}
|
||||
keyboardFocused={true}
|
||||
onClick={this.handleSave}
|
||||
/>,
|
||||
];
|
||||
|
||||
let nameField = (<TextField fullWidth={false} onChange={this.handleName} fullWidth={false} floatingLabelText={"Short label"} value={this.state.selectedContact.name} />);
|
||||
if (!this.state.showName) {
|
||||
nameField = null;
|
||||
}
|
||||
|
||||
let descField = (<TextField onChange={this.handleDesc} fullWidth={false} floatingLabelText={"Notes"} value={this.state.selectedContact.desc} multiLine={true} rows={2} />);
|
||||
if (!this.state.showDescription) {
|
||||
descField = null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={this.state.divStyle} >
|
||||
<RaisedButton
|
||||
label={this.state.buttonValue}
|
||||
onClick={this.handleOpen}
|
||||
secondary
|
||||
fullWidth={false}
|
||||
/>
|
||||
<Dialog
|
||||
contentStyle={this.state.modalStyle}
|
||||
title={this.state.title}
|
||||
actions={actions}
|
||||
modal={true}
|
||||
open={this.state.openDialog}
|
||||
onRequestClose={this.handleClose}
|
||||
autoScrollBodyContent={false}
|
||||
>
|
||||
<div className="" id="container">
|
||||
|
||||
<SelectField
|
||||
floatingLabelText="Contact type"
|
||||
value={this.state.selectedContact.type}
|
||||
onChange={this.handleType}
|
||||
fullWidth={false}
|
||||
>
|
||||
{this.state.contactTypeList}
|
||||
</SelectField>
|
||||
<TextField onChange={this.handleContact} fullWidth={false} floatingLabelText={"Phone or Email"} value={this.state.selectedContact.contact} />
|
||||
{nameField}
|
||||
{descField}
|
||||
</div>
|
||||
</Dialog>
|
||||
</div>);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,200 @@
|
||||
import React from 'react';
|
||||
import Dialog from 'material-ui/Dialog';
|
||||
import { List, ListItem } from 'material-ui/List';
|
||||
import TextField from 'material-ui/TextField';
|
||||
import RaisedButton from 'material-ui/RaisedButton';
|
||||
import FlatButton from 'material-ui/FlatButton';
|
||||
import SelectField from 'material-ui/SelectField';
|
||||
import MenuItem from 'material-ui/MenuItem';
|
||||
|
||||
const placeService = new google.maps.places.PlacesService(document.createElement('div'));
|
||||
|
||||
export default class GoogleAddressComponent extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.props = props;
|
||||
this.state = {
|
||||
buttonValue: '',
|
||||
openDialog: false,
|
||||
title: '',
|
||||
modalStyle: {
|
||||
width: '100%',
|
||||
maxWidth: '600px',
|
||||
},
|
||||
divStyle: {
|
||||
textAlign: 'left',
|
||||
textTransform: 'none !important',
|
||||
padding: '0px 5px 0px 0px',
|
||||
marginTop: -5,
|
||||
boxShadow: 'none',
|
||||
color: 'rgba(0, 0, 0, 0.3)',
|
||||
},
|
||||
location: {
|
||||
lat: 41.819078,
|
||||
long: -87.623129,
|
||||
},
|
||||
searchAddresses: [],
|
||||
selectedAddress: {
|
||||
id: '',
|
||||
address: '',
|
||||
lat: 0,
|
||||
lng: 0,
|
||||
name: '',
|
||||
text: '',
|
||||
},
|
||||
showType: false,
|
||||
addressType: '',
|
||||
};
|
||||
|
||||
this.handleOpen = this.handleOpen.bind(this);
|
||||
this.handleClose = this.handleClose.bind(this);
|
||||
this.setProps = this.setProps.bind(this);
|
||||
this.handleSave = this.handleSave.bind(this);
|
||||
this.handleSearch = this.handleSearch.bind(this);
|
||||
this.handleName = this.handleName.bind(this);
|
||||
this.handleAddress = this.handleAddress.bind(this);
|
||||
this.handleChangeType = this.handleChangeType.bind(this);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.setProps(this.props);
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps) {
|
||||
this.setProps(nextProps);
|
||||
}
|
||||
|
||||
setProps(propsParam) {
|
||||
this.setState(Object.assign(this.state, { buttonValue: propsParam.buttonValue, title: propsParam.title, showType: propsParam.showType }));
|
||||
}
|
||||
|
||||
handleChangeType = (event, key, payload) => {
|
||||
this.setState(Object.assign(this.state, { addressType: payload }));
|
||||
}
|
||||
|
||||
handleOpen() {
|
||||
this.setState(Object.assign(this.state, { openDialog: true }));
|
||||
}
|
||||
|
||||
handleClose() {
|
||||
this.setState(Object.assign(this.state, { openDialog: false }));
|
||||
}
|
||||
|
||||
handleSave() {
|
||||
this.setState(Object.assign(this.state, { openDialog: false }));
|
||||
let selectedAddress = this.state.selectedAddress;
|
||||
if (this.state.showType) {
|
||||
selectedAddress.address_type = this.state.addressType;
|
||||
}
|
||||
|
||||
if (this.props.onSelectAddress) {
|
||||
this.props.onSelectAddress(selectedAddress);
|
||||
}
|
||||
}
|
||||
|
||||
handleAddress(e, a) {
|
||||
this.setState(Object.assign(this.state, { selectedAddress: a }));
|
||||
}
|
||||
|
||||
handleName(e) {
|
||||
let selectedAddress = this.state.selectedAddress;
|
||||
selectedAddress.name = e.target.value;
|
||||
this.setState(Object.assign(this.state, { selectedAddress: selectedAddress }));
|
||||
}
|
||||
|
||||
handleSearch(e) {
|
||||
var location = new google.maps.LatLng(this.state.lat, this.state.long);
|
||||
var request = {
|
||||
location: location,
|
||||
radius: '500',
|
||||
query: e.target.value,
|
||||
};
|
||||
|
||||
let selectedAddress = this.state.selectedAddress;
|
||||
selectedAddress.text = e.target.value;
|
||||
this.setState(Object.assign(this.state, { selectedAddress: selectedAddress }));
|
||||
|
||||
const callback = (results, status) => {
|
||||
if (status == google.maps.places.PlacesServiceStatus.OK) {
|
||||
const googlePlaces = results.map(place => {
|
||||
const address = (place.formatted_address ? place.formatted_address : place.vicinity);
|
||||
place = Object.assign(place, { text: `${address}` });
|
||||
const clickResult = {
|
||||
id: place.id,
|
||||
address: place.formatted_address ? place.formatted_address : place.vicinity,
|
||||
lat: place.geometry.location.lat(),
|
||||
lng: place.geometry.location.lng(),
|
||||
name: place.name,
|
||||
text: place.text,
|
||||
type: 'google',
|
||||
};
|
||||
|
||||
return (<ListItem value={place.id} primaryText={place.name} secondaryText={clickResult.address} key={place.id} onClick={(e) => this.handleAddress(e, clickResult)} />);
|
||||
});
|
||||
this.setState(Object.assign(this.state, { searchAddresses: googlePlaces }));
|
||||
}
|
||||
}
|
||||
|
||||
placeService.textSearch(request, callback);
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
let actions = [
|
||||
<FlatButton
|
||||
label="Cancel"
|
||||
primary={false}
|
||||
onClick={this.handleClose}
|
||||
/>,
|
||||
<FlatButton
|
||||
label="Add Address"
|
||||
primary={true}
|
||||
fullWidth={false}
|
||||
keyboardFocused={true}
|
||||
onClick={this.handleSave}
|
||||
/>,
|
||||
];
|
||||
|
||||
let addressType = (
|
||||
<SelectField
|
||||
floatingLabelText="Address Type"
|
||||
value={this.state.addressType}
|
||||
onChange={this.handleChangeType}
|
||||
fullWidth={false}
|
||||
>
|
||||
<MenuItem value={"home"} primaryText={"Home"} />
|
||||
<MenuItem value={"work"} primaryText={"Work"} />
|
||||
<MenuItem value={"customplace"} primaryText={"Custom Address"} />
|
||||
</SelectField>
|
||||
)
|
||||
|
||||
return (
|
||||
<div style={this.state.divStyle} >
|
||||
<RaisedButton
|
||||
label={this.state.buttonValue}
|
||||
onClick={this.handleOpen}
|
||||
secondary
|
||||
fullWidth={false}
|
||||
/>
|
||||
<Dialog
|
||||
contentStyle={this.state.modalStyle}
|
||||
fullWidth={false}
|
||||
title={this.state.title}
|
||||
actions={actions}
|
||||
modal={true}
|
||||
open={this.state.openDialog}
|
||||
onRequestClose={this.handleClose}
|
||||
autoScrollBodyContent={true}
|
||||
>
|
||||
<div className="" id="container">
|
||||
{addressType}
|
||||
<TextField fullWidth={false} onChange={this.handleSearch} floatingLabelText={"Address, Intersection or Place"} value={this.state.selectedAddress.text} />
|
||||
<TextField fullWidth={false} onChange={this.handleName} floatingLabelText={"Short Label"} value={this.state.selectedAddress.name} />
|
||||
<List>
|
||||
{this.state.searchAddresses}
|
||||
</List>
|
||||
</div>
|
||||
</Dialog>
|
||||
</div>);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,148 @@
|
||||
import React from 'react';
|
||||
import Dialog from 'material-ui/Dialog';
|
||||
import { List, ListItem } from 'material-ui/List';
|
||||
import TextField from 'material-ui/TextField';
|
||||
import RaisedButton from 'material-ui/RaisedButton';
|
||||
import FlatButton from 'material-ui/FlatButton';
|
||||
import Instance from '../../../../../components/Connection';
|
||||
|
||||
export default class OrganizationComponent extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.props = props;
|
||||
this.state = {
|
||||
buttonValue: '',
|
||||
openDialog: false,
|
||||
title: '',
|
||||
modalStyle: {
|
||||
width: '100%',
|
||||
maxWidth: '600px',
|
||||
},
|
||||
divStyle: {
|
||||
textAlign: 'left',
|
||||
textTransform: 'none !important',
|
||||
padding: '0px 5px 0px 0px',
|
||||
marginTop: -5,
|
||||
boxShadow: 'none',
|
||||
color: 'rgba(0, 0, 0, 0.3)',
|
||||
},
|
||||
location: {
|
||||
lat: 41.819078,
|
||||
long: -87.623129,
|
||||
},
|
||||
searchValue: '',
|
||||
searchOrganizations: [],
|
||||
selectedOrganizations: [],
|
||||
searchingOrganizations: false,
|
||||
};
|
||||
|
||||
this.handleOpen = this.handleOpen.bind(this);
|
||||
this.handleClose = this.handleClose.bind(this);
|
||||
this.setProps = this.setProps.bind(this);
|
||||
this.handleSave = this.handleSave.bind(this);
|
||||
this.handleSearch = this.handleSearch.bind(this);
|
||||
this.handleOrganization = this.handleOrganization.bind(this);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.setProps(this.props);
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps) {
|
||||
this.setProps(nextProps);
|
||||
}
|
||||
|
||||
setProps(propsParam) {
|
||||
this.setState(Object.assign(this.state, { buttonValue: propsParam.buttonValue, title: propsParam.title }));
|
||||
}
|
||||
|
||||
handleOpen() {
|
||||
this.setState(Object.assign(this.state, { openDialog: true }));
|
||||
}
|
||||
|
||||
handleClose() {
|
||||
this.setState(Object.assign(this.state, { openDialog: false }));
|
||||
}
|
||||
|
||||
handleSave() {
|
||||
this.setState(Object.assign(this.state, { openDialog: false }));
|
||||
if (this.props.onSelectOrganization) {
|
||||
this.props.onSelectOrganization(this.state.selectedOrganizations);
|
||||
}
|
||||
}
|
||||
|
||||
handleOrganization(e, a) {
|
||||
let selectedOrganizations = this.state.selectedOrganizations;
|
||||
selectedOrganizations.push(a);
|
||||
this.setState(Object.assign(this.state, {
|
||||
selectedOrganizations: selectedOrganizations,
|
||||
searchValue: a.name,
|
||||
}));
|
||||
}
|
||||
|
||||
handleSearch(e) {
|
||||
this.setState(Object.assign(this.state, { searchValue: e.target.value }));
|
||||
if (e.target.value.length >= 3 && !this.state.searchingOrganizations) {
|
||||
this.setState(Object.assign(this.state, { searchingOrganizations: true }));
|
||||
let url = '/v1/nemt/organization/name?name=' + encodeURIComponent(e.target.value);
|
||||
if (this.props.searchType) {
|
||||
switch (this.props.searchType) {
|
||||
case 'parent':
|
||||
case 'child':
|
||||
url += '&type=' + encodeURIComponent(this.props.searchType);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
Instance.getRawConn().get(url).then(res => {
|
||||
const list = res.data.map(p => {
|
||||
return (<ListItem value={p.id} primaryText={p.name} secondaryText={p.type.name} key={p.id} onClick={(e) => this.handleOrganization(e, p)} />);
|
||||
});
|
||||
this.setState(Object.assign(this.state, { searchOrganizations: list, searchingOrganizations: false }));
|
||||
}).catch(console.error);
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
let actions = [
|
||||
<FlatButton
|
||||
label="Cancel"
|
||||
primary={true}
|
||||
onClick={this.handleClose}
|
||||
/>,
|
||||
<FlatButton
|
||||
label="Add Organization"
|
||||
primary={true}
|
||||
keyboardFocused={true}
|
||||
onClick={this.handleSave}
|
||||
/>,
|
||||
];
|
||||
|
||||
return (
|
||||
<div style={this.state.divStyle} >
|
||||
<RaisedButton
|
||||
label={this.state.buttonValue}
|
||||
onClick={this.handleOpen}
|
||||
secondary
|
||||
fullWidth={true}
|
||||
/>
|
||||
<Dialog
|
||||
contentStyle={this.state.modalStyle}
|
||||
title={this.state.title}
|
||||
actions={actions}
|
||||
modal={true}
|
||||
open={this.state.openDialog}
|
||||
onRequestClose={this.handleClose}
|
||||
autoScrollBodyContent={true}
|
||||
>
|
||||
<div className="" id="container">
|
||||
<TextField onChange={this.handleSearch} fullWidth={true} floatingLabelText={"Type the organization name"} value={this.state.searchValue} />
|
||||
<List>
|
||||
{this.state.searchOrganizations}
|
||||
</List>
|
||||
</div>
|
||||
</Dialog>
|
||||
</div>);
|
||||
}
|
||||
}
|
||||
629
src/routes/app/routes/organization/components/organization.js
Normal file
629
src/routes/app/routes/organization/components/organization.js
Normal file
@@ -0,0 +1,629 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import QueueAnim from 'rc-queue-anim';
|
||||
import Instance from '../../../../../components/Connection';
|
||||
import {
|
||||
Row,
|
||||
Col,
|
||||
Grid,
|
||||
Table,
|
||||
} from '@sketchpixy/rubix';
|
||||
import moment from 'moment';
|
||||
import Delete from 'material-ui/svg-icons/action/delete';
|
||||
import IconButton from 'material-ui/IconButton';
|
||||
|
||||
import GoogleAddressComponent from './GoogleAddressComponent';
|
||||
import ContactComponent from './ContactComponent';
|
||||
import OrganizationComponent from './OrganizationComponent';
|
||||
import ContactOption from '../../../components/ContactOption';
|
||||
|
||||
const formatTime = function (sec_num) {
|
||||
var hours = Math.floor(sec_num / 3600);
|
||||
var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
|
||||
var seconds = sec_num - (hours * 3600) - (minutes * 60);
|
||||
|
||||
if (hours < 10) { hours = "0" + hours; }
|
||||
if (minutes < 10) { minutes = "0" + minutes; }
|
||||
if (seconds < 10) { seconds = "0" + seconds; }
|
||||
return hours + ':' + minutes + ':' + seconds;
|
||||
}
|
||||
|
||||
const formatPhoneNumber = function (s) {
|
||||
var s2 = ("" + s).replace(/\D/g, '');
|
||||
var m = s2.match(/^(\d{3})(\d{3})(\d{4})$/);
|
||||
return (!m) ? null : "(" + m[1] + ") " + m[2] + "-" + m[3];
|
||||
}
|
||||
|
||||
const Main = (props) => {
|
||||
return (
|
||||
<div className="row">
|
||||
<div className="col-xl-12">
|
||||
<Header organization={props.organization} onParentSelected={props.onParentSelected} onChildSelected={props.onChildSelected} />
|
||||
</div>
|
||||
<div className="col-xl-12">
|
||||
<ParentInfo organization={props.organization} onParentClick={props.onParentClick} />
|
||||
</div>
|
||||
<div className="col-xl-12">
|
||||
<ChildInfo organization={props.organization} onChildClick={props.onChildClick} />
|
||||
</div>
|
||||
<div className="col-xl-6">
|
||||
<ContactInfo organization={props.organization} onContactAdded={props.onContactAdded} onContactRemoved={props.onContactRemoved} />
|
||||
</div>
|
||||
<div className="col-xl-6">
|
||||
<Address organization={props.organization} onAddressAdded={props.onAddressAdded} onAddressRemoved={props.onAddressRemoved} />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
};
|
||||
|
||||
const ChildInfo = (props) => {
|
||||
if (props.organization.childs === null || props.organization.childs === undefined || props.organization.childs.length === 0) {
|
||||
return null
|
||||
} else {
|
||||
const handleChild = (e, p) => {
|
||||
if (props.onChildClick) {
|
||||
props.onChildClick(p);
|
||||
} else {
|
||||
console.log(p);
|
||||
}
|
||||
}
|
||||
|
||||
let list = props.organization.childs.map(c => {
|
||||
let status = "Active";
|
||||
if (!c.active) {
|
||||
status = "Inactive";
|
||||
}
|
||||
if (c.blocked) {
|
||||
status = "Blocked";
|
||||
}
|
||||
if (c.suspended) {
|
||||
status = "Suspended"
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="row metrics" key={c.id}>
|
||||
<div className="col-xl-3 col-xs-3 col-md-3">
|
||||
<span className="metric"><a href={`/#/app/organization/${c.id}`} onTouchTap={(e) => handleChild(e, c)}>{c.name}</a></span>
|
||||
</div>
|
||||
<div className="col-xl-3 col-xs-3 col-md-3">
|
||||
<span className="metric"><a href={`/#/app/organization/${c.id}`} onTouchTap={(e) => handleChild(e, c)}>{c.type.name}</a></span>
|
||||
</div>
|
||||
<div className="col-xl-3 col-xs-3 col-md-3">
|
||||
<span className="metric"><a href={`/#/app/organization/${c.id}`} onTouchTap={(e) => handleChild(e, c)}>{status}</a></span>
|
||||
</div>
|
||||
<div className="col-xl-3 col-xs-3 col-md-3">
|
||||
<span className="metric"><a href={`/#/app/organization/${c.id}`} onTouchTap={(e) => handleChild(e, c)}>{moment(c.created).format('MM/DD/YYYY h:mm a')}</a></span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
|
||||
return (<div className="box box-default">
|
||||
<div className="box-body">
|
||||
<div className="row">
|
||||
<div className="col-xl-12 col-xs-12 col-md-12">
|
||||
<div className="box box-transparent">
|
||||
<div className="box-body">
|
||||
<div className="row metrics">
|
||||
<div className="col-xl-12 col-xs-12 col-md-12">
|
||||
<span className="metric">Child Organization</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row metrics">
|
||||
<div className="col-xl-3 col-xs-3 col-md-3">
|
||||
<span className="metric-info">Name</span>
|
||||
</div>
|
||||
<div className="col-xl-3 col-xs-3 col-md-3">
|
||||
<span className="metric-info">Type</span>
|
||||
</div>
|
||||
<div className="col-xl-3 col-xs-3 col-md-3">
|
||||
<span className="metric-info">Status</span>
|
||||
</div>
|
||||
<div className="col-xl-3 col-xs-3 col-md-3">
|
||||
<span className="metric-info">Created</span>
|
||||
</div>
|
||||
</div>
|
||||
{list}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>)
|
||||
}
|
||||
}
|
||||
|
||||
const ParentInfo = (props) => {
|
||||
if (props.organization.parent === null || props.organization.parent === undefined) {
|
||||
return null
|
||||
} else {
|
||||
const parent = props.organization.parent;
|
||||
let status = "Active";
|
||||
if (!parent.active) {
|
||||
status = "Inactive";
|
||||
}
|
||||
if (parent.blocked) {
|
||||
status = "Blocked";
|
||||
}
|
||||
if (parent.suspended) {
|
||||
status = "Suspended"
|
||||
}
|
||||
|
||||
const handleParent = (e, p) => {
|
||||
if (props.onParentClick) {
|
||||
props.onParentClick(p);
|
||||
} else {
|
||||
console.log(p);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="box box-default">
|
||||
<div className="box-body">
|
||||
<div className="row">
|
||||
<div className="col-xl-12 col-xs-12 col-md-12">
|
||||
<div className="box box-transparent">
|
||||
<div className="box-body">
|
||||
<div className="row metrics">
|
||||
<div className="col-xl-12 col-xs-12 col-md-12">
|
||||
<span className="metric">Parent Organization</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row metrics" key={parent.id}>
|
||||
<div className="col-xl-3 col-xs-3 col-md-3">
|
||||
<span className="metric-info">Name</span>
|
||||
<span className="metric"><a href={`/#/app/organization/${parent.id}`} onTouchTap={(e) => handleParent(e, parent)}>{parent.name}</a></span>
|
||||
</div>
|
||||
<div className="col-xl-3 col-xs-3 col-md-3">
|
||||
<span className="metric-info">Type</span>
|
||||
<span className="metric"><a href={`/#/app/organization/${parent.id}`} onTouchTap={(e) => handleParent(e, parent)}>{parent.type.name}</a></span>
|
||||
</div>
|
||||
<div className="col-xl-3 col-xs-3 col-md-3">
|
||||
<span className="metric-info">Status</span>
|
||||
<span className="metric"><a href={`/#/app/organization/${parent.id}`} onTouchTap={(e) => handleParent(e, parent)}>{status}</a></span>
|
||||
</div>
|
||||
<div className="col-xl-3 col-xs-3 col-md-3">
|
||||
<span className="metric-info">Created</span>
|
||||
<span className="metric"><a href={`/#/app/organization/${parent.id}`} onTouchTap={(e) => handleParent(e, parent)}>{moment(parent.created).format('MM/DD/YYYY h:mm a')}</a></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>)
|
||||
}
|
||||
}
|
||||
|
||||
const Address = (props) => {
|
||||
let list = [];
|
||||
let buttonStyle = {
|
||||
marginTop: -10
|
||||
}
|
||||
|
||||
if (props.organization.addresses && props.organization.addresses !== null && props.organization.addresses.length > 0) {
|
||||
const handleRemoveAddress = (a) => {
|
||||
if (props.onAddressRemoved) {
|
||||
props.onAddressRemoved(a);
|
||||
}
|
||||
}
|
||||
|
||||
list = props.organization.addresses.map(c => {
|
||||
return (<div className="row metrics" key={c.id}>
|
||||
<div className="col-xl-4 col-xs-4 col-md-4">
|
||||
<span className="metric">{c.name}</span>
|
||||
</div>
|
||||
<div className="col-xl-6 col-xs-6 col-md-6">
|
||||
<span className="metric">{c.address}</span>
|
||||
</div>
|
||||
<div className="col-xl-2 col-xs-2 col-md-2">
|
||||
<span className="metric">
|
||||
<IconButton onTouchTap={(e) => handleRemoveAddress(c)} style={buttonStyle}><Delete /></IconButton></span>
|
||||
</div>
|
||||
</div>);
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="box box-default">
|
||||
<div className="box-body">
|
||||
<div className="row">
|
||||
<div className="col-xl-12 col-xs-12 col-md-12">
|
||||
<div className="box box-transparent">
|
||||
<div className="box-body">
|
||||
<div className="row metrics">
|
||||
<div className="col-xl-9 col-xs-9 col-md-9">
|
||||
<span className="metric">Addresses</span>
|
||||
</div>
|
||||
<div className="col-xl-3 col-xs-3 col-md-3">
|
||||
<GoogleAddressComponent title={"Organization Address"} buttonValue={"Add Address"} onSelectAddress={props.onAddressAdded} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="row metrics">
|
||||
<div className="col-xl-4 col-xs-4 col-md-4">
|
||||
<span className="metric-info">Name</span>
|
||||
</div>
|
||||
<div className="col-xl-6 col-xs-6 col-md-6">
|
||||
<span className="metric-info">Address</span>
|
||||
</div>
|
||||
<div className="col-xl-2 col-xs-2 col-md-2">
|
||||
<span className="metric-info">Actions</span>
|
||||
</div>
|
||||
</div>
|
||||
{list}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
};
|
||||
|
||||
const ContactInfo = (props) => {
|
||||
let list = [];
|
||||
let buttonStyle = {
|
||||
marginTop: -10
|
||||
}
|
||||
|
||||
if (props.organization.contacts && props.organization.contacts !== null && props.organization.contacts.length > 0) {
|
||||
const handleRemoveContact = (c) => {
|
||||
if (props.onContactRemoved) {
|
||||
props.onContactRemoved(c);
|
||||
}
|
||||
}
|
||||
|
||||
list = props.organization.contacts.map(c => {
|
||||
let contact = c.contact
|
||||
switch (c.type.key) {
|
||||
case "phone":
|
||||
case "landline":
|
||||
case "mobile":
|
||||
case "sms":
|
||||
case "fax":
|
||||
contact = contact.replace('+1', '');
|
||||
contact = formatPhoneNumber(contact);
|
||||
break;
|
||||
}
|
||||
|
||||
return (<div className="row metrics" key={c.id}>
|
||||
<div className="col-xl-3 col-xs-3 col-md-3">
|
||||
<span className="metric">{c.name}</span>
|
||||
</div>
|
||||
<div className="col-xl-5 col-xs-5 col-md-5">
|
||||
<span className="metric">{contact}</span>
|
||||
</div>
|
||||
<div className="col-xl-4 col-xs-4 col-md-4">
|
||||
<span className="metric">
|
||||
<ContactOption contact={c} onContactDeleted={handleRemoveContact} />
|
||||
</span>
|
||||
</div>
|
||||
</div>);
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="box box-default">
|
||||
<div className="box-body">
|
||||
<div className="row">
|
||||
<div className="col-xl-12 col-xs-12 col-md-12">
|
||||
<div className="box box-transparent">
|
||||
<div className="box-body">
|
||||
<div className="row metrics">
|
||||
<div className="col-xl-9 col-xs-9 col-md-9">
|
||||
<span className="metric">Contact Info</span>
|
||||
</div>
|
||||
<div className="col-xl-3 col-xs-3 col-md-3">
|
||||
<ContactComponent title={"Organization Contact"} buttonValue={"Add Contact"} onNewContact={props.onContactAdded} showName={true} showDescription={true} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="row metrics">
|
||||
<div className="col-xl-3 col-xs-3 col-md-3">
|
||||
<span className="metric-info">Name</span>
|
||||
</div>
|
||||
<div className="col-xl-5 col-xs-5 col-md-5">
|
||||
<span className="metric-info">Contact</span>
|
||||
</div>
|
||||
<div className="col-xl-4 col-xs-4 col-md-4">
|
||||
<span className="metric-info">Actions</span>
|
||||
</div>
|
||||
</div>
|
||||
{list}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
};
|
||||
|
||||
const Header = (props) => {
|
||||
let profileName = "";
|
||||
let organizationName = "";
|
||||
let organizationType = "";
|
||||
|
||||
let status = "Active";
|
||||
if (!props.organization.active) {
|
||||
status = "Inactive";
|
||||
}
|
||||
if (props.organization.blocked) {
|
||||
status = "Blocked";
|
||||
}
|
||||
if (props.organization.suspended) {
|
||||
status = "Suspended"
|
||||
}
|
||||
|
||||
let addParentButton = null;
|
||||
if (props.organization.parent === null) {
|
||||
addParentButton = (<div className="col-xl-2 col-xs-2 col-md-2">
|
||||
<OrganizationComponent title={"Parent Organization"} buttonValue={"Add Parent"} onSelectOrganization={props.onParentSelected} />
|
||||
</div>);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="box box-default">
|
||||
<div className="box-body">
|
||||
<div className="row">
|
||||
<div className="col-xl-12 col-xs-12 col-md-12">
|
||||
<div className="box box-transparent">
|
||||
<div className="box-body">
|
||||
<div className="row metrics">
|
||||
|
||||
<div className="col-xl-4 col-xs-4 col-md-4">
|
||||
<span className="metric-info">Name</span>
|
||||
<span className="metric">{props.organization.name}</span>
|
||||
</div>
|
||||
|
||||
<div className="col-xl-4 col-xs-4 col-md-4">
|
||||
<span className="metric-info">Type</span>
|
||||
<span className="metric">{props.organization.type.name}</span>
|
||||
</div>
|
||||
|
||||
<div className="col-xl-4 col-xs-4 col-md-4">
|
||||
<span className="metric-info">Status</span>
|
||||
<span className="metric">{status}</span>
|
||||
</div>
|
||||
|
||||
<div className="col-xl-4 col-xs-4 col-md-4">
|
||||
<span className="metric-info">Author</span>
|
||||
<span className="metric">{props.organization.author.name}</span>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="col-xl-4 col-xs-4 col-md-4">
|
||||
<span className="metric-info">Last Editor</span>
|
||||
<span className="metric">{props.organization.last_editor.name}</span>
|
||||
</div>
|
||||
|
||||
<div className="col-xl-4 col-xs-4 col-md-4">
|
||||
<span className="metric-info">Created</span>
|
||||
<span className="metric">{moment(props.organization.created).format('MM/DD/YYYY h:mm a')}</span>
|
||||
</div>
|
||||
|
||||
<div className="col-xl-4 col-xs-4 col-md-4">
|
||||
<span className="metric-info">Updated</span>
|
||||
<span className="metric">{moment(props.organization.updated).format('MM/DD/YYYY h:mm a')}</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div className="row metrics">
|
||||
{addParentButton}
|
||||
<div className="col-xl-2 col-xs-2 col-md-2">
|
||||
<OrganizationComponent title={"Child Organization"} buttonValue={"Add Child"} onSelectOrganization={props.onChildSelected} searchType={"child"} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
};
|
||||
|
||||
class Organization extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.props = props;
|
||||
|
||||
this.getOrganization = this.getOrganization.bind(this);
|
||||
this.handleAddressAdded = this.handleAddressAdded.bind(this);
|
||||
this.handleAddressRemoved = this.handleAddressRemoved.bind(this);
|
||||
this.handleContactAdded = this.handleContactAdded.bind(this);
|
||||
this.handleContactRemoved = this.handleContactRemoved.bind(this);
|
||||
this.handleParentSelected = this.handleParentSelected.bind(this);
|
||||
this.handleChildSelected = this.handleChildSelected.bind(this);
|
||||
this.handleParentClick = this.handleParentClick.bind(this);
|
||||
this.handleChildClick = this.handleChildClick.bind(this);
|
||||
}
|
||||
|
||||
state = {
|
||||
organization: {
|
||||
"id": "",
|
||||
"type": {
|
||||
"name": "",
|
||||
"key": ""
|
||||
},
|
||||
"name": "",
|
||||
"main": false,
|
||||
"created": "",
|
||||
"updated": "",
|
||||
"active": true,
|
||||
"blocked": false,
|
||||
"suspended": false,
|
||||
"author": {
|
||||
"useruuid": "",
|
||||
"name": "",
|
||||
},
|
||||
"last_editor": {
|
||||
"useruuid": "",
|
||||
"name": "",
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
const self = this;
|
||||
const orguuid = this.props.params.org_uuid;
|
||||
this.getOrganization(orguuid);
|
||||
}
|
||||
|
||||
getOrganization(orgUUID) {
|
||||
const self = this;
|
||||
Instance.getRawConn().get(`/v1/nemt/organization/${orgUUID}`)
|
||||
.then(res => {
|
||||
self.setState(Object.assign(self.state, { organization: res.data }));
|
||||
})
|
||||
.catch(err => {
|
||||
if (err.response.status === 422) {
|
||||
location.href = '/#/app/table/organizations';
|
||||
} else {
|
||||
console.error(err);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
handleAddressAdded(address) {
|
||||
const orguuid = this.props.params.org_uuid;
|
||||
const self = this;
|
||||
|
||||
const addressObj = {
|
||||
"internal_id": address.id,
|
||||
"name": address.name,
|
||||
"address": address.address,
|
||||
"lat": address.lat,
|
||||
"long": address.long,
|
||||
}
|
||||
Instance.getRawConn().post(`/v1/nemt/organization/${orguuid}/address`, addressObj)
|
||||
.then(res => {
|
||||
self.setState(Object.assign(self.state, { organization: res.data }));
|
||||
})
|
||||
.catch(err => {
|
||||
if (err.response.status === 422) {
|
||||
location.href = '/#/app/table/organizations';
|
||||
} else {
|
||||
console.error(err);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
handleAddressRemoved(address) {
|
||||
const orguuid = this.props.params.org_uuid;
|
||||
const self = this;
|
||||
|
||||
Instance.getRawConn().put(`/v1/nemt/organization/${orguuid}/address`, address)
|
||||
.then(res => {
|
||||
self.setState(Object.assign(self.state, { organization: res.data }));
|
||||
})
|
||||
.catch(err => {
|
||||
if (err.response.status === 422) {
|
||||
location.href = '/#/app/table/organizations';
|
||||
} else {
|
||||
console.error(err);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
handleContactAdded(contact) {
|
||||
const orguuid = this.props.params.org_uuid;
|
||||
const self = this;
|
||||
|
||||
var contactObj = {
|
||||
"type": contact.type,
|
||||
"contact": contact.contact,
|
||||
"name": contact.name,
|
||||
"desc": contact.desc,
|
||||
}
|
||||
|
||||
Instance.getRawConn().post(`/v1/nemt/organization/${orguuid}/contact`, contactObj)
|
||||
.then(res => {
|
||||
self.setState(Object.assign(self.state, { organization: res.data }));
|
||||
})
|
||||
.catch(err => {
|
||||
if (err.response.status === 422) {
|
||||
location.href = '/#/app/table/organizations';
|
||||
} else {
|
||||
console.error(err);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
handleContactRemoved(contact) {
|
||||
const orguuid = this.props.params.org_uuid;
|
||||
const self = this;
|
||||
|
||||
Instance.getRawConn().put(`/v1/nemt/organization/${orguuid}/contact`, contact)
|
||||
.then(res => {
|
||||
self.setState(Object.assign(self.state, { organization: res.data }));
|
||||
})
|
||||
.catch(err => {
|
||||
if (err.response.status === 422) {
|
||||
location.href = '/#/app/table/organizations';
|
||||
} else {
|
||||
console.error(err);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
handleParentSelected(organization) {
|
||||
const org = organization[0];
|
||||
const orguuid = this.props.params.org_uuid;
|
||||
const self = this;
|
||||
|
||||
Instance.getRawConn().post(`/v1/nemt/organization/${orguuid}/parent`, org)
|
||||
.then(res => {
|
||||
self.setState(Object.assign(self.state, { organization: res.data }));
|
||||
})
|
||||
.catch(err => {
|
||||
if (err.response.status === 422) {
|
||||
location.href = '/#/app/table/organizations';
|
||||
} else {
|
||||
console.error(err);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
handleChildSelected(organization) {
|
||||
const org = organization[0];
|
||||
const orguuid = this.props.params.org_uuid;
|
||||
const self = this;
|
||||
|
||||
Instance.getRawConn().post(`/v1/nemt/organization/${orguuid}/child`, org)
|
||||
.then(res => {
|
||||
self.setState(Object.assign(self.state, { organization: res.data }));
|
||||
})
|
||||
.catch(err => {
|
||||
if (err.response.status === 422) {
|
||||
location.href = '/#/app/table/organizations';
|
||||
} else {
|
||||
console.error(err);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
handleParentClick(organization) {
|
||||
this.getOrganization(organization.id);
|
||||
}
|
||||
|
||||
handleChildClick(organization) {
|
||||
this.getOrganization(organization.id);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="container-fluid no-breadcrumbs page-dashboard">
|
||||
<QueueAnim type="bottom" className="ui-animate">
|
||||
<Main organization={this.state.organization}
|
||||
onAddressAdded={this.handleAddressAdded} onAddressRemoved={this.handleAddressRemoved}
|
||||
onContactAdded={this.handleContactAdded} onContactRemoved={this.handleContactRemoved}
|
||||
onParentSelected={this.handleParentSelected} onChildSelected={this.handleChildSelected}
|
||||
onParentClick={this.handleParentClick} onChildClick={this.handleChildClick} />
|
||||
</QueueAnim>
|
||||
</div>)
|
||||
}
|
||||
}
|
||||
module.exports = Organization;
|
||||
8
src/routes/app/routes/organization/index.js
Normal file
8
src/routes/app/routes/organization/index.js
Normal file
@@ -0,0 +1,8 @@
|
||||
module.exports = {
|
||||
path: 'organization/:org_uuid',
|
||||
getComponent(nextState, cb) {
|
||||
require.ensure([], (require) => {
|
||||
cb(null, require('./components/organization'));
|
||||
});
|
||||
}
|
||||
};
|
||||
11
src/routes/app/routes/pageLayouts/index.js
Normal file
11
src/routes/app/routes/pageLayouts/index.js
Normal file
@@ -0,0 +1,11 @@
|
||||
module.exports = {
|
||||
path: 'pglayout',
|
||||
getChildRoutes(partialNextState, cb) {
|
||||
require.ensure([], (require) => {
|
||||
cb(null, [
|
||||
require('./routes/centered'),
|
||||
require('./routes/fullWidth'),
|
||||
]);
|
||||
});
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,16 @@
|
||||
import React from 'react';
|
||||
import QueueAnim from 'rc-queue-anim';
|
||||
|
||||
const Centered = () => (
|
||||
<section className="container-fluid with-maxwidth-md chapter">
|
||||
<QueueAnim type="bottom" className="ui-animate">
|
||||
<div key="1">
|
||||
<article className="article">
|
||||
<h2 className="article-title">Blank</h2>
|
||||
</article>
|
||||
</div>
|
||||
</QueueAnim>
|
||||
</section>
|
||||
);
|
||||
|
||||
module.exports = Centered;
|
||||
@@ -0,0 +1,8 @@
|
||||
module.exports = {
|
||||
path: 'centered',
|
||||
getComponent(nextState, cb) {
|
||||
require.ensure([], (require) => {
|
||||
cb(null, require('./components/Centered'));
|
||||
});
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,20 @@
|
||||
import React from 'react';
|
||||
import QueueAnim from 'rc-queue-anim';
|
||||
|
||||
const FullWidth = () => (
|
||||
<section className="container-fluid">
|
||||
<ul className="breadcrumb">
|
||||
<li className="breadcrumb-item"><a href="javascript:;">Page</a></li>
|
||||
<li className="breadcrumb-item active">Blank</li>
|
||||
</ul>
|
||||
<QueueAnim type="bottom" className="ui-animate">
|
||||
<div key="1">
|
||||
<article className="article">
|
||||
<h2 className="article-title">Blank</h2>
|
||||
</article>
|
||||
</div>
|
||||
</QueueAnim>
|
||||
</section>
|
||||
);
|
||||
|
||||
module.exports = FullWidth;
|
||||
@@ -0,0 +1,8 @@
|
||||
module.exports = {
|
||||
path: 'full-width',
|
||||
getComponent(nextState, cb) {
|
||||
require.ensure([], (require) => {
|
||||
cb(null, require('./components/FullWidth'));
|
||||
});
|
||||
}
|
||||
};
|
||||
15
src/routes/app/routes/pages/index.js
Normal file
15
src/routes/app/routes/pages/index.js
Normal file
@@ -0,0 +1,15 @@
|
||||
module.exports = {
|
||||
path: 'page',
|
||||
getChildRoutes(partialNextState, cb) {
|
||||
require.ensure([], (require) => {
|
||||
cb(null, [
|
||||
require('./routes/messages'),
|
||||
require('./routes/dash'),
|
||||
require('./routes/profile'),
|
||||
require('./routes/eligibility'),
|
||||
require('./routes/map'),
|
||||
require('./routes/terms'),
|
||||
]);
|
||||
});
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,625 @@
|
||||
import React, { Component } from 'react';
|
||||
import RaisedButton from 'material-ui/RaisedButton';
|
||||
import Dialog from 'material-ui/Dialog';
|
||||
import { deepOrange500 } from 'material-ui/styles/colors';
|
||||
import FlatButton from 'material-ui/FlatButton';
|
||||
import getMuiTheme from 'material-ui/styles/getMuiTheme';
|
||||
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
|
||||
import MenuItem from 'material-ui/MenuItem';
|
||||
import { Card, CardActions, CardHeader, CardMedia, CardTitle, CardText } from 'material-ui/Card';
|
||||
import APPCONFIG from 'constants/Config';
|
||||
import IconButton from 'material-ui/IconButton';
|
||||
import PersonAdd from 'material-ui/svg-icons/social/person-add';
|
||||
import InfoOutline from 'material-ui/svg-icons/action/info-outline';
|
||||
|
||||
import Badge from 'material-ui/Badge';
|
||||
import DataTables from 'material-ui-datatables';
|
||||
|
||||
//import contact list examples
|
||||
import ListExampleSimple from '../../../../ui/routes/lists/components/Simple';
|
||||
import ListExampleSelectable from '../../../../ui/routes/lists/components/Selectable';
|
||||
import ListExampleMessages from '../../../../ui/routes/lists/components/Messages';
|
||||
|
||||
//floating actions and "add" button
|
||||
import ContentAdd from 'material-ui/svg-icons/content/add';
|
||||
import FloatingActionButton from 'material-ui/FloatingActionButton';
|
||||
|
||||
import ActionGrade from 'material-ui/svg-icons/action/grade';
|
||||
|
||||
import ToolbarSection from '../../../../ui/routes/components/components/Toolbar.js';
|
||||
const $ = require('jquery');
|
||||
$.DataTable = require('datatables.net');
|
||||
|
||||
|
||||
const IconButtonExampleTouch = () => (
|
||||
<div>
|
||||
<IconButton
|
||||
iconClassName="material-icons"
|
||||
tooltip="Cancel"
|
||||
>
|
||||
delete
|
||||
</IconButton>
|
||||
<IconButton
|
||||
iconClassName="material-icons"
|
||||
tooltip="Edit"
|
||||
>
|
||||
edit_mode
|
||||
</IconButton>
|
||||
</div>
|
||||
);
|
||||
|
||||
const IconButtonExampleTouch2 = () => (
|
||||
<FlatButton href="#/app/form/steppers"><i className="nav-icon material-icons">schedule</i><span className="nav-text"></span></FlatButton>
|
||||
);
|
||||
|
||||
const IconButtonExampleTouch3 = () => (
|
||||
<div>
|
||||
<a href="" > 1800 HI...</a>
|
||||
</div>
|
||||
);
|
||||
|
||||
const IconButtonExampleTouch4 = () => (
|
||||
<div>
|
||||
<a href="#" > 2222 S...</a>
|
||||
</div>
|
||||
);
|
||||
|
||||
const IconButtonExampleTouch5 = () => (
|
||||
<div>
|
||||
<a href="#" >Michael Weinberg</a>
|
||||
{/* <IconButton
|
||||
iconClassName="material-icons"
|
||||
tooltip="Text"
|
||||
>
|
||||
phone_android
|
||||
</IconButton> */}
|
||||
{/* <IconButton
|
||||
iconClassName="material-icons"
|
||||
tooltip="Call"
|
||||
>
|
||||
sms
|
||||
</IconButton> */}
|
||||
</div>
|
||||
);
|
||||
|
||||
const IconButtonExampleTouch6 = () => (
|
||||
<div>
|
||||
<a href="" >11:00AM | 8/11/2017</a>
|
||||
</div>
|
||||
);
|
||||
|
||||
const IconButtonExampleTouch8 = () => (
|
||||
<div>
|
||||
<IconButton
|
||||
iconClassName="material-icons"
|
||||
tooltip="Phone"
|
||||
>
|
||||
phone
|
||||
</IconButton>
|
||||
</div>
|
||||
);
|
||||
|
||||
|
||||
|
||||
// const IconButtonExampleTouch7 = () => (
|
||||
// <IconButton
|
||||
// iconClassName="material-icons"
|
||||
// tooltip="Text"
|
||||
// >
|
||||
// phone_android
|
||||
// </IconButton>
|
||||
// <IconButton
|
||||
// iconClassName="material-icons"
|
||||
// tooltip="Call"
|
||||
// >
|
||||
// sms
|
||||
// </IconButton>
|
||||
// );
|
||||
|
||||
|
||||
// import QueueAnim from 'rc-queue-anim';
|
||||
// import RubixTables from 'RubixTables';
|
||||
|
||||
const styles = {
|
||||
datatable: {
|
||||
width: '100%'
|
||||
},
|
||||
container: {
|
||||
textAlign: 'left',
|
||||
},
|
||||
component: {
|
||||
margin: '20px 10px',
|
||||
},
|
||||
titleStyle: {
|
||||
fontSize: 22,
|
||||
color: deepOrange500,
|
||||
},
|
||||
footerToolbarStyle: {
|
||||
padding: '0 100px',
|
||||
},
|
||||
tableStyle: {
|
||||
tableLayout: 'auto',
|
||||
},
|
||||
tableBodyStyle: {
|
||||
overflowX: 'scroll',
|
||||
},
|
||||
tableWrapperStyle: {
|
||||
padding: 2,
|
||||
},
|
||||
};
|
||||
|
||||
const muiTheme = getMuiTheme({
|
||||
palette: {
|
||||
accent1Color: deepOrange500,
|
||||
},
|
||||
});
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: 'Day',
|
||||
data: 'day',
|
||||
},
|
||||
{
|
||||
title: 'Time',
|
||||
data: 'time',
|
||||
},
|
||||
{
|
||||
title: 'Pickup',
|
||||
data: 'pickup',
|
||||
},
|
||||
{
|
||||
title: 'Destination',
|
||||
data: 'destination',
|
||||
},
|
||||
{
|
||||
title: 'Status',
|
||||
data: 'status',
|
||||
}, {
|
||||
title: 'Details',
|
||||
data: 'details',
|
||||
},
|
||||
];
|
||||
|
||||
const TABLE_COLUMNS = [
|
||||
{
|
||||
key: 'sodium',
|
||||
label: 'Sodium (mg)',
|
||||
}, {
|
||||
key: 'calcium',
|
||||
label: 'Calcium (%)',
|
||||
}, {
|
||||
key: 'iron',
|
||||
label: 'Iron (%)',
|
||||
},
|
||||
];
|
||||
|
||||
const TABLE_COLUMNS_TOOLTIP = [
|
||||
{
|
||||
key: 'name',
|
||||
label: 'Dessert (100g serving)',
|
||||
tooltip: 'Dessert (100g serving)',
|
||||
}, {
|
||||
key: 'calories',
|
||||
label: 'Calories',
|
||||
tooltip: 'Calories',
|
||||
}, {
|
||||
key: 'fat',
|
||||
label: 'Fat (g)',
|
||||
tooltip: 'Fat (g)',
|
||||
}, {
|
||||
key: 'carbs',
|
||||
label: 'Carbs (g)',
|
||||
tooltip: 'Carbs (g)',
|
||||
}, {
|
||||
key: 'Member',
|
||||
label: 'Member (g)',
|
||||
tooltip: 'Member (g)',
|
||||
}, {
|
||||
key: 'sodium',
|
||||
label: 'Sodium (mg)',
|
||||
tooltip: 'Sodium (mg)',
|
||||
}, {
|
||||
key: 'calcium',
|
||||
label: 'Calcium (%)',
|
||||
tooltip: 'Calcium (%)',
|
||||
}, {
|
||||
key: 'iron',
|
||||
label: 'Iron (%)',
|
||||
tooltip: 'Iron (%)',
|
||||
},
|
||||
];
|
||||
|
||||
const TABLE_COLUMNS_SORT_STYLE = [
|
||||
// {
|
||||
// key: 'Day',
|
||||
// label: 'Day',
|
||||
// tooltip: 'Day',
|
||||
// className: 'mdl-data-table__cell--non-numeric',
|
||||
// },
|
||||
{
|
||||
key: 'Time',
|
||||
label: 'Time',
|
||||
tooltip: 'Pickup Time',
|
||||
sortable: true,
|
||||
style: {
|
||||
width: 130,
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'Member',
|
||||
label: 'Member',
|
||||
tooltip: 'Name of the Member',
|
||||
sortable: true,
|
||||
style: { width: 90, },
|
||||
},
|
||||
{
|
||||
key: 'Status',
|
||||
label: 'Status',
|
||||
sortable: true,
|
||||
style: { width: 30, },
|
||||
},
|
||||
{
|
||||
key: 'Pickup',
|
||||
label: 'Pickup',
|
||||
sortable: true,
|
||||
tooltip: "Pickup Address",
|
||||
style: { width: 50, },
|
||||
},
|
||||
{
|
||||
key: 'Destination',
|
||||
label: 'Destination',
|
||||
tooltip: "Destination Address",
|
||||
sortable: true,
|
||||
style: { width: 50, },
|
||||
},
|
||||
// {
|
||||
// key: 'Status',
|
||||
// label: 'Status',
|
||||
// },
|
||||
|
||||
// {
|
||||
// key: 'Details',
|
||||
// label: 'Details',
|
||||
// },
|
||||
|
||||
// {
|
||||
// key: 'memberPhone',
|
||||
// label: 'Phone',
|
||||
// tooltip: 'Mobile phone of the Member',
|
||||
// sortable: false,
|
||||
// },
|
||||
// {
|
||||
// key: 'ETA',
|
||||
// label: 'ETA',
|
||||
// tooltip: "ETA of Lyft Vehicle",
|
||||
// sortable: true,
|
||||
// style: { width: 50 },
|
||||
// },
|
||||
{
|
||||
key: 'estimatedDuration',
|
||||
label: 'Duration',
|
||||
tooltip: "Estimated Duration",
|
||||
sortable: true,
|
||||
style: { width: 20, },
|
||||
},
|
||||
{
|
||||
key: 'estimatedMileage',
|
||||
label: 'Mileage',
|
||||
tooltip: "Estimated Mileage",
|
||||
sortable: true,
|
||||
style: { width: 20, },
|
||||
},
|
||||
{
|
||||
key: 'lyftVehicle',
|
||||
label: 'Vehicle',
|
||||
tooltip: "Color Make and Model of Lyft Vehicle",
|
||||
sortable: true,
|
||||
style: { width: 120, },
|
||||
},
|
||||
{
|
||||
key: 'licensePlate',
|
||||
label: 'Plate',
|
||||
tooltip: 'License Plate of Lyft Vehicle',
|
||||
sortable: true,
|
||||
style: { width: 30, },
|
||||
},
|
||||
{
|
||||
key: 'driverPhone',
|
||||
label: 'Driver',
|
||||
tooltip: "Driver's (Masked) Phone Number",
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
key: 'rideID',
|
||||
label: 'ID',
|
||||
tooltip: 'Q-Ride ID',
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
key: 'lyftID',
|
||||
label: 'Lyft ID',
|
||||
tooltip: 'Lyft Ride ID',
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
key: 'Actions',
|
||||
label: 'Actions',
|
||||
sortable: false,
|
||||
},
|
||||
];
|
||||
|
||||
const TABLE_DATA_TABLE = [
|
||||
{
|
||||
day: '8/21/2017',
|
||||
time: '11:00 AM CST',
|
||||
pickup: '1800 Hig...',
|
||||
destination: '2222 S...',
|
||||
status: 'Scheduled',
|
||||
details: <IconButtonExampleTouch />,
|
||||
},
|
||||
{
|
||||
day: '8/21/2017',
|
||||
time: '11:00 AM CST',
|
||||
pickup: '1800 Hig...',
|
||||
destination: '2222 S...',
|
||||
status: 'Scheduled',
|
||||
details: <IconButtonExampleTouch />,
|
||||
},
|
||||
{
|
||||
day: '8/21/2017',
|
||||
time: '11:00 AM CST',
|
||||
pickup: '1800 Hig...',
|
||||
destination: '2222 S...',
|
||||
status: 'Scheduled',
|
||||
details: <IconButtonExampleTouch />,
|
||||
},
|
||||
{
|
||||
day: '8/21/2017',
|
||||
time: '11:00 AM CST',
|
||||
pickup: '1800 Hig...',
|
||||
destination: '2222 S...',
|
||||
status: 'Scheduled',
|
||||
details: <IconButtonExampleTouch />,
|
||||
},
|
||||
{
|
||||
day: '8/21/2017',
|
||||
time: '11:00 AM CST',
|
||||
pickup: '1800 Hig...',
|
||||
destination: '2222 S...',
|
||||
status: 'Scheduled',
|
||||
details: <IconButtonExampleTouch />,
|
||||
},
|
||||
{
|
||||
day: '8/21/2017',
|
||||
time: '11:00 AM CST',
|
||||
pickup: '1800 Hig...',
|
||||
destination: '2222 S...',
|
||||
status: 'Scheduled',
|
||||
details: <IconButtonExampleTouch />,
|
||||
},
|
||||
{
|
||||
day: '8/21/2017',
|
||||
time: '11:00 AM CST',
|
||||
pickup: '1800 Hig...',
|
||||
destination: '2222 S...',
|
||||
status: 'Scheduled',
|
||||
details: <IconButtonExampleTouch />,
|
||||
},
|
||||
{
|
||||
day: '8/21/2017',
|
||||
time: '11:00 AM CST',
|
||||
pickup: '1800 Hig...',
|
||||
destination: '2222 S...',
|
||||
status: 'Scheduled',
|
||||
details: <IconButtonExampleTouch />,
|
||||
},
|
||||
{
|
||||
day: '8/21/2017',
|
||||
time: '11:00 AM CST',
|
||||
pickup: '1800 Hig...',
|
||||
destination: '2222 S...',
|
||||
status: 'Scheduled',
|
||||
details: <IconButtonExampleTouch />,
|
||||
},
|
||||
{
|
||||
day: '8/21/2017',
|
||||
time: '11:00 AM CST',
|
||||
pickup: '1800 Hig...',
|
||||
destination: '2222 S...',
|
||||
status: 'Scheduled',
|
||||
details: <IconButtonExampleTouch />,
|
||||
},
|
||||
];
|
||||
|
||||
const TABLE_DATA = [
|
||||
{
|
||||
Member: <IconButtonExampleTouch5 />,
|
||||
// memberPhone: <IconButtonExampleTouch5 />,
|
||||
Time: <IconButtonExampleTouch6 />,
|
||||
Pickup: <IconButtonExampleTouch3 />,
|
||||
Destination: <IconButtonExampleTouch4 />,
|
||||
Status: <IconButtonExampleTouch2 />,
|
||||
ETA: '11:20AM',
|
||||
estimatedDuration: '11:30',
|
||||
estimatedMileage: '1.7',
|
||||
lyftVehicle: 'Red Toyota Primexa',
|
||||
licensePlate: "IL-343444",
|
||||
driverPhone: <IconButtonExampleTouch5 />,
|
||||
lyftID: 'QQ2323W',
|
||||
rideID: '2323QW',
|
||||
Actions: <IconButtonExampleTouch />,
|
||||
},
|
||||
{
|
||||
Member: 'Jan Foonie',
|
||||
Time: <IconButtonExampleTouch6 />,
|
||||
// memberPhone: <IconButtonExampleTouch5 />,
|
||||
Pickup: <IconButtonExampleTouch3 />,
|
||||
Destination: <IconButtonExampleTouch4 />,
|
||||
Status: <IconButtonExampleTouch2 />,
|
||||
ETA: '1:20AM',
|
||||
estimatedDuration: '4:00',
|
||||
estimatedMileage: '4.1',
|
||||
lyftVehicle: 'Blue Honda Elan',
|
||||
licensePlate: "IL-329R44",
|
||||
driverPhone: '(708)-222-2232',
|
||||
lyftID: '2323QW',
|
||||
rideID: 'Z22323W',
|
||||
Actions: <IconButtonExampleTouch />,
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
class Table extends Component {
|
||||
componentDidMount() {
|
||||
$('#main').DataTable({
|
||||
dom: '<"#data-table-wrapper.box box-default table-box table-responsive mdl-shadow--2dp"t>',
|
||||
data: TABLE_DATA_TABLE,
|
||||
columns,
|
||||
});
|
||||
}
|
||||
shouldComponentUpdate() {
|
||||
return false;
|
||||
}
|
||||
componentWillUnmount() {
|
||||
$('#data-table-wrapper')
|
||||
.find('#main')
|
||||
.DataTable()
|
||||
.destroy(true);
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<MuiThemeProvider muiTheme={muiTheme}>
|
||||
<div style={styles.container} >
|
||||
<div style={styles.component}>
|
||||
<ToolbarSection />
|
||||
<table id="main" className="mdl-data-table" style={styles.datatable} />
|
||||
</div>
|
||||
</div>
|
||||
</MuiThemeProvider>);
|
||||
}
|
||||
}
|
||||
|
||||
class Main extends Component {
|
||||
constructor(props, context) {
|
||||
super(props, context);
|
||||
this.handleSortOrderChange = this.handleSortOrderChange.bind(this);
|
||||
this.handleFilterValueChange = this.handleFilterValueChange.bind(this);
|
||||
this.handleCellClick = this.handleCellClick.bind(this);
|
||||
this.handleCellDoubleClick = this.handleCellDoubleClick.bind(this);
|
||||
this.handleRowSelection = this.handleRowSelection.bind(this);
|
||||
this.handlePreviousPageClick = this.handlePreviousPageClick.bind(this);
|
||||
this.handleNextPageClick = this.handleNextPageClick.bind(this);
|
||||
this.handlePersonAddClick = this.handlePersonAddClick.bind(this);
|
||||
this.handleInfoClick = this.handleInfoClick.bind(this);
|
||||
|
||||
this.state = {
|
||||
data: TABLE_DATA,
|
||||
page: 1,
|
||||
};
|
||||
}
|
||||
|
||||
handleSortOrderChange(key, order) {
|
||||
console.log('key:' + key + ' order: ' + order);
|
||||
}
|
||||
|
||||
handleFilterValueChange(value) {
|
||||
console.log('filter value: ' + value);
|
||||
}
|
||||
|
||||
handleCellClick(rowIndex, columnIndex, row, column) {
|
||||
console.log('rowIndex: ' + rowIndex + ' columnIndex: ' + columnIndex);
|
||||
}
|
||||
|
||||
handleCellDoubleClick(rowIndex, columnIndex, row, column) {
|
||||
console.log('rowIndex: ' + rowIndex + ' columnIndex: ' + columnIndex);
|
||||
}
|
||||
|
||||
handleRowSelection(selectedRows) {
|
||||
console.log('selectedRows: ' + selectedRows);
|
||||
}
|
||||
|
||||
handlePreviousPageClick() {
|
||||
console.log('handlePreviousPageClick');
|
||||
this.setState({
|
||||
data: TABLE_DATA,
|
||||
page: 1,
|
||||
});
|
||||
}
|
||||
|
||||
handleNextPageClick() {
|
||||
console.log('handleNextPageClick');
|
||||
this.setState({
|
||||
data: TABLE_DATA_NEXT,
|
||||
page: 2,
|
||||
});
|
||||
}
|
||||
|
||||
handlePersonAddClick() {
|
||||
console.log('handlePersonAddClick');
|
||||
}
|
||||
|
||||
handleInfoClick() {
|
||||
console.log('handleInfoClick');
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<MuiThemeProvider muiTheme={muiTheme}>
|
||||
<div style={styles.container}>
|
||||
<div style={styles.component}>
|
||||
|
||||
<Card style={{ margin: 2 }}>
|
||||
<ToolbarSection />
|
||||
<DataTables
|
||||
title={''}
|
||||
responsive={true}
|
||||
height={'auto'}
|
||||
stripedRows={true}
|
||||
selectable={true}
|
||||
RowSizeLabel={'Rows'}
|
||||
multiSelectable={true}
|
||||
showRowHover={true}
|
||||
columns={TABLE_COLUMNS_SORT_STYLE}
|
||||
data={TABLE_DATA}
|
||||
showCheckboxes={false}
|
||||
showHeaderToolbar={true}
|
||||
onCellClick={this.handleCellClick}
|
||||
onCellDoubleClick={this.handleCellDoubleClick}
|
||||
onFilterValueChange={this.handleFilterValueChange}
|
||||
onSortOrderChange={this.handleSortOrderChange}
|
||||
count={2}
|
||||
/>
|
||||
</Card>
|
||||
<Card style={{ backgroundColor: "#E8E8E8" }}>
|
||||
<CardHeader
|
||||
title="Expandable card"
|
||||
subtitle="Subtitle"
|
||||
actAsExpander
|
||||
showExpandableButton
|
||||
titleColor="#8B8B8B"
|
||||
subtitleColor="#e1e1e1"
|
||||
style={{ color: '#fff' }}
|
||||
/>
|
||||
<CardText
|
||||
expandable
|
||||
style={{ color: '#212121' }}
|
||||
>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
Donec mattis pretium massa.
|
||||
</CardText>
|
||||
<CardActions
|
||||
expandable
|
||||
style={{ color: '#fff' }}
|
||||
>
|
||||
<FlatButton label="Action1" style={{ color: '#fff' }} />
|
||||
<FlatButton label="Action2" style={{ color: '#fff' }} />
|
||||
</CardActions>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</MuiThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Main;
|
||||
197
src/routes/app/routes/pages/routes/dash/components/dash.js
Normal file
197
src/routes/app/routes/pages/routes/dash/components/dash.js
Normal file
@@ -0,0 +1,197 @@
|
||||
import React from 'react';
|
||||
import QueueAnim from 'rc-queue-anim';
|
||||
import AutoComplete from 'material-ui/AutoComplete';
|
||||
import { Tabs, Tab } from 'material-ui/Tabs';
|
||||
import Slider from 'material-ui/Slider';
|
||||
import TimePicker from 'material-ui/TimePicker';
|
||||
import DatePicker from 'material-ui/DatePicker';
|
||||
import TextField from 'material-ui/TextField';
|
||||
import Toggle from 'material-ui/Toggle';
|
||||
import Snackbar from 'material-ui/Snackbar';
|
||||
import { RadioButton, RadioButtonGroup } from 'material-ui/RadioButton';
|
||||
import MenuItem from 'material-ui/MenuItem';
|
||||
import DropDownMenu from 'material-ui/DropDownMenu';
|
||||
import ListExampleSimple from '../../../../ui/routes/lists/components/Simple';
|
||||
import ListExampleMessages from '../../../../ui/routes/lists/components/Messages';
|
||||
import Datatable from '../../../../tables/routes/members/components/Datatable';
|
||||
import FlatButton from 'material-ui/FlatButton';
|
||||
import RaisedButton from 'material-ui/RaisedButton';
|
||||
import BottomNavigationExampleSimple from '../../../../ui/routes/components/components/BottomNavigation';
|
||||
import IconButton from 'material-ui/IconButton';
|
||||
import Dialog from 'material-ui/Dialog';
|
||||
import FloatingActionButton from 'material-ui/FloatingActionButton';
|
||||
import ContentAdd from 'material-ui/svg-icons/content/add';
|
||||
|
||||
const style = {
|
||||
marginRight: 20,
|
||||
};
|
||||
|
||||
/**
|
||||
* Default size and `mini` FABs, in primary (default), `secondary` and `disabled` colors.
|
||||
*/
|
||||
const FloatingActionButtonExampleSimple = () => (
|
||||
<div>
|
||||
<FloatingActionButton secondary={true} style={style} >
|
||||
<ContentAdd />
|
||||
</FloatingActionButton>
|
||||
</div>
|
||||
);
|
||||
export default FloatingActionButtonExampleSimple;
|
||||
|
||||
|
||||
/**
|
||||
* A modal dialog can only be closed by selecting one of the actions.
|
||||
*/
|
||||
export class DialogExampleModal extends React.Component {
|
||||
state = {
|
||||
open: false,
|
||||
};
|
||||
|
||||
handleOpen = () => {
|
||||
this.setState({ open: true });
|
||||
};
|
||||
|
||||
handleClose = () => {
|
||||
this.setState({ open: false });
|
||||
};
|
||||
|
||||
render() {
|
||||
const actions = [
|
||||
<FlatButton
|
||||
label="Cancel"
|
||||
primary={true}
|
||||
onTouchTap={this.handleClose}
|
||||
/>,
|
||||
<FlatButton
|
||||
label="Submit"
|
||||
primary={true}
|
||||
disabled={true}
|
||||
onTouchTap={this.handleClose}
|
||||
/>,
|
||||
];
|
||||
|
||||
return (
|
||||
<div>
|
||||
|
||||
<FloatingActionButton onTouchTap={this.handleOpen} style={style}>
|
||||
<ContentAdd />
|
||||
</FloatingActionButton>
|
||||
|
||||
<Dialog
|
||||
title="Dialog With Actions"
|
||||
actions={actions}
|
||||
modal={true}
|
||||
open={this.state.open}
|
||||
>
|
||||
<div className="icon-box ibox-plain ibox-center">
|
||||
<div> Pickup </div>
|
||||
<i className="primary nav-icon material-icons">edit_location</i>
|
||||
<AutoComplete
|
||||
hintText="Pickup Location"
|
||||
filter={AutoComplete.noFilter}
|
||||
dataSource={dataSource2}
|
||||
/>
|
||||
{/* <i className="primary nav-icon material-icons">schedule</i> */}
|
||||
<TimePicker
|
||||
format="ampm"
|
||||
hintText="Pickup Time"
|
||||
/>
|
||||
</div>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const dataSource1 = [
|
||||
{
|
||||
text: 'Mercy Hospital',
|
||||
value: (
|
||||
<MenuItem
|
||||
primaryText="Mercy Hospital"
|
||||
secondaryText="☺"
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
text: 'Qwest Diagnostics',
|
||||
value: (
|
||||
<MenuItem
|
||||
primaryText="Qwest Diagnostics"
|
||||
secondaryText="☺"
|
||||
/>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
const dataSource2 = [
|
||||
{
|
||||
text: 'Home',
|
||||
value: (
|
||||
<MenuItem
|
||||
primaryText="Home"
|
||||
secondaryText="☺"
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
text: 'Work',
|
||||
value: (
|
||||
<MenuItem
|
||||
primaryText="Work"
|
||||
secondaryText="☺"
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
text: '1800 Highland..',
|
||||
value: (
|
||||
<MenuItem
|
||||
primaryText="1800 Highland Ave.."
|
||||
secondaryText="☺"
|
||||
/>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
const Services = () => (
|
||||
<article className="article padding-sm-v">
|
||||
<h2>Messages</h2>
|
||||
<div className="col-md-4">
|
||||
<div className="box box-default">
|
||||
<div className="box-body">
|
||||
<div className="icon-box ibox-plain ibox-center">
|
||||
<div> Upcoming Rides <a href=""><i className="nav-icon material-icons">directions_car</i></a></div>
|
||||
<Datatable />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div className="col-md-2">
|
||||
<div className="box box-default">
|
||||
<div className="box-body">
|
||||
<div className="icon-box ibox-plain ibox-center">
|
||||
<div> Notifications <a href=""><i className="nav-icon material-icons">phone_iphone</i></a></div>
|
||||
<ListExampleMessages />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</article>
|
||||
);
|
||||
|
||||
const Page = () => (
|
||||
<section className="chapter">
|
||||
<QueueAnim type="bottom" className="ui-animate">
|
||||
<div key="1"><DialogExampleModal /></div>
|
||||
<div key="2"><Services /></div>
|
||||
</QueueAnim>
|
||||
</section>
|
||||
);
|
||||
|
||||
module.exports = Page;
|
||||
|
||||
8
src/routes/app/routes/pages/routes/dash/index.js
Normal file
8
src/routes/app/routes/pages/routes/dash/index.js
Normal file
@@ -0,0 +1,8 @@
|
||||
module.exports = {
|
||||
path: 'dash',
|
||||
getComponent(nextState, cb) {
|
||||
require.ensure([], (require) => {
|
||||
cb(null, require('./components/dash'));
|
||||
});
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,294 @@
|
||||
import React, { Component } from 'react';
|
||||
import QueueAnim from 'rc-queue-anim';
|
||||
import APPCONFIG from 'constants/Config';
|
||||
import TextField from 'material-ui/TextField';
|
||||
import AutoComplete from 'material-ui/AutoComplete';
|
||||
import MenuItem from 'material-ui/MenuItem';
|
||||
import { Tabs, Tab } from 'material-ui/Tabs';
|
||||
import Slider from 'material-ui/Slider';
|
||||
import TimePicker from 'material-ui/TimePicker';
|
||||
import DatePicker from 'material-ui/DatePicker';
|
||||
import Toggle from 'material-ui/Toggle';
|
||||
import Snackbar from 'material-ui/Snackbar';
|
||||
import RaisedButton from 'material-ui/RaisedButton';
|
||||
import SelectField from 'material-ui/SelectField';
|
||||
import Checkbox from 'material-ui/Checkbox';
|
||||
import Instance from '../../../../../../../components/Connection';
|
||||
|
||||
class SignUp extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
}
|
||||
|
||||
state = {
|
||||
brand: APPCONFIG.brand,
|
||||
open: false,
|
||||
fullname: "",
|
||||
first: "",
|
||||
middle: "",
|
||||
last: "",
|
||||
email: "",
|
||||
phonenumber: "",
|
||||
member: "",
|
||||
birthdate: null,
|
||||
gender: null,
|
||||
agreedTerms: false,
|
||||
validated: false,
|
||||
memberType:"S"
|
||||
}
|
||||
|
||||
componentDidMount = () => {
|
||||
let user = localStorage.getItem("userData")
|
||||
if (user && user !== null && user !== '') {
|
||||
user = JSON.parse(user);
|
||||
user.birthdate = new Date(user.birthdate);
|
||||
this.setState(Object.assign(this.state, user));
|
||||
}
|
||||
}
|
||||
|
||||
clickEvent = (event) => {
|
||||
event.preventDefault();
|
||||
const state = this;
|
||||
state.handleRequestOpen();
|
||||
|
||||
let user = {
|
||||
"first": this.state.first,
|
||||
"last": this.state.last,
|
||||
"gender": this.state.gender,
|
||||
"member": this.state.member,
|
||||
"email": this.state.email,
|
||||
"phonenumber": this.state.phonenumber,
|
||||
"birthdate": this.state.birthdate.toISOString()
|
||||
// "eligibility": {
|
||||
// "tracking_id": "1234567",
|
||||
// "payer": {
|
||||
// "payer_id": "621",
|
||||
// "payer_name": "blue_cross_blue_shield_il"
|
||||
// },
|
||||
// "provider": {
|
||||
// "provider_npi": "1699849786",
|
||||
// "provider_name": "LITHOLINK CORPORATION"
|
||||
// },
|
||||
// "subscriber": {
|
||||
// "subscriber_id": this.state.member,
|
||||
// "patient_type": "S",
|
||||
// "name": {
|
||||
// "first": this.state.first,
|
||||
// "last": this.state.last,
|
||||
// "middle": ""
|
||||
// },
|
||||
// "demographic_info": {
|
||||
// "date_of_birth": this.state.birthdate.toISOString(),
|
||||
// "gender": this.state.gender
|
||||
// }
|
||||
// },
|
||||
// "service_info": {
|
||||
// "date_of_service": new Date().toISOString(),
|
||||
// "service_type_codes": ["30"]
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
||||
Instance.getRawConn().post('/v1/nemt/users/member', user).then(function (res) {
|
||||
state.handleRequestClose();
|
||||
|
||||
const eligibility = res.data;
|
||||
// if (eligibility.results.summary.benefits_found) {
|
||||
window.location.href = `/#/app/form/steppers/${eligibility.useruuid}`;
|
||||
// } else {
|
||||
// alert('NO benefits found for this member');
|
||||
// }
|
||||
}).catch(function (err) {
|
||||
console.log('Error to get eligibility: ', err);
|
||||
alert('NO benefits found for this member');
|
||||
this.handleRequestClose();
|
||||
});
|
||||
}
|
||||
|
||||
handleRequestClose = () => {
|
||||
this.setState(Object.assign(this.state, { open: false }));
|
||||
};
|
||||
|
||||
handleRequestOpen = () => {
|
||||
this.setState(Object.assign(this.state, { open: true }));
|
||||
};
|
||||
|
||||
handleChecked = (event, checked) => {
|
||||
this.setState(Object.assign(this.state, { agreedTerms: checked }));
|
||||
this.buttonValidated();
|
||||
};
|
||||
|
||||
handleDate = (event, date) => {
|
||||
this.setState(Object.assign(this.state, { birthdate: date }));
|
||||
this.buttonValidated();
|
||||
};
|
||||
|
||||
handleMember = (event) => {
|
||||
this.setState(Object.assign(this.state, { member: event.target.value }));
|
||||
};
|
||||
|
||||
handleChange = (event, index, value) => {
|
||||
this.setState(Object.assign(this.state, { gender: value }));
|
||||
this.buttonValidated();
|
||||
};
|
||||
|
||||
handleMemberType = (event, index, value) => {
|
||||
this.setState(Object.assign(this.state, { meberType: value }));
|
||||
this.buttonValidated();
|
||||
};
|
||||
|
||||
handleFirstName = (event) => {
|
||||
this.setState(Object.assign(this.state, { first: event.target.value }));
|
||||
};
|
||||
|
||||
handleEmail = (event) => {
|
||||
this.setState(Object.assign(this.state, { email: event.target.value }));
|
||||
};
|
||||
|
||||
handleLastName = (event) => {
|
||||
this.setState(Object.assign(this.state, { last: event.target.value }));
|
||||
};
|
||||
|
||||
handlePhone = (event) => {
|
||||
let phone = event.target.value;
|
||||
if (phone.indexOf("+1") < 0 && phone.length == 10) {
|
||||
phone = "+1" + phone;
|
||||
phone = phone.substring(0, 12);
|
||||
}
|
||||
|
||||
this.setState(Object.assign(this.state, { phonenumber: phone }));
|
||||
};
|
||||
|
||||
buttonValidated = () => {
|
||||
let validated = true;
|
||||
if (!this.state.first || this.state.first === null || this.state.first === "") validated = false;
|
||||
if (!this.state.last || this.state.last === null || this.state.last === "") validated = false;
|
||||
if (!this.state.gender || this.state.gender === null || this.state.gender === "") validated = false;
|
||||
if (!this.state.member || this.state.member === null || this.state.member === "") validated = false;
|
||||
if (!this.state.birthdate || this.state.birthdate === null || isNaN(this.state.birthdate.getTime())) validated = false;
|
||||
if (!this.state.phonenumber || this.state.phonenumber === null || this.state.phonenumber === "") validated = false;
|
||||
//if (!this.state.email || this.state.email === null || this.state.email === "") validated = false;
|
||||
if (!this.state.agreedTerms) validated = false;
|
||||
|
||||
this.setState(Object.assign(this.state, { validated: validated }));
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<form className="">
|
||||
<fieldset>
|
||||
<div className="form-group">
|
||||
<TextField
|
||||
floatingLabelText="First Name"
|
||||
value={this.state.first}
|
||||
onChange={this.handleFirstName}
|
||||
onBlur={this.buttonValidated}
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<TextField
|
||||
floatingLabelText="Last Name"
|
||||
value={this.state.last}
|
||||
onChange={this.handleLastName}
|
||||
onBlur={this.buttonValidated}
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<TextField
|
||||
floatingLabelText="Email"
|
||||
type="email"
|
||||
value={this.state.email}
|
||||
onChange={this.handleEmail}
|
||||
onBlur={this.buttonValidated}
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<SelectField
|
||||
floatingLabelText="Gender"
|
||||
value={this.state.gender}
|
||||
onChange={this.handleChange}
|
||||
style={{ maxWidth: 165 }}
|
||||
>
|
||||
<MenuItem value={null} primaryText="" />
|
||||
<MenuItem value={"M"} primaryText="Male" />
|
||||
<MenuItem value={"F"} primaryText="Female" />
|
||||
<MenuItem value={"U"} primaryText="Unknown" />
|
||||
</SelectField>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<SelectField
|
||||
style={{ maxWidth: 165 }}
|
||||
floatingLabelText="Member Type"
|
||||
value={this.state.memberType}
|
||||
onChange={this.handleMemberType}
|
||||
>
|
||||
<MenuItem value={null} primaryText="" />
|
||||
<MenuItem value={"S"} primaryText="Subscriber" />
|
||||
<MenuItem value={"D"} primaryText="Dependant" />
|
||||
<MenuItem value={"U"} primaryText="Unknown" />
|
||||
</SelectField>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<TextField
|
||||
style={{ maxWidth: 165 }}
|
||||
floatingLabelText="Member #"
|
||||
value={this.state.member}
|
||||
onChange={this.handleMember}
|
||||
onBlur={this.buttonValidated}
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group" style={{ maxWidth: 115 }} >
|
||||
<DatePicker width = "115" hintText="Birth Date" container="inline" style={{ width: 115 }}
|
||||
value={this.state.birthdate} onChange={this.handleDate} />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<TextField
|
||||
style={{ maxWidth: 115 }}
|
||||
floatingLabelText="Mobile Phone"
|
||||
type="telephone"
|
||||
value={this.state.phonenumber}
|
||||
onChange={this.handlePhone}
|
||||
onBlur={this.buttonValidated}
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<Checkbox
|
||||
label="Member has consented to terms of use"
|
||||
checked={this.state.agreedTerms}
|
||||
onCheck={this.handleChecked}
|
||||
/>
|
||||
</div>
|
||||
<RaisedButton
|
||||
label="Check Eligibility"
|
||||
primary={true}
|
||||
onClick={this.clickEvent}
|
||||
disabled={!this.state.validated}
|
||||
/>
|
||||
</fieldset>
|
||||
<div>
|
||||
<Snackbar
|
||||
open={this.state.open}
|
||||
message="Checking Eligibililty"
|
||||
autoHideDuration={1900}
|
||||
onRequestClose={this.handleRequestClose}
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const Page = () => (
|
||||
<section className="container-fluid with-maxwidth chapter">
|
||||
<article className="article padding-xs">
|
||||
<h2 className="article-title" style={{ paddingTop: 15 }}>Verify Eligibility</h2>
|
||||
<div className="box box-default">
|
||||
<div className="box-body">
|
||||
<SignUp />
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
);
|
||||
|
||||
module.exports = Page;
|
||||
8
src/routes/app/routes/pages/routes/eligibility/index.js
Normal file
8
src/routes/app/routes/pages/routes/eligibility/index.js
Normal file
@@ -0,0 +1,8 @@
|
||||
module.exports = {
|
||||
path: 'eligibility',
|
||||
getComponent(nextState, cb) {
|
||||
require.ensure([], (require) => {
|
||||
cb(null, require('./components/eligibility'));
|
||||
});
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,75 @@
|
||||
import React, { Component } from 'react';
|
||||
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
|
||||
import MuiGeoSuggest from 'material-ui-geosuggest';
|
||||
import GooglePlaceAutocomplete from 'material-ui-places';
|
||||
|
||||
const customContentStyle = {
|
||||
width: '100%',
|
||||
maxWidth: 'none',
|
||||
};
|
||||
|
||||
class App extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.props = props;
|
||||
this.state = {
|
||||
inputValue: ''
|
||||
}
|
||||
}
|
||||
|
||||
componentWillReceiveProps = (nextProps) => {
|
||||
this.setState(Object.assign(this.state, { inputValue: nextProps.inputValue }));
|
||||
}
|
||||
|
||||
componentDidMount = () => {
|
||||
this.setState(Object.assign(this.state, { inputValue: this.props.inputValue }));
|
||||
}
|
||||
|
||||
|
||||
static propTypes = {
|
||||
inputValue: React.PropTypes.object.string,
|
||||
onPlaceChange: React.PropTypes.function
|
||||
}
|
||||
|
||||
handlePlaceChanges = (place) => {
|
||||
if (this.props.onPlaceChange) {
|
||||
if (place) {
|
||||
let formattedPlace = {
|
||||
id: place.id,
|
||||
address: place.formatted_address,
|
||||
lat: place.geometry.location.lat(),
|
||||
lng: place.geometry.location.lng(),
|
||||
name: place.name,
|
||||
type: 'google'
|
||||
}
|
||||
this.props.onPlaceChange(formattedPlace);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
handleChange(event) {
|
||||
this.setState({ inputValue: event.target.value });
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="App">
|
||||
<MuiThemeProvider>
|
||||
<GooglePlaceAutocomplete
|
||||
id={"membersAutoSuggest"}
|
||||
restrictions={{ country: "us" }}
|
||||
style={customContentStyle}
|
||||
hintText={this.state.inputValue}
|
||||
floatingLabelText={this.state.inputValue}
|
||||
onChange={(e) => this.handleChange.bind(this, e)}
|
||||
onNewRequest={(r, i) => console.log('New Request', r, i)}
|
||||
onUpdateInput={(a, b, c) => console.log('Update Input', a, b, c)}
|
||||
fullWidth={true}
|
||||
/>
|
||||
</MuiThemeProvider>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default App;
|
||||
625
src/routes/app/routes/pages/routes/map/components/Maps.js
Normal file
625
src/routes/app/routes/pages/routes/map/components/Maps.js
Normal file
@@ -0,0 +1,625 @@
|
||||
|
||||
/* global google */
|
||||
|
||||
import {
|
||||
default as React,
|
||||
Component,
|
||||
} from "react";
|
||||
import ReactDOM from 'react-dom';
|
||||
import Helmet from "react-helmet";
|
||||
|
||||
import {
|
||||
withGoogleMap,
|
||||
GoogleMap,
|
||||
Marker,
|
||||
lodash, InfoWindow, TrafficLayer, DirectionsRenderer, SearchBox
|
||||
} from "react-google-maps";
|
||||
|
||||
import TimePicker from 'material-ui/TimePicker';
|
||||
|
||||
import Imgix from 'react-imgix'
|
||||
import moment from "moment";
|
||||
|
||||
|
||||
const INPUT_STYLE = {
|
||||
boxSizing: `border-box`,
|
||||
MozBoxSizing: `border-box`,
|
||||
border: `1px solid transparent`,
|
||||
width: `240px`,
|
||||
height: `32px`,
|
||||
marginTop: `27px`,
|
||||
padding: `0 12px`,
|
||||
borderRadius: `1px`,
|
||||
boxShadow: `0 2px 6px rgba(0, 0, 0, 0.3)`,
|
||||
fontSize: `14px`,
|
||||
outline: `none`,
|
||||
textOverflow: `ellipses`,
|
||||
};
|
||||
|
||||
|
||||
const PopUpInfoWindowExampleGoogleMap = withGoogleMap(props => {
|
||||
return (
|
||||
<GoogleMap
|
||||
defaultZoom={14}
|
||||
defaultCenter={{ lat: 41.819078, lng: -87.623129 }}
|
||||
>
|
||||
<TrafficLayer autoUpdate />
|
||||
{props.markers.map((marker, index) => (
|
||||
<Marker
|
||||
key={index}
|
||||
position={marker.position}
|
||||
onClick={() => props.onMarkerClick(marker)}
|
||||
icon={marker.icon}
|
||||
showInfo={false}
|
||||
>
|
||||
{marker.showInfo && (
|
||||
<InfoWindow onCloseClick={() => props.onMarkerClose(marker)}>
|
||||
<div>{marker.infoContent}</div>
|
||||
</InfoWindow>
|
||||
)}
|
||||
|
||||
</Marker>
|
||||
))}
|
||||
{props.directions && <DirectionsRenderer directions={props.directions} options={props.directionsRenderer} />}
|
||||
</GoogleMap>
|
||||
)
|
||||
});
|
||||
|
||||
/*
|
||||
*
|
||||
* Add <script src="https://maps.googleapis.com/maps/api/js"></script>
|
||||
* to your HTML to provide google.maps reference
|
||||
*
|
||||
* @author: @chiwoojo
|
||||
*/
|
||||
export default class PopUpInfoWindowExample extends Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.props = props;
|
||||
|
||||
this.state = {
|
||||
ride: {
|
||||
"ride_uuid": "",
|
||||
"user": {
|
||||
"useruuid": "",
|
||||
"name": "",
|
||||
"member": ""
|
||||
},
|
||||
"status": {
|
||||
"key": "",
|
||||
"value": ""
|
||||
},
|
||||
"type": {
|
||||
"key": "",
|
||||
"value": ""
|
||||
},
|
||||
"notes": "",
|
||||
"passenger": {
|
||||
"user_id": "",
|
||||
"image_url": "",
|
||||
"first_name": "",
|
||||
"last_name": "",
|
||||
"phone_number": ""
|
||||
},
|
||||
"driver": {
|
||||
"rating": "",
|
||||
"image_url": "",
|
||||
"first_name": "",
|
||||
"phone_number": ""
|
||||
},
|
||||
"vehicle": {
|
||||
"color": "",
|
||||
"make": "",
|
||||
"license_plate": "",
|
||||
"image_url": "",
|
||||
"year": 0,
|
||||
"license_plate_state": "",
|
||||
"model": ""
|
||||
},
|
||||
"trip_type": {
|
||||
"key": "",
|
||||
"value": "",
|
||||
},
|
||||
"route": {
|
||||
"origin": {
|
||||
"name": "",
|
||||
"lat": 0,
|
||||
"lng": 0,
|
||||
"address": ""
|
||||
},
|
||||
"destination": {
|
||||
"name": "",
|
||||
"lat": 0,
|
||||
"lng": 0,
|
||||
"address": ""
|
||||
},
|
||||
"location": {
|
||||
"bearing": 0,
|
||||
"lat": 0,
|
||||
"lng": 0,
|
||||
},
|
||||
"route_kml": "",
|
||||
"distance": 0,
|
||||
"duration": 0,
|
||||
"eta": 0
|
||||
},
|
||||
"visit_date": new Date(),
|
||||
"visit_time": new Date(),
|
||||
"pickup_time": new Date()
|
||||
},
|
||||
bounds: null,
|
||||
center: {
|
||||
lat: 41.819078,
|
||||
lng: -87.623129,
|
||||
},
|
||||
origin: null,
|
||||
destination: null,
|
||||
directions: null,
|
||||
// array of objects of markers
|
||||
rendererOptions: {
|
||||
suppressMarkers: true
|
||||
},
|
||||
markers: [
|
||||
{
|
||||
icon: 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=A|FF0000|000000',
|
||||
position: null,
|
||||
showInfo: false,
|
||||
infoContent: (
|
||||
<div>
|
||||
<TimePicker
|
||||
format="ampm"
|
||||
hintText="Pickup Time"
|
||||
/>
|
||||
<div> <strong> Pickup </strong>
|
||||
<p> </p>
|
||||
</div>
|
||||
<i className="nav-icon material-icons">location_on</i>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
icon: 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=B|008000|000000',
|
||||
position: null,
|
||||
showInfo: false,
|
||||
infoContent: (
|
||||
<div>
|
||||
<TimePicker
|
||||
format="ampm"
|
||||
hintText="Dropoff Time"
|
||||
/>
|
||||
<div> <strong> Destination </strong>
|
||||
<p> </p>
|
||||
</div>
|
||||
<i className="nav-icon material-icons">local_hospital</i>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
if (this.props.data !== null || this.props.data !== undefined) {
|
||||
this.state.ride = this.props.data;
|
||||
}
|
||||
}
|
||||
|
||||
static propTypes = {
|
||||
data: React.PropTypes.object.isRequired,
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps) {
|
||||
let state = this
|
||||
const routeObj = {
|
||||
origin: new google.maps.LatLng(nextProps.data.route.origin.lat, nextProps.data.route.origin.lng),
|
||||
destination: new google.maps.LatLng(nextProps.data.route.destination.lat, nextProps.data.route.destination.lng),
|
||||
travelMode: google.maps.TravelMode.DRIVING,
|
||||
};
|
||||
state.setState(Object.assign(state.state, { ride: nextProps.data }));
|
||||
|
||||
const DirectionsService = new google.maps.DirectionsService();
|
||||
DirectionsService.route(routeObj, (result, status) => {
|
||||
if (status === google.maps.DirectionsStatus.OK) {
|
||||
|
||||
let pickupMarker = {
|
||||
icon: '/assets/images/home.png',
|
||||
position: result.routes[0].legs[0].start_location,
|
||||
showInfo: false,
|
||||
infoContent: (
|
||||
<div style={{ opacity: '.8', color: 'brown' }} >
|
||||
<div >
|
||||
<p> <b>PICK UP</b> at {moment(nextProps.data.pickup_time).format("hh:mm a")} <br></br>{nextProps.data.route.origin.address} </p>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
};
|
||||
let dropOffMarker = {
|
||||
icon: '/assets/images/provider_pin.png',
|
||||
position: result.routes[0].legs[0].end_location,
|
||||
showInfo: false,
|
||||
infoContent: (
|
||||
<div>
|
||||
<div>
|
||||
<p> <b>DROP OFF</b> for {moment(nextProps.data.visit_time).format("hh:mm a")} visit. <br /> {nextProps.data.route.destination.address} </p>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
};
|
||||
|
||||
if (nextProps.data.trip_type.key === 'from_visit' || nextProps.data.trip_type.key === 'from_visit_call') {
|
||||
if (nextProps.data.status.key === 'willCall') {
|
||||
pickupMarker = {
|
||||
icon: '/assets/images/provider_pin.png',
|
||||
position: result.routes[0].legs[0].end_location,
|
||||
showInfo: false,
|
||||
infoContent: (
|
||||
<div style={{ opacity: '.8', color: 'brown' }} >
|
||||
<div >
|
||||
<p> <b>PICK UP</b> Will Call <br></br>{nextProps.data.route.destination.address} </p>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
};
|
||||
} else {
|
||||
pickupMarker = {
|
||||
icon: '/assets/images/provider_pin.png',
|
||||
position: result.routes[0].legs[0].end_location,
|
||||
showInfo: false,
|
||||
infoContent: (
|
||||
<div style={{ opacity: '.8', color: 'brown' }} >
|
||||
<div >
|
||||
<p> <b>PICK UP</b> at {moment(nextProps.data.pickup_time).format("hh:mm a")} <br></br>{nextProps.data.route.destination.address} </p>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
};
|
||||
}
|
||||
dropOffMarker = {
|
||||
icon: '/assets/images/home.png',
|
||||
position: result.routes[0].legs[0].start_location,
|
||||
showInfo: false,
|
||||
infoContent: (
|
||||
<div>
|
||||
<div>
|
||||
<p> <b>DROP OFF</b> <br /> {nextProps.data.route.origin.address} </p>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
};
|
||||
}
|
||||
|
||||
// let pickupMarker = {
|
||||
// icon: '/assets/images/home.png',
|
||||
// // icon: state.state.ride.vehicle.image_url,
|
||||
// position: result.routes[0].legs[0].start_location,
|
||||
// showInfo: false,
|
||||
// infoContent: (
|
||||
// <div>
|
||||
// <TimePicker
|
||||
// format="ampm"
|
||||
// hintText="Pickup Time"
|
||||
// value={nextProps.data.pickup_time}
|
||||
// />
|
||||
// <div> <strong> Pickup </strong>
|
||||
// <p> {nextProps.data.route.origin.address} </p>
|
||||
// </div>
|
||||
// <i className="nav-icon material-icons">location_on</i>
|
||||
// </div>
|
||||
// ),
|
||||
// };
|
||||
// let dropOffMarker = {
|
||||
// // icon: state.state.ride.vehicle.image_url,
|
||||
// icon: '/assets/images/provider_pin.png',
|
||||
// position: result.routes[0].legs[0].end_location,
|
||||
// showInfo: false,
|
||||
// infoContent: (
|
||||
// <div>
|
||||
// <TimePicker
|
||||
// format="ampm"
|
||||
// hintText="Dropoff Time"
|
||||
// value={nextProps.data.visit_time}
|
||||
// />
|
||||
// <div> <strong> Destination </strong>
|
||||
// <p> {nextProps.data.route.destination.address} </p>
|
||||
// </div>
|
||||
// <i className="nav-icon material-icons">local_hospital</i>
|
||||
// </div>
|
||||
// ),
|
||||
// }
|
||||
|
||||
// if (nextProps.data.trip_type.key === 'from_visit' || nextProps.data.trip_type.key === 'from_visit_call') {
|
||||
// pickupMarker = {
|
||||
// icon: '/assets/images/provider_pin.png',
|
||||
// // icon: state.state.ride.vehicle.image_url,
|
||||
// position: result.routes[0].legs[0].end_location,
|
||||
// showInfo: false,
|
||||
// infoContent: (
|
||||
// <div>
|
||||
// <TimePicker
|
||||
// format="ampm"
|
||||
// hintText="Pickup Time"
|
||||
// value={nextProps.data.pickup_time}
|
||||
// />
|
||||
// <div> <strong> Pickup </strong>
|
||||
// <p> {nextProps.data.route.destination.address} </p>
|
||||
// </div>
|
||||
// <i className="nav-icon material-icons">local_hospital</i>
|
||||
// </div>
|
||||
// ),
|
||||
// };
|
||||
// dropOffMarker = {
|
||||
// // icon: state.state.ride.vehicle.image_url,
|
||||
// icon: '/assets/images/home.png',
|
||||
// position: result.routes[0].legs[0].start_location,
|
||||
// showInfo: false,
|
||||
// infoContent: (
|
||||
// <div>
|
||||
// <div> <strong> Destination </strong>
|
||||
// <p> {nextProps.data.route.origin.address} </p>
|
||||
// </div>
|
||||
// <i className="nav-icon material-icons">location_on</i>
|
||||
// </div>
|
||||
// ),
|
||||
// }
|
||||
|
||||
// if (nextProps.data.status.key === 'willCall') {
|
||||
// pickupMarker.infoContent = (
|
||||
// <div>
|
||||
// <div> <strong> Pickup </strong>
|
||||
// <p> {nextProps.data.route.destination.address} </p>
|
||||
// </div>
|
||||
// <i className="nav-icon material-icons">local_hospital</i>
|
||||
// </div>);
|
||||
|
||||
// dropOffMarker.infoContent = (
|
||||
// <div>
|
||||
// <div> <strong> Destination </strong>
|
||||
// <p> {nextProps.data.route.origin.address} </p>
|
||||
// </div>
|
||||
// <i className="nav-icon material-icons">location_on</i>
|
||||
// </div>)
|
||||
// }
|
||||
// }
|
||||
|
||||
let mapState = {
|
||||
origin: new google.maps.LatLng(nextProps.data.route.origin.lat, nextProps.data.route.origin.lng),
|
||||
destination: new google.maps.LatLng(nextProps.data.route.destination.lat, nextProps.data.route.destination.lng),
|
||||
directions: result,
|
||||
// array of objects of markers
|
||||
rendererOptions: {
|
||||
suppressMarkers: true
|
||||
},
|
||||
markers: [
|
||||
pickupMarker,
|
||||
dropOffMarker,
|
||||
],
|
||||
}
|
||||
|
||||
switch (state.state.ride.status.key) {
|
||||
case "accepted":
|
||||
case "pickedUp":
|
||||
case "arrived":
|
||||
|
||||
let scaledImage = <Imgix src={this.state.ride.vehicle.image_url} aggressiveLoad='true' width={50} type='picture' />;
|
||||
|
||||
// console.log(scaledImage);
|
||||
|
||||
let carMarker = {
|
||||
icon: '/assets/images/prius2.png',
|
||||
|
||||
// icon: this.state.ride.vehicle.image_url,
|
||||
// icon: <Imgix src={this.state.ride.vehicle.image_url} aggressiveLoad='true' width={50} type='picture' />,
|
||||
|
||||
position: new google.maps.LatLng(state.state.ride.route.location.lat, state.state.ride.route.location.lng),
|
||||
//position: result.routes[0].legs[0].steps[4].end_location,
|
||||
showInfo: false,
|
||||
infoContent: (
|
||||
<div>
|
||||
<div> <strong> {state.state.ride.driver.first_name} </strong>
|
||||
<p> {state.state.ride.vehicle.color} {state.state.ride.vehicle.make} {state.state.ride.vehicle.model} ({state.state.ride.vehicle.license_plate})</p>
|
||||
</div>
|
||||
<i className="nav-icon material-icons">watch_later</i>
|
||||
</div>
|
||||
),
|
||||
};
|
||||
mapState.markers.push(carMarker);
|
||||
break;
|
||||
default:
|
||||
console.log('not found');
|
||||
}
|
||||
|
||||
state.setState(Object.assign(state.state, mapState));
|
||||
} else {
|
||||
if (result.status !== "ZERO_RESULTS") {
|
||||
console.error(`error fetching directions ${result}`);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
let data = this.props.data;
|
||||
this.setState(Object.assign(this.state, { ride: data }));
|
||||
const DirectionsService = new google.maps.DirectionsService();
|
||||
DirectionsService.route({
|
||||
origin: new google.maps.LatLng(this.state.ride.route.origin.lat, this.state.ride.route.origin.lng),
|
||||
destination: new google.maps.LatLng(this.state.ride.route.destination.lat, this.state.ride.route.destination.lng),
|
||||
travelMode: google.maps.TravelMode.DRIVING,
|
||||
}, (result, status) => {
|
||||
if (status === google.maps.DirectionsStatus.OK) {
|
||||
let mapState = {
|
||||
origin: new google.maps.LatLng(this.state.ride.route.origin.lat, this.state.ride.route.origin.lng),
|
||||
destination: new google.maps.LatLng(this.state.ride.route.destination.lat, this.state.ride.route.destination.lng),
|
||||
directions: result,
|
||||
// array of objects of markers
|
||||
rendererOptions: {
|
||||
suppressMarkers: true
|
||||
},
|
||||
markers: [
|
||||
{
|
||||
// icon: '/assets/images/5_min.png',
|
||||
icon: state.state.ride.vehicle.image_url,
|
||||
// icon: state.state.ride.vehicle.image_url,
|
||||
position: result.routes[0].legs[0].start_location,
|
||||
showInfo: false,
|
||||
infoContent: (
|
||||
<div>
|
||||
<TimePicker
|
||||
format="ampm"
|
||||
hintText="Pickup Time"
|
||||
value={this.state.ride.pickup_time}
|
||||
/>
|
||||
<div> <strong> Pickup </strong>
|
||||
<p> {this.state.ride.route.origin.address} </p>
|
||||
</div>
|
||||
<i className="nav-icon material-icons">location_on</i>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
icon: '/assets/images/provider.png',
|
||||
position: result.routes[0].legs[0].end_location,
|
||||
showInfo: false,
|
||||
infoContent: (
|
||||
<div>
|
||||
<TimePicker
|
||||
format="ampm"
|
||||
hintText="Dropoff Time"
|
||||
value={this.state.ride.visit_time}
|
||||
/>
|
||||
<div> <strong> Destination </strong>
|
||||
<p> {this.state.ride.route.destination.address} </p>
|
||||
</div>
|
||||
<i className="nav-icon material-icons">local_hospital</i>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
|
||||
console.log('Current Status Mount: ', state.state.ride.status.key)
|
||||
switch (this.state.ride.status.key) {
|
||||
case "accepted":
|
||||
case "pickepUp":
|
||||
case "arrived":
|
||||
let carMarker = {
|
||||
icon: state.state.ride.vehicle.image_url,
|
||||
position: new google.maps.LatLng(state.state.ride.route.location.lat, state.state.ride.route.location.lng),
|
||||
//position: result.routes[0].legs[0].steps[4].end_location,
|
||||
showInfo: false,
|
||||
infoContent: (
|
||||
<div>
|
||||
<div> <strong> {this.state.ride.driver.first_name} </strong>
|
||||
<p> {this.state.ride.route.vehicle.color} {this.state.ride.route.vehicle.make} {this.state.ride.route.vehicle.model} ({this.state.ride.route.vehicle.license_plate})</p>
|
||||
</div>
|
||||
<i className="nav-icon material-icons">watch_later</i>
|
||||
</div>
|
||||
),
|
||||
};
|
||||
mapState.markers.push(carMarker);
|
||||
break;
|
||||
}
|
||||
this.setState(Object.assign(this.state, mapState));
|
||||
} else {
|
||||
if (result.status !== "ZERO_RESULTS") {
|
||||
console.error(`error fetching directions ${result}`);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
handleMapMounted = this.handleMapMounted.bind(this);
|
||||
handleBoundsChanged = this.handleBoundsChanged.bind(this);
|
||||
handleSearchBoxMounted = this.handleSearchBoxMounted.bind(this);
|
||||
handlePlacesChanged = this.handlePlacesChanged.bind(this);
|
||||
|
||||
handleMapMounted(map) {
|
||||
debugger;
|
||||
this._map = map;
|
||||
}
|
||||
|
||||
handleBoundsChanged() {
|
||||
this.setState(Object.assign(this.state, {
|
||||
bounds: this._map.getBounds(),
|
||||
center: this._map.getCenter(),
|
||||
}));
|
||||
}
|
||||
|
||||
handleSearchBoxMounted(searchBox) {
|
||||
this._searchBox = searchBox;
|
||||
}
|
||||
|
||||
handlePlacesChanged() {
|
||||
const places = this._searchBox.getPlaces();
|
||||
|
||||
// Add a marker for each place returned from search bar
|
||||
const markers = places.map(place => ({
|
||||
position: place.geometry.location,
|
||||
}));
|
||||
|
||||
// Set markers; set map center to first search result
|
||||
const mapCenter = markers.length > 0 ? markers[0].position : this.state.center;
|
||||
|
||||
this.setState(Object.assign(this.state, {
|
||||
center: mapCenter,
|
||||
markers,
|
||||
}));
|
||||
}
|
||||
|
||||
handleMarkerClick = this.handleMarkerClick.bind(this);
|
||||
handleMarkerClose = this.handleMarkerClose.bind(this);
|
||||
|
||||
// Toggle to 'true' to show InfoWindow and re-renders component
|
||||
handleMarkerClick(targetMarker) {
|
||||
this.setState(Object.assign(this.state, {
|
||||
markers: this.state.markers.map(marker => {
|
||||
if (marker === targetMarker) {
|
||||
return {
|
||||
...marker,
|
||||
showInfo: true,
|
||||
};
|
||||
}
|
||||
return marker;
|
||||
}),
|
||||
}));
|
||||
}
|
||||
|
||||
handleMarkerClose(targetMarker) {
|
||||
this.setState(Object.assign(this.state, {
|
||||
markers: this.state.markers.map(marker => {
|
||||
if (marker === targetMarker) {
|
||||
return {
|
||||
...marker,
|
||||
showInfo: false,
|
||||
};
|
||||
}
|
||||
return marker;
|
||||
}),
|
||||
}));
|
||||
}
|
||||
|
||||
render() {
|
||||
let maps = (<PopUpInfoWindowExampleGoogleMap
|
||||
containerElement={
|
||||
<div id={'containerMap'} style={{ minHeight: '500px', width: '100%', position: 'relative', overflow: 'visible', padding: '0px' }} className="col-md-12" />
|
||||
}
|
||||
mapElement={
|
||||
<div id={'mapElement'} style={{ overflow: 'visible', height: '800px', width: '100%', position: 'absolute', padding: '0px' }} />
|
||||
}
|
||||
onMapMounted={this.handleMapMounted}
|
||||
onBoundsChanged={this.handleBoundsChanged}
|
||||
onSearchBoxMounted={this.handleSearchBoxMounted}
|
||||
bounds={this.state.bounds}
|
||||
onPlacesChanged={this.handlePlacesChanged}
|
||||
markers={this.state.markers}
|
||||
onMarkerClick={this.handleMarkerClick}
|
||||
onMarkerClose={this.handleMarkerClose}
|
||||
center={this.state.origin}
|
||||
directions={this.state.directions}
|
||||
directionsRenderer={this.state.rendererOptions}
|
||||
zoom={this.state.defaultZoom}
|
||||
/>);
|
||||
|
||||
return maps;
|
||||
}
|
||||
}
|
||||
1119
src/routes/app/routes/pages/routes/map/components/Services.js
Normal file
1119
src/routes/app/routes/pages/routes/map/components/Services.js
Normal file
File diff suppressed because it is too large
Load Diff
8
src/routes/app/routes/pages/routes/map/index.js
Normal file
8
src/routes/app/routes/pages/routes/map/index.js
Normal file
@@ -0,0 +1,8 @@
|
||||
module.exports = {
|
||||
path: 'map/:ride_uuid',
|
||||
getComponent(nextState, cb) {
|
||||
require.ensure([], (require) => {
|
||||
cb(null, require('./components/Services'));
|
||||
});
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,83 @@
|
||||
import React from 'react';
|
||||
import QueueAnim from 'rc-queue-anim';
|
||||
//import contact list examples
|
||||
import ListExampleSimple from '../../../../ui/routes/lists/components/Simple';
|
||||
import ListExampleSelectable from '../../../../ui/routes/lists/components/Selectable';
|
||||
import ListExampleMessages from '../../../../ui/routes/lists/components/Messages';
|
||||
// import ListExampleSimple from '../../../../ui/routes/lists/components/Settings';
|
||||
|
||||
|
||||
const Hero = () => (
|
||||
<section className="hero hero-bg-img" style={{backgroundImage: 'url(assets/images-demo/covers/photo-1438893761775-f1db119d27b2.jpg)'}}>
|
||||
<div className="hero-inner">
|
||||
<div className="hero-content">
|
||||
<h1 className="hero-title">About Us</h1>
|
||||
</div>
|
||||
<p className="hero-tagline">Everything you need to know about Independence Blue Cross & Blue Shield</p>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
const Info = () => (
|
||||
<div className="container-fluid with-maxwidth">
|
||||
<article className="article">
|
||||
<div className="row stat-container">
|
||||
<div className="col-md-4">
|
||||
<section className="stat-item">
|
||||
<span className="stat-num">10</span>
|
||||
<span className="stat-desc">Years Experience</span>
|
||||
</section>
|
||||
<p>Necessitatibus eaque, deleniti error in quam fuga et nisi facere dolore excepturi accusamus dicta reprehenderit dolor. Quo necessitatibus possimus ipsam, nesciunt aspernatur ex libero asperiores, debitis minus nostrum odio. Sunt dolore, dolorem id, iusto quia est unde a doloribus doloremque quisquam repellat nobis enim ipsam eligendi perspiciatis, provident eos aliquid. </p>
|
||||
</div>
|
||||
<div className="col-md-4">
|
||||
<section className="stat-item">
|
||||
<span className="stat-num">200+</span>
|
||||
<span className="stat-desc">Satisfied Clients</span>
|
||||
</section>
|
||||
<p>Tempore adipisci ea accusamus odit consequuntur! Quaerat quos nemo qui ipsam accusantium, nostrum error nesciunt quibusdam velit tempore odit deleniti animi laborum sequi saepe minima atque! Nobis repellendus quos voluptatum sapiente, eveniet aliquid ex eum explicabo soluta delectus officia, dolore aspernatur, dicta nam placeat nostrum aliquam magni? Iste, hic, mollitia.</p>
|
||||
</div>
|
||||
<div className="col-md-4">
|
||||
<section className="stat-item">
|
||||
<span className="stat-num">12</span>
|
||||
<span className="stat-desc">Kinds of Products</span>
|
||||
</section>
|
||||
<p>Nostrum, laudantium minima nam dolorum quasi, ut sunt, dolore ratione suscipit sequi vero ducimus earum praesentium odit aut amet voluptates, sint doloribus omnis. Dignissimos, similique neque praesentium mollitia, libero delectus in adipisci ex nihil laborum iure quaerat magnam obcaecati repellendus exercitationem explicabo! Eum, ut voluptatum sapiente dignissimos unde quae eos quis mollitia, voluptate, dolores excepturi? </p>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
);
|
||||
|
||||
const Culture = () => (
|
||||
<article className="article padding-lg-v article-bordered">
|
||||
<div className="container-fluid with-maxwidth chapter">
|
||||
<div key="1">
|
||||
<article className="article">
|
||||
<h2 className="article-title">Messages</h2>
|
||||
<div className="row">
|
||||
|
||||
{/* <div className="col-md-3">
|
||||
<ListExampleSimple />
|
||||
</div>
|
||||
*/}
|
||||
<div className="col-xl-8">
|
||||
<ListExampleMessages />
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</article>
|
||||
);
|
||||
|
||||
const About = () => (
|
||||
<section className="page-about chapter">
|
||||
<QueueAnim type="bottom" className="ui-animate">
|
||||
|
||||
<div key="3"><Culture /></div>
|
||||
</QueueAnim>
|
||||
</section>
|
||||
);
|
||||
|
||||
module.exports = About;
|
||||
8
src/routes/app/routes/pages/routes/messages/index.js
Normal file
8
src/routes/app/routes/pages/routes/messages/index.js
Normal file
@@ -0,0 +1,8 @@
|
||||
module.exports = {
|
||||
path: 'messages',
|
||||
getComponent(nextState, cb) {
|
||||
require.ensure([], (require) => {
|
||||
cb(null, require('./components/messages'));
|
||||
});
|
||||
}
|
||||
};
|
||||
231
src/routes/app/routes/pages/routes/profile/components/profile.js
Normal file
231
src/routes/app/routes/pages/routes/profile/components/profile.js
Normal file
@@ -0,0 +1,231 @@
|
||||
import React, { Component } from 'react';
|
||||
import TextField from 'material-ui/TextField';
|
||||
import RaisedButton from 'material-ui/RaisedButton';
|
||||
import QueueAnim from 'rc-queue-anim';
|
||||
import FloatingActionButton from 'material-ui/FloatingActionButton';
|
||||
import ContentAdd from 'material-ui/svg-icons/content/add';
|
||||
// import MobileTearSheet from '../../../../MobileTearSheet';
|
||||
import { List, ListItem } from 'material-ui/List';
|
||||
import ContentInbox from 'material-ui/svg-icons/content/inbox';
|
||||
import ContentSend from 'material-ui/svg-icons/content/send';
|
||||
import ContentDrafts from 'material-ui/svg-icons/content/drafts';
|
||||
import Divider from 'material-ui/Divider';
|
||||
import IconMenu from 'material-ui/IconMenu';
|
||||
import MenuItem from 'material-ui/MenuItem';
|
||||
import IconButton from 'material-ui/IconButton';
|
||||
import Download from 'material-ui/svg-icons/file/file-download';
|
||||
import ArrowDropRight from 'material-ui/svg-icons/navigation-arrow-drop-right';
|
||||
import MoreVertIcon from 'material-ui/svg-icons/navigation/more-vert';
|
||||
import ActionHome from 'material-ui/svg-icons/action/home';
|
||||
import ActionWork from 'material-ui/svg-icons/action/work';
|
||||
import MapsMyLocation from 'material-ui/svg-icons/maps/my-location';
|
||||
import MapsAddLocation from 'material-ui/svg-icons/maps/add-location';
|
||||
import MapsNearMe from 'material-ui/svg-icons/maps/near-me';
|
||||
import MapsLocalHospital from 'material-ui/svg-icons/maps/local-hospital';
|
||||
import MapsLocalPharmacy from 'material-ui/svg-icons/maps/local-pharmacy';
|
||||
import AutoComplete from 'material-ui/AutoComplete';
|
||||
|
||||
const locations = [
|
||||
'1800 Highland Ave',
|
||||
'My Work',
|
||||
];
|
||||
|
||||
export default class AutoCompleteExampleControlled extends Component {
|
||||
state = {
|
||||
searchText: '',
|
||||
};
|
||||
|
||||
handleUpdateInput = (searchText) => {
|
||||
this.setState({
|
||||
searchText: searchText,
|
||||
});
|
||||
};
|
||||
|
||||
handleNewRequest = () => {
|
||||
this.setState({
|
||||
searchText: '',
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<AutoComplete
|
||||
hintText="Address or place name"
|
||||
searchText={this.state.searchText}
|
||||
onUpdateInput={this.handleUpdateInput}
|
||||
onNewRequest={this.handleNewRequest}
|
||||
dataSource={locations}
|
||||
filter={(searchText, key) => (key.indexOf(searchText) !== -1)}
|
||||
openOnFocus={true}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const style = {
|
||||
marginRight: 20,
|
||||
};
|
||||
|
||||
/**
|
||||
* Default size and `mini` FABs, in primary (default), `secondary` and `disabled` locations.
|
||||
*/
|
||||
const FloatingActionButtonExampleSimple = () => (
|
||||
<div>
|
||||
<FloatingActionButton secondary={true} style={style}>
|
||||
<ContentAdd />
|
||||
</FloatingActionButton>
|
||||
</div>
|
||||
);
|
||||
|
||||
const IconMenuExampleNested = () => (
|
||||
<IconMenu
|
||||
iconButtonElement={<IconButton><MoreVertIcon /></IconButton>}
|
||||
anchorOrigin={{ horizontal: 'left', vertical: 'top' }}
|
||||
targetOrigin={{ horizontal: 'left', vertical: 'top' }}
|
||||
>
|
||||
<MenuItem
|
||||
primaryText="Copy & Paste"
|
||||
rightIcon={<ArrowDropRight />}
|
||||
menuItems={[
|
||||
<MenuItem primaryText="Cut" />,
|
||||
<MenuItem primaryText="Copy" />,
|
||||
<Divider />,
|
||||
<MenuItem primaryText="Paste" />,
|
||||
]}
|
||||
/>
|
||||
|
||||
<MenuItem
|
||||
primaryText="Case Tools"
|
||||
rightIcon={<ArrowDropRight />}
|
||||
menuItems={[
|
||||
<MenuItem primaryText="UPPERCASE" />,
|
||||
<MenuItem primaryText="lowercase" />,
|
||||
<MenuItem primaryText="CamelCase" />,
|
||||
<MenuItem primaryText="Propercase" />,
|
||||
]}
|
||||
/>
|
||||
<Divider />
|
||||
<MenuItem primaryText="Download" leftIcon={<Download />} />
|
||||
<Divider />
|
||||
<MenuItem value="Del" primaryText="Delete" />
|
||||
|
||||
</IconMenu>
|
||||
);
|
||||
|
||||
|
||||
const Hero = () => (
|
||||
<article className="article">
|
||||
<section className="hero">
|
||||
<div className="hero-content">
|
||||
<h1 className="hero-title">How can we help you?</h1>
|
||||
</div>
|
||||
<p className="hero-tagline">Feel free to contact us if you have any questions</p>
|
||||
</section>
|
||||
</article>
|
||||
);
|
||||
|
||||
|
||||
const Contact = () => (
|
||||
<article className="article article-dark">
|
||||
<h2 className="article-title text-center no-margin-top">Pickup Location</h2>
|
||||
<div className="container-fluid with-maxwidth">
|
||||
<div className="row">
|
||||
<div className="col-xl-6">
|
||||
<div className="card-content">
|
||||
<span className="card-title" />
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div className="">
|
||||
<AutoCompleteExampleControlled />
|
||||
<List>
|
||||
<ListItem primaryText="Current Location" leftIcon={<MapsNearMe />} />
|
||||
|
||||
</List>
|
||||
|
||||
<Divider />
|
||||
|
||||
<List>
|
||||
<ListItem primaryText="Add Home" rightIcon={<ArrowDropRight />} leftIcon={<ActionHome />} />
|
||||
<ListItem primaryText="Add Work" rightIcon={<ArrowDropRight />} leftIcon={<ActionWork />} />
|
||||
<ListItem primaryText="Add Custom Shortcut" rightIcon={<ArrowDropRight />} leftIcon={<MapsLocalHospital />} />
|
||||
</List>
|
||||
<Divider />
|
||||
<List>
|
||||
<ListItem primaryText="1800 Highland Ave" rightIcon={<MapsMyLocation />} />
|
||||
<ListItem primaryText="Berwyn Senior Center" rightIcon={<MapsLocalPharmacy />} />
|
||||
</List>
|
||||
</div>
|
||||
<div className="box box-transparent">
|
||||
<div className="box-body padding-lg-h">
|
||||
<h4>Get In Touch</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A consectetur necessitatibus ea possimus est quis cumque vel saepe. Eum, quas, ducimus.</p>
|
||||
<div className="divider divider-solid" />
|
||||
<p>123 Mountain View <br /> Santa Clara, C.A. <br /> USA</p>
|
||||
<div className="divider divider-solid" />
|
||||
<p>
|
||||
<strong>E:</strong> mail@site.com
|
||||
<br />
|
||||
<strong>P:</strong> +1 234 56789
|
||||
<br />
|
||||
<strong>S:</strong> www.site.com
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-xl-6">
|
||||
<div className="box box-transparent">
|
||||
<div className="box-body padding-lg-h">
|
||||
<h4>Contact</h4>
|
||||
<form name="contactForm">
|
||||
<div className="form-group">
|
||||
<TextField
|
||||
hintText="Name"
|
||||
fullWidth
|
||||
value="Michael Weinberg"
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<TextField
|
||||
hintText="Work Email"
|
||||
fullWidth
|
||||
type="email"
|
||||
value="michael@brighterdevelopment.com"
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<TextField
|
||||
hintText="Message"
|
||||
fullWidth
|
||||
multiLine
|
||||
rows={3}
|
||||
/>
|
||||
</div>
|
||||
<div className="divider" />
|
||||
<RaisedButton primary label="Submit" />
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
);
|
||||
|
||||
|
||||
|
||||
|
||||
const Page = () => (
|
||||
<section className="chapter">
|
||||
<QueueAnim type="bottom" className="ui-animate">
|
||||
<div key="1"><IconMenuExampleNested /></div>
|
||||
<div key="2"><Contact /></div>
|
||||
<div key="3"><FloatingActionButtonExampleSimple /></div>
|
||||
</QueueAnim>
|
||||
</section>
|
||||
);
|
||||
|
||||
module.exports = Page;
|
||||
8
src/routes/app/routes/pages/routes/profile/index.js
Normal file
8
src/routes/app/routes/pages/routes/profile/index.js
Normal file
@@ -0,0 +1,8 @@
|
||||
module.exports = {
|
||||
path: 'profile',
|
||||
getComponent(nextState, cb) {
|
||||
require.ensure([], (require) => {
|
||||
cb(null, require('./components/profile'));
|
||||
});
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,799 @@
|
||||
import React, { Component } from 'react';
|
||||
import QueueAnim from 'rc-queue-anim';
|
||||
|
||||
import AutoComplete from 'material-ui/AutoComplete';
|
||||
import { Tabs, Tab } from 'material-ui/Tabs';
|
||||
import Slider from 'material-ui/Slider';
|
||||
import TimePicker from 'material-ui/TimePicker';
|
||||
import DatePicker from 'material-ui/DatePicker';
|
||||
import TextField from 'material-ui/TextField';
|
||||
import Toggle from 'material-ui/Toggle';
|
||||
import Snackbar from 'material-ui/Snackbar';
|
||||
import { RadioButton, RadioButtonGroup } from 'material-ui/RadioButton';
|
||||
|
||||
import MenuItem from 'material-ui/MenuItem';
|
||||
import SelectField from 'material-ui/SelectField';
|
||||
import DropDownMenu from 'material-ui/DropDownMenu';
|
||||
|
||||
import { List, ListItem } from 'material-ui/List';
|
||||
import ListExampleSimple from '../../../../ui/routes/lists/components/Simple';
|
||||
import ListExampleMessages from '../../../../ui/routes/lists/components/Messages';
|
||||
|
||||
import Dialog from 'material-ui/Dialog';
|
||||
import ToolbarSection from '../../../../ui/routes/components/components/Toolbar2.js';
|
||||
import BottomNavigationExampleSimple from '../../../../ui/routes/components/components/BottomNavigation';
|
||||
import App from '../../../../pages/routes/geosuggest/components/geosuggest.js';
|
||||
|
||||
import { NEMTLocation } from '../../../../../components/NEMTLocation';
|
||||
|
||||
import GMaps from './Maps'
|
||||
|
||||
import Drawer from 'material-ui/Drawer';
|
||||
import AppBar from 'material-ui/AppBar';
|
||||
import RaisedButton from 'material-ui/RaisedButton';
|
||||
import FlatButton from 'material-ui/FlatButton';
|
||||
import Divider from 'material-ui/Divider';
|
||||
|
||||
import IconMenu from 'material-ui/IconMenu';
|
||||
import IconButton from 'material-ui/IconButton';
|
||||
import Download from 'material-ui/svg-icons/file/file-download';
|
||||
import ArrowDropRight from 'material-ui/svg-icons/navigation-arrow-drop-right';
|
||||
import MoreVertIcon from 'material-ui/svg-icons/navigation/more-vert';
|
||||
|
||||
import ActionHome from 'material-ui/svg-icons/action/home';
|
||||
import ActionWork from 'material-ui/svg-icons/action/work';
|
||||
import MapsMyLocation from 'material-ui/svg-icons/maps/my-location';
|
||||
import MapsAddLocation from 'material-ui/svg-icons/maps/add-location';
|
||||
import MapsNearMe from 'material-ui/svg-icons/maps/near-me';
|
||||
import MapsLocalHospital from 'material-ui/svg-icons/maps/local-hospital';
|
||||
import MapsLocalPharrmacy from 'material-ui/svg-icons/maps/local-pharmacy';
|
||||
|
||||
import { fullWhite } from 'material-ui/styles/colors';
|
||||
import ActionAndroid from 'material-ui/svg-icons/action/android';
|
||||
import FontIcon from 'material-ui/FontIcon';
|
||||
|
||||
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
|
||||
import MuiGeoSuggest from 'material-ui-geosuggest';
|
||||
import { orange500, blue500 } from 'material-ui/styles/colors';
|
||||
|
||||
import areIntlLocalesSupported from 'intl-locales-supported';
|
||||
import FloatingActionButton from 'material-ui/FloatingActionButton';
|
||||
import ContentAdd from 'material-ui/svg-icons/content/add';
|
||||
import moment from 'moment';
|
||||
|
||||
import { Card, CardActions, CardHeader, CardMedia, CardTitle, CardText } from 'material-ui/Card';
|
||||
|
||||
|
||||
|
||||
const axios = require('axios');
|
||||
const setCookie = function (cname, cvalue, date) {
|
||||
var d = new Date(date * 1000);
|
||||
var expires = "expires=" + d.toUTCString();
|
||||
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
|
||||
}
|
||||
const getCookie = function (cname) {
|
||||
console.log('test');
|
||||
var name = cname + "=";
|
||||
var decodedCookie = decodeURIComponent(document.cookie);
|
||||
var ca = decodedCookie.split(';');
|
||||
for (var i = 0; i < ca.length; i++) {
|
||||
var c = ca[i];
|
||||
while (c.charAt(0) == ' ') {
|
||||
c = c.substring(1);
|
||||
}
|
||||
if (c.indexOf(name) == 0) {
|
||||
return c.substring(name.length, c.length);
|
||||
}
|
||||
}
|
||||
return "";
|
||||
}
|
||||
let instance = {};
|
||||
let token = getCookie('token');
|
||||
if (!token || token === null || token === undefined || token === '') {
|
||||
location.href = "/#/login";
|
||||
} else {
|
||||
instance = axios.create({
|
||||
baseURL: 'https://portal-api.bcbsinstitute.com',
|
||||
headers: { App: localStorage.getItem('App'), Token: 'Bearer ' + token },
|
||||
});
|
||||
}
|
||||
|
||||
let DateTimeFormat;
|
||||
|
||||
// /**
|
||||
// * Use the native Intl.DateTimeFormat if available, or a polyfill if not.
|
||||
// */
|
||||
if (areIntlLocalesSupported(['fr', 'fa-IR'])) {
|
||||
DateTimeFormat = global.Intl.DateTimeFormat;
|
||||
}
|
||||
// else {
|
||||
// const IntlPolyfill = require('intl');
|
||||
// DateTimeFormat = IntlPolyfill.DateTimeFormat;
|
||||
// require('intl/locale-data/jsonp/fr');
|
||||
// require('intl/locale-data/jsonp/fa-IR');
|
||||
// }
|
||||
|
||||
|
||||
const styles = {
|
||||
errorStyle: {
|
||||
color: orange500,
|
||||
},
|
||||
underlineStyle: {
|
||||
borderColor: orange500,
|
||||
},
|
||||
floatingLabelStyle: {
|
||||
color: blue500,
|
||||
},
|
||||
floatingLabelFocusStyle: {
|
||||
color: blue500,
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
const style = {
|
||||
margin: 12,
|
||||
};
|
||||
|
||||
const buttonStyle = {
|
||||
marginTop: 10,
|
||||
};
|
||||
|
||||
const getConfirmationData = () => {
|
||||
let confirmationData = {
|
||||
rideTypeValue: 0,
|
||||
providerID: 0,
|
||||
providerName: '',
|
||||
visitDate: null,
|
||||
visitTime: null,
|
||||
pickupLocation: null,
|
||||
pickupTime: null,
|
||||
user: null
|
||||
};
|
||||
|
||||
const confirmationStorage = localStorage.getItem("confirmation");
|
||||
if (confirmationStorage !== undefined && confirmationStorage !== null && confirmationStorage !== '') {
|
||||
confirmationData = Object.assign(confirmationData, JSON.parse(confirmationStorage));
|
||||
}
|
||||
|
||||
let user = localStorage.getItem("userData")
|
||||
if (user && user !== null && user !== '') {
|
||||
user = JSON.parse(user);
|
||||
confirmationData = Object.assign(confirmationData, { user: user });
|
||||
}
|
||||
|
||||
return confirmationData;
|
||||
};
|
||||
|
||||
class Services extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.props = props;
|
||||
|
||||
this.state = {
|
||||
stepIndex: 0,
|
||||
rideTypeValue: 0,
|
||||
providerID: 0,
|
||||
providerName: '',
|
||||
visitDate: null,
|
||||
visitTime: null,
|
||||
pickupLocation: null,
|
||||
pickupTime: null,
|
||||
origin: {},
|
||||
destination: {},
|
||||
user: {
|
||||
first: "",
|
||||
last: "",
|
||||
member: "",
|
||||
phonenumber: ""
|
||||
},
|
||||
eta: {
|
||||
distance_miles: 0,
|
||||
duration_seconds: 0,
|
||||
formatted_time: ""
|
||||
},
|
||||
ride: {
|
||||
"ride_uuid": "",
|
||||
"user": {
|
||||
"useruuid": "",
|
||||
"name": "",
|
||||
"member": ""
|
||||
},
|
||||
"status": {
|
||||
"key": "",
|
||||
"value": ""
|
||||
},
|
||||
"type": {
|
||||
"key": "",
|
||||
"value": ""
|
||||
},
|
||||
"notes": "",
|
||||
"passenger": {
|
||||
"user_id": "",
|
||||
"image_url": "",
|
||||
"first_name": "",
|
||||
"last_name": "",
|
||||
"phone_number": ""
|
||||
},
|
||||
"driver": {
|
||||
"rating": "",
|
||||
"image_url": "",
|
||||
"first_name": "",
|
||||
"phone_number": ""
|
||||
},
|
||||
"vehicle": {
|
||||
"color": "",
|
||||
"make": "",
|
||||
"license_plate": "",
|
||||
"image_url": "",
|
||||
"year": 0,
|
||||
"license_plate_state": "",
|
||||
"model": ""
|
||||
},
|
||||
"route": {
|
||||
"origin": {
|
||||
"name": "",
|
||||
"lat": 0,
|
||||
"lng": 0,
|
||||
"address": ""
|
||||
},
|
||||
"destination": {
|
||||
"name": "",
|
||||
"lat": 0,
|
||||
"lng": 0,
|
||||
"address": ""
|
||||
},
|
||||
"location": {
|
||||
"lat": 0,
|
||||
"lng": 0,
|
||||
"bearing": 0
|
||||
},
|
||||
"route_kml": "",
|
||||
"distance": 0,
|
||||
"duration": 0,
|
||||
"eta": 0,
|
||||
"eta_formatted": '',
|
||||
},
|
||||
"visit": {
|
||||
"visit_uuid": "",
|
||||
"visit_external_id": "",
|
||||
"pickup": {
|
||||
"id": "",
|
||||
"name": ""
|
||||
},
|
||||
"destination": {
|
||||
"id": "",
|
||||
"name": ""
|
||||
},
|
||||
"created_user": {
|
||||
"useruuid": "",
|
||||
"name": ""
|
||||
}
|
||||
},
|
||||
"visit_date": new Date(),
|
||||
"visit_time": new Date(),
|
||||
"pickup_time": new Date()
|
||||
},
|
||||
rideInfo: {
|
||||
"ride_uuid": "",
|
||||
"user": {
|
||||
"useruuid": "",
|
||||
"name": "",
|
||||
"member": ""
|
||||
},
|
||||
"status": {
|
||||
"key": "",
|
||||
"value": ""
|
||||
},
|
||||
"type": {
|
||||
"key": "",
|
||||
"value": ""
|
||||
},
|
||||
"route_kml": "",
|
||||
"notes": "",
|
||||
"passenger": {
|
||||
"user_id": "",
|
||||
"image_url": "",
|
||||
"first_name": "",
|
||||
"last_name": "",
|
||||
"phone_number": ""
|
||||
},
|
||||
"driver": {
|
||||
"rating": "",
|
||||
"image_url": "",
|
||||
"first_name": "",
|
||||
"phone_number": ""
|
||||
},
|
||||
"vehicle": {
|
||||
"color": "",
|
||||
"make": "",
|
||||
"license_plate": "",
|
||||
"image_url": "",
|
||||
"year": 0,
|
||||
"license_plate_state": "",
|
||||
"model": ""
|
||||
},
|
||||
"route": {
|
||||
"origin": {
|
||||
"name": "",
|
||||
"lat": 0,
|
||||
"lng": 0,
|
||||
"address": ""
|
||||
},
|
||||
"destination": {
|
||||
"name": "",
|
||||
"lat": 0,
|
||||
"lng": 0,
|
||||
"address": ""
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
static propTypes = {
|
||||
data: React.PropTypes.object.isRequired,
|
||||
params: React.PropTypes.object.isRequired,
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps) {
|
||||
let params = nextProps.params;
|
||||
params.visit_date = new Date(params.visit_date);
|
||||
params.visit_time = new Date(params.visit_time);
|
||||
params.pickup_time = new Date(params.pickup_time);
|
||||
|
||||
if (!params.visit.destination.id) params.visit.destination.id = "";
|
||||
if (!params.visit.pickup.id) params.visit.pickup.id = "";
|
||||
if (!params.route.eta) params.route.eta = 0;
|
||||
|
||||
var minutes = Math.floor(params.route.eta / 60);
|
||||
var seconds = params.route.eta % 60;
|
||||
var formattedTime = `${minutes} minutes`
|
||||
if (minutes > 10) {
|
||||
var t = new Date();
|
||||
t.setSeconds(t.getSeconds() + params.route.eta);
|
||||
formattedTime = moment(t).format("hh:mm a");
|
||||
}
|
||||
|
||||
params.route.eta_formatted = formattedTime;
|
||||
|
||||
this.setState(Object.assign(this.state, { ride: params }));
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
let data = this.props.data;
|
||||
data.visitDate = new Date(data.visitDate);
|
||||
data.visitTime = new Date(data.visitTime);
|
||||
data.pickupTime = new Date(data.pickupTime);
|
||||
|
||||
this.setState(Object.assign(this.state, data));
|
||||
|
||||
let params = this.props.params;
|
||||
params.visit_date = new Date(params.visit_date);
|
||||
params.visit_time = new Date(params.visit_time);
|
||||
params.pickup_time = new Date(params.pickup_time);
|
||||
|
||||
if (!params.visit.destination.id) params.visit.destination.id = "";
|
||||
if (!params.visit.pickup.id) params.visit.pickup.id = "";
|
||||
if (!params.route.eta) params.route.eta = 0;
|
||||
|
||||
var minutes = Math.floor(params.route.eta / 60);
|
||||
var seconds = params.route.eta % 60;
|
||||
var formattedTime = `${minutes} minutes`
|
||||
if (minutes > 10) {
|
||||
var t = new Date();
|
||||
t.setSeconds(t.getSeconds() + params.route.eta);
|
||||
formattedTime = moment(t).format("hh:mm a");
|
||||
}
|
||||
|
||||
params.route.eta_formatted = formattedTime;
|
||||
|
||||
this.setState(Object.assign(this.state, { ride: params }));
|
||||
}
|
||||
|
||||
handlePickupChanged(res, state) {
|
||||
let route = state.state.ride.route;
|
||||
route.origin = {
|
||||
name: res.name,
|
||||
lat: res.lat,
|
||||
lng: res.lng,
|
||||
address: res.address
|
||||
}
|
||||
|
||||
let ride = state.state.ride;
|
||||
ride.route = route;
|
||||
|
||||
state.setState(Object.assign(state.state, {
|
||||
ride: ride,
|
||||
}));
|
||||
}
|
||||
|
||||
handleProviderChanged(res, state) {
|
||||
debugger;
|
||||
let route = state.state.ride.route;
|
||||
route.destination = {
|
||||
name: res.name,
|
||||
lat: res.lat,
|
||||
lng: res.lng,
|
||||
address: res.address
|
||||
}
|
||||
|
||||
let ride = state.state.ride;
|
||||
ride.route = route;
|
||||
|
||||
state.setState(Object.assign(state.state, {
|
||||
ride: ride,
|
||||
}));
|
||||
}
|
||||
|
||||
handleStatusChange(event, index, value, state) {
|
||||
let self = state;
|
||||
let ride = this.state.ride;
|
||||
ride.status.key = value;
|
||||
ride.status.value = event.target.innerText;
|
||||
|
||||
instance.get(`/v1/lyfthook/${ride.ride_uuid}/${ride.status.key}`).then(res => {
|
||||
res.data.visitDate = new Date(res.data.visitDate);
|
||||
res.data.visitTime = new Date(res.data.visitTime);
|
||||
res.data.pickupTime = new Date(res.data.pickupTime);
|
||||
|
||||
var minutes = Math.floor(res.data.route.eta / 60);
|
||||
var seconds = res.data.route.eta % 60;
|
||||
var formattedTime = `${minutes} minutes`
|
||||
if (seconds > 0) {
|
||||
formattedTime += ` ${seconds} seconds`
|
||||
}
|
||||
res.data.route.eta_formatted = formattedTime;
|
||||
|
||||
self.setState(Object.assign(self.state, {
|
||||
ride: res.data,
|
||||
}))
|
||||
}).catch(err => {
|
||||
console.error(err);
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
const rightStyle = {
|
||||
width: '80px',
|
||||
margin: '0 5px 0 10px'
|
||||
}
|
||||
|
||||
const imageStyle = { width: "64px", height: "40px" }
|
||||
const carImageStyle = { width: "50px", height: "22px" }
|
||||
let data = this.state.ride.route;
|
||||
|
||||
let carInfo = (
|
||||
<tr >
|
||||
<td style={{ padding: '4px' }} className="numeric">{this.state.ride.passenger.first_name} {this.state.ride.passenger.last_name}</td>
|
||||
<td style={{ padding: '4px' }} className="numeric">
|
||||
{this.state.ride.status.value}
|
||||
</td>
|
||||
<td style={{ padding: '4px' }} className="numeric">{this.state.ride.route.eta_formatted}</td>
|
||||
<td style={{ padding: '4px' }} className="numeric"> <img src={this.state.ride.vehicle.image_url} style={carImageStyle} /> {this.state.ride.vehicle.color} {this.state.ride.vehicle.make} {this.state.ride.vehicle.model} ({this.state.ride.vehicle.license_plate}) </td>
|
||||
</tr>
|
||||
);
|
||||
if (this.state.ride.status.key === "pending") {
|
||||
carInfo = (
|
||||
<tr >
|
||||
<td style={{ padding: '4px' }} className="numeric">{this.state.ride.passenger.first_name} {this.state.ride.passenger.last_name}</td>
|
||||
<td style={{ padding: '4px' }} className="numeric">
|
||||
{this.state.ride.status.value}
|
||||
</td>
|
||||
<td style={{ padding: '4px' }} className="numeric"></td>
|
||||
<td style={{ padding: '4px' }} className="numeric"></td>
|
||||
</tr>)
|
||||
}
|
||||
|
||||
return (
|
||||
|
||||
<article className="article padding-sm-v article-bordered">
|
||||
<GMaps data={this.state.ride} />
|
||||
<div className="container-fluid with-maxwidth" style={{ bottom: '55px', padding: '0px' }} >
|
||||
<div className="box box-default" style={{ position: 'relative', marginBottom: '2px', padding: '0px', opacity: .90, borderTopRightRadius: '20px', borderBottomRightRadius: '20px' }}>
|
||||
<div className="float-right" style={rightStyle}>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-md-12" style={{ margin: '0px', padding: '0px', opacity: .9, borderTopRightRadius: '20px', borderBottomRightRadius: '20px' }}>
|
||||
<div className="box box-default" style={{ position: 'relative', marginBottom: '2px', padding: '0px', opacity: .95, borderTopRightRadius: '20px', borderBottomRightRadius: '20px' }}>
|
||||
<div className="box-body" style={{ paddingLeft: '20px', paddingTop: '3px', paddingBottom: '0px', paddingRight: '0px' }} >
|
||||
<div className="float-left">
|
||||
<table className="cf" style={{ fontSize: '11px', margin: '0px', border: '0px', padding: '0px', opacity: .9 }}>
|
||||
|
||||
<thead >
|
||||
<tr>
|
||||
<th style={{ paddingLeft: '4px', paddingRight: '4px', fontSize: '10px' }}>Passenger</th>
|
||||
<th style={{ paddingLeft: '4px', paddingRight: '4px', fontSize: '10px' }}>Status</th>
|
||||
<th style={{ paddingLeft: '4px', paddingRight: '4px', fontSize: '10px' }} className="numeric">ETA</th>
|
||||
<th style={{ paddingLeft: '4px', paddingRight: '4px', fontSize: '10px' }} className="numeric">Vehicle</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{carInfo}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-md-12" style={{ margin: '0px', padding: '0px', opacity: .9, borderTopRightRadius: '20px', borderBottomRightRadius: '20px' }}>
|
||||
<div className="box box-default" style={{ position: 'relative', marginBottom: '2px', padding: '0px', opacity: .95, borderTopRightRadius: '20px', borderBottomRightRadius: '20px' }}>
|
||||
<div className="box-body" style={{ paddingLeft: '20px', paddingTop: '0px', paddingBottom: '0px', paddingRight: '0px' }} >
|
||||
<div className="float-left">
|
||||
<DatePicker
|
||||
id='pickupDatePicker'
|
||||
hintText="Ride Date"
|
||||
firstDayOfWeek={0}
|
||||
container="inline"
|
||||
textFieldStyle={{ width: '90px' }}
|
||||
floatingLabelStyle={styles.floatingLabelStyle}
|
||||
floatingLabelFocusStyle={styles.floatingLabelFocusStyle}
|
||||
value={this.state.ride.visit_date}
|
||||
/>
|
||||
<NEMTLocation data={data} title={'Pickup'} value={""} buttonvalue={this.state.ride.route.origin.name} onPlaceChanged={(event) => this.handlePickupChanged(event, this)} textSize={15} locationType={"pickup"} type={"primary"} icon={<MapsAddLocation color={fullWhite} />} />
|
||||
</div>
|
||||
<div className="float-right" style={rightStyle}>
|
||||
<TimePicker
|
||||
floatingLabelText="Pickup"
|
||||
floatingLabelFixed={true}
|
||||
id='pickupTimePicker'
|
||||
hintText="Pickup TIme"
|
||||
format="ampm"
|
||||
minutesStep={5}
|
||||
value={this.state.ride.pickup_time}
|
||||
textFieldStyle={{ width: '70px', color: 'rgb(0, 153, 204) !important' }}
|
||||
style={{ width: '100px', color: 'rgba(0, 153, 204) !important' }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-md-12" style={{ margin: '0px', padding: '0px', opacity: .95, borderTopRightRadius: '20px', borderBottomRightRadius: '20px' }}>
|
||||
<div className="box box-default" style={{ position: 'relative', marginBottom: '2px', padding: '0px', opacity: .95, borderTopRightRadius: '20px', borderBottomRightRadius: '20px' }}>
|
||||
<div className="box-body" style={{ paddingLeft: '20px', paddingTop: '0px', paddingBottom: '0px', paddingRight: '0px' }} >
|
||||
<div className="float-left">
|
||||
|
||||
<DatePicker
|
||||
id='pickupDatePicker'
|
||||
hintText="Visit Date"
|
||||
firstDayOfWeek={0}
|
||||
container="inline"
|
||||
textFieldStyle={{ width: '90px' }}
|
||||
floatingLabelStyle={styles.floatingLabelStyle}
|
||||
floatingLabelFocusStyle={styles.floatingLabelFocusStyle}
|
||||
value={this.state.ride.visit_date}
|
||||
/>
|
||||
|
||||
<NEMTLocation data={data} title={"Destination"} value={""} buttonvalue={this.state.ride.route.destination.name} onPlaceChanged={(event) => this.handleProviderChanged(event, this)} textSize={15} locationType={"provider"} type={'secondary'} icon={<MapsNearMe color={fullWhite} />} />
|
||||
|
||||
</div>
|
||||
<div className="float-right" style={rightStyle}>
|
||||
<TimePicker
|
||||
floatingLabelText="Visit Time"
|
||||
floatingLabelFixed={true}
|
||||
format="ampm"
|
||||
hintText="Visit Time"
|
||||
textFieldStyle={{ width: '80px', color: 'rgb(0, 153, 204) !important' }}
|
||||
value={this.state.ride.visit_time}
|
||||
onChange={this.handleTime}
|
||||
minutesStep={5}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Card
|
||||
style={{ color: '#424242', fontSize: '12px', borderRadius: '0px' }}
|
||||
>
|
||||
<CardHeader
|
||||
title="Details"
|
||||
actAsExpander
|
||||
showExpandableButton
|
||||
titleColor="#424242"
|
||||
subtitleColor="#424242"
|
||||
style={{ color: '#424242', borderRadius: '0px' }}
|
||||
/>
|
||||
<CardText
|
||||
expandable
|
||||
style={{ color: '#424242', fontSize: '9px', borderRadius: '0px' }}
|
||||
>
|
||||
<div className="box box-default table-box table-flip-scroll mdl-shadow--2dp">
|
||||
<table className="mdl-data-table table-bordered table-striped cf no-margin">
|
||||
<thead className="cf">
|
||||
<tr>
|
||||
<th className="numeric">Passenger</th>
|
||||
<th className="numeric">Phone</th>
|
||||
<th className="numeric">MemberID</th>
|
||||
<th className="numeric">RideID</th>
|
||||
<th className="numeric">Status</th>
|
||||
<th className="numeric">Distance</th>
|
||||
<th className="numeric">Duration</th>
|
||||
<th className="numeric">ETA</th>
|
||||
<th className="numeric">Vehicle</th>
|
||||
<th className="numeric">Driver</th>
|
||||
<th className="numeric">Driver Phone</th>
|
||||
<th className="numeric">Provider ID</th>
|
||||
<th className="numeric">Provider</th>
|
||||
<th className="numeric">Visit ID</th>
|
||||
<th className="numeric">Visit External ID</th>
|
||||
<th className="numeric">Notes</th>
|
||||
<th className="numeric">Scheduler</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className="numeric">{this.state.ride.passenger.first_name} {this.state.ride.passenger.last_name}</td>
|
||||
<td className="numeric">{this.state.ride.passenger.phone_number}</td>
|
||||
<td className="numeric">{this.state.ride.user.member}</td>
|
||||
<td className="numeric">{this.state.ride.ride_uuid}</td>
|
||||
<td className="numeric">
|
||||
<DropDownMenu
|
||||
value={this.state.ride.status.value}
|
||||
onChange={(e, i, v) => { this.handleStatusChange(e, i, v, this) }}
|
||||
>
|
||||
<MenuItem value={'accepted'} primaryText="Accepted" />
|
||||
<MenuItem value={'scheduled'} primaryText="Scheduled" />
|
||||
<MenuItem value={'canceled'} primaryText="Canceled" />
|
||||
<MenuItem value={'pending'} primaryText="Pending" />
|
||||
<MenuItem value={'arrived'} primaryText="Arrived" />
|
||||
<MenuItem value={'pickedUp'} primaryText="Picked Up" />
|
||||
<MenuItem value={'droppedOff'} primaryText="Dropped Off" />
|
||||
</DropDownMenu>
|
||||
</td>
|
||||
<td className="numeric">{this.state.ride.route.distance} miles</td>
|
||||
<td className="numeric">{this.state.ride.route.duration} seconds</td>
|
||||
<td className="numeric">{this.state.ride.route.eta_formatted}</td>
|
||||
<td className="numeric"> <img src={this.state.ride.vehicle.image_url} style={carImageStyle} /> {this.state.ride.vehicle.color} {this.state.ride.vehicle.make} {this.state.ride.vehicle.model} | {this.state.ride.vehicle.license_plate_state} | {this.state.ride.vehicle.license_plate} </td>
|
||||
<td className="numeric">{this.state.ride.driver.first_name} ({this.state.ride.driver.rating} stars)</td>
|
||||
<td className="numeric">{this.state.ride.driver.phone_number} </td>
|
||||
<td className="numeric">{this.state.ride.visit.destination.id} </td>
|
||||
<td className="numeric">{this.state.ride.visit.destination.name} </td>
|
||||
<td className="numeric">{this.state.ride.visit.visit_uuid} </td>
|
||||
<td className="numeric">{this.state.ride.visit.visit_external_id} </td>
|
||||
<td className="numeric">{this.state.ride.notes}</td>
|
||||
<td className="numeric">{this.state.ride.visit.created_user.name}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</CardText>
|
||||
</Card>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</article >
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
class Page extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.props = props;
|
||||
this.state = {
|
||||
ride: {
|
||||
"ride_uuid": "",
|
||||
"user": {
|
||||
"useruuid": "",
|
||||
"name": "",
|
||||
"member": ""
|
||||
},
|
||||
"status": {
|
||||
"key": "",
|
||||
"value": ""
|
||||
},
|
||||
"type": {
|
||||
"key": "",
|
||||
"value": ""
|
||||
},
|
||||
"notes": "",
|
||||
"passenger": {
|
||||
"user_id": "",
|
||||
"image_url": "",
|
||||
"first_name": "",
|
||||
"last_name": "",
|
||||
"phone_number": ""
|
||||
},
|
||||
"driver": {
|
||||
"rating": "",
|
||||
"image_url": "",
|
||||
"first_name": "",
|
||||
"phone_number": ""
|
||||
},
|
||||
"vehicle": {
|
||||
"color": "",
|
||||
"make": "",
|
||||
"license_plate": "",
|
||||
"image_url": "",
|
||||
"year": 0,
|
||||
"license_plate_state": "",
|
||||
"model": ""
|
||||
},
|
||||
"route": {
|
||||
"origin": {
|
||||
"name": "",
|
||||
"lat": 0,
|
||||
"lng": 0,
|
||||
"address": ""
|
||||
},
|
||||
"destination": {
|
||||
"name": "",
|
||||
"lat": 0,
|
||||
"lng": 0,
|
||||
"address": ""
|
||||
},
|
||||
"location": {
|
||||
"lat": 0,
|
||||
"lng": 0,
|
||||
"bearing": 0
|
||||
},
|
||||
"route_kml": "",
|
||||
"distance": 0,
|
||||
"duration": 0,
|
||||
"eta": 0
|
||||
},
|
||||
"visit": {
|
||||
"visit_uuid": "",
|
||||
"visit_external_id": "",
|
||||
"pickup": {
|
||||
"id": "",
|
||||
"name": ""
|
||||
},
|
||||
"destination": {
|
||||
"id": "",
|
||||
"name": ""
|
||||
},
|
||||
"created_user": {
|
||||
"useruuid": "",
|
||||
"name": ""
|
||||
}
|
||||
},
|
||||
"visit_date": new Date(),
|
||||
"visit_time": new Date(),
|
||||
"pickup_time": new Date()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.refreshContent(this);
|
||||
}
|
||||
|
||||
refreshContent(reactState) {
|
||||
let self = reactState;
|
||||
instance.get('/v1/nemt/rides/' + self.props.params.ride_uuid + '/eta').then((res) => {
|
||||
self.setState(Object.assign(self.state, { ride: res.data }));
|
||||
switch (self.state.ride.status.key) {
|
||||
case "accepted":
|
||||
case "arrived":
|
||||
case "pickedUp":
|
||||
case "pending":
|
||||
setTimeout(function () {
|
||||
this.refreshContent(self);
|
||||
}.bind(this), 60000);
|
||||
break;
|
||||
}
|
||||
}).catch(err => {
|
||||
console.error('Error to get riders: ', err);
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<section className="chapter">
|
||||
<QueueAnim type="top" className="ui-animate">
|
||||
<div key="3"><Services data={getConfirmationData()} params={this.state.ride} /></div>
|
||||
<BottomNavigationExampleSimple data={getConfirmationData()} params={this.state.ride} />
|
||||
</QueueAnim>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
module.exports = Page;
|
||||
53
src/routes/app/routes/pages/routes/terms/components/Terms.js
Normal file
53
src/routes/app/routes/pages/routes/terms/components/Terms.js
Normal file
@@ -0,0 +1,53 @@
|
||||
import React from 'react';
|
||||
import QueueAnim from 'rc-queue-anim';
|
||||
|
||||
const Hero = () => (
|
||||
<section className="hero">
|
||||
<div className="hero-content">
|
||||
<h1 className="hero-title">Terms of Service</h1>
|
||||
</div>
|
||||
<p className="text-muted">Effective Jan. 1st</p>
|
||||
</section>
|
||||
);
|
||||
|
||||
|
||||
const Terms = () => (
|
||||
<article className="article padding-lg-v article-dark article-bordered">
|
||||
|
||||
<div className="container-fluid with-maxwidth-sm">
|
||||
|
||||
<h4>Scope and application</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora consequuntur inventore animi iure ad voluptatem nobis eius odit excepturi nesciunt porro minus molestias provident necessitatibus, quos fuga hic dolorem dolore, autem totam. Quae vero, commodi? Aut, repellendus. Aliquam debitis ipsum nemo aperiam consequatur autem praesentium reiciendis tenetur et possimus architecto eaque, iusto obcaecati pariatur quasi maiores error corporis cumque. Fugit quaerat praesentium error, debitis excepturi porro autem recusandae commodi, est perferendis asperiores ut eum dolores exercitationem beatae facilis. Ipsa fugit modi totam laborum rem error quo aliquam minus eveniet ea! Quae, officiis dignissimos impedit obcaecati corporis odio modi sint!</p>
|
||||
|
||||
<h4>Collection of information</h4>
|
||||
<p>Iure iste sit, dolor quam quisquam mollitia modi non! Corporis aut modi a fuga veritatis, ducimus assumenda quae distinctio vero amet quas tempora libero, harum. Tenetur eum nam numquam dolorum ipsam rem dolor. Laudantium ipsa earum, officiis, pariatur obcaecati molestiae dolorem ad alias iusto libero sapiente iste placeat quo, voluptates beatae a et. Quasi minus porro, vel dolor accusantium quibusdam ex doloremque cum sed voluptates iusto voluptate, asperiores dolores maiores et sint laudantium blanditiis aut itaque recusandae pariatur! Corporis quae quisquam eligendi cumque corrupti. Natus amet, laboriosam, excepturi error quaerat soluta officiis itaque, dolorem eaque recusandae, incidunt nemo perspiciatis autem eius aut minus! Architecto fugiat provident inventore laudantium sed expedita modi iure dignissimos atque, accusantium reprehenderit voluptatibus esse tenetur, doloribus laborum, dicta voluptates laboriosam, eum delectus? Repudiandae praesentium odio doloremque quos ullam harum sapiente distinctio. Minima, ad ab nobis nihil aut recusandae itaque ipsum, magnam animi repellat nemo vitae harum dignissimos quisquam dicta! </p>
|
||||
|
||||
<h4>Use of information</h4>
|
||||
<p>Eius, maiores, eum. Quam eos est qui autem mollitia neque, esse quas voluptate ullam, voluptates, aspernatur doloremque harum cumque? Asperiores unde inventore ipsum nesciunt, odio aliquid voluptatum modi fuga molestias voluptatem, expedita veniam quibusdam iste laudantium voluptas molestiae? Similique aspernatur praesentium tempora, sed consequuntur officia quasi placeat adipisci quos fugit accusantium libero debitis sint cupiditate a, perspiciatis modi labore dolore error minus. Qui sequi est adipisci id nesciunt neque repellendus atque pariatur, doloremque quo eligendi, dolores iure impedit necessitatibus laudantium assumenda fugiat eum explicabo perspiciatis tempora corporis quasi.</p>
|
||||
<p>A, incidunt, iste inventore consequuntur magnam voluptas quo suscipit excepturi, neque voluptates doloribus quasi ratione animi autem, vitae fugit enim ipsum laudantium? Deleniti facilis, aliquam harum maiores eveniet, modi hic, praesentium quidem ratione eius incidunt eligendi. Quas commodi ratione reiciendis sint temporibus sit placeat totam atque delectus minus quo reprehenderit perspiciatis ex laboriosam, rem dolores! Culpa ipsum commodi ea iure voluptas, nisi maxime inventore, saepe nesciunt nostrum iste quasi aliquid totam! Repudiandae obcaecati nobis unde sapiente reiciendis itaque iste eum dolorem dolores dolor tempora corporis nulla quisquam magnam nemo accusantium vero similique voluptate, ea quibusdam odio quod esse eveniet. Voluptatibus, earum delectus eos veniam magnam asperiores blanditiis. Voluptatum consequuntur voluptatem est facere aut dolorem suscipit similique voluptas labore explicabo sed excepturi, quo tenetur nesciunt maiores aliquid, cum optio obcaecati earum reiciendis, cumque!</p>
|
||||
|
||||
<h4>Sharing of information</h4>
|
||||
<p>Libero porro, ipsum distinctio pariatur quidem fugiat iste sit natus fuga odit ipsa, facere sequi. Numquam delectus quod sequi beatae illo eos impedit sapiente corporis non possimus doloribus autem ducimus labore enim mollitia ipsa fuga totam modi libero sunt iure reiciendis, repudiandae. Aut est culpa quidem porro, possimus eaque tempora iste, cumque deserunt consequuntur doloribus distinctio quod soluta, natus sequi. Quis numquam at similique harum assumenda velit nostrum. Quas dicta possimus perferendis cum est consectetur ullam eum odit aperiam molestiae quis nihil dolore blanditiis ducimus incidunt temporibus corporis aliquam quod, ab? Obcaecati eveniet ducimus, iusto fugit autem quas consectetur sequi sit eos eius voluptatem in, nulla, cum, unde a earum. Nihil delectus praesentium eum odit aliquam rem consequatur atque maxime neque voluptate at culpa similique iste cupiditate ipsam nisi perferendis animi odio possimus facere, fuga, id cumque? Laudantium, id non?</p>
|
||||
<ul>
|
||||
<li>Illo voluptatum voluptatem ullam rem! Possimus, reiciendis, esse!</li>
|
||||
<li> Ullam, et dolor eligendi. Nostrum explicabo beatae cupiditate qui ut. Expedita hic, enim quos velit inventore saepe, aliquam ratione asperiores nemo veniam beatae.</li>
|
||||
<li>Quisquam cupiditate optio tenetur, possimus, id placeat atque necessitatibus illum provident dolorum eveniet odio voluptates temporibus.</li>
|
||||
<li>Accusantium dignissimos, vero iusto similique cum, accusamus enim nisi tempora obcaecati iure!</li>
|
||||
<li>Et quo, alias nemo maxime fugit quis voluptates architecto, eligendi atque officia corrupti omnis nihil sint cumque.</li>
|
||||
</ul>
|
||||
<p>Reprehenderit ipsum obcaecati deserunt ipsa adipisci dolorem vitae, porro cupiditate, praesentium unde tenetur impedit? Modi expedita quos quas ex nemo, assumenda vero velit repellat possimus molestiae tempore voluptatem, incidunt inventore quae? Saepe et pariatur, expedita, ex sit perferendis quasi officiis.</p>
|
||||
</div>
|
||||
|
||||
</article>
|
||||
);
|
||||
|
||||
const Page = () => (
|
||||
<section className="chapter page-terms">
|
||||
<QueueAnim type="bottom" className="ui-animate">
|
||||
<div key="1"><Hero /></div>
|
||||
<div key="2"><Terms /></div>
|
||||
</QueueAnim>
|
||||
</section>
|
||||
);
|
||||
|
||||
module.exports = Page;
|
||||
8
src/routes/app/routes/pages/routes/terms/index.js
Normal file
8
src/routes/app/routes/pages/routes/terms/index.js
Normal file
@@ -0,0 +1,8 @@
|
||||
module.exports = {
|
||||
path: 'terms',
|
||||
getComponent(nextState, cb) {
|
||||
require.ensure([], (require) => {
|
||||
cb(null, require('./components/Terms'));
|
||||
});
|
||||
}
|
||||
};
|
||||
18
src/routes/app/routes/tables/index.js
Normal file
18
src/routes/app/routes/tables/index.js
Normal file
@@ -0,0 +1,18 @@
|
||||
module.exports = {
|
||||
path: 'table',
|
||||
getChildRoutes(partialNextState, cb) {
|
||||
require.ensure([], (require) => {
|
||||
cb(null, [
|
||||
require('./routes/data'),
|
||||
require('./routes/static'),
|
||||
require('./routes/members'),
|
||||
require('./routes/rides'),
|
||||
require('./routes/visits'),
|
||||
require('./routes/users'),
|
||||
require('./routes/provider'),
|
||||
require('./routes/message'),
|
||||
require('./routes/organizations'),
|
||||
]);
|
||||
});
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,256 @@
|
||||
import React from 'react';
|
||||
import { Table, TableBody, TableHeader, TableHeaderColumn, TableRow, TableRowColumn, TableFooter } from 'material-ui/Table';
|
||||
|
||||
import TextField from 'material-ui/TextField';
|
||||
import Toggle from 'material-ui/Toggle';
|
||||
import QueueAnim from 'rc-queue-anim';
|
||||
|
||||
const TableExampleSimple = () => (
|
||||
<article className="article">
|
||||
<h2 className="article-title">Simple Data Table</h2>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHeaderColumn>ID</TableHeaderColumn>
|
||||
<TableHeaderColumn>Name</TableHeaderColumn>
|
||||
<TableHeaderColumn>Status</TableHeaderColumn>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
<TableRow>
|
||||
<TableRowColumn>1</TableRowColumn>
|
||||
<TableRowColumn>John Smith</TableRowColumn>
|
||||
<TableRowColumn>Employed</TableRowColumn>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableRowColumn>2</TableRowColumn>
|
||||
<TableRowColumn>Randal White</TableRowColumn>
|
||||
<TableRowColumn>Unemployed</TableRowColumn>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableRowColumn>3</TableRowColumn>
|
||||
<TableRowColumn>Stephanie Sanders</TableRowColumn>
|
||||
<TableRowColumn>Employed</TableRowColumn>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableRowColumn>4</TableRowColumn>
|
||||
<TableRowColumn>Steve Brown</TableRowColumn>
|
||||
<TableRowColumn>Employed</TableRowColumn>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
</Table>
|
||||
</article>
|
||||
);
|
||||
|
||||
// Cmplex example
|
||||
const styles = {
|
||||
propContainer: {
|
||||
width: 200,
|
||||
overflow: 'hidden',
|
||||
margin: '20px auto 0',
|
||||
},
|
||||
propToggleHeader: {
|
||||
margin: '20px auto 10px',
|
||||
},
|
||||
};
|
||||
|
||||
const tableData = [
|
||||
{
|
||||
name: 'John Smith',
|
||||
status: 'Employed',
|
||||
selected: true,
|
||||
},
|
||||
{
|
||||
name: 'Randal White',
|
||||
status: 'Unemployed',
|
||||
},
|
||||
{
|
||||
name: 'Stephanie Sanders',
|
||||
status: 'Employed',
|
||||
selected: true,
|
||||
},
|
||||
{
|
||||
name: 'Steve Brown',
|
||||
status: 'Employed',
|
||||
},
|
||||
{
|
||||
name: 'Joyce Whitten',
|
||||
status: 'Employed',
|
||||
},
|
||||
{
|
||||
name: 'Samuel Roberts',
|
||||
status: 'Employed',
|
||||
},
|
||||
{
|
||||
name: 'Adam Moore',
|
||||
status: 'Employed',
|
||||
},
|
||||
];
|
||||
|
||||
class TableExampleComplex extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
fixedHeader: true,
|
||||
fixedFooter: true,
|
||||
stripedRows: false,
|
||||
showRowHover: false,
|
||||
selectable: true,
|
||||
multiSelectable: false,
|
||||
enableSelectAll: false,
|
||||
deselectOnClickaway: true,
|
||||
showCheckboxes: true,
|
||||
height: '300px',
|
||||
};
|
||||
}
|
||||
|
||||
handleToggle = (event, toggled) => {
|
||||
this.setState({
|
||||
[event.target.name]: toggled,
|
||||
});
|
||||
};
|
||||
|
||||
handleChange = (event) => {
|
||||
this.setState({ height: event.target.value });
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<article className="article">
|
||||
<h2 className="article-title">Complex example</h2>
|
||||
<div className="row">
|
||||
<div className="col-xl-9">
|
||||
<Table
|
||||
height={this.state.height}
|
||||
fixedHeader={this.state.fixedHeader}
|
||||
fixedFooter={this.state.fixedFooter}
|
||||
selectable={this.state.selectable}
|
||||
multiSelectable={this.state.multiSelectable}
|
||||
>
|
||||
<TableHeader
|
||||
displaySelectAll={this.state.showCheckboxes}
|
||||
adjustForCheckbox={this.state.showCheckboxes}
|
||||
enableSelectAll={this.state.enableSelectAll}
|
||||
>
|
||||
<TableRow>
|
||||
<TableHeaderColumn colSpan="3" tooltip="Super Header" style={{ textAlign: 'center' }}>
|
||||
Super Header
|
||||
</TableHeaderColumn>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableHeaderColumn tooltip="The ID">ID</TableHeaderColumn>
|
||||
<TableHeaderColumn tooltip="The Name">Name</TableHeaderColumn>
|
||||
<TableHeaderColumn tooltip="The Status">Status</TableHeaderColumn>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody
|
||||
displayRowCheckbox={this.state.showCheckboxes}
|
||||
deselectOnClickaway={this.state.deselectOnClickaway}
|
||||
showRowHover={this.state.showRowHover}
|
||||
stripedRows={this.state.stripedRows}
|
||||
>
|
||||
{tableData.map((row, index) => (
|
||||
<TableRow key={index} selected={row.selected}>
|
||||
<TableRowColumn>{index}</TableRowColumn>
|
||||
<TableRowColumn>{row.name}</TableRowColumn>
|
||||
<TableRowColumn>{row.status}</TableRowColumn>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
<TableFooter
|
||||
adjustForCheckbox={this.state.showCheckboxes}
|
||||
>
|
||||
<TableRow>
|
||||
<TableRowColumn>ID</TableRowColumn>
|
||||
<TableRowColumn>Name</TableRowColumn>
|
||||
<TableRowColumn>Status</TableRowColumn>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableRowColumn colSpan="3" style={{ textAlign: 'center' }}>
|
||||
Super Footer
|
||||
</TableRowColumn>
|
||||
</TableRow>
|
||||
</TableFooter>
|
||||
</Table>
|
||||
</div>
|
||||
<div className="col-xl-3">
|
||||
<h6>Table Properties</h6>
|
||||
<TextField
|
||||
floatingLabelText="Table Body Height"
|
||||
defaultValue={this.state.height}
|
||||
onChange={this.handleChange}
|
||||
/>
|
||||
<Toggle
|
||||
name="fixedHeader"
|
||||
label="Fixed Header"
|
||||
onToggle={this.handleToggle}
|
||||
defaultToggled={this.state.fixedHeader}
|
||||
/>
|
||||
<Toggle
|
||||
name="fixedFooter"
|
||||
label="Fixed Footer"
|
||||
onToggle={this.handleToggle}
|
||||
defaultToggled={this.state.fixedFooter}
|
||||
/>
|
||||
<Toggle
|
||||
name="selectable"
|
||||
label="Selectable"
|
||||
onToggle={this.handleToggle}
|
||||
defaultToggled={this.state.selectable}
|
||||
/>
|
||||
<Toggle
|
||||
name="multiSelectable"
|
||||
label="Multi-Selectable"
|
||||
onToggle={this.handleToggle}
|
||||
defaultToggled={this.state.multiSelectable}
|
||||
/>
|
||||
<Toggle
|
||||
name="enableSelectAll"
|
||||
label="Enable Select All"
|
||||
onToggle={this.handleToggle}
|
||||
defaultToggled={this.state.enableSelectAll}
|
||||
/>
|
||||
<h6>TableBody Properties</h6>
|
||||
<Toggle
|
||||
name="deselectOnClickaway"
|
||||
label="Deselect On Clickaway"
|
||||
onToggle={this.handleToggle}
|
||||
defaultToggled={this.state.deselectOnClickaway}
|
||||
/>
|
||||
<Toggle
|
||||
name="stripedRows"
|
||||
label="Stripe Rows"
|
||||
onToggle={this.handleToggle}
|
||||
defaultToggled={this.state.stripedRows}
|
||||
/>
|
||||
<Toggle
|
||||
name="showRowHover"
|
||||
label="Show Row Hover"
|
||||
onToggle={this.handleToggle}
|
||||
defaultToggled={this.state.showRowHover}
|
||||
/>
|
||||
<h6>Multiple Properties</h6>
|
||||
<Toggle
|
||||
name="showCheckboxes"
|
||||
label="Show Checkboxes"
|
||||
onToggle={this.handleToggle}
|
||||
defaultToggled={this.state.showCheckboxes}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const Page = () => (
|
||||
<div className="container-fluid with-maxwidth chapter">
|
||||
<QueueAnim type="bottom" className="ui-animate">
|
||||
<div key="1"><TableExampleSimple /></div>
|
||||
<div key="2"><TableExampleComplex /></div>
|
||||
</QueueAnim>
|
||||
</div>
|
||||
);
|
||||
|
||||
module.exports = Page;
|
||||
8
src/routes/app/routes/tables/routes/data/index.js
Normal file
8
src/routes/app/routes/tables/routes/data/index.js
Normal file
@@ -0,0 +1,8 @@
|
||||
module.exports = {
|
||||
path: 'data',
|
||||
getComponent(nextState, cb) {
|
||||
require.ensure([], (require) => {
|
||||
cb(null, require('./components/DataTables'));
|
||||
});
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,332 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import $ from 'jquery';
|
||||
import dt from 'datatables.net';
|
||||
import responsive from 'datatables.net-responsive';
|
||||
import IconButton from 'material-ui/IconButton';
|
||||
import RaisedButton from 'material-ui/RaisedButton';
|
||||
import ContentAdd from 'material-ui/svg-icons/content/add';
|
||||
import FlatButton from 'material-ui/FlatButton';
|
||||
|
||||
|
||||
import {
|
||||
Row,
|
||||
Col,
|
||||
Grid,
|
||||
Panel,
|
||||
Table,
|
||||
PanelBody,
|
||||
PanelHeader,
|
||||
FormControl,
|
||||
PanelContainer,
|
||||
} from '@sketchpixy/rubix';
|
||||
|
||||
import ContactList from '../../../../../components/ContactList';
|
||||
import Dialog from 'material-ui/Dialog';
|
||||
import Instance from '../../../../../../../components/Connection';
|
||||
|
||||
dt.responsive = responsive;
|
||||
$.dataTable = dt;
|
||||
|
||||
function formatPhoneNumber(s) {
|
||||
var s2 = ("" + s).replace(/\D/g, '');
|
||||
var m = s2.match(/^(\d{3})(\d{3})(\d{4})$/);
|
||||
return (!m) ? null : "(" + m[1] + ") " + m[2] + "-" + m[3];
|
||||
}
|
||||
|
||||
const getDTList = function (member) {
|
||||
let list = [];
|
||||
|
||||
member.forEach((r, i) => {
|
||||
list.push(
|
||||
<tr key={r.useruuid}>
|
||||
<td><a href={"/#/app/member/" + r.useruuid}>{r.name}</a></td>
|
||||
<td>
|
||||
<div>
|
||||
<ContactList data={{
|
||||
driverMobile: r.mobile,
|
||||
memberMobile: r.mobile,
|
||||
// PLACEHOLDER
|
||||
schedulerEmail: "deployment@brighterdevelopment.com",
|
||||
// schedulerEmail: r.schedulerEmail,
|
||||
memberEmail: r.email,
|
||||
schedulerMobile: r.phonenumber,
|
||||
rideID: r.ride_uuid
|
||||
}}
|
||||
/> |
|
||||
<a href={"/#/app/form/steppers/" + r.useruuid} > Book </a>
|
||||
</div>
|
||||
|
||||
</td>
|
||||
<td><a href={"/#/app/member/" + r.useruuid}>{r.member}</a></td>
|
||||
<td><a href={"/#/app/member/" + r.useruuid}>{r.phonenumber}</a></td>
|
||||
{/* PLACEHOLDER */}
|
||||
<td><a href="#" >Highmark </a></td>
|
||||
<td>{r.eligible} <a href=""><i className="material-icons">refresh</i></a> </td>
|
||||
{/* PLACEHOLDER */}
|
||||
<td>Active</td>
|
||||
<td><a href={"/#/app/member/" + r.useruuid}>{r.rides}</a></td>
|
||||
{/* PLACEHOLDER */}
|
||||
<td><a href={"/#/app/table/rides/" + r.useruuid}>{r.rides}</a></td>
|
||||
<td>{r.gender}</td>
|
||||
<td>{r.birthdate}</td>
|
||||
<td>{r.created}</td>
|
||||
<td>{r.updated}</td>
|
||||
</tr>
|
||||
);
|
||||
}, this);
|
||||
|
||||
return list;
|
||||
}
|
||||
|
||||
class DatatableComponent extends React.Component {
|
||||
state = {
|
||||
members: []
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
const state = this
|
||||
Instance.getRawConn().get('/v1/nemt/users/member').then((res) => {
|
||||
let members = res.data.map(x => {
|
||||
x.eligible = "Verified";
|
||||
|
||||
console.log(x);
|
||||
|
||||
// if (!x.phonenumber || x.phonenumber === null || x.phonenumber === "") x.phonenumber = "";
|
||||
// if (!x.email || x.email === null || x.email === "") x.email = "";
|
||||
// x.phonenumber = x.phonenumber.replace('+1', '');
|
||||
// x.phonenumber = formatPhoneNumber(x.phonenumber);
|
||||
|
||||
if (x.addresses && x.addresses.length > 0) {
|
||||
x.addresses.forEach((a) => {
|
||||
switch (a.address_type) {
|
||||
case "home":
|
||||
x.home = a.address;
|
||||
break;
|
||||
case "work":
|
||||
x.work = a.address;
|
||||
break;
|
||||
}
|
||||
}, this);
|
||||
}
|
||||
|
||||
if (!x.work || x.work === null || x.work === "") x.work = "";
|
||||
if (!x.home || x.home === null || x.home === "") x.home = "";
|
||||
|
||||
// x.work = "";
|
||||
// x.home = "";
|
||||
|
||||
if (!x.phonenumber || x.phonenumber === null || x.phonenumber === "") x.phonenumber = "";
|
||||
if (!x.email || x.email === null || x.email === "") x.email = "";
|
||||
x.phonenumber = x.phonenumber.replace('+1', '');
|
||||
x.phonenumber = formatPhoneNumber(x.phonenumber);
|
||||
x.birthdate = new Date(x.birthdate).toLocaleDateString();
|
||||
|
||||
if (x.gender === "M") x.gender = "Male";
|
||||
if (x.gender === "F") x.gender = "Female";
|
||||
// if (x.gender === "U") x.gender = "Other";
|
||||
|
||||
if (x.rides) x.rides = x.rides.length;
|
||||
else x.rides = 0
|
||||
|
||||
return x;
|
||||
})
|
||||
|
||||
members = getDTList(members);
|
||||
state.setState(Object.assign(state.state, { members: members }));
|
||||
$(ReactDOM.findDOMNode(state.example))
|
||||
.addClass('nowrap')
|
||||
.dataTable({
|
||||
responsive: true,
|
||||
dom: 'Bfrtip',
|
||||
buttons: [
|
||||
'copy', 'pdf'
|
||||
],
|
||||
scrollX: true,
|
||||
scroller: {
|
||||
loadingIndicator: true
|
||||
},
|
||||
// columns: TABLE_COLUMNS_SORT_STYLE,
|
||||
responsive: true,
|
||||
"bStateSave": true,
|
||||
details: {
|
||||
type: 'inline'
|
||||
},
|
||||
columnDefs: [
|
||||
{ targets: [-1, -3], className: 'dt-body-right mdl-data-table__cell--non-numeric' }
|
||||
]
|
||||
});
|
||||
state.decorateButtons();
|
||||
state.decorateSelect();
|
||||
state.decorateSearchBar();
|
||||
state.decorateColumns();
|
||||
}).catch((err) => { console.error(err); });
|
||||
}
|
||||
|
||||
|
||||
decorateColumns() {
|
||||
let cols = $('td');
|
||||
let colStyle = {
|
||||
'font-family': 'Roboto, sans-serif',
|
||||
'font-size': '13px',
|
||||
'font-weight': '300',
|
||||
'text-align': 'left',
|
||||
};
|
||||
cols.css(colStyle);
|
||||
cols.removeClass('sorting_1');
|
||||
|
||||
let headers = $('th');
|
||||
let headerStyle = {
|
||||
'color': 'rgb(158, 158, 158)',
|
||||
'text-align': 'left',
|
||||
'font-weight': '600',
|
||||
'font-size': '12px'
|
||||
};
|
||||
headers.css(headerStyle);
|
||||
|
||||
let oddRows = $('.odd');
|
||||
let evenRows = $('.even');
|
||||
|
||||
let oddStyle = {
|
||||
'background': 'rgba(127, 221, 233, 0.4)',
|
||||
'text-shadow': 'none',
|
||||
'border-bottom': '1px solid rgb(224, 224, 224)',
|
||||
'color': 'rgba(0, 0, 0, 0.87)',
|
||||
'height': '45px'
|
||||
};
|
||||
oddRows.css(oddStyle);
|
||||
|
||||
let evenStyle = oddStyle;
|
||||
evenStyle['background'] = '#fff';
|
||||
|
||||
evenRows.css(evenStyle);
|
||||
}
|
||||
|
||||
decorateSelect() {
|
||||
let instance = this;
|
||||
let selectElement = $('select[class]');
|
||||
selectElement.addClass('mdl');
|
||||
|
||||
selectElement.click(function () {
|
||||
instance.decorateButtons();
|
||||
});
|
||||
|
||||
let selectLabel = $('#DataTables_Table_0_length > label');
|
||||
let style = {
|
||||
'color': 'rgb(158, 158, 158)',
|
||||
'text-align': 'left',
|
||||
'font-weight': '500',
|
||||
'font-size': '11px'
|
||||
};
|
||||
selectLabel.css(style);
|
||||
}
|
||||
|
||||
decorateSearchBar() {
|
||||
let instance = this;
|
||||
|
||||
let searchbar = $('input[type="search"]');
|
||||
searchbar.bind('input', function () {
|
||||
instance.decorateButtons();
|
||||
instance.decorateColumns();
|
||||
});
|
||||
|
||||
searchbar.addClass('mdl-textfield__input');
|
||||
searchbar.attr('placeholder', '');
|
||||
|
||||
let searchLabel = $('#DataTables_Table_0_filter > label');
|
||||
searchLabel.css({ 'color': '#fff' });
|
||||
searchbar.css({ 'color': 'rgb(158, 158, 158)' })
|
||||
|
||||
let searchFilter = $('#DataTables_Table_0_filter');
|
||||
searchFilter.append('<svg viewBox="0 0 24 24" style="display: inline-block; color: rgba(0, 0, 0, 0.87); fill: currentcolor; height: 24px; width: 24px; user-select: none; transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; margin-top: 12px;"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path></svg>');
|
||||
}
|
||||
|
||||
decorateButtons() {
|
||||
let instance = this;
|
||||
let paginateButtons = $('a.paginate_button');
|
||||
paginateButtons.addClass('mdl-button');
|
||||
|
||||
let selectedButton = $('a.paginate_button.current');
|
||||
selectedButton.addClass('mdl-button mdl-button--raised mdl-button--colored');
|
||||
|
||||
let style = {
|
||||
'background': 'rgb(0, 188, 212)',
|
||||
'font-weight': '400',
|
||||
};
|
||||
selectedButton.css(style);
|
||||
|
||||
paginateButtons.click(function () {
|
||||
instance.decorateButtons();
|
||||
instance.decorateColumns();
|
||||
});
|
||||
|
||||
let sortingButtons = $('th.sorting, th.sorting_asc, th.sorting_desc');
|
||||
sortingButtons.click(function () {
|
||||
instance.decorateButtons();
|
||||
instance.decorateColumns();
|
||||
});
|
||||
|
||||
let entriesLabel = $('#DataTables_Table_0_info');
|
||||
entriesLabel.css({
|
||||
'color': 'rgb(158, 158, 158)',
|
||||
'text-align': 'left',
|
||||
'font-weight': '400',
|
||||
'font-size': '12px'
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Table ref={(c) => this.example = c} className='display' cellSpacing='0' width='100%'>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Action</th>
|
||||
<th>Subscriber ID</th>
|
||||
<th>Mobile</th>
|
||||
<th>Plan</th>
|
||||
<th>Eligibility</th>
|
||||
<th>Status</th>
|
||||
<th>Rides</th>
|
||||
<th>Visits</th>
|
||||
<th>Gender</th>
|
||||
<th>Birth Date</th>
|
||||
<th>Created</th>
|
||||
<th>Updated</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{this.state.members}
|
||||
</tbody>
|
||||
</Table>
|
||||
|
||||
);
|
||||
<BottomNavigationExampleSimple />
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
export default class Datatablesjs extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<Row>
|
||||
<Col xs={12}>
|
||||
<PanelContainer>
|
||||
<Panel>
|
||||
<PanelBody>
|
||||
<Grid>
|
||||
<Row>
|
||||
<Col xs={12}>
|
||||
<DatatableComponent />
|
||||
<br />
|
||||
</Col>
|
||||
</Row>
|
||||
</Grid>
|
||||
</PanelBody>
|
||||
</Panel>
|
||||
</PanelContainer>
|
||||
</Col>
|
||||
</Row>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
import React from 'react';
|
||||
import QueueAnim from 'rc-queue-anim';
|
||||
import Datatable from './Datatable';
|
||||
import FlatButton from 'material-ui/FlatButton';
|
||||
import BottomNavigationExampleSimple from '../../../../ui/routes/components/components/BottomNavigation';
|
||||
import IconButton from 'material-ui/IconButton';
|
||||
import ToolbarSection from '../../../../ui/routes/components/components/Toolbar2.js';
|
||||
const Page = () => (
|
||||
<section className="container-fluid with-maxwidth">
|
||||
<QueueAnim type="bottom" className="ui-animate">
|
||||
<div key="1"><h2 className="article-title">Manage Members</h2>
|
||||
<ToolbarSection/>
|
||||
<Datatable />
|
||||
</div>
|
||||
</QueueAnim>
|
||||
</section>
|
||||
);
|
||||
|
||||
module.exports = Page;
|
||||
8
src/routes/app/routes/tables/routes/members/index.js
Normal file
8
src/routes/app/routes/tables/routes/members/index.js
Normal file
@@ -0,0 +1,8 @@
|
||||
module.exports = {
|
||||
path: 'members',
|
||||
getComponent(nextState, cb) {
|
||||
require.ensure([], (require) => {
|
||||
cb(null, require('./components/Page'));
|
||||
});
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,346 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import $ from 'jquery';
|
||||
import dt from 'datatables.net';
|
||||
import responsive from 'datatables.net-responsive';
|
||||
import IconButton from 'material-ui/IconButton';
|
||||
import RaisedButton from 'material-ui/RaisedButton';
|
||||
import ContentAdd from 'material-ui/svg-icons/content/add';
|
||||
|
||||
import Instance from '../../../../../../../components/Connection';
|
||||
|
||||
import {
|
||||
Row,
|
||||
Col,
|
||||
Grid,
|
||||
Panel,
|
||||
Table,
|
||||
PanelBody,
|
||||
PanelHeader,
|
||||
FormControl,
|
||||
PanelContainer,
|
||||
} from '@sketchpixy/rubix';
|
||||
|
||||
dt.responsive = responsive;
|
||||
$.dataTable = dt;
|
||||
|
||||
function formatPhoneNumber(s) {
|
||||
var s2 = ("" + s).replace(/\D/g, '');
|
||||
var m = s2.match(/^(\d{3})(\d{3})(\d{4})$/);
|
||||
return (!m) ? null : "(" + m[1] + ") " + m[2] + "-" + m[3];
|
||||
}
|
||||
|
||||
const getDTList = function (provider) {
|
||||
let list = [];
|
||||
|
||||
provider.forEach((r, i) => {
|
||||
list.push(
|
||||
<tr key={r.provider_uuid}>
|
||||
<td><a href="/#/app/table/rides" className="cancel_ride"><i className="material-icons">email</i></a> <a href={"/#/app/page/map/" + r.id}><i className="material-icons"><i className="material-icons">phone</i></i></a><a href="/#/app/table/rides" ><i className="material-icons">sms</i></a> </td>
|
||||
<td>12/17/2018</td>
|
||||
<td>11:14 AM CST</td>
|
||||
<td>SMS</td>
|
||||
<td>I need change!</td>
|
||||
<td>Member</td>
|
||||
{/* <td><a href="#"> Jane Doe</a> </td> */}
|
||||
<td><a href={"/#/app/member/" + r.user_id}>{r.memberName}</a></td>
|
||||
<td>Read</td>
|
||||
<td>Jane Di Spachta</td>
|
||||
<td><a href="#">A33333JSJ999AQWS</a> </td>
|
||||
<td><a href="#">33JSJ93333JSJ999AQWS</a> </td>
|
||||
<td><a href="#">Rush Memorial Hospital</a> </td>
|
||||
<td><a href="#">93333JSJ999AQWSSSA</a> </td>
|
||||
{/* <td><a href={"/#/app/member/" + r.useruuid}>{r.name}</a></td>
|
||||
<td><a href={"/#/app/member/" + r.useruuid}>{r.member}</a></td>
|
||||
<td>{r.eligible} <a href=""><i className="material-icons">refresh</i></a> </td>
|
||||
<td><a href={"/#/app/member/" + r.useruuid}>{r.rides}</a></td>
|
||||
<td><a href={"/#/app/member/" + r.useruuid}>{r.home}</a></td>
|
||||
<td>{r.work}</td>
|
||||
<td>{r.phonenumber}<a href="/#/app/table/rides" ><i className="material-icons">phone</i></a> <a href="/#/app/table/rides" ><i className="material-icons">sms</i></a> </td>
|
||||
<td>{r.email}<a href="/#/app/table/rides" ><i className="material-icons">email</i></a> </td>
|
||||
<td>{r.gender}</td>
|
||||
<td>{r.birthdate}</td> */}
|
||||
|
||||
|
||||
{/* <td><a href={"/#/app/member/" + r.user_id}>{r.memberName}</a></td>
|
||||
<td><a href={"/#/app/member/" + r.user_id}>{r.member}</a></td>
|
||||
<td><NEMTLocation data={r} title={"Pickup"} value={""} buttonvalue={r.pickup} onPlaceChanged={handleProviderChanged} textSize={30} type="flat" /></td>
|
||||
<td><NEMTLocation data={r} title={"Destination"} value={""} buttonvalue={r.destination} onPlaceChanged={handleProviderChanged} textSize={30} locationType="provider" type="flat" /></td>
|
||||
<td><a href="/#/app/table/rides" ><i className="material-icons">phone</i></a> <a href="/#/app/table/rides" ><i className="material-icons">sms</i></a> {r.driver_name} | {r.driver_rating} stars </td>
|
||||
<td>{r.muk_id}</td>
|
||||
<td>{r.internal_id}</td>
|
||||
<td>{r.name}</td>
|
||||
<td>{r.address.street_address_1 + " " + (r.address.street_address_2 || "") + " - " + r.address.city + " - " + r.address.state + " (" + r.address.zipcode + ")"}</td>
|
||||
<td>{r.address.phone_number}</td> */}
|
||||
</tr>
|
||||
);
|
||||
}, this);
|
||||
|
||||
return list;
|
||||
}
|
||||
|
||||
class DatatableComponent extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.props = props;
|
||||
}
|
||||
|
||||
state = {
|
||||
providers: []
|
||||
}
|
||||
|
||||
reloadTableData(names) {
|
||||
const table = $(ReactDOM.findDOMNode(self.example)).DataTable();
|
||||
table.clear();
|
||||
table.rows.add(names);
|
||||
table.draw();
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps) {
|
||||
if (nextProps.newProviders && nextProps.newProviders.length > 0) {
|
||||
const self = this;
|
||||
Instance.getRawConn().get('/v1/nemt/provider/participating?sort=name').then((res) => {
|
||||
let providers = res.data;
|
||||
let newProv = nextProps.newProviders.map(p => {
|
||||
return [p.muk_id, p.internal_id, p.name, p.address.street_address_1 + " " + (p.address.street_address_2 || "") + " - " + p.address.city + " - " + p.address.state + " (" + p.address.zipcode + ")", p.address.phone_number];
|
||||
});
|
||||
|
||||
const table = $(ReactDOM.findDOMNode(self.example)).DataTable();
|
||||
table.rows.add(newProv);
|
||||
providers = getDTList(providers)
|
||||
self.setState(Object.assign(self.state, { providers: providers }));
|
||||
table.draw(true);
|
||||
|
||||
self.decorateButtons();
|
||||
self.decorateSelect();
|
||||
self.decorateColumns();
|
||||
}).catch((err) => { console.error(err); });
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
$(ReactDOM.findDOMNode(this.example)).DataTable().destroy(true);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
const state = this;
|
||||
|
||||
Instance.getRawConn().get('/v1/nemt/provider/participating?sort=name').then((res) => {
|
||||
let providers = res.data;
|
||||
providers = getDTList(providers);
|
||||
state.setState(Object.assign(state.state, { providers: providers }));
|
||||
$(ReactDOM.findDOMNode(state.example))
|
||||
.addClass('nowrap')
|
||||
.dataTable({
|
||||
responsive: true,
|
||||
dom: 'Bfrtip',
|
||||
buttons: [
|
||||
'copy', 'pdf'
|
||||
],
|
||||
// columns: TABLE_COLUMNS_SORT_STYLE,
|
||||
responsive: true,
|
||||
"bStateSave": true,
|
||||
details: {
|
||||
type: 'inline'
|
||||
},
|
||||
columnDefs: [
|
||||
{ targets: [-1, -3], className: 'dt-body-right mdl-data-table__cell--non-numeric' }
|
||||
]
|
||||
});
|
||||
state.decorateButtons();
|
||||
state.decorateSelect();
|
||||
state.decorateSearchBar();
|
||||
state.decorateColumns();
|
||||
}).catch((err) => { console.error(err); });
|
||||
}
|
||||
|
||||
decorateColumns() {
|
||||
let cols = $('td');
|
||||
let colStyle = {
|
||||
'font-family': 'Roboto, sans-serif',
|
||||
'font-size': '13px',
|
||||
'font-weight': '300',
|
||||
'text-align': 'left',
|
||||
};
|
||||
cols.css(colStyle);
|
||||
cols.removeClass('sorting_1');
|
||||
|
||||
let headers = $('th');
|
||||
let headerStyle = {
|
||||
'color': 'rgb(158, 158, 158)',
|
||||
'text-align': 'left',
|
||||
'font-weight': '600',
|
||||
'font-size': '12px'
|
||||
};
|
||||
headers.css(headerStyle);
|
||||
|
||||
let oddRows = $('.odd');
|
||||
let evenRows = $('.even');
|
||||
|
||||
let oddStyle = {
|
||||
'background': 'rgba(127, 221, 233, 0.4)',
|
||||
'text-shadow': 'none',
|
||||
'border-bottom': '1px solid rgb(224, 224, 224)',
|
||||
'color': 'rgba(0, 0, 0, 0.87)',
|
||||
'height': '45px'
|
||||
};
|
||||
oddRows.css(oddStyle);
|
||||
|
||||
let evenStyle = oddStyle;
|
||||
evenStyle['background'] = '#fff';
|
||||
|
||||
evenRows.css(evenStyle);
|
||||
}
|
||||
|
||||
decorateSelect() {
|
||||
let instance = this;
|
||||
let selectElement = $('select[class]');
|
||||
selectElement.addClass('mdl');
|
||||
|
||||
selectElement.click(function () {
|
||||
instance.decorateButtons();
|
||||
});
|
||||
|
||||
let selectLabel = $('#DataTables_Table_0_length > label');
|
||||
let style = {
|
||||
'color': 'rgb(158, 158, 158)',
|
||||
'text-align': 'left',
|
||||
'font-weight': '500',
|
||||
'font-size': '11px'
|
||||
};
|
||||
selectLabel.css(style);
|
||||
}
|
||||
|
||||
decorateSearchBar() {
|
||||
let instance = this;
|
||||
|
||||
let searchbar = $('input[type="search"]');
|
||||
searchbar.bind('input', function () {
|
||||
instance.decorateButtons();
|
||||
instance.decorateColumns();
|
||||
});
|
||||
|
||||
searchbar.addClass('mdl-textfield__input');
|
||||
searchbar.attr('placeholder', '');
|
||||
|
||||
let searchLabel = $('#DataTables_Table_0_filter > label');
|
||||
searchLabel.css({ 'color': '#fff' });
|
||||
searchbar.css({ 'color': 'rgb(158, 158, 158)' })
|
||||
|
||||
let searchFilter = $('#DataTables_Table_0_filter');
|
||||
searchFilter.append('<svg viewBox="0 0 24 24" style="display: inline-block; color: rgba(0, 0, 0, 0.87); fill: currentcolor; height: 24px; width: 24px; user-select: none; transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; margin-top: 12px;"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path></svg>');
|
||||
}
|
||||
|
||||
decorateButtons() {
|
||||
let instance = this;
|
||||
let paginateButtons = $('a.paginate_button');
|
||||
paginateButtons.addClass('mdl-button');
|
||||
|
||||
let selectedButton = $('a.paginate_button.current');
|
||||
selectedButton.addClass('mdl-button mdl-button--raised mdl-button--colored');
|
||||
|
||||
let style = {
|
||||
'background': 'rgb(0, 188, 212)',
|
||||
'font-weight': '400',
|
||||
};
|
||||
selectedButton.css(style);
|
||||
|
||||
paginateButtons.click(function () {
|
||||
instance.decorateButtons();
|
||||
instance.decorateColumns();
|
||||
});
|
||||
|
||||
let sortingButtons = $('th.sorting, th.sorting_asc, th.sorting_desc');
|
||||
sortingButtons.click(function () {
|
||||
instance.decorateButtons();
|
||||
instance.decorateColumns();
|
||||
});
|
||||
|
||||
let entriesLabel = $('#DataTables_Table_0_info');
|
||||
entriesLabel.css({
|
||||
'color': 'rgb(158, 158, 158)',
|
||||
'text-align': 'left',
|
||||
'font-weight': '400',
|
||||
'font-size': '12px'
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Table ref={(c) => this.example = c} className='display' cellSpacing='0' width='100%'>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Actions</th>
|
||||
<th>Date</th>
|
||||
<th>Time</th>
|
||||
<th>Type</th>
|
||||
<th>Message</th>
|
||||
<th>Source</th>
|
||||
<th>Member</th>
|
||||
<th>Dispatcher</th>
|
||||
<th>Status</th>
|
||||
<th>Visit</th>
|
||||
<th>Ride</th>
|
||||
<th>Provider</th>
|
||||
<th>Message ID</th>
|
||||
{/* <th>MUK</th>
|
||||
<th>Internal ID</th>
|
||||
<th>Name</th>
|
||||
<th>Address</th>
|
||||
<th>Phone</th> */}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{this.state.providers}
|
||||
</tbody>
|
||||
</Table>
|
||||
|
||||
);
|
||||
<BottomNavigationExampleSimple />
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
export default class Datatablesjs extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.props = props;
|
||||
}
|
||||
|
||||
state = {
|
||||
providerChange: [],
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps) {
|
||||
let providers = nextProps.providerChange;
|
||||
this.setState(Object.assign(this.state, { providerChange: providers }));
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
let providers = this.props.providerChange;
|
||||
this.setState(Object.assign(this.state, { providerChange: providers }));
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Row>
|
||||
<Col xs={12}>
|
||||
<PanelContainer>
|
||||
<Panel>
|
||||
<PanelBody>
|
||||
<Grid>
|
||||
<Row>
|
||||
<Col xs={12}>
|
||||
<DatatableComponent newProviders={this.state.providerChange} />
|
||||
<br />
|
||||
</Col>
|
||||
</Row>
|
||||
</Grid>
|
||||
</PanelBody>
|
||||
</Panel>
|
||||
</PanelContainer>
|
||||
</Col>
|
||||
</Row>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,350 @@
|
||||
import React, { Component } from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import PropTypes from 'prop-types';
|
||||
const axios = require('axios');
|
||||
|
||||
import FlatButton from 'material-ui/FlatButton';
|
||||
import Dialog from 'material-ui/Dialog';
|
||||
import { List, ListItem, makeSelectable } from 'material-ui/List';
|
||||
import RaisedButton from 'material-ui/RaisedButton';
|
||||
import TextField from 'material-ui/TextField';
|
||||
import Subheader from 'material-ui/Subheader';
|
||||
import Divider from 'material-ui/Divider';
|
||||
import Checkbox from 'material-ui/Checkbox';
|
||||
import MapsLocalHospital from 'material-ui/svg-icons/maps/local-hospital';
|
||||
import Instance from '../../../../../../../components/Connection';
|
||||
|
||||
const customContentStyle = {
|
||||
width: '100%',
|
||||
maxWidth: 'none',
|
||||
};
|
||||
|
||||
const groupBy = function (array, f) {
|
||||
var groups = {};
|
||||
array.forEach(function (o) {
|
||||
var group = JSON.stringify(f(o));
|
||||
groups[group] = groups[group] || [];
|
||||
groups[group].push(o);
|
||||
});
|
||||
return Object.keys(groups).map(function (group) {
|
||||
return groups[group];
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
export default class MessageSelection extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.props = props;
|
||||
}
|
||||
|
||||
state = {
|
||||
Messages: [],
|
||||
selectedMessages: [],
|
||||
open: false,
|
||||
buttonValue: '',
|
||||
icon: '',
|
||||
floatingLabelText: '',
|
||||
value: '',
|
||||
geolocation: {
|
||||
lat: 0,
|
||||
long: 0
|
||||
}
|
||||
};
|
||||
|
||||
static propTypes = {
|
||||
title: React.PropTypes.string,
|
||||
buttonValue: React.PropTypes.string,
|
||||
icon: React.PropTypes.string,
|
||||
onMessagesAdded: React.PropTypes.function
|
||||
};
|
||||
|
||||
handleOpen = (e, self) => {
|
||||
self.setState(Object.assign(self.state, { open: true, Messages: [], selectedMessages: [], value: '' }));
|
||||
};
|
||||
|
||||
handleCancel = (e, self) => {
|
||||
self.setState(Object.assign(self.state, { open: false }));
|
||||
};
|
||||
|
||||
handleClose = (e, self) => {
|
||||
if (self.state.selectedMessages.length > 0) {
|
||||
let params = []
|
||||
|
||||
self.state.selectedMessages.forEach(p => {
|
||||
let result = params.find(pr => p.id === pr.id);
|
||||
if (result) {
|
||||
let index = params.indexOf(result);
|
||||
if (index > -1) {
|
||||
params.splice(index, 1);
|
||||
result.raw.fivePartKeyGroups.push(p.raw.fivePartKeyGroups);
|
||||
params.push(result);
|
||||
}
|
||||
} else {
|
||||
params.push(p);
|
||||
}
|
||||
}, this);
|
||||
|
||||
params = params.map(p => { return p.raw; });
|
||||
|
||||
if (params && params.length > 0) {
|
||||
let url = `/v1/nemt/Message`;
|
||||
Instance.getRawConn().post(url, params).then(res => {
|
||||
if (self.props.onMessagesAdded) {
|
||||
self.props.onMessagesAdded(res.data);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
self.setState(Object.assign(self.state, { open: false }));
|
||||
};
|
||||
|
||||
handleRemoveMessage = (event, Message, self) => {
|
||||
event.preventDefault();
|
||||
let selectedMessages = self.state.selectedMessages;
|
||||
let result = selectedMessages.find(p => p.object_id === Message.object_id);
|
||||
if (result) {
|
||||
const index = selectedMessages.indexOf(result);
|
||||
if (index > -1) {
|
||||
selectedMessages.splice(index, 1);
|
||||
}
|
||||
}
|
||||
self.setState(Object.assign(self.state, { selectedMessages: selectedMessages }));
|
||||
}
|
||||
|
||||
handleMessageClick = (event, Message, self) => {
|
||||
event.preventDefault();
|
||||
let selectedMessages = self.state.selectedMessages;
|
||||
debugger;
|
||||
let result = selectedMessages.find(p => p.object_id === Message.object_id);
|
||||
if (result) {
|
||||
const index = selectedMessages.indexOf(result);
|
||||
if (index > -1) {
|
||||
selectedMessages.splice(index, 1);
|
||||
}
|
||||
} else {
|
||||
selectedMessages.push(Message);
|
||||
}
|
||||
self.setState(Object.assign(self.state, { selectedMessages: selectedMessages }));
|
||||
}
|
||||
|
||||
searchMessage(e) {
|
||||
let MessageName = e.target.value;
|
||||
this.setState(Object.assign(this.state, { value: MessageName }));
|
||||
let url = `/v1/nemt/Message?lat=${this.state.geolocation.lat}&long=${this.state.geolocation.long}&limit=20&name=${MessageName}&sortby=distance`
|
||||
Instance.getRawConn().get(encodeURI(url)).then(res => {
|
||||
if (res.data.resultStatus === "SUCCESS") {
|
||||
if (res.data.Messages && res.data.Messages.length > 0) {
|
||||
var places = [];
|
||||
res.data.Messages.forEach(p => {
|
||||
var result = groupBy(p.fivePartKeyGroups, function (item) {
|
||||
return [item.MessageNum, item.MessageNumSuffix, item.locationSeqNum, item.planCode, item.productId];
|
||||
});
|
||||
|
||||
result = result.map(r => {
|
||||
let raw = p;
|
||||
raw.fivePartKeyGroups = r;
|
||||
|
||||
let clickResult = {
|
||||
id: p.mukId,
|
||||
address: `${p.streetName_1}, ${p.cityName}, ${p.state} (${p.zipCode})`,
|
||||
lat: parseFloat(p.latitude),
|
||||
lng: parseFloat(p.longitude),
|
||||
name: p.MessageName,
|
||||
type: "Message",
|
||||
internal_id: r[0].MessageNum,
|
||||
internal_id_suffix: r[0].MessageNumSuffix,
|
||||
location_seq_num: r[0].locationSeqNum,
|
||||
plan_code: r[0].planCode,
|
||||
product_id: r[0].productId,
|
||||
treatment_code: r[0].treatmentCategoryCode,
|
||||
object_id: p.mukId + '-' + r[0].MessageNum + '-' + r[0].planCode + '-' + r[0].productId,
|
||||
raw: raw,
|
||||
text: `${p.MessageName} - ${p.streetName_1}, ${p.cityName}, ${p.state} (${p.zipCode})`
|
||||
}
|
||||
|
||||
let checked = false;
|
||||
let Message = this.state.selectedMessages.find(p => p.id === clickResult.id)
|
||||
if (Message) {
|
||||
checked = true;
|
||||
}
|
||||
|
||||
var listItem = (
|
||||
<ListItem
|
||||
id={clickResult.object_id}
|
||||
leftCheckbox={<Checkbox checked={checked} />}
|
||||
value={clickResult.object_id}
|
||||
key={clickResult.object_id}
|
||||
primaryText={`${clickResult.name} - Plan: ${clickResult.plan_code} Product: ${clickResult.product_id}`}
|
||||
secondaryText={clickResult.address}
|
||||
rightIcon={<MapsLocalHospital />}
|
||||
onClick={(event) => this.handleMessageClick(event, clickResult, this)}
|
||||
/>
|
||||
)
|
||||
return listItem;
|
||||
});
|
||||
|
||||
places = places.concat(result);
|
||||
}, this);
|
||||
this.setState(Object.assign(this.state, { Messages: places }));
|
||||
|
||||
// let places = res.data.Messages.map(p => {
|
||||
// p.MessageText = `${p.MessageName} - ${p.streetName_1}, ${p.cityName}, ${p.state} (${p.zipCode})`
|
||||
// let clickResult = {
|
||||
// id: p.mukId,
|
||||
// address: `${p.streetName_1}, ${p.cityName}, ${p.state} (${p.zipCode})`,
|
||||
// lat: parseFloat(p.latitude),
|
||||
// lng: parseFloat(p.longitude),
|
||||
// name: p.MessageName,
|
||||
// type: "Message",
|
||||
// raw: p
|
||||
// }
|
||||
|
||||
// let checked = false;
|
||||
// let Message = this.state.selectedMessages.find(p => p.id === clickResult.id)
|
||||
// if (Message) {
|
||||
// checked = true;
|
||||
// }
|
||||
|
||||
// var listItem = (
|
||||
// <ListItem
|
||||
// leftCheckbox={<Checkbox checked={checked} />}
|
||||
// value={clickResult.id}
|
||||
// key={clickResult.id}
|
||||
// primaryText={clickResult.name}
|
||||
// secondaryText={clickResult.address}
|
||||
// rightIcon={<MapsLocalHospital />}
|
||||
// onClick={(event) => this.handleMessageClick(event, clickResult, this)}
|
||||
// />
|
||||
// )
|
||||
// return listItem;
|
||||
// });
|
||||
// this.setState(Object.assign(this.state, { Messages: places }));
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
geoSuccess = (position) => {
|
||||
let geo = {
|
||||
lat: position.coords.latitude,
|
||||
long: position.coords.longitude
|
||||
}
|
||||
|
||||
geo = {
|
||||
lat: 41.886406,
|
||||
long: -87.624225
|
||||
}
|
||||
|
||||
this.setState(Object.assign(this.state, { geolocation: geo }));
|
||||
};
|
||||
|
||||
noPosition = () => {
|
||||
this.geoSuccess({
|
||||
coords: {
|
||||
latitude: 41.886406,
|
||||
longitude: -87.624225
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
componentWillReceiveProps(nextProps) {
|
||||
const self = this;
|
||||
var objConf = {
|
||||
open: false,
|
||||
buttonValue: nextProps.buttonValue,
|
||||
icon: nextProps.icon,
|
||||
floatingLabelText: 'Type the Message name'
|
||||
}
|
||||
|
||||
this.setState(Object.assign(this.state, objConf));
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
const self = this;
|
||||
var objConf = {
|
||||
open: false,
|
||||
buttonValue: this.props.buttonValue,
|
||||
icon: this.props.icon,
|
||||
floatingLabelText: 'Type the Message name'
|
||||
}
|
||||
|
||||
this.setState(Object.assign(this.state, objConf));
|
||||
navigator.geolocation.getCurrentPosition(this.geoSuccess, this.noPosition);
|
||||
};
|
||||
|
||||
render() {
|
||||
const self = this;
|
||||
let actions = [
|
||||
<FlatButton
|
||||
label="Cancel"
|
||||
primary={true}
|
||||
onClick={(e) => this.handleCancel(e, this)}
|
||||
/>,
|
||||
<FlatButton
|
||||
label="Submit"
|
||||
primary={true}
|
||||
keyboardFocused={true}
|
||||
onClick={(e) => this.handleClose(e, this)}
|
||||
/>,
|
||||
];
|
||||
|
||||
let button = (
|
||||
<RaisedButton
|
||||
label={this.state.buttonValue}
|
||||
onClick={(e) => this.handleOpen(e, this)}
|
||||
secondary
|
||||
icon={this.state.icon}
|
||||
fullWidth={true}
|
||||
/>);
|
||||
|
||||
let selectedMessageList;
|
||||
if (this.state.selectedMessages.length > 0) {
|
||||
let items = this.state.selectedMessages.map(p => {
|
||||
var listItem = (
|
||||
<ListItem
|
||||
leftCheckbox={<Checkbox checked={true} />}
|
||||
value={p.id}
|
||||
key={p.id}
|
||||
primaryText={`${p.name} - Plan: ${p.plan_code} Product: ${p.product_id}`}
|
||||
secondaryText={p.address}
|
||||
rightIcon={<MapsLocalHospital />}
|
||||
onClick={(event) => this.handleRemoveMessage(event, p, this)}
|
||||
/>
|
||||
)
|
||||
return listItem;
|
||||
});
|
||||
|
||||
selectedMessageList = (
|
||||
<div>
|
||||
<List>
|
||||
<Subheader>Selected Messages</Subheader>
|
||||
{items}
|
||||
</List>
|
||||
<Divider />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
{button}
|
||||
<Dialog
|
||||
contentStyle={customContentStyle}
|
||||
title={this.props.title}
|
||||
actions={actions}
|
||||
modal={true}
|
||||
open={this.state.open}
|
||||
onRequestClose={this.handleClose}
|
||||
>
|
||||
<div className="" id="container">
|
||||
<TextField onChange={(e) => this.searchMessage(e)} fullWidth={true} floatingLabelText={this.state.floatingLabelText} value={this.state.value} />
|
||||
{selectedMessageList}
|
||||
<List>
|
||||
{this.state.Messages}
|
||||
</List>
|
||||
</div>
|
||||
</Dialog>
|
||||
</div>);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
import React from 'react';
|
||||
import QueueAnim from 'rc-queue-anim';
|
||||
import Datatable from './Datatable';
|
||||
import FlatButton from 'material-ui/FlatButton';
|
||||
import BottomNavigationExampleSimple from '../../../../ui/routes/components/components/BottomNavigation';
|
||||
import IconButton from 'material-ui/IconButton';
|
||||
import ToolbarMessageComponent from './Toolbar';
|
||||
|
||||
export default class Page extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.props = props;
|
||||
}
|
||||
|
||||
state = {
|
||||
newMessages: [],
|
||||
}
|
||||
|
||||
handleMessagesReceived = (Messages) => {
|
||||
if (Messages && Messages.length > 0) {
|
||||
this.setState(Object.assign(this.state, { newMessages: Messages }));
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<section className="container-fluid with-maxwidth">
|
||||
<QueueAnim type="bottom" className="ui-animate">
|
||||
<div key="1"><h2 className="article-title">Message Center</h2>
|
||||
<ToolbarMessageComponent onMessagesReceived={this.handleMessagesReceived} />
|
||||
<Datatable MessageChange={this.state.newMessages} />
|
||||
</div>
|
||||
</QueueAnim>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = Page;
|
||||
@@ -0,0 +1,68 @@
|
||||
import React from 'react';
|
||||
import IconMenu from 'material-ui/IconMenu';
|
||||
import IconButton from 'material-ui/IconButton';
|
||||
import FontIcon from 'material-ui/FontIcon';
|
||||
import NavigationExpandMoreIcon from 'material-ui/svg-icons/navigation/expand-more';
|
||||
import MenuItem from 'material-ui/MenuItem';
|
||||
import DropDownMenu from 'material-ui/DropDownMenu';
|
||||
import RaisedButton from 'material-ui/RaisedButton';
|
||||
import FlatButton from 'material-ui/FlatButton';
|
||||
import ContentAdd from 'material-ui/svg-icons/content/add';
|
||||
import { Toolbar, ToolbarGroup, ToolbarSeparator, ToolbarTitle } from 'material-ui/Toolbar';
|
||||
import MessageSelection from './MessageSelection.js';
|
||||
|
||||
class ToolbarMessages extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
value: 1,
|
||||
};
|
||||
}
|
||||
|
||||
handleChange = (event, index, value) => this.setState({ value });
|
||||
handleMessagesAdded = (MessageList) => {
|
||||
if (this.props.onMessagesReceived) {
|
||||
this.props.onMessagesReceived(MessageList);
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Toolbar>
|
||||
<ToolbarGroup firstChild>
|
||||
<DropDownMenu value={this.state.value} openImmediately={false} onChange={this.handleChange}>
|
||||
<MenuItem value={1} primaryText="All Messages" />
|
||||
<MenuItem value={2} primaryText="SMS" />
|
||||
<MenuItem value={3} primaryText="APP" />
|
||||
<MenuItem value={4} primaryText="Lyft" />
|
||||
|
||||
</DropDownMenu>
|
||||
</ToolbarGroup >
|
||||
<ToolbarGroup>
|
||||
<FontIcon className="muidocs-icon-custom-sort" />
|
||||
<ToolbarSeparator />
|
||||
<MessageSelection title={"Message"} buttonValue={"Message"} icon={<ContentAdd />} onMessagesAdded={this.handleMessagesAdded} />
|
||||
<div className="divider" />
|
||||
<ToolbarSeparator />
|
||||
<IconMenu
|
||||
iconButtonElement={
|
||||
<IconButton touch>
|
||||
<NavigationExpandMoreIcon />
|
||||
</IconButton>
|
||||
}
|
||||
>
|
||||
<MenuItem primaryText="Download" />
|
||||
<MenuItem primaryText="Print" />
|
||||
</IconMenu>
|
||||
</ToolbarGroup>
|
||||
</Toolbar>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const ToolbarMessageComponent = (props) => (
|
||||
<ToolbarMessages onMessagesReceived={props.onMessagesReceived} />
|
||||
);
|
||||
|
||||
|
||||
module.exports = ToolbarMessageComponent;
|
||||
8
src/routes/app/routes/tables/routes/message/index.js
Normal file
8
src/routes/app/routes/tables/routes/message/index.js
Normal file
@@ -0,0 +1,8 @@
|
||||
module.exports = {
|
||||
path: 'message',
|
||||
getComponent(nextState, cb) {
|
||||
require.ensure([], (require) => {
|
||||
cb(null, require('./components/Page'));
|
||||
});
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,330 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import $ from 'jquery';
|
||||
import dt from 'datatables.net';
|
||||
import responsive from 'datatables.net-responsive';
|
||||
import buttons from 'datatables.net-buttons';
|
||||
import ToolbarSection from '../../../../ui/routes/components/components/Toolbar3.js';
|
||||
import IconButton from 'material-ui/IconButton';
|
||||
import FlatButton from 'material-ui/FlatButton';
|
||||
import {
|
||||
Row,
|
||||
Col,
|
||||
Grid,
|
||||
Panel,
|
||||
Table,
|
||||
PanelBody,
|
||||
PanelHeader,
|
||||
FormControl,
|
||||
PanelContainer,
|
||||
} from '@sketchpixy/rubix';
|
||||
import moment from 'moment';
|
||||
import Dialog from 'material-ui/Dialog';
|
||||
import Instance from '../../../../../../../components/Connection';
|
||||
|
||||
dt.responsive = responsive;
|
||||
$.dataTable = dt;
|
||||
|
||||
// IconButtonExampleTouch2 = () => (
|
||||
// <FlatButton href="#/app/form/steppers/"><i className="material-icons">schedule</i><span className="nav-text"></span></FlatButton>
|
||||
// );
|
||||
|
||||
const locationModal = () => (
|
||||
<NEMTLocation data={this.state} title={"Provider"} value={""} buttonvalue={this.state.buttonProviderText} onPlaceChanged={this.handleProviderChanged} textSize={30} locationType="provider" />
|
||||
);
|
||||
|
||||
const formatTime = function (sec_num) {
|
||||
var hours = Math.floor(sec_num / 3600);
|
||||
var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
|
||||
var seconds = sec_num - (hours * 3600) - (minutes * 60);
|
||||
|
||||
if (hours < 10) { hours = "0" + hours; }
|
||||
if (minutes < 10) { minutes = "0" + minutes; }
|
||||
if (seconds < 10) { seconds = "0" + seconds; }
|
||||
return hours + ':' + minutes + ':' + seconds;
|
||||
}
|
||||
|
||||
const handleProviderChanged = function (destination) {
|
||||
console.log(destination);
|
||||
}
|
||||
|
||||
class DatatableComponent extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.props = props;
|
||||
this.state = {
|
||||
items: [],
|
||||
data: [],
|
||||
list: [],
|
||||
orgType: {},
|
||||
};
|
||||
|
||||
this.getOrganizations = this.getOrganizations.bind(this);
|
||||
}
|
||||
|
||||
getDTList(organization) {
|
||||
return organization.map(o => {
|
||||
let status = o.active ? 'Active' : 'Inactive';
|
||||
status = o.suspended ? 'Suspended' : status;
|
||||
status = o.blocked ? 'Blocked' : status;
|
||||
|
||||
return (<tr key={o.id}>
|
||||
<td><a href={`/#/app/organization/${o.id}`}>{o.name}</a></td>
|
||||
<td><a href={`/#/app/organization/${o.id}`}>{o.type.name}</a></td>
|
||||
<td><a href={`/#/app/organization/${o.id}`}>{status}</a></td>
|
||||
<td><a href={`/#/app/organization/${o.id}`}>{moment(o.created).format('MM/DD/YY - h:mm a')}</a></td>
|
||||
<td><a href={`/#/app/organization/${o.id}`}>{moment(o.updated).format('MM/DD/YY - h:mm a')}</a></td>
|
||||
<td>{o.author.name}</td>
|
||||
<td>{o.last_editor.name}</td>
|
||||
</tr>)
|
||||
});
|
||||
}
|
||||
|
||||
getOrganizations() {
|
||||
const self = this;
|
||||
if (this.state.orgType) {
|
||||
Instance.getRawConn().get("/v1/nemt/organization").then((res) => {
|
||||
let list = this.getDTList(res.data);
|
||||
|
||||
$.fn.dataTable.moment = function (format, locale) {
|
||||
var types = $.fn.dataTable.ext.type;
|
||||
|
||||
// Add type detection
|
||||
types.detect.unshift(function (d) {
|
||||
return moment(d, format, locale, true).isValid() ?
|
||||
'moment-' + format :
|
||||
null;
|
||||
});
|
||||
|
||||
// Add sorting method - use an integer for the sorting
|
||||
types.order['moment-' + format + '-pre'] = function (d) {
|
||||
return moment(d, format, locale, true).unix();
|
||||
};
|
||||
};
|
||||
|
||||
$.fn.dataTable.moment('MM/DD/YYYY h:mm a');
|
||||
|
||||
self.setState(Object.assign(self.state, { list: list }));
|
||||
|
||||
const dt = $(ReactDOM.findDOMNode(self.example))
|
||||
.addClass('nowrap')
|
||||
.dataTable({
|
||||
responsive: true,
|
||||
dom: 'Bfrtip',
|
||||
buttons: [
|
||||
'copy', 'pdf'
|
||||
],
|
||||
// columns: TABLE_COLUMNS_SORT_STYLE,
|
||||
responsive: true,
|
||||
"bStateSave": true,
|
||||
details: {
|
||||
type: 'inline'
|
||||
},
|
||||
columnDefs: [
|
||||
{ targets: [-1, -3], orderable: true, className: 'dt-body-right mdl-data-table__cell--non-numeric' }
|
||||
],
|
||||
order: [[0, 'desc']]
|
||||
});
|
||||
|
||||
dt.on('column-visibility.dt', function (e, settings, column, state) {
|
||||
console.log(
|
||||
'Column ' + column + ' has changed to ' + (state ? 'visible' : 'hidden')
|
||||
);
|
||||
});
|
||||
|
||||
dt.on('responsive-display', function (e, datatable, row, showHide, update) {
|
||||
console.log('Details for row ' + row.index() + ' ' + (showHide ? 'shown' : 'hidden'));
|
||||
});
|
||||
|
||||
this.decorateButtons();
|
||||
this.decorateSelect();
|
||||
this.decorateSearchBar();
|
||||
this.decorateColumns();
|
||||
}).catch(console.error);
|
||||
}
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps) {
|
||||
const self = this;
|
||||
this.setState(Object.assign(this.state, { orgType: nextProps.orgType }));
|
||||
//this.getOrganizations();
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
const self = this;
|
||||
if (this.props.orgType) {
|
||||
this.setState(Object.assign(this.state, { orgType: this.props.orgType }));
|
||||
this.getOrganizations();
|
||||
}
|
||||
}
|
||||
|
||||
decorateColumns() {
|
||||
let cols = $('td');
|
||||
let colStyle = {
|
||||
'font-family': 'Roboto, sans-serif',
|
||||
'font-size': '13px',
|
||||
'font-weight': '300',
|
||||
'text-align': 'left',
|
||||
};
|
||||
cols.css(colStyle);
|
||||
cols.removeClass('sorting_1');
|
||||
|
||||
let headers = $('th');
|
||||
let headerStyle = {
|
||||
'color': 'rgb(158, 158, 158)',
|
||||
'text-align': 'left',
|
||||
'font-weight': '600',
|
||||
'font-size': '12px'
|
||||
};
|
||||
headers.css(headerStyle);
|
||||
|
||||
let oddRows = $('.odd');
|
||||
let evenRows = $('.even');
|
||||
|
||||
let oddStyle = {
|
||||
'background': 'rgba(127, 221, 233, 0.4)',
|
||||
'text-shadow': 'none',
|
||||
'border-bottom': '1px solid rgb(224, 224, 224)',
|
||||
'color': 'rgba(0, 0, 0, 0.87)',
|
||||
'height': '45px'
|
||||
};
|
||||
oddRows.css(oddStyle);
|
||||
|
||||
let evenStyle = oddStyle;
|
||||
evenStyle['background'] = '#fff';
|
||||
|
||||
evenRows.css(evenStyle);
|
||||
}
|
||||
|
||||
decorateSelect() {
|
||||
let instance = this;
|
||||
let selectElement = $('select[class]');
|
||||
selectElement.addClass('mdl');
|
||||
|
||||
selectElement.click(function () {
|
||||
instance.decorateButtons();
|
||||
});
|
||||
|
||||
let selectLabel = $('#DataTables_Table_0_length > label');
|
||||
let style = {
|
||||
'color': 'rgb(158, 158, 158)',
|
||||
'text-align': 'left',
|
||||
'font-weight': '500',
|
||||
'font-size': '11px'
|
||||
};
|
||||
selectLabel.css(style);
|
||||
}
|
||||
|
||||
decorateSearchBar() {
|
||||
let instance = this;
|
||||
|
||||
let searchbar = $('input[type="search"]');
|
||||
searchbar.bind('input', function () {
|
||||
instance.decorateButtons();
|
||||
instance.decorateColumns();
|
||||
});
|
||||
|
||||
searchbar.addClass('mdl-textfield__input');
|
||||
searchbar.attr('placeholder', '');
|
||||
|
||||
let searchLabel = $('#DataTables_Table_0_filter > label');
|
||||
searchLabel.css({ 'color': '#fff' });
|
||||
searchbar.css({ 'color': 'rgb(158, 158, 158)' })
|
||||
|
||||
let searchFilter = $('#DataTables_Table_0_filter');
|
||||
searchFilter.append('<svg viewBox="0 0 24 24" style="display: inline-block; color: rgba(0, 0, 0, 0.87); fill: currentcolor; height: 24px; width: 24px; user-select: none; transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; margin-top: 12px;"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path></svg>');
|
||||
}
|
||||
|
||||
decorateButtons() {
|
||||
let instance = this;
|
||||
let paginateButtons = $('a.paginate_button');
|
||||
paginateButtons.addClass('mdl-button');
|
||||
|
||||
let selectedButton = $('a.paginate_button.current');
|
||||
selectedButton.addClass('mdl-button mdl-button--raised mdl-button--colored');
|
||||
|
||||
let style = {
|
||||
'background': 'rgb(0, 188, 212)',
|
||||
'font-weight': '400',
|
||||
};
|
||||
selectedButton.css(style);
|
||||
|
||||
paginateButtons.click(function () {
|
||||
instance.decorateButtons();
|
||||
instance.decorateColumns();
|
||||
});
|
||||
|
||||
let sortingButtons = $('th.sorting, th.sorting_asc, th.sorting_desc');
|
||||
sortingButtons.click(function () {
|
||||
instance.decorateButtons();
|
||||
instance.decorateColumns();
|
||||
});
|
||||
|
||||
let entriesLabel = $('#DataTables_Table_0_info');
|
||||
entriesLabel.css({
|
||||
'color': 'rgb(158, 158, 158)',
|
||||
'text-align': 'left',
|
||||
'font-weight': '400',
|
||||
'font-size': '12px'
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Table ref={(c) => this.example = c} className='display' cellSpacing='0' width='100%'>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Type</th>
|
||||
<th>Status</th>
|
||||
<th>Created</th>
|
||||
<th>Updated</th>
|
||||
<th>Author</th>
|
||||
<th>Last Editor</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{this.state.list}
|
||||
</tbody>
|
||||
</Table>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default class Datatablesjs extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.props = props;
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
//console.log(this.props);
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps) {
|
||||
this.props = nextProps;
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Row>
|
||||
<Col xs={12}>
|
||||
<PanelContainer>
|
||||
<Panel>
|
||||
<PanelBody>
|
||||
<Grid>
|
||||
<Row>
|
||||
<Col xs={12}>
|
||||
<DatatableComponent orgType={this.props.orgType} />
|
||||
<br />
|
||||
</Col>
|
||||
</Row>
|
||||
</Grid>
|
||||
</PanelBody>
|
||||
</Panel>
|
||||
</PanelContainer>
|
||||
</Col>
|
||||
</Row>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,483 @@
|
||||
import React from 'react';
|
||||
import Dialog from 'material-ui/Dialog';
|
||||
import { List, ListItem } from 'material-ui/List';
|
||||
import TextField from 'material-ui/TextField';
|
||||
import RaisedButton from 'material-ui/RaisedButton';
|
||||
import FlatButton from 'material-ui/FlatButton';
|
||||
import SelectField from 'material-ui/SelectField';
|
||||
import AutoComplete from 'material-ui/AutoComplete';
|
||||
import MenuItem from 'material-ui/MenuItem';
|
||||
import Instance from '../../../../../../../components/Connection';
|
||||
|
||||
const groupBy = function (array, f) {
|
||||
var groups = {};
|
||||
array.forEach(function (o) {
|
||||
var group = JSON.stringify(f(o));
|
||||
groups[group] = groups[group] || [];
|
||||
groups[group].push(o);
|
||||
});
|
||||
return Object.keys(groups).map(function (group) {
|
||||
return groups[group];
|
||||
})
|
||||
}
|
||||
|
||||
const dataSourceConfig = {
|
||||
text: 'organizationName',
|
||||
value: 'organizationValue',
|
||||
};
|
||||
|
||||
export default class OrganizationComponent extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.props = props;
|
||||
this.state = {
|
||||
buttonValue: '',
|
||||
openDialog: false,
|
||||
title: '',
|
||||
modalStyle: {
|
||||
width: '100%',
|
||||
maxWidth: '600px',
|
||||
},
|
||||
divStyle: {
|
||||
textAlign: 'left',
|
||||
textTransform: 'none !important',
|
||||
padding: '0px 5px 0px 0px',
|
||||
marginTop: -5,
|
||||
boxShadow: 'none',
|
||||
color: 'rgba(0, 0, 0, 0.3)',
|
||||
},
|
||||
location: {
|
||||
lat: 41.819078,
|
||||
long: -87.623129,
|
||||
},
|
||||
searchValue: '',
|
||||
searchProviders: [],
|
||||
selectedProvider: {},
|
||||
organizationFields: {
|
||||
type: {
|
||||
key: '',
|
||||
name: '',
|
||||
},
|
||||
name: '',
|
||||
desc: '',
|
||||
parent: {},
|
||||
reference: null,
|
||||
},
|
||||
searchingOrganizations: false,
|
||||
selectedOrganization: {},
|
||||
selectedType: {},
|
||||
typeList: [],
|
||||
geolocation: {
|
||||
lat: 41.819078,
|
||||
long: -87.623129,
|
||||
},
|
||||
showFields: true,
|
||||
parentAutocomplete: '',
|
||||
parentOrganizations: [],
|
||||
seachingProvider: false,
|
||||
};
|
||||
|
||||
this.handleOpen = this.handleOpen.bind(this);
|
||||
this.handleClose = this.handleClose.bind(this);
|
||||
this.setProps = this.setProps.bind(this);
|
||||
this.handleSave = this.handleSave.bind(this);
|
||||
this.handleOrganization = this.handleOrganization.bind(this);
|
||||
this.handleType = this.handleType.bind(this);
|
||||
this.handleNext = this.handleNext.bind(this);
|
||||
|
||||
this.handleSearchRawProvider = this.handleSearchRawProvider.bind(this);
|
||||
this.handleProviderClick = this.handleProviderClick.bind(this);
|
||||
|
||||
this.handleParentAutocomplete = this.handleParentAutocomplete.bind(this);
|
||||
this.handleParentSearch = this.handleParentSearch.bind(this);
|
||||
this.handleOrganizationName = this.handleOrganizationName.bind(this);
|
||||
this.handleOrganizationDesc = this.handleOrganizationDesc.bind(this);
|
||||
this.handleButtonSearchRawProvider = this.handleButtonSearchRawProvider.bind(this);
|
||||
this.handleReset = this.handleReset.bind(this);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
const self = this;
|
||||
this.setProps(this.props);
|
||||
|
||||
Instance.getRawConn().get('/v1/nemt/organization/type').then(res => {
|
||||
const typeList = res.data.map((v, i) => {
|
||||
if (v.key === 'provider') {
|
||||
self.setState(Object.assign(self.state, { selectedType: v, showFields: false }));
|
||||
}
|
||||
return (<MenuItem value={v} primaryText={v.name} />);
|
||||
});
|
||||
|
||||
self.setState(Object.assign(self.state, { typeList: typeList }));
|
||||
}).catch(console.error);
|
||||
navigator.geolocation.getCurrentPosition(this.geoSuccess, this.noPosition);
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps) {
|
||||
this.setProps(nextProps);
|
||||
}
|
||||
|
||||
setProps(propsParam) {
|
||||
this.setState(Object.assign(this.state, { buttonValue: propsParam.buttonValue, title: propsParam.title }));
|
||||
}
|
||||
|
||||
geoSuccess = (position) => {
|
||||
let geo = {
|
||||
lat: position.coords.latitude,
|
||||
long: position.coords.longitude
|
||||
}
|
||||
|
||||
geo = {
|
||||
lat: 41.819078,
|
||||
long: -87.623129,
|
||||
}
|
||||
|
||||
this.setState(Object.assign(this.state, { geolocation: geo }));
|
||||
};
|
||||
|
||||
noPosition = () => {
|
||||
this.geoSuccess({
|
||||
coords: {
|
||||
latitude: 41.886406,
|
||||
longitude: -87.624225
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
handleOpen() {
|
||||
this.setState(Object.assign(this.state, { openDialog: true }));
|
||||
this.handleReset();
|
||||
}
|
||||
|
||||
handleClose() {
|
||||
this.setState(Object.assign(this.state, { openDialog: false }));
|
||||
this.handleReset();
|
||||
}
|
||||
|
||||
handleSave() {
|
||||
const self = this;
|
||||
const organizationFields = this.state.organizationFields;
|
||||
organizationFields.type = this.state.selectedType;
|
||||
|
||||
Instance.getRawConn().post('/v1/nemt/organization', organizationFields).then(res => {
|
||||
this.setState(Object.assign(this.state, { openDialog: false }));
|
||||
location.href = '/#/app/organization/' + res.data.id;
|
||||
|
||||
if (this.props.onSelectOrganization) {
|
||||
this.props.onSelectOrganization(res.data);
|
||||
}
|
||||
self.handleReset();
|
||||
}).catch(console.error);
|
||||
}
|
||||
|
||||
handleType(event, index, value) {
|
||||
let showFields = !(value.key === 'provider');
|
||||
this.handleReset(event);
|
||||
this.setState(Object.assign(this.state, { selectedType: value, showFields: showFields }));
|
||||
}
|
||||
|
||||
handleOrganization(e, a) {
|
||||
let selectedOrganizations = this.state.selectedOrganizations;
|
||||
selectedOrganizations.push(a);
|
||||
this.setState(Object.assign(this.state, {
|
||||
selectedOrganizations: selectedOrganizations,
|
||||
searchValue: a.name,
|
||||
}));
|
||||
}
|
||||
|
||||
handleParentAutocomplete = (u) => {
|
||||
let organizationFields = this.state.organizationFields;
|
||||
organizationFields.parent = u.organizationValue;
|
||||
this.setState(Object.assign(this.state, { organizationFields: organizationFields, parentAutocomplete: u.name }));
|
||||
}
|
||||
|
||||
handleParentFilter = (searchText, key) => {
|
||||
if (searchText && key) {
|
||||
return (key.toLowerCase().indexOf(searchText.toLowerCase()) !== -1)
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
handleParentSearch = (s) => {
|
||||
this.setState(Object.assign(this.state, { parentAutocomplete: s }));
|
||||
if (s.length >= 3 && !this.state.searchingOrganizations) {
|
||||
this.setState(Object.assign(this.state, { searchingOrganizations: true }));
|
||||
let url = '/v1/nemt/organization/name?name=' + encodeURIComponent(s);
|
||||
if (this.props.searchType) {
|
||||
switch (this.props.searchType) {
|
||||
case 'parent':
|
||||
case 'child':
|
||||
url += '&type=' + encodeURIComponent(this.props.searchType);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
Instance.getRawConn().get(url).then(res => {
|
||||
const list = res.data.map(p => {
|
||||
console.log(p);
|
||||
return {
|
||||
organizationName: p.name,
|
||||
organizationValue: p
|
||||
};
|
||||
});
|
||||
this.setState(Object.assign(this.state, { parentOrganizations: list, searchingOrganizations: false }));
|
||||
}).catch(console.error);
|
||||
}
|
||||
}
|
||||
|
||||
handleProviderClick = (e, p) => {
|
||||
this.setState(Object.assign(this.state, { searchValue: p.completeText, selectedProvider: p }));
|
||||
}
|
||||
|
||||
handleNext = (e) => {
|
||||
e.preventDefault();
|
||||
const organization = {
|
||||
type: this.state.selectedType,
|
||||
name: this.state.selectedProvider.name,
|
||||
desc: '',
|
||||
parent: {},
|
||||
reference: this.state.selectedProvider.raw,
|
||||
}
|
||||
|
||||
this.setState(Object.assign(this.state, { showFields: true, organizationFields: organization }));
|
||||
}
|
||||
|
||||
handleReset = (e) => {
|
||||
var self = this;
|
||||
let organization = self.state.organizationFields;
|
||||
|
||||
organization.name = '';
|
||||
organization.desc = '';
|
||||
organization.parent = {};
|
||||
organization.reference = null;
|
||||
|
||||
self.setState(Object.assign(self.state, { searchValue: '', searchProviders: [], organizationFields: organization }));
|
||||
}
|
||||
|
||||
handleButtonSearchRawProvider = (e) => {
|
||||
var self = this;
|
||||
self.setState(Object.assign(self.state, { seachingProvider: true }));
|
||||
let url = `/v1/nemt/provider?lat=${self.state.geolocation.lat}&long=${self.state.geolocation.long}&limit=50&name=${self.state.searchValue}&sortby=distance`;
|
||||
|
||||
Instance.getRawConn().get(encodeURI(url)).then(res => {
|
||||
if (res.data.resultStatus === "SUCCESS") {
|
||||
if (res.data.providers && res.data.providers.length > 0) {
|
||||
var places = [];
|
||||
res.data.providers.forEach(p => {
|
||||
var result = groupBy(p.fivePartKeyGroups, function (item) {
|
||||
return [item.providerNum, item.providerNumSuffix, item.locationSeqNum, item.planCode, item.productId];
|
||||
});
|
||||
|
||||
result = result.map(r => {
|
||||
let raw = p;
|
||||
raw.fivePartKeyGroups = r;
|
||||
|
||||
let clickResult = {
|
||||
id: p.mukId,
|
||||
address: `${p.streetName_1}, ${p.cityName}, ${p.state} (${p.zipCode})`,
|
||||
lat: parseFloat(p.latitude),
|
||||
lng: parseFloat(p.longitude),
|
||||
name: p.providerName,
|
||||
street: p.streetName_1,
|
||||
city: p.cityName,
|
||||
state: p.state,
|
||||
zip_code: p.zipCode,
|
||||
phone_number: p.phoneNumber,
|
||||
type: "provider",
|
||||
internal_id: r[0].providerNum,
|
||||
internal_id_suffix: r[0].providerNumSuffix,
|
||||
location_seq_num: r[0].locationSeqNum,
|
||||
plan_code: r[0].planCode,
|
||||
product_id: r[0].productId,
|
||||
treatment_code: r[0].treatmentCategoryCode,
|
||||
object_id: p.mukId + '-' + r[0].providerNum + '-' + r[0].planCode + '-' + r[0].productId,
|
||||
raw: raw,
|
||||
text: `${p.providerName} - ${p.streetName_1}, ${p.cityName}, ${p.state} (${p.zipCode})`,
|
||||
completeText: `${p.providerName} - Plan: ${r[0].planCode} Product: ${r[0].productId}`
|
||||
}
|
||||
|
||||
var listItem = (
|
||||
<ListItem
|
||||
id={clickResult.object_id}
|
||||
value={clickResult.object_id}
|
||||
key={clickResult.object_id}
|
||||
primaryText={`${clickResult.name} - Plan: ${clickResult.plan_code} Product: ${clickResult.product_id}`}
|
||||
secondaryText={clickResult.address}
|
||||
onClick={(event) => self.handleProviderClick(event, clickResult)}
|
||||
/>
|
||||
)
|
||||
return listItem;
|
||||
});
|
||||
|
||||
places = places.concat(result);
|
||||
}, self);
|
||||
self.setState(Object.assign(self.state, { searchProviders: places, seachingProvider: false }));
|
||||
} else {
|
||||
self.setState(Object.assign(self.state, { searchProviders: [], seachingProvider: false }));
|
||||
}
|
||||
} else {
|
||||
console.error(res.data);
|
||||
self.setState(Object.assign(self.state, { searchProviders: [], seachingProvider: false }));
|
||||
}
|
||||
}).catch(err => {
|
||||
console.error(err);
|
||||
self.setState(Object.assign(self.state, { seachingProvider: false }));
|
||||
});
|
||||
}
|
||||
|
||||
handleSearchRawProvider = (e) => {
|
||||
var self = this;
|
||||
self.setState(Object.assign(self.state, { searchValue: e.target.value }));
|
||||
};
|
||||
|
||||
handleOrganizationName(e) {
|
||||
let organizationDesc = this.state.organizationFields;
|
||||
organizationDesc.name = e.target.value;
|
||||
|
||||
this.setState(Object.assign(this.state, { organizationFields: organizationDesc }));
|
||||
}
|
||||
|
||||
handleOrganizationDesc(e) {
|
||||
let organizationDesc = this.state.organizationFields;
|
||||
organizationDesc.desc = e.target.value;
|
||||
|
||||
this.setState(Object.assign(this.state, { organizationFields: organizationDesc }));
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
let actions = [
|
||||
<FlatButton
|
||||
label="Cancel"
|
||||
primary={true}
|
||||
onClick={this.handleClose}
|
||||
/>,
|
||||
<FlatButton
|
||||
label="Add Organization"
|
||||
primary={true}
|
||||
keyboardFocused={true}
|
||||
onClick={this.handleSave}
|
||||
/>,
|
||||
];
|
||||
|
||||
let formOrganization = (<div>
|
||||
<TextField onChange={this.handleOrganizationName} fullWidth={true} floatingLabelText={"Organization name"} value={this.state.organizationFields.name} />
|
||||
<AutoComplete
|
||||
floatingLabelText="Parent Organization"
|
||||
filter={this.handleParentFilter}
|
||||
maxSearchResults={5}
|
||||
dataSource={this.state.parentOrganizations}
|
||||
dataSourceConfig={dataSourceConfig}
|
||||
onNewRequest={this.handleParentAutocomplete}
|
||||
onUpdateInput={this.handleParentSearch}
|
||||
searchText={this.state.parentAutocomplete}
|
||||
fullWidth={true}
|
||||
/>
|
||||
<TextField onChange={this.handleOrganizationDesc} fullWidth={true} floatingLabelText={"Description"} value={this.state.organizationFields.desc} multiLine={true} rows={5} />
|
||||
</div>);
|
||||
|
||||
switch (this.state.selectedType.key) {
|
||||
case 'provider':
|
||||
if (!this.state.showFields) {
|
||||
formOrganization = (
|
||||
<div>
|
||||
<div className={"row"}>
|
||||
<div className={"col-xl-7"}>
|
||||
<TextField onChange={this.handleSearchRawProvider} fullWidth={true} floatingLabelText={"Type the provider name"} value={this.state.searchValue} />
|
||||
</div>
|
||||
<div className={"col-xl-5"}>
|
||||
<FlatButton
|
||||
label="Search"
|
||||
primary={true}
|
||||
disabled={this.state.seachingProvider}
|
||||
onClick={this.handleButtonSearchRawProvider}
|
||||
style={{ marginTop: '18px' }}
|
||||
/>
|
||||
<FlatButton
|
||||
label="Reset"
|
||||
secondary={true}
|
||||
disabled={this.state.seachingProvider}
|
||||
onClick={this.handleReset}
|
||||
style={{ marginTop: '18px' }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className={"row"}>
|
||||
<div className={"col-xl-12"}>
|
||||
<List>
|
||||
{this.state.searchProviders}
|
||||
</List>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
actions = [
|
||||
<FlatButton
|
||||
label="Cancel"
|
||||
primary={true}
|
||||
onClick={this.handleClose}
|
||||
/>,
|
||||
<FlatButton
|
||||
label="Next"
|
||||
primary={true}
|
||||
keyboardFocused={true}
|
||||
onClick={this.handleNext}
|
||||
/>,
|
||||
];
|
||||
} else {
|
||||
actions = [
|
||||
<FlatButton
|
||||
label="Cancel"
|
||||
primary={true}
|
||||
onClick={this.handleClose}
|
||||
/>,
|
||||
<FlatButton
|
||||
label="Back"
|
||||
primary={true}
|
||||
onClick={this.handleBack}
|
||||
/>,
|
||||
<FlatButton
|
||||
label="Add Organization"
|
||||
primary={true}
|
||||
keyboardFocused={true}
|
||||
onClick={this.handleSave}
|
||||
/>,
|
||||
];
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={this.state.divStyle} >
|
||||
<RaisedButton
|
||||
label={this.state.buttonValue}
|
||||
onClick={this.handleOpen}
|
||||
secondary
|
||||
fullWidth={true}
|
||||
/>
|
||||
<Dialog
|
||||
contentStyle={this.state.modalStyle}
|
||||
title={this.state.title}
|
||||
actions={actions}
|
||||
modal={true}
|
||||
open={this.state.openDialog}
|
||||
onRequestClose={this.handleClose}
|
||||
autoScrollBodyContent={true}
|
||||
>
|
||||
<div className="" id="container">
|
||||
<SelectField
|
||||
floatingLabelText="Type"
|
||||
value={this.state.selectedType}
|
||||
onChange={this.handleType}
|
||||
fullWidth={true}
|
||||
>
|
||||
{this.state.typeList}
|
||||
</SelectField>
|
||||
{formOrganization}
|
||||
</div>
|
||||
</Dialog>
|
||||
</div>);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
import React from 'react';
|
||||
import QueueAnim from 'rc-queue-anim';
|
||||
import Datatable from './Datatable';
|
||||
import FlatButton from 'material-ui/FlatButton';
|
||||
import BottomNavigationExampleSimple from '../../../../ui/routes/components/components/BottomNavigation';
|
||||
import IconButton from 'material-ui/IconButton';
|
||||
import ToolbarSection from './Toolbar';
|
||||
|
||||
class Page extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.props = props;
|
||||
this.state = {
|
||||
organizationType: {}
|
||||
}
|
||||
|
||||
this.handleChange = this.handleChange.bind(this);
|
||||
}
|
||||
|
||||
handleChange(value) {
|
||||
this.setState(Object.assign(this.state, { organizationType: value }));
|
||||
}
|
||||
|
||||
render() {
|
||||
return (<section className="container-fluid with-maxwidth padding-sm-v">
|
||||
<h2 className="article-title" style={{ paddingTop: 15 }}> Manage Organizations </h2>
|
||||
<QueueAnim type="bottom" className="ui-animate">
|
||||
<div key="1">
|
||||
<ToolbarSection onChange={this.handleChange} />
|
||||
</div>
|
||||
<div key="2">
|
||||
<Datatable orgType={this.state.organizationType} />
|
||||
</div>
|
||||
|
||||
</QueueAnim>
|
||||
</section>)
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = Page;
|
||||
@@ -0,0 +1,92 @@
|
||||
import React from 'react';
|
||||
import IconMenu from 'material-ui/IconMenu';
|
||||
import IconButton from 'material-ui/IconButton';
|
||||
import FontIcon from 'material-ui/FontIcon';
|
||||
import NavigationExpandMoreIcon from 'material-ui/svg-icons/navigation/expand-more';
|
||||
import MenuItem from 'material-ui/MenuItem';
|
||||
import DropDownMenu from 'material-ui/DropDownMenu';
|
||||
import RaisedButton from 'material-ui/RaisedButton';
|
||||
import FlatButton from 'material-ui/FlatButton';
|
||||
import ContentAdd from 'material-ui/svg-icons/content/add';
|
||||
import { Toolbar, ToolbarGroup, ToolbarSeparator, ToolbarTitle } from 'material-ui/Toolbar';
|
||||
import OrganizationComponent from './OrganizationComponent';
|
||||
import Instance from '../../../../../../../components/Connection';
|
||||
|
||||
class ToolbarOrganization extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.props = props;
|
||||
this.state = {
|
||||
selectedType: {
|
||||
name: 'All Organizations',
|
||||
key: '',
|
||||
desc: '',
|
||||
},
|
||||
typeList: [],
|
||||
baseSearch: {
|
||||
name: 'All Organizations',
|
||||
key: '',
|
||||
desc: '',
|
||||
},
|
||||
};
|
||||
|
||||
this.handleChange = this.handleChange.bind(this);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
const self = this;
|
||||
Instance.getRawConn().get('/v1/nemt/organization/type').then(res => {
|
||||
const typeList = res.data.map((v, i) => {
|
||||
return (<MenuItem value={v} primaryText={v.name} />);
|
||||
});
|
||||
|
||||
self.setState(Object.assign(self.state, { typeList: typeList, selectedType: self.state.baseSearch }));
|
||||
console.log(self.state);
|
||||
if (self.props.onChange) {
|
||||
self.props.onChange(self.state.selectedType);
|
||||
}
|
||||
}).catch(console.error);
|
||||
}
|
||||
|
||||
handleChange(event, index, value) {
|
||||
this.setState(Object.assign(this.state, { selectedType: value }));
|
||||
if (this.props.onChange) {
|
||||
this.props.onChange(value);
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Toolbar>
|
||||
<ToolbarGroup firstChild>
|
||||
<DropDownMenu value={this.state.selectedType} openImmediately={false} onChange={this.handleChange} primary icon={<ContentAdd />} >
|
||||
<MenuItem value={this.state.baseSearch} primaryText={"All Organizations"} />
|
||||
{this.state.typeList}
|
||||
</DropDownMenu>
|
||||
<OrganizationComponent title={"Add Organization"} buttonValue={"Add Organization"} />
|
||||
</ToolbarGroup>
|
||||
</Toolbar>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class ToolbarSection2 extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.props = props;
|
||||
|
||||
this.handleChange = this.handleChange.bind(this);
|
||||
}
|
||||
|
||||
handleChange(value) {
|
||||
if (this.props.onChange) {
|
||||
this.props.onChange(value);
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return (<ToolbarOrganization onChange={this.handleChange} />);
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = ToolbarSection2;
|
||||
@@ -0,0 +1,8 @@
|
||||
module.exports = {
|
||||
path: 'organizations',
|
||||
getComponent(nextState, cb) {
|
||||
require.ensure([], (require) => {
|
||||
cb(null, require('./components/Page'));
|
||||
});
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,301 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import $ from 'jquery';
|
||||
import dt from 'datatables.net';
|
||||
import responsive from 'datatables.net-responsive';
|
||||
import IconButton from 'material-ui/IconButton';
|
||||
import RaisedButton from 'material-ui/RaisedButton';
|
||||
import ContentAdd from 'material-ui/svg-icons/content/add';
|
||||
import Instance from '../../../../../../../components/Connection';
|
||||
|
||||
import {
|
||||
Row,
|
||||
Col,
|
||||
Grid,
|
||||
Panel,
|
||||
Table,
|
||||
PanelBody,
|
||||
PanelHeader,
|
||||
FormControl,
|
||||
PanelContainer,
|
||||
} from '@sketchpixy/rubix';
|
||||
|
||||
dt.responsive = responsive;
|
||||
$.dataTable = dt;
|
||||
|
||||
function formatPhoneNumber(s) {
|
||||
var s2 = ("" + s).replace(/\D/g, '');
|
||||
var m = s2.match(/^(\d{3})(\d{3})(\d{4})$/);
|
||||
return (!m) ? null : "(" + m[1] + ") " + m[2] + "-" + m[3];
|
||||
}
|
||||
|
||||
const getDTList = function (provider) {
|
||||
let list = [];
|
||||
|
||||
provider.forEach((r, i) => {
|
||||
list.push(
|
||||
<tr key={r.provider_uuid}>
|
||||
<td>{r.name}</td>
|
||||
<td>{r.address.street_address_1 + " " + (r.address.street_address_2 || "") + ", " + r.address.city + ", " + r.address.state + " " + r.address.zipcode + ""}</td>
|
||||
<td>{r.address.phone_number}</td>
|
||||
<td>{r.muk_id}</td>
|
||||
<td>{r.internal_id}</td>
|
||||
</tr>
|
||||
);
|
||||
}, this);
|
||||
|
||||
return list;
|
||||
}
|
||||
|
||||
class DatatableComponent extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.props = props;
|
||||
}
|
||||
|
||||
state = {
|
||||
providers: []
|
||||
}
|
||||
|
||||
reloadTableData(names) {
|
||||
const table = $(ReactDOM.findDOMNode(self.example)).DataTable();
|
||||
table.clear();
|
||||
table.rows.add(names);
|
||||
table.draw();
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps) {
|
||||
if (nextProps.newProviders && nextProps.newProviders.length > 0) {
|
||||
const self = this;
|
||||
Instance.getRawConn().get('/v1/nemt/provider/participating?sort=name').then((res) => {
|
||||
let providers = res.data;
|
||||
let newProv = nextProps.newProviders.map(p => {
|
||||
return [p.muk_id, p.internal_id, p.name, p.address.street_address_1 + ", " + (p.address.street_address_2 || "") + ", " + p.address.city + ", " + p.address.state + " " + p.address.zipcode + "", p.address.phone_number];
|
||||
});
|
||||
|
||||
const table = $(ReactDOM.findDOMNode(self.example)).DataTable();
|
||||
table.rows.add(newProv);
|
||||
providers = getDTList(providers)
|
||||
self.setState(Object.assign(self.state, { providers: providers }));
|
||||
table.draw(true);
|
||||
|
||||
self.decorateButtons();
|
||||
self.decorateSelect();
|
||||
self.decorateColumns();
|
||||
}).catch((err) => { console.error(err); });
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
$(ReactDOM.findDOMNode(this.example)).DataTable().destroy(true);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
const state = this;
|
||||
|
||||
Instance.getRawConn().get('/v1/nemt/provider/participating?sort=name').then((res) => {
|
||||
let providers = res.data;
|
||||
providers = getDTList(providers);
|
||||
state.setState(Object.assign(state.state, { providers: providers }));
|
||||
$(ReactDOM.findDOMNode(state.example))
|
||||
.addClass('nowrap')
|
||||
.dataTable({
|
||||
responsive: true,
|
||||
dom: 'Bfrtip',
|
||||
buttons: [
|
||||
'copy', 'pdf'
|
||||
],
|
||||
// columns: TABLE_COLUMNS_SORT_STYLE,
|
||||
responsive: true,
|
||||
"bStateSave": true,
|
||||
details: {
|
||||
type: 'inline'
|
||||
},
|
||||
columnDefs: [
|
||||
{ targets: [-1, -3], className: 'dt-body-right mdl-data-table__cell--non-numeric' }
|
||||
]
|
||||
});
|
||||
state.decorateButtons();
|
||||
state.decorateSelect();
|
||||
state.decorateSearchBar();
|
||||
state.decorateColumns();
|
||||
}).catch((err) => { console.error(err); });
|
||||
}
|
||||
|
||||
decorateColumns() {
|
||||
let cols = $('td');
|
||||
let colStyle = {
|
||||
'font-family': 'Roboto, sans-serif',
|
||||
'font-size': '13px',
|
||||
'font-weight': '300',
|
||||
'text-align': 'left',
|
||||
};
|
||||
cols.css(colStyle);
|
||||
cols.removeClass('sorting_1');
|
||||
|
||||
let headers = $('th');
|
||||
let headerStyle = {
|
||||
'color': 'rgb(158, 158, 158)',
|
||||
'text-align': 'left',
|
||||
'font-weight': '600',
|
||||
'font-size': '12px'
|
||||
};
|
||||
headers.css(headerStyle);
|
||||
|
||||
let oddRows = $('.odd');
|
||||
let evenRows = $('.even');
|
||||
|
||||
let oddStyle = {
|
||||
'background': 'rgba(127, 221, 233, 0.4)',
|
||||
'text-shadow': 'none',
|
||||
'border-bottom': '1px solid rgb(224, 224, 224)',
|
||||
'color': 'rgba(0, 0, 0, 0.87)',
|
||||
'height': '45px'
|
||||
};
|
||||
oddRows.css(oddStyle);
|
||||
|
||||
let evenStyle = oddStyle;
|
||||
evenStyle['background'] = '#fff';
|
||||
|
||||
evenRows.css(evenStyle);
|
||||
}
|
||||
|
||||
decorateSelect() {
|
||||
let instance = this;
|
||||
let selectElement = $('select[class]');
|
||||
selectElement.addClass('mdl');
|
||||
|
||||
selectElement.click(function () {
|
||||
instance.decorateButtons();
|
||||
});
|
||||
|
||||
let selectLabel = $('#DataTables_Table_0_length > label');
|
||||
let style = {
|
||||
'color': 'rgb(158, 158, 158)',
|
||||
'text-align': 'left',
|
||||
'font-weight': '500',
|
||||
'font-size': '11px'
|
||||
};
|
||||
selectLabel.css(style);
|
||||
}
|
||||
|
||||
decorateSearchBar() {
|
||||
let instance = this;
|
||||
|
||||
let searchbar = $('input[type="search"]');
|
||||
searchbar.bind('input', function () {
|
||||
instance.decorateButtons();
|
||||
instance.decorateColumns();
|
||||
});
|
||||
|
||||
searchbar.addClass('mdl-textfield__input');
|
||||
searchbar.attr('placeholder', '');
|
||||
|
||||
let searchLabel = $('#DataTables_Table_0_filter > label');
|
||||
searchLabel.css({ 'color': '#fff' });
|
||||
searchbar.css({ 'color': 'rgb(158, 158, 158)' })
|
||||
|
||||
let searchFilter = $('#DataTables_Table_0_filter');
|
||||
searchFilter.append('<svg viewBox="0 0 24 24" style="display: inline-block; color: rgba(0, 0, 0, 0.87); fill: currentcolor; height: 24px; width: 24px; user-select: none; transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; margin-top: 12px;"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path></svg>');
|
||||
}
|
||||
|
||||
decorateButtons() {
|
||||
let instance = this;
|
||||
let paginateButtons = $('a.paginate_button');
|
||||
paginateButtons.addClass('mdl-button');
|
||||
|
||||
let selectedButton = $('a.paginate_button.current');
|
||||
selectedButton.addClass('mdl-button mdl-button--raised mdl-button--colored');
|
||||
|
||||
let style = {
|
||||
'background': 'rgb(0, 188, 212)',
|
||||
'font-weight': '400',
|
||||
};
|
||||
selectedButton.css(style);
|
||||
|
||||
paginateButtons.click(function () {
|
||||
instance.decorateButtons();
|
||||
instance.decorateColumns();
|
||||
});
|
||||
|
||||
let sortingButtons = $('th.sorting, th.sorting_asc, th.sorting_desc');
|
||||
sortingButtons.click(function () {
|
||||
instance.decorateButtons();
|
||||
instance.decorateColumns();
|
||||
});
|
||||
|
||||
let entriesLabel = $('#DataTables_Table_0_info');
|
||||
entriesLabel.css({
|
||||
'color': 'rgb(158, 158, 158)',
|
||||
'text-align': 'left',
|
||||
'font-weight': '400',
|
||||
'font-size': '12px'
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Table ref={(c) => this.example = c} className='display' cellSpacing='0' width='100%'>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Organization Name</th>
|
||||
<th>Address</th>
|
||||
<th>Phone</th>
|
||||
<th>MUK</th>
|
||||
<th>NPI</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{this.state.providers}
|
||||
</tbody>
|
||||
</Table>
|
||||
|
||||
);
|
||||
<BottomNavigationExampleSimple />
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
export default class Datatablesjs extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.props = props;
|
||||
}
|
||||
|
||||
state = {
|
||||
providerChange: [],
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps) {
|
||||
let providers = nextProps.providerChange;
|
||||
this.setState(Object.assign(this.state, { providerChange: providers }));
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
let providers = this.props.providerChange;
|
||||
this.setState(Object.assign(this.state, { providerChange: providers }));
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Row>
|
||||
<Col xs={12}>
|
||||
<PanelContainer>
|
||||
<Panel>
|
||||
<PanelBody>
|
||||
<Grid>
|
||||
<Row>
|
||||
<Col xs={12}>
|
||||
<DatatableComponent newProviders={this.state.providerChange} />
|
||||
<br />
|
||||
</Col>
|
||||
</Row>
|
||||
</Grid>
|
||||
</PanelBody>
|
||||
</Panel>
|
||||
</PanelContainer>
|
||||
</Col>
|
||||
</Row>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
import React from 'react';
|
||||
import QueueAnim from 'rc-queue-anim';
|
||||
import Datatable from './Datatable';
|
||||
import FlatButton from 'material-ui/FlatButton';
|
||||
import BottomNavigationExampleSimple from '../../../../ui/routes/components/components/BottomNavigation';
|
||||
import IconButton from 'material-ui/IconButton';
|
||||
import ToolbarProviderComponent from './Toolbar';
|
||||
|
||||
export default class Page extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.props = props;
|
||||
}
|
||||
|
||||
state = {
|
||||
newProviders: [],
|
||||
}
|
||||
|
||||
handleProvidersReceived = (providers) => {
|
||||
if (providers && providers.length > 0) {
|
||||
this.setState(Object.assign(this.state, { newProviders: providers }));
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<section className="container-fluid with-maxwidth">
|
||||
<QueueAnim type="bottom" className="ui-animate">
|
||||
<div key="1"><h2 className="article-title">Participating Providers</h2>
|
||||
<ToolbarProviderComponent onProvidersReceived={this.handleProvidersReceived} />
|
||||
<Datatable providerChange={this.state.newProviders} />
|
||||
</div>
|
||||
</QueueAnim>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = Page;
|
||||
@@ -0,0 +1,330 @@
|
||||
import React, { Component } from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import PropTypes from 'prop-types';
|
||||
const axios = require('axios');
|
||||
|
||||
import FlatButton from 'material-ui/FlatButton';
|
||||
import Dialog from 'material-ui/Dialog';
|
||||
import { List, ListItem, makeSelectable } from 'material-ui/List';
|
||||
import RaisedButton from 'material-ui/RaisedButton';
|
||||
import TextField from 'material-ui/TextField';
|
||||
import Subheader from 'material-ui/Subheader';
|
||||
import Divider from 'material-ui/Divider';
|
||||
import Checkbox from 'material-ui/Checkbox';
|
||||
import MapsLocalHospital from 'material-ui/svg-icons/maps/local-hospital';
|
||||
import Instance from '../../../../../../../components/Connection';
|
||||
|
||||
const customContentStyle = {
|
||||
width: '100%',
|
||||
maxWidth: 'none',
|
||||
};
|
||||
|
||||
const groupBy = function (array, f) {
|
||||
var groups = {};
|
||||
array.forEach(function (o) {
|
||||
var group = JSON.stringify(f(o));
|
||||
groups[group] = groups[group] || [];
|
||||
groups[group].push(o);
|
||||
});
|
||||
return Object.keys(groups).map(function (group) {
|
||||
return groups[group];
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
export default class ProviderSelection extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.props = props;
|
||||
this.state = {
|
||||
providers: [],
|
||||
selectedProviders: [],
|
||||
open: false,
|
||||
buttonValue: '',
|
||||
icon: '',
|
||||
floatingLabelText: '',
|
||||
value: '',
|
||||
geolocation: {
|
||||
lat: 0,
|
||||
long: 0
|
||||
}
|
||||
}
|
||||
|
||||
this.handleOpen = this.handleOpen.bind(this);
|
||||
this.handleCancel = this.handleCancel.bind(this);
|
||||
this.handleClose = this.handleClose.bind(this);
|
||||
this.handleRemoveProvider = this.handleRemoveProvider.bind(this);
|
||||
this.handleProviderClick = this.handleProviderClick.bind(this);
|
||||
this.searchProvider = this.searchProvider.bind(this);
|
||||
this.geoSuccess = this.geoSuccess.bind(this);
|
||||
this.noPosition = this.noPosition.bind(this);
|
||||
}
|
||||
|
||||
static propTypes = {
|
||||
title: React.PropTypes.string,
|
||||
buttonValue: React.PropTypes.string,
|
||||
icon: React.PropTypes.string,
|
||||
onProvidersAdded: React.PropTypes.function
|
||||
};
|
||||
|
||||
handleOpen = (e) => {
|
||||
this.setState(Object.assign(this.state, { open: true, providers: [], selectedProviders: [], value: '' }));
|
||||
};
|
||||
|
||||
handleCancel = (e) => {
|
||||
this.setState(Object.assign(this.state, { open: false }));
|
||||
};
|
||||
|
||||
handleClose = (e) => {
|
||||
if (this.state.selectedProviders.length > 0) {
|
||||
let params = []
|
||||
|
||||
this.state.selectedProviders.forEach(p => {
|
||||
let result = params.find(pr => p.id === pr.id);
|
||||
if (result) {
|
||||
let index = params.indexOf(result);
|
||||
if (index > -1) {
|
||||
params.splice(index, 1);
|
||||
result.raw.fivePartKeyGroups.push(p.raw.fivePartKeyGroups);
|
||||
params.push(result);
|
||||
}
|
||||
} else {
|
||||
params.push(p);
|
||||
}
|
||||
}, this);
|
||||
|
||||
params = params.map(p => { return p.raw; });
|
||||
|
||||
if (params && params.length > 0) {
|
||||
let url = `/v1/nemt/provider`;
|
||||
Instance.getRawConn().post(url, params).then(res => {
|
||||
if (this.props.onProvidersAdded) {
|
||||
this.props.onProvidersAdded(res.data);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
this.setState(Object.assign(this.state, { open: false }));
|
||||
};
|
||||
|
||||
handleRemoveProvider = (event, provider) => {
|
||||
event.preventDefault();
|
||||
let selectedProviders = this.state.selectedProviders;
|
||||
let result = selectedProviders.find(p => p.object_id === provider.object_id);
|
||||
if (result) {
|
||||
const index = selectedProviders.indexOf(result);
|
||||
if (index > -1) {
|
||||
selectedProviders.splice(index, 1);
|
||||
}
|
||||
}
|
||||
this.setState(Object.assign(this.state, { selectedProviders: selectedProviders }));
|
||||
}
|
||||
|
||||
handleProviderClick = (event, provider) => {
|
||||
event.preventDefault();
|
||||
let selectedProviders = this.state.selectedProviders;
|
||||
debugger;
|
||||
let result = selectedProviders.find(p => p.object_id === provider.object_id);
|
||||
if (result) {
|
||||
const index = selectedProviders.indexOf(result);
|
||||
if (index > -1) {
|
||||
selectedProviders.splice(index, 1);
|
||||
}
|
||||
} else {
|
||||
selectedProviders.push(provider);
|
||||
}
|
||||
this.setState(Object.assign(this.state, { selectedProviders: selectedProviders }));
|
||||
}
|
||||
|
||||
searchProvider = (e) => {
|
||||
let providerName = e.target.value;
|
||||
this.setState(Object.assign(this.state, { value: providerName }));
|
||||
let url = `/v1/nemt/provider?lat=${this.state.geolocation.lat}&long=${this.state.geolocation.long}&limit=20&name=${providerName}&sortby=distance`
|
||||
Instance.getRawConn().get(encodeURI(url)).then(res => {
|
||||
if (res.data.resultStatus === "SUCCESS") {
|
||||
if (res.data.providers && res.data.providers.length > 0) {
|
||||
var places = [];
|
||||
res.data.providers.forEach(p => {
|
||||
var result = groupBy(p.fivePartKeyGroups, function (item) {
|
||||
return [item.providerNum, item.providerNumSuffix, item.locationSeqNum, item.planCode, item.productId];
|
||||
});
|
||||
|
||||
result = result.map(r => {
|
||||
let raw = p;
|
||||
raw.fivePartKeyGroups = r;
|
||||
|
||||
let clickResult = {
|
||||
id: p.mukId,
|
||||
address: `${p.streetName_1}, ${p.cityName}, ${p.state} (${p.zipCode})`,
|
||||
lat: parseFloat(p.latitude),
|
||||
lng: parseFloat(p.longitude),
|
||||
name: p.providerName,
|
||||
street: p.streetName_1,
|
||||
city: p.cityName,
|
||||
state: p.state,
|
||||
zip_code: p.zipCode,
|
||||
phone_number: p.phoneNumber,
|
||||
type: "provider",
|
||||
internal_id: r[0].providerNum,
|
||||
internal_id_suffix: r[0].providerNumSuffix,
|
||||
location_seq_num: r[0].locationSeqNum,
|
||||
plan_code: r[0].planCode,
|
||||
product_id: r[0].productId,
|
||||
treatment_code: r[0].treatmentCategoryCode,
|
||||
object_id: p.mukId + '-' + r[0].providerNum + '-' + r[0].planCode + '-' + r[0].productId,
|
||||
raw: raw,
|
||||
text: `${p.providerName} - ${p.streetName_1}, ${p.cityName}, ${p.state} (${p.zipCode})`
|
||||
}
|
||||
|
||||
let checked = false;
|
||||
let provider = this.state.selectedProviders.find(p => p.id === clickResult.id)
|
||||
if (provider) {
|
||||
checked = true;
|
||||
}
|
||||
|
||||
var listItem = (
|
||||
<ListItem
|
||||
id={clickResult.object_id}
|
||||
leftCheckbox={<Checkbox checked={checked} />}
|
||||
value={clickResult.object_id}
|
||||
key={clickResult.object_id}
|
||||
primaryText={`${clickResult.name} - Plan: ${clickResult.plan_code} Product: ${clickResult.product_id}`}
|
||||
secondaryText={clickResult.address}
|
||||
rightIcon={<MapsLocalHospital />}
|
||||
onClick={(event) => this.handleProviderClick(event, clickResult, this)}
|
||||
/>
|
||||
)
|
||||
return listItem;
|
||||
});
|
||||
|
||||
places = places.concat(result);
|
||||
}, this);
|
||||
this.setState(Object.assign(this.state, { providers: places }));
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
geoSuccess = (position) => {
|
||||
let geo = {
|
||||
lat: position.coords.latitude,
|
||||
long: position.coords.longitude
|
||||
}
|
||||
|
||||
geo = {
|
||||
lat: 41.819078,
|
||||
long: -87.623129,
|
||||
}
|
||||
|
||||
this.setState(Object.assign(this.state, { geolocation: geo }));
|
||||
};
|
||||
|
||||
noPosition = () => {
|
||||
this.geoSuccess({
|
||||
coords: {
|
||||
latitude: 41.819078,
|
||||
longitude: -87.623129
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
componentWillReceiveProps(nextProps) {
|
||||
const self = this;
|
||||
var objConf = {
|
||||
open: false,
|
||||
buttonValue: nextProps.buttonValue,
|
||||
icon: nextProps.icon,
|
||||
floatingLabelText: 'Type the provider name'
|
||||
}
|
||||
|
||||
this.setState(Object.assign(this.state, objConf));
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
const self = this;
|
||||
var objConf = {
|
||||
open: false,
|
||||
buttonValue: this.props.buttonValue,
|
||||
icon: this.props.icon,
|
||||
floatingLabelText: 'Type the provider name'
|
||||
}
|
||||
|
||||
this.setState(Object.assign(this.state, objConf));
|
||||
navigator.geolocation.getCurrentPosition(this.geoSuccess, this.noPosition);
|
||||
};
|
||||
|
||||
render() {
|
||||
const self = this;
|
||||
let actions = [
|
||||
<FlatButton
|
||||
label="Cancel"
|
||||
primary={true}
|
||||
onClick={(e) => this.handleCancel(e, this)}
|
||||
/>,
|
||||
<FlatButton
|
||||
label="Submit"
|
||||
primary={true}
|
||||
keyboardFocused={true}
|
||||
onClick={(e) => this.handleClose(e, this)}
|
||||
/>,
|
||||
];
|
||||
|
||||
let button = (
|
||||
<RaisedButton
|
||||
label={this.state.buttonValue}
|
||||
onClick={(e) => this.handleOpen(e, this)}
|
||||
secondary
|
||||
icon={this.state.icon}
|
||||
fullWidth={true}
|
||||
/>);
|
||||
|
||||
let selectedProviderList;
|
||||
if (this.state.selectedProviders.length > 0) {
|
||||
let items = this.state.selectedProviders.map(p => {
|
||||
var listItem = (
|
||||
<ListItem
|
||||
leftCheckbox={<Checkbox checked={true} />}
|
||||
value={p.id}
|
||||
key={p.id}
|
||||
primaryText={`${p.name} - Plan: ${p.plan_code} Product: ${p.product_id}`}
|
||||
secondaryText={p.address}
|
||||
rightIcon={<MapsLocalHospital />}
|
||||
onClick={(event) => this.handleRemoveProvider(event, p, this)}
|
||||
/>
|
||||
)
|
||||
return listItem;
|
||||
});
|
||||
|
||||
selectedProviderList = (
|
||||
<div>
|
||||
<List>
|
||||
<Subheader>Selected Providers</Subheader>
|
||||
{items}
|
||||
</List>
|
||||
<Divider />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
{button}
|
||||
<Dialog
|
||||
contentStyle={customContentStyle}
|
||||
title={this.props.title}
|
||||
actions={actions}
|
||||
modal={true}
|
||||
open={this.state.open}
|
||||
onRequestClose={this.handleClose}
|
||||
>
|
||||
<div className="" id="container">
|
||||
<TextField onChange={(e) => this.searchProvider(e)} fullWidth={true} floatingLabelText={this.state.floatingLabelText} value={this.state.value} />
|
||||
{selectedProviderList}
|
||||
<List>
|
||||
{this.state.providers}
|
||||
</List>
|
||||
</div>
|
||||
</Dialog>
|
||||
</div>);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,65 @@
|
||||
import React from 'react';
|
||||
import IconMenu from 'material-ui/IconMenu';
|
||||
import IconButton from 'material-ui/IconButton';
|
||||
import FontIcon from 'material-ui/FontIcon';
|
||||
import NavigationExpandMoreIcon from 'material-ui/svg-icons/navigation/expand-more';
|
||||
import MenuItem from 'material-ui/MenuItem';
|
||||
import DropDownMenu from 'material-ui/DropDownMenu';
|
||||
import RaisedButton from 'material-ui/RaisedButton';
|
||||
import FlatButton from 'material-ui/FlatButton';
|
||||
import ContentAdd from 'material-ui/svg-icons/content/add';
|
||||
import { Toolbar, ToolbarGroup, ToolbarSeparator, ToolbarTitle } from 'material-ui/Toolbar';
|
||||
//import ProviderSelection from './ProviderSelection.js';
|
||||
import OrganizationComponent from '../../organizations/components/OrganizationComponent';
|
||||
|
||||
class ToolbarProviders extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
value: 1,
|
||||
};
|
||||
}
|
||||
|
||||
handleChange = (event, index, value) => this.setState({ value });
|
||||
// handleProvidersAdded = (providerList) => {
|
||||
// if (this.props.onProvidersReceived) {
|
||||
// this.props.onProvidersReceived(providerList);
|
||||
// }
|
||||
// }
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Toolbar>
|
||||
<ToolbarGroup firstChild>
|
||||
<DropDownMenu value={this.state.value} openImmediately={false} onChange={this.handleChange}>
|
||||
<MenuItem value={1} primaryText="All Participating Providers" />
|
||||
</DropDownMenu>
|
||||
</ToolbarGroup>
|
||||
<ToolbarGroup>
|
||||
<FontIcon className="muidocs-icon-custom-sort" />
|
||||
<ToolbarSeparator />
|
||||
<OrganizationComponent title={"Provider"} buttonValue={"Add Provider"} />
|
||||
<div className="divider" />
|
||||
<ToolbarSeparator />
|
||||
<IconMenu
|
||||
iconButtonElement={
|
||||
<IconButton touch>
|
||||
<NavigationExpandMoreIcon />
|
||||
</IconButton>
|
||||
}
|
||||
>
|
||||
<MenuItem primaryText="Download" />
|
||||
<MenuItem primaryText="Print" />
|
||||
</IconMenu>
|
||||
</ToolbarGroup>
|
||||
</Toolbar>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const ToolbarProviderComponent = (props) => (
|
||||
<ToolbarProviders onProvidersReceived={props.onProvidersReceived} />
|
||||
);
|
||||
|
||||
|
||||
module.exports = ToolbarProviderComponent;
|
||||
8
src/routes/app/routes/tables/routes/provider/index.js
Normal file
8
src/routes/app/routes/tables/routes/provider/index.js
Normal file
@@ -0,0 +1,8 @@
|
||||
module.exports = {
|
||||
path: 'provider',
|
||||
getComponent(nextState, cb) {
|
||||
require.ensure([], (require) => {
|
||||
cb(null, require('./components/Page'));
|
||||
});
|
||||
}
|
||||
};
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user