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

navbar is starting to work

Browse source
This commit is contained in:
Nicola Brunner 2020-03-13 15:21:33 +01:00
parent 566f00984e
commit 953b1a609a
4 changed files with 280 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

65
smart-hut/icons.js Normal file
View file

@ -0,0 +1,65 @@
1. Home
'home'
2. Bar
'coffee', 'beer', 'glass martini'
3. Filmroom
'film', 'video'
4. Musicroom
'music', 'headphones'
5. Office
'fax', 'phone', 'laptop'
6. Bathroom
'bath', 'shower'
7. Bedroom
'bed', 'child'
8. Garage
'warehouse', 'car', 'bicycle', 'motorcycle'
9. Cellar
'archive', 'boxes', 'cubes'
10. Game Room
'chess', 'gamepad', 'futbol', 'table tennis'
11. IT Rack
'server'
12. Livingroom
'tv'
13. Love Room
'heart'
14. Hobby Room
'camera', 'trophy', 'wrench'
15. Gallery
'image'
16. Library
'book', 'university'
17. Infirmary
'medkit'
18. Petroom
'paw'
19. Garden
'tree'
20. Kitchen
'utensils'
21. Toilette
'female', 'male'
22. Swimmingpool
'life ring outline'

33
smart-hut/src/components/SelectIcons.js Normal file
View file

@ -0,0 +1,33 @@
import React, { Component } from 'react';
import { Button, Header, Image, Modal, Checkbox, Form, Grid, Input, Icon } from 'semantic-ui-react'
export default class SelectIcons extends Component {
render(){
const myicons = [['home', 'coffee', 'beer', 'glass martini', 'film', 'video'],
['music', 'headphones', 'fax', 'phone', 'laptop','bath'],
['shower', 'bed', 'child', 'warehouse', 'car', 'bicycle'],
['motorcycle', 'archive', 'boxes', 'cubes', 'chess', 'gamepad'],
['futbol', 'table tennis', 'server', 'tv', 'heart', 'camera'],
['trophy', 'wrench', 'image', 'book', 'university', 'medkit'],
['paw', 'tree', 'utensils', 'male', 'female', 'life ring outline']];
var colums = 0;
return (
<Grid centered>
{
myicons.map((e, i) => {
return (
<Grid.Row>
{e.map((e) => {
return(<Grid.Column>
<Button icon={e} size="small"/>
</Grid.Column>)
})}
</Grid.Row>
)
})
}
</ Grid>
)
}
}

67
smart-hut/src/components/modalform.js Normal file
View file

@ -0,0 +1,67 @@
import React, { Component } from 'react';
import { Button, Header, Image, Modal, Checkbox, Form, Grid, Input, Icon } from 'semantic-ui-react'
import SelectIcons from "./SelectIcons";
export default class ModalWindow extends Component {
constructor(props) {
super(props);
this.state = {
selectedIcon: 'home',
name: "",
img: ""
}
}
render(){
const spaceDiv = {
background: '#f4f4f4',
padding: '10px 10px',
margin: '10px 0px'
}
return (
<div>
<Modal trigger={<Button icon labelPosition='left' inverted>
<Icon name='plus' size='middle'/>
ADD ROOM
</Button>} closeIcon>
<Header>{this.props.type == "new" ? "Add new room" : "Modify room" }</Header>
<Modal.Content>
<Form>
<p>Insert the name of the room:</p>
<Form.Field>
<Input label='Room name' placeholder='Room Name' type='text'/>
</Form.Field>
<p>Insert an image of the room:</p>
<Form.Field>
<Input label='Room image' type='file' />
</Form.Field>
</Form>
<div style={spaceDiv}>
<p>Select an icon:</p>
<SelectIcons/>
</div>
<Button icon labelPosition='left' inverted color='red'>
<Icon name='trash alternate' />
Delete room
</Button>
</Modal.Content>
<Modal.Actions>
<Button color='red' onClick="">
<Icon name='remove' /> No
</Button>
<Button color='green' onClick="">
<Icon name='checkmark' /> Yes
</Button>
</Modal.Actions>
</Modal>
</div>
)
}
}

115
smart-hut/src/views/Navbar.js Normal file
View file

@ -0,0 +1,115 @@
import React, { Component } from 'react';
import { Menu, Grid, Icon, Button, Header, Image, Modal, Responsive, Segment } from "semantic-ui-react";
import {editButtonStyle} from "../components/dashboard/devices/styleComponents";
import ModalWindow from "../components/modalform";
class Navbar extends Component {
constructor(props) {
super(props);
this.state = {
activeItem: 'Home',
edited: ""
}
}
showForm = (event) => {
console.log(event.target.name);
if (event === "new"){
console.log("funziona");
return (<ModalWindow type="new"/>)
}
}
handleClick = (e, { i }) => {
this.setState({ activeItem: e.name,
edited: i
});
this.props.handleItemClick(e)
}
render(){
const { activeItem } = this.state
return (
<div>
<Segment.Group>
<Responsive as={Segment}>
<Grid>
<Grid.Row>
<button style={editButtonStyle} onClick={this.editModeController}>Edit</button>
</Grid.Row>
<Grid.Row>
<Menu inverted fluid vertical>
<Menu.Item
name='Home'
active={activeItem === 'Home'}
onClick={this.handleClick}
>
<Grid>
<Grid.Row>
<Grid.Column>
<Icon name="home" size="small"/>
</Grid.Column>
<Grid.Column>
Home
</Grid.Column>
</Grid.Row>
</Grid>
</ Menu.Item>
{this.props.rooms ?
this.props.rooms.map((e, i) => {
return (
<Menu.Item
key={i}
name={e.name}
active={activeItem === e.name}
onClick={this.handleClick}
>
<Grid>
<Grid.Row>
<Grid.Column width={1}>
<Icon name="food" size="small"/>
</Grid.Column>
<Grid.Column width={12}>
{e.name}
</Grid.Column>
<Grid.Column width={1}>
<Icon name="pencil" size="small"/>
</Grid.Column>
</Grid.Row>
</Grid>
</ Menu.Item>
)
}) : null
}
<Menu.Item
name='newM'
active={activeItem === 'Plus'}
>
<Grid>
<Grid.Row centered onClick={this.showForm} name='new'>
<ModalWindow type="new"/>
</Grid.Row>
</Grid>
</ Menu.Item>
</Menu>
</Grid.Row>
</Grid>
</Responsive>
<Responsive as={Segment} maxWidth={768}>
//dropdown menu
</Responsive>
</Segment.Group>
</div>
);
}
}
export default Navbar;