(
56 |
57 | )} />
58 | );
59 | };
60 |
61 | RouteHOC.propTypes = {
62 | path: PropTypes.string,
63 | match: PropTypes.object
64 | };
65 |
66 | return withRouter(RouteHOC);
67 | };
68 |
69 | export default withRouter(Route);
70 |
--------------------------------------------------------------------------------
/src/views/components/ScaleCard.css:
--------------------------------------------------------------------------------
1 | .container {
2 | display: flex;
3 | flex-flow: column nowrap;
4 | justify-content: space-around;
5 | align-items: center;
6 | height: 100%;
7 | min-height: 128px;
8 | }
9 |
10 | .sensorValue {
11 | margin: 0px 8px 8px 8px;
12 | font-size: 13px;
13 | color: #c8c8c8;
14 | }
15 |
16 | .sensorValues {
17 | display: flex;
18 | flex-flow: row nowrap;
19 | align-items: center;
20 | justify-content: center;
21 | flex: 1 0;
22 | }
23 |
24 | .sensorTitle {
25 | display: flex;
26 | flex-flow: column nowrap;
27 | align-items: center;
28 | justify-content: center;
29 | flex: 1 0;
30 | /* margin: 24px 0; */
31 | /* padding: 0 8px; */
32 | text-align: center;
33 | /* display: block; */
34 | font-size: 54px;
35 | color: #969696;
36 | }
37 |
38 | .sensorPanelA {
39 | display: flex;
40 | flex-flow: column nowrap;
41 | align-items: center;
42 | justify-content: center;
43 | flex: 1 0;
44 | padding: 12px 12px 12px 12px;
45 | /* margin: 24px 0; */
46 | /* padding: 0 16px; */
47 | text-align: center;
48 | /* align-items: center; */
49 | border-bottom: 1px solid #7e7e7e;
50 | }
51 |
52 | .sensorPanelB {
53 | display: flex;
54 | flex-flow: column nowrap;
55 | align-items: center;
56 | justify-content: center;
57 | flex: 1 0;
58 | padding: 12px 12px 12px 12px;
59 | /* margin: 24px 0; */
60 | /* padding: 0 16px; */
61 | text-align: center;
62 | /* align-items: center; */
63 | }
64 |
--------------------------------------------------------------------------------
/src/views/components/SelectField.css:
--------------------------------------------------------------------------------
1 | .select,
2 | .input {
3 | width: 100%;
4 | height: 100%;
5 | position: absolute;
6 | top: 0;
7 | left: 0;
8 | }
9 | .isDisabled {
10 | cursor: not-allowed;
11 | }
12 |
13 | .input {
14 | opacity: 0;
15 | z-index: 1;
16 | cursor: pointer;
17 | color: initial;
18 | }
19 | .isDisabled > .input {
20 | cursor: inherit;
21 | }
22 |
23 | .icon {
24 | display: flex;
25 | position: absolute;
26 | top: calc(50% - 5px);
27 | right: 17px;
28 | }
29 |
--------------------------------------------------------------------------------
/src/views/components/SelectField.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import TextField from './TextField.js';
4 | import MenuIndicatorIcon from '../icons/MenuIndicatorIcon.js';
5 | import {getUniqueId} from '../../utilities.js';
6 | import styles from './SelectField.css';
7 |
8 | export class SelectField extends React.Component {
9 | constructor (props) {
10 | super(props);
11 |
12 | this.inputId = getUniqueId();
13 | }
14 |
15 | render () {
16 | const {label, name, options, ...inputProps} = this.props,
17 | currentOption = options.find((option) => option.value === inputProps.value);
18 |
19 | return (
20 |
26 |
27 |
41 |
42 |
43 |
44 |
45 |
46 | );
47 | }
48 | }
49 |
50 | SelectField.propTypes = {
51 | label: PropTypes.string,
52 | name: PropTypes.string,
53 | value: PropTypes.oneOfType([
54 | PropTypes.string,
55 | PropTypes.number
56 | ]),
57 | disabled: PropTypes.bool,
58 | options: PropTypes.array
59 | };
60 |
61 | export default SelectField;
62 |
--------------------------------------------------------------------------------
/src/views/components/ServiceCard.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import CameraCard from './CameraCard.js';
4 | import DimmerCard from './DimmerCard.js';
5 | import GrowPodCard from './GrowPodCard.js';
6 | import AccessControlCard from './AccessControlCard.js';
7 | import LightCard from './LightCard.js';
8 | import ScaleCard from './ScaleCard.js';
9 | import ButtonCard from './ButtonCard.js';
10 | import GlobalAlarmCard from './AlarmCardGlobal.js';
11 | import GameMachineCard from './GameMachineCard.js';
12 | import LockCard from './LockCard.js';
13 | import ThermostatCard from './ThermostatCard.js';
14 | import MediaCard from './MediaCard.js';
15 |
16 | export const ServiceCard = (props) => {
17 | const Card = ServiceCard.cardComponents[props.service.type];
18 |
19 | return Card && ;
20 | };
21 |
22 | ServiceCard.willCardRender = ({type}) => Boolean(ServiceCard.cardComponents[type]);
23 |
24 | ServiceCard.propTypes = {
25 | service: PropTypes.object
26 | };
27 |
28 | ServiceCard.cardComponents = {
29 | 'camera': CameraCard,
30 | 'network-camera': CameraCard,
31 | 'dimmer': DimmerCard,
32 | 'grow-pod': GrowPodCard,
33 | 'access-control': AccessControlCard,
34 | 'light': LightCard,
35 | 'scale': ScaleCard,
36 | 'global-alarm': GlobalAlarmCard,
37 | 'button': ButtonCard,
38 | 'game-machine': GameMachineCard,
39 | 'lock': LockCard,
40 | 'thermostat': ThermostatCard,
41 | 'media': MediaCard
42 | };
43 |
44 | export default ServiceCard;
45 |
--------------------------------------------------------------------------------
/src/views/components/ServiceCardBase.css:
--------------------------------------------------------------------------------
1 | @value topBarHeight: 72px;
2 | @value bottomBarHeight: 48px;
3 |
4 | .card {
5 | display: flex;
6 | flex-flow: column nowrap;
7 | width: 100%;
8 | flex: 1 1 auto;
9 | background-color: #444444;
10 | border: 1px solid #888888;
11 | border-radius: 4px;
12 | overflow: hidden;
13 | cursor: pointer;
14 | }
15 |
16 | .topBar {
17 | display: flex;
18 | flex-flow: row nowrap;
19 | height: topBarHeight;
20 | padding: 0 16px;
21 | position: relative;
22 | z-index: 10;
23 | opacity: 1;
24 | background-color: rgba(56, 56, 56, 0.9);
25 | font-size: 14px;
26 | transition: opacity 0.2s;
27 | }
28 | .topBarHidden {
29 | composes: topBar;
30 | opacity: 0;
31 | pointer-events: none;
32 | }
33 |
34 | .bottomBar {
35 | composes: topBar;
36 | height: bottomBarHeight;
37 | padding: 0 8px;
38 | }
39 | .bottomBarHidden {
40 | composes: bottomBar;
41 | composes: topBarHidden;
42 | }
43 |
44 | .topBarNone {
45 | composes: topBar;
46 | display: none;
47 | pointer-events: none;
48 | }
49 |
50 | .bottomBarNone {
51 | composes: bottomBar;
52 | composes: topBarHidden;
53 | display: none;
54 | }
55 |
56 | .content {
57 | flex: 1 1 auto;
58 | position: relative;
59 | }
60 |
61 | .contentBehindToolbars {
62 | composes: content;
63 | margin: calc(0px - topBarHeight) 0 calc(0px - bottomBarHeight) 0;
64 | }
65 |
--------------------------------------------------------------------------------
/src/views/components/ServiceCardBase.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import {withRouter} from 'react-router-dom';
4 | import Toolbar from './Toolbar.js';
5 | import Button from './Button.js';
6 | import ServiceHeader from './ServiceHeader.js';
7 | import styles from './ServiceCardBase.css';
8 |
9 | export const ServiceCardBase = (props) => {
10 | const detailsPath = `${props.match.url}/service/${props.service.id}`;
11 |
12 | return (
13 | props.history.push(detailsPath))}>
14 |
15 |
20 |
21 |
22 | {props.children}
23 |
24 |
25 | event.stopPropagation()}>{props.secondaryAction}
}
27 | rightChildren={ event.stopPropagation()}>
28 |
29 |
} />
30 |
31 |
32 | );
33 | };
34 |
35 | ServiceCardBase.propTypes = {
36 | service: PropTypes.object,
37 | name: PropTypes.string,
38 | status: PropTypes.string,
39 | isConnected: PropTypes.bool,
40 | children: PropTypes.node,
41 | toolbarsOverlayContent: PropTypes.bool,
42 | secondaryAction: PropTypes.node,
43 | hideToolbars: PropTypes.bool,
44 | removePadding: PropTypes.bool,
45 | onCardClick: PropTypes.func,
46 | match: PropTypes.object,
47 | history: PropTypes.object
48 | };
49 |
50 | export default withRouter(ServiceCardBase);
51 |
--------------------------------------------------------------------------------
/src/views/components/ServiceCardGrid.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import {Switch, Redirect, withRouter} from 'react-router-dom';
4 | import Route from './Route.js';
5 | import ServiceCard from './ServiceCard.js';
6 | import ServiceDetailsScreen from './ServiceDetailsScreen.js';
7 | import ServiceLogScreen from './ServiceLogScreen.js';
8 | import DeviceLogScreen from './DeviceLogScreen.js';
9 | import CameraRecordingsScreen from './CameraRecordingsScreen.js';
10 | import Grid from '../layouts/Grid.js';
11 | import GridColumn from '../layouts/GridColumn.js';
12 |
13 | export const ServiceCardGrid = (props) => {
14 | const serviceCards = props.services
15 | .filter(ServiceCard.willCardRender)
16 | .toArray()
17 | .map(([, service]) => );
18 |
19 | return (
20 |
21 | (
22 |
23 | {serviceCards.map((card, index) => (
24 | {card}
25 | ))}
26 |
27 | )} />
28 |
29 |
30 |
31 |
32 | } />
33 |
34 | );
35 | };
36 |
37 | ServiceCardGrid.propTypes = {
38 | services: PropTypes.object.isRequired,
39 | match: PropTypes.object
40 | };
41 |
42 | export default withRouter(ServiceCardGrid);
43 |
--------------------------------------------------------------------------------
/src/views/components/ServiceDetails.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import {Switch, Redirect, withRouter} from 'react-router-dom';
4 | import {Route} from './Route.js';
5 | import Button from './Button.js';
6 | import SettingsScreenContainer from './SettingsScreenContainer.js';
7 | import ServiceSettingsScreen from './ServiceSettingsScreen.js';
8 | import styles from './ServiceDetails.css';
9 | import MetaList from './MetaList.js';
10 |
11 | export class ServiceDetails extends React.Component {
12 | getDevice (property) {
13 | return (
14 | this.props.service.state.get('device' + property) ? this.props.service.state.get('device' + property) : '...'
15 | );
16 | }
17 |
18 | render () {
19 | return (
20 |
21 | (
22 |
23 | {this.props.service.error && The device settings could not be updated because of an error.
}
24 |
25 | {this.props.shouldShowSettingsButton && }
26 |
27 | {this.props.children}
28 |
29 | {[].filter((item) => Boolean(item.value))}
30 |
31 |
32 | )} />
33 |
34 | } />
35 |
36 | );
37 | }
38 | }
39 |
40 | ServiceDetails.settingsPath = '/service-settings';
41 |
42 | ServiceDetails.propTypes = {
43 | service: PropTypes.object.isRequired,
44 | children: PropTypes.node,
45 | shouldShowSettingsButton: PropTypes.bool,
46 | shouldShowRoomField: PropTypes.bool,
47 | match: PropTypes.object
48 | };
49 |
50 | export default withRouter(ServiceDetails);
51 |
--------------------------------------------------------------------------------
/src/views/components/ServiceDetailsScreen.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import {Redirect} from 'react-router-dom';
4 | import {withRoute} from './Route.js';
5 | import NavigationScreen from './NavigationScreen.js';
6 | import ServiceDetails from './ServiceDetails.js';
7 | import ThermostatServiceDetails from './ThermostatServiceDetails.js';
8 | import MediaServiceDetails from './MediaServiceDetails.js';
9 | import LightServiceDetails from './LightServiceDetails.js';
10 | import GrowServiceDetails from './GrowServiceDetails.js';
11 | import AccessControlServiceDetails from './AccessControlServiceDetails.js';
12 | import Button from './Button.js';
13 | import {connect} from 'react-redux';
14 | import {compose} from 'redux';
15 | import {getServiceById} from '../../state/ducks/services-list/selectors.js';
16 |
17 | export const ServiceDetailsScreen = (props) => {
18 | const service = props.service;
19 |
20 | if (!service) {
21 | return ;
22 | }
23 |
24 | return (
25 | Settings}>
29 |
30 | {props.service.get('type') === 'thermostat' ? : ''}
31 | {props.service.get('type') === 'media' ? : ''}
32 | {props.service.get('type') === 'light' ? : ''}
33 | {props.service.get('type') === 'grow-pod' ? : ''}
34 | {props.service.get('type') === 'access-control' ? : ''}
35 |
36 |
39 |
40 | );
41 | };
42 |
43 | ServiceDetailsScreen.propTypes = {
44 | service: PropTypes.object,
45 | shouldShowRoomField: PropTypes.bool,
46 | match: PropTypes.object.isRequired
47 | };
48 |
49 | const mapStateToProps = ({servicesList}, {match}) => {
50 | const service = getServiceById(servicesList, match.params.serviceId, false);
51 |
52 | if (!service) {
53 | return {};
54 | }
55 |
56 | return {service};
57 | };
58 |
59 | export default compose(
60 | withRoute({params: '/:serviceId'}),
61 | connect(mapStateToProps)
62 | )(ServiceDetailsScreen);
63 |
--------------------------------------------------------------------------------
/src/views/components/ServiceHeader.css:
--------------------------------------------------------------------------------
1 | @value disconnectedRed: #d30808;
2 |
3 | .header {
4 | display: flex;
5 | flex-flow: row nowrap;
6 | height: 72px;
7 | font-size: 14px;
8 | }
9 | .icon {
10 | display: flex;
11 | flex-flow: row nowrap;
12 | justify-content: center;
13 | align-items: center;
14 | width: 56px;
15 | padding: 16px 16px 16px 0;
16 | position: relative;
17 | }
18 | .disconnectedIcon {
19 | composes: icon;
20 | }
21 | .disconnectedIcon::after {
22 | content: "!";
23 | display: table-cell;
24 | vertical-align: middle;
25 | box-sizing: border-box;
26 | width: 18px;
27 | height: 18px;
28 | position: absolute;
29 | right: 16px;
30 | bottom: 16px;
31 | border-radius: 100%;
32 | background-color: disconnectedRed;
33 | color: #ffffff;
34 | font-size: 15px;
35 | line-height: 20px;
36 | font-weight: bold;
37 | text-align: center;
38 | }
39 | .nameWrapper {
40 | display: flex;
41 | flex-flow: column nowrap;
42 | justify-content: center;
43 | }
44 | .name {
45 | display: flex;
46 | flex-flow: column nowrap;
47 | justify-content: center;
48 | min-height: 20px;
49 | }
50 | .status {
51 | display: flex;
52 | flex-flow: column nowrap;
53 | justify-content: center;
54 | min-height: 20px;
55 | color: #909090;
56 | }
57 | .disconnectedStatus {
58 | composes: status;
59 | color: disconnectedRed;
60 | }
61 |
--------------------------------------------------------------------------------
/src/views/components/ServiceHeader.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import ServiceIcon from '../icons/ServiceIcon.js';
4 | import styles from './ServiceHeader.css';
5 |
6 | export const ServiceHeader = (props) => {
7 | const status = props.isConnected
8 | ? props.status
9 | : 'Not Responding';
10 |
11 | return (
12 |
13 | {ServiceIcon.willRenderIcon(props.service) &&
14 |
15 |
16 |
}
17 |
18 |
19 | {props.name || props.service.settings.get('name') || props.service.strings.get('friendly_type')}
20 |
21 | {status &&
22 |
23 | {status}
24 | }
25 |
26 |
18 | {[
19 | {
20 | label: 'Devices',
21 | link: this.props.match.url + '/devices',
22 | icon: // TODO: Get rid of this hack.
23 | },
24 | {
25 | label: 'Rooms',
26 | link: this.props.match.url + '/rooms',
27 | icon:
28 | }
29 | ]}
30 |
31 | )} />
32 |
33 |
34 | } />
35 |
36 |
37 | );
38 | }
39 | }
40 |
41 | SettingsScreen.propTypes = {
42 | match: PropTypes.object.isRequired
43 | };
44 |
45 | export default withRoute()(SettingsScreen);
46 |
--------------------------------------------------------------------------------
/src/views/components/SettingsScreenContainer.css:
--------------------------------------------------------------------------------
1 | .container {
2 | max-width: 500px;
3 | }
4 | .containerWithPadding {
5 | composes: container;
6 | padding: 8px 16px;
7 | }
8 |
--------------------------------------------------------------------------------
/src/views/components/SettingsScreenContainer.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import styles from './SettingsScreenContainer.css';
4 |
5 | export const SettingsScreenContainer = ({section, children, withPadding}) => React.createElement(
6 | section ? 'section' : 'div',
7 | {
8 | className: withPadding ? styles.containerWithPadding : styles.container,
9 | children
10 | }
11 | );
12 |
13 | SettingsScreenContainer.propTypes = {
14 | section: PropTypes.bool,
15 | children: PropTypes.node,
16 | withPadding: PropTypes.bool
17 | };
18 |
19 | export default SettingsScreenContainer;
20 |
--------------------------------------------------------------------------------
/src/views/components/SliderControl.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import Slider from 'rc-slider';
4 | // import 'rc-slider/assets/index.css';
5 |
6 | export class SliderControl extends React.Component {
7 | constructor (props) {
8 | super(props);
9 | const value = props.value || 0;
10 |
11 | this.state = {
12 | value,
13 | is_changing: false
14 | };
15 | }
16 |
17 | onBeforeChange () {
18 | if (this.state.is_changing) {
19 | return;
20 | }
21 |
22 | this.setState({
23 | value: this.props.value,
24 | is_changing: true
25 | });
26 | }
27 |
28 | handleInput (value) {
29 | this.setState({value});
30 |
31 | if (typeof this.props.onInput === 'function') {
32 | this.props.onInput(value);
33 | }
34 | }
35 |
36 | handleChange (value) {
37 | this.setState({
38 | value,
39 | is_changing: false
40 | });
41 |
42 | if (typeof this.props.onChange === 'function') {
43 | this.props.onChange(value);
44 | }
45 | }
46 |
47 | render() {
48 | const SliderComponent = this.props.tooltip
49 | ? Slider.createSliderWithTooltip(Slider)
50 | : Slider,
51 | currentValue = this.state.is_changing
52 | ? this.state.value
53 | : this.props.value;
54 |
55 | return (
56 |
64 | );
65 | }
66 | }
67 |
68 | SliderControl.propTypes = {
69 | value: PropTypes.number,
70 | max: PropTypes.number,
71 | min: PropTypes.number,
72 | tooltip: PropTypes.bool,
73 | onChange: PropTypes.func,
74 | onInput: PropTypes.func,
75 | disabled: PropTypes.bool
76 | };
77 |
78 | SliderControl.defaultProps = {
79 | value: 0
80 | };
81 |
82 | export default SliderControl;
83 |
--------------------------------------------------------------------------------
/src/views/components/Switch.css:
--------------------------------------------------------------------------------
1 | @value primary from "../styles/colors.css";
2 |
3 | .container {
4 | display: flex;
5 | flex-flow: row nowrap;
6 | align-items: center;
7 | }
8 |
9 | .offLabel,
10 | .onLabel {
11 | font-size: 13px;
12 | font-weight: bold;
13 | text-transform: uppercase;
14 | }
15 | .offLabel {
16 | margin-right: 8px;
17 | }
18 | .onLabel {
19 | margin-left: 8px;
20 | }
21 |
22 | .switch {
23 | display: block;
24 | width: 32px;
25 | height: 14px;
26 | margin: 3px 0;
27 |
28 | position: relative;
29 | }
30 | .isDisabled {
31 | opacity: 0.5;
32 | cursor: not-allowed;
33 | }
34 |
35 | /* Track */
36 | .switch::before {
37 | content: "";
38 | display: block;
39 | width: 100%;
40 | height: 100%;
41 |
42 | position: absolute;
43 |
44 | border-radius: 14px;
45 | background-color: #bebebe;
46 |
47 | transition: all 0.09s;
48 | }
49 | .isOn::before {
50 | background-color: primary;
51 | opacity: 0.54;
52 | }
53 |
54 | /* Thumb */
55 | .switch::after {
56 | content: "";
57 | display: block;
58 | width: 20px;
59 | height: 20px;
60 |
61 | position: absolute;
62 | top: -3px;
63 | left: -3px;
64 |
65 | border-radius: 100%;
66 | background-color: #ffffff;
67 | box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
68 |
69 | transition: all 0.09s;
70 | }
71 | .isOn::after {
72 | transform: translateX(20px);
73 | background-color: primary;
74 | }
75 |
76 | .input {
77 | width: 38px;
78 | height: 20px;
79 | position: absolute;
80 | top: -3px;
81 | left: -3px;
82 | opacity: 0;
83 | z-index: 1;
84 | cursor: pointer;
85 | }
86 | .isDisabled .input {
87 | cursor: inherit;
88 | }
89 |
--------------------------------------------------------------------------------
/src/views/components/Switch.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import styles from './Switch.css';
4 |
5 | export const Switch = (props) => {
6 | const {isOn, showLabels, offLabel, onLabel, ...inputProps} = {...props};
7 |
8 | return (
9 |
10 | {showLabels && {offLabel}}
11 |
12 |
17 |
18 | {showLabels && {onLabel}}
19 |
20 | );
21 | };
22 |
23 | Switch.propTypes = {
24 | isOn: PropTypes.bool,
25 | showLabels: PropTypes.bool,
26 | offLabel: PropTypes.string,
27 | onLabel: PropTypes.string,
28 | disabled: PropTypes.bool
29 | };
30 |
31 | Switch.defaultProps = {
32 | isOn: false,
33 | offLabel: 'Off',
34 | onLabel: 'On'
35 | };
36 |
37 | export default Switch;
38 |
--------------------------------------------------------------------------------
/src/views/components/SwitchField.css:
--------------------------------------------------------------------------------
1 | .container {
2 | margin: 8px 0 0 0;
3 | }
4 |
5 | .field {
6 | display: flex;
7 | flex-flow: row nowrap;
8 | justify-content: space-between;
9 | align-items: center;
10 | position: relative;
11 | width: 100%;
12 | height: 54px;
13 | padding: 14px 0;
14 | }
15 | .isFocused {}
16 | .isDisabled {
17 | cursor: not-allowed;
18 | }
19 |
20 | .label {}
21 | .isDisabled > .label {
22 | opacity: 0.5;
23 | }
24 |
--------------------------------------------------------------------------------
/src/views/components/SwitchField.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import Switch from './Switch.js';
4 | import {getUniqueId} from '../../utilities.js';
5 | import styles from './SwitchField.css';
6 |
7 | export class SwitchField extends React.Component {
8 | constructor (props) {
9 | super(props);
10 |
11 | this.inputId = getUniqueId();
12 | this.state = {is_focused: false};
13 |
14 | this.handleFocus = this.handleFocus.bind(this);
15 | this.handleBlur = this.handleBlur.bind(this);
16 | }
17 |
18 | handleFocus (event) {
19 | this.setState({is_focused: true});
20 |
21 | if (typeof this.props.onFocus === 'function') {
22 | this.props.onFocus(event);
23 | }
24 | }
25 |
26 | handleBlur (event) {
27 | this.setState({is_focused: false});
28 |
29 | if (typeof this.props.onBlur === 'function') {
30 | this.props.onBlur(event);
31 | }
32 | }
33 |
34 | render () {
35 | return (
36 |
37 |
38 |
39 |
47 |
48 |
8 |
9 | {props.buttons.map((button, index) => (
10 | -
11 |
12 |
13 | ))}
14 |
15 |
7 |
{props.leftChildren}
8 | {props.middleChildren &&
9 |
{props.middleChildren}
}
10 | {(props.rightChildren || props.middleChildren) &&
11 |
{props.rightChildren}
}
12 |
7 | {props.children}
8 |
9 | );
10 |
11 | Grid.propTypes = {
12 | children: PropTypes.node
13 | };
14 |
15 | export default Grid;
16 |
--------------------------------------------------------------------------------
/src/views/layouts/GridColumn.css:
--------------------------------------------------------------------------------
1 | .column {
2 | display: flex;
3 | flex-flow: column nowrap;
4 | padding: 0 16px 16px 0;
5 | }
6 | @media (min-width: 720px) {
7 | .column {
8 | padding-right: 24px;
9 | padding-bottom: 24px;
10 | }
11 | }
12 |
13 | .column1, .column2, .column3, .column4, .column5, .column6, .column7, .column8, .column9, .column10, .column11, .column12 {
14 | composes: column;
15 | }
16 |
17 | .column1 { width: calc(1% / 0.04); }
18 | .column2 { width: calc(2% / 0.04); }
19 | .column3 { width: calc(3% / 0.04); }
20 | .column4,
21 | .column5,
22 | .column6,
23 | .column7,
24 | .column8,
25 | .column9,
26 | .column10,
27 | .column11,
28 | .column12 { width: calc(4% / 0.04); }
29 |
30 | @media (min-width: 600px) {
31 | .column1 { width: calc(1% / 0.08); }
32 | .column2 { width: calc(2% / 0.08); }
33 | .column3 { width: calc(3% / 0.08); }
34 | .column4 { width: calc(4% / 0.08); }
35 | .column5 { width: calc(5% / 0.08); }
36 | .column6 { width: calc(6% / 0.08); }
37 | .column7 { width: calc(7% / 0.08); }
38 | .column8,
39 | .column9,
40 | .column10,
41 | .column11,
42 | .column12 { width: calc(8% / 0.08); }
43 | }
44 |
45 | @media (min-width: 1024px) {
46 | .column1 { width: calc(1% / 0.12); }
47 | .column2 { width: calc(2% / 0.12); }
48 | .column3 { width: calc(3% / 0.12); }
49 | .column4 { width: calc(4% / 0.12); }
50 | .column5 { width: calc(5% / 0.12); }
51 | .column6 { width: calc(6% / 0.12); }
52 | .column7 { width: calc(7% / 0.12); }
53 | .column8 { width: calc(8% / 0.12); }
54 | .column9 { width: calc(9% / 0.12); }
55 | .column10 { width: calc(10% / 0.12); }
56 | .column11 { width: calc(11% / 0.12); }
57 | .column12 { width: calc(12% / 0.12); }
58 | }
59 |
--------------------------------------------------------------------------------
/src/views/layouts/GridColumn.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import styles from './GridColumn.css';
4 |
5 | export const GridColumn = (props) => {
6 | const numberOfColumns = props.columns || '',
7 | columnClass = numberOfColumns ? styles[`column${numberOfColumns}`] : '',
8 | combinedClasses = `${styles.column} ${columnClass}`;
9 |
10 | return (
11 |
12 | {props.children}
13 |
14 | );
15 | };
16 |
17 | GridColumn.propTypes = {
18 | children: PropTypes.node,
19 | columns: PropTypes.number
20 | };
21 |
22 | export default GridColumn;
23 |
--------------------------------------------------------------------------------
/src/views/layouts/LoginScreen.css:
--------------------------------------------------------------------------------
1 | @value toolbarBackground from "../styles/colors.css";
2 | @value error from "../styles/colors.css";
3 |
4 | .screen {
5 | display: flex;
6 | flex-flow: column nowrap;
7 | justify-content: center;
8 | align-items: center;
9 | width: 100%;
10 | min-height: 100%;
11 | padding: 16px;
12 | }
13 | .container {
14 | display: flex;
15 | flex-flow: column nowrap;
16 | position: relative;
17 | overflow: hidden;
18 | width: 100%;
19 | max-width: 400px;
20 | padding: 20px 30px;
21 | background-color: toolbarBackground;
22 | border-radius: 4px;
23 | }
24 | .branding {
25 | margin: 8px 0;
26 | }
27 | .errorMessage {
28 | font-size: 12px;
29 | color: error;
30 | }
31 | .loading {
32 | composes: fillContext from "../styles/helpers.css";
33 | display: flex;
34 | flex-flow: column nowrap;
35 | justify-content: center;
36 | align-items: center;
37 | background-color: toolbarBackground;
38 | opacity: 0.8;
39 | }
40 | .footer {
41 | margin: 16px 0;
42 | font-size: 14px;
43 | }
44 |
--------------------------------------------------------------------------------
/src/views/styles/base.css:
--------------------------------------------------------------------------------
1 | @import "./reset.css";
2 | @value background from "../styles/colors.css";
3 | @value text from "../styles/colors.css";
4 |
5 | html {
6 | width: 100%;
7 | height: 100%;
8 | overflow: hidden;
9 | background-color: background;
10 | font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
11 | color: text;
12 | cursor: default;
13 | user-select: none;
14 | }
15 |
16 | body {
17 | width: 100%;
18 | height: 100%;
19 | overflow: hidden;
20 | }
21 |
22 | a {
23 | color: #dcf7ff;
24 | text-decoration: underline;
25 | }
26 |
--------------------------------------------------------------------------------
/src/views/styles/colors.css:
--------------------------------------------------------------------------------
1 | @value background: #555555;
2 | @value toolbarBackground: #333333;
3 | @value tabBarBackground: #222222;
4 | @value text: #dddddd;
5 | @value primary: #5cd4f9;
6 | @value error: #ff4436;
7 |
--------------------------------------------------------------------------------
/src/views/styles/helpers.css:
--------------------------------------------------------------------------------
1 | .fillContext {
2 | position: absolute;
3 | top: 0;
4 | right: 0;
5 | bottom: 0;
6 | left: 0;
7 | }
8 |
9 | .aspectRatio43 {
10 | display: block;
11 | width: 100%;
12 |
13 | padding-top: calc((3 / 4) * 100%);
14 | }
15 |
16 | .selectable {
17 | user-select: text;
18 | cursor: auto;
19 | }
20 |
--------------------------------------------------------------------------------
/src/views/styles/reset.css:
--------------------------------------------------------------------------------
1 | * { box-sizing: border-box; }
2 |
3 | h1, h2, h3, h4, h5, h6 {
4 | margin: 0;
5 | font-size: 100%;
6 | font-weight: normal;
7 | }
8 |
9 | a {
10 | text-decoration: none;
11 | cursor: pointer;
12 | }
13 |
14 | ol,
15 | ul,
16 | menu,
17 | li {
18 | margin: 0;
19 | padding: 0;
20 | list-style: none;
21 | }
22 |
23 | button {
24 | padding: 0;
25 | background: transparent;
26 | border: 0;
27 | }
28 |
29 | iframe { border: 0; }
30 |
31 | img {
32 | display: inline-block;
33 | max-width: 100%;
34 | max-height: 100%;
35 | }
36 |
37 | figure { margin: 0; }
38 |
39 | label { cursor: inherit; }
40 |
--------------------------------------------------------------------------------
/testEmail.js:
--------------------------------------------------------------------------------
1 | const nodemailer = require('nodemailer');
2 |
3 | async function sendEmail() {
4 | try {
5 | // Create a transporter using SMTP with your Gmail and App Password
6 | const transporter = nodemailer.createTransport({
7 | service: 'gmail',
8 | auth: {
9 | user: 'physiphile@gmail.com', // Your Gmail address
10 | pass: 'kwxdxxcqeytkfufv' // Your generated App Password
11 | }
12 | });
13 |
14 | const message = {
15 | from: 'physiphile@gmail.com',
16 | to: '4058168685@mms.att.net', // Email-to-SMS gateway for AT&T
17 | subject: 'Test Email via Nodemailer and App Password',
18 | text: 'This is a test email sent using Gmail and App Password without OAuth2.'
19 | };
20 |
21 | // Send email
22 | const info = await transporter.sendMail(message);
23 | console.log('Text sent successfully!', info);
24 | } catch (error) {
25 | console.error('Error sending text:', error);
26 | }
27 | }
28 |
29 | sendEmail();
30 |
--------------------------------------------------------------------------------