74 lines
2.2 KiB
JavaScript
74 lines
2.2 KiB
JavaScript
|
import React, {Component} from "react";
|
||
|
|
import {Button, Form} from "semantic-ui-react";
|
||
|
|
import {editModeIconStyle, editModeStyle, formStyle} from "./styleComponents";
|
||
|
|
|
||
|
|
class SettingsForm extends Component {
|
||
|
|
constructor(props) {
|
||
|
|
super(props);
|
||
|
|
this.state = {}
|
||
|
|
};
|
||
|
|
|
||
|
|
onChangeHandler = (event) => {
|
||
|
|
let nam = event.target.name;
|
||
|
|
let val = event.target.value;
|
||
|
|
this.setState({[nam]: val});
|
||
|
|
};
|
||
|
|
|
||
|
|
saveChanges = () => {
|
||
|
|
let newName = this.state["new-name"];
|
||
|
|
this.props.onChangeData(this.props.id, {"name": newName});
|
||
|
|
};
|
||
|
|
|
||
|
|
render() {
|
||
|
|
return (
|
||
|
|
<Form style={formStyle}>
|
||
|
|
<Form.Field>
|
||
|
|
<label style={{color: "white"}}>New Device Name</label>
|
||
|
|
<input name="new-name" placeholder='New name' onChange={this.onChangeHandler}/>
|
||
|
|
</Form.Field>
|
||
|
|
<Button type='submit' onClick={this.saveChanges}>Save</Button>
|
||
|
|
</Form>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
export default class Settings extends Component {
|
||
|
|
constructor(props) {
|
||
|
|
super(props);
|
||
|
|
this.state = {
|
||
|
|
displayForm: false,
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
displayForm = () => {
|
||
|
|
this.setState((prevState) => ({displayForm: !prevState.displayForm}));
|
||
|
|
};
|
||
|
|
|
||
|
|
render() {
|
||
|
|
const view = (
|
||
|
|
<div>
|
||
|
|
{this.state.displayForm ? (
|
||
|
|
<SettingsForm id={this.props.deviceId} onChangeData={this.props.onChangeData}/>) : ("")}
|
||
|
|
<div onClick={this.displayForm}>
|
||
|
|
<span style={editModeStyle}>
|
||
|
|
{!this.state.displayForm ? (
|
||
|
|
<img
|
||
|
|
src="/img/settings.svg"
|
||
|
|
alt=""
|
||
|
|
style={editModeIconStyle}/>)
|
||
|
|
:
|
||
|
|
<p style={{color: "white"}}>×</p>
|
||
|
|
}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
return (
|
||
|
|
<React.Fragment>
|
||
|
|
{this.props.edit ? view : ("")}
|
||
|
|
</React.Fragment>
|
||
|
|
)
|
||
|
|
};
|
||
|
|
}
|