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

Merge branch 'dev' of https://lab.si.usi.ch/sa4-2020/the-sanmarinoes/frontend into dev

Browse source
This commit is contained in:
britea 2020-05-01 19:29:42 +02:00
commit 8aed75faf2
18 changed files with 213 additions and 176 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
smart-hut/public/img/security-icon.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 40 KiB

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

@ -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}>

4
smart-hut/src/components/dashboard/devices/Curtains.css
View file

@ -4,6 +4,10 @@
box-sizing: border-box;
}
body {
overflow-y: hidden;
}
.container.curtain-container {
position: relative;
margin-top: 10%;

99
smart-hut/src/components/dashboard/devices/Device.js
View file

@ -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,27 +108,14 @@ 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");
}
}
render() {
{
if (this.props.type !== "") {
deviceDescription() {
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"
>
<div className="ui two buttons">
<Button color="blue" icon onClick={this.edit} labelPosition="left">
<Icon name="pencil" />
Edit
</Button>
@ -136,15 +130,13 @@ class Device extends React.Component {
Reset
</Button>
) : null}
</Grid.Column>
) : (
<Grid.Column textAlign="center">
<Header as="h3">{this.props.device.name}</Header>
{this.props.tab === "Scenes" ? (
<Header as="h4">{this.props.roomName}</Header>
) : (
""
)}
</div>
);
}
stateDescription() {
return (
<div class="ui one button">
<Button
color="red"
icon
@ -154,35 +146,49 @@ class Device extends React.Component {
<Icon name="undo" />
Delete
</Button>
</Grid.Column>
</div>
);
}
get deviceName() {
return this.props.tab === "Devices"
? this.props.stateOrDevice.name
: this.props.device.name;
}
render() {
{
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>
{this.props.stateOrDevice && this.props.tab === "Devices" ? (
</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}
/>
) : (
""
)}
</Segment>
</Card>
);
} else {
return null;
}
}
}
}
/*
{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);

22
smart-hut/src/components/dashboard/devices/DeviceSettingsModal.js
View file

@ -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 {
);
}
render() {
const SettingsModal = () => (
<Modal closeIcon onClose={this.closeModal} open={this.state.openModal}>
<Modal.Header>Settings of {this.props.device.name}</Modal.Header>
<Modal.Content>
_editForm = null;
get editForm() {
this._editForm = this._editForm || (
<SettingsForm
name={this.state.name}
removeDevice={this.deleteDevice}
saveFunction={this.updateDevice}
/>
</Modal.Content>
);
return this._editForm;
}
render() {
return (
<Modal closeIcon onClose={this.closeModal} open={this.state.openModal}>
<Modal.Header>Settings of {this.props.device.name}</Modal.Header>
<Modal.Content>{this.editForm}</Modal.Content>
</Modal>
);
return <SettingsModal />;
}
}

2
smart-hut/src/components/dashboard/devices/DimmerStyle.js
View file

@ -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 = {

4
smart-hut/src/components/dashboard/devices/Light.js
View file

@ -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>

2
smart-hut/src/components/dashboard/devices/LightStyle.js
View file

@ -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 = {

2
smart-hut/src/components/dashboard/devices/NewDevice.js
View file

@ -207,7 +207,7 @@ class NewDevice extends Component {
key: "securityCamera",
text: "Security Camera",
value: "securityCamera",
image: { avatar: true, src: "/img/plusMinus.svg" },
image: { avatar: true, src: "/img/security-icon.png" },
},
];
const sensorOptions = [

3
smart-hut/src/components/dashboard/devices/SensorStyle.js
View file

@ -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 = {

4
smart-hut/src/components/dashboard/devices/SmartPlugStyle.js
View file

@ -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",
};

3
smart-hut/src/components/dashboard/devices/SwitchStyle.js
View file

@ -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",
};

27
smart-hut/src/components/dashboard/devices/VideocamModal.js
View file

@ -2,16 +2,19 @@ import React from "react";
import Modal from "react-modal";
import { Button } from "semantic-ui-react";
const ModalStyle = {
content: {
top: "20%",
left: "45%",
right: "auto",
bottom: "auto",
marginRight: "-40%",
width: "80%",
transform: "translate(-40%, -10%)",
},
const modal = {
opacity: 0,
alignItems: "center",
display: "flex",
justifyContent: "center",
transition: "opacity 200ms ease-in-out",
background: "grey",
color: "white",
maxWidth: "2rem",
outline: "none",
padding: "2rem",
textAlign: "center",
maxHeight: "50vh",
};
const VideocamModal = (props) => (
@ -19,10 +22,10 @@ const VideocamModal = (props) => (
isOpen={!!props.selectedVideo}
contentLabel="Live Cam"
onRequestClose={props.closeModal}
style={ModalStyle}
style={modal}
>
{props.selectedVideo && (
<video autoPlay loop muted width="100%" height="auto">
<video autoPlay loop muted width="100%" height="90%">
<source src={props.url} type="video/mp4" />
</video>
)}

1
smart-hut/src/components/dashboard/devices/styleComponents.js
View file

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

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

@ -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;
}

2
smart-hut/src/views/Dashboard.js
View file

@ -21,7 +21,7 @@ class Dashboard extends Component {
super(props);
this.state = this.initialState;
this.setInitialState();
this.activeTab = "Automations"; //TODO Remove this to not put automations first
this.activeTab = "Devices";
this.selectTab = this.selectTab.bind(this);
}