Do you wish to register an account?
Browse Source

Update some forms

master
Timothy Warren 1 year ago
parent
commit
e6c3b5f9ea
5 changed files with 180 additions and 94 deletions
  1. +3
    -0
      src/App.js
  2. +2
    -0
      src/Routes.js
  3. +15
    -6
      src/views/Camera/CameraAddView.js
  4. +81
    -84
      src/views/Film/FilmAddView.js
  5. +79
    -4
      src/views/Lenses/LensesAddView.js

+ 3
- 0
src/App.js View File

@@ -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>

+ 2
- 0
src/Routes.js View File

@@ -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>
);

+ 15
- 6
src/views/Camera/CameraAddView.js View File

@@ -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>

+ 81
- 84
src/views/Film/FilmAddView.js View File

@@ -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>
);
};


+ 79
- 4
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
*
@@ -7,9 +20,71 @@
* Maximum Aperture
*/

export const LensesAddView = () => {
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 (
<div />
<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>
);
};

}

Loading…
Cancel
Save