127 lines
3.7 KiB
JavaScript
127 lines
3.7 KiB
JavaScript
import React, { Component } from 'react';
|
|
import PropTypes from 'prop-types';
|
|
|
|
import Modal from './Modals/baseModal';
|
|
|
|
export default class EditMessageModal extends Component {
|
|
static propTypes = {
|
|
handleClose: PropTypes.func.isRequired,
|
|
handleSave: PropTypes.func.isRequired,
|
|
message: PropTypes.object.isRequired
|
|
};
|
|
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
this.state = {
|
|
messageFrame: props.message.frame.copy()
|
|
};
|
|
this.handleSave = this.handleSave.bind(this);
|
|
this.editTransmitter = this.editTransmitter.bind(this);
|
|
this.addTransmitter = this.addTransmitter.bind(this);
|
|
this.renderActions = this.renderActions.bind(this);
|
|
}
|
|
|
|
handleSave() {
|
|
this.props.handleSave(this.state.messageFrame);
|
|
}
|
|
|
|
addTransmitter() {
|
|
const { messageFrame } = this.state;
|
|
messageFrame.addTransmitter();
|
|
this.setState({ messageFrame });
|
|
}
|
|
|
|
editTransmitter(transmitter) {}
|
|
|
|
renderActions() {
|
|
return (
|
|
<div>
|
|
<button className="button--inverted" onClick={this.props.handleClose}>
|
|
Cancel
|
|
</button>
|
|
<button className="button--primary" onClick={this.handleSave}>
|
|
Save Message
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<Modal
|
|
title={`Edit Message: (${this.props.message.id})`}
|
|
subtitle="Make changes and update defaults of this message"
|
|
handleClose={this.props.handleClose}
|
|
handleSave={this.handleSave}
|
|
actions={this.renderActions()}
|
|
>
|
|
<div className="form-field">
|
|
<label htmlFor="message_name">
|
|
<span>Name</span>
|
|
<sup>Customize the name of this message</sup>
|
|
</label>
|
|
<input
|
|
type="text"
|
|
id="message_name"
|
|
value={this.state.messageFrame.name}
|
|
onChange={(e) => {
|
|
const { messageFrame } = this.state;
|
|
messageFrame.name = e.target.value;
|
|
this.setState({ messageFrame });
|
|
}}
|
|
/>
|
|
</div>
|
|
<div className="form-field">
|
|
<label htmlFor="message_size">
|
|
<span>Size</span>
|
|
<sup>Add a size parameter to this message</sup>
|
|
</label>
|
|
<input
|
|
type="number"
|
|
id="message_size"
|
|
value={this.state.messageFrame.size}
|
|
onChange={(e) => {
|
|
const { messageFrame } = this.state;
|
|
if (e.target.value > 8) {
|
|
return;
|
|
}
|
|
messageFrame.size = parseInt(e.target.value, 10);
|
|
this.setState({ messageFrame });
|
|
}}
|
|
/>
|
|
</div>
|
|
<div className="form-field u-hidden">
|
|
<label htmlFor="message_transmitters">
|
|
<span>Transmitters</span>
|
|
<sup>
|
|
Add the physical ECU units that this message is coming from.
|
|
</sup>
|
|
</label>
|
|
<div className="form-field-inset">
|
|
<ul className="form-field-inset-list">
|
|
{this.state.messageFrame.transmitters.map((transmitter) => (
|
|
<li className="form-field-inset-list-item" key={transmitter}>
|
|
<div className="form-field-inset-list-item-title">
|
|
<span>{transmitter}</span>
|
|
</div>
|
|
<div className="form-field-inset-list-item-action">
|
|
<button className="button--tiny button--alpha">Edit</button>
|
|
</div>
|
|
</li>
|
|
))}
|
|
<button className="button--tiny button--alpha">
|
|
<span>
|
|
<i className="fa fa-plus" />
|
|
{' '}
|
|
Add Transmitter
|
|
</span>
|
|
</button>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</Modal>
|
|
);
|
|
}
|
|
}
|