Prettier reformat
This commit is contained in:
parent
3e53f11da0
commit
e5bf0dbd83
6 changed files with 1366 additions and 1435 deletions
|
|
@ -77,14 +77,20 @@ export class MyHeader extends React.Component {
|
|||
<Button basic inverted onClick={this.logout}>
|
||||
Logout
|
||||
</Button>
|
||||
<Segment compact style={{margin: "auto", marginTop: "1em", textAlign: "center"}}>
|
||||
<Checkbox
|
||||
label={<label
|
||||
>Share cameras</label>}
|
||||
checked={this.props.cameraEnabled}
|
||||
toggle
|
||||
onChange={(e, val) => this.setCameraEnabled(val.checked)}
|
||||
/>
|
||||
<Segment
|
||||
compact
|
||||
style={{
|
||||
margin: "auto",
|
||||
marginTop: "1em",
|
||||
textAlign: "center",
|
||||
}}
|
||||
>
|
||||
<Checkbox
|
||||
label={<label>Share cameras</label>}
|
||||
checked={this.props.cameraEnabled}
|
||||
toggle
|
||||
onChange={(e, val) => this.setCameraEnabled(val.checked)}
|
||||
/>
|
||||
</Segment>
|
||||
</Grid.Column>
|
||||
</Grid.Row>
|
||||
|
|
@ -108,14 +114,20 @@ export class MyHeader extends React.Component {
|
|||
</Label>
|
||||
<Divider />
|
||||
<Button onClick={this.logout}>Logout</Button>
|
||||
<Segment compact style={{margin: "auto", marginTop: "1em", textAlign: "center"}}>
|
||||
<Checkbox
|
||||
label={<label
|
||||
>Share cameras</label>}
|
||||
checked={this.props.cameraEnabled}
|
||||
toggle
|
||||
onChange={(e, val) => this.setCameraEnabled(val.checked)}
|
||||
/>
|
||||
<Segment
|
||||
compact
|
||||
style={{
|
||||
margin: "auto",
|
||||
marginTop: "1em",
|
||||
textAlign: "center",
|
||||
}}
|
||||
>
|
||||
<Checkbox
|
||||
label={<label>Share cameras</label>}
|
||||
checked={this.props.cameraEnabled}
|
||||
toggle
|
||||
onChange={(e, val) => this.setCameraEnabled(val.checked)}
|
||||
/>
|
||||
</Segment>
|
||||
</Grid.Column>
|
||||
</Grid.Row>
|
||||
|
|
|
|||
|
|
@ -115,11 +115,11 @@ class SceneModal extends Component {
|
|||
};
|
||||
|
||||
openModal = (e) => {
|
||||
this.setState({ ...this.state, openModal: true });
|
||||
this.setState({ ...this.state, openModal: true });
|
||||
};
|
||||
|
||||
updateIcon(e) {
|
||||
this.setState({ ...this.state, selectedIcon: e });
|
||||
this.setState({ ...this.state, selectedIcon: e });
|
||||
}
|
||||
|
||||
setCopyFrom(_, copyFrom) {
|
||||
|
|
@ -128,7 +128,7 @@ class SceneModal extends Component {
|
|||
|
||||
setGuestAccessEnabled(val) {
|
||||
console.log(this.state, val);
|
||||
this.setState({ ...this.state, guestAccessEnabled: val });
|
||||
this.setState({ ...this.state, guestAccessEnabled: val });
|
||||
}
|
||||
|
||||
render() {
|
||||
|
|
@ -224,15 +224,15 @@ class SceneModal extends Component {
|
|||
)}
|
||||
{this.type === "modify" ? (
|
||||
<Form.Field>
|
||||
<Segment compact style={{ marginBottom: "1rem"}}>
|
||||
<Checkbox
|
||||
label="Enable guest access"
|
||||
checked={this.state.guestAccessEnabled}
|
||||
toggle
|
||||
onChange={(e, val) =>
|
||||
this.setGuestAccessEnabled(val.checked)
|
||||
}
|
||||
/>
|
||||
<Segment compact style={{ marginBottom: "1rem" }}>
|
||||
<Checkbox
|
||||
label="Enable guest access"
|
||||
checked={this.state.guestAccessEnabled}
|
||||
toggle
|
||||
onChange={(e, val) =>
|
||||
this.setGuestAccessEnabled(val.checked)
|
||||
}
|
||||
/>
|
||||
</Segment>
|
||||
</Form.Field>
|
||||
) : null}
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -4,178 +4,168 @@ import { RemoteService } from "../../remote";
|
|||
import "./Automations.css";
|
||||
|
||||
import {
|
||||
Segment,
|
||||
Grid,
|
||||
Header,
|
||||
Button,
|
||||
List,
|
||||
Divider,
|
||||
Menu,
|
||||
Segment,
|
||||
Grid,
|
||||
Header,
|
||||
Button,
|
||||
List,
|
||||
Divider,
|
||||
Menu,
|
||||
} from "semantic-ui-react";
|
||||
import CreateAutomation, { operands } from "./AutomationCreationModal";
|
||||
|
||||
const Automation = ({ automation, devices, scenes, removeAutomation }) => {
|
||||
const { triggers } = automation;
|
||||
const scenePriorities = automation.scenes;
|
||||
const getOperator = (operand) =>
|
||||
operands.filter((o) => o.key === operand)[0].text;
|
||||
const { triggers } = automation;
|
||||
const scenePriorities = automation.scenes;
|
||||
const getOperator = (operand) =>
|
||||
operands.filter((o) => o.key === operand)[0].text;
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<Header style={{ display: "inline", marginRight: "1rem" }}>
|
||||
{automation.name}
|
||||
</Header>
|
||||
<CreateAutomation id={automation.id} />
|
||||
<Button
|
||||
style={{ display: "inline" }}
|
||||
circular
|
||||
onClick={() => removeAutomation(automation.id)}
|
||||
color="red"
|
||||
size="small"
|
||||
icon={"trash alternate outline"}
|
||||
/>
|
||||
<Segment placeholder>
|
||||
<Grid columns={2} stackable textAlign="center">
|
||||
<Divider vertical></Divider>
|
||||
<Grid.Row verticalAlign="middle">
|
||||
<Grid.Column>
|
||||
<Header>Triggers</Header>
|
||||
<List divided relaxed>
|
||||
{triggers !== undefined &&
|
||||
triggers.map((trigger) => {
|
||||
const device = devices.filter(
|
||||
(d) => d.id === trigger.deviceId
|
||||
)[0];
|
||||
return (
|
||||
<Menu key={trigger.id} compact>
|
||||
<Menu.Item as="span">
|
||||
{device.name}{" "}
|
||||
{trigger.operator
|
||||
? getOperator(
|
||||
trigger.operator
|
||||
) +
|
||||
" " +
|
||||
trigger.range
|
||||
: trigger.on
|
||||
? " - on"
|
||||
: " - off"}
|
||||
</Menu.Item>
|
||||
</Menu>
|
||||
);
|
||||
})}
|
||||
</List>
|
||||
</Grid.Column>
|
||||
<Grid.Column>
|
||||
<Header>Scenes</Header>
|
||||
<List divided relaxed>
|
||||
{scenePriorities !== undefined &&
|
||||
scenePriorities.map((sp) => {
|
||||
const sceneData = scenes.filter(
|
||||
(s) => s.id === sp.sceneId
|
||||
)[0];
|
||||
if (!sceneData) return "";
|
||||
return (
|
||||
<Menu key={sceneData.id} compact>
|
||||
<Menu.Item as="span">
|
||||
{sceneData.name}
|
||||
</Menu.Item>
|
||||
</Menu>
|
||||
);
|
||||
})}
|
||||
</List>
|
||||
</Grid.Column>
|
||||
</Grid.Row>
|
||||
</Grid>
|
||||
</Segment>
|
||||
</React.Fragment>
|
||||
);
|
||||
return (
|
||||
<React.Fragment>
|
||||
<Header style={{ display: "inline", marginRight: "1rem" }}>
|
||||
{automation.name}
|
||||
</Header>
|
||||
<CreateAutomation id={automation.id} />
|
||||
<Button
|
||||
style={{ display: "inline" }}
|
||||
circular
|
||||
onClick={() => removeAutomation(automation.id)}
|
||||
color="red"
|
||||
size="small"
|
||||
icon={"trash alternate outline"}
|
||||
/>
|
||||
<Segment placeholder>
|
||||
<Grid columns={2} stackable textAlign="center">
|
||||
<Divider vertical></Divider>
|
||||
<Grid.Row verticalAlign="middle">
|
||||
<Grid.Column>
|
||||
<Header>Triggers</Header>
|
||||
<List divided relaxed>
|
||||
{triggers !== undefined &&
|
||||
triggers.map((trigger) => {
|
||||
const device = devices.filter(
|
||||
(d) => d.id === trigger.deviceId
|
||||
)[0];
|
||||
return (
|
||||
<Menu key={trigger.id} compact>
|
||||
<Menu.Item as="span">
|
||||
{device.name}{" "}
|
||||
{trigger.operator
|
||||
? getOperator(trigger.operator) +
|
||||
" " +
|
||||
trigger.range
|
||||
: trigger.on
|
||||
? " - on"
|
||||
: " - off"}
|
||||
</Menu.Item>
|
||||
</Menu>
|
||||
);
|
||||
})}
|
||||
</List>
|
||||
</Grid.Column>
|
||||
<Grid.Column>
|
||||
<Header>Scenes</Header>
|
||||
<List divided relaxed>
|
||||
{scenePriorities !== undefined &&
|
||||
scenePriorities.map((sp) => {
|
||||
const sceneData = scenes.filter(
|
||||
(s) => s.id === sp.sceneId
|
||||
)[0];
|
||||
if (!sceneData) return "";
|
||||
return (
|
||||
<Menu key={sceneData.id} compact>
|
||||
<Menu.Item as="span">{sceneData.name}</Menu.Item>
|
||||
</Menu>
|
||||
);
|
||||
})}
|
||||
</List>
|
||||
</Grid.Column>
|
||||
</Grid.Row>
|
||||
</Grid>
|
||||
</Segment>
|
||||
</React.Fragment>
|
||||
);
|
||||
};
|
||||
|
||||
class AutomationsPanel extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = { openModal: false };
|
||||
this.getDevices();
|
||||
this.getScenes();
|
||||
this.getAutomations();
|
||||
}
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = { openModal: false };
|
||||
this.getDevices();
|
||||
this.getScenes();
|
||||
this.getAutomations();
|
||||
}
|
||||
|
||||
getScenes() {
|
||||
this.props.fetchAllScenes().catch(console.error);
|
||||
}
|
||||
getScenes() {
|
||||
this.props.fetchAllScenes().catch(console.error);
|
||||
}
|
||||
|
||||
getDevices() {
|
||||
this.props
|
||||
.fetchDevices()
|
||||
.catch((err) => console.error(`error fetching devices:`, err));
|
||||
}
|
||||
getDevices() {
|
||||
this.props
|
||||
.fetchDevices()
|
||||
.catch((err) => console.error(`error fetching devices:`, err));
|
||||
}
|
||||
|
||||
getAutomations() {
|
||||
this.props
|
||||
.fetchAutomations()
|
||||
.catch((err) => console.error(`error fetching automations:`, err));
|
||||
}
|
||||
getAutomations() {
|
||||
this.props
|
||||
.fetchAutomations()
|
||||
.catch((err) => console.error(`error fetching automations:`, err));
|
||||
}
|
||||
|
||||
removeAutomation = (id) => {
|
||||
this.props
|
||||
.deleteAutomation(id)
|
||||
.catch((err) =>
|
||||
console.error(`error removing automation ${id}:`, err)
|
||||
removeAutomation = (id) => {
|
||||
this.props
|
||||
.deleteAutomation(id)
|
||||
.catch((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>
|
||||
);
|
||||
};
|
||||
|
||||
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>
|
||||
</Grid>
|
||||
);
|
||||
}
|
||||
})}
|
||||
</Grid.Row>
|
||||
</Grid>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const mapStateToProps = (state, _) => ({
|
||||
activeRoom: state.active.activeRoom,
|
||||
activeTab: state.active.activeTab,
|
||||
get scenes() {
|
||||
return Object.values(state.scenes);
|
||||
},
|
||||
get devices() {
|
||||
return Object.values(state.devices);
|
||||
},
|
||||
get automations() {
|
||||
return Object.values(state.automations);
|
||||
},
|
||||
activeRoom: state.active.activeRoom,
|
||||
activeTab: state.active.activeTab,
|
||||
get scenes() {
|
||||
return Object.values(state.scenes);
|
||||
},
|
||||
get devices() {
|
||||
return Object.values(state.devices);
|
||||
},
|
||||
get automations() {
|
||||
return Object.values(state.automations);
|
||||
},
|
||||
});
|
||||
const AutomationsPanelContainer = connect(
|
||||
mapStateToProps,
|
||||
RemoteService
|
||||
mapStateToProps,
|
||||
RemoteService
|
||||
)(AutomationsPanel);
|
||||
export default AutomationsPanelContainer;
|
||||
|
|
|
|||
|
|
@ -57,13 +57,6 @@ class Sensor extends Component {
|
|||
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) {
|
||||
if (
|
||||
this.props.stateOrDevice.kind === "sensor" &&
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
Loading…
Reference in a new issue