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() { render() {
return ( return (
<Grid doubling columns={2} divided="vertically"> <Grid
doubling
columns={3}
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}>

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

@ -1,69 +1,73 @@
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
box-sizing: border-box; box-sizing: border-box;
}
body {
overflow-y: hidden;
} }
.container.curtain-container { .container.curtain-container {
position: relative; position: relative;
margin-top: 10%; margin-top: 10%;
width: 18rem; width: 18rem;
height: 9rem; height: 9rem;
background-color: #f7f7f7; background-color: #f7f7f7;
border-radius: 5px; border-radius: 5px;
box-shadow: 10px 10px 30px 15px rgba(0, 0, 0, 0.247); box-shadow: 10px 10px 30px 15px rgba(0, 0, 0, 0.247);
} }
.open-container { .open-container {
position: absolute; position: absolute;
width: 18rem; width: 18rem;
background-color: #f79071; background-color: #f79071;
border-radius: 5px; border-radius: 5px;
} }
.slider { .slider {
-webkit-appearance: none; -webkit-appearance: none;
width: 9rem; width: 9rem;
position: absolute; position: absolute;
left: 75%; left: 75%;
top: 50%; top: 50%;
transform: translateY(-50%) rotateZ(90deg); transform: translateY(-50%) rotateZ(90deg);
background: transparent; background: transparent;
outline: none; outline: none;
} }
.slider::-webkit-slider-runnable-track { .slider::-webkit-slider-runnable-track {
-webkit-appearance: none; -webkit-appearance: none;
height: 5px; height: 5px;
background-color: #1b1c1d; background-color: #1b1c1d;
border-radius: 50px; border-radius: 50px;
cursor: pointer; cursor: pointer;
} }
.slider::-webkit-slider-thumb { .slider::-webkit-slider-thumb {
-webkit-appearance: none; -webkit-appearance: none;
appearance: none; appearance: none;
width: 18px; width: 18px;
height: 18px; height: 18px;
border-radius: 50%; border-radius: 50%;
background: #1b1c1d; background: #1b1c1d;
position: relative; position: relative;
transition: all; transition: all;
top: -5.5px; top: -5.5px;
} }
.slider::-webkit-slider-thumb:hover { .slider::-webkit-slider-thumb:hover {
transform: scale(1.2); transform: scale(1.2);
} }
.span-open { .span-open {
-webkit-user-select: none; -webkit-user-select: none;
font-family: "Lato"; font-family: "Lato";
font-weight: bold; font-weight: bold;
font-size: 3rem; font-size: 3rem;
text-emphasis: none; text-emphasis: none;
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -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 Videocam from "./Videocam";
import Curtains from "./Curtain"; import Curtains from "./Curtain";
import Thermostat from "./Thermostats"; 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 { RemoteService } from "../../../remote";
import { connect } from "react-redux"; import { connect } from "react-redux";
import DeviceSettingsModal from "./DeviceSettingsModal"; import DeviceSettingsModal from "./DeviceSettingsModal";
const centerComponent = {
marginLeft: "50%",
transform: "translateX(-50%)",
marginTop: "10%",
marginBottom: "10%",
};
class Device extends React.Component { class Device extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
@ -101,88 +108,87 @@ class Device extends React.Component {
<Videocam id={this.props.stateOrDevice.id} tab={this.props.tab} /> <Videocam id={this.props.stateOrDevice.id} tab={this.props.tab} />
); );
default: default:
//throw new Error("Device type unknown"); throw new Error("Device type unknown");
return undefined;
} }
} }
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() { render() {
{ {
if (this.props.type !== "") { return (
return ( <Card>
<Segment> <Card.Content>
<Grid columns={2}> <Card.Header textAlign="center">
<Grid.Column>{this.renderDeviceComponent()}</Grid.Column> <Header as="h3">{this.deviceName}</Header>
{this.props.tab === "Devices" ? ( {this.props.tab === "Scenes" ? (
<Grid.Column textAlign="center"> <Header as="h4">{this.props.roomName}</Header>
<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>
) : ( ) : (
<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> </Card.Header>
{this.props.stateOrDevice && this.props.tab === "Devices" ? (
<DeviceSettingsModal <Card.Description style={centerComponent}>
ref={this.modalRef} {this.renderDeviceComponent()}
id={this.props.stateOrDevice.id} </Card.Description>
/> </Card.Content>
) : ( <Card.Content extra>
"" {this.props.tab === "Devices"
)} ? this.deviceDescription()
</Segment> : this.stateDescription()}
); </Card.Content>
} else { <DeviceSettingsModal
return null; 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) => ({ const mapStateToProps = (state, ownProps) => ({
get stateOrDevice() { get stateOrDevice() {
if (state.active.activeTab === "Devices") { if (state.active.activeTab === "Devices") {
@ -207,7 +213,6 @@ const mapStateToProps = (state, ownProps) => ({
} }
}, },
get type() { get type() {
console.log("ALPACA", state, ownProps);
if (state.active.activeTab === "Scenes") { if (state.active.activeTab === "Scenes") {
if (state.sceneStates[ownProps.id]) { if (state.sceneStates[ownProps.id]) {
//console.log(state.sceneStates[ownProps.id], 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: "" }); const [values, setValues] = useState({ name: "" });
console.log(props);
return ( return (
<Form> <Form>
<Form.Field> <Form.Field>
@ -42,7 +44,6 @@ const SettingsForm = (props) => {
name="name" name="name"
onChange={handleInputChange} onChange={handleInputChange}
placeholder={props.name} placeholder={props.name}
// {this.props.device.name}
/> />
</Form.Field> </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() { render() {
const SettingsModal = () => ( return (
<Modal closeIcon onClose={this.closeModal} open={this.state.openModal}> <Modal closeIcon onClose={this.closeModal} open={this.state.openModal}>
<Modal.Header>Settings of {this.props.device.name}</Modal.Header> <Modal.Header>Settings of {this.props.device.name}</Modal.Header>
<Modal.Content> <Modal.Content>{this.editForm}</Modal.Content>
<SettingsForm
name={this.state.name}
removeDevice={this.deleteDevice}
saveFunction={this.updateDevice}
/>
</Modal.Content>
</Modal> </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) => ({ const mapStateToProps = (state, ownProps) => ({
get stateOrDevice(){ get stateOrDevice() {
if(state.active.activeTab==="Devices"){ if (state.active.activeTab === "Devices") {
return state.devices[ownProps.id]; return state.devices[ownProps.id];
}else{ } else {
return state.sceneStates[ownProps.id]; 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", 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 = {

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

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

2
smart-hut/src/components/dashboard/devices/LightStyle.js
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 = {

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

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

3
smart-hut/src/components/dashboard/devices/SensorStyle.js
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 = {

4
smart-hut/src/components/dashboard/devices/SmartPlugStyle.js
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",
}; };

3
smart-hut/src/components/dashboard/devices/SwitchStyle.js
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",
}; };

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

@ -1,38 +1,38 @@
.slider-css { .slider-css {
-webkit-appearance: none; -webkit-appearance: none;
width: 20rem; width: 20rem;
font-family: "Lato"; font-family: "Lato";
position: absolute; position: absolute;
margin-top: 27%; margin-top: 27%;
margin-left: 50%; margin-left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} }
.slider-css::-webkit-slider-thumb { .slider-css::-webkit-slider-thumb {
-webkit-appearance: none; -webkit-appearance: none;
border: 5px solid #ffffff; border: 5px solid #ffffff;
width: 18px; width: 18px;
height: 18px; height: 18px;
border-radius: 10px; border-radius: 10px;
background-color: rgba(94, 246, 152, 1); background-color: rgba(94, 246, 152, 1);
cursor: pointer; cursor: pointer;
box-shadow: 1px 1px 15px 2px rgba(0, 0, 0, 0.4); box-shadow: 1px 1px 15px 2px rgba(0, 0, 0, 0.4);
margin-top: -7px; margin-top: -7px;
} }
.slider-css:focus { .slider-css:focus {
-webkit-appearance: none; -webkit-appearance: none;
outline: none; outline: none;
} }
.slider-css::-webkit-slider-runnable-track { .slider-css::-webkit-slider-runnable-track {
-webkit-appearance: none; -webkit-appearance: none;
outline: none; outline: none;
width: 100%; width: 100%;
height: 7px; height: 7px;
cursor: pointer; cursor: pointer;
box-shadow: 4.5px 4.5px 20px 1px rgba(0, 0, 0, 0.3); box-shadow: 4.5px 4.5px 20px 1px rgba(0, 0, 0, 0.3);
background: white; background: white;
border-radius: 5px; 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 Modal from "react-modal";
import { Button } from "semantic-ui-react"; import { Button } from "semantic-ui-react";
const ModalStyle = { const modal = {
content: { opacity: 0,
top: "20%", alignItems: "center",
left: "45%", display: "flex",
right: "auto", justifyContent: "center",
bottom: "auto", transition: "opacity 200ms ease-in-out",
marginRight: "-40%", background: "grey",
width: "80%", color: "white",
transform: "translate(-40%, -10%)", maxWidth: "2rem",
}, outline: "none",
padding: "2rem",
textAlign: "center",
maxHeight: "50vh",
}; };
const VideocamModal = (props) => ( const VideocamModal = (props) => (
@ -19,10 +22,10 @@ const VideocamModal = (props) => (
isOpen={!!props.selectedVideo} isOpen={!!props.selectedVideo}
contentLabel="Live Cam" contentLabel="Live Cam"
onRequestClose={props.closeModal} onRequestClose={props.closeModal}
style={ModalStyle} style={modal}
> >
{props.selectedVideo && ( {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" /> <source src={props.url} type="video/mp4" />
</video> </video>
)} )}

1
smart-hut/src/components/dashboard/devices/styleComponents.js
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",

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

@ -499,7 +499,6 @@ function reducer(previousState, action) {
console.warn(`Action type ${action.type} unknown`, action); console.warn(`Action type ${action.type} unknown`, action);
return previousState; return previousState;
} }
console.log("THETRUEALPACA", newState, action.type, action);
return newState; return newState;
} }

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

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