diff options
Diffstat (limited to 'animism-align/frontend/app/views')
12 files changed, 558 insertions, 5 deletions
diff --git a/animism-align/frontend/app/views/episode/components/episode.form.js b/animism-align/frontend/app/views/episode/components/episode.form.js index 51064a4..e2edc16 100644 --- a/animism-align/frontend/app/views/episode/components/episode.form.js +++ b/animism-align/frontend/app/views/episode/components/episode.form.js @@ -9,7 +9,14 @@ const newEpisode = () => ({ episode_number: '', title: '', release_date: '', - settings: {}, + settings: { + about: { + curator: "", + author: "", + artists: "", + credits: "", + }, + }, }) export default class EpisodeForm extends Component { @@ -132,6 +139,10 @@ export default class EpisodeForm extends Component { <div className='form'> <h1>{title}</h1> <form onSubmit={this.handleSubmit}> + <SubmitButton + title={submitTitle} + onClick={this.handleSubmit} + /> <TextInput title="Title" name="title" @@ -162,6 +173,40 @@ export default class EpisodeForm extends Component { checked={data.settings.is_live} onChange={this.handleSettingsChange} /> + + <TextArea + title="Curator" + name="curator" + data={data.settings.about} + onChange={this.handleSettingsChangeEvent} + autoComplete="off" + /> + + <TextArea + title="Author" + name="author" + data={data.settings.about} + onChange={this.handleSettingsChangeEvent} + autoComplete="off" + /> + + <TextArea + title="Artists" + name="artists" + data={data.settings.about} + onChange={this.handleSettingsChangeEvent} + autoComplete="off" + /> + + <TextArea + title="Credits" + name="credits" + className="credits" + data={data.settings.about} + onChange={this.handleSettingsChangeEvent} + autoComplete="off" + /> + <SubmitButton title={submitTitle} onClick={this.handleSubmit} diff --git a/animism-align/frontend/app/views/episode/episode.css b/animism-align/frontend/app/views/episode/episode.css index 2493315..e0747ab 100644 --- a/animism-align/frontend/app/views/episode/episode.css +++ b/animism-align/frontend/app/views/episode/episode.css @@ -1,6 +1,9 @@ -.episodeContainer { +.app > .episodeContainer { + width: 100%; + height: calc(100% - 3.125rem); + overflow: scroll; } + .episode-index { margin-top: 1rem; } - diff --git a/animism-align/frontend/app/views/index.js b/animism-align/frontend/app/views/index.js index 5cfd631..d958c74 100644 --- a/animism-align/frontend/app/views/index.js +++ b/animism-align/frontend/app/views/index.js @@ -4,3 +4,4 @@ export { default as upload } from './upload/upload.container' export { default as media } from './media/media.container' export { default as viewer } from './viewer/viewer.container' export { default as episode } from './episode/episode.container' +export { default as venue } from './venue/venue.container' diff --git a/animism-align/frontend/app/views/nav/header.component.js b/animism-align/frontend/app/views/nav/header.component.js index 0779fd5..06b46ab 100644 --- a/animism-align/frontend/app/views/nav/header.component.js +++ b/animism-align/frontend/app/views/nav/header.component.js @@ -18,7 +18,8 @@ function Header(props) { <Link to="/align">Timeline</Link> <Link to="/paragraph">Transcript</Link> <Link to="/media">Media</Link> - <Link to="/episode">Episode</Link> + <Link to="/episode">Episodes</Link> + <Link to="/venue">Venues</Link> <Link to="/viewer">Viewer</Link> </div> </header> @@ -33,7 +34,6 @@ function Header(props) { // } // } - const mapStateToProps = (state) => ({ // auth: state.auth, site: state.site, diff --git a/animism-align/frontend/app/views/venue/components/venue.form.js b/animism-align/frontend/app/views/venue/components/venue.form.js new file mode 100644 index 0000000..decd465 --- /dev/null +++ b/animism-align/frontend/app/views/venue/components/venue.form.js @@ -0,0 +1,209 @@ +import React, { Component } from 'react' +import { Link } from 'react-router-dom' + +import { capitalize } from 'app/utils' + +import { TextInput, NumberInput, LabelDescription, Select, TextArea, Checkbox, SubmitButton, Loader } from 'app/common' + +const newVenue = () => ({ + title: '', + date: '', + settings: { + about: { + curator: "", + author: "", + artists: "", + credits: "", + }, + }, +}) + +export default class VenueForm extends Component { + state = { + title: "", + submitTitle: "", + data: { ...newVenue() }, + errorFields: new Set([]), + } + + constructor(props) { + super(props) + this.handleKeyDown = this.handleKeyDown.bind(this) + this.handleSelect = this.handleSelect.bind(this) + this.handleChange = this.handleChange.bind(this) + this.handleSettingsChange = this.handleSettingsChange.bind(this) + this.handleSettingsChangeEvent = this.handleSettingsChangeEvent.bind(this) + this.handleSubmit = this.handleSubmit.bind(this) + } + + componentDidMount() { + const { data, isNew } = this.props + const title = isNew ? 'New venue' : 'Editing ' + data.title + const submitTitle = isNew ? "Add Venue" : "Save Changes" + this.setState({ + title, + submitTitle, + errorFields: new Set([]), + data: { + ...newVenue(), + ...data + }, + }) + window.addEventListener('keydown', this.handleKeyDown) + } + + componentWillUnmount() { + window.removeEventListener('keydown', this.handleKeyDown) + } + + handleKeyDown(e) { + // console.log(e, e.keyCode) + if ((e.ctrlKey || e.metaKey) && e.keyCode === 83) { + if (e) { + e.preventDefault() + } + this.handleSubmit() + } + } + + handleChange(e) { + const { name, value } = e.target + this.handleSelect(name, value) + } + + handleSelect(name, value) { + const { errorFields } = this.state + if (errorFields.has(name)) { + errorFields.delete(name) + } + this.setState({ + errorFields, + data: { + ...this.state.data, + [name]: value, + } + }) + } + + handleSettingsChangeEvent(e) { + const { name, value } = e.target + this.handleSettingsChange(name, value) + } + + handleSettingsChange(name, value) { + console.log(name, value) + if (name !== 'multiple') { + value = { [name]: value } + } + this.setState({ + data: { + ...this.state.data, + settings: { + ...this.state.data.settings, + ...value, + } + } + }) + } + + handleSubmit(e) { + if (e) { + e.preventDefault() + } + const { isNew, onSubmit } = this.props + const { data } = this.state + const requiredKeys = "title date".split(" ") + const validKeys = "title date settings".split(" ") + const validData = validKeys.reduce((a,b) => { a[b] = data[b]; return a }, {}) + const errorFields = requiredKeys.filter(key => !validData[key]) + if (errorFields.length) { + console.log('error', errorFields, validData) + this.setState({ errorFields: new Set(errorFields) }) + } else { + if (isNew) { + // + } else { + validData.id = data.id + } + console.log('submit', validData) + onSubmit(validData) + } + } + + render() { + const { isNew } = this.props + const { title, submitTitle, errorFields, data } = this.state + // console.log(data) + return ( + <div className='form'> + <h1>{title}</h1> + <form onSubmit={this.handleSubmit}> + <SubmitButton + title={submitTitle} + onClick={this.handleSubmit} + /> + <TextInput + title="Title" + name="title" + required + data={data} + onChange={this.handleChange} + autoComplete="off" + /> + <TextInput + title="Date" + name="date" + required + data={data} + onChange={this.handleChange} + autoComplete="off" + /> + + <TextArea + title="Curator" + name="curator" + data={data.settings.about} + onChange={this.handleSettingsChangeEvent} + autoComplete="off" + /> + + <TextArea + title="Author" + name="author" + data={data.settings.about} + onChange={this.handleSettingsChangeEvent} + autoComplete="off" + /> + + <TextArea + title="Artists" + name="artists" + data={data.settings.about} + onChange={this.handleSettingsChangeEvent} + autoComplete="off" + /> + + <TextArea + title="Credits" + name="credits" + className="credits" + data={data.settings.about} + onChange={this.handleSettingsChangeEvent} + autoComplete="off" + /> + + <SubmitButton + title={submitTitle} + onClick={this.handleSubmit} + /> + {!!errorFields.size && + <label> + <span></span> + <span>Please complete the required fields</span> + </label> + } + </form> + </div> + ) + } +} diff --git a/animism-align/frontend/app/views/venue/components/venue.menu.js b/animism-align/frontend/app/views/venue/components/venue.menu.js new file mode 100644 index 0000000..1e1a7cd --- /dev/null +++ b/animism-align/frontend/app/views/venue/components/venue.menu.js @@ -0,0 +1,57 @@ +import React, { Component } from 'react' +import { Route } from 'react-router-dom' +import { connect } from 'react-redux' + +import { history } from 'app/store' +import actions from 'app/actions' +import { MenuButton } from 'app/common' + +const mapStateToProps = state => ({ + venue: state.venue, +}) + +export default class VenueMenu extends Component { + render() { + return ( + <div className='menuButtons'> + <Route exact path='/venue/:id/show/' component={VenueShowMenu} /> + <Route exact path='/venue/:id/edit/' component={VenueEditMenu} /> + <Route exact path='/venue/new/' component={VenueNewMenu} /> + <Route exact path='/venue/' component={VenueIndexMenu} /> + </div> + ) + } +} + +const VenueIndexMenu = () => ([ + <MenuButton key='new' name="new" href="/venue/new/" />, +]) + +const VenueShowMenu = connect(mapStateToProps)((props) => ([ + <MenuButton key='back' name="back" href="/venue/" />, + <MenuButton key='edit' name="edit" href={"/venue/" + props.match.params.id + "/edit/"} />, + <MenuButton key='delete' name="delete" onClick={() => { + const { res: venue } = props.venue.show + if (confirm("Really delete this venue?")) { + actions.venue.destroy(venue).then(() => { + history.push('/venue/') + }) + } + }} />, +])) + +const VenueNewMenu = (props) => ([ + <MenuButton key='back' name="back" href="/venue/" />, +]) + +const VenueEditMenu = connect(mapStateToProps)((props) => ([ + <MenuButton key='back' name="back" href="/venue/" />, + <MenuButton key='delete' name="delete" onClick={() => { + const { res: venue } = props.venue.show + if (confirm("Really delete this venue?")) { + actions.venue.destroy(venue).then(() => { + history.push('/venue/') + }) + } + }} />, +])) diff --git a/animism-align/frontend/app/views/venue/containers/venue.edit.js b/animism-align/frontend/app/views/venue/containers/venue.edit.js new file mode 100644 index 0000000..4d55c6e --- /dev/null +++ b/animism-align/frontend/app/views/venue/containers/venue.edit.js @@ -0,0 +1,52 @@ +import React, { Component } from 'react' +import { connect } from 'react-redux' + +import { history } from 'app/store' +import actions from 'app/actions' + +import { Loader } from 'app/common' + +import VenueForm from '../components/venue.form' +import VenueMenu from '../components/venue.menu' + +class VenueEdit extends Component { + componentDidMount() { + console.log(this.props.match.params.id) + actions.venue.show(this.props.match.params.id) + } + + handleSubmit(data) { + actions.venue.update(data) + .then(response => { + // response + console.log(response) + history.push('/venue/') + }) + } + + render() { + const { show } = this.props.venue + if (show.loading || !show.res) { + return ( + <div className='form'> + <Loader /> + </div> + ) + } + return ( + <div className='row formContainer'> + <VenueMenu /> + <VenueForm + data={show.res} + onSubmit={this.handleSubmit.bind(this)} + /> + </div> + ) + } +} + +const mapStateToProps = state => ({ + venue: state.venue, +}) + +export default connect(mapStateToProps)(VenueEdit) diff --git a/animism-align/frontend/app/views/venue/containers/venue.index.js b/animism-align/frontend/app/views/venue/containers/venue.index.js new file mode 100644 index 0000000..66f7eb1 --- /dev/null +++ b/animism-align/frontend/app/views/venue/containers/venue.index.js @@ -0,0 +1,71 @@ +import React, { Component } from 'react' +import { Link } from 'react-router-dom' +import { connect } from 'react-redux' + +import { Loader } from 'app/common' +import actions from 'app/actions' + +import VenueMenu from '../components/venue.menu' + +// const { result, collectionLookup } = this.props + +class VenueIndex extends Component { + componentDidMount() { + this.fetch() + } + + fetch() { + actions.venue.index() + } + + render() { + const { loading, lookup, order } = this.props.venue.index + if (loading) { + return ( + <section> + <Loader /> + </section> + ) + } + if (!lookup || !order.length) { + return ( + <section> + <div className="row venue-index"> + <VenueMenu /> + <div> + <h1>Venues</h1> + <p className='gray'> + {"No venues"} + </p> + </div> + </div> + </section> + ) + } + return ( + <section> + <div className="row venue-index"> + <VenueMenu /> + <div className="venue-list"> + <h1>Venues</h1> + {order.map(id => ( + <div key={id}> + <Link to={"/venue/" + id + "/edit/"}> + lookup[id].title + </Link> + lookup[id].date + </div> + ))} + </div> + </div> + {order.length >= 50 && <button className='loadMore' onClick={() => this.fetch(true)}>Load More</button>} + </section> + ) + } +} + +const mapStateToProps = state => ({ + venue: state.venue, +}) + +export default connect(mapStateToProps)(VenueIndex) diff --git a/animism-align/frontend/app/views/venue/containers/venue.new.js b/animism-align/frontend/app/views/venue/containers/venue.new.js new file mode 100644 index 0000000..9f7fe05 --- /dev/null +++ b/animism-align/frontend/app/views/venue/containers/venue.new.js @@ -0,0 +1,62 @@ +import React, { Component } from 'react' +import { Link } from 'react-router-dom' +import { connect } from 'react-redux' + +import { history } from 'app/store' +import actions from 'app/actions' + +import VenueForm from '../components/venue.form' +import VenueMenu from '../components/venue.menu' + +class VenueNew extends Component { + state = { + loading: true, + initialData: {}, + } + + componentDidMount() { + this.setState({ loading: false }) + } + + handleSubmit(data) { + console.log(data) + actions.venue.create(data) + .then(res => { + console.log(res) + if (res.res && res.res.id) { + history.push('/venue/') + } + }) + .catch(err => { + console.error('error') + }) + } + + render() { + if (this.state.loading) { + return ( + <div className='row formContainer' /> + ) + } + return ( + <div className='row formContainer'> + <VenueMenu /> + <VenueForm + isNew + data={this.state.initialData} + onSubmit={this.handleSubmit.bind(this)} + /> + </div> + ) + } +} + +const mapStateToProps = state => ({ + venue: state.venue, +}) + +const mapDispatchToProps = dispatch => ({ + // uploadActions: bindActionCreators({ ...uploadActions }, dispatch), +}) + +export default connect(mapStateToProps, mapDispatchToProps)(VenueNew) diff --git a/animism-align/frontend/app/views/venue/venue.container.js b/animism-align/frontend/app/views/venue/venue.container.js new file mode 100644 index 0000000..eaca694 --- /dev/null +++ b/animism-align/frontend/app/views/venue/venue.container.js @@ -0,0 +1,26 @@ +import React, { Component } from 'react' +import { Route } from 'react-router-dom' +import { connect } from 'react-redux' + +import './venue.css' + +import VenueIndex from './containers/venue.index' +import VenueNew from './containers/venue.new' +import VenueEdit from './containers/venue.edit' + +class Container extends Component { + render() { + return ( + <div className='venueContainer'> + <Route exact path='/venue/:id/edit/' component={VenueEdit} /> + <Route exact path='/venue/new/' component={VenueNew} /> + <Route exact path='/venue/' component={VenueIndex} /> + </div> + ) + } +} +const mapStateToProps = state => ({ + venue: state.venue, +}) + +export default connect(mapStateToProps)(Container) diff --git a/animism-align/frontend/app/views/venue/venue.css b/animism-align/frontend/app/views/venue/venue.css new file mode 100644 index 0000000..ad54dc2 --- /dev/null +++ b/animism-align/frontend/app/views/venue/venue.css @@ -0,0 +1,9 @@ +.app > .venueContainer { + width: 100%; + height: calc(100% - 3.125rem); + overflow: scroll; +} + +.venue-index { + margin-top: 1rem; +} diff --git a/animism-align/frontend/app/views/venue/venue.reducer.js b/animism-align/frontend/app/views/venue/venue.reducer.js new file mode 100644 index 0000000..e0b3a2b --- /dev/null +++ b/animism-align/frontend/app/views/venue/venue.reducer.js @@ -0,0 +1,18 @@ +// import * as types from 'app/types' + +import { crudState, crudReducer } from 'app/api/crud.reducer' + +const initialState = crudState('venue', { + options: {}, +}) + +const reducer = crudReducer('venue') + +export default function venueReducer(state = initialState, action) { + // console.log(action.type, action) + state = reducer(state, action) + switch (action.type) { + default: + return state + } +} |