Merge branch '78-fix-light-problems-in-the-first-bach' of lab.si.usi.ch:sa4-2020/the-sanmarinoes/frontend into dev-copy
This commit is contained in:
commit
697a348058
10 changed files with 35 additions and 21 deletions
|
@ -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}>
|
||||||
|
|
|
@ -173,16 +173,7 @@ class Device extends React.Component {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
/*
|
|
||||||
|
|
||||||
{this.props.stateOrDevice ?
|
|
||||||
<DeviceSettingsModal
|
|
||||||
ref={this.modalRef}
|
|
||||||
id={this.props.stateOrDevice.id}
|
|
||||||
/> :
|
|
||||||
""
|
|
||||||
}
|
|
||||||
*/
|
|
||||||
const mapStateToProps = (state, ownProps) => ({
|
const mapStateToProps = (state, ownProps) => ({
|
||||||
get stateOrDevice() {
|
get stateOrDevice() {
|
||||||
if (state.active.activeTab === "Devices") {
|
if (state.active.activeTab === "Devices") {
|
||||||
|
|
|
@ -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>
|
||||||
|
|
||||||
|
|
|
@ -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 = {
|
||||||
|
|
|
@ -164,8 +164,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>
|
||||||
|
|
|
@ -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 = {
|
||||||
|
|
|
@ -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 = {
|
||||||
|
|
|
@ -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",
|
||||||
};
|
};
|
||||||
|
|
|
@ -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",
|
||||||
};
|
};
|
||||||
|
|
|
@ -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",
|
||||||
|
|
Loading…
Reference in a new issue