Merge branch 'fix-navbar' into 'dev'
fix-navbar See merge request sa4-2020/the-sanmarinoes/frontend!73
This commit is contained in:
commit
f0c429b9a3
18 changed files with 188 additions and 119 deletions
|
@ -45,6 +45,7 @@ class App extends Component {
|
|||
this.state = {
|
||||
loggedIn: loggedIn,
|
||||
token: token,
|
||||
info: "",
|
||||
};
|
||||
|
||||
this.auth = this.auth.bind(this);
|
||||
|
@ -78,6 +79,7 @@ class App extends Component {
|
|||
token: res.data.jwttoken,
|
||||
loggedIn: true,
|
||||
});
|
||||
this.getInfo();
|
||||
return res;
|
||||
//this.props.history.push("/dashboard");
|
||||
} else {
|
||||
|
|
|
@ -160,6 +160,14 @@ export var call = {
|
|||
register: function (data, headers) {
|
||||
return axios.post(config + "register", data);
|
||||
},
|
||||
getUserInfo: function (token) {
|
||||
if (!token) {
|
||||
token = tkn;
|
||||
}
|
||||
return axios.get(config + "auth/profile", {
|
||||
headers: { Authorization: "Bearer " + token },
|
||||
});
|
||||
},
|
||||
initResetPassword: function (data, headers) {
|
||||
return axios.post(config + "register/init-reset-password", data);
|
||||
},
|
||||
|
|
|
@ -1,7 +1,16 @@
|
|||
import React from "react";
|
||||
import { Dropdown, Icon, Grid, Divider } from "semantic-ui-react";
|
||||
import {
|
||||
Dropdown,
|
||||
Icon,
|
||||
Grid,
|
||||
Divider,
|
||||
Button,
|
||||
Label,
|
||||
Responsive,
|
||||
} from "semantic-ui-react";
|
||||
import { Segment, Image } from "semantic-ui-react";
|
||||
import { BrowserView, MobileView } from "react-device-detect";
|
||||
import { call } from "../client_server";
|
||||
|
||||
const AvatarImage = () => (
|
||||
<Image src="avatar3.png" style={{ width: "25px", height: "auto" }} centered />
|
||||
|
@ -19,86 +28,73 @@ const IconHomeImage = () => (
|
|||
|
||||
const TitleImage = () => <Image src="sm_logo.png" size="medium" centered />;
|
||||
|
||||
const BrowserStructure = (props) => (
|
||||
<Grid columns="equal" divided inverted padded>
|
||||
<Grid.Row color="black" textAlign="center">
|
||||
<Grid.Column width={3} height={0.5}>
|
||||
<Segment color="black" inverted>
|
||||
<IconHomeImage />
|
||||
</Segment>
|
||||
</Grid.Column>
|
||||
<Grid.Column>
|
||||
<Segment color="black" inverted>
|
||||
<TitleImage />
|
||||
</Segment>
|
||||
</Grid.Column>
|
||||
<Grid.Column width={2} heigth={1}>
|
||||
<AvatarImage />
|
||||
<Divider />
|
||||
<Dropdown item icon="setting" size="huge">
|
||||
<Dropdown.Menu>
|
||||
<Dropdown.Item>
|
||||
<Icon name="dropdown" />
|
||||
<span className="text">Settings</span>
|
||||
<Dropdown.Menu>
|
||||
<Dropdown.Item>Document</Dropdown.Item>
|
||||
<Dropdown.Item>Image</Dropdown.Item>
|
||||
</Dropdown.Menu>
|
||||
</Dropdown.Item>
|
||||
<Dropdown.Item>See profile...</Dropdown.Item>
|
||||
<Dropdown.Divider />
|
||||
<Dropdown.Item onClick={props.logout}>Logout</Dropdown.Item>
|
||||
</Dropdown.Menu>
|
||||
</Dropdown>
|
||||
</Grid.Column>
|
||||
</Grid.Row>
|
||||
</Grid>
|
||||
);
|
||||
|
||||
const MobileStructure = (props) => (
|
||||
<Grid columns="equal" divided inverted padded>
|
||||
<Grid.Row color="black" textAlign="center">
|
||||
<Segment color="black" inverted>
|
||||
<TitleImage />
|
||||
</Segment>
|
||||
</Grid.Row>
|
||||
<Grid.Row color="black" textAlign="center">
|
||||
<Grid.Column>
|
||||
<IconHomeImage />
|
||||
</Grid.Column>
|
||||
<Grid.Column>
|
||||
<AvatarImage />
|
||||
<Divider />
|
||||
<Dropdown item icon="setting" size="huge">
|
||||
<Dropdown.Menu>
|
||||
<Dropdown.Item>
|
||||
<Icon name="dropdown" />
|
||||
<span className="text">Settings</span>
|
||||
<Dropdown.Menu>
|
||||
<Dropdown.Item>Document</Dropdown.Item>
|
||||
<Dropdown.Item>Image</Dropdown.Item>
|
||||
</Dropdown.Menu>
|
||||
</Dropdown.Item>
|
||||
<Dropdown.Item>See profile...</Dropdown.Item>
|
||||
<Dropdown.Divider />
|
||||
<Dropdown.Item onClick={props.logout}>Logout</Dropdown.Item>
|
||||
</Dropdown.Menu>
|
||||
</Dropdown>
|
||||
</Grid.Column>
|
||||
</Grid.Row>
|
||||
</Grid>
|
||||
);
|
||||
|
||||
export default class MyHeader extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
username: "",
|
||||
};
|
||||
|
||||
this.getInfo();
|
||||
}
|
||||
getInfo() {
|
||||
call.getUserInfo(this.state.token).then((res) => {
|
||||
if (res.status === 200) {
|
||||
this.setState({
|
||||
username: res.data.username,
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<BrowserView>
|
||||
<BrowserStructure logout={this.props.logout} />
|
||||
</BrowserView>
|
||||
<MobileView>
|
||||
<MobileStructure />
|
||||
</MobileView>
|
||||
<Responsive minWidth={768}>
|
||||
<Grid columns="equal" divided inverted padded>
|
||||
<Grid.Row color="black" textAlign="center">
|
||||
<Grid.Column width={3} height={0.5}>
|
||||
<Segment color="black" inverted>
|
||||
<IconHomeImage />
|
||||
</Segment>
|
||||
</Grid.Column>
|
||||
<Grid.Column>
|
||||
<Segment color="black" inverted>
|
||||
<TitleImage />
|
||||
</Segment>
|
||||
</Grid.Column>
|
||||
<Grid.Column width={2} heigth={1}>
|
||||
<Label as="a" image color="black">
|
||||
<img alt="SmartHut logo" src="smart-home.png" />
|
||||
{this.state.username}
|
||||
</Label>
|
||||
<Divider />
|
||||
<Button onClick={this.props.logout}>Logout</Button>
|
||||
</Grid.Column>
|
||||
</Grid.Row>
|
||||
</Grid>
|
||||
</Responsive>
|
||||
<Responsive maxWidth={768}>
|
||||
<Grid columns="equal" divided inverted padded>
|
||||
<Grid.Row color="black" textAlign="center">
|
||||
<Segment color="black" inverted>
|
||||
<TitleImage />
|
||||
</Segment>
|
||||
</Grid.Row>
|
||||
<Grid.Row color="black" textAlign="center">
|
||||
<Grid.Column>
|
||||
<IconHomeImage />
|
||||
</Grid.Column>
|
||||
<Grid.Column>
|
||||
<Label as="a" image color="black">
|
||||
<img alt="SmartHut logo" src="smart-home.png" />
|
||||
{this.state.username}
|
||||
</Label>
|
||||
<Divider />
|
||||
<Button onClick={this.props.logout}>Logout</Button>
|
||||
</Grid.Column>
|
||||
</Grid.Row>
|
||||
</Grid>
|
||||
</Responsive>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -71,7 +71,9 @@ export class ButtonDimmer extends Component {
|
|||
}
|
||||
/>
|
||||
<img alt="icon" src="/img/buttonDimmer.svg" />
|
||||
<span className="knob">{this.props.device.name}</span>
|
||||
<span className="knob">
|
||||
{this.props.device.name} ({this.props.device.id})
|
||||
</span>
|
||||
<PlusPanel name="UP" onClick={this.increaseIntensity}>
|
||||
<span>+</span>
|
||||
</PlusPanel>
|
||||
|
@ -136,7 +138,7 @@ export class KnobDimmer extends Component {
|
|||
dy="0.3em"
|
||||
fontWeight="bold"
|
||||
>
|
||||
{this.props.device.name}
|
||||
{this.props.device.name} ({this.props.device.id})
|
||||
</text>
|
||||
<CircularProgress
|
||||
style={{ ...KnobProgress, opacity: this.state.value + 0.1 }}
|
||||
|
|
|
@ -49,6 +49,9 @@ export const textStyle = {
|
|||
fill: "#1a2849",
|
||||
fontSize: "1.5rem",
|
||||
fontFamily: "Lato",
|
||||
overflow: "hidden",
|
||||
whiteSpace: "nowrap",
|
||||
textOverflow: "ellipsis",
|
||||
};
|
||||
|
||||
export const knobIcon = {
|
||||
|
|
|
@ -84,6 +84,10 @@ export default class Light extends Component {
|
|||
});
|
||||
};
|
||||
|
||||
get intensity() {
|
||||
return isNaN(this.state.intensity) ? 0 : this.state.intensity;
|
||||
}
|
||||
|
||||
render() {
|
||||
const intensityLightView = (
|
||||
<div style={LightDimmerContainer}>
|
||||
|
@ -96,7 +100,7 @@ export default class Light extends Component {
|
|||
/>
|
||||
<CircularInput
|
||||
style={LightDimmerStyle}
|
||||
value={+(Math.round(this.state.intensity / 100 + "e+2") + "e-2")}
|
||||
value={+(Math.round(this.intensity / 100 + "e+2") + "e-2")}
|
||||
onChange={this.setIntensity}
|
||||
>
|
||||
<text
|
||||
|
@ -107,12 +111,12 @@ export default class Light extends Component {
|
|||
dy="0.3em"
|
||||
fontWeight="bold"
|
||||
>
|
||||
{this.props.device.name}
|
||||
{this.props.device.name} <br /> ({this.props.device.id})
|
||||
</text>
|
||||
<CircularProgress
|
||||
style={{
|
||||
...KnobProgress,
|
||||
opacity: this.state.intensity / 100 + 0.3,
|
||||
opacity: this.intensity / 100 + 0.3,
|
||||
}}
|
||||
/>
|
||||
<CircularThumb style={CircularThumbStyle} />
|
||||
|
@ -134,7 +138,9 @@ export default class Light extends Component {
|
|||
<div onClick={this.props.edit.mode ? () => {} : this.onClickDevice}>
|
||||
<Image src={this.getIcon()} style={iconStyle} />
|
||||
<BottomPanel style={{ backgroundColor: "#ffa41b" }}>
|
||||
<h5 style={nameStyle}>{this.props.device.name}</h5>
|
||||
<h5 style={nameStyle}>
|
||||
{this.props.device.name} ({this.props.device.id})
|
||||
</h5>
|
||||
</BottomPanel>
|
||||
</div>
|
||||
</StyledDiv>
|
||||
|
|
|
@ -17,6 +17,9 @@ export const textStyle = {
|
|||
fill: "#ffd31d",
|
||||
fontSize: "1.5rem",
|
||||
fontFamily: "Lato",
|
||||
overflow: "hidden",
|
||||
whiteSpace: "nowrap",
|
||||
textOverflow: "ellipsis",
|
||||
};
|
||||
|
||||
export const nameStyle = {
|
||||
|
|
|
@ -110,7 +110,7 @@ export default class NewDevice extends Component {
|
|||
if (this.state.name === "") {
|
||||
data.params["name"] = "Dimmable Light";
|
||||
}
|
||||
data.params["intensity"] = 1;
|
||||
data.params["intensity"] = 0;
|
||||
break;
|
||||
case "sensor":
|
||||
if (this.state.name === "") {
|
||||
|
|
|
@ -175,7 +175,7 @@ export default class Sensor extends Component {
|
|||
dy="0.4em"
|
||||
fontWeight="bold"
|
||||
>
|
||||
{this.setName()}
|
||||
{this.setName()} ({this.props.device.id})
|
||||
</text>
|
||||
</CircularInput>
|
||||
<Image style={iconSensorStyle} src={`/img/${this.icon}`} />
|
||||
|
|
|
@ -18,6 +18,9 @@ export const sensorText = {
|
|||
fill: "#3e99ff",
|
||||
fontSize: "1.2rem",
|
||||
fontFamily: "Lato",
|
||||
overflow: "hidden",
|
||||
whiteSpace: "nowrap",
|
||||
textOverflow: "ellipsis",
|
||||
};
|
||||
|
||||
export const valueStyle = {
|
||||
|
@ -61,6 +64,9 @@ export const nameMotionStyle = {
|
|||
left: "50%",
|
||||
transform: "translateX(-50%)",
|
||||
fontSize: "1.2rem",
|
||||
overflow: "hidden",
|
||||
whiteSpace: "nowrap",
|
||||
textOverflow: "ellipsis",
|
||||
};
|
||||
|
||||
export const motionSensorIcon = {
|
||||
|
|
|
@ -75,7 +75,9 @@ export default class SmartPlug extends Component {
|
|||
}
|
||||
/>
|
||||
<Image src={this.getIcon()} style={imageStyle} />
|
||||
<span style={nameStyle}>{this.props.device.name}</span>
|
||||
<span style={nameStyle}>
|
||||
{this.props.device.name} ({this.props.device.id})
|
||||
</span>
|
||||
|
||||
<BottomPanel
|
||||
style={
|
||||
|
|
|
@ -32,4 +32,7 @@ export const nameStyle = {
|
|||
top: "30%",
|
||||
left: "50%",
|
||||
transform: "translateX(-50%)",
|
||||
overflow: "hidden",
|
||||
whiteSpace: "nowrap",
|
||||
textOverflow: "ellipsis",
|
||||
};
|
||||
|
|
|
@ -67,7 +67,9 @@ export default class Switch extends Component {
|
|||
/>
|
||||
|
||||
<Image src={this.getIcon()} style={imageStyle} />
|
||||
<span style={nameStyle}>{this.props.device.name}</span>
|
||||
<span style={nameStyle}>
|
||||
{this.props.device.name} ({this.props.device.id})
|
||||
</span>
|
||||
|
||||
<BottomPanel
|
||||
style={
|
||||
|
|
|
@ -13,6 +13,9 @@ export const nameStyle = {
|
|||
top: "30%",
|
||||
left: "50%",
|
||||
transform: "translateX(-50%)",
|
||||
overflow: "hidden",
|
||||
whiteSpace: "nowrap",
|
||||
textOverflow: "ellipsis",
|
||||
};
|
||||
|
||||
export const turnedOnStyle = {
|
||||
|
|
|
@ -17,13 +17,17 @@ export default class ModalWindow extends Component {
|
|||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
console.table(this.props);
|
||||
if (typeof this.props.idRoom === "function") {
|
||||
this.idRoom = this.props.idRoom();
|
||||
} else {
|
||||
this.idRoom = this.props.idRoom;
|
||||
}
|
||||
|
||||
this.state = {
|
||||
id: "",
|
||||
selectedIcon: "",
|
||||
name: this.props.type === "new" ? "Device" : this.props.idRoom.name,
|
||||
img: this.props.type === "new" ? null : this.props.idRoom.image,
|
||||
name: this.props.type === "new" ? "New Room" : this.idRoom.name,
|
||||
img: this.props.type === "new" ? null : this.idRoom.image,
|
||||
openModal: false,
|
||||
};
|
||||
|
||||
|
@ -50,9 +54,9 @@ export default class ModalWindow extends Component {
|
|||
let data = {
|
||||
icon:
|
||||
this.state.selectedIcon === ""
|
||||
? this.props.idRoom.icon
|
||||
? this.idRoom.icon
|
||||
: this.state.selectedIcon,
|
||||
name: this.state.name === "" ? this.props.idRoom.name : this.state.name,
|
||||
name: this.state.name === "" ? this.idRoom.name : this.state.name,
|
||||
image: this.state.img,
|
||||
};
|
||||
this.props.updateRoom(data);
|
||||
|
@ -98,7 +102,7 @@ export default class ModalWindow extends Component {
|
|||
padding: "10px 10px",
|
||||
margin: "10px 0px",
|
||||
};
|
||||
|
||||
console.log(this.state, this.idRoom);
|
||||
return (
|
||||
<div>
|
||||
<Responsive minWidth={768}>
|
||||
|
@ -167,7 +171,7 @@ export default class ModalWindow extends Component {
|
|||
<SelectIcons
|
||||
updateIcon={this.updateIcon}
|
||||
currentIcon={
|
||||
this.props.type === "new" ? "home" : this.props.idRoom.icon
|
||||
this.props.type === "new" ? "home" : this.idRoom.icon
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
|
|
@ -168,10 +168,7 @@ export default class Dashboard extends Component {
|
|||
call
|
||||
.devicePost(data, this.props.tkn)
|
||||
.then((res) => {
|
||||
this.setState((state) => ({
|
||||
devices: state.devices.concat([res.data]),
|
||||
}));
|
||||
return this.state.devices;
|
||||
this.getDevices();
|
||||
})
|
||||
.catch((err) => {});
|
||||
}
|
||||
|
|
|
@ -207,11 +207,6 @@ const Home = () => (
|
|||
<Image bordered rounded size="large" src="/img/banner.jpg" />
|
||||
</Grid.Column>
|
||||
</Grid.Row>
|
||||
<Grid.Row>
|
||||
<Grid.Column textAlign="center">
|
||||
<Button size="huge">Check It Out</Button>
|
||||
</Grid.Column>
|
||||
</Grid.Row>
|
||||
</Grid>
|
||||
</Segment>
|
||||
|
||||
|
@ -226,9 +221,6 @@ const Home = () => (
|
|||
the set the illumination of your entire place. Follow the intelligent
|
||||
light, follow SmartHut.
|
||||
</p>
|
||||
<Button as="a" size="large">
|
||||
Read More
|
||||
</Button>
|
||||
</Container>
|
||||
</Segment>
|
||||
|
||||
|
@ -239,19 +231,57 @@ const Home = () => (
|
|||
<Grid.Column width={3}>
|
||||
<Header inverted as="h4" content="About" />
|
||||
<List link inverted>
|
||||
<List.Item as="a">Sitemap</List.Item>
|
||||
<List.Item as="a">Contact Us</List.Item>
|
||||
<List.Item as="a">Religious Ceremonies</List.Item>
|
||||
<List.Item as="a">Gazebo Plans</List.Item>
|
||||
<List.Item>
|
||||
<a href="https://usi.ch" target="blank">
|
||||
Usi
|
||||
</a>
|
||||
</List.Item>
|
||||
<List.Item>
|
||||
<a href="https://vimtok.com" target="blank">
|
||||
VimTok
|
||||
</a>
|
||||
</List.Item>
|
||||
<List.Item>
|
||||
<a href="https://legendofajax.fun" target="blank">
|
||||
Legend of Ajax
|
||||
</a>
|
||||
</List.Item>
|
||||
<List.Item>
|
||||
<a href="https://theshell.ch" target="blank">
|
||||
The Shell
|
||||
</a>
|
||||
</List.Item>
|
||||
</List>
|
||||
</Grid.Column>
|
||||
<Grid.Column width={3}>
|
||||
<Header inverted as="h4" content="Services" />
|
||||
<List link inverted>
|
||||
<List.Item as="a">Banana Pre-Order</List.Item>
|
||||
<List.Item as="a">DNA FAQ</List.Item>
|
||||
<List.Item as="a">How To Access</List.Item>
|
||||
<List.Item as="a">Favorite X-Men</List.Item>
|
||||
<List.Item>
|
||||
<a href="https://semantic-ui.com/" target="blank">
|
||||
Semantic UI
|
||||
</a>
|
||||
</List.Item>
|
||||
<List.Item>
|
||||
<a
|
||||
href="https://worldmeters.info/coronavirus/"
|
||||
target="blank"
|
||||
>
|
||||
Stay Safe
|
||||
</a>
|
||||
</List.Item>
|
||||
<List.Item>
|
||||
<a
|
||||
href="http://hasthelargehadroncolliderdestroyedtheworldyet.com/"
|
||||
target="blank"
|
||||
>
|
||||
Stay Home
|
||||
</a>
|
||||
</List.Item>
|
||||
<List.Item>
|
||||
<a href="http://Howmuchtoiletpaper.com/" target="blank">
|
||||
Can you Survive?
|
||||
</a>
|
||||
</List.Item>
|
||||
</List>
|
||||
</Grid.Column>
|
||||
<Grid.Column width={7}>
|
||||
|
|
|
@ -26,19 +26,18 @@ class Navbar extends Component {
|
|||
|
||||
handleClick = (e, { id, name }) => {
|
||||
const room = this.props.rooms.filter((d) => d.id === id)[0];
|
||||
console.log(room);
|
||||
this.setState({
|
||||
activeItem: id,
|
||||
activeRoom: room,
|
||||
activeItemName: name,
|
||||
});
|
||||
this.activeRoom = room;
|
||||
console.log(this.activeRoom);
|
||||
this.forceUpdate();
|
||||
console.log(this.state.activeRoom);
|
||||
this.props.handleItemClick(id);
|
||||
};
|
||||
|
||||
render() {
|
||||
const { activeRoom } = this.state;
|
||||
console.log("DIO", activeRoom);
|
||||
return (
|
||||
<div style={{ background: "#1b1c1d!important", padding: "0 20px" }}>
|
||||
<Responsive minWidth={768}>
|
||||
|
@ -170,7 +169,10 @@ class Navbar extends Component {
|
|||
<Grid.Column width={8}>
|
||||
<ModalWindow
|
||||
type="modify"
|
||||
idRoom={activeRoom}
|
||||
idRoom={() => {
|
||||
console.log("MALUSA", this.activeRoom);
|
||||
return this.activeRoom;
|
||||
}}
|
||||
updateRoom={this.props.updateRoom}
|
||||
deleteRoom={this.props.deleteRoom}
|
||||
/>
|
||||
|
|
Loading…
Reference in a new issue