first commit

src/routes/app/components/ContactList.js

@@ -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,
+}

src/routes/app/components/ContactOption.js

@@ -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;

src/routes/app/components/Geolocation.js

@@ -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;

src/routes/app/components/MainApp.js

@@ -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;

src/routes/app/components/RoadtripLink.js

@@ -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;