From e6c3b5f9eaa1d980d41ab48589a8ff67115b3059 Mon Sep 17 00:00:00 2001
From: Timothy Warren <twarren@nabancard.com>
Date: Mon, 14 Jan 2019 14:37:26 -0500
Subject: [PATCH] Update some forms

---
 src/App.js                        |   3 +
 src/Routes.js                     |   2 +
 src/views/Camera/CameraAddView.js |  21 ++--
 src/views/Film/FilmAddView.js     | 165 +++++++++++++++---------------
 src/views/Lenses/LensesAddView.js |  85 ++++++++++++++-
 5 files changed, 181 insertions(+), 95 deletions(-)

diff --git a/src/App.js b/src/App.js
index 644d80f..3a8a516 100644
--- a/src/App.js
+++ b/src/App.js
@@ -33,6 +33,9 @@ export class App extends Component {
 							<NavItem>
 								<NavLink className="nav-link" to="/camera/list">Cameras</NavLink>
 							</NavItem>
+							<NavItem>
+								<NavLink className="nav-link" to="/lenses/add">Lenses</NavLink>
+							</NavItem>
 							<NavItem>
 								<NavLink className="nav-link" to="/film/add">Films</NavLink>
 							</NavItem>
diff --git a/src/Routes.js b/src/Routes.js
index fc7b8d2..a0ea116 100644
--- a/src/Routes.js
+++ b/src/Routes.js
@@ -6,6 +6,7 @@ import {
 	HomeView,
 	OopsView,
 } from '//views';
+import {LensesAddView} from './views/Lenses/LensesAddView';
 
 export const Routes = () => (
 	<Switch>
@@ -13,6 +14,7 @@ export const Routes = () => (
 		<Route exact path="/home" component={HomeView} />
 		<Route path="/camera" component={CameraAddView} />
 		<Route path="/film" component={FilmAddView} />
+		<Route path="/lenses" component={LensesAddView} />
 		<Route component={OopsView} />
 	</Switch>
 );
diff --git a/src/views/Camera/CameraAddView.js b/src/views/Camera/CameraAddView.js
index fd65e18..a5d3cee 100644
--- a/src/views/Camera/CameraAddView.js
+++ b/src/views/Camera/CameraAddView.js
@@ -6,7 +6,6 @@ import {
 	CardFooter,
 	CardTitle,
 	Col,
-	Form,
 	Row,
 } from '//components/Bootstrap';
 import { DOMForm } from '//components';
@@ -64,6 +63,11 @@ export function CameraAddView (props) {
 									name="model"
 									required
 								/>
+								<FormBlock
+									label="Lens Mount"
+									name="mount"
+									required
+								/>
 								<FormBlock
 									label="Serial"
 									name="serial"
@@ -79,11 +83,16 @@ export function CameraAddView (props) {
 										name="film-format"
 									>
 										<option value="">&nbsp;</option>
-										<option value="110">110</option>
-										<option value="120">120</option>
-										<option value="127">127</option>
-										<option value="135">135</option>
-										<option value="220">220</option>
+										<optgroup label="Miniature Format">
+											<option value="110">110</option>
+											<option value="135">35mm (135)</option>
+										</optgroup>
+										<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>
 								</FormBlock>
 							</Row>
diff --git a/src/views/Film/FilmAddView.js b/src/views/Film/FilmAddView.js
index 0fe9944..426c250 100644
--- a/src/views/Film/FilmAddView.js
+++ b/src/views/Film/FilmAddView.js
@@ -1,5 +1,3 @@
-import { linkEvent, Component } from 'inferno';
-
 import {
 	Button,
 	Card,
@@ -8,11 +6,11 @@ import {
 	CardFooter,
 	CardTitle,
 	Col,
-	Form,
 	Row,
 } from '//components/Bootstrap';
 
 import { FormBlock } from '//components/Form';
+import { DOMForm } from '//components';
 
 /*
  * Fields from AnalogExif
@@ -24,92 +22,91 @@ import { FormBlock } from '//components/Form';
  * ISO Rating
  */
 
-export class FilmAddView extends Component {
-	constructor (props) {
-		super(props);
+function logFormData (formData) {
+	const data = {};
+	formData.forEach((value, key) => {
+		data[key] = value;
+	});
+	console.log(data);
+}
 
-		this.state = {
-			form: {
-				valid: {},
-				values: {},
-			},
-		};
-	}
+function handleFormChange (formData) {
+	// logFormData(formData);
+}
 
-	handleFormChange (instance, e) {
-		instance.setState({
-			form: {
-				...instance.state.form,
-				values: {
-					...instance.state.form.values,
-					[e.target.id]: e.target.value,
-				},
-			},
-		});
-	}
+function handleSave (formData) {
+	logFormData(formData);
+}
 
-	render () {
-		return (
-			<Row className="full-height">
-				<Col sm={12} md={8} lg={4} className="abs-center">
-					<Form onKeyDown={ linkEvent(this, this.handleFormChange) }>
-						<Card>
-							<CardHeader>
-								<CardTitle>Add a Film</CardTitle>
-							</CardHeader>
-							<CardBody>
-								<Row className="align-items-baseline">
-									<FormBlock
-										label="Brand"
-										name="brand"
-										required
-										value={this.state.form.values['brand']}
-									/>
-									<FormBlock
-										label="Film Name"
-										name="film-name"
-										required
-										value={this.state.form.values['film-name']}
-									/>
-									<FormBlock
-										label="Film Speed (ISO)"
-										max="6400"
-										name="film-speed-asa"
-										required
-										type="number"
-										value={this.state.form.values['film-speed-asa']}
-									/>
-									<FormBlock
-										label="Film Speed (DIN)"
-										name="film-speed-din"
-										type="number"
-										value={this.state.form.values['film-speed-din']}
-									/>
-									<FormBlock
-										label="Film Format"
+export function FilmAddView () {
+	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 Film</CardTitle>
+						</CardHeader>
+						<CardBody>
+							<Row className="align-items-baseline">
+								<FormBlock
+									label="Brand"
+									name="brand"
+									required
+								/>
+								<FormBlock
+									label="Film Name"
+									name="film-name"
+									required
+								/>
+								<FormBlock
+									label="Film Speed (ASA/ISO)"
+									max="6400"
+									min="1"
+									name="film-speed-asa"
+									required
+									type="number"
+								/>
+								<FormBlock
+									label="Film Speed (DIN)"
+									name="film-speed-din"
+									type="number"
+								/>
+								<FormBlock
+									label="Film Format"
+									name="film-format"
+								>
+									<select
+										className="custom-select"
+										id="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="135">35mm (135)</option>
+										</optgroup>
+										<optgroup label="Medium Format">
 											<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>
-		);
-	}
-}
+											<option value="220">220</option>
+											<option value="620">620</option>
+										</optgroup>
+									</select>
+								</FormBlock>
+							</Row>
+						</CardBody>
+						<CardFooter>
+							<Row>
+								<Col xs={12}>
+									<Button color="primary" type="submit">Save</Button>
+								</Col>
+							</Row>
+						</CardFooter>
+					</Card>
+				</DOMForm>
+			</Col>
+		</Row>
+	);
+};
+
diff --git a/src/views/Lenses/LensesAddView.js b/src/views/Lenses/LensesAddView.js
index 84cd820..3d639ef 100644
--- a/src/views/Lenses/LensesAddView.js
+++ b/src/views/Lenses/LensesAddView.js
@@ -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
  *
@@ -7,9 +20,71 @@
  * Maximum Aperture
  */
 
-export const LensesAddView = () => {
-	return (
-		<div />
-	);
-};
+function logFormData (formData) {
+	const data = {};
+	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>
+	);
+}