diff options
3 files changed, 137 insertions, 10 deletions
diff --git a/animism-align/frontend/views/media/components/media.form.js b/animism-align/frontend/views/media/components/media.form.js index 848d1f8..94968df 100644 --- a/animism-align/frontend/views/media/components/media.form.js +++ b/animism-align/frontend/views/media/components/media.form.js @@ -6,6 +6,9 @@ import { capitalize } from '../../../util' import { TextInput, LabelDescription, Select, TextArea, Checkbox, SubmitButton, Loader } from '../../../common' +import MediaImageForm from './media.formImage' +import MediaVideoForm from './media.formVideo' + const newMedia = () => ({ type: 'image', tag: 'media', @@ -33,6 +36,14 @@ export default class MediaForm extends Component { errorFields: new Set([]), } + constructor(props) { + super(props) + this.handleSelect = this.handleSelect.bind(this) + this.handleChange = this.handleChange.bind(this) + this.handleSettingsChange = this.handleSettingsChange.bind(this) + this.handleSubmit = this.handleSubmit.bind(this) + } + componentDidMount() { const { data, isNew } = this.props const title = isNew ? 'New media' : 'Editing ' + data.title @@ -67,6 +78,18 @@ export default class MediaForm extends Component { }) } + handleSettingsChange(name, value) { + this.setState({ + data: { + ...this.state.data, + settings: { + ...this.state.data.settings, + [name]: [value], + } + } + }) + } + handleSubmit(e) { e.preventDefault() const { isNew, onSubmit } = this.props @@ -102,7 +125,7 @@ export default class MediaForm extends Component { return ( <div className='form'> <h1>{title}</h1> - <form onSubmit={this.handleSubmit.bind(this)}> + <form onSubmit={this.handleSubmit}> <Select title='Media Type' name='type' @@ -111,12 +134,28 @@ export default class MediaForm extends Component { onChange={this.handleSelect} /> + {data.type === 'image' && + <MediaImageForm + data={data} + onChange={this.handleSelect} + onSettingsChange={this.handleSettingsChange} + /> + } + + {data.type === 'video' && + <MediaVideoForm + data={data} + onChange={this.handleSelect} + onSettingsChange={this.handleSettingsChange} + /> + } + <TextInput title="Author" name="author" required data={data} - onChange={this.handleChange.bind(this)} + onChange={this.handleChange} autoComplete="off" /> <TextInput @@ -124,7 +163,7 @@ export default class MediaForm extends Component { name="title" required data={data} - onChange={this.handleChange.bind(this)} + onChange={this.handleChange} autoComplete="off" /> <TextInput @@ -132,7 +171,7 @@ export default class MediaForm extends Component { name="pre_title" required data={data} - onChange={this.handleChange.bind(this)} + onChange={this.handleChange} autoComplete="off" /> <TextInput @@ -140,7 +179,7 @@ export default class MediaForm extends Component { name="translated_title" required data={data} - onChange={this.handleChange.bind(this)} + onChange={this.handleChange} autoComplete="off" /> <TextInput @@ -148,7 +187,7 @@ export default class MediaForm extends Component { name="date" required data={data} - onChange={this.handleChange.bind(this)} + onChange={this.handleChange} autoComplete="off" /> <TextInput @@ -156,7 +195,7 @@ export default class MediaForm extends Component { name="medium" required data={data} - onChange={this.handleChange.bind(this)} + onChange={this.handleChange} /> <TextInput title="Source" @@ -164,18 +203,18 @@ export default class MediaForm extends Component { placeholder="Courtesy of / Copyright" required data={data} - onChange={this.handleChange.bind(this)} + onChange={this.handleChange} autoComplete="off" /> <TextArea title="Description" name="description" data={data} - onChange={this.handleChange.bind(this)} + onChange={this.handleChange} /> <SubmitButton title={submitTitle} - onClick={this.handleSubmit.bind(this)} + onClick={this.handleSubmit} /> {!!errorFields.size && <label> diff --git a/animism-align/frontend/views/media/components/media.formImage.js b/animism-align/frontend/views/media/components/media.formImage.js new file mode 100644 index 0000000..b3d227e --- /dev/null +++ b/animism-align/frontend/views/media/components/media.formImage.js @@ -0,0 +1,44 @@ +import React, { Component } from 'react' +import { Link } from 'react-router-dom' + +import { session } from '../../../session' +import { capitalize } from '../../../util' + +import { TextInput, LabelDescription, Select, TextArea, Checkbox, SubmitButton, Loader } from '../../../common' + +export default class MediaImageForm extends Component { + state = { + } + + constructor(props) { + super(props) + this.handleSelect = this.handleSelect.bind(this) + this.handleChange = this.handleChange.bind(this) + this.handleSettingsChange = this.handleSettingsChange.bind(this) + } + + componentDidMount() { + } + + handleChange(e) { + const { name, value } = e.target + this.handleSelect(name, value) + } + + handleSelect(name, value) { + this.props.onSelect(name, value) + } + + handleSettingsChange(name, value) { + this.props.onSettingsChange(name, value) + } + + render() { + const { data } = this.props + console.log(data) + return ( + <div className='imageForm'> + </div> + ) + } +} diff --git a/animism-align/frontend/views/media/components/media.formVideo.js b/animism-align/frontend/views/media/components/media.formVideo.js new file mode 100644 index 0000000..16c1fbb --- /dev/null +++ b/animism-align/frontend/views/media/components/media.formVideo.js @@ -0,0 +1,44 @@ +import React, { Component } from 'react' +import { Link } from 'react-router-dom' + +import { session } from '../../../session' +import { capitalize } from '../../../util' + +import { TextInput, LabelDescription, Select, TextArea, Checkbox, SubmitButton, Loader } from '../../../common' + +export default class MediaVideoForm extends Component { + state = { + } + + constructor(props) { + super(props) + this.handleSelect = this.handleSelect.bind(this) + this.handleChange = this.handleChange.bind(this) + this.handleSettingsChange = this.handleSettingsChange.bind(this) + } + + componentDidMount() { + } + + handleChange(e) { + const { name, value } = e.target + this.handleSelect(name, value) + } + + handleSelect(name, value) { + this.props.onSelect(name, value) + } + + handleSettingsChange(name, value) { + this.props.onSettingsChange(name, value) + } + + render() { + const { data } = this.props + console.log(data) + return ( + <div className='imageForm'> + </div> + ) + } +} |