smarthut/frontend
2
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Prettier reformat

Browse source
This commit is contained in:
Claudio Maggioni 2020-05-08 15:45:08 +02:00
parent 3e53f11da0
commit e5bf0dbd83
6 changed files with 1366 additions and 1435 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
smart-hut/src/components/HeaderController.js
View file

@ -77,14 +77,20 @@ export class MyHeader extends React.Component {
<Button basic inverted onClick={this.logout}> <Button basic inverted onClick={this.logout}>
Logout Logout
</Button> </Button>
<Segment compact style={{margin: "auto", marginTop: "1em", textAlign: "center"}}> <Segment
<Checkbox compact
label={<label style={{
>Share cameras</label>} margin: "auto",
checked={this.props.cameraEnabled} marginTop: "1em",
toggle textAlign: "center",
onChange={(e, val) => this.setCameraEnabled(val.checked)} }}
/> >
<Checkbox
label={<label>Share cameras</label>}
checked={this.props.cameraEnabled}
toggle
onChange={(e, val) => this.setCameraEnabled(val.checked)}
/>
</Segment> </Segment>
</Grid.Column> </Grid.Column>
</Grid.Row> </Grid.Row>
@ -108,14 +114,20 @@ export class MyHeader extends React.Component {
</Label> </Label>
<Divider /> <Divider />
<Button onClick={this.logout}>Logout</Button> <Button onClick={this.logout}>Logout</Button>
<Segment compact style={{margin: "auto", marginTop: "1em", textAlign: "center"}}> <Segment
<Checkbox compact
label={<label style={{
>Share cameras</label>} margin: "auto",
checked={this.props.cameraEnabled} marginTop: "1em",
toggle textAlign: "center",
onChange={(e, val) => this.setCameraEnabled(val.checked)} }}
/> >
<Checkbox
label={<label>Share cameras</label>}
checked={this.props.cameraEnabled}
toggle
onChange={(e, val) => this.setCameraEnabled(val.checked)}
/>
</Segment> </Segment>
</Grid.Column> </Grid.Column>
</Grid.Row> </Grid.Row>

24
smart-hut/src/components/SceneModal.js
View file

@ -115,11 +115,11 @@ class SceneModal extends Component {
}; };
openModal = (e) => { openModal = (e) => {
this.setState({ ...this.state, openModal: true }); this.setState({ ...this.state, openModal: true });
}; };
updateIcon(e) { updateIcon(e) {
this.setState({ ...this.state, selectedIcon: e }); this.setState({ ...this.state, selectedIcon: e });
} }
setCopyFrom(_, copyFrom) { setCopyFrom(_, copyFrom) {
@ -128,7 +128,7 @@ class SceneModal extends Component {
setGuestAccessEnabled(val) { setGuestAccessEnabled(val) {
console.log(this.state, val); console.log(this.state, val);
this.setState({ ...this.state, guestAccessEnabled: val }); this.setState({ ...this.state, guestAccessEnabled: val });
} }
render() { render() {
@ -224,15 +224,15 @@ class SceneModal extends Component {
)} )}
{this.type === "modify" ? ( {this.type === "modify" ? (
<Form.Field> <Form.Field>
<Segment compact style={{ marginBottom: "1rem"}}> <Segment compact style={{ marginBottom: "1rem" }}>
<Checkbox <Checkbox
label="Enable guest access" label="Enable guest access"
checked={this.state.guestAccessEnabled} checked={this.state.guestAccessEnabled}
toggle toggle
onChange={(e, val) => onChange={(e, val) =>
this.setGuestAccessEnabled(val.checked) this.setGuestAccessEnabled(val.checked)
} }
/> />
</Segment> </Segment>
</Form.Field> </Form.Field>
) : null} ) : null}

1171
smart-hut/src/components/dashboard/AutomationCreationModal.js
View file

File diff suppressed because it is too large Load diff

300
smart-hut/src/components/dashboard/AutomationsPanel.js
View file

@ -4,178 +4,168 @@ import { RemoteService } from "../../remote";
import "./Automations.css"; import "./Automations.css";
import { import {
Segment, Segment,
Grid, Grid,
Header, Header,
Button, Button,
List, List,
Divider, Divider,
Menu, Menu,
} from "semantic-ui-react"; } from "semantic-ui-react";
import CreateAutomation, { operands } from "./AutomationCreationModal"; import CreateAutomation, { operands } from "./AutomationCreationModal";
const Automation = ({ automation, devices, scenes, removeAutomation }) => { const Automation = ({ automation, devices, scenes, removeAutomation }) => {
const { triggers } = automation; const { triggers } = automation;
const scenePriorities = automation.scenes; const scenePriorities = automation.scenes;
const getOperator = (operand) => const getOperator = (operand) =>
operands.filter((o) => o.key === operand)[0].text; operands.filter((o) => o.key === operand)[0].text;
return ( return (
<React.Fragment> <React.Fragment>
<Header style={{ display: "inline", marginRight: "1rem" }}> <Header style={{ display: "inline", marginRight: "1rem" }}>
{automation.name} {automation.name}
</Header> </Header>
<CreateAutomation id={automation.id} /> <CreateAutomation id={automation.id} />
<Button <Button
style={{ display: "inline" }} style={{ display: "inline" }}
circular circular
onClick={() => removeAutomation(automation.id)} onClick={() => removeAutomation(automation.id)}
color="red" color="red"
size="small" size="small"
icon={"trash alternate outline"} icon={"trash alternate outline"}
/> />
<Segment placeholder> <Segment placeholder>
<Grid columns={2} stackable textAlign="center"> <Grid columns={2} stackable textAlign="center">
<Divider vertical></Divider> <Divider vertical></Divider>
<Grid.Row verticalAlign="middle"> <Grid.Row verticalAlign="middle">
<Grid.Column> <Grid.Column>
<Header>Triggers</Header> <Header>Triggers</Header>
<List divided relaxed> <List divided relaxed>
{triggers !== undefined && {triggers !== undefined &&
triggers.map((trigger) => { triggers.map((trigger) => {
const device = devices.filter( const device = devices.filter(
(d) => d.id === trigger.deviceId (d) => d.id === trigger.deviceId
)[0]; )[0];
return ( return (
<Menu key={trigger.id} compact> <Menu key={trigger.id} compact>
<Menu.Item as="span"> <Menu.Item as="span">
{device.name}{" "} {device.name}{" "}
{trigger.operator {trigger.operator
? getOperator( ? getOperator(trigger.operator) +
trigger.operator " " +
) + trigger.range
" " + : trigger.on
trigger.range ? " - on"
: trigger.on : " - off"}
? " - on" </Menu.Item>
: " - off"} </Menu>
</Menu.Item> );
</Menu> })}
); </List>
})} </Grid.Column>
</List> <Grid.Column>
</Grid.Column> <Header>Scenes</Header>
<Grid.Column> <List divided relaxed>
<Header>Scenes</Header> {scenePriorities !== undefined &&
<List divided relaxed> scenePriorities.map((sp) => {
{scenePriorities !== undefined && const sceneData = scenes.filter(
scenePriorities.map((sp) => { (s) => s.id === sp.sceneId
const sceneData = scenes.filter( )[0];
(s) => s.id === sp.sceneId if (!sceneData) return "";
)[0]; return (
if (!sceneData) return ""; <Menu key={sceneData.id} compact>
return ( <Menu.Item as="span">{sceneData.name}</Menu.Item>
<Menu key={sceneData.id} compact> </Menu>
<Menu.Item as="span"> );
{sceneData.name} })}
</Menu.Item> </List>
</Menu> </Grid.Column>
); </Grid.Row>
})} </Grid>
</List> </Segment>
</Grid.Column> </React.Fragment>
</Grid.Row> );
</Grid>
</Segment>
</React.Fragment>
);
}; };
class AutomationsPanel extends Component { class AutomationsPanel extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { openModal: false }; this.state = { openModal: false };
this.getDevices(); this.getDevices();
this.getScenes(); this.getScenes();
this.getAutomations(); this.getAutomations();
} }
getScenes() { getScenes() {
this.props.fetchAllScenes().catch(console.error); this.props.fetchAllScenes().catch(console.error);
} }
getDevices() { getDevices() {
this.props this.props
.fetchDevices() .fetchDevices()
.catch((err) => console.error(`error fetching devices:`, err)); .catch((err) => console.error(`error fetching devices:`, err));
} }
getAutomations() { getAutomations() {
this.props this.props
.fetchAutomations() .fetchAutomations()
.catch((err) => console.error(`error fetching automations:`, err)); .catch((err) => console.error(`error fetching automations:`, err));
} }
removeAutomation = (id) => { removeAutomation = (id) => {
this.props this.props
.deleteAutomation(id) .deleteAutomation(id)
.catch((err) => .catch((err) => console.error(`error removing automation ${id}:`, err));
console.error(`error removing automation ${id}:`, err) };
render() {
return (
<Grid style={{ marginTop: "3rem" }}>
<Grid.Row>
<Grid.Column textAlign="center" width={16}>
{!this.state.openModal ? (
<List>
<CreateAutomation />
</List>
) : (
<Button color="green">CREATE AUTOMATION</Button>
)}
</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>
); );
}; })}
</Grid.Row>
render() { </Grid>
return ( );
<Grid style={{ marginTop: "3rem" }}> }
<Grid.Row>
<Grid.Column textAlign="center" width={16}>
{!this.state.openModal ? (
<List>
<CreateAutomation />
</List>
) : (
<Button color="green">CREATE AUTOMATION</Button>
)}
</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>
);
})}
</Grid.Row>
</Grid>
);
}
} }
const mapStateToProps = (state, _) => ({ const mapStateToProps = (state, _) => ({
activeRoom: state.active.activeRoom, activeRoom: state.active.activeRoom,
activeTab: state.active.activeTab, activeTab: state.active.activeTab,
get scenes() { get scenes() {
return Object.values(state.scenes); return Object.values(state.scenes);
}, },
get devices() { get devices() {
return Object.values(state.devices); return Object.values(state.devices);
}, },
get automations() { get automations() {
return Object.values(state.automations); return Object.values(state.automations);
}, },
}); });
const AutomationsPanelContainer = connect( const AutomationsPanelContainer = connect(
mapStateToProps, mapStateToProps,
RemoteService RemoteService
)(AutomationsPanel); )(AutomationsPanel);
export default AutomationsPanelContainer; export default AutomationsPanelContainer;

7
smart-hut/src/components/dashboard/devices/Sensor.js
View file

@ -57,13 +57,6 @@ class Sensor extends Component {
this.name = "Sensor"; this.name = "Sensor";
} }
// setName = () => {
// if (this.props.device.name.length > 15) {
// return this.props.device.name.slice(0, 12) + "...";
// }
// return this.props.device.name;
// };
componentDidUpdate(prevProps) { componentDidUpdate(prevProps) {
if ( if (
this.props.stateOrDevice.kind === "sensor" && this.props.stateOrDevice.kind === "sensor" &&

1255
smart-hut/src/store.js
View file

File diff suppressed because it is too large Load diff