fix the wrong stuff in the bach I

This commit is contained in:
Christian Capeáns Pérez 2020-04-21 12:13:01 +02:00 committed by Claudio Maggioni (maggicl)
parent cdf0f88cd9
commit 268698a081
12 changed files with 86 additions and 18 deletions

View file

@ -24,7 +24,12 @@ class DevicePanel extends Component {
render() { render() {
return ( return (
<Grid doubling columns={2} divided="vertically"> <Grid
doubling
columns={2}
divided="vertically"
style={{ paddingTop: "3rem" }}
>
{this.props.devices.map((e, i) => { {this.props.devices.map((e, i) => {
return ( return (
<Grid.Column key={i}> <Grid.Column key={i}>

View file

@ -5,7 +5,7 @@ import Sensor from "./Sensor";
import { ButtonDimmer, KnobDimmer } from "./Dimmer"; import { ButtonDimmer, KnobDimmer } from "./Dimmer";
import Switcher from "./Switch"; import Switcher from "./Switch";
import Videocam from "./Videocam"; import Videocam from "./Videocam";
import { Segment, Grid, Header, Button, Icon } from "semantic-ui-react"; import { Segment, Grid, Header, Button, Icon, Card } from "semantic-ui-react";
import { RemoteService } from "../../../remote"; import { RemoteService } from "../../../remote";
import { connect } from "react-redux"; import { connect } from "react-redux";
import DeviceSettingsModal from "./DeviceSettingsModal"; import DeviceSettingsModal from "./DeviceSettingsModal";
@ -58,12 +58,48 @@ class Device extends React.Component {
render() { render() {
return ( return (
<Segment> <Card>
<Card.Content>
<Card.Header textAlign="center">{this.props.device.name}</Card.Header>
<Card.Description style={centerComponent}>
{this.renderDeviceComponent()}
</Card.Description>
</Card.Content>
<Card.Content extra>
<div className="ui two buttons">
<Button color="blue" icon onClick={this.edit} labelPosition="left">
<Icon name="pencil" />
Edit
</Button>
{this.props.device.kind === "smartPlug" ? (
<Button
color="orange"
icon
onClick={this.resetSmartPlug}
labelPosition="left"
>
<Icon name="undo" />
Reset
</Button>
) : null}
<DeviceSettingsModal ref={this.modalRef} id={this.props.id} />
</div>
</Card.Content>
{/* <Segment>
<Grid columns={2}> <Grid columns={2}>
<Grid.Column>{this.renderDeviceComponent()}</Grid.Column> <Grid.Column>{this.renderDeviceComponent()}</Grid.Column>
{this.props.tab === "Devices" ? ( {this.props.tab === "Devices" ? (
<Grid.Column textAlign="center"> <Grid.Column textAlign="center">
<Header as="h3">{this.props.stateOrDevice.name}</Header> <Header as="h3">{this.props.device.name}</Header>
<Button color="blue" icon onClick={this.edit} labelPosition="left">
<Icon name="pencil" />
Edit
</Button>
{this.props.device.kind === "smartPlug" ? (
<Button <Button
color="blue" color="blue"
icon icon
@ -93,11 +129,19 @@ class Device extends React.Component {
<DeviceSettingsModal ref={this.modalRef} id={this.props.id} /> <DeviceSettingsModal ref={this.modalRef} id={this.props.id} />
</Grid> </Grid>
</Segment> </Segment>*/}
</Card>
); );
} }
} }
const centerComponent = {
marginLeft: "50%",
transform: "translateX(-50%)",
marginTop: "10%",
marginBottom: "10%",
};
const mapStateToProps = (state, ownProps) => ({ const mapStateToProps = (state, ownProps) => ({
get stateOrDevice() { get stateOrDevice() {
if (state.active.activeTab === "Devices") { if (state.active.activeTab === "Devices") {

View file

@ -26,23 +26,26 @@ const DeleteModal = (props) => (
); );
const SettingsForm = (props) => { const SettingsForm = (props) => {
const handleInputChange = (e) => {
const { name, value } = e.target;
setValues({ ...values, [name]: value });
};
const [values, setValues] = useState({ name: "" }); const [values, setValues] = useState({ name: "" });
const handleInputChange = (e) => {
const { name, value } = e.target.value;
setValues({ ...values, [name]: value });
console.log("EDDDDITING!!", e.target.value);
console.log(props);
};
return ( return (
<Form> <Form>
<Form.Field> <Form.Field>
<label>Edit Name: </label> <label>Edit Name:</label>
<Input <input
autoComplete="off" autoComplete="off"
name="name" name="name"
onChange={handleInputChange} onChange={handleInputChange}
placeholder={props.name} value={props.name}
// {this.props.device.name} autoFocus="on"
placeholder="Device name"
/> />
</Form.Field> </Form.Field>

View file

@ -35,6 +35,7 @@ export const ValueStyle = {
fontSize: "1.3rem", fontSize: "1.3rem",
fontFamily: "Lato", fontFamily: "Lato",
textAnchor: "middle", textAnchor: "middle",
userSelect: "none",
}; };
export const CircularThumbStyle = { export const CircularThumbStyle = {
@ -52,6 +53,7 @@ export const textStyle = {
overflow: "hidden", overflow: "hidden",
whiteSpace: "nowrap", whiteSpace: "nowrap",
textOverflow: "ellipsis", textOverflow: "ellipsis",
userSelect: "none",
}; };
export const knobIcon = { export const knobIcon = {

View file

@ -128,8 +128,8 @@ class Light extends Component {
); );
const normalLightView = ( const normalLightView = (
<StyledDiv> <StyledDiv onClick={this.onClickDevice}>
<div onClick={this.onClickDevice}> <div>
<Image src={this.getIcon()} style={iconStyle} /> <Image src={this.getIcon()} style={iconStyle} />
<BottomPanel style={{ backgroundColor: "#ffa41b" }}> <BottomPanel style={{ backgroundColor: "#ffa41b" }}>
<h5 style={nameStyle}>Light</h5> <h5 style={nameStyle}>Light</h5>

View file

@ -20,6 +20,7 @@ export const textStyle = {
overflow: "hidden", overflow: "hidden",
whiteSpace: "nowrap", whiteSpace: "nowrap",
textOverflow: "ellipsis", textOverflow: "ellipsis",
userSelect: "none",
}; };
export const nameStyle = { export const nameStyle = {
@ -29,6 +30,7 @@ export const nameStyle = {
left: "50%", left: "50%",
transform: "translateX(-50%)", transform: "translateX(-50%)",
color: "white", color: "white",
userSelect: "none",
}; };
export const LightDimmerStyle = { export const LightDimmerStyle = {

View file

@ -20,6 +20,7 @@ const StyledDiv = styled.div`
border-radius: 100%; border-radius: 100%;
border: none; border: none;
position: relative; position: relative;
margin-bottom: 3rem;
box-shadow: 3px 2px 10px 5px #ccc; box-shadow: 3px 2px 10px 5px #ccc;
transition: all 0.3s ease-out; transition: all 0.3s ease-out;
:hover { :hover {

View file

@ -21,12 +21,14 @@ export const sensorText = {
overflow: "hidden", overflow: "hidden",
whiteSpace: "nowrap", whiteSpace: "nowrap",
textOverflow: "ellipsis", textOverflow: "ellipsis",
userSelect: "none",
}; };
export const valueStyle = { export const valueStyle = {
fill: "#3e99ff", fill: "#3e99ff",
fontSize: "2.4rem", fontSize: "2.4rem",
fontFamily: "Lato", fontFamily: "Lato",
userSelect: "none",
}; };
export const errorStyle = { export const errorStyle = {
@ -34,6 +36,7 @@ export const errorStyle = {
fontSize: "1.5rem", fontSize: "1.5rem",
fontFamily: "Lato", fontFamily: "Lato",
textShadow: "1px 1px 0.5px rgba(0, 0, 0, .2)", textShadow: "1px 1px 0.5px rgba(0, 0, 0, .2)",
userSelect: "none",
}; };
export const motionSensorInnerCircle = { export const motionSensorInnerCircle = {

View file

@ -5,6 +5,7 @@ export const energyConsumedStyle = {
top: "20%", top: "20%",
left: "50%", left: "50%",
transform: "translateX(-50%)", transform: "translateX(-50%)",
userSelect: "none",
}; };
export const kwhStyle = { export const kwhStyle = {
@ -14,6 +15,7 @@ export const kwhStyle = {
top: "50%", top: "50%",
left: "50%", left: "50%",
transform: "translateX(-50%)", transform: "translateX(-50%)",
userSelect: "none",
}; };
export const imageStyle = { export const imageStyle = {
@ -24,6 +26,7 @@ export const imageStyle = {
left: "50%", left: "50%",
transform: "translateX(-35%)", transform: "translateX(-35%)",
filter: "drop-shadow( 1px 1px 0.5px rgba(0, 0, 0, .25))", filter: "drop-shadow( 1px 1px 0.5px rgba(0, 0, 0, .25))",
userSelect: "none",
}; };
export const nameStyle = { export const nameStyle = {
@ -35,4 +38,5 @@ export const nameStyle = {
overflow: "hidden", overflow: "hidden",
whiteSpace: "nowrap", whiteSpace: "nowrap",
textOverflow: "ellipsis", textOverflow: "ellipsis",
userSelect: "none",
}; };

View file

@ -5,6 +5,7 @@ export const imageStyle = {
top: "5%", top: "5%",
left: "50%", left: "50%",
transform: "translateX(-50%)", transform: "translateX(-50%)",
userSelect: "none",
}; };
export const nameStyle = { export const nameStyle = {
@ -16,6 +17,7 @@ export const nameStyle = {
overflow: "hidden", overflow: "hidden",
whiteSpace: "nowrap", whiteSpace: "nowrap",
textOverflow: "ellipsis", textOverflow: "ellipsis",
userSelect: "none",
}; };
export const turnedOnStyle = { export const turnedOnStyle = {
@ -25,4 +27,5 @@ export const turnedOnStyle = {
top: "20%", top: "20%",
left: "50%", left: "50%",
transform: "translateX(-50%)", transform: "translateX(-50%)",
userSelect: "none",
}; };

View file

@ -75,6 +75,7 @@ export const iconStyle = {
top: "10%", top: "10%",
left: "50%", left: "50%",
transform: "translateX(-50%)", transform: "translateX(-50%)",
userSelect: "none",
}; };
export const nameStyle = { export const nameStyle = {
position: "absolute", position: "absolute",

View file

@ -418,7 +418,7 @@ function reducer(previousState, action) {
break; break;
case "REDUX_WEBSOCKET::MESSAGE": case "REDUX_WEBSOCKET::MESSAGE":
const devices = JSON.parse(action.payload.message); const devices = JSON.parse(action.payload.message);
console.log(devices); //console.log(devices);
newState = reducer(previousState, { newState = reducer(previousState, {
type: "DEVICES_UPDATE", type: "DEVICES_UPDATE",
partial: true, partial: true,