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