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

96
smart-hut/src/components/dashboard/devices/Curtains.css
View File

@ -1,69 +1,73 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
overflow-y: hidden;
}
.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%);
}

151
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,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);

26
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 {
);
}
_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 />;
}
}

6
smart-hut/src/components/dashboard/devices/Dimmer.js
View File

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

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

52
smart-hut/src/components/dashboard/devices/Thermostat.css
View File

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

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