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

is prettier

Browse source
This commit is contained in:
Nicola Brunner 2020-03-24 16:03:08 +01:00
parent 10aeb75730
commit 580511ce6e
3 changed files with 130 additions and 124 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

68
smart-hut/src/components/HeaderController.js
View file

@ -5,14 +5,11 @@ import {
BrowserView, BrowserView,
MobileView, MobileView,
isBrowser, isBrowser,
isMobile isMobile,
} from "react-device-detect"; } from "react-device-detect";
const AvatarImage = () => ( const AvatarImage = () => (
<Image <Image src="avatar3.png" style={{ width: "25px", height: "auto" }} centered />
src="avatar3.png"
style={{ width: "25px", height: "auto" }}
centered />
); );
const IconHomeImage = () => ( const IconHomeImage = () => (
@ -35,15 +32,9 @@ const IconHomeImageMobile = () => (
/> />
); );
const TitleImage = () => ( const TitleImage = () => <Image src="title7.png" size="medium" centered />;
<Image
src="title7.png"
size="medium"
centered
/>
);
const BrowserStructure = (props) => ( const BrowserStructure = (props) => (
<Grid columns="equal" divided inverted padded> <Grid columns="equal" divided inverted padded>
<Grid.Row color="black" textAlign="center"> <Grid.Row color="black" textAlign="center">
<Grid.Column width={3} height={0.5}> <Grid.Column width={3} height={0.5}>
@ -76,10 +67,10 @@ const BrowserStructure = (props) => (
</Dropdown> </Dropdown>
</Grid.Column> </Grid.Column>
</Grid.Row> </Grid.Row>
</Grid> </Grid>
); );
const MobileStructure = (props) => ( const MobileStructure = (props) => (
<Grid columns="equal" divided inverted padded> <Grid columns="equal" divided inverted padded>
<Grid.Row color="black" textAlign="center"> <Grid.Row color="black" textAlign="center">
<Segment color="black" inverted> <Segment color="black" inverted>
@ -90,36 +81,29 @@ const MobileStructure = (props) => (
<Grid.Column> <Grid.Column>
<IconHomeImage /> <IconHomeImage />
</Grid.Column> </Grid.Column>
<Grid.Column > <Grid.Column>
<AvatarImage /> <AvatarImage />
<Divider /> <Divider />
<Dropdown item icon="setting" size="huge"> <Dropdown item icon="setting" size="huge">
<Dropdown.Menu> <Dropdown.Menu>
<Dropdown.Item> <Dropdown.Item>
<Icon name="dropdown" /> <Icon name="dropdown" />
<span className="text">Settings</span> <span className="text">Settings</span>
<Dropdown.Menu> <Dropdown.Menu>
<Dropdown.Item>Document</Dropdown.Item> <Dropdown.Item>Document</Dropdown.Item>
<Dropdown.Item>Image</Dropdown.Item> <Dropdown.Item>Image</Dropdown.Item>
</Dropdown.Menu> </Dropdown.Menu>
</Dropdown.Item> </Dropdown.Item>
<Dropdown.Item>See profile...</Dropdown.Item> <Dropdown.Item>See profile...</Dropdown.Item>
<Dropdown.Divider /> <Dropdown.Divider />
<Dropdown.Item onClick={props.logout}>Logout</Dropdown.Item> <Dropdown.Item onClick={props.logout}>Logout</Dropdown.Item>
</Dropdown.Menu> </Dropdown.Menu>
</Dropdown> </Dropdown>
</Grid.Column> </Grid.Column>
</Grid.Row> </Grid.Row>
</Grid> </Grid>
); );
export default class MyHeader extends React.Component { export default class MyHeader extends React.Component {
render() { render() {
return ( return (

7
smart-hut/src/components/SelectIcons.js
View file

@ -1,5 +1,5 @@
import React, { Component } from 'react'; import React, { Component } from "react";
import { Button, Grid, Responsive } from 'semantic-ui-react' import { Button, Grid, Responsive } from "semantic-ui-react";
export default class SelectIcons extends Component { export default class SelectIcons extends Component {
constructor(props) { constructor(props) {
@ -31,8 +31,7 @@ export default class SelectIcons extends Component {
return ( return (
<Grid centered relaxed> <Grid centered relaxed>
{ {myicons.map((e, i) => {
myicons.map((e, i) => {
return ( return (
<Grid.Row key={i}> <Grid.Row key={i}>
{e.map((e, i) => { {e.map((e, i) => {

179
smart-hut/src/components/modalform.js
View file

@ -7,17 +7,17 @@ import {
Input, Input,
Icon, Icon,
Responsive, Responsive,
Image Image,
} from "semantic-ui-react"; } from "semantic-ui-react";
import SelectIcons from "./SelectIcons"; import SelectIcons from "./SelectIcons";
const NO_IMAGE="https://react.semantic-ui.com/images/wireframe/image.png"; const NO_IMAGE = "https://react.semantic-ui.com/images/wireframe/image.png";
export default class ModalWindow extends Component { export default class ModalWindow extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
console.table(this.props); console.table(this.props);
this.state = { this.state = {
id: "", id: "",
@ -84,14 +84,13 @@ console.table(this.props);
let reader = new FileReader(); let reader = new FileReader();
reader.readAsDataURL(file.target.files[0]); reader.readAsDataURL(file.target.files[0]);
reader.onload = () => { reader.onload = () => {
this.state.img = reader.result; this.state.img = reader.result;
this.setState(this.state); this.setState(this.state);
}; };
reader.onerror = console.error; reader.onerror = console.error;
} }
render(){ render() {
const spaceDiv = { const spaceDiv = {
background: "#f4f4f4", background: "#f4f4f4",
padding: "10px 10px", padding: "10px 10px",
@ -115,81 +114,105 @@ console.table(this.props);
<Button icon fluid labelPosition="left" onClick={this.openModal}> <Button icon fluid labelPosition="left" onClick={this.openModal}>
<Icon name="plus" size="small" /> <Icon name="plus" size="small" />
ADD ROOM ADD ROOM
</Button>) </Button>
: ) : (
<Icon name='pencil' size='small' onClick={this.openModal} /> <Icon name="pencil" size="small" onClick={this.openModal} />
} )}
</Responsive> </Responsive>
<Responsive maxWidth={768} > <Responsive maxWidth={768}>
{ {this.props.type === "new" ? (
this.props.type === "new" ? <Button icon fluid labelPosition="left" onClick={this.openModal}>
<Button icon fluid labelPosition='left' onClick={this.openModal}> <Icon name="plus" size="small" />
<Icon name='plus' size='small'/> ADD ROOM
ADD ROOM </Button>
</Button> ) : (
: <Button icon fluid labelPosition="left" onClick={this.openModal}>
<Button icon fluid labelPosition='left' onClick={this.openModal}> <Icon name="pencil" size="small" />
<Icon name='pencil' size='small'/> EDIT ROOM
EDIT ROOM </Button>
</Button> )}
} </Responsive>
</Responsive>
<Modal <Modal onClose={this.closeModal} open={this.state.openModal}>
onClose={this.closeModal} <Header>
open={this.state.openModal}> {this.props.type === "new" ? "Add new room" : "Modify room"}
<Header>{this.props.type === "new" ? "Add new room" : "Modify room" }</Header> </Header>
<Modal.Content> <Modal.Content>
<Form> <Form>
<p>Insert the name of the room:</p> <p>Insert the name of the room:</p>
<Form.Field> <Form.Field>
<Input <Input
label='Room name' label="Room name"
placeholder='Room Name' placeholder="Room Name"
name="name" name="name"
type='text' type="text"
onChange={this.changeSomething} onChange={this.changeSomething}
value={this.state.name}/> value={this.state.name}
</Form.Field> />
<p>Insert an image of the room:</p> </Form.Field>
<Form.Field> <p>Insert an image of the room:</p>
<Form.Field>
<Image
src={this.state.img == null ? NO_IMAGE : this.state.img}
size="small"
onClick={() => this.fileInputRef.current.click()}
/>
<Image <input
src={this.state.img == null ? NO_IMAGE : this.state.img} ref={this.fileInputRef}
size='small' hidden
onClick={() => this.fileInputRef.current.click()}/> label="Room image"
type="file"
name="img"
accept="image/png, image/jpeg"
onChange={this.getBase64.bind(this)}
/>
</Form.Field>
</Form>
<input ref={this.fileInputRef} hidden label='Room image' type='file' name="img" accept="image/png, image/jpeg" <div style={spaceDiv}>
onChange={this.getBase64.bind(this)}/> <p>Select an icon:</p>
<SelectIcons
updateIcon={this.updateIcon}
currentIcon={
this.props.type === "new" ? "home" : this.props.idRoom.icon
}
/>
</div>
</Form.Field> {this.props.type === "modify" ? (
</Form> <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>
<div style={spaceDiv}> <Button
<p>Select an icon:</p> color="green"
<SelectIcons updateIcon={this.updateIcon} currentIcon={this.props.type === "new" ? "home" : this.props.idRoom.icon }/> onClick={
</div> this.props.type === "new"
? this.addRoomModal
{this.props.type === "modify" ? : this.modifyRoomModal
<Button icon labelPosition='left' inverted color='red' onClick={this.deleteRoom}> }
<Icon name='trash alternate' /> >
Delete room <Icon name="checkmark" />{" "}
</Button> : null } {this.props.type === "new" ? "Add room" : "Save changes"}
</Button>
</Modal.Content> </Modal.Actions>
<Modal.Actions> </Modal>
<Button color='red' onClick={this.closeModal}> </div>
<Icon name='remove' /> {this.props.type === "new" ? "Cancel" : "Discard changes" } );
</Button>
<Button color='green' onClick={this.props.type === "new" ? this.addRoomModal : this.modifyRoomModal}>
<Icon name='checkmark' /> {this.props.type === "new" ? "Add room" : "Save changes"}
</Button>
</Modal.Actions>
</Modal>
</div>
)
} }
} }