2018-04-04 19:26:34 -04:00
|
|
|
import { linkEvent, Component } from 'inferno';
|
2018-04-03 14:13:16 -04:00
|
|
|
|
|
|
|
import {
|
2018-04-03 15:19:45 -04:00
|
|
|
Button,
|
2018-04-04 19:26:34 -04:00
|
|
|
Card,
|
|
|
|
CardBody,
|
|
|
|
CardHeader,
|
|
|
|
CardFooter,
|
|
|
|
CardTitle,
|
2018-04-03 15:19:45 -04:00
|
|
|
Col,
|
2018-04-03 14:13:16 -04:00
|
|
|
Form,
|
2018-04-03 15:19:45 -04:00
|
|
|
Row,
|
2018-05-03 15:23:48 -04:00
|
|
|
} from '//components/Bootstrap';
|
2018-04-03 14:13:16 -04:00
|
|
|
|
2018-05-03 15:23:48 -04:00
|
|
|
import { FormBlock } from '//components/Form';
|
2018-04-03 22:27:41 -04:00
|
|
|
|
2018-05-15 15:34:58 -04:00
|
|
|
/*
|
|
|
|
* Fields from AnalogExif
|
|
|
|
*
|
|
|
|
* Manufacturer
|
|
|
|
* Name
|
|
|
|
* Alias
|
|
|
|
* Grain
|
|
|
|
* ISO Rating
|
|
|
|
*/
|
|
|
|
|
2018-04-03 14:13:16 -04:00
|
|
|
export class FilmAddView extends Component {
|
2018-04-03 15:19:45 -04:00
|
|
|
constructor (props) {
|
2018-04-04 21:28:47 -04:00
|
|
|
super(props);
|
2018-04-03 14:13:16 -04:00
|
|
|
|
2018-04-03 15:19:45 -04:00
|
|
|
this.state = {
|
2018-04-04 19:26:34 -04:00
|
|
|
form: {
|
|
|
|
valid: {},
|
|
|
|
values: {},
|
2018-04-04 21:28:47 -04:00
|
|
|
},
|
2018-04-03 15:19:45 -04:00
|
|
|
};
|
|
|
|
}
|
|
|
|
|
2018-04-04 21:28:47 -04:00
|
|
|
handleFormChange (instance, e) {
|
|
|
|
instance.setState({
|
|
|
|
form: {
|
|
|
|
...instance.state.form,
|
|
|
|
values: {
|
|
|
|
...instance.state.form.values,
|
|
|
|
[e.target.id]: e.target.value,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
});
|
2018-04-04 19:26:34 -04:00
|
|
|
}
|
|
|
|
|
2018-04-03 15:19:45 -04:00
|
|
|
render () {
|
|
|
|
return (
|
2018-04-04 19:26:34 -04:00
|
|
|
<Row className="full-height">
|
|
|
|
<Col sm={12} md={8} lg={4} className="abs-center">
|
2018-04-04 21:28:47 -04:00
|
|
|
<Form onKeyDown={ linkEvent(this, this.handleFormChange) }>
|
2018-04-04 19:26:34 -04:00
|
|
|
<Card>
|
|
|
|
<CardHeader>
|
|
|
|
<CardTitle>Add a Film</CardTitle>
|
|
|
|
</CardHeader>
|
|
|
|
<CardBody>
|
|
|
|
<Row className="align-items-baseline">
|
|
|
|
<FormBlock
|
|
|
|
label="Brand"
|
|
|
|
name="brand"
|
|
|
|
required
|
2018-04-04 21:28:47 -04:00
|
|
|
value={this.state.form.values['brand']}
|
2018-04-04 19:26:34 -04:00
|
|
|
/>
|
|
|
|
<FormBlock
|
|
|
|
label="Film Name"
|
|
|
|
name="film-name"
|
|
|
|
required
|
2018-04-04 21:28:47 -04:00
|
|
|
value={this.state.form.values['film-name']}
|
2018-04-04 19:26:34 -04:00
|
|
|
/>
|
|
|
|
<FormBlock
|
|
|
|
label="Film Speed (ISO)"
|
|
|
|
max="6400"
|
|
|
|
name="film-speed-asa"
|
|
|
|
required
|
|
|
|
type="number"
|
2018-04-04 21:28:47 -04:00
|
|
|
value={this.state.form.values['film-speed-asa']}
|
2018-04-04 19:26:34 -04:00
|
|
|
/>
|
|
|
|
<FormBlock
|
|
|
|
label="Film Speed (DIN)"
|
|
|
|
name="film-speed-din"
|
|
|
|
type="number"
|
2018-04-04 21:28:47 -04:00
|
|
|
value={this.state.form.values['film-speed-din']}
|
2018-04-04 19:26:34 -04:00
|
|
|
/>
|
|
|
|
<FormBlock
|
|
|
|
label="Film Format"
|
|
|
|
name="film-format"
|
2018-04-04 21:28:47 -04:00
|
|
|
value={this.state.form.values['film-format']}
|
2018-04-04 19:26:34 -04:00
|
|
|
>
|
|
|
|
<select className="custom-select" id="film-format" name="film-format">
|
|
|
|
<option value="110">110</option>
|
|
|
|
<option value="120">120</option>
|
|
|
|
<option value="127">127</option>
|
|
|
|
<option value="135">135</option>
|
|
|
|
</select>
|
|
|
|
</FormBlock>
|
|
|
|
</Row>
|
|
|
|
</CardBody>
|
|
|
|
<CardFooter>
|
|
|
|
<Row>
|
|
|
|
<Col xs={12}>
|
|
|
|
<Button color="primary" type="submit">Save</Button>
|
|
|
|
</Col>
|
|
|
|
</Row>
|
|
|
|
</CardFooter>
|
|
|
|
</Card>
|
|
|
|
</Form>
|
|
|
|
</Col>
|
|
|
|
</Row>
|
2018-04-04 21:28:47 -04:00
|
|
|
);
|
2018-04-03 15:19:45 -04:00
|
|
|
}
|
2018-04-03 14:13:16 -04:00
|
|
|
}
|