Merge branch 'dev-copy' into 'dev'
Dev copy See merge request sa4-2020/the-sanmarinoes/frontend!106
This commit is contained in:
commit
c2f646d29a
14 changed files with 192 additions and 162 deletions
|
@ -24,7 +24,12 @@ class DevicePanel extends Component {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<Grid doubling columns={2} divided="vertically">
|
||||
<Grid
|
||||
doubling
|
||||
columns={3}
|
||||
divided="vertically"
|
||||
style={{ paddingTop: "3rem" }}
|
||||
>
|
||||
{this.props.devices.map((e, i) => {
|
||||
return (
|
||||
<Grid.Column key={i}>
|
||||
|
|
|
@ -1,69 +1,69 @@
|
|||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.container.curtain-container {
|
||||
position: relative;
|
||||
margin-top: 10%;
|
||||
width: 18rem;
|
||||
height: 9rem;
|
||||
background-color: #f7f7f7;
|
||||
border-radius: 5px;
|
||||
box-shadow: 10px 10px 30px 15px rgba(0, 0, 0, 0.247);
|
||||
position: relative;
|
||||
margin-top: 10%;
|
||||
width: 18rem;
|
||||
height: 9rem;
|
||||
background-color: #f7f7f7;
|
||||
border-radius: 5px;
|
||||
box-shadow: 10px 10px 30px 15px rgba(0, 0, 0, 0.247);
|
||||
}
|
||||
|
||||
.open-container {
|
||||
position: absolute;
|
||||
width: 18rem;
|
||||
background-color: #f79071;
|
||||
border-radius: 5px;
|
||||
position: absolute;
|
||||
width: 18rem;
|
||||
background-color: #f79071;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.slider {
|
||||
-webkit-appearance: none;
|
||||
width: 9rem;
|
||||
position: absolute;
|
||||
left: 75%;
|
||||
top: 50%;
|
||||
transform: translateY(-50%) rotateZ(90deg);
|
||||
background: transparent;
|
||||
outline: none;
|
||||
-webkit-appearance: none;
|
||||
width: 9rem;
|
||||
position: absolute;
|
||||
left: 75%;
|
||||
top: 50%;
|
||||
transform: translateY(-50%) rotateZ(90deg);
|
||||
background: transparent;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.slider::-webkit-slider-runnable-track {
|
||||
-webkit-appearance: none;
|
||||
height: 5px;
|
||||
background-color: #1b1c1d;
|
||||
border-radius: 50px;
|
||||
cursor: pointer;
|
||||
-webkit-appearance: none;
|
||||
height: 5px;
|
||||
background-color: #1b1c1d;
|
||||
border-radius: 50px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.slider::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 50%;
|
||||
background: #1b1c1d;
|
||||
position: relative;
|
||||
transition: all;
|
||||
top: -5.5px;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 50%;
|
||||
background: #1b1c1d;
|
||||
position: relative;
|
||||
transition: all;
|
||||
top: -5.5px;
|
||||
}
|
||||
|
||||
.slider::-webkit-slider-thumb:hover {
|
||||
transform: scale(1.2);
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
.span-open {
|
||||
-webkit-user-select: none;
|
||||
font-family: "Lato";
|
||||
font-weight: bold;
|
||||
font-size: 3rem;
|
||||
text-emphasis: none;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
-webkit-user-select: none;
|
||||
font-family: "Lato";
|
||||
font-weight: bold;
|
||||
font-size: 3rem;
|
||||
text-emphasis: none;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
|
|
@ -7,11 +7,18 @@ import Switcher from "./Switch";
|
|||
import Videocam from "./Videocam";
|
||||
import Curtains from "./Curtain";
|
||||
import Thermostat from "./Thermostats";
|
||||
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 { connect } from "react-redux";
|
||||
import DeviceSettingsModal from "./DeviceSettingsModal";
|
||||
|
||||
const centerComponent = {
|
||||
marginLeft: "50%",
|
||||
transform: "translateX(-50%)",
|
||||
marginTop: "10%",
|
||||
marginBottom: "10%",
|
||||
};
|
||||
|
||||
class Device extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
@ -101,88 +108,87 @@ class Device extends React.Component {
|
|||
<Videocam id={this.props.stateOrDevice.id} tab={this.props.tab} />
|
||||
);
|
||||
default:
|
||||
//throw new Error("Device type unknown");
|
||||
return undefined;
|
||||
throw new Error("Device type unknown");
|
||||
}
|
||||
}
|
||||
|
||||
deviceDescription() {
|
||||
return (
|
||||
<div className="ui two buttons">
|
||||
<Button color="blue" icon onClick={this.edit} labelPosition="left">
|
||||
<Icon name="pencil" />
|
||||
Edit
|
||||
</Button>
|
||||
{this.props.stateOrDevice.kind === "smartPlug" ? (
|
||||
<Button
|
||||
color="orange"
|
||||
icon
|
||||
onClick={this.resetSmartPlug}
|
||||
labelPosition="left"
|
||||
>
|
||||
<Icon name="undo" />
|
||||
Reset
|
||||
</Button>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
stateDescription() {
|
||||
return (
|
||||
<div class="ui one button">
|
||||
<Button
|
||||
color="red"
|
||||
icon
|
||||
onClick={this.deleteState}
|
||||
labelPosition="left"
|
||||
>
|
||||
<Icon name="undo" />
|
||||
Delete
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
get deviceName() {
|
||||
return this.props.tab === "Devices"
|
||||
? this.props.stateOrDevice.name
|
||||
: this.props.device.name;
|
||||
}
|
||||
|
||||
render() {
|
||||
{
|
||||
if (this.props.type !== "") {
|
||||
return (
|
||||
<Segment>
|
||||
<Grid columns={2}>
|
||||
<Grid.Column>{this.renderDeviceComponent()}</Grid.Column>
|
||||
{this.props.tab === "Devices" ? (
|
||||
<Grid.Column textAlign="center">
|
||||
<Header as="h3">{this.props.stateOrDevice.name}</Header>
|
||||
<Button
|
||||
color="blue"
|
||||
icon
|
||||
onClick={this.edit}
|
||||
labelPosition="left"
|
||||
>
|
||||
<Icon name="pencil" />
|
||||
Edit
|
||||
</Button>
|
||||
{this.props.stateOrDevice.kind === "smartPlug" ? (
|
||||
<Button
|
||||
color="orange"
|
||||
icon
|
||||
onClick={this.resetSmartPlug}
|
||||
labelPosition="left"
|
||||
>
|
||||
<Icon name="undo" />
|
||||
Reset
|
||||
</Button>
|
||||
) : null}
|
||||
</Grid.Column>
|
||||
return (
|
||||
<Card>
|
||||
<Card.Content>
|
||||
<Card.Header textAlign="center">
|
||||
<Header as="h3">{this.deviceName}</Header>
|
||||
{this.props.tab === "Scenes" ? (
|
||||
<Header as="h4">{this.props.roomName}</Header>
|
||||
) : (
|
||||
<Grid.Column textAlign="center">
|
||||
<Header as="h3">{this.props.device.name}</Header>
|
||||
{this.props.tab === "Scenes" ? (
|
||||
<Header as="h4">{this.props.roomName}</Header>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
<Button
|
||||
color="red"
|
||||
icon
|
||||
onClick={this.deleteState}
|
||||
labelPosition="left"
|
||||
>
|
||||
<Icon name="undo" />
|
||||
Delete
|
||||
</Button>
|
||||
</Grid.Column>
|
||||
""
|
||||
)}
|
||||
</Grid>
|
||||
{this.props.stateOrDevice && this.props.tab === "Devices" ? (
|
||||
<DeviceSettingsModal
|
||||
ref={this.modalRef}
|
||||
id={this.props.stateOrDevice.id}
|
||||
/>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
</Segment>
|
||||
);
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
</Card.Header>
|
||||
|
||||
<Card.Description style={centerComponent}>
|
||||
{this.renderDeviceComponent()}
|
||||
</Card.Description>
|
||||
</Card.Content>
|
||||
<Card.Content extra>
|
||||
{this.props.tab === "Devices"
|
||||
? this.deviceDescription()
|
||||
: this.stateDescription()}
|
||||
</Card.Content>
|
||||
<DeviceSettingsModal
|
||||
ref={this.modalRef}
|
||||
id={this.props.stateOrDevice.id}
|
||||
/>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
/*
|
||||
|
||||
{this.props.stateOrDevice ?
|
||||
<DeviceSettingsModal
|
||||
ref={this.modalRef}
|
||||
id={this.props.stateOrDevice.id}
|
||||
/> :
|
||||
""
|
||||
}
|
||||
*/
|
||||
const mapStateToProps = (state, ownProps) => ({
|
||||
get stateOrDevice() {
|
||||
if (state.active.activeTab === "Devices") {
|
||||
|
@ -207,7 +213,6 @@ const mapStateToProps = (state, ownProps) => ({
|
|||
}
|
||||
},
|
||||
get type() {
|
||||
console.log("ALPACA", state, ownProps);
|
||||
if (state.active.activeTab === "Scenes") {
|
||||
if (state.sceneStates[ownProps.id]) {
|
||||
//console.log(state.sceneStates[ownProps.id], ownProps.id);
|
||||
|
|
|
@ -33,6 +33,8 @@ const SettingsForm = (props) => {
|
|||
|
||||
const [values, setValues] = useState({ name: "" });
|
||||
|
||||
console.log(props);
|
||||
|
||||
return (
|
||||
<Form>
|
||||
<Form.Field>
|
||||
|
@ -42,7 +44,6 @@ const SettingsForm = (props) => {
|
|||
name="name"
|
||||
onChange={handleInputChange}
|
||||
placeholder={props.name}
|
||||
// {this.props.device.name}
|
||||
/>
|
||||
</Form.Field>
|
||||
|
||||
|
@ -106,20 +107,25 @@ class DeviceSettingsModal extends Component {
|
|||
);
|
||||
}
|
||||
|
||||
_editForm = null;
|
||||
get editForm() {
|
||||
this._editForm = this._editForm || (
|
||||
<SettingsForm
|
||||
name={this.state.name}
|
||||
removeDevice={this.deleteDevice}
|
||||
saveFunction={this.updateDevice}
|
||||
/>
|
||||
);
|
||||
return this._editForm;
|
||||
}
|
||||
|
||||
render() {
|
||||
const SettingsModal = () => (
|
||||
return (
|
||||
<Modal closeIcon onClose={this.closeModal} open={this.state.openModal}>
|
||||
<Modal.Header>Settings of {this.props.device.name}</Modal.Header>
|
||||
<Modal.Content>
|
||||
<SettingsForm
|
||||
name={this.state.name}
|
||||
removeDevice={this.deleteDevice}
|
||||
saveFunction={this.updateDevice}
|
||||
/>
|
||||
</Modal.Content>
|
||||
<Modal.Content>{this.editForm}</Modal.Content>
|
||||
</Modal>
|
||||
);
|
||||
return <SettingsModal />;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -129,10 +129,10 @@ export class KnobDimmerComponent extends Component {
|
|||
}
|
||||
|
||||
const mapStateToProps = (state, ownProps) => ({
|
||||
get stateOrDevice(){
|
||||
if(state.active.activeTab==="Devices"){
|
||||
get stateOrDevice() {
|
||||
if (state.active.activeTab === "Devices") {
|
||||
return state.devices[ownProps.id];
|
||||
}else{
|
||||
} else {
|
||||
return state.sceneStates[ownProps.id];
|
||||
}
|
||||
},
|
||||
|
|
|
@ -35,6 +35,7 @@ export const ValueStyle = {
|
|||
fontSize: "1.3rem",
|
||||
fontFamily: "Lato",
|
||||
textAnchor: "middle",
|
||||
userSelect: "none",
|
||||
};
|
||||
|
||||
export const CircularThumbStyle = {
|
||||
|
@ -52,6 +53,7 @@ export const textStyle = {
|
|||
overflow: "hidden",
|
||||
whiteSpace: "nowrap",
|
||||
textOverflow: "ellipsis",
|
||||
userSelect: "none",
|
||||
};
|
||||
|
||||
export const knobIcon = {
|
||||
|
|
|
@ -164,8 +164,8 @@ class Light extends Component {
|
|||
);
|
||||
|
||||
const normalLightView = (
|
||||
<StyledDiv>
|
||||
<div onClick={this.onClickDevice}>
|
||||
<StyledDiv onClick={this.onClickDevice}>
|
||||
<div>
|
||||
<Image src={this.getIcon()} style={iconStyle} />
|
||||
<BottomPanel style={{ backgroundColor: "#ffa41b" }}>
|
||||
<h5 style={nameStyle}>Light</h5>
|
||||
|
|
|
@ -20,6 +20,7 @@ export const textStyle = {
|
|||
overflow: "hidden",
|
||||
whiteSpace: "nowrap",
|
||||
textOverflow: "ellipsis",
|
||||
userSelect: "none",
|
||||
};
|
||||
|
||||
export const nameStyle = {
|
||||
|
@ -29,6 +30,7 @@ export const nameStyle = {
|
|||
left: "50%",
|
||||
transform: "translateX(-50%)",
|
||||
color: "white",
|
||||
userSelect: "none",
|
||||
};
|
||||
|
||||
export const LightDimmerStyle = {
|
||||
|
|
|
@ -21,12 +21,14 @@ export const sensorText = {
|
|||
overflow: "hidden",
|
||||
whiteSpace: "nowrap",
|
||||
textOverflow: "ellipsis",
|
||||
userSelect: "none",
|
||||
};
|
||||
|
||||
export const valueStyle = {
|
||||
fill: "#3e99ff",
|
||||
fontSize: "2.4rem",
|
||||
fontFamily: "Lato",
|
||||
userSelect: "none",
|
||||
};
|
||||
|
||||
export const errorStyle = {
|
||||
|
@ -34,6 +36,7 @@ export const errorStyle = {
|
|||
fontSize: "1.5rem",
|
||||
fontFamily: "Lato",
|
||||
textShadow: "1px 1px 0.5px rgba(0, 0, 0, .2)",
|
||||
userSelect: "none",
|
||||
};
|
||||
|
||||
export const motionSensorInnerCircle = {
|
||||
|
|
|
@ -5,6 +5,7 @@ export const energyConsumedStyle = {
|
|||
top: "20%",
|
||||
left: "50%",
|
||||
transform: "translateX(-50%)",
|
||||
userSelect: "none",
|
||||
};
|
||||
|
||||
export const kwhStyle = {
|
||||
|
@ -14,6 +15,7 @@ export const kwhStyle = {
|
|||
top: "50%",
|
||||
left: "50%",
|
||||
transform: "translateX(-50%)",
|
||||
userSelect: "none",
|
||||
};
|
||||
|
||||
export const imageStyle = {
|
||||
|
@ -24,6 +26,7 @@ export const imageStyle = {
|
|||
left: "50%",
|
||||
transform: "translateX(-35%)",
|
||||
filter: "drop-shadow( 1px 1px 0.5px rgba(0, 0, 0, .25))",
|
||||
userSelect: "none",
|
||||
};
|
||||
|
||||
export const nameStyle = {
|
||||
|
@ -35,4 +38,5 @@ export const nameStyle = {
|
|||
overflow: "hidden",
|
||||
whiteSpace: "nowrap",
|
||||
textOverflow: "ellipsis",
|
||||
userSelect: "none",
|
||||
};
|
||||
|
|
|
@ -5,6 +5,7 @@ export const imageStyle = {
|
|||
top: "5%",
|
||||
left: "50%",
|
||||
transform: "translateX(-50%)",
|
||||
userSelect: "none",
|
||||
};
|
||||
|
||||
export const nameStyle = {
|
||||
|
@ -16,6 +17,7 @@ export const nameStyle = {
|
|||
overflow: "hidden",
|
||||
whiteSpace: "nowrap",
|
||||
textOverflow: "ellipsis",
|
||||
userSelect: "none",
|
||||
};
|
||||
|
||||
export const turnedOnStyle = {
|
||||
|
@ -25,4 +27,5 @@ export const turnedOnStyle = {
|
|||
top: "20%",
|
||||
left: "50%",
|
||||
transform: "translateX(-50%)",
|
||||
userSelect: "none",
|
||||
};
|
||||
|
|
|
@ -1,38 +1,38 @@
|
|||
.slider-css {
|
||||
-webkit-appearance: none;
|
||||
width: 20rem;
|
||||
font-family: "Lato";
|
||||
position: absolute;
|
||||
margin-top: 27%;
|
||||
margin-left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
-webkit-appearance: none;
|
||||
width: 20rem;
|
||||
font-family: "Lato";
|
||||
position: absolute;
|
||||
margin-top: 27%;
|
||||
margin-left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.slider-css::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
border: 5px solid #ffffff;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 10px;
|
||||
background-color: rgba(94, 246, 152, 1);
|
||||
cursor: pointer;
|
||||
box-shadow: 1px 1px 15px 2px rgba(0, 0, 0, 0.4);
|
||||
margin-top: -7px;
|
||||
-webkit-appearance: none;
|
||||
border: 5px solid #ffffff;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 10px;
|
||||
background-color: rgba(94, 246, 152, 1);
|
||||
cursor: pointer;
|
||||
box-shadow: 1px 1px 15px 2px rgba(0, 0, 0, 0.4);
|
||||
margin-top: -7px;
|
||||
}
|
||||
|
||||
.slider-css:focus {
|
||||
-webkit-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
|
||||
outline: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.slider-css::-webkit-slider-runnable-track {
|
||||
-webkit-appearance: none;
|
||||
outline: none;
|
||||
width: 100%;
|
||||
height: 7px;
|
||||
cursor: pointer;
|
||||
box-shadow: 4.5px 4.5px 20px 1px rgba(0, 0, 0, 0.3);
|
||||
background: white;
|
||||
border-radius: 5px;
|
||||
-webkit-appearance: none;
|
||||
outline: none;
|
||||
width: 100%;
|
||||
height: 7px;
|
||||
cursor: pointer;
|
||||
box-shadow: 4.5px 4.5px 20px 1px rgba(0, 0, 0, 0.3);
|
||||
background: white;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
|
|
@ -75,6 +75,7 @@ export const iconStyle = {
|
|||
top: "10%",
|
||||
left: "50%",
|
||||
transform: "translateX(-50%)",
|
||||
userSelect: "none",
|
||||
};
|
||||
export const nameStyle = {
|
||||
position: "absolute",
|
||||
|
|
|
@ -499,7 +499,6 @@ function reducer(previousState, action) {
|
|||
console.warn(`Action type ${action.type} unknown`, action);
|
||||
return previousState;
|
||||
}
|
||||
console.log("THETRUEALPACA", newState, action.type, action);
|
||||
return newState;
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue