Merge branch 'frontend_new' into 'dev'
Frontend new See merge request sa4-2020/the-sanmarinoes/frontend!24
This commit is contained in:
commit
fda609f6bf
4 changed files with 343 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'
|
||||
51
smart-hut/src/components/SelectIcons.js
Normal file
51
smart-hut/src/components/SelectIcons.js
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
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 {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
currentIcon: this.props.currentIcon
|
||||
}
|
||||
}
|
||||
|
||||
selectIcon = (e) => {
|
||||
let el = e.target.name;
|
||||
if (e.target.tagName === "I"){
|
||||
console.log(e.target.parentNode);
|
||||
el = e.target.parentNode.name;
|
||||
}
|
||||
this.props.updateIcon(el);
|
||||
this.setState({currentIcon : el})
|
||||
}
|
||||
|
||||
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 key={i}>
|
||||
{e.map((e, i) => {
|
||||
return(<Grid.Column key={i}>
|
||||
<Button name={e} color={e === this.state.currentIcon ? "black" : null } icon={e} size="small" onClick={this.selectIcon}/>
|
||||
</Grid.Column>)
|
||||
})}
|
||||
</Grid.Row>
|
||||
)
|
||||
})
|
||||
}
|
||||
</ Grid>
|
||||
)
|
||||
}
|
||||
}
|
||||
111
smart-hut/src/components/modalform.js
Normal file
111
smart-hut/src/components/modalform.js
Normal file
|
|
@ -0,0 +1,111 @@
|
|||
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: "",
|
||||
openModal: false
|
||||
}
|
||||
|
||||
this.addRoomModal = this.addRoomModal.bind(this);
|
||||
this.updateIcon = this.updateIcon.bind(this);
|
||||
}
|
||||
|
||||
addRoomModal = (e) => {
|
||||
let data = {
|
||||
"icon" : this.state.selectedIcon,
|
||||
"name" : this.state.name,
|
||||
"images" : this.state.img
|
||||
}
|
||||
|
||||
console.log(this.props, data);
|
||||
this.props.addRoom(data);
|
||||
this.closeModal();
|
||||
}
|
||||
|
||||
deleteRoom = (e) => {
|
||||
console.log(e);
|
||||
}
|
||||
|
||||
changeSomething = (event) => {
|
||||
let nam = event.target.name;
|
||||
let val = event.target.value;
|
||||
this.setState({[nam]: val});
|
||||
}
|
||||
|
||||
closeModal = (e) => {
|
||||
this.setState({openModal:false});
|
||||
this.updateIcon('home');
|
||||
}
|
||||
|
||||
openModal = (e) => {
|
||||
this.setState({openModal:true})
|
||||
}
|
||||
|
||||
updateIcon(e) {
|
||||
console.log(e);
|
||||
this.setState({selectedIcon : e})
|
||||
}
|
||||
|
||||
render(){
|
||||
|
||||
const spaceDiv = {
|
||||
background: '#f4f4f4',
|
||||
padding: '10px 10px',
|
||||
margin: '10px 0px'
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Button icon labelPosition='left' inverted onClick={this.openModal}>
|
||||
<Icon name='plus' size='small'/>
|
||||
ADD ROOM
|
||||
</Button>
|
||||
<Modal
|
||||
onClose={this.closeModal}
|
||||
open={this.state.openModal}>
|
||||
<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' name="name" type='text' onChange={this.changeSomething}/>
|
||||
</Form.Field>
|
||||
<p>Insert an image of the room:</p>
|
||||
<Form.Field>
|
||||
<Input label='Room image' type='file' name="img" onChange={this.changeSomething}/>
|
||||
</Form.Field>
|
||||
</Form>
|
||||
|
||||
<div style={spaceDiv}>
|
||||
<p>Select an icon:</p>
|
||||
<SelectIcons updateIcon={this.updateIcon} currentIcon={this.state.selectedIcon}/>
|
||||
</div>
|
||||
|
||||
{this.props.type == "modify" ?
|
||||
<Button icon labelPosition='left' inverted color='red' onClick={this.deleteRoom}>
|
||||
<Icon name='trash alternate' />
|
||||
Delete room
|
||||
</Button> : null }
|
||||
|
||||
</Modal.Content>
|
||||
<Modal.Actions>
|
||||
<Button color='red' onClick={this.closeModal}>
|
||||
<Icon name='remove' /> {this.props.type == "new" ? "Cancel" : "Discard changes" }
|
||||
</Button>
|
||||
<Button color='green' onClick={this.addRoomModal}>
|
||||
<Icon name='checkmark' /> {this.props.type == "new" ? "Add room" : "Save changes" }
|
||||
</Button>
|
||||
</Modal.Actions>
|
||||
</Modal>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
116
smart-hut/src/views/Navbar.js
Normal file
116
smart-hut/src/views/Navbar.js
Normal file
|
|
@ -0,0 +1,116 @@
|
|||
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);
|
||||
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 color='black'>
|
||||
<button style={editButtonStyle} onClick={this.editModeController}>Edit</button>
|
||||
</Grid.Row>
|
||||
<Grid.Row color='black'>
|
||||
<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
|
||||
id={e.id}
|
||||
key={i}
|
||||
name={e.name}
|
||||
active={activeItem === e.name}
|
||||
onClick={this.handleClick}
|
||||
>
|
||||
<Grid>
|
||||
<Grid.Row>
|
||||
<Grid.Column width={1}>
|
||||
<Icon name={e.icon} 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" addRoom={this.props.addRoom}/>
|
||||
|
||||
</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