update branch
This commit is contained in:
commit
747bd370cc
72 changed files with 4184 additions and 2947 deletions
|
@ -31,7 +31,8 @@ sonar-scanner:
|
|||
- dev
|
||||
script:
|
||||
- cd smart-hut
|
||||
- yarn sonar-scanner -Dsonar.host.url=$SONAR_URL -Dsonar.login=$SONAR_LOGIN -Dsonar.projectName=$CI_PROJECT_PATH_SLUG -Dsonar.projectKey=$CI_PROJECT_PATH_SLUG -Dsonar.exclusion=cypress -Dsonar.sources=src -Dsonar.javascript.file.suffixes=.js,.jsx -Dsonar.sourceEncoding=UTF-8 -Dsonar.scm.disabled=True
|
||||
- yarn eslint:report || true
|
||||
- yarn sonar-scanner -Dsonar.host.url=$SONAR_URL -Dsonar.login=$SONAR_LOGIN -Dsonar.projectName=$CI_PROJECT_PATH_SLUG -Dsonar.projectKey=$CI_PROJECT_PATH_SLUG -Dsonar.exclusion=cypress -Dsonar.sources=src -Dsonar.javascript.file.suffixes=.js,.jsx -Dsonar.sourceEncoding=UTF-8 -Dsonar.scm.disabled=True -Dsonar.eslint.reportPaths=eslint-report.json
|
||||
|
||||
smartHut_deploy:
|
||||
stage: deploy
|
||||
|
|
|
@ -1,10 +1,11 @@
|
|||
#!/bin/sh
|
||||
|
||||
FILES=$(git diff --cached --name-only --diff-filter=ACMR "*.js" "*.jsx" | sed 's| |\\ |g')
|
||||
[ -z "$FILES" ] && exit 0
|
||||
FILES=$(git diff --cached --name-only --diff-filter=ACMR | sed 's| |\\ |g')
|
||||
|
||||
# Prettify all selected files
|
||||
echo "$FILES" | xargs ./smart-hut/node_modules/.bin/prettier --write
|
||||
cd $(git rev-parse --show-toplevel)/smart-hut
|
||||
npm run eslint-fix
|
||||
cd ..
|
||||
|
||||
# Add back the modified/prettified files to staging
|
||||
echo "$FILES" | xargs git add
|
||||
|
|
54
smart-hut/.eslintrc
Normal file
54
smart-hut/.eslintrc
Normal file
|
@ -0,0 +1,54 @@
|
|||
{
|
||||
"parser": "babel-eslint",
|
||||
"parserOptions": {
|
||||
"ecmaVersion": 2020,
|
||||
"sourceType": "module",
|
||||
"ecmaFeatures": {
|
||||
"jsx": true
|
||||
}
|
||||
},
|
||||
"rules": {
|
||||
"semi": "error",
|
||||
"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
|
||||
"react/jsx-no-bind": [
|
||||
"error",
|
||||
{
|
||||
"allowArrowFunctions": true,
|
||||
"allowBind": false,
|
||||
"ignoreRefs": true
|
||||
}
|
||||
],
|
||||
"react/no-did-update-set-state": "error",
|
||||
"react/no-unknown-property": "error",
|
||||
"react/no-unused-prop-types": "error",
|
||||
"react/prop-types": "error",
|
||||
"react/react-in-jsx-scope": "error",
|
||||
"no-unused-expressions": 0,
|
||||
"chai-friendly/no-unused-expressions": 2,
|
||||
"indent": [0, 4]
|
||||
},
|
||||
"extends": [
|
||||
"eslint:recommended",
|
||||
"plugin:react/recommended",
|
||||
"airbnb"
|
||||
],
|
||||
"env": {
|
||||
"node": true,
|
||||
"browser": true,
|
||||
"jest": true
|
||||
},
|
||||
|
||||
"globals": {
|
||||
"Atomics": "readonly",
|
||||
"SharedArrayBuffer": "readonly"
|
||||
},
|
||||
|
||||
"settings": {
|
||||
"react": {
|
||||
"version": "detect"
|
||||
}
|
||||
},
|
||||
|
||||
"plugins": ["react", "chai-friendly"]
|
||||
}
|
||||
|
959
smart-hut/package-lock.json
generated
959
smart-hut/package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
@ -37,6 +37,9 @@
|
|||
"start": "react-scripts start",
|
||||
"build": "react-scripts build",
|
||||
"test": "react-scripts test",
|
||||
"eslint": "eslint src",
|
||||
"eslint-fix": "eslint --fix src",
|
||||
"eslint:report": "eslint src -f json -o eslint-report.json",
|
||||
"eject": "react-scripts eject"
|
||||
},
|
||||
"eslintConfig": {
|
||||
|
@ -56,6 +59,8 @@
|
|||
},
|
||||
"devDependencies": {
|
||||
"prettier": "2.0.1",
|
||||
"sonarqube-scanner": "^2.6.0"
|
||||
"sonarqube-scanner": "^2.6.0",
|
||||
"eslint-config-airbnb": "^18.1.0",
|
||||
"eslint-plugin-chai-friendly": "^0.6.0"
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,28 +1,29 @@
|
|||
import React, { Component } from "react";
|
||||
import { BrowserRouter, Switch, Route, Redirect } from "react-router-dom";
|
||||
import Home from "./views/Home";
|
||||
import Dashboard from "./views/Dashboard";
|
||||
import Signup from "./views/Signup";
|
||||
import Login from "./views/Login";
|
||||
import FourOhFour from "./views/FourOhFour";
|
||||
import ForgotPass from "./views/Forgot-password";
|
||||
import ChangePass from "./views/Forgot-pass-reset";
|
||||
import ConfirmForgotPasswrod from "./views/ConfirmForgotPassword";
|
||||
import ConfirmRegistration from "./views/ConfirmRegistration";
|
||||
import ConfirmResetPassword from "./views/ConfirmResetPassword";
|
||||
import Instruction from "./views/Instruction";
|
||||
import Videocam from "./views/Videocam";
|
||||
import queryString from "query-string";
|
||||
import { RemoteService } from "./remote";
|
||||
import { connect } from "react-redux";
|
||||
import React, { Component } from 'react';
|
||||
import {
|
||||
BrowserRouter, Switch, Route, Redirect,
|
||||
} from 'react-router-dom';
|
||||
import queryString from 'query-string';
|
||||
import { connect } from 'react-redux';
|
||||
import Home from './views/Home';
|
||||
import Dashboard from './views/Dashboard';
|
||||
import Signup from './views/Signup';
|
||||
import Login from './views/Login';
|
||||
import FourOhFour from './views/FourOhFour';
|
||||
import ForgotPass from './views/Forgot-password';
|
||||
import ConfirmForgotPasswrod from './views/ConfirmForgotPassword';
|
||||
import ConfirmRegistration from './views/ConfirmRegistration';
|
||||
import ConfirmResetPassword from './views/ConfirmResetPassword';
|
||||
import Instruction from './views/Instruction';
|
||||
import Videocam from './views/Videocam';
|
||||
import { RemoteService } from './remote';
|
||||
|
||||
class App extends Component {
|
||||
constructor(props, context) {
|
||||
super(props, context);
|
||||
|
||||
this.state = {
|
||||
query: "",
|
||||
info: "",
|
||||
query: '',
|
||||
info: '',
|
||||
};
|
||||
}
|
||||
|
||||
|
@ -36,7 +37,7 @@ class App extends Component {
|
|||
}
|
||||
|
||||
render() {
|
||||
console.log("rendering root", this.props.loggedIn, this.state.query);
|
||||
console.log('rendering root', this.props.loggedIn, this.state.query);
|
||||
return (
|
||||
<BrowserRouter>
|
||||
<Switch>
|
||||
|
@ -49,7 +50,7 @@ class App extends Component {
|
|||
{this.props.loggedIn ? <Dashboard /> : <Redirect to="/login" />}
|
||||
</Route>
|
||||
<Route path="/forgot-password">
|
||||
<ForgotPass />
|
||||
<ForgotPass type="FPassword1" />
|
||||
</Route>
|
||||
<Route path="/sent-email">
|
||||
<ConfirmForgotPasswrod />
|
||||
|
@ -60,9 +61,11 @@ class App extends Component {
|
|||
<Route path="/instruction">
|
||||
<Instruction />
|
||||
</Route>
|
||||
<Route path="/forgot-pass-reset"> </Route>
|
||||
<Route path="/forgot-pass-reset">
|
||||
<ForgotPass type="FPassword1" />
|
||||
</Route>
|
||||
<Route path="/password-reset">
|
||||
<ChangePass query={this.state.query} />
|
||||
<ForgotPass type="FPassword2" query={this.state.query} />
|
||||
</Route>
|
||||
<Route path="/conf-reset-pass">
|
||||
<ConfirmResetPassword />
|
||||
|
|
|
@ -1,19 +1,19 @@
|
|||
import React from "react";
|
||||
import { render } from "@testing-library/react";
|
||||
import { Router } from "react-router";
|
||||
import { createMemoryHistory } from "history";
|
||||
import App from "./App";
|
||||
import { Provider } from "react-redux";
|
||||
import smartHutStore from "./store";
|
||||
import React from 'react';
|
||||
import { render } from '@testing-library/react';
|
||||
import { Router } from 'react-router';
|
||||
import { createMemoryHistory } from 'history';
|
||||
import { Provider } from 'react-redux';
|
||||
import App from './App';
|
||||
import smartHutStore from './store';
|
||||
|
||||
test("redirects to homepage", () => {
|
||||
test('redirects to homepage', () => {
|
||||
const history = createMemoryHistory();
|
||||
render(
|
||||
<Router history={history}>
|
||||
<Provider store={smartHutStore}>
|
||||
<App />
|
||||
</Provider>
|
||||
</Router>
|
||||
</Router>,
|
||||
);
|
||||
expect(history.location.pathname).toBe("/");
|
||||
expect(history.location.pathname).toBe('/');
|
||||
});
|
||||
|
|
|
@ -1,34 +1,34 @@
|
|||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
import { makeStyles } from "@material-ui/core/styles";
|
||||
import Paper from "@material-ui/core/Paper";
|
||||
import Typography from "@material-ui/core/Typography";
|
||||
import Grid from "@material-ui/core/Grid";
|
||||
import Link from "@material-ui/core/Link";
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { makeStyles } from '@material-ui/core/styles';
|
||||
import Paper from '@material-ui/core/Paper';
|
||||
import Typography from '@material-ui/core/Typography';
|
||||
import Grid from '@material-ui/core/Grid';
|
||||
import Link from '@material-ui/core/Link';
|
||||
|
||||
const useStyles = makeStyles((theme) => ({
|
||||
mainFeaturedPost: {
|
||||
position: "relative",
|
||||
position: 'relative',
|
||||
backgroundColor: theme.palette.grey[800],
|
||||
color: theme.palette.common.white,
|
||||
marginBottom: theme.spacing(4),
|
||||
backgroundImage: "img/banner.jpg",
|
||||
backgroundSize: "cover",
|
||||
backgroundRepeat: "no-repeat",
|
||||
backgroundPosition: "center",
|
||||
backgroundImage: 'img/banner.jpg',
|
||||
backgroundSize: 'cover',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
backgroundPosition: 'center',
|
||||
},
|
||||
overlay: {
|
||||
position: "absolute",
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
right: 0,
|
||||
left: 0,
|
||||
backgroundColor: "rgba(0,0,0,.3)",
|
||||
backgroundColor: 'rgba(0,0,0,.3)',
|
||||
},
|
||||
mainFeaturedPostContent: {
|
||||
position: "relative",
|
||||
position: 'relative',
|
||||
padding: theme.spacing(3),
|
||||
[theme.breakpoints.up("md")]: {
|
||||
[theme.breakpoints.up('md')]: {
|
||||
padding: theme.spacing(6),
|
||||
paddingRight: 0,
|
||||
},
|
||||
|
@ -47,7 +47,7 @@ export default function Banner(props) {
|
|||
{/* Increase the priority of the hero background image */}
|
||||
{
|
||||
<img
|
||||
style={{ display: "none" }}
|
||||
style={{ display: 'none' }}
|
||||
src={post.image}
|
||||
alt={post.imageText}
|
||||
/>
|
||||
|
|
|
@ -1,82 +0,0 @@
|
|||
import { Dropdown } from "semantic-ui-react";
|
||||
import React, { Component } from "react";
|
||||
|
||||
export default class FilterDevices extends Component {
|
||||
render() {
|
||||
const tagOptions = [
|
||||
{
|
||||
key: "regularLight",
|
||||
text: "regularLight",
|
||||
value: "regularLight",
|
||||
label: { color: "red", empty: true, circular: true },
|
||||
},
|
||||
{
|
||||
key: "dimmableLight",
|
||||
text: "dimmableLight",
|
||||
value: "dimmableLight",
|
||||
label: { color: "blue", empty: true, circular: true },
|
||||
},
|
||||
{
|
||||
key: "buttonDimmer",
|
||||
text: "buttonDimmer",
|
||||
value: "buttonDimmer",
|
||||
label: { color: "black", empty: true, circular: true },
|
||||
},
|
||||
{
|
||||
key: "knobDimmer",
|
||||
text: "knobDimmer",
|
||||
value: "knobDimmer",
|
||||
label: { color: "purple", empty: true, circular: true },
|
||||
},
|
||||
{
|
||||
key: "motionSensor",
|
||||
text: "motionSensor",
|
||||
value: "motionSensor",
|
||||
label: { color: "orange", empty: true, circular: true },
|
||||
},
|
||||
{
|
||||
key: "sensor",
|
||||
text: "sensor",
|
||||
value: "sensor",
|
||||
label: { empty: true, circular: true },
|
||||
},
|
||||
{
|
||||
key: "smartPlug",
|
||||
text: "smartPlug",
|
||||
value: "smartPlug",
|
||||
label: { color: "pink", empty: true, circular: true },
|
||||
},
|
||||
{
|
||||
key: "switch",
|
||||
text: "switch",
|
||||
value: "switch",
|
||||
label: { color: "green", empty: true, circular: true },
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<Dropdown
|
||||
text="Filter Devices"
|
||||
icon="filter"
|
||||
floating
|
||||
labeled
|
||||
button
|
||||
className="icon"
|
||||
>
|
||||
<Dropdown.Menu>
|
||||
<Dropdown.Divider />
|
||||
<Dropdown.Header icon="tags" content="Tag Device" />
|
||||
<Dropdown.Menu scrolling>
|
||||
{tagOptions.map((option) => (
|
||||
<Dropdown.Item
|
||||
key={option.value}
|
||||
{...option}
|
||||
onClick={this.props.filterDevices}
|
||||
/>
|
||||
))}
|
||||
</Dropdown.Menu>
|
||||
</Dropdown.Menu>
|
||||
</Dropdown>
|
||||
);
|
||||
}
|
||||
}
|
|
@ -1,4 +1,4 @@
|
|||
import React from "react";
|
||||
import React from 'react';
|
||||
|
||||
export default function Footer() {
|
||||
return (
|
||||
|
|
|
@ -1,12 +1,12 @@
|
|||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
import { makeStyles } from "@material-ui/core/styles";
|
||||
import Toolbar from "@material-ui/core/Toolbar";
|
||||
import Button from "@material-ui/core/Button";
|
||||
import IconButton from "@material-ui/core/IconButton";
|
||||
import SearchIcon from "@material-ui/icons/Search";
|
||||
import Typography from "@material-ui/core/Typography";
|
||||
import Link from "@material-ui/core/Link";
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { makeStyles } from '@material-ui/core/styles';
|
||||
import Toolbar from '@material-ui/core/Toolbar';
|
||||
import Button from '@material-ui/core/Button';
|
||||
import IconButton from '@material-ui/core/IconButton';
|
||||
import SearchIcon from '@material-ui/icons/Search';
|
||||
import Typography from '@material-ui/core/Typography';
|
||||
import Link from '@material-ui/core/Link';
|
||||
|
||||
const useStyles = makeStyles((theme) => ({
|
||||
toolbar: {
|
||||
|
@ -16,8 +16,8 @@ const useStyles = makeStyles((theme) => ({
|
|||
flex: 1,
|
||||
},
|
||||
toolbarSecondary: {
|
||||
justifyContent: "space-between",
|
||||
overflowX: "auto",
|
||||
justifyContent: 'space-between',
|
||||
overflowX: 'auto',
|
||||
},
|
||||
toolbarLink: {
|
||||
padding: theme.spacing(1),
|
||||
|
@ -30,7 +30,7 @@ export default function Header(props) {
|
|||
const { sections, title } = props;
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<>
|
||||
<Toolbar className={classes.toolbar}>
|
||||
<Typography
|
||||
component="h2"
|
||||
|
@ -60,7 +60,7 @@ export default function Header(props) {
|
|||
</Link>
|
||||
))}
|
||||
</Toolbar>
|
||||
<Button size="small" variant="outlined" style={{ margin: "0 1rem" }}>
|
||||
<Button size="small" variant="outlined" style={{ margin: '0 1rem' }}>
|
||||
Login
|
||||
</Button>
|
||||
|
||||
|
@ -68,7 +68,7 @@ export default function Header(props) {
|
|||
Sign up
|
||||
</Button>
|
||||
</Toolbar>
|
||||
</React.Fragment>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import React from "react";
|
||||
import React from 'react';
|
||||
import {
|
||||
Grid,
|
||||
Divider,
|
||||
|
@ -6,17 +6,18 @@ import {
|
|||
Label,
|
||||
Responsive,
|
||||
Checkbox,
|
||||
} from "semantic-ui-react";
|
||||
import { Segment, Image } from "semantic-ui-react";
|
||||
import { RemoteService } from "../remote";
|
||||
import { withRouter } from "react-router-dom";
|
||||
import { connect } from "react-redux";
|
||||
import SimulationPanel from "./SimulationPanel";
|
||||
Segment, Image,
|
||||
} from 'semantic-ui-react';
|
||||
|
||||
import { withRouter } from 'react-router-dom';
|
||||
import { connect } from 'react-redux';
|
||||
import { RemoteService } from '../remote';
|
||||
import SimulationPanel from './SimulationPanel';
|
||||
|
||||
const IconHomeImage = () => (
|
||||
<Image
|
||||
src="smart-home.png"
|
||||
style={{ width: "50px", height: "auto" }}
|
||||
style={{ width: '50px', height: 'auto' }}
|
||||
centered
|
||||
as="a"
|
||||
href="/"
|
||||
|
@ -34,42 +35,38 @@ export class MyHeader extends React.Component {
|
|||
}
|
||||
|
||||
logout() {
|
||||
this.props.logout().then(() => this.props.history.push("/"));
|
||||
this.props.logout().then(() => this.props.history.push('/'));
|
||||
}
|
||||
|
||||
getInfo() {
|
||||
this.props
|
||||
.fetchUserInfo()
|
||||
.catch((err) => console.error("MyHeader fetch user info error", err));
|
||||
.catch((err) => console.error('MyHeader fetch user info error', err));
|
||||
}
|
||||
|
||||
setCameraEnabled(val) {
|
||||
let enabled = {
|
||||
const enabled = {
|
||||
cameraEnabled: val,
|
||||
};
|
||||
this.props
|
||||
.userPermissions(enabled)
|
||||
.then(() => this.getInfo())
|
||||
.catch((err) => console.error("Camera enabled", err));
|
||||
.catch((err) => console.error('Camera enabled', err));
|
||||
}
|
||||
|
||||
openSimulationPanel = () => {
|
||||
this.setState((state) => {
|
||||
return { simulationPanel: true };
|
||||
});
|
||||
this.setState((state) => ({ simulationPanel: true }));
|
||||
};
|
||||
|
||||
closeSimulationPanel = () => {
|
||||
this.setState((state) => {
|
||||
return { simulationPanel: undefined };
|
||||
});
|
||||
this.setState((state) => ({ simulationPanel: undefined }));
|
||||
};
|
||||
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<SimulationPanel
|
||||
<SimulationPanel
|
||||
simulationPanel={this.state.simulationPanel}
|
||||
closeSimulationPanel={this.closeSimulationPanel}
|
||||
/>
|
||||
|
@ -77,17 +74,17 @@ export class MyHeader extends React.Component {
|
|||
<Grid columns="equal" divided inverted padded>
|
||||
<Grid.Row color="black" textAlign="center">
|
||||
<Grid.Column width={4} height={0.5}>
|
||||
<Grid.Row>
|
||||
<Segment color="black" inverted>
|
||||
<IconHomeImage />
|
||||
</Segment>
|
||||
</Grid.Row>
|
||||
<Divider />
|
||||
<Grid.Row>
|
||||
<div onClick={this.openSimulationPanel}>
|
||||
<Button > Similuation Panel </Button>
|
||||
</div>
|
||||
</Grid.Row>
|
||||
<Grid.Row>
|
||||
<Segment color="black" inverted>
|
||||
<IconHomeImage />
|
||||
</Segment>
|
||||
</Grid.Row>
|
||||
<Divider />
|
||||
<Grid.Row>
|
||||
<div onClick={this.openSimulationPanel}>
|
||||
<Button> Similuation Panel </Button>
|
||||
</div>
|
||||
</Grid.Row>
|
||||
</Grid.Column>
|
||||
<Grid.Column>
|
||||
<Segment color="black" inverted>
|
||||
|
@ -107,9 +104,9 @@ export class MyHeader extends React.Component {
|
|||
<Segment
|
||||
compact
|
||||
style={{
|
||||
margin: "auto",
|
||||
marginTop: "1em",
|
||||
textAlign: "center",
|
||||
margin: 'auto',
|
||||
marginTop: '1em',
|
||||
textAlign: 'center',
|
||||
}}
|
||||
>
|
||||
<Checkbox
|
||||
|
@ -136,38 +133,38 @@ export class MyHeader extends React.Component {
|
|||
</Grid.Row>
|
||||
<Divider />
|
||||
<Grid.Row>
|
||||
<div onClick={this.openSimulationPanel}>
|
||||
<Button > Similuation Panel </Button>
|
||||
</div>
|
||||
</Grid.Row>
|
||||
<div onClick={this.openSimulationPanel}>
|
||||
<Button> Similuation Panel </Button>
|
||||
</div>
|
||||
</Grid.Row>
|
||||
</Grid.Column>
|
||||
<Divider />
|
||||
<Grid.Column>
|
||||
<Grid.Column width={4} heigth={1}>
|
||||
<Label as="a" image color="black">
|
||||
<img alt="SmartHut logo" src="smart-home.png" />
|
||||
{this.props.username}
|
||||
</Label>
|
||||
<Divider />
|
||||
<Button basic inverted onClick={this.logout}>
|
||||
<Grid.Column width={4} heigth={1}>
|
||||
<Label as="a" image color="black">
|
||||
<img alt="SmartHut logo" src="smart-home.png" />
|
||||
{this.props.username}
|
||||
</Label>
|
||||
<Divider />
|
||||
<Button basic inverted onClick={this.logout}>
|
||||
Logout
|
||||
</Button>
|
||||
<Divider />
|
||||
<Segment
|
||||
compact
|
||||
style={{
|
||||
margin: "auto",
|
||||
marginTop: "1em",
|
||||
textAlign: "center",
|
||||
</Button>
|
||||
<Divider />
|
||||
<Segment
|
||||
compact
|
||||
style={{
|
||||
margin: 'auto',
|
||||
marginTop: '1em',
|
||||
textAlign: 'center',
|
||||
}}
|
||||
>
|
||||
<Checkbox
|
||||
label={<label>Share cameras</label>}
|
||||
checked={this.props.cameraEnabled}
|
||||
onChange={(e, val) => this.setCameraEnabled(val.checked)}
|
||||
/>
|
||||
</Segment>
|
||||
</Grid.Column>
|
||||
>
|
||||
<Checkbox
|
||||
label={<label>Share cameras</label>}
|
||||
checked={this.props.cameraEnabled}
|
||||
onChange={(e, val) => this.setCameraEnabled(val.checked)}
|
||||
/>
|
||||
</Segment>
|
||||
</Grid.Column>
|
||||
</Grid.Column>
|
||||
</Grid.Row>
|
||||
</Grid>
|
||||
|
@ -179,11 +176,11 @@ export class MyHeader extends React.Component {
|
|||
|
||||
const mapStateToProps = (state, _) => ({
|
||||
username:
|
||||
state.userInfo && state.userInfo.username ? state.userInfo.username : "",
|
||||
state.userInfo && state.userInfo.username ? state.userInfo.username : '',
|
||||
cameraEnabled: state.userInfo ? state.userInfo.cameraEnabled : false,
|
||||
});
|
||||
const LoginContainer = connect(
|
||||
mapStateToProps,
|
||||
RemoteService
|
||||
RemoteService,
|
||||
)(withRouter(MyHeader));
|
||||
export default LoginContainer;
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
import _ from "lodash";
|
||||
import React, { Component } from "react";
|
||||
import _ from 'lodash';
|
||||
import React, { Component } from 'react';
|
||||
import {
|
||||
Container,
|
||||
Icon,
|
||||
|
@ -7,7 +7,7 @@ import {
|
|||
Menu,
|
||||
Sidebar,
|
||||
Responsive,
|
||||
} from "semantic-ui-react";
|
||||
} from 'semantic-ui-react';
|
||||
|
||||
const NavBarMobile = ({
|
||||
children,
|
||||
|
@ -30,7 +30,7 @@ const NavBarMobile = ({
|
|||
<Sidebar.Pusher
|
||||
dimmed={visible}
|
||||
onClick={onPusherClick}
|
||||
style={{ minHeight: "100vh" }}
|
||||
style={{ minHeight: '100vh' }}
|
||||
>
|
||||
<Menu fixed="top" inverted>
|
||||
<Menu.Item>
|
||||
|
@ -67,7 +67,7 @@ const NavBarDesktop = ({ leftItems, rightItems }) => (
|
|||
);
|
||||
|
||||
const NavBarChildren = ({ children }) => (
|
||||
<Container style={{ marginTop: "5em" }}>{children}</Container>
|
||||
<Container style={{ marginTop: '5em' }}>{children}</Container>
|
||||
);
|
||||
|
||||
class HomeNavabarApp extends Component {
|
||||
|
@ -75,10 +75,11 @@ class HomeNavabarApp extends Component {
|
|||
super(props);
|
||||
this.state = {
|
||||
logged: true,
|
||||
email: "",
|
||||
password: "",
|
||||
email: '',
|
||||
password: '',
|
||||
};
|
||||
}
|
||||
|
||||
state = {
|
||||
visible: false,
|
||||
};
|
||||
|
@ -117,17 +118,23 @@ class HomeNavabarApp extends Component {
|
|||
}
|
||||
}
|
||||
|
||||
const leftItems = [{ as: "a", content: "Home", key: "home", href: "/" }];
|
||||
const leftItems = [{
|
||||
as: 'a', content: 'Home', key: 'home', href: '/',
|
||||
}];
|
||||
const rightItems = [
|
||||
{ as: "a", content: "Login", key: "login", href: "/login" },
|
||||
{ as: "a", content: "Sign up", key: "register", href: "/signup" },
|
||||
{
|
||||
as: 'a', content: 'Login', key: 'login', href: '/login',
|
||||
},
|
||||
{
|
||||
as: 'a', content: 'Sign up', key: 'register', href: '/signup',
|
||||
},
|
||||
];
|
||||
|
||||
const HomeNavbarApp = () => (
|
||||
<HomeNavabarApp
|
||||
leftItems={leftItems}
|
||||
rightItems={rightItems}
|
||||
></HomeNavabarApp>
|
||||
/>
|
||||
);
|
||||
|
||||
export default HomeNavbarApp;
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import React, { Component } from "react";
|
||||
import React, { Component } from 'react';
|
||||
import {
|
||||
Button,
|
||||
Header,
|
||||
|
@ -7,10 +7,10 @@ import {
|
|||
Form,
|
||||
Responsive,
|
||||
Dropdown,
|
||||
} from "semantic-ui-react";
|
||||
import { connect } from "react-redux";
|
||||
import { RemoteService, Forms } from "../remote";
|
||||
import { appActions } from "../storeActions";
|
||||
} from 'semantic-ui-react';
|
||||
import { connect } from 'react-redux';
|
||||
import { RemoteService, Forms } from '../remote';
|
||||
import { appActions } from '../storeActions';
|
||||
|
||||
class HostModal extends Component {
|
||||
constructor(props) {
|
||||
|
@ -28,8 +28,7 @@ class HostModal extends Component {
|
|||
.catch(console.error);
|
||||
|
||||
Forms.fetchAllUsers()
|
||||
.then((users) =>
|
||||
this.setState({
|
||||
.then((users) => this.setState({
|
||||
...this.state,
|
||||
users: users
|
||||
.filter((u) => u.id !== this.props.currentUserId)
|
||||
|
@ -38,8 +37,7 @@ class HostModal extends Component {
|
|||
text: `@${u.username} (${u.name})`,
|
||||
value: u.id,
|
||||
})),
|
||||
})
|
||||
)
|
||||
}))
|
||||
.catch(console.error);
|
||||
|
||||
this.saveGuestSettings = this.saveGuestSettings.bind(this);
|
||||
|
@ -70,7 +68,7 @@ class HostModal extends Component {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<React.Fragment>
|
||||
<>
|
||||
<Responsive minWidth={768}>
|
||||
<Button icon labelPosition="left" inverted onClick={this.openModal}>
|
||||
<Icon name="plus" size="small" />
|
||||
|
@ -88,7 +86,7 @@ class HostModal extends Component {
|
|||
<Header>Select guests</Header>
|
||||
<Modal.Content>
|
||||
<Form>
|
||||
<Form.Field style={{ marginTop: "1rem" }}>
|
||||
<Form.Field style={{ marginTop: '1rem' }}>
|
||||
<label>Select which users are your guests: </label>
|
||||
<Dropdown
|
||||
name="guests"
|
||||
|
@ -104,22 +102,24 @@ class HostModal extends Component {
|
|||
</Modal.Content>
|
||||
<Modal.Actions>
|
||||
<Button color="red" onClick={this.closeModal}>
|
||||
<Icon name="remove" /> Discard changes
|
||||
<Icon name="remove" />
|
||||
{' '}
|
||||
Discard changes
|
||||
</Button>
|
||||
|
||||
<Button color="green" onClick={this.saveGuestSettings}>
|
||||
<Icon name="checkmark" /> Save changes
|
||||
<Icon name="checkmark" />
|
||||
{' '}
|
||||
Save changes
|
||||
</Button>
|
||||
</Modal.Actions>
|
||||
</Modal>
|
||||
</React.Fragment>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const setActiveHost = (activeHost) => {
|
||||
return (dispatch) => dispatch(appActions.setActiveHost(activeHost));
|
||||
};
|
||||
const setActiveHost = (activeHost) => (dispatch) => dispatch(appActions.setActiveHost(activeHost));
|
||||
|
||||
const mapStateToProps = (state) => ({
|
||||
guests: state.guests,
|
||||
|
@ -129,6 +129,6 @@ const HostModalContainer = connect(
|
|||
mapStateToProps,
|
||||
{ ...RemoteService, setActiveHost },
|
||||
null,
|
||||
{ forwardRef: true }
|
||||
{ forwardRef: true },
|
||||
)(HostModal);
|
||||
export default HostModalContainer;
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import React, { Component } from "react";
|
||||
import React, { Component } from 'react';
|
||||
import {
|
||||
Button,
|
||||
Header,
|
||||
|
@ -9,13 +9,13 @@ import {
|
|||
Responsive,
|
||||
Image,
|
||||
Confirm,
|
||||
} from "semantic-ui-react";
|
||||
import SelectIcons from "./SelectIcons";
|
||||
import { connect } from "react-redux";
|
||||
import { RemoteService } from "../remote";
|
||||
import { appActions } from "../storeActions";
|
||||
} from 'semantic-ui-react';
|
||||
import { connect } from 'react-redux';
|
||||
import SelectIcons from './SelectIcons';
|
||||
import { RemoteService } from '../remote';
|
||||
import { appActions } from '../storeActions';
|
||||
|
||||
const NO_IMAGE = "https://react.semantic-ui.com/images/wireframe/image.png";
|
||||
const NO_IMAGE = 'https://react.semantic-ui.com/images/wireframe/image.png';
|
||||
|
||||
class RoomModal extends Component {
|
||||
constructor(props) {
|
||||
|
@ -31,9 +31,9 @@ class RoomModal extends Component {
|
|||
|
||||
get initialState() {
|
||||
return {
|
||||
selectedIcon: this.type === "new" ? "home" : this.props.room.icon,
|
||||
name: this.type === "new" ? "New Room" : this.props.room.name,
|
||||
img: this.type === "new" ? null : this.props.room.image,
|
||||
selectedIcon: this.type === 'new' ? 'home' : this.props.room.icon,
|
||||
name: this.type === 'new' ? 'New Room' : this.props.room.name,
|
||||
img: this.type === 'new' ? null : this.props.room.image,
|
||||
openModal: false,
|
||||
sure: false,
|
||||
};
|
||||
|
@ -41,7 +41,7 @@ class RoomModal extends Component {
|
|||
|
||||
unsetImage = (e) => {
|
||||
e.preventDefault();
|
||||
this.setState({ ...this.state, img: "" });
|
||||
this.setState({ ...this.state, img: '' });
|
||||
};
|
||||
|
||||
setInitialState() {
|
||||
|
@ -49,11 +49,11 @@ class RoomModal extends Component {
|
|||
}
|
||||
|
||||
get type() {
|
||||
return !this.props.id ? "new" : "modify";
|
||||
return !this.props.id ? 'new' : 'modify';
|
||||
}
|
||||
|
||||
addRoomModal = (e) => {
|
||||
let data = {
|
||||
const data = {
|
||||
icon: this.state.selectedIcon,
|
||||
name: this.state.name,
|
||||
image: this.state.img,
|
||||
|
@ -65,17 +65,17 @@ class RoomModal extends Component {
|
|||
this.setInitialState();
|
||||
this.closeModal();
|
||||
})
|
||||
.catch((err) => console.error("error in creating room", err));
|
||||
.catch((err) => console.error('error in creating room', err));
|
||||
};
|
||||
|
||||
modifyRoomModal = (e) => {
|
||||
let data = {
|
||||
const data = {
|
||||
icon: this.state.selectedIcon,
|
||||
name: this.state.name,
|
||||
image: this.state.img,
|
||||
};
|
||||
|
||||
console.log("data", data);
|
||||
console.log('data', data);
|
||||
|
||||
this.props
|
||||
.saveRoom(data, this.props.id)
|
||||
|
@ -83,14 +83,14 @@ class RoomModal extends Component {
|
|||
this.setInitialState();
|
||||
this.closeModal();
|
||||
})
|
||||
.catch((err) => console.error("error in updating room", err));
|
||||
.catch((err) => console.error('error in updating room', err));
|
||||
};
|
||||
|
||||
deleteRoom = (e) => {
|
||||
this.props
|
||||
.deleteRoom(this.props.id)
|
||||
.then(() => this.closeModal())
|
||||
.catch((err) => console.error("error in deleting room", err));
|
||||
.catch((err) => console.error('error in deleting room', err));
|
||||
};
|
||||
|
||||
setSureTrue = () => {
|
||||
|
@ -102,8 +102,8 @@ class RoomModal extends Component {
|
|||
};
|
||||
|
||||
changeSomething = (event) => {
|
||||
let nam = event.target.name;
|
||||
let val = event.target.value;
|
||||
const nam = event.target.name;
|
||||
const val = event.target.value;
|
||||
this.setState({ [nam]: val });
|
||||
};
|
||||
|
||||
|
@ -120,7 +120,7 @@ class RoomModal extends Component {
|
|||
}
|
||||
|
||||
getBase64(file, callback) {
|
||||
let reader = new FileReader();
|
||||
const reader = new FileReader();
|
||||
reader.readAsDataURL(file.target.files[0]);
|
||||
reader.onload = () => {
|
||||
this.setState(Object.assign(this.state, { img: reader.result }));
|
||||
|
@ -130,16 +130,16 @@ class RoomModal extends Component {
|
|||
|
||||
render() {
|
||||
const spaceDiv = {
|
||||
background: "#f4f4f4",
|
||||
padding: "10px 10px",
|
||||
margin: "10px 0px",
|
||||
background: '#f4f4f4',
|
||||
padding: '10px 10px',
|
||||
margin: '10px 0px',
|
||||
};
|
||||
return (
|
||||
<div>
|
||||
{!this.props.nicolaStop ? (
|
||||
<div>
|
||||
<Responsive minWidth={768}>
|
||||
{this.type === "new" ? (
|
||||
{this.type === 'new' ? (
|
||||
<Button
|
||||
icon
|
||||
labelPosition="left"
|
||||
|
@ -154,7 +154,7 @@ class RoomModal extends Component {
|
|||
)}
|
||||
</Responsive>
|
||||
<Responsive maxWidth={768}>
|
||||
{this.type === "new" ? (
|
||||
{this.type === 'new' ? (
|
||||
<Button
|
||||
icon
|
||||
fluid
|
||||
|
@ -181,7 +181,7 @@ class RoomModal extends Component {
|
|||
|
||||
<Modal closeIcon onClose={this.closeModal} open={this.state.openModal}>
|
||||
<Header>
|
||||
{this.type === "new" ? "Add new room" : "Modify room"}
|
||||
{this.type === 'new' ? 'Add new room' : 'Modify room'}
|
||||
</Header>
|
||||
<Modal.Content>
|
||||
<Form>
|
||||
|
@ -224,12 +224,12 @@ class RoomModal extends Component {
|
|||
<SelectIcons
|
||||
updateIcon={this.updateIcon}
|
||||
currentIcon={
|
||||
this.type === "new" ? "home" : this.props.room.icon
|
||||
this.type === 'new' ? 'home' : this.props.room.icon
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{this.type === "modify" ? (
|
||||
{this.type === 'modify' ? (
|
||||
<div>
|
||||
<Button
|
||||
icon
|
||||
|
@ -239,7 +239,8 @@ class RoomModal extends Component {
|
|||
onClick={this.setSureTrue}
|
||||
>
|
||||
<Icon name="trash alternate" />
|
||||
Delete Room{" "}
|
||||
Delete Room
|
||||
{' '}
|
||||
</Button>
|
||||
<Confirm
|
||||
open={this.state.sure}
|
||||
|
@ -251,18 +252,20 @@ class RoomModal extends Component {
|
|||
</Modal.Content>
|
||||
<Modal.Actions>
|
||||
<Button color="red" onClick={this.closeModal}>
|
||||
<Icon name="remove" />{" "}
|
||||
{this.type === "new" ? "Cancel" : "Discard changes"}
|
||||
<Icon name="remove" />
|
||||
{' '}
|
||||
{this.type === 'new' ? 'Cancel' : 'Discard changes'}
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
color="green"
|
||||
onClick={
|
||||
this.type === "new" ? this.addRoomModal : this.modifyRoomModal
|
||||
this.type === 'new' ? this.addRoomModal : this.modifyRoomModal
|
||||
}
|
||||
>
|
||||
<Icon name="checkmark" />{" "}
|
||||
{this.type === "new" ? "Add room" : "Save changes"}
|
||||
<Icon name="checkmark" />
|
||||
{' '}
|
||||
{this.type === 'new' ? 'Add room' : 'Save changes'}
|
||||
</Button>
|
||||
</Modal.Actions>
|
||||
</Modal>
|
||||
|
@ -271,9 +274,7 @@ class RoomModal extends Component {
|
|||
}
|
||||
}
|
||||
|
||||
const setActiveRoom = (activeRoom) => {
|
||||
return (dispatch) => dispatch(appActions.setActiveRoom(activeRoom));
|
||||
};
|
||||
const setActiveRoom = (activeRoom) => (dispatch) => dispatch(appActions.setActiveRoom(activeRoom));
|
||||
|
||||
const mapStateToProps = (state, ownProps) => ({
|
||||
room: ownProps.id ? state.rooms[ownProps.id] : null,
|
||||
|
@ -282,6 +283,6 @@ const RoomModalContainer = connect(
|
|||
mapStateToProps,
|
||||
{ ...RemoteService, setActiveRoom },
|
||||
null,
|
||||
{ forwardRef: true }
|
||||
{ forwardRef: true },
|
||||
)(RoomModal);
|
||||
export default RoomModalContainer;
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import React, { Component } from "react";
|
||||
import React, { Component } from 'react';
|
||||
import {
|
||||
Button,
|
||||
Header,
|
||||
|
@ -10,12 +10,12 @@ import {
|
|||
Dropdown,
|
||||
Checkbox,
|
||||
Segment,
|
||||
} from "semantic-ui-react";
|
||||
import SelectIcons from "./SelectIcons";
|
||||
import { connect } from "react-redux";
|
||||
import { RemoteService } from "../remote";
|
||||
import { appActions } from "../storeActions";
|
||||
//import { update } from "immutability-helper";
|
||||
} from 'semantic-ui-react';
|
||||
import { connect } from 'react-redux';
|
||||
import SelectIcons from './SelectIcons';
|
||||
import { RemoteService } from '../remote';
|
||||
import { appActions } from '../storeActions';
|
||||
// import { update } from "immutability-helper";
|
||||
|
||||
class SceneModal extends Component {
|
||||
constructor(props) {
|
||||
|
@ -39,13 +39,13 @@ class SceneModal extends Component {
|
|||
|
||||
get initialState() {
|
||||
return {
|
||||
name: this.type === "new" ? "New Scene" : this.props.scene.name,
|
||||
name: this.type === 'new' ? 'New Scene' : this.props.scene.name,
|
||||
openModal: false,
|
||||
selectedIcon: "home",
|
||||
selectedIcon: 'home',
|
||||
scenes: this.scenes,
|
||||
copyFrom: null,
|
||||
guestAccessEnabled:
|
||||
this.type === "new" ? null : this.props.scene.guestAccessEnabled,
|
||||
this.type === 'new' ? null : this.props.scene.guestAccessEnabled,
|
||||
};
|
||||
}
|
||||
|
||||
|
@ -62,11 +62,11 @@ class SceneModal extends Component {
|
|||
}
|
||||
|
||||
get type() {
|
||||
return !this.props.id ? "new" : "modify";
|
||||
return !this.props.id ? 'new' : 'modify';
|
||||
}
|
||||
|
||||
addSceneModal = (e) => {
|
||||
let data = {
|
||||
const data = {
|
||||
name: this.state.name,
|
||||
icon: this.state.selectedIcon,
|
||||
};
|
||||
|
@ -77,11 +77,11 @@ class SceneModal extends Component {
|
|||
this.setInitialState();
|
||||
this.closeModal();
|
||||
})
|
||||
.catch((err) => console.error("error in creating room", err));
|
||||
.catch((err) => console.error('error in creating room', err));
|
||||
};
|
||||
|
||||
modifySceneModal = (e) => {
|
||||
let data = {
|
||||
const data = {
|
||||
name: this.state.name,
|
||||
icon: this.state.selectedIcon,
|
||||
guestAccessEnabled: this.state.guestAccessEnabled,
|
||||
|
@ -94,19 +94,19 @@ class SceneModal extends Component {
|
|||
this.setInitialState();
|
||||
this.closeModal();
|
||||
})
|
||||
.catch((err) => console.error("error in updating room", err));
|
||||
.catch((err) => console.error('error in updating room', err));
|
||||
};
|
||||
|
||||
deleteScene = (e) => {
|
||||
this.props
|
||||
.deleteScene(this.props.id)
|
||||
.then(() => this.closeModal())
|
||||
.catch((err) => console.error("error in deleting room", err));
|
||||
.catch((err) => console.error('error in deleting room', err));
|
||||
};
|
||||
|
||||
changeSomething = (event) => {
|
||||
let nam = event.target.name;
|
||||
let val = event.target.value;
|
||||
const nam = event.target.name;
|
||||
const val = event.target.value;
|
||||
this.setState({ [nam]: val });
|
||||
};
|
||||
|
||||
|
@ -133,16 +133,16 @@ class SceneModal extends Component {
|
|||
|
||||
render() {
|
||||
const spaceDiv = {
|
||||
background: "#f4f4f4",
|
||||
padding: "10px 10px",
|
||||
margin: "10px 0px",
|
||||
background: '#f4f4f4',
|
||||
padding: '10px 10px',
|
||||
margin: '10px 0px',
|
||||
};
|
||||
return (
|
||||
<div>
|
||||
{!this.props.nicolaStop ? (
|
||||
<div>
|
||||
<Responsive minWidth={768}>
|
||||
{this.type === "new" ? (
|
||||
{this.type === 'new' ? (
|
||||
<Button
|
||||
icon
|
||||
labelPosition="left"
|
||||
|
@ -157,7 +157,7 @@ class SceneModal extends Component {
|
|||
)}
|
||||
</Responsive>
|
||||
<Responsive maxWidth={768}>
|
||||
{this.type === "new" ? (
|
||||
{this.type === 'new' ? (
|
||||
<Button
|
||||
icon
|
||||
fluid
|
||||
|
@ -184,7 +184,7 @@ class SceneModal extends Component {
|
|||
|
||||
<Modal closeIcon onClose={this.closeModal} open={this.state.openModal}>
|
||||
<Header>
|
||||
{this.type === "new" ? "Add new scene" : "Modify scene"}
|
||||
{this.type === 'new' ? 'Add new scene' : 'Modify scene'}
|
||||
</Header>
|
||||
<Modal.Content>
|
||||
<Form>
|
||||
|
@ -205,11 +205,11 @@ class SceneModal extends Component {
|
|||
<SelectIcons
|
||||
updateIcon={this.updateIcon}
|
||||
currentIcon={
|
||||
this.type === "new" ? "home" : this.props.scene.icon
|
||||
this.type === 'new' ? 'home' : this.props.scene.icon
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
{this.type === "new" && (
|
||||
{this.type === 'new' && (
|
||||
<Form.Field>
|
||||
<label>Copy configuration from:</label>
|
||||
<Dropdown
|
||||
|
@ -222,23 +222,21 @@ class SceneModal extends Component {
|
|||
/>
|
||||
</Form.Field>
|
||||
)}
|
||||
{this.type === "modify" ? (
|
||||
{this.type === 'modify' ? (
|
||||
<Form.Field>
|
||||
<Segment compact style={{ marginBottom: "1rem" }}>
|
||||
<Segment compact style={{ marginBottom: '1rem' }}>
|
||||
<Checkbox
|
||||
label="Enable guest access"
|
||||
checked={this.state.guestAccessEnabled}
|
||||
toggle
|
||||
onChange={(e, val) =>
|
||||
this.setGuestAccessEnabled(val.checked)
|
||||
}
|
||||
onChange={(e, val) => this.setGuestAccessEnabled(val.checked)}
|
||||
/>
|
||||
</Segment>
|
||||
</Form.Field>
|
||||
) : null}
|
||||
</Form>
|
||||
|
||||
{this.type === "modify" ? (
|
||||
{this.type === 'modify' ? (
|
||||
<Button
|
||||
icon
|
||||
labelPosition="left"
|
||||
|
@ -253,18 +251,20 @@ class SceneModal extends Component {
|
|||
</Modal.Content>
|
||||
<Modal.Actions>
|
||||
<Button color="red" onClick={this.closeModal}>
|
||||
<Icon name="remove" />{" "}
|
||||
{this.type === "new" ? "Cancel" : "Discard changes"}
|
||||
<Icon name="remove" />
|
||||
{' '}
|
||||
{this.type === 'new' ? 'Cancel' : 'Discard changes'}
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
color="green"
|
||||
onClick={
|
||||
this.type === "new" ? this.addSceneModal : this.modifySceneModal
|
||||
this.type === 'new' ? this.addSceneModal : this.modifySceneModal
|
||||
}
|
||||
>
|
||||
<Icon name="checkmark" />{" "}
|
||||
{this.type === "new" ? "Add scene" : "Save changes"}
|
||||
<Icon name="checkmark" />
|
||||
{' '}
|
||||
{this.type === 'new' ? 'Add scene' : 'Save changes'}
|
||||
</Button>
|
||||
</Modal.Actions>
|
||||
</Modal>
|
||||
|
@ -273,9 +273,7 @@ class SceneModal extends Component {
|
|||
}
|
||||
}
|
||||
|
||||
const setActiveScene = (activeScene) => {
|
||||
return (dispatch) => dispatch(appActions.setActiveScene(activeScene));
|
||||
};
|
||||
const setActiveScene = (activeScene) => (dispatch) => dispatch(appActions.setActiveScene(activeScene));
|
||||
|
||||
const mapStateToProps = (state, ownProps) => ({
|
||||
scene: ownProps.id ? state.scenes[ownProps.id] : null,
|
||||
|
@ -285,6 +283,6 @@ const SceneModalContainer = connect(
|
|||
mapStateToProps,
|
||||
{ ...RemoteService, setActiveScene },
|
||||
null,
|
||||
{ forwardRef: true }
|
||||
{ forwardRef: true },
|
||||
)(SceneModal);
|
||||
export default SceneModalContainer;
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
import React, { Component } from "react";
|
||||
import { Button, Grid } from "semantic-ui-react";
|
||||
import React, { Component } from 'react';
|
||||
import { Button, Grid } from 'semantic-ui-react';
|
||||
|
||||
export default class SelectIcons extends Component {
|
||||
constructor(props) {
|
||||
|
@ -11,7 +11,7 @@ export default class SelectIcons extends Component {
|
|||
|
||||
selectIcon = (e) => {
|
||||
let el = e.target.name;
|
||||
if (e.target.tagName === "I") {
|
||||
if (e.target.tagName === 'I') {
|
||||
el = e.target.parentNode.name;
|
||||
}
|
||||
this.props.updateIcon(el);
|
||||
|
@ -20,36 +20,32 @@ export default class SelectIcons extends Component {
|
|||
|
||||
render() {
|
||||
const myicons = [
|
||||
["home", "coffee", "beer", "glass martini", "film", "video"],
|
||||
["music", "headphones", "fax", "phone", "laptop", "bath"],
|
||||
["shower", "bed", "child", "warehouse", "car", "bicycle"],
|
||||
["motorcycle", "archive", "boxes", "cubes", "chess", "gamepad"],
|
||||
["futbol", "table tennis", "server", "tv", "heart", "camera"],
|
||||
["trophy", "wrench", "image", "book", "university", "medkit"],
|
||||
["paw", "tree", "utensils", "male", "female", "life ring outline"],
|
||||
['home', 'coffee', 'beer', 'glass martini', 'film', 'video'],
|
||||
['music', 'headphones', 'fax', 'phone', 'laptop', 'bath'],
|
||||
['shower', 'bed', 'child', 'warehouse', 'car', 'bicycle'],
|
||||
['motorcycle', 'archive', 'boxes', 'cubes', 'chess', 'gamepad'],
|
||||
['futbol', 'table tennis', 'server', 'tv', 'heart', 'camera'],
|
||||
['trophy', 'wrench', 'image', 'book', 'university', 'medkit'],
|
||||
['paw', 'tree', 'utensils', 'male', 'female', 'life ring outline'],
|
||||
];
|
||||
|
||||
return (
|
||||
<Grid centered relaxed>
|
||||
{myicons.map((e, i) => {
|
||||
return (
|
||||
<Grid.Row key={i}>
|
||||
{e.map((e, i) => {
|
||||
return (
|
||||
<Grid.Column key={i}>
|
||||
<Button
|
||||
name={e}
|
||||
color={e === this.state.currentIcon ? "black" : null}
|
||||
icon={e}
|
||||
size="small"
|
||||
onClick={this.selectIcon}
|
||||
/>
|
||||
</Grid.Column>
|
||||
);
|
||||
})}
|
||||
</Grid.Row>
|
||||
);
|
||||
})}
|
||||
{myicons.map((e, i) => (
|
||||
<Grid.Row key={i}>
|
||||
{e.map((e, i) => (
|
||||
<Grid.Column key={i}>
|
||||
<Button
|
||||
name={e}
|
||||
color={e === this.state.currentIcon ? 'black' : null}
|
||||
icon={e}
|
||||
size="small"
|
||||
onClick={this.selectIcon}
|
||||
/>
|
||||
</Grid.Column>
|
||||
))}
|
||||
</Grid.Row>
|
||||
))}
|
||||
</Grid>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
import React from "react";
|
||||
import DevicePanel from "./dashboard/DevicePanel";
|
||||
import React from 'react';
|
||||
import DevicePanel from './dashboard/DevicePanel';
|
||||
|
||||
export default class VideoTest extends React.Component {
|
||||
render() {
|
||||
|
|
File diff suppressed because it is too large
Load diff
|
@ -1,7 +1,7 @@
|
|||
import React, { Component } from "react";
|
||||
import { connect } from "react-redux";
|
||||
import { RemoteService } from "../../remote";
|
||||
import "./Automations.css";
|
||||
import React, { Component } from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import { RemoteService } from '../../remote';
|
||||
import './Automations.css';
|
||||
|
||||
import {
|
||||
Segment,
|
||||
|
@ -11,52 +11,54 @@ import {
|
|||
List,
|
||||
Divider,
|
||||
Menu,
|
||||
} from "semantic-ui-react";
|
||||
import CreateAutomation, { operands } from "./AutomationCreationModal";
|
||||
} from 'semantic-ui-react';
|
||||
import CreateAutomation, { operands } from './AutomationCreationModal';
|
||||
|
||||
const Automation = ({ automation, devices, scenes, removeAutomation }) => {
|
||||
const { triggers } = automation;
|
||||
const Automation = ({
|
||||
automation, devices, scenes, removeAutomation,
|
||||
}) => {
|
||||
const { triggers, conditions } = automation;
|
||||
const scenePriorities = automation.scenes;
|
||||
const getOperator = (operand) =>
|
||||
operands.filter((o) => o.key === operand)[0].text;
|
||||
const getOperator = (operand) => operands.filter((o) => o.key === operand)[0].text;
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<Header style={{ display: "inline", marginRight: "1rem" }}>
|
||||
<>
|
||||
<Header style={{ display: 'inline', marginRight: '1rem' }}>
|
||||
{automation.name}
|
||||
</Header>
|
||||
<CreateAutomation id={automation.id} />
|
||||
<Button
|
||||
style={{ display: "inline" }}
|
||||
style={{ display: 'inline' }}
|
||||
circular
|
||||
onClick={() => removeAutomation(automation.id)}
|
||||
color="red"
|
||||
size="small"
|
||||
icon={"trash alternate outline"}
|
||||
icon="trash alternate outline"
|
||||
/>
|
||||
<Segment placeholder>
|
||||
<Grid columns={2} stackable textAlign="center">
|
||||
<Divider vertical></Divider>
|
||||
<Divider vertical />
|
||||
<Grid.Row verticalAlign="middle">
|
||||
<Grid.Column>
|
||||
<Header>Triggers</Header>
|
||||
<List divided relaxed>
|
||||
{triggers !== undefined &&
|
||||
triggers.map((trigger) => {
|
||||
{triggers !== undefined
|
||||
&& triggers.map((trigger) => {
|
||||
const device = devices.filter(
|
||||
(d) => d.id === trigger.deviceId
|
||||
(d) => d.id === trigger.deviceId,
|
||||
)[0];
|
||||
return (
|
||||
<Menu key={trigger.id} compact>
|
||||
<Menu.Item as="span">
|
||||
{device.name}{" "}
|
||||
{device.name}
|
||||
{' '}
|
||||
{trigger.operator
|
||||
? getOperator(trigger.operator) +
|
||||
" " +
|
||||
trigger.range
|
||||
? `${getOperator(trigger.operator)
|
||||
} ${
|
||||
trigger.range}`
|
||||
: trigger.on
|
||||
? " - on"
|
||||
: " - off"}
|
||||
? ' - on'
|
||||
: ' - off'}
|
||||
</Menu.Item>
|
||||
</Menu>
|
||||
);
|
||||
|
@ -66,12 +68,12 @@ const Automation = ({ automation, devices, scenes, removeAutomation }) => {
|
|||
<Grid.Column>
|
||||
<Header>Scenes</Header>
|
||||
<List divided relaxed>
|
||||
{scenePriorities !== undefined &&
|
||||
scenePriorities.map((sp) => {
|
||||
{scenePriorities !== undefined
|
||||
&& scenePriorities.map((sp) => {
|
||||
const sceneData = scenes.filter(
|
||||
(s) => s.id === sp.sceneId
|
||||
(s) => s.id === sp.sceneId,
|
||||
)[0];
|
||||
if (!sceneData) return "";
|
||||
if (!sceneData) return '';
|
||||
return (
|
||||
<Menu key={sceneData.id} compact>
|
||||
<Menu.Item as="span">{sceneData.name}</Menu.Item>
|
||||
|
@ -83,7 +85,37 @@ const Automation = ({ automation, devices, scenes, removeAutomation }) => {
|
|||
</Grid.Row>
|
||||
</Grid>
|
||||
</Segment>
|
||||
</React.Fragment>
|
||||
<Grid columns={1} stackable textAlign="center">
|
||||
<Grid.Row verticalAlign="middle">
|
||||
<Grid.Column>
|
||||
<Header>Conditions</Header>
|
||||
<List divided relaxed>
|
||||
{conditions !== undefined
|
||||
&& conditions.map((condition) => {
|
||||
const device = devices.filter(
|
||||
(d) => d.id === condition.deviceId,
|
||||
)[0];
|
||||
return (
|
||||
<Menu key={condition.id} compact>
|
||||
<Menu.Item as="span">
|
||||
{device.name}
|
||||
{' '}
|
||||
{condition.operator
|
||||
? `${getOperator(condition.operator)
|
||||
} ${
|
||||
condition.mode ? condition.mode : condition.range}`
|
||||
: condition.on
|
||||
? ' - on'
|
||||
: ' - off'}
|
||||
</Menu.Item>
|
||||
</Menu>
|
||||
);
|
||||
})}
|
||||
</List>
|
||||
</Grid.Column>
|
||||
</Grid.Row>
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
@ -103,13 +135,13 @@ class AutomationsPanel extends Component {
|
|||
getDevices() {
|
||||
this.props
|
||||
.fetchDevices()
|
||||
.catch((err) => console.error(`error fetching devices:`, err));
|
||||
.catch((err) => console.error('error fetching devices:', err));
|
||||
}
|
||||
|
||||
getAutomations() {
|
||||
this.props
|
||||
.fetchAutomations()
|
||||
.catch((err) => console.error(`error fetching automations:`, err));
|
||||
.catch((err) => console.error('error fetching automations:', err));
|
||||
}
|
||||
|
||||
removeAutomation = (id) => {
|
||||
|
@ -120,7 +152,7 @@ class AutomationsPanel extends Component {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<Grid style={{ marginTop: "3rem" }}>
|
||||
<Grid style={{ marginTop: '3rem' }}>
|
||||
<Grid.Row>
|
||||
<Grid.Column textAlign="center" width={16}>
|
||||
{!this.state.openModal ? (
|
||||
|
@ -133,18 +165,16 @@ class AutomationsPanel extends Component {
|
|||
</Grid.Column>
|
||||
</Grid.Row>
|
||||
<Grid.Row>
|
||||
{this.props.automations.map((automation, i) => {
|
||||
return (
|
||||
<Grid.Column key={i} width={8} style={{ margin: "2rem 0" }}>
|
||||
<Automation
|
||||
removeAutomation={this.removeAutomation}
|
||||
scenes={this.props.scenes}
|
||||
devices={this.props.devices}
|
||||
automation={automation}
|
||||
/>
|
||||
</Grid.Column>
|
||||
);
|
||||
})}
|
||||
{this.props.automations.map((automation, i) => (
|
||||
<Grid.Column key={i} width={8} style={{ margin: '2rem 0' }}>
|
||||
<Automation
|
||||
removeAutomation={this.removeAutomation}
|
||||
scenes={this.props.scenes}
|
||||
devices={this.props.devices}
|
||||
automation={automation}
|
||||
/>
|
||||
</Grid.Column>
|
||||
))}
|
||||
</Grid.Row>
|
||||
</Grid>
|
||||
);
|
||||
|
@ -166,6 +196,6 @@ const mapStateToProps = (state, _) => ({
|
|||
});
|
||||
const AutomationsPanelContainer = connect(
|
||||
mapStateToProps,
|
||||
RemoteService
|
||||
RemoteService,
|
||||
)(AutomationsPanel);
|
||||
export default AutomationsPanelContainer;
|
||||
|
|
|
@ -1,11 +1,13 @@
|
|||
// vim: set ts=2 sw=2 et tw=80:
|
||||
|
||||
import React, { Component } from "react";
|
||||
import { Segment, Card, Header, Icon } from "semantic-ui-react";
|
||||
import Device from "./devices/Device";
|
||||
import NewDevice from "./devices/NewDevice";
|
||||
import { connect } from "react-redux";
|
||||
import { RemoteService } from "../../remote";
|
||||
import React, { Component } from 'react';
|
||||
import {
|
||||
Segment, Card, Header, Icon,
|
||||
} from 'semantic-ui-react';
|
||||
import { connect } from 'react-redux';
|
||||
import Device from './devices/Device';
|
||||
import NewDevice from './devices/NewDevice';
|
||||
import { RemoteService } from '../../remote';
|
||||
|
||||
class DevicePanel extends Component {
|
||||
constructor(props) {
|
||||
|
@ -15,35 +17,33 @@ class DevicePanel extends Component {
|
|||
}
|
||||
|
||||
getDevices() {
|
||||
if (this.props.tab === "Devices") {
|
||||
if (this.props.tab === 'Devices') {
|
||||
this.props
|
||||
.fetchDevices()
|
||||
.catch((err) => console.error(`error fetching devices:`, err));
|
||||
.catch((err) => console.error('error fetching devices:', err));
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Card.Group centered style={{ paddingTop: "3rem" }}>
|
||||
<Card.Group centered style={{ paddingTop: '3rem' }}>
|
||||
{this.props.numbeOfRooms > 0 ? (
|
||||
<React.Fragment>
|
||||
{this.props.devices.map((e, i) => {
|
||||
return <Device key={i} tab={this.props.tab} id={e.id} />;
|
||||
})}
|
||||
<>
|
||||
{this.props.devices.map((e, i) => <Device key={i} tab={this.props.tab} id={e.id} />)}
|
||||
{!this.props.isActiveRoomHome ? (
|
||||
<Card style={{ height: "27em" }}>
|
||||
<Segment basic style={{ width: "100%", height: "100%" }}>
|
||||
<Card style={{ height: '27em' }}>
|
||||
<Segment basic style={{ width: '100%', height: '100%' }}>
|
||||
<NewDevice />
|
||||
</Segment>
|
||||
</Card>
|
||||
) : null}
|
||||
</React.Fragment>
|
||||
</>
|
||||
) : (
|
||||
<Segment placeholder>
|
||||
<Header icon>
|
||||
<Icon
|
||||
name="exclamation triangle"
|
||||
style={{ paddingBottom: "1rem" }}
|
||||
style={{ paddingBottom: '1rem' }}
|
||||
/>
|
||||
Please create a room on the left, and then add devices to the
|
||||
same.
|
||||
|
@ -59,12 +59,11 @@ const mapStateToProps = (state, _) => ({
|
|||
get devices() {
|
||||
if (state.active.activeRoom === -1) {
|
||||
return Object.values(state.devices);
|
||||
} else {
|
||||
}
|
||||
const deviceArray = [
|
||||
...state.rooms[state.active.activeRoom].devices,
|
||||
].sort();
|
||||
return deviceArray.map((id) => state.devices[id]);
|
||||
}
|
||||
},
|
||||
get isActiveRoomHome() {
|
||||
return state.active.activeRoom === -1;
|
||||
|
@ -76,6 +75,6 @@ const mapStateToProps = (state, _) => ({
|
|||
});
|
||||
const DevicePanelContainer = connect(
|
||||
mapStateToProps,
|
||||
RemoteService
|
||||
RemoteService,
|
||||
)(DevicePanel);
|
||||
export default DevicePanelContainer;
|
||||
|
|
|
@ -1,14 +1,16 @@
|
|||
import React, { Component } from "react";
|
||||
import { connect } from "react-redux";
|
||||
import { RemoteService } from "../../remote";
|
||||
import { Card, Segment, Header, Icon, Button } from "semantic-ui-react";
|
||||
import Device from "../../components/dashboard/devices/Device";
|
||||
import React, { Component } from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import {
|
||||
Card, Segment, Header, Icon, Button,
|
||||
} from 'semantic-ui-react';
|
||||
import { RemoteService } from '../../remote';
|
||||
import Device from './devices/Device';
|
||||
|
||||
class HostsPanel extends Component {
|
||||
componentDidUpdate(oldProps) {
|
||||
if (
|
||||
oldProps.activeHost !== this.props.activeHost &&
|
||||
this.props.activeHost !== -1
|
||||
oldProps.activeHost !== this.props.activeHost
|
||||
&& this.props.activeHost !== -1
|
||||
) {
|
||||
this.props.fetchDevices(null, this.props.activeHost).catch(console.error);
|
||||
this.props.fetchAllRooms(this.props.activeHost).catch(console.error);
|
||||
|
@ -19,19 +21,19 @@ class HostsPanel extends Component {
|
|||
applyHostScene(id) {
|
||||
this.props
|
||||
.sceneApply(id, this.props.activeHost)
|
||||
.then(() => console.log("SCCUESS"))
|
||||
.catch((err) => console.error("sceneApply update error", err));
|
||||
.then(() => console.log('SCCUESS'))
|
||||
.catch((err) => console.error('sceneApply update error', err));
|
||||
}
|
||||
|
||||
render() {
|
||||
if (this.props.isActiveDefaultHost) {
|
||||
return (
|
||||
<Card.Group centered style={{ paddingTop: "3rem" }}>
|
||||
<Card.Group centered style={{ paddingTop: '3rem' }}>
|
||||
<Segment placeholder>
|
||||
<Header icon>
|
||||
<Icon
|
||||
name="exclamation triangle"
|
||||
style={{ paddingBottom: "1rem" }}
|
||||
style={{ paddingBottom: '1rem' }}
|
||||
/>
|
||||
Please select a host to visit on the left.
|
||||
</Header>
|
||||
|
@ -41,19 +43,21 @@ class HostsPanel extends Component {
|
|||
}
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<Header style={{ textAlign: "center", marginTop: "3rem" }} as="h3">
|
||||
<>
|
||||
<Header style={{ textAlign: 'center', marginTop: '3rem' }} as="h3">
|
||||
Scenes
|
||||
</Header>
|
||||
<Card.Group centered>
|
||||
{this.props.hostScenes.map((scene) => (
|
||||
<Card>
|
||||
<Card.Header textAlign="center">
|
||||
<Header style={{ margin: "1.5rem 0" }} as="h3">
|
||||
{scene.name} <Icon name={scene.icon} />
|
||||
<Header style={{ margin: '1.5rem 0' }} as="h3">
|
||||
{scene.name}
|
||||
{' '}
|
||||
<Icon name={scene.icon} />
|
||||
</Header>
|
||||
</Card.Header>
|
||||
<Card.Content extras={true}>
|
||||
<Card.Content extras>
|
||||
<div className="ui two buttons">
|
||||
<Button onClick={() => this.applyHostScene(scene.id)}>
|
||||
Apply
|
||||
|
@ -63,22 +67,20 @@ class HostsPanel extends Component {
|
|||
</Card>
|
||||
))}
|
||||
</Card.Group>
|
||||
<Header style={{ textAlign: "center" }} as="h3">
|
||||
<Header style={{ textAlign: 'center' }} as="h3">
|
||||
Devices
|
||||
</Header>
|
||||
<Card.Group centered>
|
||||
{this.props.hostDeviceIds.map((id) => {
|
||||
return (
|
||||
<Device
|
||||
key={id}
|
||||
hostId={this.props.activeHost}
|
||||
tab="Hosts"
|
||||
id={id}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
{this.props.hostDeviceIds.map((id) => (
|
||||
<Device
|
||||
key={id}
|
||||
hostId={this.props.activeHost}
|
||||
tab="Hosts"
|
||||
id={id}
|
||||
/>
|
||||
))}
|
||||
</Card.Group>
|
||||
</React.Fragment>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,9 +1,11 @@
|
|||
import React, { Component } from "react";
|
||||
import { Button, Modal, Icon, Image, Form, Dropdown } from "semantic-ui-react";
|
||||
import { connect } from "react-redux";
|
||||
import { RemoteService } from "../../remote";
|
||||
import styled from "styled-components";
|
||||
//import { appActions } from "../../storeActions";
|
||||
import React, { Component } from 'react';
|
||||
import {
|
||||
Button, Modal, Icon, Image, Form, Dropdown,
|
||||
} from 'semantic-ui-react';
|
||||
import { connect } from 'react-redux';
|
||||
import styled from 'styled-components';
|
||||
import { RemoteService } from '../../remote';
|
||||
// import { appActions } from "../../storeActions";
|
||||
|
||||
const StyledDiv = styled.div`
|
||||
background-color: #505bda;
|
||||
|
@ -31,20 +33,31 @@ class NewSceneDevice extends Component {
|
|||
this.state = {
|
||||
openModal: false,
|
||||
sceneDevices: this.props.scene ? this.props.scene.sceneStates : {},
|
||||
deviceName: "",
|
||||
deviceName: '',
|
||||
availableDevices: [],
|
||||
};
|
||||
this.getDevices();
|
||||
// this.getSceneStates();
|
||||
this.availableDevices();
|
||||
// console.log(this.state);
|
||||
|
||||
this.setSceneState = this.setSceneState.bind(this);
|
||||
this.createState = this.createState.bind(this);
|
||||
this.availableDevices = this.availableDevices.bind(this);
|
||||
}
|
||||
|
||||
getDevices() {
|
||||
this.props
|
||||
.fetchDevices()
|
||||
.catch((err) => console.error(`error fetching devices:`, err));
|
||||
.catch((err) => console.error('error fetching devices:', err));
|
||||
}
|
||||
|
||||
// getSceneStates() {
|
||||
// this.props
|
||||
// .fetchStates(this.props.activeScene)
|
||||
// .catch((err) => console.error(`error fetching states`, err));
|
||||
// }
|
||||
|
||||
handleOpen = () => {
|
||||
this.setState({ openModal: true });
|
||||
};
|
||||
|
@ -53,6 +66,28 @@ class NewSceneDevice extends Component {
|
|||
this.setState({ openModal: false });
|
||||
};
|
||||
|
||||
availableDevices() {
|
||||
const availableDevices = [];
|
||||
this.props.devices.forEach((e) => {
|
||||
if (
|
||||
Object.values(this.props.sceneStates).filter((d) => e.id === d.deviceId)
|
||||
.length < 1
|
||||
) {
|
||||
if (e.flowType === 'OUTPUT') {
|
||||
availableDevices.push({
|
||||
key: e.id,
|
||||
text: e.name,
|
||||
value: e.id,
|
||||
});
|
||||
}
|
||||
} else {
|
||||
// console.log("NOT FOUND", e);
|
||||
}
|
||||
});
|
||||
this.setState({ availableDevices });
|
||||
// return availableDevices;
|
||||
}
|
||||
|
||||
resetState = () => {
|
||||
this.setState(this.baseState);
|
||||
this.handleClose();
|
||||
|
@ -64,57 +99,45 @@ class NewSceneDevice extends Component {
|
|||
|
||||
createState() {
|
||||
for (let i = 0; i < this.state.devicesAttached.length; i++) {
|
||||
let device = this.props.devices.filter(
|
||||
(e) => this.state.devicesAttached[i] === e.id
|
||||
const device = this.props.devices.filter(
|
||||
(e) => this.state.devicesAttached[i] === e.id,
|
||||
);
|
||||
let data = {
|
||||
const data = {
|
||||
sceneId: this.props.activeScene,
|
||||
id: device[0].id,
|
||||
kind: device[0].kind,
|
||||
};
|
||||
this.props
|
||||
.saveState(data)
|
||||
.catch((err) => console.error("error in creating state", err));
|
||||
.catch((err) => console.error('error in creating state', err));
|
||||
}
|
||||
this.resetState();
|
||||
}
|
||||
|
||||
render() {
|
||||
const availableDevices = [];
|
||||
this.props.devices.forEach((e) => {
|
||||
if (!Object.keys(this.state.sceneDevices).find((d) => e.id === d)) {
|
||||
if (e.flowType === "OUTPUT") {
|
||||
availableDevices.push({
|
||||
key: e.id,
|
||||
text: e.name,
|
||||
value: e.id,
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
return (
|
||||
<Modal
|
||||
closeIcon
|
||||
open={this.state.openModal}
|
||||
onClose={this.resetState}
|
||||
trigger={
|
||||
trigger={(
|
||||
<StyledDiv
|
||||
onClick={this.handleOpen}
|
||||
style={{
|
||||
position: "relative",
|
||||
top: "calc(50% - 5rem)",
|
||||
left: "calc(50% - 5rem)",
|
||||
position: 'relative',
|
||||
top: 'calc(50% - 5rem)',
|
||||
left: 'calc(50% - 5rem)',
|
||||
}}
|
||||
>
|
||||
<Image src="/img/add.svg" style={{ filter: "invert()" }} />
|
||||
<Image src="/img/add.svg" style={{ filter: 'invert()' }} />
|
||||
</StyledDiv>
|
||||
}
|
||||
centered={true}
|
||||
)}
|
||||
centered
|
||||
>
|
||||
<Modal.Header>Add a New Scene State</Modal.Header>
|
||||
<Modal.Content>
|
||||
<Form>
|
||||
<Form.Field style={{ marginTop: "1rem" }}>
|
||||
<Form.Field style={{ marginTop: '1rem' }}>
|
||||
<label>Select devices you want to attach: </label>
|
||||
<Dropdown
|
||||
name="scene devices"
|
||||
|
@ -122,7 +145,8 @@ class NewSceneDevice extends Component {
|
|||
fluid
|
||||
multiple
|
||||
onChange={this.setSceneState}
|
||||
options={availableDevices}
|
||||
onClick={() => this.availableDevices()}
|
||||
options={this.state.availableDevices}
|
||||
/>
|
||||
</Form.Field>
|
||||
</Form>
|
||||
|
@ -145,10 +169,20 @@ class NewSceneDevice extends Component {
|
|||
|
||||
const mapStateToProps = (state, _) => ({
|
||||
devices: Object.values(state.devices),
|
||||
get sceneStates() {
|
||||
if (state.active.activeScene !== -1) {
|
||||
const stateArray = [
|
||||
...state.scenes[state.active.activeScene].sceneStates,
|
||||
].sort();
|
||||
console.log(state.scenes[state.active.activeScene]);
|
||||
return stateArray.map((id) => state.sceneStates[id]);
|
||||
}
|
||||
return [];
|
||||
},
|
||||
activeScene: state.active.activeScene,
|
||||
});
|
||||
const NewSceneDeviceContainer = connect(
|
||||
mapStateToProps,
|
||||
RemoteService
|
||||
RemoteService,
|
||||
)(NewSceneDevice);
|
||||
export default NewSceneDeviceContainer;
|
||||
|
|
|
@ -1,9 +1,11 @@
|
|||
import React, { Component } from "react";
|
||||
import { connect } from "react-redux";
|
||||
import { RemoteService } from "../../remote";
|
||||
import Device from "./devices/Device";
|
||||
import NewSceneDevice from "./NewSceneDevice";
|
||||
import { Button, Card, Segment, Header, Icon } from "semantic-ui-react";
|
||||
import React, { Component } from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import {
|
||||
Button, Card, Segment, Header, Icon,
|
||||
} from 'semantic-ui-react';
|
||||
import { RemoteService } from '../../remote';
|
||||
import Device from './devices/Device';
|
||||
import NewSceneDevice from './NewSceneDevice';
|
||||
|
||||
class ScenesPanel extends Component {
|
||||
constructor(props) {
|
||||
|
@ -15,22 +17,22 @@ class ScenesPanel extends Component {
|
|||
this.props
|
||||
.sceneApply(this.props.activeScene)
|
||||
.then(() => {
|
||||
alert("Scene applied.");
|
||||
alert('Scene applied.');
|
||||
})
|
||||
.catch(console.error);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Card.Group centered style={{ paddingTop: "3rem" }}>
|
||||
<Card.Group centered style={{ paddingTop: '3rem' }}>
|
||||
{!this.props.isActiveDefaultScene ? (
|
||||
<Card style={{ height: "27em" }}>
|
||||
<Card style={{ height: '27em' }}>
|
||||
<Card.Content>
|
||||
<Card.Header textAlign="center">
|
||||
<Header as="h3">Add devices - Apply Scene</Header>
|
||||
</Card.Header>
|
||||
<Segment basic style={{ width: "100%", height: "100%" }}>
|
||||
<NewSceneDevice />
|
||||
<Segment basic style={{ width: '100%', height: '100%' }}>
|
||||
<NewSceneDevice states={this.props.sceneStates} />
|
||||
</Segment>
|
||||
</Card.Content>
|
||||
<Card.Content extra>
|
||||
|
@ -46,16 +48,14 @@ class ScenesPanel extends Component {
|
|||
<Header icon>
|
||||
<Icon
|
||||
name="exclamation triangle"
|
||||
style={{ paddingBottom: "1rem" }}
|
||||
style={{ paddingBottom: '1rem' }}
|
||||
/>
|
||||
Please select a scene on the left or add a new one.
|
||||
</Header>
|
||||
</Segment>
|
||||
)}
|
||||
{!this.props.isActiveDefaultScene
|
||||
? this.props.sceneStates.map((e, i) => {
|
||||
return <Device key={i} tab={this.props.tab} id={e.id} />;
|
||||
})
|
||||
? this.props.sceneStates.map((e, i) => <Device key={i} tab={this.props.tab} id={e.id} />)
|
||||
: null}
|
||||
</Card.Group>
|
||||
);
|
||||
|
@ -68,10 +68,10 @@ const mapStateToProps = (state, _) => ({
|
|||
const stateArray = [
|
||||
...state.scenes[state.active.activeScene].sceneStates,
|
||||
].sort();
|
||||
console.log(state.scenes[state.active.activeScene]);
|
||||
return stateArray.map((id) => state.sceneStates[id]);
|
||||
} else {
|
||||
return [];
|
||||
}
|
||||
return [];
|
||||
},
|
||||
get isActiveDefaultScene() {
|
||||
return state.active.activeScene === -1;
|
||||
|
@ -80,6 +80,6 @@ const mapStateToProps = (state, _) => ({
|
|||
});
|
||||
const ScenesPanelContainer = connect(
|
||||
mapStateToProps,
|
||||
RemoteService
|
||||
RemoteService,
|
||||
)(ScenesPanel);
|
||||
export default ScenesPanelContainer;
|
||||
|
|
|
@ -1,8 +1,8 @@
|
|||
import React, { Component } from "react";
|
||||
import "./Curtains.css";
|
||||
import { RemoteService } from "../../../remote";
|
||||
import { connect } from "react-redux";
|
||||
import mapStateToProps from "../../../deviceProps";
|
||||
import React, { Component } from 'react';
|
||||
import './Curtains.css';
|
||||
import { connect } from 'react-redux';
|
||||
import { RemoteService } from '../../../remote';
|
||||
import mapStateToProps from '../../../deviceProps';
|
||||
|
||||
class Curtain extends Component {
|
||||
constructor(props) {
|
||||
|
@ -15,7 +15,7 @@ class Curtain extends Component {
|
|||
this.setIntensity = this.setIntensity.bind(this);
|
||||
}
|
||||
|
||||
//getters
|
||||
// getters
|
||||
get turnedOn() {
|
||||
return this.props.stateOrDevice.on;
|
||||
}
|
||||
|
@ -26,14 +26,14 @@ class Curtain extends Component {
|
|||
|
||||
onClickDevice = () => {
|
||||
const on = !this.turnedOn;
|
||||
if (this.props.tab === "Devices") {
|
||||
if (this.props.tab === 'Devices') {
|
||||
this.props
|
||||
.saveDevice({ ...this.props.stateOrDevice, on })
|
||||
.catch((err) => console.error("curtains update error", err));
|
||||
.catch((err) => console.error('curtains update error', err));
|
||||
} else {
|
||||
this.props.updateState(
|
||||
{ id: this.props.stateOrDevice.id, on: on },
|
||||
this.props.stateOrDevice.kind
|
||||
{ id: this.props.stateOrDevice.id, on },
|
||||
this.props.stateOrDevice.kind,
|
||||
);
|
||||
}
|
||||
};
|
||||
|
@ -59,14 +59,14 @@ class Curtain extends Component {
|
|||
|
||||
saveIntensity = () => {
|
||||
const intensity = Math.round(this.state.intensity);
|
||||
if (this.props.tab === "Devices") {
|
||||
if (this.props.tab === 'Devices') {
|
||||
this.props
|
||||
.saveDevice({ ...this.props.stateOrDevice, intensity })
|
||||
.catch((err) => console.error("curtain update error", err));
|
||||
.catch((err) => console.error('curtain update error', err));
|
||||
} else {
|
||||
this.props.updateState(
|
||||
{ id: this.props.stateOrDevice.id, intensity: intensity },
|
||||
this.props.stateOrDevice.kind
|
||||
{ id: this.props.stateOrDevice.id, intensity },
|
||||
this.props.stateOrDevice.kind,
|
||||
);
|
||||
}
|
||||
};
|
||||
|
@ -81,7 +81,7 @@ class Curtain extends Component {
|
|||
}
|
||||
};
|
||||
|
||||
///*this took me way too much more time than it should have*/
|
||||
// /*this took me way too much more time than it should have*/
|
||||
|
||||
handleChange = (a) => {
|
||||
this.setIntensity(a.target.value / 100);
|
||||
|
@ -94,11 +94,13 @@ class Curtain extends Component {
|
|||
<div
|
||||
className="open-container"
|
||||
style={{
|
||||
height: (9 * this.props.stateOrDevice.intensity) / 100 + "rem",
|
||||
height: `${(9 * this.props.stateOrDevice.intensity) / 100}rem`,
|
||||
}}
|
||||
></div>{" "}
|
||||
/>
|
||||
{' '}
|
||||
<span className="span-open">
|
||||
{Math.round(this.props.stateOrDevice.intensity)}%
|
||||
{Math.round(this.props.stateOrDevice.intensity)}
|
||||
%
|
||||
</span>
|
||||
<input
|
||||
disabled={this.props.disabled}
|
||||
|
|
|
@ -1,23 +1,25 @@
|
|||
import React from "react";
|
||||
import Light from "./Light";
|
||||
import SmartPlug from "./SmartPlug";
|
||||
import Sensor from "./Sensor";
|
||||
import { ButtonDimmer, KnobDimmer } from "./Dimmer";
|
||||
import Switcher from "./Switch";
|
||||
import Videocam from "./Videocam";
|
||||
import Curtains from "./Curtain";
|
||||
import Thermostat from "./Thermostats";
|
||||
import { Header, Button, Icon, Card } from "semantic-ui-react";
|
||||
import { RemoteService } from "../../../remote";
|
||||
import { connect } from "react-redux";
|
||||
import DeviceSettingsModal from "./DeviceSettingsModal";
|
||||
import mapStateToProps from "../../../deviceProps";
|
||||
import React from 'react';
|
||||
import {
|
||||
Header, Button, Icon, Card,
|
||||
} from 'semantic-ui-react';
|
||||
import { connect } from 'react-redux';
|
||||
import Light from './Light';
|
||||
import SmartPlug from './SmartPlug';
|
||||
import Sensor from './Sensor';
|
||||
import { ButtonDimmer, KnobDimmer } from './Dimmer';
|
||||
import Switcher from './Switch';
|
||||
import Videocam from './Videocam';
|
||||
import Curtains from './Curtain';
|
||||
import Thermostat from './Thermostats';
|
||||
import { RemoteService } from '../../../remote';
|
||||
import DeviceSettingsModal from './DeviceSettingsModal';
|
||||
import mapStateToProps from '../../../deviceProps';
|
||||
|
||||
const centerComponent = {
|
||||
marginLeft: "50%",
|
||||
transform: "translateX(-50%)",
|
||||
marginTop: "10%",
|
||||
marginBottom: "10%",
|
||||
marginLeft: '50%',
|
||||
transform: 'translateX(-50%)',
|
||||
marginTop: '10%',
|
||||
marginBottom: '10%',
|
||||
};
|
||||
|
||||
class Device extends React.Component {
|
||||
|
@ -31,14 +33,14 @@ class Device extends React.Component {
|
|||
}
|
||||
|
||||
edit() {
|
||||
console.log("editing device with id=" + this.props.id);
|
||||
console.log(`editing device with id=${this.props.id}`);
|
||||
this.modalRef.current.openModal();
|
||||
}
|
||||
|
||||
resetSmartPlug() {
|
||||
this.props
|
||||
.smartPlugReset(this.props.id)
|
||||
.catch((err) => console.error(`Smart plug reset error`, err));
|
||||
.catch((err) => console.error('Smart plug reset error', err));
|
||||
}
|
||||
|
||||
deleteState() {
|
||||
|
@ -71,7 +73,7 @@ class Device extends React.Component {
|
|||
id: this.props.id,
|
||||
hostId: this.props.hostId,
|
||||
},
|
||||
""
|
||||
'',
|
||||
);
|
||||
}
|
||||
|
||||
|
@ -82,7 +84,7 @@ class Device extends React.Component {
|
|||
<Icon name="pencil" />
|
||||
Edit
|
||||
</Button>
|
||||
{this.props.stateOrDevice.kind === "smartPlug" ? (
|
||||
{this.props.stateOrDevice.kind === 'smartPlug' ? (
|
||||
<Button
|
||||
color="orange"
|
||||
icon
|
||||
|
@ -119,29 +121,29 @@ class Device extends React.Component {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<Card style={{ height: "27em" }}>
|
||||
<Card style={{ height: '27em' }}>
|
||||
<Card.Content>
|
||||
<Card.Header textAlign="center">
|
||||
<Header as="h3">{this.deviceName}</Header>
|
||||
<Header as="h4" style={{ marginTop: ".5rem" }}>
|
||||
<Header as="h4" style={{ marginTop: '.5rem' }}>
|
||||
{this.props.roomName}
|
||||
</Header>
|
||||
</Card.Header>
|
||||
|
||||
<Card.Description
|
||||
style={
|
||||
this.props.device.kind !== "curtains" ? centerComponent : null
|
||||
this.props.device.kind !== 'curtains' ? centerComponent : null
|
||||
}
|
||||
>
|
||||
{this.renderDeviceComponent()}
|
||||
</Card.Description>
|
||||
</Card.Content>
|
||||
<Card.Content extra>
|
||||
{this.props.tab === "Devices"
|
||||
{this.props.tab === 'Devices'
|
||||
? this.deviceDescription()
|
||||
: this.props.tab === "Scenes" && this.stateDescription()}
|
||||
: this.props.tab === 'Scenes' && this.stateDescription()}
|
||||
</Card.Content>
|
||||
{this.props.tab === "Devices" ? (
|
||||
{this.props.tab === 'Devices' ? (
|
||||
<DeviceSettingsModal
|
||||
ref={this.modalRef}
|
||||
id={this.props.stateOrDevice.id}
|
||||
|
|
|
@ -1,25 +1,31 @@
|
|||
import React, { Component, useState } from "react";
|
||||
import { Button, Form, Icon, Header, Modal, Input } from "semantic-ui-react";
|
||||
import { connect } from "react-redux";
|
||||
import { RemoteService } from "../../../remote";
|
||||
import React, { Component, useState } from 'react';
|
||||
import {
|
||||
Button, Form, Icon, Header, Modal, Input,
|
||||
} from 'semantic-ui-react';
|
||||
import { connect } from 'react-redux';
|
||||
import { RemoteService } from '../../../remote';
|
||||
|
||||
const DeleteModal = (props) => (
|
||||
<Modal
|
||||
trigger={
|
||||
trigger={(
|
||||
<Button icon labelPosition="left" inverted color="red">
|
||||
<Icon name="trash alternate" />
|
||||
Delete device
|
||||
</Button>
|
||||
}
|
||||
)}
|
||||
closeIcon
|
||||
>
|
||||
<Header icon="archive" content="Are you sure ?" />
|
||||
<Modal.Actions>
|
||||
<Button color="red">
|
||||
<Icon name="remove" /> No
|
||||
<Icon name="remove" />
|
||||
{' '}
|
||||
No
|
||||
</Button>
|
||||
<Button onClick={() => props.removeDevice()} color="green">
|
||||
<Icon name="checkmark" /> Yes
|
||||
<Icon name="checkmark" />
|
||||
{' '}
|
||||
Yes
|
||||
</Button>
|
||||
</Modal.Actions>
|
||||
</Modal>
|
||||
|
@ -31,7 +37,7 @@ const SettingsForm = (props) => {
|
|||
setValues({ ...values, [name]: value });
|
||||
};
|
||||
|
||||
const [values, setValues] = useState({ name: "" });
|
||||
const [values, setValues] = useState({ name: '' });
|
||||
|
||||
return (
|
||||
<Form>
|
||||
|
@ -69,7 +75,7 @@ class DeviceSettingsModal extends Component {
|
|||
|
||||
this.updateDevice = this.updateDevice.bind(this);
|
||||
this.deleteDevice = this.deleteDevice.bind(this);
|
||||
//this.useExternalTempSensor = this.useExternalTempSensor.bind(this);
|
||||
// this.useExternalTempSensor = this.useExternalTempSensor.bind(this);
|
||||
}
|
||||
|
||||
closeModal = (e) => {
|
||||
|
@ -82,18 +88,18 @@ class DeviceSettingsModal extends Component {
|
|||
|
||||
updateDevice(values) {
|
||||
console.log(values, this.external);
|
||||
let name = values.name;
|
||||
let { name } = values;
|
||||
if (values.name.length === 0) {
|
||||
name = this.props.device.name;
|
||||
}
|
||||
|
||||
let data = {
|
||||
const data = {
|
||||
...this.props.device,
|
||||
name: name,
|
||||
name,
|
||||
};
|
||||
|
||||
if (this.props.device.kind === "thermostat") {
|
||||
let external = values.external
|
||||
if (this.props.device.kind === 'thermostat') {
|
||||
const external = values.external
|
||||
? values.external
|
||||
: this.props.device.useExternalSensors;
|
||||
console.log(external);
|
||||
|
@ -103,27 +109,24 @@ class DeviceSettingsModal extends Component {
|
|||
this.props
|
||||
.saveDevice(data)
|
||||
.then(() => this.setState({ openModal: false }))
|
||||
.catch((err) =>
|
||||
console.error(
|
||||
.catch((err) => console.error(
|
||||
`settings modal for device ${this.props.id} deletion error`,
|
||||
err
|
||||
)
|
||||
);
|
||||
err,
|
||||
));
|
||||
}
|
||||
|
||||
deleteDevice() {
|
||||
this.props
|
||||
.deleteDevice(this.props.device)
|
||||
.then(() => this.setState({ openModal: false }))
|
||||
.catch((err) =>
|
||||
console.error(
|
||||
.catch((err) => console.error(
|
||||
`settings modal for device ${this.props.id} deletion error`,
|
||||
err
|
||||
)
|
||||
);
|
||||
err,
|
||||
));
|
||||
}
|
||||
|
||||
_editForm = null;
|
||||
|
||||
get editForm() {
|
||||
this._editForm = this._editForm || (
|
||||
<SettingsForm
|
||||
|
@ -139,7 +142,10 @@ class DeviceSettingsModal extends Component {
|
|||
render() {
|
||||
return (
|
||||
<Modal closeIcon onClose={this.closeModal} open={this.state.openModal}>
|
||||
<Modal.Header>Settings of {this.props.device.name}</Modal.Header>
|
||||
<Modal.Header>
|
||||
Settings of
|
||||
{this.props.device.name}
|
||||
</Modal.Header>
|
||||
<Modal.Content>{this.editForm}</Modal.Content>
|
||||
</Modal>
|
||||
);
|
||||
|
@ -153,6 +159,6 @@ const DeviceSettingsModalContainer = connect(
|
|||
mapStateToProps,
|
||||
RemoteService,
|
||||
null,
|
||||
{ forwardRef: true }
|
||||
{ forwardRef: true },
|
||||
)(DeviceSettingsModal);
|
||||
export default DeviceSettingsModalContainer;
|
||||
|
|
|
@ -5,20 +5,21 @@
|
|||
• A dimmer without state can just increase or decrease the intensity of a light. <-- DefualtDimmer
|
||||
|
||||
The user can change the state of a dimmer through an intuitive UI in SmartHut .
|
||||
**/
|
||||
* */
|
||||
|
||||
import React, { Component } from "react";
|
||||
import React, { Component } from 'react';
|
||||
import {
|
||||
CircularInput,
|
||||
CircularProgress,
|
||||
CircularThumb,
|
||||
} from "react-circular-input";
|
||||
} from 'react-circular-input';
|
||||
import { connect } from 'react-redux';
|
||||
import {
|
||||
ButtonDimmerContainer,
|
||||
MinusPanel,
|
||||
PlusPanel,
|
||||
ThumbText,
|
||||
} from "./styleComponents";
|
||||
} from './styleComponents';
|
||||
import {
|
||||
CircularThumbStyle,
|
||||
KnobDimmerStyle,
|
||||
|
@ -26,22 +27,21 @@ import {
|
|||
textStyle,
|
||||
knobIcon,
|
||||
knobContainer,
|
||||
} from "./DimmerStyle";
|
||||
import { RemoteService } from "../../../remote";
|
||||
import { connect } from "react-redux";
|
||||
import mapStateToProps from "../../../deviceProps";
|
||||
} from './DimmerStyle';
|
||||
import { RemoteService } from '../../../remote';
|
||||
import mapStateToProps from '../../../deviceProps';
|
||||
|
||||
export class ButtonDimmerComponent extends Component {
|
||||
increaseIntensity = () => {
|
||||
this.props
|
||||
.buttonDimmerDim(this.props.id, "UP")
|
||||
.catch((err) => console.error("button dimmer increase error", err));
|
||||
.buttonDimmerDim(this.props.id, 'UP')
|
||||
.catch((err) => console.error('button dimmer increase error', err));
|
||||
};
|
||||
|
||||
decreaseIntensity = () => {
|
||||
this.props
|
||||
.buttonDimmerDim(this.props.id, "DOWN")
|
||||
.catch((err) => console.error("button dimmer decrease error", err));
|
||||
.buttonDimmerDim(this.props.id, 'DOWN')
|
||||
.catch((err) => console.error('button dimmer decrease error', err));
|
||||
};
|
||||
|
||||
render() {
|
||||
|
@ -96,7 +96,7 @@ export class KnobDimmerComponent extends Component {
|
|||
const val = Math.round(this.state.intensity);
|
||||
this.props
|
||||
.knobDimmerDimTo(this.props.id, val)
|
||||
.catch((err) => console.error("knob dimmer set intensity error", err));
|
||||
.catch((err) => console.error('knob dimmer set intensity error', err));
|
||||
}
|
||||
|
||||
render() {
|
||||
|
@ -104,7 +104,7 @@ export class KnobDimmerComponent extends Component {
|
|||
<div style={knobContainer}>
|
||||
<CircularInput
|
||||
style={KnobDimmerStyle}
|
||||
value={+(Math.round(this.state.intensity / 100 + "e+2") + "e-2")}
|
||||
value={+(`${Math.round(`${this.state.intensity / 100}e+2`)}e-2`)}
|
||||
onChange={this.props.disabled ? null : this.setIntensity}
|
||||
>
|
||||
<text
|
||||
|
@ -121,7 +121,7 @@ export class KnobDimmerComponent extends Component {
|
|||
style={{ ...KnobProgress, opacity: this.state.intensity + 0.1 }}
|
||||
/>
|
||||
<CircularThumb style={CircularThumbStyle} />
|
||||
<ThumbText color={"#1a2849"} />
|
||||
<ThumbText color="#1a2849" />
|
||||
</CircularInput>
|
||||
<img alt="Knob Icon" style={knobIcon} src="/img/knobDimmer.svg" />
|
||||
</div>
|
||||
|
|
|
@ -1,72 +1,72 @@
|
|||
export const KnobDimmerStyle = {
|
||||
cursor: "pointer",
|
||||
marginTop: "1rem",
|
||||
width: "9rem",
|
||||
height: "9rem",
|
||||
fill: "#1a2849",
|
||||
cursor: 'pointer',
|
||||
marginTop: '1rem',
|
||||
width: '9rem',
|
||||
height: '9rem',
|
||||
fill: '#1a2849',
|
||||
};
|
||||
|
||||
export const KnobHolder = {
|
||||
marginTop: "1rem",
|
||||
cursor: "pointer",
|
||||
padding: "3rem",
|
||||
backgroundColor: "white",
|
||||
width: "10rem",
|
||||
height: "10rem",
|
||||
marginTop: '1rem',
|
||||
cursor: 'pointer',
|
||||
padding: '3rem',
|
||||
backgroundColor: 'white',
|
||||
width: '10rem',
|
||||
height: '10rem',
|
||||
};
|
||||
|
||||
export const KnobCircularTrack = {
|
||||
fill: "white",
|
||||
stroke: "#1a2849",
|
||||
fill: 'white',
|
||||
stroke: '#1a2849',
|
||||
};
|
||||
|
||||
export const KnobIcon = {
|
||||
fill: "#1a2849",
|
||||
fill: '#1a2849',
|
||||
};
|
||||
|
||||
export const KnobProgress = {
|
||||
stroke: "#1a2849",
|
||||
strokeWidth: "3rem",
|
||||
stroke: '#1a2849',
|
||||
strokeWidth: '3rem',
|
||||
};
|
||||
|
||||
export const ValueStyle = {
|
||||
pointerEvents: "none",
|
||||
fill: "#1a2849",
|
||||
fontSize: "1.3rem",
|
||||
fontFamily: "Lato",
|
||||
textAnchor: "middle",
|
||||
userSelect: "none",
|
||||
pointerEvents: 'none',
|
||||
fill: '#1a2849',
|
||||
fontSize: '1.3rem',
|
||||
fontFamily: 'Lato',
|
||||
textAnchor: 'middle',
|
||||
userSelect: 'none',
|
||||
};
|
||||
|
||||
export const CircularThumbStyle = {
|
||||
fill: "white",
|
||||
stroke: "#1a2849",
|
||||
strokeWidth: ".2rem",
|
||||
r: "1.4rem",
|
||||
fill: 'white',
|
||||
stroke: '#1a2849',
|
||||
strokeWidth: '.2rem',
|
||||
r: '1.4rem',
|
||||
};
|
||||
|
||||
export const textStyle = {
|
||||
position: "absolute",
|
||||
fill: "#1a2849",
|
||||
fontSize: "1.5rem",
|
||||
fontFamily: "Lato",
|
||||
overflow: "hidden",
|
||||
whiteSpace: "nowrap",
|
||||
textOverflow: "ellipsis",
|
||||
userSelect: "none",
|
||||
position: 'absolute',
|
||||
fill: '#1a2849',
|
||||
fontSize: '1.5rem',
|
||||
fontFamily: 'Lato',
|
||||
overflow: 'hidden',
|
||||
whiteSpace: 'nowrap',
|
||||
textOverflow: 'ellipsis',
|
||||
userSelect: 'none',
|
||||
};
|
||||
|
||||
export const knobIcon = {
|
||||
position: "absolute",
|
||||
left: "50%",
|
||||
top: "30%",
|
||||
transform: "translateX(-50%)",
|
||||
width: "2rem",
|
||||
height: "2rem",
|
||||
position: 'absolute',
|
||||
left: '50%',
|
||||
top: '30%',
|
||||
transform: 'translateX(-50%)',
|
||||
width: '2rem',
|
||||
height: '2rem',
|
||||
};
|
||||
|
||||
export const knobContainer = {
|
||||
position: "relative",
|
||||
width: "9rem",
|
||||
height: "9rem",
|
||||
position: 'relative',
|
||||
width: '9rem',
|
||||
height: '9rem',
|
||||
};
|
||||
|
|
|
@ -7,19 +7,20 @@
|
|||
* Lights have an internal state that can be changed and it must
|
||||
* be shown accordingly in the SmartHut views (house view and room views).
|
||||
*/
|
||||
import React, { Component } from "react";
|
||||
import React, { Component } from 'react';
|
||||
import { Image } from 'semantic-ui-react';
|
||||
import {
|
||||
CircularInput,
|
||||
CircularProgress,
|
||||
CircularThumb,
|
||||
} from 'react-circular-input';
|
||||
import { connect } from 'react-redux';
|
||||
import {
|
||||
iconStyle,
|
||||
StyledDiv,
|
||||
BottomPanel,
|
||||
ThumbText,
|
||||
} from "./styleComponents";
|
||||
import { Image } from "semantic-ui-react";
|
||||
import {
|
||||
CircularInput,
|
||||
CircularProgress,
|
||||
CircularThumb,
|
||||
} from "react-circular-input";
|
||||
} from './styleComponents';
|
||||
import {
|
||||
LightDimmerContainer,
|
||||
LightDimmerStyle,
|
||||
|
@ -28,10 +29,9 @@ import {
|
|||
KnobProgress,
|
||||
CircularThumbStyle,
|
||||
knobIcon,
|
||||
} from "./LightStyle";
|
||||
import { RemoteService } from "../../../remote";
|
||||
import { connect } from "react-redux";
|
||||
import mapStateToProps from "../../../deviceProps";
|
||||
} from './LightStyle';
|
||||
import { RemoteService } from '../../../remote';
|
||||
import mapStateToProps from '../../../deviceProps';
|
||||
|
||||
class Light extends Component {
|
||||
constructor(props) {
|
||||
|
@ -41,8 +41,8 @@ class Light extends Component {
|
|||
timeout: null,
|
||||
};
|
||||
|
||||
this.iconOn = "/img/lightOn.svg";
|
||||
this.iconOff = "/img/lightOff.svg";
|
||||
this.iconOn = '/img/lightOn.svg';
|
||||
this.iconOff = '/img/lightOff.svg';
|
||||
|
||||
this.setIntensity = this.setIntensity.bind(this);
|
||||
}
|
||||
|
@ -68,34 +68,30 @@ class Light extends Component {
|
|||
|
||||
onClickDevice = () => {
|
||||
const on = !this.turnedOn;
|
||||
if (this.props.tab !== "Scenes") {
|
||||
if (this.props.tab !== 'Scenes') {
|
||||
this.props
|
||||
.saveDevice(
|
||||
{ ...this.props.stateOrDevice, on },
|
||||
this.props.tab === "Hosts" ? this.props.activeHost : null
|
||||
this.props.tab === 'Hosts' ? this.props.activeHost : null,
|
||||
)
|
||||
.catch((err) => console.error("regular light update error", err));
|
||||
} else {
|
||||
if (this.props.device.kind === "regularLight") {
|
||||
.catch((err) => console.error('regular light update error', err));
|
||||
} else if (this.props.device.kind === 'regularLight') {
|
||||
this.props
|
||||
.updateState(
|
||||
{
|
||||
id: this.props.stateOrDevice.id,
|
||||
on: on,
|
||||
on,
|
||||
sceneId: this.props.stateOrDevice.sceneId,
|
||||
},
|
||||
this.props.stateOrDevice.kind
|
||||
this.props.stateOrDevice.kind,
|
||||
)
|
||||
.then((res) => {
|
||||
console.log(res);
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
getIcon = () => {
|
||||
return this.turnedOn ? this.iconOn : this.iconOff;
|
||||
};
|
||||
getIcon = () => (this.turnedOn ? this.iconOn : this.iconOff);
|
||||
|
||||
setIntensity(intensity) {
|
||||
intensity *= 100;
|
||||
|
@ -118,18 +114,18 @@ class Light extends Component {
|
|||
|
||||
saveIntensity = () => {
|
||||
const intensity = Math.round(this.state.intensity);
|
||||
if (this.props.tab !== "Scenes") {
|
||||
if (this.props.tab !== 'Scenes') {
|
||||
this.props
|
||||
.saveDevice(
|
||||
{ ...this.props.stateOrDevice, intensity },
|
||||
this.props.tab === "Hosts" ? this.props.activeHost : null
|
||||
this.props.tab === 'Hosts' ? this.props.activeHost : null,
|
||||
)
|
||||
.catch((err) => console.error("dimmable light update error", err));
|
||||
.catch((err) => console.error('dimmable light update error', err));
|
||||
} else {
|
||||
this.props
|
||||
.updateState(
|
||||
{ id: this.props.stateOrDevice.id, intensity: intensity },
|
||||
this.props.stateOrDevice.kind
|
||||
{ id: this.props.stateOrDevice.id, intensity },
|
||||
this.props.stateOrDevice.kind,
|
||||
)
|
||||
.then((res) => {
|
||||
console.log(res, this.props.stateOrDevice.kind);
|
||||
|
@ -142,7 +138,7 @@ class Light extends Component {
|
|||
<div style={LightDimmerContainer}>
|
||||
<CircularInput
|
||||
style={LightDimmerStyle}
|
||||
value={+(Math.round(this.intensity / 100 + "e+2") + "e-2")}
|
||||
value={+(`${Math.round(`${this.intensity / 100}e+2`)}e-2`)}
|
||||
onChange={this.props.disabled ? null : this.setIntensity}
|
||||
onMouseUp={this.props.disabled ? null : this.saveIntensity}
|
||||
>
|
||||
|
@ -163,7 +159,7 @@ class Light extends Component {
|
|||
}}
|
||||
/>
|
||||
<CircularThumb style={CircularThumbStyle} />
|
||||
<ThumbText color={"#ffd31d"} />
|
||||
<ThumbText color="#ffd31d" />
|
||||
</CircularInput>
|
||||
<Image style={knobIcon} src="/img/intensityLightIcon.svg" />
|
||||
</div>
|
||||
|
@ -173,7 +169,7 @@ class Light extends Component {
|
|||
<StyledDiv onClick={this.onClickDevice}>
|
||||
<div>
|
||||
<Image src={this.getIcon()} style={iconStyle} />
|
||||
<BottomPanel style={{ backgroundColor: "#ffa41b" }}>
|
||||
<BottomPanel style={{ backgroundColor: '#ffa41b' }}>
|
||||
<h5 style={nameStyle}>Light</h5>
|
||||
</BottomPanel>
|
||||
</div>
|
||||
|
@ -182,7 +178,7 @@ class Light extends Component {
|
|||
|
||||
return (
|
||||
<div>
|
||||
{this.props.device.kind === "dimmableLight"
|
||||
{this.props.device.kind === 'dimmableLight'
|
||||
? intensityLightView
|
||||
: normalLightView}
|
||||
</div>
|
||||
|
|
|
@ -1,69 +1,69 @@
|
|||
export const valueStyle = {
|
||||
fill: "#3e99ff",
|
||||
fontSize: "2.5rem",
|
||||
fontFamily: "Lato",
|
||||
textShadow: "1px 1px 0.5px rgba(0, 0, 0, .2)",
|
||||
fill: '#3e99ff',
|
||||
fontSize: '2.5rem',
|
||||
fontFamily: 'Lato',
|
||||
textShadow: '1px 1px 0.5px rgba(0, 0, 0, .2)',
|
||||
};
|
||||
|
||||
export const intensityLightStyle = {
|
||||
fill: "#ffd31d",
|
||||
fontSize: "1.2rem",
|
||||
fontFamily: "Lato",
|
||||
textShadow: "1px 1px 0.5px rgba(0, 0, 0, .2)",
|
||||
fill: '#ffd31d',
|
||||
fontSize: '1.2rem',
|
||||
fontFamily: 'Lato',
|
||||
textShadow: '1px 1px 0.5px rgba(0, 0, 0, .2)',
|
||||
};
|
||||
|
||||
export const textStyle = {
|
||||
position: "absolute",
|
||||
fill: "#ffd31d",
|
||||
fontSize: "1.5rem",
|
||||
fontFamily: "Lato",
|
||||
overflow: "hidden",
|
||||
whiteSpace: "nowrap",
|
||||
textOverflow: "ellipsis",
|
||||
userSelect: "none",
|
||||
position: 'absolute',
|
||||
fill: '#ffd31d',
|
||||
fontSize: '1.5rem',
|
||||
fontFamily: 'Lato',
|
||||
overflow: 'hidden',
|
||||
whiteSpace: 'nowrap',
|
||||
textOverflow: 'ellipsis',
|
||||
userSelect: 'none',
|
||||
};
|
||||
|
||||
export const nameStyle = {
|
||||
fontSize: "1rem",
|
||||
position: "absolute",
|
||||
top: "30%",
|
||||
left: "50%",
|
||||
transform: "translateX(-50%)",
|
||||
color: "white",
|
||||
userSelect: "none",
|
||||
fontSize: '1rem',
|
||||
position: 'absolute',
|
||||
top: '30%',
|
||||
left: '50%',
|
||||
transform: 'translateX(-50%)',
|
||||
color: 'white',
|
||||
userSelect: 'none',
|
||||
};
|
||||
|
||||
export const LightDimmerStyle = {
|
||||
cursor: "pointer",
|
||||
marginTop: "1rem",
|
||||
width: "9rem",
|
||||
height: "9rem",
|
||||
fill: "#ffd31d",
|
||||
cursor: 'pointer',
|
||||
marginTop: '1rem',
|
||||
width: '9rem',
|
||||
height: '9rem',
|
||||
fill: '#ffd31d',
|
||||
};
|
||||
|
||||
export const LightDimmerContainer = {
|
||||
position: "relative",
|
||||
width: "9rem",
|
||||
height: "9rem",
|
||||
position: 'relative',
|
||||
width: '9rem',
|
||||
height: '9rem',
|
||||
};
|
||||
|
||||
export const CircularThumbStyle = {
|
||||
fill: "white",
|
||||
stroke: "#ffd31d",
|
||||
strokeWidth: ".2rem",
|
||||
r: "1.4rem",
|
||||
fill: 'white',
|
||||
stroke: '#ffd31d',
|
||||
strokeWidth: '.2rem',
|
||||
r: '1.4rem',
|
||||
};
|
||||
|
||||
export const KnobProgress = {
|
||||
stroke: "#ffd31d",
|
||||
strokeWidth: "3rem",
|
||||
stroke: '#ffd31d',
|
||||
strokeWidth: '3rem',
|
||||
};
|
||||
|
||||
export const knobIcon = {
|
||||
position: "absolute",
|
||||
left: "50%",
|
||||
top: "30%",
|
||||
transform: "translateX(-50%)",
|
||||
width: "2rem",
|
||||
height: "2rem",
|
||||
position: 'absolute',
|
||||
left: '50%',
|
||||
top: '30%',
|
||||
transform: 'translateX(-50%)',
|
||||
width: '2rem',
|
||||
height: '2rem',
|
||||
};
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
import React, { Component } from "react";
|
||||
import styled from "styled-components";
|
||||
import React, { Component } from 'react';
|
||||
import styled from 'styled-components';
|
||||
import {
|
||||
Button,
|
||||
Dropdown,
|
||||
|
@ -8,9 +8,9 @@ import {
|
|||
Image,
|
||||
Input,
|
||||
Modal,
|
||||
} from "semantic-ui-react";
|
||||
import { RemoteService } from "../../../remote";
|
||||
import { connect } from "react-redux";
|
||||
} from 'semantic-ui-react';
|
||||
import { connect } from 'react-redux';
|
||||
import { RemoteService } from '../../../remote';
|
||||
|
||||
const StyledDiv = styled.div`
|
||||
background-color: #505bda;
|
||||
|
@ -38,7 +38,7 @@ class NewDevice extends Component {
|
|||
step: 1,
|
||||
openModal: false,
|
||||
motion: false,
|
||||
deviceName: "",
|
||||
deviceName: '',
|
||||
};
|
||||
this.baseState = this.state;
|
||||
this.createDevice = this.createDevice.bind(this);
|
||||
|
@ -47,6 +47,7 @@ class NewDevice extends Component {
|
|||
handleOpen = () => {
|
||||
this.setState({ openModal: true });
|
||||
};
|
||||
|
||||
handleClose = () => {
|
||||
this.setState({ openModal: false });
|
||||
};
|
||||
|
@ -59,12 +60,13 @@ class NewDevice extends Component {
|
|||
nextStep = () => {
|
||||
this.setState((prevState) => ({ step: prevState.step + 1 }));
|
||||
};
|
||||
|
||||
previousStep = () => {
|
||||
this.setState((prevState) => ({ step: prevState.step - 1 }));
|
||||
};
|
||||
|
||||
setTypeOfDevice = (e, d) => {
|
||||
if (d.value === "dimmableLight") {
|
||||
if (d.value === 'dimmableLight') {
|
||||
this.setState({ typeOfDevice: d.value, intensity: 0 });
|
||||
} else {
|
||||
this.setState({ typeOfDevice: d.value });
|
||||
|
@ -77,7 +79,7 @@ class NewDevice extends Component {
|
|||
|
||||
setTypeOfSensor = (e, d) => {
|
||||
console.log(d.value);
|
||||
if (d.value === "motionSensor") {
|
||||
if (d.value === 'motionSensor') {
|
||||
this.setState({ typeOfSensor: d.value, motion: true });
|
||||
} else {
|
||||
this.setState({ typeOfSensor: d.value });
|
||||
|
@ -94,59 +96,59 @@ class NewDevice extends Component {
|
|||
id: null,
|
||||
roomId: this.props.activeRoom,
|
||||
name: this.state.deviceName,
|
||||
kind: this.state.motion ? "motionSensor" : this.state.typeOfDevice,
|
||||
kind: this.state.motion ? 'motionSensor' : this.state.typeOfDevice,
|
||||
};
|
||||
let outputs = null;
|
||||
|
||||
const defaultNames = {
|
||||
regularLight: "New regular light",
|
||||
dimmableLight: "New intensity light",
|
||||
smartPlug: "New smart Plug",
|
||||
sensor: "New sensor",
|
||||
switch: "New switch",
|
||||
buttonDimmer: "New button dimmer",
|
||||
knobDimmer: "New knob dimmer",
|
||||
securityCamera: "New security camera",
|
||||
thermostat: "New thermostat",
|
||||
curtains: "New curtains",
|
||||
regularLight: 'New regular light',
|
||||
dimmableLight: 'New intensity light',
|
||||
smartPlug: 'New smart Plug',
|
||||
sensor: 'New sensor',
|
||||
switch: 'New switch',
|
||||
buttonDimmer: 'New button dimmer',
|
||||
knobDimmer: 'New knob dimmer',
|
||||
securityCamera: 'New security camera',
|
||||
thermostat: 'New thermostat',
|
||||
curtains: 'New curtains',
|
||||
};
|
||||
|
||||
if (this.state.deviceName === "") {
|
||||
if (this.state.deviceName === '') {
|
||||
data.name = defaultNames[this.state.typeOfDevice];
|
||||
}
|
||||
console.log("-------------------------");
|
||||
console.log('-------------------------');
|
||||
console.log(this.state.typeOfDevice);
|
||||
|
||||
switch (this.state.typeOfDevice) {
|
||||
//trying to make securityCamera work
|
||||
//case "securityCamera":
|
||||
// trying to make securityCamera work
|
||||
// case "securityCamera":
|
||||
// data.path="/security_camera_videos/security_camera_1.mp4";
|
||||
// data.on=false;
|
||||
//break;
|
||||
//trying to make thermostat work
|
||||
case "thermostat":
|
||||
// break;
|
||||
// trying to make thermostat work
|
||||
case 'thermostat':
|
||||
data.targetTemperature = 0;
|
||||
data.measuredTemperature = 0;
|
||||
break;
|
||||
case "dimmableLight":
|
||||
case 'dimmableLight':
|
||||
data.intensity = 0;
|
||||
break;
|
||||
case "sensor":
|
||||
case 'sensor':
|
||||
if (!this.state.motion) {
|
||||
data.sensor = this.state.typeOfSensor;
|
||||
data.value = 0;
|
||||
}
|
||||
break;
|
||||
case "switch":
|
||||
case "buttonDimmer":
|
||||
case "knobDimmer":
|
||||
case 'switch':
|
||||
case 'buttonDimmer':
|
||||
case 'knobDimmer':
|
||||
outputs = this.state.lightsAttached;
|
||||
if (
|
||||
this.state.lightsAttached === undefined ||
|
||||
this.state.lightsAttached.length === 0
|
||||
this.state.lightsAttached === undefined
|
||||
|| this.state.lightsAttached.length === 0
|
||||
) {
|
||||
alert(
|
||||
"No lights attached to this switch! Please, add a light a first."
|
||||
'No lights attached to this switch! Please, add a light a first.',
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
@ -156,114 +158,114 @@ class NewDevice extends Component {
|
|||
}
|
||||
|
||||
try {
|
||||
let newDevice = await this.props.saveDevice(data);
|
||||
const newDevice = await this.props.saveDevice(data);
|
||||
if (outputs) {
|
||||
await this.props.connectOutputs(newDevice, outputs);
|
||||
}
|
||||
this.resetState();
|
||||
} catch (e) {
|
||||
console.error("device creation error: ", e);
|
||||
console.error('device creation error: ', e);
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const deviceOptions = [
|
||||
//stuff
|
||||
// stuff
|
||||
{
|
||||
key: "thermostat",
|
||||
text: "Thermostat",
|
||||
value: "thermostat",
|
||||
image: { avatar: true, src: "/img/thermostat-icon.png" },
|
||||
key: 'thermostat',
|
||||
text: 'Thermostat',
|
||||
value: 'thermostat',
|
||||
image: { avatar: true, src: '/img/thermostat-icon.png' },
|
||||
},
|
||||
{
|
||||
key: "curtains",
|
||||
text: "Curtain",
|
||||
value: "curtains",
|
||||
image: { avatar: true, src: "/img/curtains-icon.png" },
|
||||
key: 'curtains',
|
||||
text: 'Curtain',
|
||||
value: 'curtains',
|
||||
image: { avatar: true, src: '/img/curtains-icon.png' },
|
||||
},
|
||||
//stuff ends
|
||||
// stuff ends
|
||||
{
|
||||
key: "light",
|
||||
text: "Normal Light",
|
||||
value: "regularLight",
|
||||
image: { avatar: true, src: "/img/lightOn.svg" },
|
||||
key: 'light',
|
||||
text: 'Normal Light',
|
||||
value: 'regularLight',
|
||||
image: { avatar: true, src: '/img/lightOn.svg' },
|
||||
},
|
||||
{
|
||||
key: "intensity-light",
|
||||
text: "Intensity Light",
|
||||
value: "dimmableLight",
|
||||
image: { avatar: true, src: "/img/intensity-light.svg" },
|
||||
key: 'intensity-light',
|
||||
text: 'Intensity Light',
|
||||
value: 'dimmableLight',
|
||||
image: { avatar: true, src: '/img/intensity-light.svg' },
|
||||
},
|
||||
{
|
||||
key: "smart-plug",
|
||||
text: "Smart Plug",
|
||||
value: "smartPlug",
|
||||
image: { avatar: true, src: "/img/smart-plug.svg" },
|
||||
key: 'smart-plug',
|
||||
text: 'Smart Plug',
|
||||
value: 'smartPlug',
|
||||
image: { avatar: true, src: '/img/smart-plug.svg' },
|
||||
},
|
||||
{
|
||||
key: "sensor",
|
||||
text: "Sensor",
|
||||
value: "sensor",
|
||||
image: { avatar: true, src: "/img/sensorOn.svg" },
|
||||
key: 'sensor',
|
||||
text: 'Sensor',
|
||||
value: 'sensor',
|
||||
image: { avatar: true, src: '/img/sensorOn.svg' },
|
||||
},
|
||||
{
|
||||
key: "switch",
|
||||
text: "Switch",
|
||||
value: "switch",
|
||||
image: { avatar: true, src: "/img/switchOn.svg" },
|
||||
key: 'switch',
|
||||
text: 'Switch',
|
||||
value: 'switch',
|
||||
image: { avatar: true, src: '/img/switchOn.svg' },
|
||||
},
|
||||
{
|
||||
key: "knobDimmer",
|
||||
text: "Knob Dimmer",
|
||||
value: "knobDimmer",
|
||||
image: { avatar: true, src: "/img/knob.svg" },
|
||||
key: 'knobDimmer',
|
||||
text: 'Knob Dimmer',
|
||||
value: 'knobDimmer',
|
||||
image: { avatar: true, src: '/img/knob.svg' },
|
||||
},
|
||||
{
|
||||
key: "buttonDimmer",
|
||||
text: "Button Dimmer",
|
||||
value: "buttonDimmer",
|
||||
image: { avatar: true, src: "/img/plusMinus.svg" },
|
||||
key: 'buttonDimmer',
|
||||
text: 'Button Dimmer',
|
||||
value: 'buttonDimmer',
|
||||
image: { avatar: true, src: '/img/plusMinus.svg' },
|
||||
},
|
||||
{
|
||||
key: "securityCamera",
|
||||
text: "Security Camera",
|
||||
value: "securityCamera",
|
||||
image: { avatar: true, src: "/img/security-icon.png" },
|
||||
key: 'securityCamera',
|
||||
text: 'Security Camera',
|
||||
value: 'securityCamera',
|
||||
image: { avatar: true, src: '/img/security-icon.png' },
|
||||
},
|
||||
];
|
||||
const sensorOptions = [
|
||||
{
|
||||
key: "temperature",
|
||||
text: "Temperature Sensor",
|
||||
value: "TEMPERATURE",
|
||||
image: { avatar: true, src: "/img/temperature-sensor.svg" },
|
||||
key: 'temperature',
|
||||
text: 'Temperature Sensor',
|
||||
value: 'TEMPERATURE',
|
||||
image: { avatar: true, src: '/img/temperature-sensor.svg' },
|
||||
},
|
||||
{
|
||||
key: "humidity",
|
||||
text: "Humidity Sensor",
|
||||
value: "HUMIDITY",
|
||||
image: { avatar: true, src: "/img/humidity-sensor.svg" },
|
||||
key: 'humidity',
|
||||
text: 'Humidity Sensor',
|
||||
value: 'HUMIDITY',
|
||||
image: { avatar: true, src: '/img/humidity-sensor.svg' },
|
||||
},
|
||||
{
|
||||
key: "light",
|
||||
text: "Light Sensor",
|
||||
value: "LIGHT",
|
||||
image: { avatar: true, src: "/img/light-sensor.svg" },
|
||||
key: 'light',
|
||||
text: 'Light Sensor',
|
||||
value: 'LIGHT',
|
||||
image: { avatar: true, src: '/img/light-sensor.svg' },
|
||||
},
|
||||
{
|
||||
key: "motion",
|
||||
text: "Motion Sensor",
|
||||
value: "motionSensor",
|
||||
image: { avatar: true, src: "/img/sensorOn.svg" },
|
||||
key: 'motion',
|
||||
text: 'Motion Sensor',
|
||||
value: 'motionSensor',
|
||||
image: { avatar: true, src: '/img/sensorOn.svg' },
|
||||
},
|
||||
];
|
||||
const availableSwitchDevices = [];
|
||||
const availableDimmerDevices = [];
|
||||
this.props.devices.forEach((d) => {
|
||||
if (
|
||||
d.kind === "regularLight" ||
|
||||
d.kind === "dimmableLight" ||
|
||||
d.kind === "smartPlug"
|
||||
d.kind === 'regularLight'
|
||||
|| d.kind === 'dimmableLight'
|
||||
|| d.kind === 'smartPlug'
|
||||
) {
|
||||
availableSwitchDevices.push({
|
||||
key: d.id,
|
||||
|
@ -271,7 +273,7 @@ class NewDevice extends Component {
|
|||
value: d.id,
|
||||
});
|
||||
}
|
||||
if (d.kind === "dimmableLight") {
|
||||
if (d.kind === 'dimmableLight') {
|
||||
availableDimmerDevices.push({
|
||||
key: d.id,
|
||||
text: d.name,
|
||||
|
@ -296,7 +298,7 @@ class NewDevice extends Component {
|
|||
<label>Device Name: </label>
|
||||
<Input
|
||||
fluid
|
||||
size={"large"}
|
||||
size="large"
|
||||
onChange={this.setDeviceName}
|
||||
focus
|
||||
placeholder="Device Name"
|
||||
|
@ -305,7 +307,7 @@ class NewDevice extends Component {
|
|||
</div>
|
||||
);
|
||||
const sensorForm = (
|
||||
<Form.Field style={{ marginTop: "1rem" }}>
|
||||
<Form.Field style={{ marginTop: '1rem' }}>
|
||||
<label>Type of Sensor: </label>
|
||||
<Dropdown
|
||||
name="typeOfDevice"
|
||||
|
@ -318,7 +320,7 @@ class NewDevice extends Component {
|
|||
</Form.Field>
|
||||
);
|
||||
const switchOptions = (
|
||||
<Form.Field style={{ marginTop: "1rem" }}>
|
||||
<Form.Field style={{ marginTop: '1rem' }}>
|
||||
<label>Select the lights or smart plugs You Want to Attach: </label>
|
||||
<Dropdown
|
||||
name="typeOfDevice"
|
||||
|
@ -331,7 +333,7 @@ class NewDevice extends Component {
|
|||
</Form.Field>
|
||||
);
|
||||
const dimmerOptions = (
|
||||
<Form.Field style={{ marginTop: "1rem" }}>
|
||||
<Form.Field style={{ marginTop: '1rem' }}>
|
||||
<label>Select the dimmable lights You Want to Attach: </label>
|
||||
<Dropdown
|
||||
name="typeOfDevice"
|
||||
|
@ -346,12 +348,12 @@ class NewDevice extends Component {
|
|||
return (
|
||||
<Form>
|
||||
{deviceName}
|
||||
{this.state.typeOfDevice === "sensor" ? sensorForm : ""}
|
||||
{this.state.typeOfDevice === "switch" ? switchOptions : ""}
|
||||
{this.state.typeOfDevice === "buttonDimmer" ||
|
||||
this.state.typeOfDevice === "knobDimmer"
|
||||
{this.state.typeOfDevice === 'sensor' ? sensorForm : ''}
|
||||
{this.state.typeOfDevice === 'switch' ? switchOptions : ''}
|
||||
{this.state.typeOfDevice === 'buttonDimmer'
|
||||
|| this.state.typeOfDevice === 'knobDimmer'
|
||||
? dimmerOptions
|
||||
: ""}
|
||||
: ''}
|
||||
</Form>
|
||||
);
|
||||
};
|
||||
|
@ -361,19 +363,19 @@ class NewDevice extends Component {
|
|||
closeIcon
|
||||
open={this.state.openModal}
|
||||
onClose={this.resetState}
|
||||
trigger={
|
||||
trigger={(
|
||||
<StyledDiv
|
||||
onClick={this.handleOpen}
|
||||
style={{
|
||||
position: "relative",
|
||||
top: "calc(50% - 5rem)",
|
||||
left: "calc(50% - 5rem)",
|
||||
position: 'relative',
|
||||
top: 'calc(50% - 5rem)',
|
||||
left: 'calc(50% - 5rem)',
|
||||
}}
|
||||
>
|
||||
<Image src="/img/add.svg" style={{ filter: "invert()" }} />
|
||||
<Image src="/img/add.svg" style={{ filter: 'invert()' }} />
|
||||
</StyledDiv>
|
||||
}
|
||||
centered={true}
|
||||
)}
|
||||
centered
|
||||
>
|
||||
<Modal.Header>Add a New Device</Modal.Header>
|
||||
<Modal.Content>{steps[this.state.step - 1]}</Modal.Content>
|
||||
|
@ -389,7 +391,7 @@ class NewDevice extends Component {
|
|||
Back
|
||||
</Button>
|
||||
) : (
|
||||
""
|
||||
''
|
||||
)}
|
||||
{this.state.step < steps.length ? (
|
||||
<Button
|
||||
|
@ -402,7 +404,7 @@ class NewDevice extends Component {
|
|||
<Icon name="right arrow" />
|
||||
</Button>
|
||||
) : (
|
||||
""
|
||||
''
|
||||
)}
|
||||
{this.state.step === steps.length ? (
|
||||
<Button
|
||||
|
@ -415,7 +417,7 @@ class NewDevice extends Component {
|
|||
Finish
|
||||
</Button>
|
||||
) : (
|
||||
""
|
||||
''
|
||||
)}
|
||||
</Modal.Actions>
|
||||
</Modal>
|
||||
|
|
|
@ -19,8 +19,10 @@
|
|||
errorStyle,
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
import { CircularInput, CircularProgress } from "react-circular-input";
|
||||
import React, { Component } from 'react';
|
||||
import { CircularInput, CircularProgress } from 'react-circular-input';
|
||||
import { Image } from 'semantic-ui-react';
|
||||
import { connect } from 'react-redux';
|
||||
import {
|
||||
container,
|
||||
sensorText,
|
||||
|
@ -34,11 +36,9 @@ import {
|
|||
lightSensorColors,
|
||||
humiditySensorColors,
|
||||
iconSensorStyle,
|
||||
} from "./SensorStyle";
|
||||
import { Image } from "semantic-ui-react";
|
||||
import { RemoteService } from "../../../remote";
|
||||
import { connect } from "react-redux";
|
||||
import mapStateToProps from "../../../deviceProps";
|
||||
} from './SensorStyle';
|
||||
import { RemoteService } from '../../../remote';
|
||||
import mapStateToProps from '../../../deviceProps';
|
||||
|
||||
class Sensor extends Component {
|
||||
constructor(props) {
|
||||
|
@ -47,25 +47,25 @@ class Sensor extends Component {
|
|||
value: 0,
|
||||
motion: false,
|
||||
};
|
||||
this.units = "";
|
||||
this.units = '';
|
||||
this.stateCallback = (e) => {
|
||||
this.setState(Object.assign(this.state, e));
|
||||
};
|
||||
|
||||
this.colors = temperatureSensorColors;
|
||||
this.icon = "temperatureIcon.svg";
|
||||
this.name = "Sensor";
|
||||
this.icon = 'temperatureIcon.svg';
|
||||
this.name = 'Sensor';
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps) {
|
||||
if (
|
||||
this.props.stateOrDevice.kind === "sensor" &&
|
||||
this.props.stateOrDevice.value !== prevProps.stateOrDevice.value
|
||||
this.props.stateOrDevice.kind === 'sensor'
|
||||
&& this.props.stateOrDevice.value !== prevProps.stateOrDevice.value
|
||||
) {
|
||||
this.setState({ value: this.props.stateOrDevice.value });
|
||||
} else if (
|
||||
this.props.stateOrDevice.kind === "motionSensor" &&
|
||||
this.props.stateOrDevice.detected !== prevProps.stateOrDevice.detected
|
||||
this.props.stateOrDevice.kind === 'motionSensor'
|
||||
&& this.props.stateOrDevice.detected !== prevProps.stateOrDevice.detected
|
||||
) {
|
||||
this.setState({
|
||||
motion: true,
|
||||
|
@ -75,28 +75,28 @@ class Sensor extends Component {
|
|||
}
|
||||
|
||||
componentDidMount() {
|
||||
if (this.props.stateOrDevice.kind === "sensor") {
|
||||
if (this.props.stateOrDevice.kind === 'sensor') {
|
||||
switch (this.props.stateOrDevice.sensor) {
|
||||
case "TEMPERATURE":
|
||||
this.units = "ºC";
|
||||
case 'TEMPERATURE':
|
||||
this.units = 'ºC';
|
||||
this.colors = temperatureSensorColors;
|
||||
this.icon = "temperatureIcon.svg";
|
||||
this.name = "Temperature Sensor";
|
||||
this.icon = 'temperatureIcon.svg';
|
||||
this.name = 'Temperature Sensor';
|
||||
break;
|
||||
case "HUMIDITY":
|
||||
this.units = "%";
|
||||
case 'HUMIDITY':
|
||||
this.units = '%';
|
||||
this.colors = humiditySensorColors;
|
||||
this.icon = "humidityIcon.svg";
|
||||
this.name = "Humidity Sensor";
|
||||
this.icon = 'humidityIcon.svg';
|
||||
this.name = 'Humidity Sensor';
|
||||
break;
|
||||
case "LIGHT":
|
||||
this.units = "lm";
|
||||
case 'LIGHT':
|
||||
this.units = 'lm';
|
||||
this.colors = lightSensorColors;
|
||||
this.icon = "lightSensorIcon.svg";
|
||||
this.name = "Light Sensor";
|
||||
this.icon = 'lightSensorIcon.svg';
|
||||
this.name = 'Light Sensor';
|
||||
break;
|
||||
default:
|
||||
this.units = "";
|
||||
this.units = '';
|
||||
}
|
||||
this.setState({
|
||||
value: this.props.stateOrDevice.value,
|
||||
|
@ -129,36 +129,34 @@ class Sensor extends Component {
|
|||
};
|
||||
|
||||
render() {
|
||||
const MotionSensor = (props) => {
|
||||
return (
|
||||
const MotionSensor = (props) => (
|
||||
<div
|
||||
style={{
|
||||
...motionSensorOuterCircle,
|
||||
backgroundColor: this.state.detected ? '#505bda' : '#00bdaa',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
...motionSensorOuterCircle,
|
||||
backgroundColor: this.state.detected ? "#505bda" : "#00bdaa",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
...motionSensorInnerCircle,
|
||||
backgroundColor: this.state.detected ? "#fe346e" : "#00bdaa",
|
||||
backgroundColor: this.state.detected ? '#fe346e' : '#00bdaa',
|
||||
}}
|
||||
>
|
||||
<Image style={motionSensorIcon} src="/img/motionSensorIcon.svg" />
|
||||
<span style={nameMotionStyle}>Motion Sensor</span>
|
||||
</div>
|
||||
>
|
||||
<Image style={motionSensorIcon} src="/img/motionSensorIcon.svg" />
|
||||
<span style={nameMotionStyle}>Motion Sensor</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={container}>
|
||||
{this.state.motion ? (
|
||||
<MotionSensor />
|
||||
) : (
|
||||
<React.Fragment>
|
||||
<>
|
||||
<CircularInput
|
||||
value={
|
||||
this.props.stateOrDevice.sensor === "LIGHT"
|
||||
this.props.stateOrDevice.sensor === 'LIGHT'
|
||||
? this.state.value / 2000
|
||||
: this.state.value / 100
|
||||
}
|
||||
|
@ -167,7 +165,7 @@ class Sensor extends Component {
|
|||
<CircularProgress
|
||||
strokeWidth="2rem"
|
||||
stroke={
|
||||
this.props.stateOrDevice.sensor === "TEMPERATURE"
|
||||
this.props.stateOrDevice.sensor === 'TEMPERATURE'
|
||||
? this.temperatureColor(this.state.value)
|
||||
: this.colors.progress
|
||||
}
|
||||
|
@ -185,7 +183,7 @@ class Sensor extends Component {
|
|||
fontWeight="bold"
|
||||
fill={this.colors.text}
|
||||
>
|
||||
{+(Math.round(this.state.value + "e+2") + "e-2")}
|
||||
{+(`${Math.round(`${this.state.value}e+2`)}e-2`)}
|
||||
{this.units}
|
||||
</text>
|
||||
<text
|
||||
|
@ -203,7 +201,7 @@ class Sensor extends Component {
|
|||
</text>
|
||||
</CircularInput>
|
||||
<Image style={iconSensorStyle} src={`/img/${this.icon}`} />
|
||||
</React.Fragment>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
|
|
@ -1,108 +1,108 @@
|
|||
export const style = {
|
||||
width: "10rem",
|
||||
height: "10rem",
|
||||
position: "absolute",
|
||||
top: "0",
|
||||
left: "0",
|
||||
width: '10rem',
|
||||
height: '10rem',
|
||||
position: 'absolute',
|
||||
top: '0',
|
||||
left: '0',
|
||||
};
|
||||
|
||||
export const container = {
|
||||
width: "10rem",
|
||||
height: "10rem",
|
||||
borderRadius: "100%",
|
||||
border: "none",
|
||||
position: "relative",
|
||||
width: '10rem',
|
||||
height: '10rem',
|
||||
borderRadius: '100%',
|
||||
border: 'none',
|
||||
position: 'relative',
|
||||
};
|
||||
|
||||
export const sensorText = {
|
||||
fill: "#3e99ff",
|
||||
fontSize: "1.2rem",
|
||||
fontFamily: "Lato",
|
||||
overflow: "hidden",
|
||||
whiteSpace: "nowrap",
|
||||
textOverflow: "ellipsis",
|
||||
userSelect: "none",
|
||||
fill: '#3e99ff',
|
||||
fontSize: '1.2rem',
|
||||
fontFamily: 'Lato',
|
||||
overflow: 'hidden',
|
||||
whiteSpace: 'nowrap',
|
||||
textOverflow: 'ellipsis',
|
||||
userSelect: 'none',
|
||||
};
|
||||
|
||||
export const valueStyle = {
|
||||
fill: "#3e99ff",
|
||||
fontSize: "2.4rem",
|
||||
fontFamily: "Lato",
|
||||
userSelect: "none",
|
||||
fill: '#3e99ff',
|
||||
fontSize: '2.4rem',
|
||||
fontFamily: 'Lato',
|
||||
userSelect: 'none',
|
||||
};
|
||||
|
||||
export const errorStyle = {
|
||||
fill: "#ff4050",
|
||||
fontSize: "1.5rem",
|
||||
fontFamily: "Lato",
|
||||
textShadow: "1px 1px 0.5px rgba(0, 0, 0, .2)",
|
||||
userSelect: "none",
|
||||
fill: '#ff4050',
|
||||
fontSize: '1.5rem',
|
||||
fontFamily: 'Lato',
|
||||
textShadow: '1px 1px 0.5px rgba(0, 0, 0, .2)',
|
||||
userSelect: 'none',
|
||||
};
|
||||
|
||||
export const motionSensorInnerCircle = {
|
||||
position: "absolute",
|
||||
top: "50%",
|
||||
left: "50%",
|
||||
transform: "translate(-50%, -50%)",
|
||||
width: "8rem",
|
||||
height: "8rem",
|
||||
borderRadius: "100%",
|
||||
border: "none",
|
||||
position: 'absolute',
|
||||
top: '50%',
|
||||
left: '50%',
|
||||
transform: 'translate(-50%, -50%)',
|
||||
width: '8rem',
|
||||
height: '8rem',
|
||||
borderRadius: '100%',
|
||||
border: 'none',
|
||||
};
|
||||
|
||||
export const motionSensorOuterCircle = {
|
||||
textAlign: "center",
|
||||
cursor: "pointer",
|
||||
position: "relative",
|
||||
width: "10rem",
|
||||
height: "10rem",
|
||||
borderRadius: "100%",
|
||||
border: "none",
|
||||
/*boxShadow: "3px 2px 10px 5px #ccc",*/
|
||||
textAlign: 'center',
|
||||
cursor: 'pointer',
|
||||
position: 'relative',
|
||||
width: '10rem',
|
||||
height: '10rem',
|
||||
borderRadius: '100%',
|
||||
border: 'none',
|
||||
/* boxShadow: "3px 2px 10px 5px #ccc", */
|
||||
};
|
||||
|
||||
export const nameMotionStyle = {
|
||||
position: "absolute",
|
||||
top: "50%",
|
||||
left: "50%",
|
||||
transform: "translateX(-50%)",
|
||||
fontSize: "1.2rem",
|
||||
overflow: "hidden",
|
||||
whiteSpace: "nowrap",
|
||||
textOverflow: "ellipsis",
|
||||
position: 'absolute',
|
||||
top: '50%',
|
||||
left: '50%',
|
||||
transform: 'translateX(-50%)',
|
||||
fontSize: '1.2rem',
|
||||
overflow: 'hidden',
|
||||
whiteSpace: 'nowrap',
|
||||
textOverflow: 'ellipsis',
|
||||
};
|
||||
|
||||
export const motionSensorIcon = {
|
||||
width: "2rem",
|
||||
height: "2rem",
|
||||
position: "absolute",
|
||||
top: "15%",
|
||||
left: "50%",
|
||||
transform: "translateX(-50%)",
|
||||
width: '2rem',
|
||||
height: '2rem',
|
||||
position: 'absolute',
|
||||
top: '15%',
|
||||
left: '50%',
|
||||
transform: 'translateX(-50%)',
|
||||
};
|
||||
export const temperatureSensorColors = {
|
||||
circle: "#323232",
|
||||
progress: "#ff1e56",
|
||||
text: "white",
|
||||
circle: '#323232',
|
||||
progress: '#ff1e56',
|
||||
text: 'white',
|
||||
};
|
||||
|
||||
export const lightSensorColors = {
|
||||
circle: "#000839",
|
||||
progress: "#ffa41b",
|
||||
text: "white",
|
||||
circle: '#000839',
|
||||
progress: '#ffa41b',
|
||||
text: 'white',
|
||||
};
|
||||
|
||||
export const humiditySensorColors = {
|
||||
circle: "#005082",
|
||||
progress: "#00a8cc",
|
||||
text: "white",
|
||||
circle: '#005082',
|
||||
progress: '#00a8cc',
|
||||
text: 'white',
|
||||
};
|
||||
|
||||
export const iconSensorStyle = {
|
||||
position: "absolute",
|
||||
top: "20%",
|
||||
left: "50%",
|
||||
transform: "translateX(-50%)",
|
||||
width: "2rem",
|
||||
height: "2rem",
|
||||
position: 'absolute',
|
||||
top: '20%',
|
||||
left: '50%',
|
||||
transform: 'translateX(-50%)',
|
||||
width: '2rem',
|
||||
height: '2rem',
|
||||
};
|
||||
|
|
|
@ -3,25 +3,25 @@
|
|||
SmartHut interface or by a switch.
|
||||
The smart plug also stores the total energy consumed while the plug is active, in terms of kilowatt-hours 2(kWh) .
|
||||
The user can reset this value.
|
||||
**/
|
||||
import React, { Component } from "react";
|
||||
import { BottomPanel, StyledDiv } from "./styleComponents";
|
||||
import { Image } from "semantic-ui-react";
|
||||
* */
|
||||
import React, { Component } from 'react';
|
||||
import { Image } from 'semantic-ui-react';
|
||||
import { connect } from 'react-redux';
|
||||
import { BottomPanel, StyledDiv } from './styleComponents';
|
||||
import {
|
||||
energyConsumedStyle,
|
||||
imageStyle,
|
||||
kwhStyle,
|
||||
nameStyle,
|
||||
} from "./SmartPlugStyle";
|
||||
import { RemoteService } from "../../../remote";
|
||||
import { connect } from "react-redux";
|
||||
import mapStateToProps from "../../../deviceProps";
|
||||
} from './SmartPlugStyle';
|
||||
import { RemoteService } from '../../../remote';
|
||||
import mapStateToProps from '../../../deviceProps';
|
||||
|
||||
class SmartPlug extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.iconOn = "/img/smart-plug.svg";
|
||||
this.iconOff = "/img/smart-plug-off.svg";
|
||||
this.iconOn = '/img/smart-plug.svg';
|
||||
this.iconOff = '/img/smart-plug-off.svg';
|
||||
}
|
||||
|
||||
get turnedOn() {
|
||||
|
@ -34,21 +34,19 @@ class SmartPlug extends Component {
|
|||
|
||||
onClickDevice = () => {
|
||||
const on = !this.turnedOn;
|
||||
if (this.props.tab === "Devices") {
|
||||
if (this.props.tab === 'Devices') {
|
||||
this.props
|
||||
.saveDevice({ ...this.props.stateOrDevice, on })
|
||||
.catch((err) => console.error("smart plug update error", err));
|
||||
.catch((err) => console.error('smart plug update error', err));
|
||||
} else {
|
||||
this.props.updateState(
|
||||
{ id: this.props.stateOrDevice.id, on: on },
|
||||
this.props.stateOrDevice.kind
|
||||
{ id: this.props.stateOrDevice.id, on },
|
||||
this.props.stateOrDevice.kind,
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
getIcon = () => {
|
||||
return this.turnedOn ? this.iconOn : this.iconOff;
|
||||
};
|
||||
getIcon = () => (this.turnedOn ? this.iconOn : this.iconOff);
|
||||
|
||||
render() {
|
||||
return (
|
||||
|
@ -59,8 +57,8 @@ class SmartPlug extends Component {
|
|||
<BottomPanel
|
||||
style={
|
||||
this.turnedOn
|
||||
? { backgroundColor: "#505bda" }
|
||||
: { backgroundColor: "#1a2849" }
|
||||
? { backgroundColor: '#505bda' }
|
||||
: { backgroundColor: '#1a2849' }
|
||||
}
|
||||
>
|
||||
<span style={energyConsumedStyle}>{this.energyConsumed}</span>
|
||||
|
|
|
@ -1,42 +1,42 @@
|
|||
export const energyConsumedStyle = {
|
||||
color: "white",
|
||||
fontSize: "1.3rem",
|
||||
position: "absolute",
|
||||
top: "20%",
|
||||
left: "50%",
|
||||
transform: "translateX(-50%)",
|
||||
userSelect: "none",
|
||||
color: 'white',
|
||||
fontSize: '1.3rem',
|
||||
position: 'absolute',
|
||||
top: '20%',
|
||||
left: '50%',
|
||||
transform: 'translateX(-50%)',
|
||||
userSelect: 'none',
|
||||
};
|
||||
|
||||
export const kwhStyle = {
|
||||
color: "white",
|
||||
fontSize: "1rem",
|
||||
position: "absolute",
|
||||
top: "50%",
|
||||
left: "50%",
|
||||
transform: "translateX(-50%)",
|
||||
userSelect: "none",
|
||||
color: 'white',
|
||||
fontSize: '1rem',
|
||||
position: 'absolute',
|
||||
top: '50%',
|
||||
left: '50%',
|
||||
transform: 'translateX(-50%)',
|
||||
userSelect: 'none',
|
||||
};
|
||||
|
||||
export const imageStyle = {
|
||||
width: "2rem",
|
||||
height: "auto",
|
||||
position: "absolute",
|
||||
top: "5%",
|
||||
left: "50%",
|
||||
transform: "translateX(-35%)",
|
||||
filter: "drop-shadow( 1px 1px 0.5px rgba(0, 0, 0, .25))",
|
||||
userSelect: "none",
|
||||
width: '2rem',
|
||||
height: 'auto',
|
||||
position: 'absolute',
|
||||
top: '5%',
|
||||
left: '50%',
|
||||
transform: 'translateX(-35%)',
|
||||
filter: 'drop-shadow( 1px 1px 0.5px rgba(0, 0, 0, .25))',
|
||||
userSelect: 'none',
|
||||
};
|
||||
|
||||
export const nameStyle = {
|
||||
color: "black",
|
||||
position: "absolute",
|
||||
top: "30%",
|
||||
left: "50%",
|
||||
transform: "translateX(-50%)",
|
||||
overflow: "hidden",
|
||||
whiteSpace: "nowrap",
|
||||
textOverflow: "ellipsis",
|
||||
userSelect: "none",
|
||||
color: 'black',
|
||||
position: 'absolute',
|
||||
top: '30%',
|
||||
left: '50%',
|
||||
transform: 'translateX(-50%)',
|
||||
overflow: 'hidden',
|
||||
whiteSpace: 'nowrap',
|
||||
textOverflow: 'ellipsis',
|
||||
userSelect: 'none',
|
||||
};
|
||||
|
|
|
@ -5,35 +5,33 @@
|
|||
* The user can change the state of a switch through the SmartHut interface.
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
import { BottomPanel, StyledDiv } from "./styleComponents";
|
||||
import { Image } from "semantic-ui-react";
|
||||
import { imageStyle, nameStyle, turnedOnStyle } from "./SwitchStyle";
|
||||
import { RemoteService } from "../../../remote";
|
||||
import { connect } from "react-redux";
|
||||
import mapStateToProps from "../../../deviceProps";
|
||||
import React, { Component } from 'react';
|
||||
import { Image } from 'semantic-ui-react';
|
||||
import { connect } from 'react-redux';
|
||||
import { BottomPanel, StyledDiv } from './styleComponents';
|
||||
import { imageStyle, nameStyle, turnedOnStyle } from './SwitchStyle';
|
||||
import { RemoteService } from '../../../remote';
|
||||
import mapStateToProps from '../../../deviceProps';
|
||||
|
||||
class Switch extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.iconOn = "/img/switchOn.svg";
|
||||
this.iconOff = "/img/switchOff.svg";
|
||||
this.iconOn = '/img/switchOn.svg';
|
||||
this.iconOff = '/img/switchOff.svg';
|
||||
}
|
||||
|
||||
get turnedOn() {
|
||||
return this.props.device.on;
|
||||
}
|
||||
|
||||
getIcon = () => {
|
||||
return this.turnedOn ? this.iconOn : this.iconOff;
|
||||
};
|
||||
getIcon = () => (this.turnedOn ? this.iconOn : this.iconOff);
|
||||
|
||||
onClickDevice = () => {
|
||||
const newOn = !this.turnedOn;
|
||||
const type = newOn ? "ON" : "OFF";
|
||||
const type = newOn ? 'ON' : 'OFF';
|
||||
this.props
|
||||
.switchOperate(this.props.id, type)
|
||||
.catch((err) => console.error("switch operate failed", err));
|
||||
.catch((err) => console.error('switch operate failed', err));
|
||||
};
|
||||
|
||||
render() {
|
||||
|
@ -45,11 +43,11 @@ class Switch extends Component {
|
|||
<BottomPanel
|
||||
style={
|
||||
this.turnedOn
|
||||
? { backgroundColor: "#505bda" }
|
||||
: { backgroundColor: "#1a2849" }
|
||||
? { backgroundColor: '#505bda' }
|
||||
: { backgroundColor: '#1a2849' }
|
||||
}
|
||||
>
|
||||
<span style={turnedOnStyle}>{this.turnedOn ? "ON" : "OFF"}</span>
|
||||
<span style={turnedOnStyle}>{this.turnedOn ? 'ON' : 'OFF'}</span>
|
||||
</BottomPanel>
|
||||
</StyledDiv>
|
||||
);
|
||||
|
|
|
@ -1,31 +1,31 @@
|
|||
export const imageStyle = {
|
||||
width: "2rem",
|
||||
height: "auto",
|
||||
position: "absolute",
|
||||
top: "5%",
|
||||
left: "50%",
|
||||
transform: "translateX(-50%)",
|
||||
userSelect: "none",
|
||||
width: '2rem',
|
||||
height: 'auto',
|
||||
position: 'absolute',
|
||||
top: '5%',
|
||||
left: '50%',
|
||||
transform: 'translateX(-50%)',
|
||||
userSelect: 'none',
|
||||
};
|
||||
|
||||
export const nameStyle = {
|
||||
color: "black",
|
||||
position: "absolute",
|
||||
top: "30%",
|
||||
left: "50%",
|
||||
transform: "translateX(-50%)",
|
||||
overflow: "hidden",
|
||||
whiteSpace: "nowrap",
|
||||
textOverflow: "ellipsis",
|
||||
userSelect: "none",
|
||||
color: 'black',
|
||||
position: 'absolute',
|
||||
top: '30%',
|
||||
left: '50%',
|
||||
transform: 'translateX(-50%)',
|
||||
overflow: 'hidden',
|
||||
whiteSpace: 'nowrap',
|
||||
textOverflow: 'ellipsis',
|
||||
userSelect: 'none',
|
||||
};
|
||||
|
||||
export const turnedOnStyle = {
|
||||
color: "white",
|
||||
fontSize: "1.3rem",
|
||||
position: "absolute",
|
||||
top: "20%",
|
||||
left: "50%",
|
||||
transform: "translateX(-50%)",
|
||||
userSelect: "none",
|
||||
color: 'white',
|
||||
fontSize: '1.3rem',
|
||||
position: 'absolute',
|
||||
top: '20%',
|
||||
left: '50%',
|
||||
transform: 'translateX(-50%)',
|
||||
userSelect: 'none',
|
||||
};
|
||||
|
|
|
@ -1,63 +1,63 @@
|
|||
export const container = {
|
||||
margin: "-1em 0",
|
||||
width: "15em",
|
||||
height: "15.5em",
|
||||
boxShadow: "5px 5px 5px 5px #DDD",
|
||||
borderRadius: "1em",
|
||||
backgroundColor: "white",
|
||||
transform: "translate(-2.5em, 0)",
|
||||
margin: '-1em 0',
|
||||
width: '15em',
|
||||
height: '15.5em',
|
||||
boxShadow: '5px 5px 5px 5px #DDD',
|
||||
borderRadius: '1em',
|
||||
backgroundColor: 'white',
|
||||
transform: 'translate(-2.5em, 0)',
|
||||
};
|
||||
|
||||
export const deviceName = {
|
||||
paddingTop: ".5rem",
|
||||
paddingLeft: "1rem",
|
||||
fontFamily: "Lato",
|
||||
fontSize: "1rem",
|
||||
fontWeight: "bold",
|
||||
paddingTop: '.5rem',
|
||||
paddingLeft: '1rem',
|
||||
fontFamily: 'Lato',
|
||||
fontSize: '1rem',
|
||||
fontWeight: 'bold',
|
||||
};
|
||||
|
||||
export const targetTemperature = {
|
||||
fontFamily: "Lato",
|
||||
marginTop: ".5rem",
|
||||
width: "100%",
|
||||
textAlign: "center",
|
||||
fontSize: "1.3rem",
|
||||
fontWeight: "bold",
|
||||
color: "#646464",
|
||||
fontFamily: 'Lato',
|
||||
marginTop: '.5rem',
|
||||
width: '100%',
|
||||
textAlign: 'center',
|
||||
fontSize: '1.3rem',
|
||||
fontWeight: 'bold',
|
||||
color: '#646464',
|
||||
};
|
||||
|
||||
export const slider = {
|
||||
width: "25rem",
|
||||
fontFamily: "Lato",
|
||||
position: "absolute",
|
||||
marginTop: "35%",
|
||||
marginLeft: "50%",
|
||||
transform: "translate(-50%,-50%)",
|
||||
width: '25rem',
|
||||
fontFamily: 'Lato',
|
||||
position: 'absolute',
|
||||
marginTop: '35%',
|
||||
marginLeft: '50%',
|
||||
transform: 'translate(-50%,-50%)',
|
||||
};
|
||||
|
||||
export const stateTagContainer = {
|
||||
textAlign: "center",
|
||||
position: "absolute",
|
||||
width: "10rem",
|
||||
height: "2rem",
|
||||
bottom: "-.25rem",
|
||||
left: "50%",
|
||||
transform: "translate(-50%,-50%)",
|
||||
backgroundColor: "#2b2",
|
||||
borderRadius: "50px",
|
||||
textAlign: 'center',
|
||||
position: 'absolute',
|
||||
width: '10rem',
|
||||
height: '2rem',
|
||||
bottom: '-.25rem',
|
||||
left: '50%',
|
||||
transform: 'translate(-50%,-50%)',
|
||||
backgroundColor: '#2b2',
|
||||
borderRadius: '50px',
|
||||
};
|
||||
|
||||
export const stateTag = {
|
||||
fontFamily: "Lato",
|
||||
fontSize: "1.2rem",
|
||||
lineHeight: "2rem",
|
||||
color: "white",
|
||||
textTransform: "uppercase",
|
||||
fontFamily: 'Lato',
|
||||
fontSize: '1.2rem',
|
||||
lineHeight: '2rem',
|
||||
color: 'white',
|
||||
textTransform: 'uppercase',
|
||||
};
|
||||
|
||||
export const toggle = {
|
||||
position: "absolute",
|
||||
top: ".7rem",
|
||||
right: "2.5rem",
|
||||
transform: "rotate(-360deg)",
|
||||
position: 'absolute',
|
||||
top: '.7rem',
|
||||
right: '2.5rem',
|
||||
transform: 'rotate(-360deg)',
|
||||
};
|
||||
|
|
|
@ -1,11 +1,11 @@
|
|||
import React, { Component } from "react";
|
||||
import { Checkbox, Icon } from "semantic-ui-react";
|
||||
import { RemoteService } from "../../../remote";
|
||||
import { connect } from "react-redux";
|
||||
import "./Thermostat.css";
|
||||
import Slider from "react-rangeslider";
|
||||
import "react-rangeslider/lib/index.css";
|
||||
import mapStateToProps from "../../../deviceProps";
|
||||
import React, { Component } from 'react';
|
||||
import { Checkbox, Icon } from 'semantic-ui-react';
|
||||
import { RemoteService } from '../../../remote';
|
||||
import { connect } from 'react-redux';
|
||||
import './Thermostat.css';
|
||||
import Slider from 'react-rangeslider';
|
||||
import 'react-rangeslider/lib/index.css';
|
||||
import mapStateToProps from '../../../deviceProps';
|
||||
|
||||
import {
|
||||
stateTag,
|
||||
|
@ -14,7 +14,7 @@ import {
|
|||
targetTemperature,
|
||||
toggle,
|
||||
stateTagContainer,
|
||||
} from "./ThermostatStyle";
|
||||
} from './ThermostatStyle';
|
||||
|
||||
class Thermostats extends Component {
|
||||
constructor(props) {
|
||||
|
@ -29,53 +29,53 @@ class Thermostats extends Component {
|
|||
}
|
||||
|
||||
setMode(mode) {
|
||||
//i came to the conclusion that is not possible to set mode.
|
||||
// i came to the conclusion that is not possible to set mode.
|
||||
// Good job Jacob (Claudio)
|
||||
//this.mode = "HEATING";
|
||||
// this.mode = "HEATING";
|
||||
const turnOn = mode;
|
||||
if (this.props.tab === "Devices") {
|
||||
if (this.props.tab === 'Devices') {
|
||||
this.props
|
||||
.saveDevice({ ...this.props.stateOrDevice, turnOn })
|
||||
.catch((err) => console.error("thermostat update error", err));
|
||||
.catch((err) => console.error('thermostat update error', err));
|
||||
} else {
|
||||
this.props.updateState(
|
||||
{ id: this.props.stateOrDevice.id, on: turnOn },
|
||||
this.props.stateOrDevice.kind
|
||||
this.props.stateOrDevice.kind,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
onClickDevice = () => {
|
||||
const on = !this.turnedOn;
|
||||
if (this.props.tab === "Devices") {
|
||||
if (this.props.tab === 'Devices') {
|
||||
this.props
|
||||
.saveDevice({ ...this.props.stateOrDevice, on })
|
||||
.catch((err) => console.error("thermostat update error", err));
|
||||
.catch((err) => console.error('thermostat update error', err));
|
||||
} else {
|
||||
this.props.updateState(
|
||||
{ id: this.props.stateOrDevice.id, on },
|
||||
this.props.stateOrDevice.kind
|
||||
this.props.stateOrDevice.kind,
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
saveTargetTemperature(targetTemperature) {
|
||||
const turn = this.props.stateOrDevice.mode !== "OFF";
|
||||
if (this.props.tab === "Devices") {
|
||||
const turn = this.props.stateOrDevice.mode !== 'OFF';
|
||||
if (this.props.tab === 'Devices') {
|
||||
this.props
|
||||
.saveDevice({
|
||||
...this.props.stateOrDevice,
|
||||
targetTemperature,
|
||||
turnOn: turn,
|
||||
})
|
||||
.catch((err) => console.error("thermostat update error", err));
|
||||
.catch((err) => console.error('thermostat update error', err));
|
||||
} else {
|
||||
this.props.updateState(
|
||||
{
|
||||
id: this.props.stateOrDevice.id,
|
||||
targetTemperature: targetTemperature,
|
||||
targetTemperature,
|
||||
},
|
||||
this.props.stateOrDevice.kind
|
||||
this.props.stateOrDevice.kind,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
@ -90,11 +90,11 @@ class Thermostats extends Component {
|
|||
|
||||
handleCheckbox = (val) => {
|
||||
const useExternalSensors = val;
|
||||
const turnOn = this.props.stateOrDevice.mode !== "OFF";
|
||||
if (this.props.tab === "Devices") {
|
||||
const turnOn = this.props.stateOrDevice.mode !== 'OFF';
|
||||
if (this.props.tab === 'Devices') {
|
||||
this.props
|
||||
.saveDevice({ ...this.props.stateOrDevice, useExternalSensors, turnOn })
|
||||
.catch((err) => console.error("thermostat update error", err));
|
||||
.catch((err) => console.error('thermostat update error', err));
|
||||
}
|
||||
};
|
||||
|
||||
|
@ -106,8 +106,8 @@ class Thermostats extends Component {
|
|||
<Checkbox
|
||||
disabled={this.props.disabled}
|
||||
checked={
|
||||
this.props.tab === "Devices"
|
||||
? this.props.device.mode !== "OFF"
|
||||
this.props.tab === 'Devices'
|
||||
? this.props.device.mode !== 'OFF'
|
||||
: this.props.stateOrDevice.on
|
||||
}
|
||||
toggle
|
||||
|
@ -117,13 +117,20 @@ class Thermostats extends Component {
|
|||
</h3>
|
||||
<hr />
|
||||
<div style={targetTemperature}>
|
||||
<Icon name="thermometer half" />{" "}
|
||||
{this.props.device.measuredTemperature} ºC <br />
|
||||
<Icon name="target" />{" "}
|
||||
{this.props.device.targetTemperature.toFixed(1)} ºC
|
||||
<Icon name="thermometer half" />
|
||||
{' '}
|
||||
{this.props.device.measuredTemperature}
|
||||
{' '}
|
||||
ºC
|
||||
<br />
|
||||
<Icon name="target" />
|
||||
{' '}
|
||||
{this.props.device.targetTemperature.toFixed(1)}
|
||||
{' '}
|
||||
ºC
|
||||
</div>
|
||||
{this.props.tab === "Devices" ? (
|
||||
<React.Fragment>
|
||||
{this.props.tab === 'Devices' ? (
|
||||
<>
|
||||
<Slider
|
||||
disabled={this.props.disabled}
|
||||
min={10}
|
||||
|
@ -136,7 +143,7 @@ class Thermostats extends Component {
|
|||
onChangeComplete={() => this.setTargetTemperature()}
|
||||
/>
|
||||
<Checkbox
|
||||
style={{ padding: "0 .7rem" }}
|
||||
style={{ padding: '0 .7rem' }}
|
||||
label="Use external sensors"
|
||||
name="external"
|
||||
toggle
|
||||
|
@ -144,16 +151,16 @@ class Thermostats extends Component {
|
|||
disabled={!this.props.tempSensorsInRoom}
|
||||
onChange={(e, val) => this.handleCheckbox(val.checked)}
|
||||
/>
|
||||
</React.Fragment>
|
||||
</>
|
||||
) : null}
|
||||
|
||||
<div style={stateTagContainer}>
|
||||
<span style={stateTag}>
|
||||
{this.props.tab !== "Scenes"
|
||||
{this.props.tab !== 'Scenes'
|
||||
? this.props.device.mode
|
||||
: this.props.stateOrDevice.on
|
||||
? "WILL TURN ON"
|
||||
: "WILL TURN OFF"}
|
||||
? 'WILL TURN ON'
|
||||
: 'WILL TURN OFF'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -164,13 +171,13 @@ class Thermostats extends Component {
|
|||
const mapStateToProps2 = (state, ownProps) => ({
|
||||
...mapStateToProps(state, ownProps),
|
||||
get tempSensorsInRoom() {
|
||||
if (state.active.activeTab !== "Devices") return false;
|
||||
if (state.active.activeTab !== 'Devices') return false;
|
||||
const room = state.rooms[state.devices[ownProps.id].roomId];
|
||||
if (!room) return false;
|
||||
const deviceIds = room.devices;
|
||||
const devices = [...deviceIds].map((id) => state.devices[id]);
|
||||
const sensors = devices.filter(
|
||||
(d) => d.kind === "sensor" && d.sensor === "TEMPERATURE"
|
||||
(d) => d.kind === 'sensor' && d.sensor === 'TEMPERATURE',
|
||||
);
|
||||
return sensors.length > 0;
|
||||
},
|
||||
|
@ -178,6 +185,6 @@ const mapStateToProps2 = (state, ownProps) => ({
|
|||
|
||||
const ThermostatContainer = connect(
|
||||
mapStateToProps2,
|
||||
RemoteService
|
||||
RemoteService,
|
||||
)(Thermostats);
|
||||
export default ThermostatContainer;
|
||||
|
|
|
@ -1,24 +1,24 @@
|
|||
export const LightDevice = {
|
||||
img: "/img/lightOff.svg",
|
||||
imgClick: "/img/lightOn.svg",
|
||||
img: '/img/lightOff.svg',
|
||||
imgClick: '/img/lightOn.svg',
|
||||
};
|
||||
|
||||
export const SmartPlugDevice = {
|
||||
img: "/img/smart-plug.svg",
|
||||
imgClick: "/img/smart-plug-off.svg",
|
||||
img: '/img/smart-plug.svg',
|
||||
imgClick: '/img/smart-plug-off.svg',
|
||||
};
|
||||
|
||||
export const TemperatureSensor = {
|
||||
type: "temperature_sensor",
|
||||
img: "",
|
||||
imgClick: "",
|
||||
units: "ºC",
|
||||
type: 'temperature_sensor',
|
||||
img: '',
|
||||
imgClick: '',
|
||||
units: 'ºC',
|
||||
};
|
||||
|
||||
export const deviceList = [
|
||||
"Light",
|
||||
"Dimmer",
|
||||
"Switcher",
|
||||
"Smart Plug",
|
||||
"Sensor",
|
||||
'Light',
|
||||
'Dimmer',
|
||||
'Switcher',
|
||||
'Smart Plug',
|
||||
'Sensor',
|
||||
];
|
||||
|
|
|
@ -1,13 +1,13 @@
|
|||
// vim: set ts=2 sw=2 et tw=80:
|
||||
|
||||
import React, { Component } from "react";
|
||||
import { StyledDivCamera } from "./styleComponents";
|
||||
import { Grid, Checkbox } from "semantic-ui-react";
|
||||
import { RemoteService } from "../../../remote";
|
||||
import { endpointURL } from "../../../endpoint";
|
||||
import { connect } from "react-redux";
|
||||
import VideocamModal from "./VideocamModal";
|
||||
import mapStateToProps from "../../../deviceProps";
|
||||
import React, { Component } from 'react';
|
||||
import { Grid, Checkbox } from 'semantic-ui-react';
|
||||
import { connect } from 'react-redux';
|
||||
import { StyledDivCamera } from './styleComponents';
|
||||
import { RemoteService } from '../../../remote';
|
||||
import { endpointURL } from '../../../endpoint';
|
||||
import VideocamModal from './VideocamModal';
|
||||
import mapStateToProps from '../../../deviceProps';
|
||||
|
||||
class Videocam extends Component {
|
||||
constructor(props) {
|
||||
|
@ -18,30 +18,24 @@ class Videocam extends Component {
|
|||
}
|
||||
|
||||
openModal = () => {
|
||||
this.setState((state) => {
|
||||
return { selectedVideo: true };
|
||||
});
|
||||
this.setState((state) => ({ selectedVideo: true }));
|
||||
};
|
||||
|
||||
closeModal = () => {
|
||||
this.setState((state) => {
|
||||
return { selectedVideo: undefined };
|
||||
});
|
||||
this.setState((state) => ({ selectedVideo: undefined }));
|
||||
};
|
||||
|
||||
setOnOff(onOff) {
|
||||
const turn = onOff;
|
||||
if (this.props.tab === "Devices" || this.props.tab === "Hosts") {
|
||||
if (this.props.tab === 'Devices' || this.props.tab === 'Hosts') {
|
||||
this.props
|
||||
.saveDevice({ ...this.props.device, on: turn })
|
||||
.then((res) =>
|
||||
turn ? this.refs.vidRef.play() : this.refs.vidRef.pause()
|
||||
)
|
||||
.catch((err) => console.error("videocamera update error", err));
|
||||
.then((res) => (turn ? this.refs.vidRef.play() : this.refs.vidRef.pause()))
|
||||
.catch((err) => console.error('videocamera update error', err));
|
||||
} else {
|
||||
this.props.updateState(
|
||||
{ id: this.props.stateOrDevice.id, on: turn },
|
||||
this.props.stateOrDevice.kind
|
||||
this.props.stateOrDevice.kind,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,5 +1,21 @@
|
|||
import React from "react";
|
||||
import Modal from "react-modal";
|
||||
import React from 'react';
|
||||
import Modal from 'react-modal';
|
||||
import { Button } from 'semantic-ui-react';
|
||||
|
||||
const modal = {
|
||||
opacity: 0,
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
transition: 'opacity 200ms ease-in-out',
|
||||
background: 'grey',
|
||||
color: 'white',
|
||||
maxWidth: '2rem',
|
||||
outline: 'none',
|
||||
padding: '2rem',
|
||||
textAlign: 'center',
|
||||
maxHeight: '50vh',
|
||||
};
|
||||
|
||||
const VideocamModal = (props) => (
|
||||
<Modal
|
||||
|
@ -13,7 +29,7 @@ const VideocamModal = (props) => (
|
|||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
backgroundColor: 'rgba(0,0,0,0.5)'
|
||||
backgroundColor: 'rgba(0,0,0,0.5)',
|
||||
},
|
||||
content: {
|
||||
position: 'absolute',
|
||||
|
@ -28,8 +44,8 @@ const VideocamModal = (props) => (
|
|||
borderRadius: '4px',
|
||||
outline: 'none',
|
||||
padding: '20px',
|
||||
backgroundColor: 'black'
|
||||
}
|
||||
backgroundColor: 'black',
|
||||
},
|
||||
}}
|
||||
>
|
||||
{props.selectedVideo && (
|
||||
|
|
|
@ -1,105 +1,105 @@
|
|||
import styled from "styled-components";
|
||||
import { useCircularInputContext } from "react-circular-input";
|
||||
import { ValueStyle } from "./DimmerStyle";
|
||||
import React from "react";
|
||||
import styled from 'styled-components';
|
||||
import { useCircularInputContext } from 'react-circular-input';
|
||||
import React from 'react';
|
||||
import { ValueStyle } from './DimmerStyle';
|
||||
|
||||
export const editButtonStyle = {
|
||||
position: "absolute",
|
||||
top: "0",
|
||||
right: "0",
|
||||
backgroundColor: "#505bda",
|
||||
borderRadius: "0 0 0 20px",
|
||||
border: "none",
|
||||
padding: ".4rem 1.2rem",
|
||||
outline: "none",
|
||||
color: "white",
|
||||
fontFamily: "Lato",
|
||||
textTransform: "uppercase",
|
||||
position: 'absolute',
|
||||
top: '0',
|
||||
right: '0',
|
||||
backgroundColor: '#505bda',
|
||||
borderRadius: '0 0 0 20px',
|
||||
border: 'none',
|
||||
padding: '.4rem 1.2rem',
|
||||
outline: 'none',
|
||||
color: 'white',
|
||||
fontFamily: 'Lato',
|
||||
textTransform: 'uppercase',
|
||||
};
|
||||
|
||||
export const panelStyle = {
|
||||
backgroundColor: "#fafafa",
|
||||
height: "85vh",
|
||||
padding: "0rem 3rem",
|
||||
color: "#000000",
|
||||
overflow: "auto",
|
||||
maxHeight: "75vh",
|
||||
backgroundColor: '#fafafa',
|
||||
height: '85vh',
|
||||
padding: '0rem 3rem',
|
||||
color: '#000000',
|
||||
overflow: 'auto',
|
||||
maxHeight: '75vh',
|
||||
};
|
||||
|
||||
export const mobilePanelStyle = {
|
||||
backgroundColor: "#fafafa",
|
||||
minHeight: "100vh",
|
||||
padding: "0rem 3rem",
|
||||
color: "#000000",
|
||||
backgroundColor: '#fafafa',
|
||||
minHeight: '100vh',
|
||||
padding: '0rem 3rem',
|
||||
color: '#000000',
|
||||
};
|
||||
|
||||
export const editModeStyle = {
|
||||
position: "absolute",
|
||||
top: "15%",
|
||||
right: "0",
|
||||
width: "1.5rem",
|
||||
height: "1.5rem",
|
||||
backgroundColor: "black",
|
||||
borderRadius: "100%",
|
||||
zIndex: "1000",
|
||||
cursor: "pointer",
|
||||
position: 'absolute',
|
||||
top: '15%',
|
||||
right: '0',
|
||||
width: '1.5rem',
|
||||
height: '1.5rem',
|
||||
backgroundColor: 'black',
|
||||
borderRadius: '100%',
|
||||
zIndex: '1000',
|
||||
cursor: 'pointer',
|
||||
};
|
||||
|
||||
export const editModeStyleLeft = {
|
||||
position: "absolute",
|
||||
top: "15%",
|
||||
left: "0",
|
||||
width: "1.5rem",
|
||||
height: "1.5rem",
|
||||
backgroundColor: "white",
|
||||
borderRadius: "100%",
|
||||
zIndex: "1000",
|
||||
cursor: "pointer",
|
||||
position: 'absolute',
|
||||
top: '15%',
|
||||
left: '0',
|
||||
width: '1.5rem',
|
||||
height: '1.5rem',
|
||||
backgroundColor: 'white',
|
||||
borderRadius: '100%',
|
||||
zIndex: '1000',
|
||||
cursor: 'pointer',
|
||||
};
|
||||
|
||||
export const editModeIconStyle = {
|
||||
position: "absolute",
|
||||
top: "50%",
|
||||
left: "50%",
|
||||
transform: "translate(-50%, -50%)",
|
||||
width: "0.75rem",
|
||||
height: "0.75rem",
|
||||
borderRadius: "20%",
|
||||
zIndex: "101",
|
||||
position: 'absolute',
|
||||
top: '50%',
|
||||
left: '50%',
|
||||
transform: 'translate(-50%, -50%)',
|
||||
width: '0.75rem',
|
||||
height: '0.75rem',
|
||||
borderRadius: '20%',
|
||||
zIndex: '101',
|
||||
};
|
||||
|
||||
export const iconStyle = {
|
||||
width: "3.5rem",
|
||||
height: "auto",
|
||||
position: "absolute",
|
||||
top: "10%",
|
||||
left: "50%",
|
||||
transform: "translateX(-50%)",
|
||||
userSelect: "none",
|
||||
width: '3.5rem',
|
||||
height: 'auto',
|
||||
position: 'absolute',
|
||||
top: '10%',
|
||||
left: '50%',
|
||||
transform: 'translateX(-50%)',
|
||||
userSelect: 'none',
|
||||
};
|
||||
export const nameStyle = {
|
||||
position: "absolute",
|
||||
top: "50%",
|
||||
left: "50%",
|
||||
transform: "translateX(-50%)",
|
||||
position: 'absolute',
|
||||
top: '50%',
|
||||
left: '50%',
|
||||
transform: 'translateX(-50%)',
|
||||
};
|
||||
|
||||
export const formStyle = {
|
||||
position: "absolute",
|
||||
zIndex: "1000",
|
||||
width: "80rem",
|
||||
height: "10rem",
|
||||
padding: "1rem",
|
||||
margin: "1rem",
|
||||
borderRadius: "10%",
|
||||
boxShadow: "1px 1px 5px 2px #5d5d5d",
|
||||
backgroundColor: "#3e99ff",
|
||||
position: 'absolute',
|
||||
zIndex: '1000',
|
||||
width: '80rem',
|
||||
height: '10rem',
|
||||
padding: '1rem',
|
||||
margin: '1rem',
|
||||
borderRadius: '10%',
|
||||
boxShadow: '1px 1px 5px 2px #5d5d5d',
|
||||
backgroundColor: '#3e99ff',
|
||||
};
|
||||
|
||||
export const addDeviceFormStyle = {
|
||||
maxWidth: "400px",
|
||||
background: "#3e99ff",
|
||||
paddingRight: "5rem",
|
||||
maxWidth: '400px',
|
||||
background: '#3e99ff',
|
||||
paddingRight: '5rem',
|
||||
};
|
||||
|
||||
export const StyledDiv = styled.div`
|
||||
|
|
|
@ -1,24 +1,24 @@
|
|||
function getStateOrDevice(state, ownProps) {
|
||||
switch (state.active.activeTab) {
|
||||
case "Devices":
|
||||
case 'Devices':
|
||||
return state.devices[ownProps.id];
|
||||
case "Scenes":
|
||||
case 'Scenes':
|
||||
return state.sceneStates[ownProps.id];
|
||||
case "Hosts":
|
||||
case 'Hosts':
|
||||
return state.hostDevices[ownProps.hostId][ownProps.id];
|
||||
default:
|
||||
throw new Error(
|
||||
`stateOrDevice has no value in tab "${state.active.activeTab}"`
|
||||
`stateOrDevice has no value in tab "${state.active.activeTab}"`,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function getDevice(state, ownProps) {
|
||||
switch (state.active.activeTab) {
|
||||
case "Scenes":
|
||||
case 'Scenes':
|
||||
return state.devices[getStateOrDevice(state, ownProps).deviceId];
|
||||
case "Devices":
|
||||
case "Hosts":
|
||||
case 'Devices':
|
||||
case 'Hosts':
|
||||
return getStateOrDevice(state, ownProps);
|
||||
default:
|
||||
throw new Error(`device has no value in tab "${state.active.activeTab}"`);
|
||||
|
@ -27,18 +27,18 @@ function getDevice(state, ownProps) {
|
|||
|
||||
function getRoomName(state, ownProps) {
|
||||
switch (state.active.activeTab) {
|
||||
case "Scenes":
|
||||
case "Devices":
|
||||
case 'Scenes':
|
||||
case 'Devices':
|
||||
return (state.rooms[getDevice(state, ownProps).roomId] || {}).name;
|
||||
case "Hosts":
|
||||
case 'Hosts':
|
||||
const hostRooms = state.hostRooms[ownProps.hostId];
|
||||
if (!hostRooms) return "";
|
||||
if (!hostRooms) return '';
|
||||
const room = hostRooms[getDevice(state, ownProps).roomId];
|
||||
if (!room) return "";
|
||||
if (!room) return '';
|
||||
return room.name;
|
||||
default:
|
||||
throw new Error(
|
||||
`room name has no value in tab "${state.active.activeTab}"`
|
||||
`room name has no value in tab "${state.active.activeTab}"`,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
@ -60,9 +60,9 @@ export default function mapStateToProps(state, ownProps) {
|
|||
},
|
||||
get disabled() {
|
||||
return (
|
||||
ownProps.tab === "Hosts" &&
|
||||
["dimmableLight", "light"].indexOf(getDevice(state, ownProps).kind) ===
|
||||
-1
|
||||
ownProps.tab === 'Hosts'
|
||||
&& ['dimmableLight', 'light'].indexOf(getDevice(state, ownProps).kind)
|
||||
=== -1
|
||||
);
|
||||
},
|
||||
};
|
||||
|
|
|
@ -3,17 +3,17 @@
|
|||
* @returns {String} endpoint URL
|
||||
*/
|
||||
export function endpointURL() {
|
||||
return window.BACKEND_URL !== "__BACKEND_URL__"
|
||||
return window.BACKEND_URL !== '__BACKEND_URL__'
|
||||
? window.BACKEND_URL
|
||||
: "http://localhost:8080";
|
||||
: 'http://localhost:8080';
|
||||
}
|
||||
|
||||
export function socketURL(token) {
|
||||
const httpURL = new URL(endpointURL());
|
||||
const isSecure = httpURL.protocol === "https:";
|
||||
const protocol = isSecure ? "wss:" : "ws:";
|
||||
const isSecure = httpURL.protocol === 'https:';
|
||||
const protocol = isSecure ? 'wss:' : 'ws:';
|
||||
const port = httpURL.port || (isSecure ? 443 : 80);
|
||||
const url = `${protocol}//${httpURL.hostname}:${port}/sensor-socket?token=${token}`;
|
||||
console.log("socket url: ", url);
|
||||
console.log('socket url: ', url);
|
||||
return url;
|
||||
}
|
||||
|
|
|
@ -1,9 +1,9 @@
|
|||
import React from "react";
|
||||
import ReactDOM from "react-dom";
|
||||
import App from "./App";
|
||||
import * as serviceWorker from "./serviceWorker";
|
||||
import { Provider } from "react-redux";
|
||||
import smartHutStore from "./store";
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import { Provider } from 'react-redux';
|
||||
import App from './App';
|
||||
import * as serviceWorker from './serviceWorker';
|
||||
import smartHutStore from './store';
|
||||
|
||||
const index = (
|
||||
<Provider store={smartHutStore}>
|
||||
|
@ -11,5 +11,5 @@ const index = (
|
|||
</Provider>
|
||||
);
|
||||
|
||||
ReactDOM.render(index, document.getElementById("root"));
|
||||
ReactDOM.render(index, document.getElementById('root'));
|
||||
serviceWorker.unregister();
|
||||
|
|
File diff suppressed because it is too large
Load diff
|
@ -11,17 +11,17 @@
|
|||
// opt-in, read https://bit.ly/CRA-PWA
|
||||
|
||||
const isLocalhost = Boolean(
|
||||
window.location.hostname === "localhost" ||
|
||||
window.location.hostname === 'localhost'
|
||||
// [::1] is the IPv6 localhost address.
|
||||
window.location.hostname === "[::1]" ||
|
||||
|| window.location.hostname === '[::1]'
|
||||
// 127.0.0.0/8 are considered localhost for IPv4.
|
||||
window.location.hostname.match(
|
||||
/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
|
||||
)
|
||||
|| window.location.hostname.match(
|
||||
/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/,
|
||||
),
|
||||
);
|
||||
|
||||
export function register(config) {
|
||||
if (process.env.NODE_ENV === "production" && "serviceWorker" in navigator) {
|
||||
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
|
||||
// The URL constructor is available in all browsers that support SW.
|
||||
const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
|
||||
if (publicUrl.origin !== window.location.origin) {
|
||||
|
@ -31,7 +31,7 @@ export function register(config) {
|
|||
return;
|
||||
}
|
||||
|
||||
window.addEventListener("load", () => {
|
||||
window.addEventListener('load', () => {
|
||||
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
|
||||
|
||||
if (isLocalhost) {
|
||||
|
@ -42,8 +42,8 @@ export function register(config) {
|
|||
// service worker/PWA documentation.
|
||||
navigator.serviceWorker.ready.then(() => {
|
||||
console.log(
|
||||
"This web app is being served cache-first by a service " +
|
||||
"worker. To learn more, visit https://bit.ly/CRA-PWA"
|
||||
'This web app is being served cache-first by a service '
|
||||
+ 'worker. To learn more, visit https://bit.ly/CRA-PWA',
|
||||
);
|
||||
});
|
||||
} else {
|
||||
|
@ -64,14 +64,14 @@ function registerValidSW(swUrl, config) {
|
|||
return;
|
||||
}
|
||||
installingWorker.onstatechange = () => {
|
||||
if (installingWorker.state === "installed") {
|
||||
if (installingWorker.state === 'installed') {
|
||||
if (navigator.serviceWorker.controller) {
|
||||
// At this point, the updated precached content has been fetched,
|
||||
// but the previous service worker will still serve the older
|
||||
// content until all client tabs are closed.
|
||||
console.log(
|
||||
"New content is available and will be used when all " +
|
||||
"tabs for this page are closed. See https://bit.ly/CRA-PWA."
|
||||
'New content is available and will be used when all '
|
||||
+ 'tabs for this page are closed. See https://bit.ly/CRA-PWA.',
|
||||
);
|
||||
|
||||
// Execute callback
|
||||
|
@ -82,7 +82,7 @@ function registerValidSW(swUrl, config) {
|
|||
// At this point, everything has been precached.
|
||||
// It's the perfect time to display a
|
||||
// "Content is cached for offline use." message.
|
||||
console.log("Content is cached for offline use.");
|
||||
console.log('Content is cached for offline use.');
|
||||
|
||||
// Execute callback
|
||||
if (config && config.onSuccess) {
|
||||
|
@ -94,21 +94,21 @@ function registerValidSW(swUrl, config) {
|
|||
};
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("Error during service worker registration:", error);
|
||||
console.error('Error during service worker registration:', error);
|
||||
});
|
||||
}
|
||||
|
||||
function checkValidServiceWorker(swUrl, config) {
|
||||
// Check if the service worker can be found. If it can't reload the page.
|
||||
fetch(swUrl, {
|
||||
headers: { "Service-Worker": "script" },
|
||||
headers: { 'Service-Worker': 'script' },
|
||||
})
|
||||
.then((response) => {
|
||||
// Ensure service worker exists, and that we really are getting a JS file.
|
||||
const contentType = response.headers.get("content-type");
|
||||
const contentType = response.headers.get('content-type');
|
||||
if (
|
||||
response.status === 404 ||
|
||||
(contentType != null && contentType.indexOf("javascript") === -1)
|
||||
response.status === 404
|
||||
|| (contentType != null && contentType.indexOf('javascript') === -1)
|
||||
) {
|
||||
// No service worker found. Probably a different app. Reload the page.
|
||||
navigator.serviceWorker.ready.then((registration) => {
|
||||
|
@ -123,13 +123,13 @@ function checkValidServiceWorker(swUrl, config) {
|
|||
})
|
||||
.catch(() => {
|
||||
console.log(
|
||||
"No internet connection found. App is running in offline mode."
|
||||
'No internet connection found. App is running in offline mode.',
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
export function unregister() {
|
||||
if ("serviceWorker" in navigator) {
|
||||
if ('serviceWorker' in navigator) {
|
||||
navigator.serviceWorker.ready
|
||||
.then((registration) => {
|
||||
registration.unregister();
|
||||
|
|
|
@ -2,4 +2,4 @@
|
|||
// allows you to do things like:
|
||||
// expect(element).toHaveTextContent(/react/i)
|
||||
// learn more: https://github.com/testing-library/jest-dom
|
||||
import "@testing-library/jest-dom/extend-expect";
|
||||
import '@testing-library/jest-dom/extend-expect';
|
||||
|
|
|
@ -1,11 +1,12 @@
|
|||
import { createStore, applyMiddleware, compose } from "redux";
|
||||
import thunk from "redux-thunk";
|
||||
import update from "immutability-helper";
|
||||
import reduxWebSocket, { connect } from "@giantmachines/redux-websocket";
|
||||
import { socketURL } from "./endpoint";
|
||||
import { createStore, applyMiddleware, compose } from 'redux';
|
||||
import thunk from 'redux-thunk';
|
||||
import update from 'immutability-helper';
|
||||
import reduxWebSocket, { connect } from '@giantmachines/redux-websocket';
|
||||
import { socketURL } from './endpoint';
|
||||
|
||||
function reducer(previousState, action) {
|
||||
let newState, change;
|
||||
let newState; let
|
||||
change;
|
||||
|
||||
const createOrUpdateRoom = (room) => {
|
||||
if (!newState.rooms[room.id]) {
|
||||
|
@ -89,21 +90,21 @@ function reducer(previousState, action) {
|
|||
};
|
||||
|
||||
switch (action.type) {
|
||||
case "LOGIN_UPDATE":
|
||||
case 'LOGIN_UPDATE':
|
||||
newState = update(previousState, { login: { $set: action.login } });
|
||||
break;
|
||||
case "USER_INFO_UPDATE":
|
||||
case 'USER_INFO_UPDATE':
|
||||
newState = update(previousState, {
|
||||
userInfo: { $set: action.userInfo },
|
||||
});
|
||||
break;
|
||||
case "ROOMS_UPDATE":
|
||||
case 'ROOMS_UPDATE':
|
||||
newState = previousState;
|
||||
for (const room of action.rooms) {
|
||||
createOrUpdateRoom(room);
|
||||
}
|
||||
break;
|
||||
case "HOST_ROOMS_UPDATE":
|
||||
case 'HOST_ROOMS_UPDATE':
|
||||
change = {
|
||||
hostRooms: {
|
||||
[action.hostId]: { $set: {} },
|
||||
|
@ -117,13 +118,13 @@ function reducer(previousState, action) {
|
|||
|
||||
newState = update(previousState, change);
|
||||
break;
|
||||
case "SCENES_UPDATE":
|
||||
case 'SCENES_UPDATE':
|
||||
newState = previousState;
|
||||
for (const scene of action.scenes) {
|
||||
createOrUpdateScene(scene);
|
||||
}
|
||||
break;
|
||||
case "HOST_SCENES_UPDATE":
|
||||
case 'HOST_SCENES_UPDATE':
|
||||
change = {
|
||||
hostScenes: {
|
||||
[action.hostId]: { $set: action.scenes }, // stored as array
|
||||
|
@ -132,8 +133,8 @@ function reducer(previousState, action) {
|
|||
|
||||
newState = update(previousState, change);
|
||||
break;
|
||||
case "STATES_UPDATE":
|
||||
//console.log(action.sceneStates);
|
||||
case 'STATES_UPDATE':
|
||||
// console.log(action.sceneStates);
|
||||
change = null;
|
||||
|
||||
// if scene is given, delete all sceneStates in that scene
|
||||
|
@ -169,11 +170,9 @@ function reducer(previousState, action) {
|
|||
}
|
||||
|
||||
if (sceneState.sceneId in newState.scenes) {
|
||||
change.scenes[sceneState.sceneId] =
|
||||
change.scenes[sceneState.sceneId] || {};
|
||||
change.scenes[sceneState.sceneId].sceneStates =
|
||||
change.scenes[sceneState.sceneId].sceneStates || {};
|
||||
const sceneStates = change.scenes[sceneState.sceneId].sceneStates;
|
||||
change.scenes[sceneState.sceneId] = change.scenes[sceneState.sceneId] || {};
|
||||
change.scenes[sceneState.sceneId].sceneStates = change.scenes[sceneState.sceneId].sceneStates || {};
|
||||
const { sceneStates } = change.scenes[sceneState.sceneId];
|
||||
sceneStates.$add = sceneStates.$add || [];
|
||||
sceneStates.$add.push(sceneState.id);
|
||||
} else {
|
||||
|
@ -186,7 +185,7 @@ function reducer(previousState, action) {
|
|||
};
|
||||
} else {
|
||||
change.pendingJoins.scenes[sceneState.sceneId].$set.add(
|
||||
sceneState.id
|
||||
sceneState.id,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
@ -195,7 +194,7 @@ function reducer(previousState, action) {
|
|||
newState = update(newState, change);
|
||||
|
||||
break;
|
||||
case "DEVICES_UPDATE":
|
||||
case 'DEVICES_UPDATE':
|
||||
change = null;
|
||||
|
||||
// if room is given, delete all devices in that room
|
||||
|
@ -225,7 +224,7 @@ function reducer(previousState, action) {
|
|||
for (const device of action.devices) {
|
||||
if (!previousState.devices[device.id]) continue;
|
||||
change.devices.$unset.push(device.id);
|
||||
const roomId = previousState.devices[device.id].roomId;
|
||||
const { roomId } = previousState.devices[device.id];
|
||||
|
||||
if (roomId in previousState.rooms) {
|
||||
change.rooms[roomId] = change.rooms[roomId] || {
|
||||
|
@ -265,9 +264,8 @@ function reducer(previousState, action) {
|
|||
|
||||
if (device.roomId in newState.rooms) {
|
||||
change.rooms[device.roomId] = change.rooms[device.roomId] || {};
|
||||
change.rooms[device.roomId].devices =
|
||||
change.rooms[device.roomId].devices || {};
|
||||
const devices = change.rooms[device.roomId].devices;
|
||||
change.rooms[device.roomId].devices = change.rooms[device.roomId].devices || {};
|
||||
const { devices } = change.rooms[device.roomId];
|
||||
devices.$add = devices.$add || [];
|
||||
devices.$add.push(device.id);
|
||||
} else {
|
||||
|
@ -286,14 +284,13 @@ function reducer(previousState, action) {
|
|||
|
||||
newState = update(newState, change);
|
||||
break;
|
||||
case "HOST_DEVICES_UPDATE":
|
||||
case 'HOST_DEVICES_UPDATE':
|
||||
newState = action.partial
|
||||
? previousState
|
||||
: update(previousState, {
|
||||
hostDevices: { [action.hostId]: { $set: {} } },
|
||||
});
|
||||
newState.hostDevices[action.hostId] =
|
||||
newState.hostDevices[action.hostId] || {};
|
||||
newState.hostDevices[action.hostId] = newState.hostDevices[action.hostId] || {};
|
||||
change = {
|
||||
hostDevices: {
|
||||
[action.hostId]: {},
|
||||
|
@ -307,7 +304,7 @@ function reducer(previousState, action) {
|
|||
|
||||
newState = update(newState, change);
|
||||
break;
|
||||
case "AUTOMATION_UPDATE":
|
||||
case 'AUTOMATION_UPDATE':
|
||||
const automations = {};
|
||||
for (const automation of action.automations) {
|
||||
automations[automation.id] = automation;
|
||||
|
@ -318,15 +315,15 @@ function reducer(previousState, action) {
|
|||
};
|
||||
newState = update(previousState, change);
|
||||
break;
|
||||
case "ROOM_SAVE":
|
||||
case 'ROOM_SAVE':
|
||||
newState = previousState;
|
||||
createOrUpdateRoom(action.room);
|
||||
break;
|
||||
case "SCENE_SAVE":
|
||||
case 'SCENE_SAVE':
|
||||
newState = previousState;
|
||||
createOrUpdateScene(action.scene);
|
||||
break;
|
||||
case "DEVICE_SAVE":
|
||||
case 'DEVICE_SAVE':
|
||||
change = {
|
||||
devices: { [action.device.id]: { $set: action.device } },
|
||||
};
|
||||
|
@ -350,7 +347,7 @@ function reducer(previousState, action) {
|
|||
}
|
||||
newState = update(previousState, change);
|
||||
break;
|
||||
case "HOST_DEVICE_SAVE":
|
||||
case 'HOST_DEVICE_SAVE':
|
||||
change = {
|
||||
hostDevices: {
|
||||
[action.hostId]: {
|
||||
|
@ -362,7 +359,7 @@ function reducer(previousState, action) {
|
|||
};
|
||||
newState = update(previousState, change);
|
||||
break;
|
||||
case "HOST_DEVICES_DELETE":
|
||||
case 'HOST_DEVICES_DELETE':
|
||||
change = {
|
||||
hostDevices: {
|
||||
[action.hostId]: {
|
||||
|
@ -373,7 +370,7 @@ function reducer(previousState, action) {
|
|||
newState = update(previousState, change);
|
||||
break;
|
||||
|
||||
case "AUTOMATION_SAVE":
|
||||
case 'AUTOMATION_SAVE':
|
||||
change = {
|
||||
automations: {
|
||||
[action.automation.id]: { $set: action.automation },
|
||||
|
@ -384,7 +381,7 @@ function reducer(previousState, action) {
|
|||
|
||||
break;
|
||||
|
||||
case "STATE_SAVE":
|
||||
case 'STATE_SAVE':
|
||||
change = {
|
||||
sceneStates: {
|
||||
[action.sceneState.id]: { $set: action.sceneState },
|
||||
|
@ -410,7 +407,7 @@ function reducer(previousState, action) {
|
|||
}
|
||||
newState = update(previousState, change);
|
||||
break;
|
||||
case "ROOM_DELETE":
|
||||
case 'ROOM_DELETE':
|
||||
if (!(action.roomId in previousState.rooms)) {
|
||||
console.warn(`Room to delete ${action.roomId} does not exist`);
|
||||
break;
|
||||
|
@ -434,14 +431,14 @@ function reducer(previousState, action) {
|
|||
newState = update(previousState, change);
|
||||
break;
|
||||
|
||||
case "AUTOMATION_DELETE":
|
||||
case 'AUTOMATION_DELETE':
|
||||
change = {
|
||||
automations: { $unset: [action.id] },
|
||||
};
|
||||
|
||||
newState = update(previousState, change);
|
||||
break;
|
||||
case "SCENE_DELETE":
|
||||
case 'SCENE_DELETE':
|
||||
if (!(action.sceneId in previousState.scenes)) {
|
||||
console.warn(`Scene to delete ${action.sceneId} does not exist`);
|
||||
break;
|
||||
|
@ -464,7 +461,7 @@ function reducer(previousState, action) {
|
|||
|
||||
newState = update(previousState, change);
|
||||
break;
|
||||
case "STATE_DELETE":
|
||||
case 'STATE_DELETE':
|
||||
if (!(action.stateId in previousState.sceneStates)) {
|
||||
console.warn(`State to delete ${action.stateId} does not exist`);
|
||||
break;
|
||||
|
@ -487,7 +484,7 @@ function reducer(previousState, action) {
|
|||
newState = update(previousState, change);
|
||||
break;
|
||||
|
||||
case "DEVICE_DELETE":
|
||||
case 'DEVICE_DELETE':
|
||||
if (!(action.deviceId in previousState.devices)) {
|
||||
console.warn(`Device to delete ${action.deviceId} does not exist`);
|
||||
break;
|
||||
|
@ -507,10 +504,10 @@ function reducer(previousState, action) {
|
|||
|
||||
newState = update(previousState, change);
|
||||
break;
|
||||
case "LOGOUT":
|
||||
case 'LOGOUT':
|
||||
newState = update(initState, {});
|
||||
break;
|
||||
case "SET_ACTIVE":
|
||||
case 'SET_ACTIVE':
|
||||
newState = update(previousState, {
|
||||
active: {
|
||||
[action.key]: {
|
||||
|
@ -519,17 +516,16 @@ function reducer(previousState, action) {
|
|||
},
|
||||
});
|
||||
break;
|
||||
case "REDUX_WEBSOCKET::MESSAGE":
|
||||
case 'REDUX_WEBSOCKET::MESSAGE':
|
||||
const allDevices = JSON.parse(action.payload.message);
|
||||
const devices = allDevices.filter(
|
||||
(d) =>
|
||||
(d.fromHostId === null || d.fromHostId === undefined) && !d.deleted
|
||||
(d) => (d.fromHostId === null || d.fromHostId === undefined) && !d.deleted,
|
||||
);
|
||||
const hostDevicesMapByHostId = allDevices
|
||||
.filter((d) => d.fromHostId)
|
||||
.reduce((a, e) => {
|
||||
const hostId = e.fromHostId;
|
||||
//delete e.fromHostId;
|
||||
// delete e.fromHostId;
|
||||
a[hostId] = a[hostId] || { updated: [], deletedIds: [] };
|
||||
if (e.deleted) {
|
||||
a[hostId].deletedIds.push(e.id);
|
||||
|
@ -539,21 +535,22 @@ function reducer(previousState, action) {
|
|||
return a;
|
||||
}, {});
|
||||
newState = reducer(previousState, {
|
||||
type: "DEVICES_UPDATE",
|
||||
type: 'DEVICES_UPDATE',
|
||||
partial: true,
|
||||
devices,
|
||||
});
|
||||
for (const hostId in hostDevicesMapByHostId) {
|
||||
if (hostDevicesMapByHostId[hostId].updated.length > 0)
|
||||
newState = reducer(newState, {
|
||||
type: "HOST_DEVICES_UPDATE",
|
||||
if (hostDevicesMapByHostId[hostId].updated.length > 0) {
|
||||
newState = reducer(newState, {
|
||||
type: 'HOST_DEVICES_UPDATE',
|
||||
devices: hostDevicesMapByHostId[hostId].updated,
|
||||
partial: true,
|
||||
hostId,
|
||||
});
|
||||
}
|
||||
if (hostDevicesMapByHostId[hostId].deletedIds.length > 0) {
|
||||
newState = reducer(newState, {
|
||||
type: "HOST_DEVICES_DELETE",
|
||||
type: 'HOST_DEVICES_DELETE',
|
||||
deviceIds: hostDevicesMapByHostId[hostId].deletedIds,
|
||||
partial: true,
|
||||
hostId,
|
||||
|
@ -561,7 +558,7 @@ function reducer(previousState, action) {
|
|||
}
|
||||
}
|
||||
break;
|
||||
case "HG_UPDATE":
|
||||
case 'HG_UPDATE':
|
||||
newState = update(previousState, {
|
||||
[action.key]: { $set: action.value },
|
||||
});
|
||||
|
@ -581,7 +578,7 @@ const initState = {
|
|||
},
|
||||
active: {
|
||||
activeRoom: -1,
|
||||
activeTab: "Devices",
|
||||
activeTab: 'Devices',
|
||||
activeScene: -1,
|
||||
activeAutomation: -1,
|
||||
activeHost: -1,
|
||||
|
@ -613,8 +610,8 @@ const initState = {
|
|||
};
|
||||
|
||||
function createSmartHutStore() {
|
||||
const token = localStorage.getItem("token");
|
||||
const exp = localStorage.getItem("exp");
|
||||
const token = localStorage.getItem('token');
|
||||
const exp = localStorage.getItem('exp');
|
||||
|
||||
const initialState = update(initState, {
|
||||
login: {
|
||||
|
@ -624,15 +621,15 @@ function createSmartHutStore() {
|
|||
});
|
||||
|
||||
if (!initialState.login.loggedIn) {
|
||||
localStorage.removeItem("token");
|
||||
localStorage.removeItem("exp");
|
||||
localStorage.removeItem('token');
|
||||
localStorage.removeItem('exp');
|
||||
initialState.login.token = null;
|
||||
}
|
||||
|
||||
const store = createStore(
|
||||
reducer,
|
||||
initialState,
|
||||
compose(applyMiddleware(thunk), applyMiddleware(reduxWebSocket()))
|
||||
compose(applyMiddleware(thunk), applyMiddleware(reduxWebSocket())),
|
||||
);
|
||||
if (initialState.login.loggedIn) {
|
||||
store.dispatch(connect(socketURL(token)));
|
||||
|
|
|
@ -1,134 +1,134 @@
|
|||
const actions = {
|
||||
loginSuccess: (token) => ({
|
||||
type: "LOGIN_UPDATE",
|
||||
type: 'LOGIN_UPDATE',
|
||||
login: {
|
||||
loggedIn: true,
|
||||
token,
|
||||
},
|
||||
}),
|
||||
logout: () => ({
|
||||
type: "LOGOUT",
|
||||
type: 'LOGOUT',
|
||||
}),
|
||||
userInfoUpdate: (userInfo) => ({
|
||||
type: "USER_INFO_UPDATE",
|
||||
type: 'USER_INFO_UPDATE',
|
||||
userInfo,
|
||||
}),
|
||||
roomSave: (room) => ({
|
||||
type: "ROOM_SAVE",
|
||||
type: 'ROOM_SAVE',
|
||||
room,
|
||||
}),
|
||||
sceneSave: (scene) => ({
|
||||
type: "SCENE_SAVE",
|
||||
type: 'SCENE_SAVE',
|
||||
scene,
|
||||
}),
|
||||
deviceSave: (device) => ({
|
||||
type: "DEVICE_SAVE",
|
||||
type: 'DEVICE_SAVE',
|
||||
device,
|
||||
}),
|
||||
hostDeviceSave: (hostId, device) => ({
|
||||
type: "HOST_DEVICE_SAVE",
|
||||
type: 'HOST_DEVICE_SAVE',
|
||||
hostId,
|
||||
device,
|
||||
}),
|
||||
triggerSave: (automation) => ({
|
||||
type: "TRIGGER_SAVE",
|
||||
type: 'TRIGGER_SAVE',
|
||||
automation,
|
||||
}),
|
||||
|
||||
scenePrioritySave: (automation) => ({
|
||||
type: "SCENE_PRIORITY_SAVE",
|
||||
type: 'SCENE_PRIORITY_SAVE',
|
||||
automation,
|
||||
}),
|
||||
|
||||
automationSave: (automation) => ({
|
||||
type: "AUTOMATION_SAVE",
|
||||
type: 'AUTOMATION_SAVE',
|
||||
automation,
|
||||
}),
|
||||
automationsUpdate: (automations) => ({
|
||||
type: "AUTOMATION_UPDATE",
|
||||
type: 'AUTOMATION_UPDATE',
|
||||
automations,
|
||||
}),
|
||||
stateSave: (sceneState) => ({
|
||||
type: "STATE_SAVE",
|
||||
type: 'STATE_SAVE',
|
||||
sceneState,
|
||||
}),
|
||||
statesUpdate: (sceneId, sceneStates) => ({
|
||||
type: "STATES_UPDATE",
|
||||
type: 'STATES_UPDATE',
|
||||
sceneId,
|
||||
sceneStates,
|
||||
}),
|
||||
devicesUpdate: (roomId, devices, partial = false) => ({
|
||||
type: "DEVICES_UPDATE",
|
||||
type: 'DEVICES_UPDATE',
|
||||
roomId,
|
||||
devices,
|
||||
partial,
|
||||
}),
|
||||
hostDevicesUpdate: (hostId, devices, partial = false) => ({
|
||||
type: "HOST_DEVICES_UPDATE",
|
||||
type: 'HOST_DEVICES_UPDATE',
|
||||
hostId,
|
||||
partial,
|
||||
devices,
|
||||
}),
|
||||
stateDelete: (stateId) => ({
|
||||
type: "STATE_DELETE",
|
||||
type: 'STATE_DELETE',
|
||||
stateId,
|
||||
}),
|
||||
deviceOperationUpdate: (devices) => ({
|
||||
type: "DEVICES_UPDATE",
|
||||
type: 'DEVICES_UPDATE',
|
||||
devices,
|
||||
partial: true,
|
||||
}),
|
||||
roomsUpdate: (rooms) => ({
|
||||
type: "ROOMS_UPDATE",
|
||||
type: 'ROOMS_UPDATE',
|
||||
rooms,
|
||||
}),
|
||||
hostRoomsUpdate: (hostId, rooms) => ({
|
||||
type: "HOST_ROOMS_UPDATE",
|
||||
type: 'HOST_ROOMS_UPDATE',
|
||||
hostId,
|
||||
rooms,
|
||||
}),
|
||||
roomDelete: (roomId) => ({
|
||||
type: "ROOM_DELETE",
|
||||
type: 'ROOM_DELETE',
|
||||
roomId,
|
||||
}),
|
||||
automationDelete: (id) => ({
|
||||
type: "AUTOMATION_DELETE",
|
||||
type: 'AUTOMATION_DELETE',
|
||||
id,
|
||||
}),
|
||||
sceneDelete: (sceneId) => ({
|
||||
type: "SCENE_DELETE",
|
||||
type: 'SCENE_DELETE',
|
||||
sceneId,
|
||||
}),
|
||||
scenesUpdate: (scenes) => ({
|
||||
type: "SCENES_UPDATE",
|
||||
type: 'SCENES_UPDATE',
|
||||
scenes,
|
||||
}),
|
||||
hostScenesUpdate: (hostId, scenes) => ({
|
||||
type: "HOST_SCENES_UPDATE",
|
||||
type: 'HOST_SCENES_UPDATE',
|
||||
hostId,
|
||||
scenes,
|
||||
}),
|
||||
deviceDelete: (deviceId) => ({
|
||||
type: "DEVICE_DELETE",
|
||||
type: 'DEVICE_DELETE',
|
||||
deviceId,
|
||||
}),
|
||||
hostsUpdate: (hosts) => ({
|
||||
type: "HG_UPDATE",
|
||||
key: "hosts",
|
||||
type: 'HG_UPDATE',
|
||||
key: 'hosts',
|
||||
value: hosts,
|
||||
}),
|
||||
guestsUpdate: (hosts) => ({
|
||||
type: "HG_UPDATE",
|
||||
key: "guests",
|
||||
type: 'HG_UPDATE',
|
||||
key: 'guests',
|
||||
value: hosts,
|
||||
}),
|
||||
getHostDevices: (host) => ({
|
||||
type: "GET_HOST_DEVICES",
|
||||
type: 'GET_HOST_DEVICES',
|
||||
host,
|
||||
}),
|
||||
guestUpdate: (guests) => ({
|
||||
type: "HG_UPDATE",
|
||||
key: "guests",
|
||||
type: 'HG_UPDATE',
|
||||
key: 'guests',
|
||||
value: guests,
|
||||
}),
|
||||
};
|
||||
|
@ -136,23 +136,23 @@ const actions = {
|
|||
export const appActions = {
|
||||
// -1 for home view
|
||||
setActiveRoom: (activeRoom = -1) => ({
|
||||
type: "SET_ACTIVE",
|
||||
key: "activeRoom",
|
||||
type: 'SET_ACTIVE',
|
||||
key: 'activeRoom',
|
||||
value: activeRoom,
|
||||
}),
|
||||
setActiveTab: (activeTab) => ({
|
||||
type: "SET_ACTIVE",
|
||||
key: "activeTab",
|
||||
type: 'SET_ACTIVE',
|
||||
key: 'activeTab',
|
||||
value: activeTab,
|
||||
}),
|
||||
setActiveScene: (activeScene = -1) => ({
|
||||
type: "SET_ACTIVE",
|
||||
key: "activeScene",
|
||||
type: 'SET_ACTIVE',
|
||||
key: 'activeScene',
|
||||
value: activeScene,
|
||||
}),
|
||||
setActiveHost: (activeHost = -1) => ({
|
||||
type: "SET_ACTIVE",
|
||||
key: "activeHost",
|
||||
type: 'SET_ACTIVE',
|
||||
key: 'activeHost',
|
||||
value: activeHost,
|
||||
}),
|
||||
};
|
||||
|
|
39
smart-hut/src/views/Confirm.js
Normal file
39
smart-hut/src/views/Confirm.js
Normal file
|
@ -0,0 +1,39 @@
|
|||
import React, { Component } from 'react';
|
||||
import {
|
||||
Image,
|
||||
Grid,
|
||||
Button,
|
||||
Icon,
|
||||
Header,
|
||||
Container,
|
||||
} from 'semantic-ui-react';
|
||||
|
||||
export default class Confirm extends Component {
|
||||
render() {
|
||||
return (
|
||||
<>
|
||||
<Button circular style={{ margin: '2em' }} href="/">
|
||||
<Icon name="arrow alternate circle left" />
|
||||
Go Home
|
||||
{' '}
|
||||
</Button>
|
||||
<Grid
|
||||
textAlign="center"
|
||||
style={{ height: '70vh' }}
|
||||
verticalAlign="middle"
|
||||
>
|
||||
<Grid.Column style={{ maxWidth: 450 }}>
|
||||
<Header as="h2" color="blue" textAlign="center">
|
||||
<Image src="img/logo.png" />
|
||||
{' '}
|
||||
Congratulation!
|
||||
</Header>
|
||||
<Container textAlign="center">
|
||||
<p>{this.props.msg}</p>
|
||||
</Container>
|
||||
</Grid.Column>
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
|
@ -1,40 +1,9 @@
|
|||
import React, { Component } from "react";
|
||||
import {
|
||||
Image,
|
||||
Grid,
|
||||
Button,
|
||||
Icon,
|
||||
Header,
|
||||
Container,
|
||||
} from "semantic-ui-react";
|
||||
import React, { Component } from 'react';
|
||||
import Confirm from './Confirm';
|
||||
|
||||
const msg = "An E-mail has been sent to your address, confirm your registration by following the enclosed link. If you don't find the E-mail please check also the spam folder.";
|
||||
export default class ConfirmForgotPasswrod extends Component {
|
||||
render() {
|
||||
return (
|
||||
<React.Fragment>
|
||||
<Button circular style={{ margin: "2em" }} href="/">
|
||||
<Icon name="arrow alternate circle left" />
|
||||
Go Home{" "}
|
||||
</Button>
|
||||
<Grid
|
||||
textAlign="center"
|
||||
style={{ height: "70vh" }}
|
||||
verticalAlign="middle"
|
||||
>
|
||||
<Grid.Column style={{ maxWidth: 450 }}>
|
||||
<Header as="h2" color="blue" textAlign="center">
|
||||
<Image src="img/logo.png" /> Link has been sent!
|
||||
</Header>
|
||||
<Container textAlign="center">
|
||||
<p>
|
||||
An E-mail has been sent to your address, please follow the
|
||||
instructions to create a new password. If you don't find the
|
||||
E-mail please check also the spam folder.
|
||||
</p>
|
||||
</Container>
|
||||
</Grid.Column>
|
||||
</Grid>
|
||||
</React.Fragment>
|
||||
);
|
||||
return <Confirm msg={msg} />;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,40 +1,9 @@
|
|||
import React, { Component } from "react";
|
||||
import {
|
||||
Image,
|
||||
Grid,
|
||||
Button,
|
||||
Icon,
|
||||
Header,
|
||||
Container,
|
||||
} from "semantic-ui-react";
|
||||
import React, { Component } from 'react';
|
||||
import Confirm from './Confirm';
|
||||
|
||||
const msg = "An E-mail has been sent to your address, confirm your registration by following the enclosed link. If you don't find the E-mail please check also the spam folder.";
|
||||
export default class ConfirmRegistration extends Component {
|
||||
render() {
|
||||
return (
|
||||
<React.Fragment>
|
||||
<Button circular style={{ margin: "2em" }} href="/">
|
||||
<Icon name="arrow alternate circle left" />
|
||||
Go Home{" "}
|
||||
</Button>
|
||||
<Grid
|
||||
textAlign="center"
|
||||
style={{ height: "70vh" }}
|
||||
verticalAlign="middle"
|
||||
>
|
||||
<Grid.Column style={{ maxWidth: 450 }}>
|
||||
<Header as="h2" color="blue" textAlign="center">
|
||||
<Image src="img/logo.png" /> Congratulation!
|
||||
</Header>
|
||||
<Container textAlign="center">
|
||||
<p>
|
||||
An E-mail has been sent to your address, confirm your
|
||||
registration by following the enclosed link. If you don't find
|
||||
the E-mail please check also the spam folder.
|
||||
</p>
|
||||
</Container>
|
||||
</Grid.Column>
|
||||
</Grid>
|
||||
</React.Fragment>
|
||||
);
|
||||
return <Confirm msg={msg} />;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,36 +1,10 @@
|
|||
import React, { Component } from "react";
|
||||
import {
|
||||
Image,
|
||||
Grid,
|
||||
Button,
|
||||
Icon,
|
||||
Header,
|
||||
Container,
|
||||
} from "semantic-ui-react";
|
||||
import React, { Component } from 'react';
|
||||
import Confirm from './Confirm';
|
||||
|
||||
const msg = 'Your password has been successfully reset.';
|
||||
|
||||
export default class ConfirmResetPassword extends Component {
|
||||
render() {
|
||||
return (
|
||||
<React.Fragment>
|
||||
<Button circular style={{ margin: "2em" }} href="/">
|
||||
<Icon name="arrow alternate circle left" />
|
||||
Go Home{" "}
|
||||
</Button>
|
||||
<Grid
|
||||
textAlign="center"
|
||||
style={{ height: "70vh" }}
|
||||
verticalAlign="middle"
|
||||
>
|
||||
<Grid.Column style={{ maxWidth: 450 }}>
|
||||
<Header as="h2" color="blue" textAlign="center">
|
||||
<Image src="img/logo.png" /> Congratulation!
|
||||
</Header>
|
||||
<Container textAlign="center">
|
||||
<p>Your password has been successfully reset.</p>
|
||||
</Container>
|
||||
</Grid.Column>
|
||||
</Grid>
|
||||
</React.Fragment>
|
||||
);
|
||||
return <Confirm msg={msg} />;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,24 +1,26 @@
|
|||
import React, { Component } from "react";
|
||||
import DevicePanel from "../components/dashboard/DevicePanel";
|
||||
import ScenesPanel from "../components/dashboard/ScenesPanel";
|
||||
import AutomationsPanel from "../components/dashboard/AutomationsPanel";
|
||||
import HostsPanel from "../components/dashboard/HostsPanel";
|
||||
import Navbar from "./Navbar";
|
||||
import ScenesNavbar from "./ScenesNavbar";
|
||||
import HostsNavbar from "./HostsNavbar";
|
||||
import MyHeader from "../components/HeaderController";
|
||||
import { Grid, Responsive, Button, Menu } from "semantic-ui-react";
|
||||
import { mobilePanelStyle } from "../components/dashboard/devices/styleComponents";
|
||||
import React, { Component } from 'react';
|
||||
import {
|
||||
Grid, Responsive, Button, Menu,
|
||||
} from 'semantic-ui-react';
|
||||
import { connect } from 'react-redux';
|
||||
import DevicePanel from '../components/dashboard/DevicePanel';
|
||||
import ScenesPanel from '../components/dashboard/ScenesPanel';
|
||||
import AutomationsPanel from '../components/dashboard/AutomationsPanel';
|
||||
import HostsPanel from '../components/dashboard/HostsPanel';
|
||||
import Navbar from './Navbar';
|
||||
import ScenesNavbar from './ScenesNavbar';
|
||||
import HostsNavbar from './HostsNavbar';
|
||||
import MyHeader from '../components/HeaderController';
|
||||
import { mobilePanelStyle } from '../components/dashboard/devices/styleComponents';
|
||||
|
||||
import { RemoteService } from "../remote";
|
||||
import { connect } from "react-redux";
|
||||
import { appActions } from "../storeActions";
|
||||
import { RemoteService } from '../remote';
|
||||
import { appActions } from '../storeActions';
|
||||
|
||||
class Dashboard extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = this.initialState;
|
||||
this.activeTab = "Devices";
|
||||
this.activeTab = 'Devices';
|
||||
this.selectTab = this.selectTab.bind(this);
|
||||
}
|
||||
|
||||
|
@ -47,13 +49,13 @@ class Dashboard extends Component {
|
|||
|
||||
renderTab(tab) {
|
||||
switch (tab) {
|
||||
case "Devices":
|
||||
case 'Devices':
|
||||
return <DevicePanel tab={this.state.activeTab} />;
|
||||
case "Scenes":
|
||||
case 'Scenes':
|
||||
return <ScenesPanel tab={this.state.activeTab} />;
|
||||
case "Automations":
|
||||
case 'Automations':
|
||||
return <AutomationsPanel />;
|
||||
case "Hosts":
|
||||
case 'Hosts':
|
||||
return <HostsPanel />;
|
||||
default:
|
||||
return <h1>ERROR</h1>;
|
||||
|
@ -62,11 +64,11 @@ class Dashboard extends Component {
|
|||
|
||||
renderNavbar(tab) {
|
||||
switch (tab) {
|
||||
case "Devices":
|
||||
case 'Devices':
|
||||
return <Navbar />;
|
||||
case "Scenes":
|
||||
case 'Scenes':
|
||||
return <ScenesNavbar />;
|
||||
case "Hosts":
|
||||
case 'Hosts':
|
||||
return <HostsNavbar />;
|
||||
default:
|
||||
return <h1>ERROR</h1>;
|
||||
|
@ -74,21 +76,21 @@ class Dashboard extends Component {
|
|||
}
|
||||
|
||||
get hasNavbar() {
|
||||
return this.state.activeTab !== "Automations";
|
||||
return this.state.activeTab !== 'Automations';
|
||||
}
|
||||
|
||||
render() {
|
||||
// needed to correctly assign the background image
|
||||
//in case a room has one.
|
||||
// in case a room has one.
|
||||
let backgroundImageHelper;
|
||||
if (this.activeTab === "Devices") {
|
||||
if (this.activeTab === 'Devices') {
|
||||
backgroundImageHelper = this.props.backgroundImage;
|
||||
} else {
|
||||
backgroundImageHelper = null;
|
||||
}
|
||||
//console.log("helper is",helper)
|
||||
// console.log("helper is",helper)
|
||||
return (
|
||||
<div style={{ background: "#1b1c1d" }}>
|
||||
<div style={{ background: '#1b1c1d' }}>
|
||||
<Responsive minWidth={768}>
|
||||
<Grid>
|
||||
<Grid.Row color="black" style={{ paddingBottom: 0 }}>
|
||||
|
@ -102,25 +104,25 @@ class Dashboard extends Component {
|
|||
<Menu.Item
|
||||
name="Devices"
|
||||
content="Devices"
|
||||
active={this.activeTab === "Devices"}
|
||||
active={this.activeTab === 'Devices'}
|
||||
onClick={this.selectTab}
|
||||
/>
|
||||
<Menu.Item
|
||||
name="Scenes"
|
||||
content="Scenes"
|
||||
active={this.activeTab === "Scenes"}
|
||||
active={this.activeTab === 'Scenes'}
|
||||
onClick={this.selectTab}
|
||||
/>
|
||||
<Menu.Item
|
||||
name="Automations"
|
||||
content="Automations"
|
||||
active={this.activeTab === "Automations"}
|
||||
active={this.activeTab === 'Automations'}
|
||||
onClick={this.selectTab}
|
||||
/>
|
||||
<Menu.Item
|
||||
name="Hosts"
|
||||
content="Hosts and Guests"
|
||||
active={this.activeTab === "Hosts"}
|
||||
active={this.activeTab === 'Hosts'}
|
||||
onClick={this.selectTab}
|
||||
/>
|
||||
</Menu>
|
||||
|
@ -134,13 +136,13 @@ class Dashboard extends Component {
|
|||
<Grid.Column width={this.hasNavbar ? 13 : 16}>
|
||||
<div
|
||||
style={{
|
||||
backgroundImage: "url(" + backgroundImageHelper + ")",
|
||||
backgroundColor: "#fafafa",
|
||||
height: "85vh",
|
||||
padding: "0rem 3rem",
|
||||
color: "#000000",
|
||||
overflow: "auto",
|
||||
maxHeight: "75vh",
|
||||
backgroundImage: `url(${backgroundImageHelper})`,
|
||||
backgroundColor: '#fafafa',
|
||||
height: '85vh',
|
||||
padding: '0rem 3rem',
|
||||
color: '#000000',
|
||||
overflow: 'auto',
|
||||
maxHeight: '75vh',
|
||||
}}
|
||||
>
|
||||
{this.renderTab(this.activeTab)}
|
||||
|
@ -162,33 +164,33 @@ class Dashboard extends Component {
|
|||
basic
|
||||
name="Devices"
|
||||
content="Devices"
|
||||
active={this.activeTab === "Devices"}
|
||||
color={this.activeTab === "Devices" ? "yellow" : "grey"}
|
||||
active={this.activeTab === 'Devices'}
|
||||
color={this.activeTab === 'Devices' ? 'yellow' : 'grey'}
|
||||
onClick={this.selectTab}
|
||||
/>
|
||||
<Button
|
||||
basic
|
||||
name="Scenes"
|
||||
content="Scenes"
|
||||
active={this.activeTab === "Scenes"}
|
||||
color={this.activeTab === "Scenes" ? "yellow" : "grey"}
|
||||
active={this.activeTab === 'Scenes'}
|
||||
color={this.activeTab === 'Scenes' ? 'yellow' : 'grey'}
|
||||
onClick={this.selectTab}
|
||||
/>
|
||||
<Button
|
||||
basic
|
||||
name="Automations"
|
||||
content="Automations"
|
||||
active={this.activeTab === "Automations"}
|
||||
color={this.activeTab === "Automations" ? "yellow" : "grey"}
|
||||
active={this.activeTab === 'Automations'}
|
||||
color={this.activeTab === 'Automations' ? 'yellow' : 'grey'}
|
||||
onClick={this.selectTab}
|
||||
/>
|
||||
<Button
|
||||
basic
|
||||
name="Hosts"
|
||||
content="Hosts"
|
||||
active={this.activeTab === "Hosts"}
|
||||
active={this.activeTab === 'Hosts'}
|
||||
color={
|
||||
this.activeTab === "Hosts and Guests" ? "yellow" : "grey"
|
||||
this.activeTab === 'Hosts and Guests' ? 'yellow' : 'grey'
|
||||
}
|
||||
onClick={this.selectTab}
|
||||
/>
|
||||
|
@ -223,15 +225,12 @@ const mapStateToProps = (state, _) => ({
|
|||
get backgroundImage() {
|
||||
if (state.active.activeRoom === -1) {
|
||||
return null;
|
||||
} else {
|
||||
return state.rooms[state.active.activeRoom].image;
|
||||
}
|
||||
return state.rooms[state.active.activeRoom].image;
|
||||
},
|
||||
});
|
||||
|
||||
const setActiveTab = (activeTab) => {
|
||||
return (dispatch) => dispatch(appActions.setActiveTab(activeTab));
|
||||
};
|
||||
const setActiveTab = (activeTab) => (dispatch) => dispatch(appActions.setActiveTab(activeTab));
|
||||
|
||||
const DashboardContainer = connect(mapStateToProps, {
|
||||
...RemoteService,
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
import React, { Component } from "react";
|
||||
import { Button } from "semantic-ui-react";
|
||||
import React, { Component } from 'react';
|
||||
import { Button } from 'semantic-ui-react';
|
||||
|
||||
export default class Dashboard extends Component {
|
||||
handleLogOut = (e) => {
|
||||
|
@ -9,8 +9,9 @@ export default class Dashboard extends Component {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<Button circular style={{ margin: "2em" }} onClick={this.handleLogOut}>
|
||||
Go Home{" "}
|
||||
<Button circular style={{ margin: '2em' }} onClick={this.handleLogOut}>
|
||||
Go Home
|
||||
{' '}
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -1,114 +0,0 @@
|
|||
import React, { Component } from "react";
|
||||
import {
|
||||
Button,
|
||||
Form,
|
||||
Grid,
|
||||
Header,
|
||||
Image,
|
||||
Icon,
|
||||
Message,
|
||||
} from "semantic-ui-react";
|
||||
import { Redirect } from "react-router-dom";
|
||||
import { Forms } from "../remote";
|
||||
|
||||
export default class ChangePass extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
password: "",
|
||||
error: {
|
||||
state: false,
|
||||
message: "",
|
||||
},
|
||||
success: false,
|
||||
};
|
||||
this.handleChangePassword = this.handleChangePassword.bind(this);
|
||||
}
|
||||
|
||||
onChangeHandler = (event) => {
|
||||
let nam = event.target.name;
|
||||
let val = event.target.value;
|
||||
this.setState({ [nam]: val });
|
||||
};
|
||||
|
||||
handleChangePassword = (e) => {
|
||||
if (this.state.confirmPassword !== this.state.password) {
|
||||
this.setState({
|
||||
error: {
|
||||
state: true,
|
||||
message: "Passwords do not match.",
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
Forms.submitResetPassword(this.props.query.token, this.state.password)
|
||||
.then(() => this.setState({ success: true }))
|
||||
.catch((err) =>
|
||||
this.setState({
|
||||
error: { state: true, message: err.messages.join(" - ") },
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
render() {
|
||||
if (this.state.success) {
|
||||
return <Redirect to="/login" />;
|
||||
}
|
||||
return (
|
||||
<React.Fragment>
|
||||
<Button circular style={{ margin: "2em" }} href="/">
|
||||
<Icon name="arrow alternate circle left" />
|
||||
Go Home{" "}
|
||||
</Button>
|
||||
<Grid
|
||||
textAlign="center"
|
||||
style={{ height: "70vh" }}
|
||||
verticalAlign="middle"
|
||||
>
|
||||
<Grid.Column style={{ maxWidth: 450 }}>
|
||||
<Header as="h2" color="blue" textAlign="center">
|
||||
<Image src="img/logo.png" /> Reset Password
|
||||
</Header>
|
||||
<Form
|
||||
size="large"
|
||||
style={{ marginTop: "2em" }}
|
||||
error={this.state.error.state}
|
||||
>
|
||||
<Message
|
||||
error
|
||||
header="Change Password Error"
|
||||
content={this.state.error.message}
|
||||
/>
|
||||
<Form.Input
|
||||
icon="address card outline"
|
||||
iconPosition="left"
|
||||
placeholder="Reset your password"
|
||||
name="password"
|
||||
type="password"
|
||||
onChange={this.onChangeHandler}
|
||||
required
|
||||
/>
|
||||
<Form.Input
|
||||
icon="address card outline"
|
||||
iconPosition="left"
|
||||
placeholder="Confirm Password"
|
||||
name="confirmPassword"
|
||||
type="password"
|
||||
onChange={this.onChangeHandler}
|
||||
required
|
||||
/>
|
||||
<Button
|
||||
color="blue"
|
||||
fluid
|
||||
size="large"
|
||||
onClick={this.handleChangePassword}
|
||||
>
|
||||
Confirm password
|
||||
</Button>
|
||||
</Form>
|
||||
</Grid.Column>
|
||||
</Grid>
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
}
|
|
@ -1,4 +1,4 @@
|
|||
import React, { Component } from "react";
|
||||
import React, { Component } from 'react';
|
||||
import {
|
||||
Button,
|
||||
Form,
|
||||
|
@ -7,26 +7,28 @@ import {
|
|||
Image,
|
||||
Icon,
|
||||
Message,
|
||||
} from "semantic-ui-react";
|
||||
import { Redirect } from "react-router-dom";
|
||||
import { Forms } from "../remote";
|
||||
} from 'semantic-ui-react';
|
||||
import { Redirect } from 'react-router-dom';
|
||||
import { Forms } from '../remote';
|
||||
|
||||
export default class ForgotPass extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
user: "",
|
||||
user: '',
|
||||
error: {
|
||||
state: false,
|
||||
message: [],
|
||||
},
|
||||
success: false,
|
||||
};
|
||||
|
||||
this.handleChangePassword = this.handleChangePassword.bind(this);
|
||||
}
|
||||
|
||||
onChangeHandler = (event) => {
|
||||
let nam = event.target.name;
|
||||
let val = event.target.value;
|
||||
const nam = event.target.name;
|
||||
const val = event.target.value;
|
||||
this.setState({ [nam]: val });
|
||||
};
|
||||
|
||||
|
@ -35,33 +37,52 @@ export default class ForgotPass extends Component {
|
|||
|
||||
Forms.submitInitResetPassword(this.state.user)
|
||||
.then(() => this.setState({ success: true }))
|
||||
.catch((err) =>
|
||||
this.setState({ error: { state: true, message: err.messages } })
|
||||
);
|
||||
.catch((err) => this.setState({ error: { state: true, message: err.messages } }));
|
||||
};
|
||||
|
||||
handleChangePassword = (e) => {
|
||||
if (this.state.confirmPassword !== this.state.password) {
|
||||
this.setState({
|
||||
error: {
|
||||
state: true,
|
||||
message: 'Passwords do not match.',
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
Forms.submitResetPassword(this.props.query.token, this.state.password)
|
||||
.then(() => this.setState({ success: true }))
|
||||
.catch((err) => this.setState({
|
||||
error: { state: true, message: err.messages.join(' - ') },
|
||||
}));
|
||||
};
|
||||
|
||||
render() {
|
||||
console.log(this.props);
|
||||
if (this.state.success) {
|
||||
return <Redirect to="sent-email" />;
|
||||
}
|
||||
return (
|
||||
<React.Fragment>
|
||||
<Button circular style={{ margin: "2em" }} href="/">
|
||||
<>
|
||||
<Button circular style={{ margin: '2em' }} href="/">
|
||||
<Icon name="arrow alternate circle left" />
|
||||
Go Home{" "}
|
||||
Go Home
|
||||
{' '}
|
||||
</Button>
|
||||
<Grid
|
||||
textAlign="center"
|
||||
style={{ height: "70vh" }}
|
||||
style={{ height: '70vh' }}
|
||||
verticalAlign="middle"
|
||||
>
|
||||
<Grid.Column style={{ maxWidth: 450 }}>
|
||||
<Header as="h2" color="blue" textAlign="center">
|
||||
<Image src="img/logo.png" /> Reset Password
|
||||
<Image src="img/logo.png" />
|
||||
{' '}
|
||||
Reset Password
|
||||
</Header>
|
||||
<Form
|
||||
size="large"
|
||||
style={{ marginTop: "2em" }}
|
||||
style={{ marginTop: '2em' }}
|
||||
error={this.state.error.state}
|
||||
>
|
||||
<Message error>
|
||||
|
@ -74,27 +95,60 @@ export default class ForgotPass extends Component {
|
|||
</span>
|
||||
))}
|
||||
</Message>
|
||||
<Form.Input
|
||||
icon="address card outline"
|
||||
iconPosition="left"
|
||||
placeholder="Enter your E-mail"
|
||||
name="user"
|
||||
type="text"
|
||||
onChange={this.onChangeHandler}
|
||||
required
|
||||
/>
|
||||
<Button
|
||||
color="blue"
|
||||
fluid
|
||||
size="large"
|
||||
onClick={this.handleSendEmail}
|
||||
>
|
||||
Send E-mail
|
||||
</Button>
|
||||
{this.props.type === 'FPassword1' ? (
|
||||
<>
|
||||
<Form.Input
|
||||
icon="address card outline"
|
||||
iconPosition="left"
|
||||
placeholder="Enter your E-mail"
|
||||
name="user"
|
||||
type="text"
|
||||
onChange={this.onChangeHandler}
|
||||
required
|
||||
/>
|
||||
<Button
|
||||
color="blue"
|
||||
fluid
|
||||
size="large"
|
||||
onClick={this.handleSendEmail}
|
||||
>
|
||||
Send E-mail
|
||||
</Button>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Form.Input
|
||||
icon="address card outline"
|
||||
iconPosition="left"
|
||||
placeholder="Reset your password"
|
||||
name="password"
|
||||
type="password"
|
||||
onChange={this.onChangeHandler}
|
||||
required
|
||||
/>
|
||||
<Form.Input
|
||||
icon="address card outline"
|
||||
iconPosition="left"
|
||||
placeholder="Confirm Password"
|
||||
name="confirmPassword"
|
||||
type="password"
|
||||
onChange={this.onChangeHandler}
|
||||
required
|
||||
/>
|
||||
<Button
|
||||
color="blue"
|
||||
fluid
|
||||
size="large"
|
||||
onClick={this.handleChangePassword}
|
||||
>
|
||||
Confirm password
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
</Form>
|
||||
</Grid.Column>
|
||||
</Grid>
|
||||
</React.Fragment>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,91 +0,0 @@
|
|||
import React, { Component } from "react";
|
||||
import { render } from "react-dom";
|
||||
import HomeNavbar from "./../components/HomeNavbar";
|
||||
import {
|
||||
Container,
|
||||
Icon,
|
||||
Image,
|
||||
Menu,
|
||||
Sidebar,
|
||||
Responsive,
|
||||
Header,
|
||||
Divider,
|
||||
Message,
|
||||
Grid,
|
||||
} from "semantic-ui-react";
|
||||
|
||||
class Paragraph extends Component {
|
||||
state = { visible: true };
|
||||
|
||||
handleDismiss = () => {
|
||||
this.setState({ visible: false });
|
||||
|
||||
setTimeout(() => {
|
||||
this.setState({ visible: true });
|
||||
}, 2000);
|
||||
};
|
||||
|
||||
render() {
|
||||
if (this.state.visible) {
|
||||
return (
|
||||
<Message
|
||||
onDismiss={this.handleDismiss}
|
||||
header="Link has been sent!"
|
||||
content="An e-mail has been sent your address, please follow the
|
||||
instruction to create a new password"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<p>
|
||||
<br />
|
||||
<i>The message will return in 2s</i>
|
||||
<br />
|
||||
<br />
|
||||
</p>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const MessageReg = () => (
|
||||
<Grid>
|
||||
<HomeNavbar />
|
||||
<Divider />
|
||||
<Grid.Row height={3}></Grid.Row>
|
||||
<Grid.Row height={3}></Grid.Row>
|
||||
<Grid.Row height={3}></Grid.Row>
|
||||
<Grid.Row height={3}>
|
||||
<Grid.Column width={6}></Grid.Column>
|
||||
<Grid.Column width={10}>
|
||||
<Image src="title5.png" />
|
||||
</Grid.Column>
|
||||
<Grid.Column width={3}></Grid.Column>
|
||||
</Grid.Row>
|
||||
<Grid.Row height={3}></Grid.Row>
|
||||
<Grid.Row height={3}></Grid.Row>
|
||||
<Grid.Column width={3}></Grid.Column>
|
||||
<Grid.Column width={4}>
|
||||
<Image src="./img/logo.png" />
|
||||
</Grid.Column>
|
||||
<Grid.Column width={6}>
|
||||
<Paragraph />
|
||||
</Grid.Column>
|
||||
<Grid.Column width={4}></Grid.Column>
|
||||
<Grid.Row height={3}></Grid.Row>
|
||||
<Grid.Row height={3}></Grid.Row>
|
||||
<Grid.Row height={3}>
|
||||
<Grid.Column width={3}></Grid.Column>
|
||||
<Grid.Column width={10}>
|
||||
<Divider />
|
||||
</Grid.Column>
|
||||
<Grid.Column width={3}></Grid.Column>
|
||||
</Grid.Row>
|
||||
</Grid>
|
||||
);
|
||||
|
||||
export default class ForgotPasswrod extends React.Component {
|
||||
render() {
|
||||
return <MessageReg />;
|
||||
}
|
||||
}
|
|
@ -1,35 +1,37 @@
|
|||
import React, { Component } from "react";
|
||||
import { Grid, Button, Segment, Responsive, Image } from "semantic-ui-react";
|
||||
import { Link } from "react-router-dom";
|
||||
import MyHeader from "../components/HeaderController";
|
||||
import React, { Component } from 'react';
|
||||
import {
|
||||
Grid, Button, Segment, Responsive, Image,
|
||||
} from 'semantic-ui-react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import MyHeader from '../components/HeaderController';
|
||||
|
||||
export default class FourOhFour extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
const meme = [
|
||||
"1.jpeg",
|
||||
"2.jpeg",
|
||||
"3.png",
|
||||
"4.jpeg",
|
||||
"5.jpeg",
|
||||
"6.jpg",
|
||||
"7.jpg",
|
||||
"8.jpg",
|
||||
"9.jpeg",
|
||||
"10.jpg",
|
||||
"11.jpeg",
|
||||
"12.gif",
|
||||
"13.gif",
|
||||
"14.gif",
|
||||
'1.jpeg',
|
||||
'2.jpeg',
|
||||
'3.png',
|
||||
'4.jpeg',
|
||||
'5.jpeg',
|
||||
'6.jpg',
|
||||
'7.jpg',
|
||||
'8.jpg',
|
||||
'9.jpeg',
|
||||
'10.jpg',
|
||||
'11.jpeg',
|
||||
'12.gif',
|
||||
'13.gif',
|
||||
'14.gif',
|
||||
];
|
||||
var arrayNum = Math.floor(Math.random() * 13) + 1;
|
||||
var path = "img/room_404_meme/" + meme[arrayNum];
|
||||
const arrayNum = Math.floor(Math.random() * 13) + 1;
|
||||
const path = `img/room_404_meme/${meme[arrayNum]}`;
|
||||
this.state = { meme: path };
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div style={{ height: "110vh", background: "#1b1c1d" }}>
|
||||
<div style={{ height: '110vh', background: '#1b1c1d' }}>
|
||||
<Responsive minWidth={768}>
|
||||
<Grid>
|
||||
<Grid.Row color="black">
|
||||
|
@ -59,7 +61,7 @@ export default class FourOhFour extends Component {
|
|||
our main room! ...or refresh this page some times...
|
||||
</p>
|
||||
<Button fluid inverted color="white">
|
||||
<Link style={{ color: "black" }} to="/">
|
||||
<Link style={{ color: 'black' }} to="/">
|
||||
Let's go back to our main room!
|
||||
</Link>
|
||||
</Button>
|
||||
|
@ -103,7 +105,7 @@ export default class FourOhFour extends Component {
|
|||
our main room! ...or refresh this page some times...
|
||||
</p>
|
||||
<Button fluid inverted color="white">
|
||||
<Link style={{ color: "black" }} to="/">
|
||||
<Link style={{ color: 'black' }} to="/">
|
||||
Let's go back to our main room!
|
||||
</Link>
|
||||
</Button>
|
||||
|
|
|
@ -1,6 +1,5 @@
|
|||
import PropTypes from "prop-types";
|
||||
import React, { Component } from "react";
|
||||
import HomeNavbar from "./../components/HomeNavbar";
|
||||
import PropTypes from 'prop-types';
|
||||
import React, { Component } from 'react';
|
||||
import {
|
||||
Button,
|
||||
Container,
|
||||
|
@ -14,13 +13,14 @@ import {
|
|||
Segment,
|
||||
Sidebar,
|
||||
Visibility,
|
||||
} from "semantic-ui-react";
|
||||
} from 'semantic-ui-react';
|
||||
import HomeNavbar from '../components/HomeNavbar';
|
||||
|
||||
// Heads up!
|
||||
// We using React Static to prerender our docs with server side rendering, this is a quite simple solution.
|
||||
// For more advanced usage please check Responsive docs under the "Usage" section.
|
||||
const getWidth = () => {
|
||||
const isSSR = typeof window === "undefined";
|
||||
const isSSR = typeof window === 'undefined';
|
||||
return isSSR ? Responsive.onlyTablet.minWidth : window.innerWidth;
|
||||
};
|
||||
|
||||
|
@ -35,10 +35,10 @@ const HomepageHeading = ({ mobile }) => (
|
|||
content="SmartHut"
|
||||
inverted
|
||||
style={{
|
||||
fontSize: mobile ? "2em" : "4em",
|
||||
fontWeight: "normal",
|
||||
fontSize: mobile ? '2em' : '4em',
|
||||
fontWeight: 'normal',
|
||||
marginBottom: 0,
|
||||
marginTop: mobile ? "1.5em" : "3em",
|
||||
marginTop: mobile ? '1.5em' : '3em',
|
||||
}}
|
||||
/>
|
||||
<Header
|
||||
|
@ -46,9 +46,9 @@ const HomepageHeading = ({ mobile }) => (
|
|||
content="Keep your Home fully Connected"
|
||||
inverted
|
||||
style={{
|
||||
fontSize: mobile ? "1.5em" : "1.7em",
|
||||
fontWeight: "normal",
|
||||
marginTop: mobile ? "0.5em" : "1.5em",
|
||||
fontSize: mobile ? '1.5em' : '1.7em',
|
||||
fontWeight: 'normal',
|
||||
marginTop: mobile ? '0.5em' : '1.5em',
|
||||
}}
|
||||
/>
|
||||
<Button size="huge" color="orange" href="/signup">
|
||||
|
@ -64,7 +64,9 @@ HomepageHeading.propTypes = {
|
|||
|
||||
class DesktopContainer extends Component {
|
||||
state = {};
|
||||
|
||||
hideFixedMenu = () => this.setState({ fixed: false });
|
||||
|
||||
showFixedMenu = () => this.setState({ fixed: true });
|
||||
|
||||
render() {
|
||||
|
@ -82,9 +84,9 @@ class DesktopContainer extends Component {
|
|||
textAlign="center"
|
||||
style={{
|
||||
minHeight: 700,
|
||||
padding: "1em 0em",
|
||||
background: ` linear-gradient(to bottom, rgba(0, 46, 200, 0.51), rgba(0, 0, 0, 0.51)), url("img/header.jpg")`,
|
||||
backgroundSize: "cover",
|
||||
padding: '1em 0em',
|
||||
background: ' linear-gradient(to bottom, rgba(0, 46, 200, 0.51), rgba(0, 0, 0, 0.51)), url("img/header.jpg")',
|
||||
backgroundSize: 'cover',
|
||||
}}
|
||||
vertical
|
||||
>
|
||||
|
@ -139,7 +141,7 @@ class MobileContainer extends Component {
|
|||
<Segment
|
||||
inverted
|
||||
textAlign="center"
|
||||
style={{ minHeight: 350, padding: "1em 0em" }}
|
||||
style={{ minHeight: 350, padding: '1em 0em' }}
|
||||
vertical
|
||||
>
|
||||
<Container>
|
||||
|
@ -151,7 +153,7 @@ class MobileContainer extends Component {
|
|||
<Button as="a" inverted>
|
||||
Log in
|
||||
</Button>
|
||||
<Button as="a" inverted style={{ marginLeft: "0.5em" }}>
|
||||
<Button as="a" inverted style={{ marginLeft: '0.5em' }}>
|
||||
Sign Up
|
||||
</Button>
|
||||
</Menu.Item>
|
||||
|
@ -184,20 +186,20 @@ ResponsiveContainer.propTypes = {
|
|||
|
||||
const Home = () => (
|
||||
<ResponsiveContainer>
|
||||
<Segment style={{ padding: "8em 0em" }} vertical>
|
||||
<Segment style={{ padding: '8em 0em' }} vertical>
|
||||
<Grid container stackable verticalAlign="middle">
|
||||
<Grid.Row>
|
||||
<Grid.Column width={8}>
|
||||
<Header as="h3" style={{ fontSize: "2em" }}>
|
||||
<Header as="h3" style={{ fontSize: '2em' }}>
|
||||
We help you keep your home connected
|
||||
</Header>
|
||||
<p style={{ fontSize: "1.33em" }}>
|
||||
<p style={{ fontSize: '1.33em' }}>
|
||||
In a few steps your home will be fully connected with SmartHut.
|
||||
</p>
|
||||
<Header as="h3" style={{ fontSize: "2em" }}>
|
||||
<Header as="h3" style={{ fontSize: '2em' }}>
|
||||
Choose between a wide range of devices
|
||||
</Header>
|
||||
<p style={{ fontSize: "1.33em" }}>
|
||||
<p style={{ fontSize: '1.33em' }}>
|
||||
SmartHut is a leading worldwide company in technology innovation.
|
||||
Explore our website to find the best devices for each room of your
|
||||
home!
|
||||
|
@ -210,12 +212,12 @@ const Home = () => (
|
|||
</Grid>
|
||||
</Segment>
|
||||
|
||||
<Segment style={{ padding: "8em 0em" }} vertical>
|
||||
<Segment style={{ padding: '8em 0em' }} vertical>
|
||||
<Container text>
|
||||
<Header as="h3" style={{ fontSize: "2em" }}>
|
||||
<Header as="h3" style={{ fontSize: '2em' }}>
|
||||
Have you ever dreamt about a smart home?
|
||||
</Header>
|
||||
<p style={{ fontSize: "1.33em" }}>
|
||||
<p style={{ fontSize: '1.33em' }}>
|
||||
Let us carrying you into the future. With SmartHut, being at home will
|
||||
be a refreshing experience. With just a few clicks, you will be able
|
||||
the set the illumination of your entire place. Follow the intelligent
|
||||
|
@ -224,7 +226,7 @@ const Home = () => (
|
|||
</Container>
|
||||
</Segment>
|
||||
|
||||
<Segment inverted vertical style={{ padding: "5em 0em" }}>
|
||||
<Segment inverted vertical style={{ padding: '5em 0em' }}>
|
||||
<Container>
|
||||
<Grid divided inverted stackable>
|
||||
<Grid.Row>
|
||||
|
|
|
@ -1,9 +1,11 @@
|
|||
import React, { Component } from "react";
|
||||
import { Menu, Grid, Responsive, Dropdown } from "semantic-ui-react";
|
||||
import HostModal from "../components/HostModal";
|
||||
import { RemoteService } from "../remote";
|
||||
import { connect } from "react-redux";
|
||||
import { appActions } from "../storeActions";
|
||||
import React, { Component } from 'react';
|
||||
import {
|
||||
Menu, Grid, Responsive, Dropdown,
|
||||
} from 'semantic-ui-react';
|
||||
import { connect } from 'react-redux';
|
||||
import HostModal from '../components/HostModal';
|
||||
import { RemoteService } from '../remote';
|
||||
import { appActions } from '../storeActions';
|
||||
|
||||
class HostsNavbar extends Component {
|
||||
constructor(props) {
|
||||
|
@ -29,7 +31,7 @@ class HostsNavbar extends Component {
|
|||
}
|
||||
|
||||
get activeItemHostsName() {
|
||||
if (this.props.activeItem === -1) return "Home";
|
||||
if (this.props.activeItem === -1) return 'Home';
|
||||
return this.props.hosts[this.props.activeHost].name;
|
||||
}
|
||||
|
||||
|
@ -37,7 +39,7 @@ class HostsNavbar extends Component {
|
|||
return (
|
||||
<div>
|
||||
<Responsive minWidth={768}>
|
||||
<Grid style={{ margin: "1em -1em 0 1em" }}>
|
||||
<Grid style={{ margin: '1em -1em 0 1em' }}>
|
||||
<Grid.Row>
|
||||
<Menu inverted fluid vertical>
|
||||
<Menu.Item
|
||||
|
@ -49,19 +51,17 @@ class HostsNavbar extends Component {
|
|||
>
|
||||
<strong>Hosts</strong>
|
||||
</Menu.Item>
|
||||
{Object.values(this.props.hosts).map((e, i) => {
|
||||
return (
|
||||
<Menu.Item
|
||||
id={e.id}
|
||||
key={i}
|
||||
name={e.name}
|
||||
active={this.activeItem === e.id}
|
||||
onClick={this.selectHosts}
|
||||
>
|
||||
{e.name}
|
||||
</Menu.Item>
|
||||
);
|
||||
})}
|
||||
{Object.values(this.props.hosts).map((e, i) => (
|
||||
<Menu.Item
|
||||
id={e.id}
|
||||
key={i}
|
||||
name={e.name}
|
||||
active={this.activeItem === e.id}
|
||||
onClick={this.selectHosts}
|
||||
>
|
||||
{e.name}
|
||||
</Menu.Item>
|
||||
))}
|
||||
<Menu.Item name="newM">
|
||||
<HostModal />
|
||||
</Menu.Item>
|
||||
|
@ -84,19 +84,17 @@ class HostsNavbar extends Component {
|
|||
<strong>Hosts</strong>
|
||||
</Dropdown.Item>
|
||||
|
||||
{Object.values(this.props.hosts).map((e, i) => {
|
||||
return (
|
||||
<Menu.Item
|
||||
id={e.id}
|
||||
key={i}
|
||||
name={e.name}
|
||||
active={this.activeItem === e.id}
|
||||
onClick={this.selectHosts}
|
||||
>
|
||||
{e.name}
|
||||
</Menu.Item>
|
||||
);
|
||||
})}
|
||||
{Object.values(this.props.hosts).map((e, i) => (
|
||||
<Menu.Item
|
||||
id={e.id}
|
||||
key={i}
|
||||
name={e.name}
|
||||
active={this.activeItem === e.id}
|
||||
onClick={this.selectHosts}
|
||||
>
|
||||
{e.name}
|
||||
</Menu.Item>
|
||||
))}
|
||||
</Dropdown.Menu>
|
||||
</Dropdown>
|
||||
</Menu>
|
||||
|
@ -106,9 +104,7 @@ class HostsNavbar extends Component {
|
|||
}
|
||||
}
|
||||
|
||||
const setActiveHost = (activeHost) => {
|
||||
return (dispatch) => dispatch(appActions.setActiveHost(activeHost));
|
||||
};
|
||||
const setActiveHost = (activeHost) => (dispatch) => dispatch(appActions.setActiveHost(activeHost));
|
||||
|
||||
const mapStateToProps = (state, _) => ({
|
||||
hosts: state.hosts,
|
||||
|
|
|
@ -1,6 +1,8 @@
|
|||
import React, { Component } from "react";
|
||||
import HomeNavbar from "./../components/HomeNavbar";
|
||||
import { Container, Header, Divider, Grid } from "semantic-ui-react";
|
||||
import React, { Component } from 'react';
|
||||
import {
|
||||
Container, Header, Divider, Grid,
|
||||
} from 'semantic-ui-react';
|
||||
import HomeNavbar from '../components/HomeNavbar';
|
||||
|
||||
const ContainerExampleAlignment = () => (
|
||||
<div>
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import React, { Component } from "react";
|
||||
import React, { Component } from 'react';
|
||||
import {
|
||||
Button,
|
||||
Form,
|
||||
|
@ -8,19 +8,19 @@ import {
|
|||
Message,
|
||||
Icon,
|
||||
Input,
|
||||
} from "semantic-ui-react";
|
||||
import { RemoteService } from "../remote";
|
||||
import { withRouter } from "react-router-dom";
|
||||
import { connect } from "react-redux";
|
||||
} from 'semantic-ui-react';
|
||||
import { withRouter } from 'react-router-dom';
|
||||
import { connect } from 'react-redux';
|
||||
import { RemoteService } from '../remote';
|
||||
|
||||
class Login extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
user: "",
|
||||
password: "",
|
||||
user: '',
|
||||
password: '',
|
||||
fireRedirect: false,
|
||||
error: { state: false, message: "" },
|
||||
error: { state: false, message: '' },
|
||||
};
|
||||
}
|
||||
|
||||
|
@ -29,42 +29,43 @@ class Login extends Component {
|
|||
|
||||
this.props
|
||||
.login(this.state.user, this.state.password)
|
||||
.then(() => this.props.history.push("/dashboard"))
|
||||
.then(() => this.props.history.push('/dashboard'))
|
||||
.catch((err) => {
|
||||
this.setState({
|
||||
error: { state: true, message: err.messages.join(" - ") },
|
||||
error: { state: true, message: err.messages.join(' - ') },
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
onChangeHandler = (event) => {
|
||||
let nam = event.target.name;
|
||||
let val = event.target.value;
|
||||
const nam = event.target.name;
|
||||
const val = event.target.value;
|
||||
this.setState({ [nam]: val });
|
||||
};
|
||||
|
||||
toggle = () =>
|
||||
this.setState((prevState) => ({ rememberme: !prevState.rememberme }));
|
||||
toggle = () => this.setState((prevState) => ({ rememberme: !prevState.rememberme }));
|
||||
|
||||
render() {
|
||||
return (
|
||||
<React.Fragment>
|
||||
<Button circular style={{ margin: "2em" }} href="/">
|
||||
<>
|
||||
<Button circular style={{ margin: '2em' }} href="/">
|
||||
<Icon name="arrow alternate circle left" />
|
||||
Go Home
|
||||
</Button>
|
||||
<Grid
|
||||
textAlign="center"
|
||||
style={{ height: "70vh" }}
|
||||
style={{ height: '70vh' }}
|
||||
verticalAlign="middle"
|
||||
>
|
||||
<Grid.Column style={{ maxWidth: 450 }}>
|
||||
<Header as="h2" color="blue" textAlign="center">
|
||||
<Image src="img/logo.png" /> Log-in to SmartHut
|
||||
<Image src="img/logo.png" />
|
||||
{' '}
|
||||
Log-in to SmartHut
|
||||
</Header>
|
||||
<Form
|
||||
size="large"
|
||||
style={{ marginTop: "2em" }}
|
||||
style={{ marginTop: '2em' }}
|
||||
error={this.state.error.state}
|
||||
>
|
||||
<Message
|
||||
|
@ -104,12 +105,14 @@ class Login extends Component {
|
|||
<a href="/forgot-password">Forgot Password?</a>
|
||||
</p>
|
||||
<p>
|
||||
New to us? <a href="/signup"> Sign Up</a>
|
||||
New to us?
|
||||
{' '}
|
||||
<a href="/signup"> Sign Up</a>
|
||||
</p>
|
||||
</Message>
|
||||
</Grid.Column>
|
||||
</Grid>
|
||||
</React.Fragment>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
@ -117,6 +120,6 @@ class Login extends Component {
|
|||
const mapStateToProps = (state, _) => ({ loggedIn: state.login.loggedIn });
|
||||
const LoginContainer = connect(
|
||||
mapStateToProps,
|
||||
RemoteService
|
||||
RemoteService,
|
||||
)(withRouter(Login));
|
||||
export default LoginContainer;
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import React, { Component } from "react";
|
||||
import React, { Component } from 'react';
|
||||
import {
|
||||
Menu,
|
||||
Button,
|
||||
|
@ -6,12 +6,12 @@ import {
|
|||
Icon,
|
||||
Responsive,
|
||||
Dropdown,
|
||||
} from "semantic-ui-react";
|
||||
import { editButtonStyle } from "../components/dashboard/devices/styleComponents";
|
||||
import RoomModal from "../components/RoomModal";
|
||||
import { RemoteService } from "../remote";
|
||||
import { connect } from "react-redux";
|
||||
import { appActions } from "../storeActions";
|
||||
} from 'semantic-ui-react';
|
||||
import { connect } from 'react-redux';
|
||||
import { editButtonStyle } from '../components/dashboard/devices/styleComponents';
|
||||
import RoomModal from '../components/RoomModal';
|
||||
import { RemoteService } from '../remote';
|
||||
import { appActions } from '../storeActions';
|
||||
|
||||
class Navbar extends Component {
|
||||
constructor(props) {
|
||||
|
@ -40,7 +40,7 @@ class Navbar extends Component {
|
|||
}
|
||||
|
||||
get activeItemName() {
|
||||
if (this.props.activeRoom === -1) return "Home";
|
||||
if (this.props.activeRoom === -1) return 'Home';
|
||||
return this.props.rooms[this.props.activeRoom].name;
|
||||
}
|
||||
|
||||
|
@ -62,7 +62,7 @@ class Navbar extends Component {
|
|||
return (
|
||||
<div>
|
||||
<Responsive minWidth={768}>
|
||||
<Grid style={{ margin: "1em -1em 0 1em" }}>
|
||||
<Grid style={{ margin: '1em -1em 0 1em' }}>
|
||||
<Grid.Row color="black">
|
||||
<button style={editButtonStyle} onClick={this.toggleEditMode}>
|
||||
Edit
|
||||
|
@ -89,31 +89,29 @@ class Navbar extends Component {
|
|||
</Grid>
|
||||
</Menu.Item>
|
||||
|
||||
{Object.values(this.props.rooms).map((e, i) => {
|
||||
return (
|
||||
<Menu.Item
|
||||
id={e.id}
|
||||
key={i}
|
||||
name={e.name}
|
||||
active={this.activeItem === e.id}
|
||||
onClick={this.selectRoom}
|
||||
>
|
||||
<Grid>
|
||||
<Grid.Row>
|
||||
<Grid.Column>
|
||||
<Icon name={e.icon} size="small" />
|
||||
</Grid.Column>
|
||||
<Grid.Column width={11}>{e.name}</Grid.Column>
|
||||
<Grid.Column floated="right">
|
||||
{this.state.editMode ? (
|
||||
<RoomModal id={e.id} />
|
||||
{Object.values(this.props.rooms).map((e, i) => (
|
||||
<Menu.Item
|
||||
id={e.id}
|
||||
key={i}
|
||||
name={e.name}
|
||||
active={this.activeItem === e.id}
|
||||
onClick={this.selectRoom}
|
||||
>
|
||||
<Grid>
|
||||
<Grid.Row>
|
||||
<Grid.Column>
|
||||
<Icon name={e.icon} size="small" />
|
||||
</Grid.Column>
|
||||
<Grid.Column width={11}>{e.name}</Grid.Column>
|
||||
<Grid.Column floated="right">
|
||||
{this.state.editMode ? (
|
||||
<RoomModal id={e.id} />
|
||||
) : null}
|
||||
</Grid.Column>
|
||||
</Grid.Row>
|
||||
</Grid>
|
||||
</Menu.Item>
|
||||
);
|
||||
})}
|
||||
</Grid.Column>
|
||||
</Grid.Row>
|
||||
</Grid>
|
||||
</Menu.Item>
|
||||
))}
|
||||
|
||||
<Menu.Item name="newM">
|
||||
<Grid>
|
||||
|
@ -148,31 +146,29 @@ class Navbar extends Component {
|
|||
</Grid>
|
||||
</Dropdown.Item>
|
||||
|
||||
{Object.values(this.props.rooms).map((e, i) => {
|
||||
return (
|
||||
<Dropdown.Item
|
||||
{Object.values(this.props.rooms).map((e, i) => (
|
||||
<Dropdown.Item
|
||||
id={e.id}
|
||||
key={i}
|
||||
name={e.name}
|
||||
active={this.activeItem === e.id}
|
||||
onClick={this.selectRoom}
|
||||
>
|
||||
<Grid>
|
||||
<Grid.Row>
|
||||
<Grid.Column width={1}>
|
||||
<Icon name={e.icon} size="small" />
|
||||
</Grid.Column>
|
||||
<Grid.Column>{e.name}</Grid.Column>
|
||||
</Grid.Row>
|
||||
</Grid>
|
||||
<RoomModal
|
||||
ref={this.props.roomModalRefs[e.id]}
|
||||
nicolaStop
|
||||
id={e.id}
|
||||
key={i}
|
||||
name={e.name}
|
||||
active={this.activeItem === e.id}
|
||||
onClick={this.selectRoom}
|
||||
>
|
||||
<Grid>
|
||||
<Grid.Row>
|
||||
<Grid.Column width={1}>
|
||||
<Icon name={e.icon} size="small" />
|
||||
</Grid.Column>
|
||||
<Grid.Column>{e.name}</Grid.Column>
|
||||
</Grid.Row>
|
||||
</Grid>
|
||||
<RoomModal
|
||||
ref={this.props.roomModalRefs[e.id]}
|
||||
nicolaStop={true}
|
||||
id={e.id}
|
||||
/>
|
||||
</Dropdown.Item>
|
||||
);
|
||||
})}
|
||||
/>
|
||||
</Dropdown.Item>
|
||||
))}
|
||||
</Dropdown.Menu>
|
||||
</Dropdown>
|
||||
</Menu>
|
||||
|
@ -202,16 +198,14 @@ class Navbar extends Component {
|
|||
}
|
||||
}
|
||||
|
||||
const setActiveRoom = (activeRoom) => {
|
||||
return (dispatch) => dispatch(appActions.setActiveRoom(activeRoom));
|
||||
};
|
||||
const setActiveRoom = (activeRoom) => (dispatch) => dispatch(appActions.setActiveRoom(activeRoom));
|
||||
|
||||
const mapStateToProps = (state, _) => ({
|
||||
rooms: state.rooms,
|
||||
activeRoom: state.active.activeRoom,
|
||||
roomModalRefs: Object.keys(state.rooms).reduce(
|
||||
(acc, key) => ({ ...acc, [key]: React.createRef() }),
|
||||
{}
|
||||
{},
|
||||
),
|
||||
});
|
||||
const NavbarContainer = connect(mapStateToProps, {
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import React, { Component } from "react";
|
||||
import React, { Component } from 'react';
|
||||
import {
|
||||
Menu,
|
||||
Button,
|
||||
|
@ -6,12 +6,12 @@ import {
|
|||
Grid,
|
||||
Responsive,
|
||||
Dropdown,
|
||||
} from "semantic-ui-react";
|
||||
import { editButtonStyle } from "../components/dashboard/devices/styleComponents";
|
||||
import SceneModal from "../components/SceneModal";
|
||||
import { RemoteService } from "../remote";
|
||||
import { connect } from "react-redux";
|
||||
import { appActions } from "../storeActions";
|
||||
} from 'semantic-ui-react';
|
||||
import { connect } from 'react-redux';
|
||||
import { editButtonStyle } from '../components/dashboard/devices/styleComponents';
|
||||
import SceneModal from '../components/SceneModal';
|
||||
import { RemoteService } from '../remote';
|
||||
import { appActions } from '../storeActions';
|
||||
|
||||
class ScenesNavbar extends Component {
|
||||
constructor(props) {
|
||||
|
@ -35,7 +35,7 @@ class ScenesNavbar extends Component {
|
|||
}
|
||||
|
||||
get activeItemSceneName() {
|
||||
if (this.props.activeScene === -1) return "Scene";
|
||||
if (this.props.activeScene === -1) return 'Scene';
|
||||
return this.props.scenes[this.props.activeScene].name;
|
||||
}
|
||||
|
||||
|
@ -44,7 +44,7 @@ class ScenesNavbar extends Component {
|
|||
}
|
||||
|
||||
openCurrentModalMobile() {
|
||||
//console.log(this.activeItemScene, this.props.sceneModalRefs);
|
||||
// console.log(this.activeItemScene, this.props.sceneModalRefs);
|
||||
const currentModal = this.props.sceneModalRefs[this.activeItemScene]
|
||||
.current;
|
||||
currentModal.openModal();
|
||||
|
@ -63,7 +63,7 @@ class ScenesNavbar extends Component {
|
|||
if (sceneId) {
|
||||
this.props
|
||||
.fetchStates(sceneId)
|
||||
.catch((err) => console.error(`error fetching states:`, err));
|
||||
.catch((err) => console.error('error fetching states:', err));
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -71,7 +71,7 @@ class ScenesNavbar extends Component {
|
|||
return (
|
||||
<div>
|
||||
<Responsive minWidth={768}>
|
||||
<Grid style={{ margin: "1em -1em 0 1em" }}>
|
||||
<Grid style={{ margin: '1em -1em 0 1em' }}>
|
||||
<Grid.Row color="black">
|
||||
<button style={editButtonStyle} onClick={this.toggleEditMode}>
|
||||
Edit
|
||||
|
@ -89,31 +89,29 @@ class ScenesNavbar extends Component {
|
|||
<strong>Scenes</strong>
|
||||
</Menu.Item>
|
||||
|
||||
{Object.values(this.props.scenes).map((e, i) => {
|
||||
return (
|
||||
<Menu.Item
|
||||
id={e.id}
|
||||
key={i}
|
||||
name={e.name}
|
||||
active={this.activeItemScene === e.id}
|
||||
onClick={this.selectScene}
|
||||
>
|
||||
<Grid>
|
||||
<Grid.Row>
|
||||
<Grid.Column>
|
||||
<Icon name={e.icon} size="small" />
|
||||
</Grid.Column>
|
||||
<Grid.Column width={11}>{e.name}</Grid.Column>
|
||||
<Grid.Column floated="right">
|
||||
{this.state.editMode ? (
|
||||
<SceneModal id={e.id} />
|
||||
{Object.values(this.props.scenes).map((e, i) => (
|
||||
<Menu.Item
|
||||
id={e.id}
|
||||
key={i}
|
||||
name={e.name}
|
||||
active={this.activeItemScene === e.id}
|
||||
onClick={this.selectScene}
|
||||
>
|
||||
<Grid>
|
||||
<Grid.Row>
|
||||
<Grid.Column>
|
||||
<Icon name={e.icon} size="small" />
|
||||
</Grid.Column>
|
||||
<Grid.Column width={11}>{e.name}</Grid.Column>
|
||||
<Grid.Column floated="right">
|
||||
{this.state.editMode ? (
|
||||
<SceneModal id={e.id} />
|
||||
) : null}
|
||||
</Grid.Column>
|
||||
</Grid.Row>
|
||||
</Grid>
|
||||
</Menu.Item>
|
||||
);
|
||||
})}
|
||||
</Grid.Column>
|
||||
</Grid.Row>
|
||||
</Grid>
|
||||
</Menu.Item>
|
||||
))}
|
||||
|
||||
<Menu.Item name="newM">
|
||||
<Grid>
|
||||
|
@ -145,28 +143,26 @@ class ScenesNavbar extends Component {
|
|||
</Grid>
|
||||
</Dropdown.Item>
|
||||
|
||||
{Object.values(this.props.scenes).map((e, i) => {
|
||||
return (
|
||||
<Dropdown.Item
|
||||
{Object.values(this.props.scenes).map((e, i) => (
|
||||
<Dropdown.Item
|
||||
id={e.id}
|
||||
key={i}
|
||||
name={e.name}
|
||||
active={this.activeItemScene === e.id}
|
||||
onClick={this.selectScene}
|
||||
>
|
||||
<Grid>
|
||||
<Grid.Row>
|
||||
<Grid.Column>{e.name}</Grid.Column>
|
||||
</Grid.Row>
|
||||
</Grid>
|
||||
<SceneModal
|
||||
ref={this.props.sceneModalRefs[e.id]}
|
||||
nicolaStop
|
||||
id={e.id}
|
||||
key={i}
|
||||
name={e.name}
|
||||
active={this.activeItemScene === e.id}
|
||||
onClick={this.selectScene}
|
||||
>
|
||||
<Grid>
|
||||
<Grid.Row>
|
||||
<Grid.Column>{e.name}</Grid.Column>
|
||||
</Grid.Row>
|
||||
</Grid>
|
||||
<SceneModal
|
||||
ref={this.props.sceneModalRefs[e.id]}
|
||||
nicolaStop={true}
|
||||
id={e.id}
|
||||
/>
|
||||
</Dropdown.Item>
|
||||
);
|
||||
})}
|
||||
/>
|
||||
</Dropdown.Item>
|
||||
))}
|
||||
</Dropdown.Menu>
|
||||
</Dropdown>
|
||||
</Menu>
|
||||
|
@ -196,15 +192,13 @@ class ScenesNavbar extends Component {
|
|||
}
|
||||
}
|
||||
|
||||
const setActiveScene = (activeScene) => {
|
||||
return (dispatch) => dispatch(appActions.setActiveScene(activeScene));
|
||||
};
|
||||
const setActiveScene = (activeScene) => (dispatch) => dispatch(appActions.setActiveScene(activeScene));
|
||||
|
||||
const mapStateToProps = (state, _) => ({
|
||||
scenes: state.scenes,
|
||||
sceneModalRefs: Object.keys(state.scenes).reduce(
|
||||
(acc, key) => ({ ...acc, [key]: React.createRef() }),
|
||||
{}
|
||||
{},
|
||||
),
|
||||
get isActiveDefaultScene() {
|
||||
return state.active.activeScene === -1;
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import React, { Component } from "react";
|
||||
import React, { Component } from 'react';
|
||||
import {
|
||||
Button,
|
||||
Form,
|
||||
|
@ -8,18 +8,18 @@ import {
|
|||
Icon,
|
||||
Input,
|
||||
Message,
|
||||
} from "semantic-ui-react";
|
||||
import { Redirect } from "react-router-dom";
|
||||
import { Forms } from "../remote";
|
||||
} from 'semantic-ui-react';
|
||||
import { Redirect } from 'react-router-dom';
|
||||
import { Forms } from '../remote';
|
||||
|
||||
export default class Signup extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
completeName: "",
|
||||
username: "",
|
||||
email: "",
|
||||
password: "",
|
||||
completeName: '',
|
||||
username: '',
|
||||
email: '',
|
||||
password: '',
|
||||
error: { state: false, message: [] },
|
||||
success: false,
|
||||
};
|
||||
|
@ -36,14 +36,12 @@ export default class Signup extends Component {
|
|||
|
||||
Forms.submitRegistration(params)
|
||||
.then(() => this.setState({ success: true }))
|
||||
.catch((err) =>
|
||||
this.setState({ error: { state: true, message: err.messages } })
|
||||
);
|
||||
.catch((err) => this.setState({ error: { state: true, message: err.messages } }));
|
||||
};
|
||||
|
||||
onChangeHandler = (event) => {
|
||||
let nam = event.target.name;
|
||||
let val = event.target.value;
|
||||
const nam = event.target.name;
|
||||
const val = event.target.value;
|
||||
this.setState({ [nam]: val });
|
||||
};
|
||||
|
||||
|
@ -52,23 +50,26 @@ export default class Signup extends Component {
|
|||
return <Redirect to="sent-email-reg" />;
|
||||
}
|
||||
return (
|
||||
<React.Fragment>
|
||||
<Button circular style={{ margin: "2em" }} href="/">
|
||||
<>
|
||||
<Button circular style={{ margin: '2em' }} href="/">
|
||||
<Icon name="arrow alternate circle left" />
|
||||
Go Home{" "}
|
||||
Go Home
|
||||
{' '}
|
||||
</Button>
|
||||
<Grid
|
||||
textAlign="center"
|
||||
style={{ height: "70vh" }}
|
||||
style={{ height: '70vh' }}
|
||||
verticalAlign="middle"
|
||||
>
|
||||
<Grid.Column style={{ maxWidth: 450 }}>
|
||||
<Header as="h2" color="blue" textAlign="center">
|
||||
<Image src="img/logo.png" /> Sign-up to SmartHut
|
||||
<Image src="img/logo.png" />
|
||||
{' '}
|
||||
Sign-up to SmartHut
|
||||
</Header>
|
||||
<Form
|
||||
size="large"
|
||||
style={{ marginTop: "2em" }}
|
||||
style={{ marginTop: '2em' }}
|
||||
error={this.state.error.state}
|
||||
>
|
||||
<Message error>
|
||||
|
@ -107,10 +108,10 @@ export default class Signup extends Component {
|
|||
iconPosition="left"
|
||||
placeholder="E-mail"
|
||||
onChange={this.onChangeHandler}
|
||||
/*error={{
|
||||
/* error={{
|
||||
content: 'Please enter a valid email address',
|
||||
pointing: 'below',
|
||||
}}*/
|
||||
}} */
|
||||
required
|
||||
/>
|
||||
<Form.Input
|
||||
|
@ -134,7 +135,7 @@ export default class Signup extends Component {
|
|||
</Form>
|
||||
</Grid.Column>
|
||||
</Grid>
|
||||
</React.Fragment>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
import _ from "lodash";
|
||||
import React from "react";
|
||||
import HeaderController from "./../components/HeaderController";
|
||||
import _ from 'lodash';
|
||||
import React from 'react';
|
||||
import HeaderController from '../components/HeaderController';
|
||||
|
||||
export default class TestHeaderController extends React.Component {
|
||||
render() {
|
||||
|
|
|
@ -1,11 +1,12 @@
|
|||
import React from "react";
|
||||
import VideoTest from "../components/VideoTest";
|
||||
import React from 'react';
|
||||
import VideoTest from '../components/VideoTest';
|
||||
|
||||
export default class TestHeaderController extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<VideoTest />;
|
||||
<VideoTest />
|
||||
;
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -1009,7 +1009,11 @@
|
|||
dependencies:
|
||||
regenerator-runtime "^0.13.4"
|
||||
|
||||
<<<<<<< HEAD
|
||||
"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.3.1", "@babel/runtime@^7.3.4", "@babel/runtime@^7.4.0", "@babel/runtime@^7.4.4", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.1", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.4", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
|
||||
=======
|
||||
"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.3.1", "@babel/runtime@^7.3.4", "@babel/runtime@^7.4.4", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.1", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.4", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
|
||||
>>>>>>> c583c0e73e2d0b08fae52a663ee1bc68247430e7
|
||||
version "7.9.6"
|
||||
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.9.6.tgz#a9102eb5cadedf3f31d08a9ecf294af7827ea29f"
|
||||
integrity sha512-64AF1xY3OAkFHqOb9s4jpgk1Mm5vDZ4L3acHvAml+53nO1XbXLuDodsVpO4OIUsmemlUHMxNdYMNJmsvOwLrvQ==
|
||||
|
@ -1292,6 +1296,7 @@
|
|||
chalk "^3.0.0"
|
||||
|
||||
"@material-ui/core@^4.9.4":
|
||||
<<<<<<< HEAD
|
||||
version "4.9.13"
|
||||
resolved "https://registry.yarnpkg.com/@material-ui/core/-/core-4.9.13.tgz#024962bcdda05139e1bad17a1815bf4088702b15"
|
||||
integrity sha512-GEXNwUr+laZ0N+F1efmHB64Fyg+uQIRXLqbSejg3ebSXgLYNpIjnMOPRfWdu4rICq0dAIgvvNXGkKDMcf3AMpA==
|
||||
|
@ -1301,6 +1306,16 @@
|
|||
"@material-ui/styles" "^4.9.13"
|
||||
"@material-ui/system" "^4.9.13"
|
||||
"@material-ui/types" "^5.0.1"
|
||||
=======
|
||||
version "4.9.14"
|
||||
resolved "https://registry.yarnpkg.com/@material-ui/core/-/core-4.9.14.tgz#4388f82cf94554cd3a935774fc12820f3c607a8a"
|
||||
integrity sha512-71oYrOpInx5honJ9GzZlygPjmsFhn7Bui61/SWLJsPTkMnfvuZfU3qVqlEHjXyDsnZ+uKmLAIdsrOYnphJxxXw==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.4.4"
|
||||
"@material-ui/styles" "^4.9.14"
|
||||
"@material-ui/system" "^4.9.14"
|
||||
"@material-ui/types" "^5.1.0"
|
||||
>>>>>>> c583c0e73e2d0b08fae52a663ee1bc68247430e7
|
||||
"@material-ui/utils" "^4.9.12"
|
||||
"@types/react-transition-group" "^4.2.0"
|
||||
clsx "^1.0.4"
|
||||
|
@ -1308,7 +1323,11 @@
|
|||
popper.js "^1.16.1-lts"
|
||||
prop-types "^15.7.2"
|
||||
react-is "^16.8.0"
|
||||
<<<<<<< HEAD
|
||||
react-transition-group "^4.3.0"
|
||||
=======
|
||||
react-transition-group "^4.4.0"
|
||||
>>>>>>> c583c0e73e2d0b08fae52a663ee1bc68247430e7
|
||||
|
||||
"@material-ui/icons@^4.9.1":
|
||||
version "4.9.1"
|
||||
|
@ -1317,6 +1336,7 @@
|
|||
dependencies:
|
||||
"@babel/runtime" "^7.4.4"
|
||||
|
||||
<<<<<<< HEAD
|
||||
"@material-ui/react-transition-group@^4.3.0":
|
||||
version "4.3.0"
|
||||
resolved "https://registry.yarnpkg.com/@material-ui/react-transition-group/-/react-transition-group-4.3.0.tgz#92529142addb5cc179dbf42d246c7e3fe4d6104b"
|
||||
|
@ -1335,6 +1355,16 @@
|
|||
"@babel/runtime" "^7.4.4"
|
||||
"@emotion/hash" "^0.8.0"
|
||||
"@material-ui/types" "^5.0.1"
|
||||
=======
|
||||
"@material-ui/styles@^4.9.14":
|
||||
version "4.9.14"
|
||||
resolved "https://registry.yarnpkg.com/@material-ui/styles/-/styles-4.9.14.tgz#0a9e93a2bf24e8daa0811411a6f3dabdafbe9a07"
|
||||
integrity sha512-zecwWKgRU2VzdmutNovPB4s5LKI0TWyZKc/AHfPu9iY8tg4UoLjpa4Rn9roYrRfuTbBZHI6b0BXcQ8zkis0nzQ==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.4.4"
|
||||
"@emotion/hash" "^0.8.0"
|
||||
"@material-ui/types" "^5.1.0"
|
||||
>>>>>>> c583c0e73e2d0b08fae52a663ee1bc68247430e7
|
||||
"@material-ui/utils" "^4.9.6"
|
||||
clsx "^1.0.4"
|
||||
csstype "^2.5.2"
|
||||
|
@ -1349,6 +1379,7 @@
|
|||
jss-plugin-vendor-prefixer "^10.0.3"
|
||||
prop-types "^15.7.2"
|
||||
|
||||
<<<<<<< HEAD
|
||||
"@material-ui/system@^4.9.13":
|
||||
version "4.9.13"
|
||||
resolved "https://registry.yarnpkg.com/@material-ui/system/-/system-4.9.13.tgz#adefb3b6a5ddf0b00fe4e82ac63bb48276e9749d"
|
||||
|
@ -1362,6 +1393,22 @@
|
|||
version "5.0.1"
|
||||
resolved "https://registry.yarnpkg.com/@material-ui/types/-/types-5.0.1.tgz#c4954063cdc196eb327ee62c041368b1aebb6d61"
|
||||
integrity sha512-wURPSY7/3+MAtng3i26g+WKwwNE3HEeqa/trDBR5+zWKmcjO+u9t7Npu/J1r+3dmIa/OeziN9D/18IrBKvKffw==
|
||||
=======
|
||||
"@material-ui/system@^4.9.14":
|
||||
version "4.9.14"
|
||||
resolved "https://registry.yarnpkg.com/@material-ui/system/-/system-4.9.14.tgz#4b00c48b569340cefb2036d0596b93ac6c587a5f"
|
||||
integrity sha512-oQbaqfSnNlEkXEziDcJDDIy8pbvwUmZXWNqlmIwDqr/ZdCK8FuV3f4nxikUh7hvClKV2gnQ9djh5CZFTHkZj3w==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.4.4"
|
||||
"@material-ui/utils" "^4.9.6"
|
||||
csstype "^2.5.2"
|
||||
prop-types "^15.7.2"
|
||||
|
||||
"@material-ui/types@^5.1.0":
|
||||
version "5.1.0"
|
||||
resolved "https://registry.yarnpkg.com/@material-ui/types/-/types-5.1.0.tgz#efa1c7a0b0eaa4c7c87ac0390445f0f88b0d88f2"
|
||||
integrity sha512-7cqRjrY50b8QzRSYyhSpx4WRw2YuO0KKIGQEVk5J8uoz2BanawykgZGoWEqKm7pVIbzFDN0SpPcVV4IhOFkl8A==
|
||||
>>>>>>> c583c0e73e2d0b08fae52a663ee1bc68247430e7
|
||||
|
||||
"@material-ui/utils@^4.9.12", "@material-ui/utils@^4.9.6":
|
||||
version "4.9.12"
|
||||
|
@ -1623,9 +1670,15 @@
|
|||
"@types/node" "*"
|
||||
|
||||
"@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0":
|
||||
<<<<<<< HEAD
|
||||
version "2.0.1"
|
||||
resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.1.tgz#42995b446db9a48a11a07ec083499a860e9138ff"
|
||||
integrity sha512-hRJD2ahnnpLgsj6KWMYSrmXkM3rm2Dl1qkx6IOFD5FnuNPXJIG5L0dhgKXCYTRMGzU4n0wImQ/xfmRc4POUFlg==
|
||||
=======
|
||||
version "2.0.2"
|
||||
resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.2.tgz#79d7a78bad4219f4c03d6557a1c72d9ca6ba62d5"
|
||||
integrity sha512-rsZg7eL+Xcxsxk2XlBt9KcG8nOp9iYdKCOikY9x2RFJCyOdNj4MKPQty0e8oZr29vVAzKXr1BmR+kZauti3o1w==
|
||||
>>>>>>> c583c0e73e2d0b08fae52a663ee1bc68247430e7
|
||||
|
||||
"@types/istanbul-lib-report@*":
|
||||
version "3.0.0"
|
||||
|
@ -1635,9 +1688,15 @@
|
|||
"@types/istanbul-lib-coverage" "*"
|
||||
|
||||
"@types/istanbul-reports@^1.1.1":
|
||||
<<<<<<< HEAD
|
||||
version "1.1.1"
|
||||
resolved "https://registry.yarnpkg.com/@types/istanbul-reports/-/istanbul-reports-1.1.1.tgz#7a8cbf6a406f36c8add871625b278eaf0b0d255a"
|
||||
integrity sha512-UpYjBi8xefVChsCoBpKShdxTllC9pwISirfoZsUa2AAdQg/Jd2KQGtSbw+ya7GPo7x/wAPlH6JBhKhAsXUEZNA==
|
||||
=======
|
||||
version "1.1.2"
|
||||
resolved "https://registry.yarnpkg.com/@types/istanbul-reports/-/istanbul-reports-1.1.2.tgz#e875cc689e47bce549ec81f3df5e6f6f11cfaeb2"
|
||||
integrity sha512-P/W9yOX/3oPZSpaYOCQzGqgCQRXn0FFO/V8bWrCQs+wLmvVVxk6CRBXALEvNs9OHIatlnlFokfhuDo2ug01ciw==
|
||||
>>>>>>> c583c0e73e2d0b08fae52a663ee1bc68247430e7
|
||||
dependencies:
|
||||
"@types/istanbul-lib-coverage" "*"
|
||||
"@types/istanbul-lib-report" "*"
|
||||
|
@ -1653,9 +1712,15 @@
|
|||
integrity sha512-tHq6qdbT9U1IRSGf14CL0pUlULksvY9OZ+5eEgl1N7t+OA3tGvNpxJCzuKQlsNgCVwbAs670L1vcVQi8j9HjnA==
|
||||
|
||||
"@types/node@*":
|
||||
<<<<<<< HEAD
|
||||
version "13.13.5"
|
||||
resolved "https://registry.yarnpkg.com/@types/node/-/node-13.13.5.tgz#96ec3b0afafd64a4ccea9107b75bf8489f0e5765"
|
||||
integrity sha512-3ySmiBYJPqgjiHA7oEaIo2Rzz0HrOZ7yrNO5HWyaE5q0lQ3BppDZ3N53Miz8bw2I7gh1/zir2MGVZBvpb1zq9g==
|
||||
=======
|
||||
version "14.0.1"
|
||||
resolved "https://registry.yarnpkg.com/@types/node/-/node-14.0.1.tgz#5d93e0a099cd0acd5ef3d5bde3c086e1f49ff68c"
|
||||
integrity sha512-FAYBGwC+W6F9+huFIDtn43cpy7+SzG+atzRiTfdp3inUKL2hXnd4rG8hylJLIh4+hqrQy1P17kvJByE/z825hA==
|
||||
>>>>>>> c583c0e73e2d0b08fae52a663ee1bc68247430e7
|
||||
|
||||
"@types/parse-json@^4.0.0":
|
||||
version "4.0.0"
|
||||
|
@ -1673,9 +1738,15 @@
|
|||
integrity sha512-ce5d3q03Ex0sy4R14722Rmt6MT07Ua+k4FwDfdcToYJcMKNtRVQvJ6JCAPdAmAnbRb6CsX6aYb9m96NGod9uTw==
|
||||
|
||||
"@types/react-dom@*":
|
||||
<<<<<<< HEAD
|
||||
version "16.9.7"
|
||||
resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.9.7.tgz#60844d48ce252d7b2dccf0c7bb937130e27c0cd2"
|
||||
integrity sha512-GHTYhM8/OwUCf254WO5xqR/aqD3gC9kSTLpopWGpQLpnw23jk44RvMHsyUSEplvRJZdHxhJGMMLF0kCPYHPhQA==
|
||||
=======
|
||||
version "16.9.8"
|
||||
resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.9.8.tgz#fe4c1e11dfc67155733dfa6aa65108b4971cb423"
|
||||
integrity sha512-ykkPQ+5nFknnlU6lDd947WbQ6TE3NNzbQAkInC2EKY1qeYdTKp7onFusmYZb+ityzx2YviqT6BXSu+LyWWJwcA==
|
||||
>>>>>>> c583c0e73e2d0b08fae52a663ee1bc68247430e7
|
||||
dependencies:
|
||||
"@types/react" "*"
|
||||
|
||||
|
@ -1687,9 +1758,15 @@
|
|||
"@types/react" "*"
|
||||
|
||||
"@types/react@*":
|
||||
<<<<<<< HEAD
|
||||
version "16.9.34"
|
||||
resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.34.tgz#f7d5e331c468f53affed17a8a4d488cd44ea9349"
|
||||
integrity sha512-8AJlYMOfPe1KGLKyHpflCg5z46n0b5DbRfqDksxBLBTUpB75ypDBAO9eCUcjNwE6LCUslwTz00yyG/X9gaVtow==
|
||||
=======
|
||||
version "16.9.35"
|
||||
resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.35.tgz#a0830d172e8aadd9bd41709ba2281a3124bbd368"
|
||||
integrity sha512-q0n0SsWcGc8nDqH2GJfWQWUOmZSJhXV64CjVN5SvcNti3TdEaA3AH0D8DwNmMdzjMAC/78tB8nAZIlV8yTz+zQ==
|
||||
>>>>>>> c583c0e73e2d0b08fae52a663ee1bc68247430e7
|
||||
dependencies:
|
||||
"@types/prop-types" "*"
|
||||
csstype "^2.2.0"
|
||||
|
@ -1728,29 +1805,50 @@
|
|||
integrity sha512-FA/BWv8t8ZWJ+gEOnLLd8ygxH/2UFbAvgEonyfN6yWGLKc7zVjbpl2Y4CTjid9h2RfgPP6SEt6uHwEOply00yw==
|
||||
|
||||
"@types/yargs@^13.0.0":
|
||||
<<<<<<< HEAD
|
||||
version "13.0.8"
|
||||
resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-13.0.8.tgz#a38c22def2f1c2068f8971acb3ea734eb3c64a99"
|
||||
integrity sha512-XAvHLwG7UQ+8M4caKIH0ZozIOYay5fQkAgyIXegXT9jPtdIGdhga+sUEdAr1CiG46aB+c64xQEYyEzlwWVTNzA==
|
||||
=======
|
||||
version "13.0.9"
|
||||
resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-13.0.9.tgz#44028e974343c7afcf3960f1a2b1099c39a7b5e1"
|
||||
integrity sha512-xrvhZ4DZewMDhoH1utLtOAwYQy60eYFoXeje30TzM3VOvQlBwQaEpKFq5m34k1wOw2AKIi2pwtiAjdmhvlBUzg==
|
||||
>>>>>>> c583c0e73e2d0b08fae52a663ee1bc68247430e7
|
||||
dependencies:
|
||||
"@types/yargs-parser" "*"
|
||||
|
||||
"@types/yargs@^15.0.0":
|
||||
<<<<<<< HEAD
|
||||
version "15.0.4"
|
||||
resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-15.0.4.tgz#7e5d0f8ca25e9d5849f2ea443cf7c402decd8299"
|
||||
integrity sha512-9T1auFmbPZoxHz0enUFlUuKRy3it01R+hlggyVUMtnCTQRunsQYifnSGb8hET4Xo8yiC0o0r1paW3ud5+rbURg==
|
||||
=======
|
||||
version "15.0.5"
|
||||
resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-15.0.5.tgz#947e9a6561483bdee9adffc983e91a6902af8b79"
|
||||
integrity sha512-Dk/IDOPtOgubt/IaevIUbTgV7doaKkoorvOyYM2CMwuDyP89bekI7H4xLIwunNYiK9jhCkmc6pUrJk3cj2AB9w==
|
||||
>>>>>>> c583c0e73e2d0b08fae52a663ee1bc68247430e7
|
||||
dependencies:
|
||||
"@types/yargs-parser" "*"
|
||||
|
||||
"@typescript-eslint/eslint-plugin@^2.10.0":
|
||||
<<<<<<< HEAD
|
||||
version "2.31.0"
|
||||
resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-2.31.0.tgz#942c921fec5e200b79593c71fafb1e3f57aa2e36"
|
||||
integrity sha512-iIC0Pb8qDaoit+m80Ln/aaeu9zKQdOLF4SHcGLarSeY1gurW6aU4JsOPMjKQwXlw70MvWKZQc6S2NamA8SJ/gg==
|
||||
dependencies:
|
||||
"@typescript-eslint/experimental-utils" "2.31.0"
|
||||
=======
|
||||
version "2.33.0"
|
||||
resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-2.33.0.tgz#d6c8319d5011b4783bb3d2dadf105d8bdd499bd5"
|
||||
integrity sha512-QV6P32Btu1sCI/kTqjTNI/8OpCYyvlGjW5vD8MpTIg+HGE5S88HtT1G+880M4bXlvXj/NjsJJG0aGcVh0DdbeQ==
|
||||
dependencies:
|
||||
"@typescript-eslint/experimental-utils" "2.33.0"
|
||||
>>>>>>> c583c0e73e2d0b08fae52a663ee1bc68247430e7
|
||||
functional-red-black-tree "^1.0.1"
|
||||
regexpp "^3.0.0"
|
||||
tsutils "^3.17.1"
|
||||
|
||||
<<<<<<< HEAD
|
||||
"@typescript-eslint/experimental-utils@2.31.0":
|
||||
version "2.31.0"
|
||||
resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-2.31.0.tgz#a9ec514bf7fd5e5e82bc10dcb6a86d58baae9508"
|
||||
|
@ -1758,10 +1856,20 @@
|
|||
dependencies:
|
||||
"@types/json-schema" "^7.0.3"
|
||||
"@typescript-eslint/typescript-estree" "2.31.0"
|
||||
=======
|
||||
"@typescript-eslint/experimental-utils@2.33.0":
|
||||
version "2.33.0"
|
||||
resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-2.33.0.tgz#000f1e5f344fbea1323dc91cc174805d75f99a03"
|
||||
integrity sha512-qzPM2AuxtMrRq78LwyZa8Qn6gcY8obkIrBs1ehqmQADwkYzTE1Pb4y2W+U3rE/iFkSWcWHG2LS6MJfj6SmHApg==
|
||||
dependencies:
|
||||
"@types/json-schema" "^7.0.3"
|
||||
"@typescript-eslint/typescript-estree" "2.33.0"
|
||||
>>>>>>> c583c0e73e2d0b08fae52a663ee1bc68247430e7
|
||||
eslint-scope "^5.0.0"
|
||||
eslint-utils "^2.0.0"
|
||||
|
||||
"@typescript-eslint/parser@^2.10.0":
|
||||
<<<<<<< HEAD
|
||||
version "2.31.0"
|
||||
resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-2.31.0.tgz#beddd4e8efe64995108b229b2862cd5752d40d6f"
|
||||
integrity sha512-uph+w6xUOlyV2DLSC6o+fBDzZ5i7+3/TxAsH4h3eC64tlga57oMb96vVlXoMwjR/nN+xyWlsnxtbDkB46M2EPQ==
|
||||
|
@ -1775,13 +1883,32 @@
|
|||
version "2.31.0"
|
||||
resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-2.31.0.tgz#ac536c2d46672aa1f27ba0ec2140d53670635cfd"
|
||||
integrity sha512-vxW149bXFXXuBrAak0eKHOzbcu9cvi6iNcJDzEtOkRwGHxJG15chiAQAwhLOsk+86p9GTr/TziYvw+H9kMaIgA==
|
||||
=======
|
||||
version "2.33.0"
|
||||
resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-2.33.0.tgz#395c0ef229ebef883608f8632a34f0acf02b9bdd"
|
||||
integrity sha512-AUtmwUUhJoH6yrtxZMHbRUEMsC2G6z5NSxg9KsROOGqNXasM71I8P2NihtumlWTUCRld70vqIZ6Pm4E5PAziEA==
|
||||
dependencies:
|
||||
"@types/eslint-visitor-keys" "^1.0.0"
|
||||
"@typescript-eslint/experimental-utils" "2.33.0"
|
||||
"@typescript-eslint/typescript-estree" "2.33.0"
|
||||
eslint-visitor-keys "^1.1.0"
|
||||
|
||||
"@typescript-eslint/typescript-estree@2.33.0":
|
||||
version "2.33.0"
|
||||
resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-2.33.0.tgz#33504c050ccafd38f397a645d4e9534d2eccbb5c"
|
||||
integrity sha512-d8rY6/yUxb0+mEwTShCQF2zYQdLlqihukNfG9IUlLYz5y1CH6G/9XYbrxQLq3Z14RNvkCC6oe+OcFlyUpwUbkg==
|
||||
>>>>>>> c583c0e73e2d0b08fae52a663ee1bc68247430e7
|
||||
dependencies:
|
||||
debug "^4.1.1"
|
||||
eslint-visitor-keys "^1.1.0"
|
||||
glob "^7.1.6"
|
||||
is-glob "^4.0.1"
|
||||
lodash "^4.17.15"
|
||||
<<<<<<< HEAD
|
||||
semver "^6.3.0"
|
||||
=======
|
||||
semver "^7.3.2"
|
||||
>>>>>>> c583c0e73e2d0b08fae52a663ee1bc68247430e7
|
||||
tsutils "^3.17.1"
|
||||
|
||||
"@webassemblyjs/ast@1.8.5":
|
||||
|
@ -1982,9 +2109,15 @@ acorn@^6.0.1, acorn@^6.0.4, acorn@^6.2.1:
|
|||
integrity sha512-ZVA9k326Nwrj3Cj9jlh3wGFutC2ZornPNARZwsNYqQYgN0EsV2d53w5RN/co65Ohn4sUAUtb1rSUAOD6XN9idA==
|
||||
|
||||
acorn@^7.1.1:
|
||||
<<<<<<< HEAD
|
||||
version "7.1.1"
|
||||
resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.1.1.tgz#e35668de0b402f359de515c5482a1ab9f89a69bf"
|
||||
integrity sha512-add7dgA5ppRPxCFJoAGfMDi7PIBXq1RtGo7BhbLaxwrXPOmw8gq48Y9ozT01hUKy9byMjlR20EJhu5zlkErEkg==
|
||||
=======
|
||||
version "7.2.0"
|
||||
resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.2.0.tgz#17ea7e40d7c8640ff54a694c889c26f31704effe"
|
||||
integrity sha512-apwXVmYVpQ34m/i71vrApRrRKCWQnZZF1+npOD0WV5xZFfwWOmKGQ2RWlfdy9vWITsenisM8M0Qeq8agcFHNiQ==
|
||||
>>>>>>> c583c0e73e2d0b08fae52a663ee1bc68247430e7
|
||||
|
||||
address@1.1.2, address@^1.0.1:
|
||||
version "1.1.2"
|
||||
|
@ -2970,9 +3103,15 @@ caniuse-api@^3.0.0:
|
|||
lodash.uniq "^4.5.0"
|
||||
|
||||
caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000981, caniuse-lite@^1.0.30001035, caniuse-lite@^1.0.30001039, caniuse-lite@^1.0.30001043:
|
||||
<<<<<<< HEAD
|
||||
version "1.0.30001054"
|
||||
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001054.tgz#7e82fc42d927980b0ce1426c4813df12381e1a75"
|
||||
integrity sha512-jiKlTI6Ur8Kjfj8z0muGrV6FscpRvefcQVPSuMuXnvRCfExU7zlVLNjmOz1TnurWgUrAY7MMmjyy+uTgIl1XHw==
|
||||
=======
|
||||
version "1.0.30001059"
|
||||
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001059.tgz#7bff0613d94b6ea41cb5c864c966d340f8ae6d34"
|
||||
integrity sha512-oOrc+jPJWooKIA0IrNZ5sYlsXc7NP7KLhNWrSGEJhnfSzDvDJ0zd3i6HXsslExY9bbu+x0FQ5C61LcqmPt7bOQ==
|
||||
>>>>>>> c583c0e73e2d0b08fae52a663ee1bc68247430e7
|
||||
|
||||
capture-exit@^2.0.0:
|
||||
version "2.0.0"
|
||||
|
@ -4251,9 +4390,15 @@ ee-first@1.1.1:
|
|||
integrity sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=
|
||||
|
||||
electron-to-chromium@^1.3.378, electron-to-chromium@^1.3.413:
|
||||
<<<<<<< HEAD
|
||||
version "1.3.432"
|
||||
resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.432.tgz#3bf7b191978ff2e8bc3caf811bb52b1e9f9eab25"
|
||||
integrity sha512-/GdNhXyLP5Yl2322CUX/+Xi8NhdHBqL6lD9VJVKjH6CjoPGakvwZ5CpKgj/oOlbzuWWjOvMjDw1bBuAIRCNTlw==
|
||||
=======
|
||||
version "1.3.438"
|
||||
resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.438.tgz#56051a9b148842fec813b113e8070ae892a85920"
|
||||
integrity sha512-QKMcpfA/fCOnqFHsZvKr2haQQb3eXkDI17zT+4hHxJJThyN5nShcG6q1VR8vRiE/2GCJM+0p3PzinYknkdsBYg==
|
||||
>>>>>>> c583c0e73e2d0b08fae52a663ee1bc68247430e7
|
||||
|
||||
elliptic@^6.0.0, elliptic@^6.5.2:
|
||||
version "6.5.2"
|
||||
|
@ -4322,9 +4467,15 @@ entities@^1.1.1:
|
|||
integrity sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w==
|
||||
|
||||
entities@^2.0.0:
|
||||
<<<<<<< HEAD
|
||||
version "2.0.0"
|
||||
resolved "https://registry.yarnpkg.com/entities/-/entities-2.0.0.tgz#68d6084cab1b079767540d80e56a39b423e4abf4"
|
||||
integrity sha512-D9f7V0JSRwIxlRI2mjMqufDrRDnx8p+eEOz7aUM9SuvF8gsBzra0/6tbjl1m8eQHrZlYj6PxqE00hZ1SAIKPLw==
|
||||
=======
|
||||
version "2.0.2"
|
||||
resolved "https://registry.yarnpkg.com/entities/-/entities-2.0.2.tgz#ac74db0bba8d33808bbf36809c3a5c3683531436"
|
||||
integrity sha512-dmD3AvJQBUjKpcNkoqr+x+IF0SdRtPz9Vk0uTy4yWqga9ibB6s4v++QFWNohjiUGoMlF552ZvNyXDxz5iW0qmw==
|
||||
>>>>>>> c583c0e73e2d0b08fae52a663ee1bc68247430e7
|
||||
|
||||
errno@^0.1.3, errno@~0.1.7:
|
||||
version "0.1.7"
|
||||
|
@ -4419,6 +4570,27 @@ escodegen@^1.11.0, escodegen@^1.9.1:
|
|||
optionalDependencies:
|
||||
source-map "~0.6.1"
|
||||
|
||||
<<<<<<< HEAD
|
||||
=======
|
||||
eslint-config-airbnb-base@^14.1.0:
|
||||
version "14.1.0"
|
||||
resolved "https://registry.yarnpkg.com/eslint-config-airbnb-base/-/eslint-config-airbnb-base-14.1.0.tgz#2ba4592dd6843258221d9bff2b6831bd77c874e4"
|
||||
integrity sha512-+XCcfGyCnbzOnktDVhwsCAx+9DmrzEmuwxyHUJpw+kqBVT744OUBrB09khgFKlK1lshVww6qXGsYPZpavoNjJw==
|
||||
dependencies:
|
||||
confusing-browser-globals "^1.0.9"
|
||||
object.assign "^4.1.0"
|
||||
object.entries "^1.1.1"
|
||||
|
||||
eslint-config-airbnb@^18.1.0:
|
||||
version "18.1.0"
|
||||
resolved "https://registry.yarnpkg.com/eslint-config-airbnb/-/eslint-config-airbnb-18.1.0.tgz#724d7e93dadd2169492ff5363c5aaa779e01257d"
|
||||
integrity sha512-kZFuQC/MPnH7KJp6v95xsLBf63G/w7YqdPfQ0MUanxQ7zcKUNG8j+sSY860g3NwCBOa62apw16J6pRN+AOgXzw==
|
||||
dependencies:
|
||||
eslint-config-airbnb-base "^14.1.0"
|
||||
object.assign "^4.1.0"
|
||||
object.entries "^1.1.1"
|
||||
|
||||
>>>>>>> c583c0e73e2d0b08fae52a663ee1bc68247430e7
|
||||
eslint-config-react-app@^5.2.0:
|
||||
version "5.2.1"
|
||||
resolved "https://registry.yarnpkg.com/eslint-config-react-app/-/eslint-config-react-app-5.2.1.tgz#698bf7aeee27f0cea0139eaef261c7bf7dd623df"
|
||||
|
@ -4453,6 +4625,14 @@ eslint-module-utils@^2.4.1:
|
|||
debug "^2.6.9"
|
||||
pkg-dir "^2.0.0"
|
||||
|
||||
<<<<<<< HEAD
|
||||
=======
|
||||
eslint-plugin-chai-friendly@^0.6.0:
|
||||
version "0.6.0"
|
||||
resolved "https://registry.yarnpkg.com/eslint-plugin-chai-friendly/-/eslint-plugin-chai-friendly-0.6.0.tgz#54052fab79302ed0cea76ab997351ea4809bfb77"
|
||||
integrity sha512-Uvvv1gkbRGp/qfN15B0kQyQWg+oFA8buDSqrwmW3egNSk/FpqH2MjQqKOuKwmEL6w4QIQrIjDp+gg6kGGmD3oQ==
|
||||
|
||||
>>>>>>> c583c0e73e2d0b08fae52a663ee1bc68247430e7
|
||||
eslint-plugin-flowtype@4.6.0:
|
||||
version "4.6.0"
|
||||
resolved "https://registry.yarnpkg.com/eslint-plugin-flowtype/-/eslint-plugin-flowtype-4.6.0.tgz#82b2bd6f21770e0e5deede0228e456cb35308451"
|
||||
|
@ -4640,9 +4820,15 @@ etag@~1.8.1:
|
|||
integrity sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=
|
||||
|
||||
eventemitter3@^4.0.0:
|
||||
<<<<<<< HEAD
|
||||
version "4.0.0"
|
||||
resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-4.0.0.tgz#d65176163887ee59f386d64c82610b696a4a74eb"
|
||||
integrity sha512-qerSRB0p+UDEssxTtm6EDKcE7W4OaoisfIMl4CngyEhjpYglocpNg6UEqCvemdGhosAsg4sO2dXJOdyBifPGCg==
|
||||
=======
|
||||
version "4.0.4"
|
||||
resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-4.0.4.tgz#b5463ace635a083d018bdc7c917b4c5f10a85384"
|
||||
integrity sha512-rlaVLnVxtxvoyLsQQFBx53YmXHDxRIzzTLbdfxqi4yocpSjAxXwkU0cScM5JgSKMqEhrZpnvQ2D9gjylR0AimQ==
|
||||
>>>>>>> c583c0e73e2d0b08fae52a663ee1bc68247430e7
|
||||
|
||||
events@^3.0.0:
|
||||
version "3.1.0"
|
||||
|
@ -5654,9 +5840,15 @@ html-escaper@^2.0.0:
|
|||
integrity sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==
|
||||
|
||||
html-minifier-terser@^5.0.1:
|
||||
<<<<<<< HEAD
|
||||
version "5.1.0"
|
||||
resolved "https://registry.yarnpkg.com/html-minifier-terser/-/html-minifier-terser-5.1.0.tgz#95d3df037f04835e9d1a09d1767c0e361a7de916"
|
||||
integrity sha512-tiYE76O1zunboByeB/nFGwUEb263Z3nkNv6Lz2oLC1s6M36bLKfTrjQ+7ssVfaucVllE+N7hh/FbpbxvnIA+LQ==
|
||||
=======
|
||||
version "5.1.1"
|
||||
resolved "https://registry.yarnpkg.com/html-minifier-terser/-/html-minifier-terser-5.1.1.tgz#922e96f1f3bb60832c2634b79884096389b1f054"
|
||||
integrity sha512-ZPr5MNObqnV/T9akshPKbVgyOqLmy+Bxo7juKCfTfnjNniTAMdy4hz21YQqoofMBJD2kdREaqPPdThoR78Tgxg==
|
||||
>>>>>>> c583c0e73e2d0b08fae52a663ee1bc68247430e7
|
||||
dependencies:
|
||||
camel-case "^4.1.1"
|
||||
clean-css "^4.2.3"
|
||||
|
@ -7520,6 +7712,7 @@ min-indent@^1.0.0:
|
|||
resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.0.tgz#cfc45c37e9ec0d8f0a0ec3dd4ef7f7c3abe39256"
|
||||
integrity sha1-z8RcN+nsDY8KDsPdTvf3w6vjklY=
|
||||
|
||||
<<<<<<< HEAD
|
||||
mini-create-react-context@^0.3.0:
|
||||
version "0.3.2"
|
||||
resolved "https://registry.yarnpkg.com/mini-create-react-context/-/mini-create-react-context-0.3.2.tgz#79fc598f283dd623da8e088b05db8cddab250189"
|
||||
|
@ -7528,6 +7721,15 @@ mini-create-react-context@^0.3.0:
|
|||
"@babel/runtime" "^7.4.0"
|
||||
gud "^1.0.0"
|
||||
tiny-warning "^1.0.2"
|
||||
=======
|
||||
mini-create-react-context@^0.4.0:
|
||||
version "0.4.0"
|
||||
resolved "https://registry.yarnpkg.com/mini-create-react-context/-/mini-create-react-context-0.4.0.tgz#df60501c83151db69e28eac0ef08b4002efab040"
|
||||
integrity sha512-b0TytUgFSbgFJGzJqXPKCFCBWigAjpjo+Fl7Vf7ZbKRDptszpppKxXH6DRXEABZ/gcEQczeb0iZ7JvL8e8jjCA==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.5.5"
|
||||
tiny-warning "^1.0.3"
|
||||
>>>>>>> c583c0e73e2d0b08fae52a663ee1bc68247430e7
|
||||
|
||||
mini-css-extract-plugin@0.9.0:
|
||||
version "0.9.0"
|
||||
|
@ -7576,16 +7778,28 @@ minipass-flush@^1.0.5:
|
|||
minipass "^3.0.0"
|
||||
|
||||
minipass-pipeline@^1.2.2:
|
||||
<<<<<<< HEAD
|
||||
version "1.2.2"
|
||||
resolved "https://registry.yarnpkg.com/minipass-pipeline/-/minipass-pipeline-1.2.2.tgz#3dcb6bb4a546e32969c7ad710f2c79a86abba93a"
|
||||
integrity sha512-3JS5A2DKhD2g0Gg8x3yamO0pj7YeKGwVlDS90pF++kxptwx/F+B//roxf9SqYil5tQo65bijy+dAuAFZmYOouA==
|
||||
=======
|
||||
version "1.2.3"
|
||||
resolved "https://registry.yarnpkg.com/minipass-pipeline/-/minipass-pipeline-1.2.3.tgz#55f7839307d74859d6e8ada9c3ebe72cec216a34"
|
||||
integrity sha512-cFOknTvng5vqnwOpDsZTWhNll6Jf8o2x+/diplafmxpuIymAjzoOolZG0VvQf3V2HgqzJNhnuKHYp2BqDgz8IQ==
|
||||
>>>>>>> c583c0e73e2d0b08fae52a663ee1bc68247430e7
|
||||
dependencies:
|
||||
minipass "^3.0.0"
|
||||
|
||||
minipass@^3.0.0, minipass@^3.1.1:
|
||||
<<<<<<< HEAD
|
||||
version "3.1.1"
|
||||
resolved "https://registry.yarnpkg.com/minipass/-/minipass-3.1.1.tgz#7607ce778472a185ad6d89082aa2070f79cedcd5"
|
||||
integrity sha512-UFqVihv6PQgwj8/yTGvl9kPz7xIAY+R5z6XYjRInD3Gk3qx6QGSD6zEcpeG4Dy/lQnv1J6zv8ejV90hyYIKf3w==
|
||||
=======
|
||||
version "3.1.3"
|
||||
resolved "https://registry.yarnpkg.com/minipass/-/minipass-3.1.3.tgz#7d42ff1f39635482e15f9cdb53184deebd5815fd"
|
||||
integrity sha512-Mgd2GdMVzY+x3IJ+oHnVM+KG3lA5c8tnabyJKmHSaG2kAGpudxuOf8ToDkhumF7UzME7DecbQE9uOZhNm7PuJg==
|
||||
>>>>>>> c583c0e73e2d0b08fae52a663ee1bc68247430e7
|
||||
dependencies:
|
||||
yallist "^4.0.0"
|
||||
|
||||
|
@ -9173,9 +9387,15 @@ postcss@7.0.21:
|
|||
supports-color "^6.1.0"
|
||||
|
||||
postcss@^7, postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.14, postcss@^7.0.16, postcss@^7.0.17, postcss@^7.0.2, postcss@^7.0.23, postcss@^7.0.27, postcss@^7.0.5, postcss@^7.0.6:
|
||||
<<<<<<< HEAD
|
||||
version "7.0.29"
|
||||
resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.29.tgz#d3a903872bd52280b83bce38cdc83ce55c06129e"
|
||||
integrity sha512-ba0ApvR3LxGvRMMiUa9n0WR4HjzcYm7tS+ht4/2Nd0NLtHpPIH77fuB9Xh1/yJVz9O/E/95Y/dn8ygWsyffXtw==
|
||||
=======
|
||||
version "7.0.30"
|
||||
resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.30.tgz#cc9378beffe46a02cbc4506a0477d05fcea9a8e2"
|
||||
integrity sha512-nu/0m+NtIzoubO+xdAlwZl/u5S5vi/y6BCsoL8D+8IxsD3XvBS8X4YEADNIVXKVuQvduiucnRv+vPIqj56EGMQ==
|
||||
>>>>>>> c583c0e73e2d0b08fae52a663ee1bc68247430e7
|
||||
dependencies:
|
||||
chalk "^2.4.2"
|
||||
source-map "^0.6.1"
|
||||
|
@ -9595,14 +9815,21 @@ react-round-slider@^1.0.1:
|
|||
react "16.4.2"
|
||||
|
||||
react-router-dom@^5.1.2:
|
||||
<<<<<<< HEAD
|
||||
version "5.1.2"
|
||||
resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-5.1.2.tgz#06701b834352f44d37fbb6311f870f84c76b9c18"
|
||||
integrity sha512-7BPHAaIwWpZS074UKaw1FjVdZBSVWEk8IuDXdB+OkLb8vd/WRQIpA4ag9WQk61aEfQs47wHyjWUoUGGZxpQXew==
|
||||
=======
|
||||
version "5.2.0"
|
||||
resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-5.2.0.tgz#9e65a4d0c45e13289e66c7b17c7e175d0ea15662"
|
||||
integrity sha512-gxAmfylo2QUjcwxI63RhQ5G85Qqt4voZpUXSEqCwykV0baaOTQDR1f0PmY8AELqIyVc0NEZUj0Gov5lNGcXgsA==
|
||||
>>>>>>> c583c0e73e2d0b08fae52a663ee1bc68247430e7
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.1.2"
|
||||
history "^4.9.0"
|
||||
loose-envify "^1.3.1"
|
||||
prop-types "^15.6.2"
|
||||
<<<<<<< HEAD
|
||||
react-router "5.1.2"
|
||||
tiny-invariant "^1.0.2"
|
||||
tiny-warning "^1.0.0"
|
||||
|
@ -9611,12 +9838,26 @@ react-router@5.1.2, react-router@^5.1.2:
|
|||
version "5.1.2"
|
||||
resolved "https://registry.yarnpkg.com/react-router/-/react-router-5.1.2.tgz#6ea51d789cb36a6be1ba5f7c0d48dd9e817d3418"
|
||||
integrity sha512-yjEuMFy1ONK246B+rsa0cUam5OeAQ8pyclRDgpxuSCrAlJ1qN9uZ5IgyKC7gQg0w8OM50NXHEegPh/ks9YuR2A==
|
||||
=======
|
||||
react-router "5.2.0"
|
||||
tiny-invariant "^1.0.2"
|
||||
tiny-warning "^1.0.0"
|
||||
|
||||
react-router@5.2.0, react-router@^5.1.2:
|
||||
version "5.2.0"
|
||||
resolved "https://registry.yarnpkg.com/react-router/-/react-router-5.2.0.tgz#424e75641ca8747fbf76e5ecca69781aa37ea293"
|
||||
integrity sha512-smz1DUuFHRKdcJC0jobGo8cVbhO3x50tCL4icacOlcwDOEQPq4TMqwx3sY1TP+DvtTgz4nm3thuo7A+BK2U0Dw==
|
||||
>>>>>>> c583c0e73e2d0b08fae52a663ee1bc68247430e7
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.1.2"
|
||||
history "^4.9.0"
|
||||
hoist-non-react-statics "^3.1.0"
|
||||
loose-envify "^1.3.1"
|
||||
<<<<<<< HEAD
|
||||
mini-create-react-context "^0.3.0"
|
||||
=======
|
||||
mini-create-react-context "^0.4.0"
|
||||
>>>>>>> c583c0e73e2d0b08fae52a663ee1bc68247430e7
|
||||
path-to-regexp "^1.7.0"
|
||||
prop-types "^15.6.2"
|
||||
react-is "^16.6.0"
|
||||
|
@ -9683,7 +9924,11 @@ react-scripts@3.4.0:
|
|||
optionalDependencies:
|
||||
fsevents "2.1.2"
|
||||
|
||||
<<<<<<< HEAD
|
||||
react-transition-group@^4.3.0:
|
||||
=======
|
||||
react-transition-group@^4.4.0:
|
||||
>>>>>>> c583c0e73e2d0b08fae52a663ee1bc68247430e7
|
||||
version "4.4.1"
|
||||
resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.1.tgz#63868f9325a38ea5ee9535d828327f85773345c9"
|
||||
integrity sha512-Djqr7OQ2aPUiYurhPalTrVy9ddmFCCzwhqQmtN+J3+3DzLO209Fdr70QrN8Z3DsglWql6iY1lDWAfpFiBtuKGw==
|
||||
|
@ -10164,9 +10409,15 @@ safe-buffer@5.1.2, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
|
|||
integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
|
||||
|
||||
safe-buffer@>=5.1.0, safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@^5.1.1, safe-buffer@^5.1.2, safe-buffer@^5.2.0, safe-buffer@~5.2.0:
|
||||
<<<<<<< HEAD
|
||||
version "5.2.0"
|
||||
resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.0.tgz#b74daec49b1148f88c64b68d49b1e815c1f2f519"
|
||||
integrity sha512-fZEwUGbVl7kouZs1jCdMLdt95hdIv0ZeHg6L7qPeciMZhZ+/gdesW4wgTARkrFWEpspjEATAzUGPG8N2jJiwbg==
|
||||
=======
|
||||
version "5.2.1"
|
||||
resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
|
||||
integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
|
||||
>>>>>>> c583c0e73e2d0b08fae52a663ee1bc68247430e7
|
||||
|
||||
safe-regex@^1.1.0:
|
||||
version "1.1.0"
|
||||
|
@ -10299,6 +10550,14 @@ semver@7.0.0:
|
|||
resolved "https://registry.yarnpkg.com/semver/-/semver-7.0.0.tgz#5f3ca35761e47e05b206c6daff2cf814f0316b8e"
|
||||
integrity sha512-+GB6zVA9LWh6zovYQLALHwv5rb2PHGlJi3lfiqIHxR0uuwCgefcOJc59v9fv1w8GbStwxuuqqAjI9NMAOOgq1A==
|
||||
|
||||
<<<<<<< HEAD
|
||||
=======
|
||||
semver@^7.3.2:
|
||||
version "7.3.2"
|
||||
resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.2.tgz#604962b052b81ed0786aae84389ffba70ffd3938"
|
||||
integrity sha512-OrOb32TeeambH6UrhtShmF7CRDqhL6/5XpPNp2DuRH6+9QLw/orhp72j87v8Qa1ScDkvrrBNpZcDejAirJmfXQ==
|
||||
|
||||
>>>>>>> c583c0e73e2d0b08fae52a663ee1bc68247430e7
|
||||
send@0.17.1:
|
||||
version "0.17.1"
|
||||
resolved "https://registry.yarnpkg.com/send/-/send-0.17.1.tgz#c1d8b059f7900f7466dd4938bdc44e11ddb376c8"
|
||||
|
@ -10625,9 +10884,15 @@ spdx-exceptions@^2.1.0:
|
|||
integrity sha512-/tTrYOC7PPI1nUAgx34hUpqXuyJG+DTHJTnIULG4rDygi4xu/tfgmq1e1cIRwRzwZgo4NLySi+ricLkZkw4i5A==
|
||||
|
||||
spdx-expression-parse@^3.0.0:
|
||||
<<<<<<< HEAD
|
||||
version "3.0.0"
|
||||
resolved "https://registry.yarnpkg.com/spdx-expression-parse/-/spdx-expression-parse-3.0.0.tgz#99e119b7a5da00e05491c9fa338b7904823b41d0"
|
||||
integrity sha512-Yg6D3XpRD4kkOmTpdgbUiEJFKghJH03fiC1OPll5h/0sO6neh2jqRDVHOQ4o/LMea0tgCkbMgea5ip/e+MkWyg==
|
||||
=======
|
||||
version "3.0.1"
|
||||
resolved "https://registry.yarnpkg.com/spdx-expression-parse/-/spdx-expression-parse-3.0.1.tgz#cf70f50482eefdc98e3ce0a6833e4a53ceeba679"
|
||||
integrity sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==
|
||||
>>>>>>> c583c0e73e2d0b08fae52a663ee1bc68247430e7
|
||||
dependencies:
|
||||
spdx-exceptions "^2.1.0"
|
||||
spdx-license-ids "^3.0.0"
|
||||
|
@ -11172,7 +11437,11 @@ tiny-invariant@^1.0.2:
|
|||
resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.1.0.tgz#634c5f8efdc27714b7f386c35e6760991d230875"
|
||||
integrity sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw==
|
||||
|
||||
<<<<<<< HEAD
|
||||
tiny-warning@^1.0.0, tiny-warning@^1.0.2:
|
||||
=======
|
||||
tiny-warning@^1.0.0, tiny-warning@^1.0.2, tiny-warning@^1.0.3:
|
||||
>>>>>>> c583c0e73e2d0b08fae52a663ee1bc68247430e7
|
||||
version "1.0.3"
|
||||
resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
|
||||
integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
|
||||
|
@ -11274,9 +11543,15 @@ ts-pnp@^1.1.2:
|
|||
integrity sha512-csd+vJOb/gkzvcCHgTGSChYpy5f1/XKNsmvBGO4JXS+z1v2HobugDz4s1IeFXM3wZB44uczs+eazB5Q/ccdhQw==
|
||||
|
||||
tslib@^1.10.0, tslib@^1.8.1, tslib@^1.9.0:
|
||||
<<<<<<< HEAD
|
||||
version "1.11.2"
|
||||
resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.11.2.tgz#9c79d83272c9a7aaf166f73915c9667ecdde3cc9"
|
||||
integrity sha512-tTSkux6IGPnUGUd1XAZHcpu85MOkIl5zX49pO+jfsie3eP0B6pyhOlLXm3cAC6T7s+euSDDUUV+Acop5WmtkVg==
|
||||
=======
|
||||
version "1.13.0"
|
||||
resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.13.0.tgz#c881e13cc7015894ed914862d276436fa9a47043"
|
||||
integrity sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q==
|
||||
>>>>>>> c583c0e73e2d0b08fae52a663ee1bc68247430e7
|
||||
|
||||
tsutils@^3.17.1:
|
||||
version "3.17.1"
|
||||
|
|
Loading…
Reference in a new issue