diff options
Diffstat (limited to 'animism-align')
9 files changed, 65 insertions, 30 deletions
diff --git a/animism-align/frontend/app/common/tableIndex.component.js b/animism-align/frontend/app/common/tableIndex.component.js index c58fc35..127ecf9 100644 --- a/animism-align/frontend/app/common/tableIndex.component.js +++ b/animism-align/frontend/app/common/tableIndex.component.js @@ -1,6 +1,5 @@ import React, { Component } from 'react' import { Link } from 'react-router-dom' -import { connect } from 'react-redux' import { formatDateTime } from 'app/utils' import { Loader, Swatch, Dot } from 'app/common' diff --git a/animism-align/frontend/app/types.js b/animism-align/frontend/app/types.js index 4f9d123..1966dde 100644 --- a/animism-align/frontend/app/types.js +++ b/animism-align/frontend/app/types.js @@ -28,7 +28,7 @@ export const audio = with_type('audio', [ ]) export const editor = with_type('editor', [ - 'loaded', + 'loading', 'loaded', ]) export const viewer = with_type('viewer', [ 'load_sections', 'toggle_component', 'toggle_nav_component', diff --git a/animism-align/frontend/app/views/editor/align/align.reducer.js b/animism-align/frontend/app/views/editor/align/align.reducer.js index c9b85d7..d37cd6d 100644 --- a/animism-align/frontend/app/views/editor/align/align.reducer.js +++ b/animism-align/frontend/app/views/editor/align/align.reducer.js @@ -13,7 +13,6 @@ const initialState = { }, peaks: { loading: true }, text: { loading: true }, - currentEpisodeId: -1, annotation: {}, selectedAnnotation: {}, options: { @@ -23,13 +22,6 @@ const initialState = { export default function alignReducer(state = initialState, action) { // console.log(action.type, action) switch (action.type) { - - case types.editor.loaded: - return { - ...state, - currentEpisodeId: action.episode_id, - } - case types.peaks.loaded: // console.log('peaks duration:', action.data.length / 10) return { diff --git a/animism-align/frontend/app/views/editor/editor.container.js b/animism-align/frontend/app/views/editor/editor.container.js index 599225a..2d4b036 100644 --- a/animism-align/frontend/app/views/editor/editor.container.js +++ b/animism-align/frontend/app/views/editor/editor.container.js @@ -10,7 +10,6 @@ import ViewerContainer from 'app/views/viewer/viewer.container' export default class Router extends Component { render() { - console.log(this.props.match.params) return ( <EditorGate episode_id={this.props.match.params.episode_id}> <Route path={"/editor/:episode_id/timeline/"} component={AlignContainer} /> diff --git a/animism-align/frontend/app/views/editor/editor.gate.js b/animism-align/frontend/app/views/editor/editor.gate.js index b835a69..5076350 100644 --- a/animism-align/frontend/app/views/editor/editor.gate.js +++ b/animism-align/frontend/app/views/editor/editor.gate.js @@ -18,32 +18,37 @@ class EditorGate extends Component { componentDidUpdate(prevProps) { if ( this.props.episode_id !== prevProps.episode_id || - this.props.episode.lookup !== prevProps.episode.lookup + this.props.episode.lookup !== prevProps.episode.lookup || + this.props.project.lookup !== prevProps.project.lookup ) { this.load() } } load() { + if (!this.props.project.lookup) return if (!this.props.episode.lookup) return if (!this.props.episode_id) return + if (parseInt(this.props.episode_id) === parseInt(this.props.current_episode_id)) return const episode = this.props.episode.lookup[this.props.episode_id] - actions.site.loadEpisode(episode) + const project = this.props.project.lookup[episode.project_id] + actions.site.loadEpisode(project, episode) } render() { - if (parseInt(this.props.episode_id) === parseInt(this.props.currentEpisodeId)) { + if (parseInt(this.props.episode_id) === parseInt(this.props.current_episode_id)) { return this.props.children } return ( - <div className="dashboard"><Loader /></div> + <div className="overview"><Loader /></div> ) } } const mapStateToProps = state => ({ episode: state.episode.index, - currentEpisodeId: state.align.currentEpisodeId, + project: state.project.index, + current_episode_id: state.site.episode.id, }) export default connect(mapStateToProps)(EditorGate)
\ No newline at end of file diff --git a/animism-align/frontend/app/views/editor/overview/overview.container.js b/animism-align/frontend/app/views/editor/overview/overview.container.js index 8ce64b9..b06a299 100644 --- a/animism-align/frontend/app/views/editor/overview/overview.container.js +++ b/animism-align/frontend/app/views/editor/overview/overview.container.js @@ -5,8 +5,9 @@ import { Link } from 'react-router-dom' import './overview.css' // import actions from 'app/actions' -import { Loader } from 'app/common' +import { Loader, TableObject } from 'app/common' import { groupResponseBy } from 'app/utils/api.utils' +import { courtesyS, formatDateTime } from 'app/utils' class OverviewContainer extends Component { state = { @@ -28,30 +29,39 @@ class OverviewContainer extends Component { } build() { - if (this.props.loading) return // const episodes = groupResponseBy(this.props.episodes, 'project_id') // const venues = groupResponseBy(this.props.venues, 'project_id') // this.setState({ ready: true, episodes, venues }) } render() { - const { loading, projects } = this.props - const { episodes, venues, ready } = this.state - if (loading || !ready) { + const { project, episode, media, annotation, align } = this.props + const { ready } = this.state + if (!ready) { return ( - <div className='dashboard'> + <div className='overview'> <Loader /> </div> ) } + // console.log(this.props) + console.log(annotation.order.length) return ( - <div className='dashboard overview'> + <div className='overview'> <div className='project-top'> - <div className='row project-heading'> - <div className='title'> - <h1>Episode</h1> - </div> + <div className='project-heading'> + <h1>{`${project.title}: Episode ${episode.episode_number}`}</h1> + <h2>{episode.title}</h2> </div> + <h3>Statistics</h3> + + <TableObject + className="overview" + order={"annotations".split(" ")} + object={{ + annotations: courtesyS(annotation.order.length, 'annotation'), + }} + /> </div> </div> ) @@ -59,6 +69,15 @@ class OverviewContainer extends Component { } const mapStateToProps = state => ({ + project: state.site.project, + episode: state.site.episode, + media: state.media.index, + annotation: state.annotation.index, + align: state.align, }) export default connect(mapStateToProps)(OverviewContainer) + +/* + last_updated: formatDateTime(dataset.last_updated), + */ diff --git a/animism-align/frontend/app/views/editor/overview/overview.css b/animism-align/frontend/app/views/editor/overview/overview.css index abd6c93..2c8b903 100644 --- a/animism-align/frontend/app/views/editor/overview/overview.css +++ b/animism-align/frontend/app/views/editor/overview/overview.css @@ -1,3 +1,7 @@ .overview { + padding: 1.5rem; +} -}
\ No newline at end of file +.overview h2 { + margin: 0.5rem 0 1rem 0; +} diff --git a/animism-align/frontend/app/views/site/site.actions.js b/animism-align/frontend/app/views/site/site.actions.js index 493e566..a9d3deb 100644 --- a/animism-align/frontend/app/views/site/site.actions.js +++ b/animism-align/frontend/app/views/site/site.actions.js @@ -17,8 +17,9 @@ export const loadSite = () => dispatch => { }) } -export const loadEpisode = (episode) => dispatch => { +export const loadEpisode = (project, episode) => dispatch => { const { id: episode_id } = episode + dispatch({ type: types.editor.loading }) Promise.all([ // actions.site.loadText(episode), actions.site.loadPeaks(episode), @@ -28,7 +29,7 @@ export const loadEpisode = (episode) => dispatch => { actions.media.index({ episode_id }), ]).then(() => { actions.viewer.loadSections() - dispatch({ type: types.editor.loaded, episode_id }) + dispatch({ type: types.editor.loaded, project, episode }) console.log('Episode loaded') }).catch(err => { console.error(err) diff --git a/animism-align/frontend/app/views/site/site.reducer.js b/animism-align/frontend/app/views/site/site.reducer.js index d6a475e..36f50ca 100644 --- a/animism-align/frontend/app/views/site/site.reducer.js +++ b/animism-align/frontend/app/views/site/site.reducer.js @@ -1,11 +1,27 @@ import * as types from 'app/types' const initialState = { + project: {}, + episode: {}, } export default function siteReducer(state = initialState, action) { // console.log(action.type, action) switch (action.type) { + case types.editor.loading: + return { + ...state, + project: {}, + episode: {}, + } + + case types.editor.loaded: + return { + ...state, + project: action.project, + episode: action.episode, + } + default: return state } |