timw4mail/film-exif
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Update some forms

Browse Source
This commit is contained in:
Timothy Warren 2019-01-14 14:37:26 -05:00
parent a1f46f9904
commit e6c3b5f9ea
5 changed files with 181 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/App.js
View File

@ -33,6 +33,9 @@ export class App extends Component {
<NavItem> <NavItem>
<NavLink className="nav-link" to="/camera/list">Cameras</NavLink> <NavLink className="nav-link" to="/camera/list">Cameras</NavLink>
</NavItem> </NavItem>
<NavItem>
<NavLink className="nav-link" to="/lenses/add">Lenses</NavLink>
</NavItem>
<NavItem> <NavItem>
<NavLink className="nav-link" to="/film/add">Films</NavLink> <NavLink className="nav-link" to="/film/add">Films</NavLink>
</NavItem> </NavItem>

2
src/Routes.js
View File

@ -6,6 +6,7 @@ import {
HomeView, HomeView,
OopsView, OopsView,
} from '//views'; } from '//views';
import {LensesAddView} from './views/Lenses/LensesAddView';
export const Routes = () => ( export const Routes = () => (
<Switch> <Switch>
@ -13,6 +14,7 @@ export const Routes = () => (
<Route exact path="/home" component={HomeView} /> <Route exact path="/home" component={HomeView} />
<Route path="/camera" component={CameraAddView} /> <Route path="/camera" component={CameraAddView} />
<Route path="/film" component={FilmAddView} /> <Route path="/film" component={FilmAddView} />
<Route path="/lenses" component={LensesAddView} />
<Route component={OopsView} /> <Route component={OopsView} />
</Switch> </Switch>
); );

21
src/views/Camera/CameraAddView.js
View File

@ -6,7 +6,6 @@ import {
CardFooter, CardFooter,
CardTitle, CardTitle,
Col, Col,
Form,
Row, Row,
} from '//components/Bootstrap'; } from '//components/Bootstrap';
import { DOMForm } from '//components'; import { DOMForm } from '//components';
@ -64,6 +63,11 @@ export function CameraAddView (props) {
name="model" name="model"
required required
/> />
<FormBlock
label="Lens Mount"
name="mount"
required
/>
<FormBlock <FormBlock
label="Serial" label="Serial"
name="serial" name="serial"
@ -79,11 +83,16 @@ export function CameraAddView (props) {
name="film-format" name="film-format"
> >
<option value="">&nbsp;</option> <option value="">&nbsp;</option>
<option value="110">110</option> <optgroup label="Miniature Format">
<option value="120">120</option> <option value="110">110</option>
<option value="127">127</option> <option value="135">35mm (135)</option>
<option value="135">135</option> </optgroup>
<option value="220">220</option> <optgroup label="Medium Format">
<option value="120">120</option>
<option value="127">127</option>
<option value="220">220</option>
<option value="620">620</option>
</optgroup>
</select> </select>
</FormBlock> </FormBlock>
</Row> </Row>

165
src/views/Film/FilmAddView.js
View File

@ -1,5 +1,3 @@
import { linkEvent, Component } from 'inferno';
import { import {
Button, Button,
Card, Card,
@ -8,11 +6,11 @@ import {
CardFooter, CardFooter,
CardTitle, CardTitle,
Col, Col,
Form,
Row, Row,
} from '//components/Bootstrap'; } from '//components/Bootstrap';
import { FormBlock } from '//components/Form'; import { FormBlock } from '//components/Form';
import { DOMForm } from '//components';
/* /*
* Fields from AnalogExif * Fields from AnalogExif
@ -24,92 +22,91 @@ import { FormBlock } from '//components/Form';
* ISO Rating * ISO Rating
*/ */
export class FilmAddView extends Component { function logFormData (formData) {
constructor (props) { const data = {};
super(props); formData.forEach((value, key) => {
data[key] = value;
});
console.log(data);
}
this.state = { function handleFormChange (formData) {
form: { // logFormData(formData);
valid: {}, }
values: {},
},
};
}
handleFormChange (instance, e) { function handleSave (formData) {
instance.setState({ logFormData(formData);
form: { }
...instance.state.form,
values: {
...instance.state.form.values,
[e.target.id]: e.target.value,
},
},
});
}
render () { export function FilmAddView () {
return ( return (
<Row className="full-height"> <Row className="full-height">
<Col sm={12} md={8} lg={4} className="abs-center"> <Col sm={12} md={8} lg={4} className="abs-center">
<Form onKeyDown={ linkEvent(this, this.handleFormChange) }> <DOMForm onChange={handleFormChange} onSubmit={handleSave}>
<Card> <Card>
<CardHeader> <CardHeader>
<CardTitle>Add a Film</CardTitle> <CardTitle>Add a Film</CardTitle>
</CardHeader> </CardHeader>
<CardBody> <CardBody>
<Row className="align-items-baseline"> <Row className="align-items-baseline">
<FormBlock <FormBlock
label="Brand" label="Brand"
name="brand" name="brand"
required required
value={this.state.form.values['brand']} />
/> <FormBlock
<FormBlock label="Film Name"
label="Film Name" name="film-name"
name="film-name" required
required />
value={this.state.form.values['film-name']} <FormBlock
/> label="Film Speed (ASA/ISO)"
<FormBlock max="6400"
label="Film Speed (ISO)" min="1"
max="6400" name="film-speed-asa"
name="film-speed-asa" required
required type="number"
type="number" />
value={this.state.form.values['film-speed-asa']} <FormBlock
/> label="Film Speed (DIN)"
<FormBlock name="film-speed-din"
label="Film Speed (DIN)" type="number"
name="film-speed-din" />
type="number" <FormBlock
value={this.state.form.values['film-speed-din']} label="Film Format"
/> name="film-format"
<FormBlock >
label="Film Format" <select
className="custom-select"
id="film-format"
name="film-format" name="film-format"
value={this.state.form.values['film-format']}
> >
<select className="custom-select" id="film-format" name="film-format"> <option value="">&nbsp;</option>
<optgroup label="Miniature Format">
<option value="110">110</option> <option value="110">110</option>
<option value="135">35mm (135)</option>
</optgroup>
<optgroup label="Medium Format">
<option value="120">120</option> <option value="120">120</option>
<option value="127">127</option> <option value="127">127</option>
<option value="135">135</option> <option value="220">220</option>
</select> <option value="620">620</option>
</FormBlock> </optgroup>
</Row> </select>
</CardBody> </FormBlock>
<CardFooter> </Row>
<Row> </CardBody>
<Col xs={12}> <CardFooter>
<Button color="primary" type="submit">Save</Button> <Row>
</Col> <Col xs={12}>
</Row> <Button color="primary" type="submit">Save</Button>
</CardFooter> </Col>
</Card> </Row>
</Form> </CardFooter>
</Col> </Card>
</Row> </DOMForm>
); </Col>
} </Row>
} );
};

85
src/views/Lenses/LensesAddView.js
View File

@ -1,3 +1,16 @@
import {
Button,
Card,
CardBody,
CardHeader,
CardFooter,
CardTitle,
Col,
Row,
} from '//components/Bootstrap';
import {FormBlock} from '//components/Form';
import {DOMForm} from '//components';
/* /*
* Fields from AnalogExif * Fields from AnalogExif
* *
@ -7,9 +20,71 @@
* Maximum Aperture * Maximum Aperture
*/ */
export const LensesAddView = () => { function logFormData (formData) {
return ( const data = {};
<div /> formData.forEach((value, key) => {
); data[key] = value;
}; });
console.log(data);
}
function handleFormChange (formData) {
// logFormData(formData);
}
function handleSave (formData) {
logFormData(formData);
}
export function LensesAddView () {
return (
<Row className="full-height">
<Col sm={12} md={8} lg={4} className="abs-center">
<DOMForm onChange={handleFormChange} onSubmit={handleSave}>
<Card>
<CardHeader>
<CardTitle>Add a Lens</CardTitle>
</CardHeader>
<CardBody>
<Row className="align-items-baseline">
<FormBlock
label="Brand"
name="brand"
required
/>
<FormBlock
label="Model"
name="model"
required
/>
<FormBlock
label="Lens Mount"
name="mount"
required
/>
<FormBlock
label="Serial"
name="serial"
required
/>
<FormBlock
label="Maximum Aperture"
name="max-aperture"
type="number"
required
/>
</Row>
</CardBody>
<CardFooter>
<Row>
<Col xs={12}>
<Button color="primary" type="submit">Save</Button>
</Col>
</Row>
</CardFooter>
</Card>
</DOMForm>
</Col>
</Row>
);
}