navbar is starting to work
This commit is contained in:
Nicola Brunner
parent
566f00984e
commit
953b1a609a
4 changed files with 280 additions and 0 deletions
65
smart-hut/icons.js
Normal file
65
smart-hut/icons.js
Normal 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
33
smart-hut/src/components/SelectIcons.js
Normal 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
67
smart-hut/src/components/modalform.js
Normal 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
115
smart-hut/src/views/Navbar.js
Normal 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;
|
||||||
Loading…
Reference in a new issue