diff options
Diffstat (limited to 'animism-align/frontend')
8 files changed, 60 insertions, 21 deletions
diff --git a/animism-align/frontend/app/api/crud.fetch.js b/animism-align/frontend/app/api/crud.fetch.js index ddcd80b..348f97f 100644 --- a/animism-align/frontend/app/api/crud.fetch.js +++ b/animism-align/frontend/app/api/crud.fetch.js @@ -45,7 +45,7 @@ export function crud_fetch(type, tag) { function _get_url(_url, data) { const url = new URL(window.location.origin + _url) if (data) { - Object.keys(data).forEach(key => url.searchParams.append(key, data[key])) + Object.keys(data).forEach(key => url.searchParams.set(key, data[key])) } return url } diff --git a/animism-align/frontend/app/common/table.component.js b/animism-align/frontend/app/common/table.component.js index b26dcba..eada263 100644 --- a/animism-align/frontend/app/common/table.component.js +++ b/animism-align/frontend/app/common/table.component.js @@ -4,7 +4,7 @@ import { formatName } from 'app/utils' const __HR__ = '__HR__' -export function TableObject({ tag, object, order, summary }) { +export function TableObject({ tag, object, order, summary, className }) { if (!object) return null if (object === 'loading') { return <div className='tableObject loading'>{tag}{': Loading'}</div> @@ -37,7 +37,7 @@ export function TableObject({ tag, object, order, summary }) { return ( <div> {tag && <h3 className='tt'>{tag}</h3>} - <table className={'tableObject ' + tag}> + <table className={'tableObject ' + (className || "")}> <tbody> {objects.map((key, i) => ( <TableRow key={key + '_' + i} name={key} value={object[key]} /> diff --git a/animism-align/frontend/app/views/editor/editor.gate.js b/animism-align/frontend/app/views/editor/editor.gate.js index 5076350..87ca367 100644 --- a/animism-align/frontend/app/views/editor/editor.gate.js +++ b/animism-align/frontend/app/views/editor/editor.gate.js @@ -6,9 +6,12 @@ import { Loader } from 'app/common' import actions from 'app/actions' class EditorGate extends Component { + state = { + ready: false, + } + constructor(props) { super(props) - this.load() } componentDidMount() { @@ -30,13 +33,17 @@ class EditorGate extends Component { 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 + this.setState({ ready: false }) const episode = this.props.episode.lookup[this.props.episode_id] const project = this.props.project.lookup[episode.project_id] actions.site.loadEpisode(project, episode) + .then(() => { + this.setState({ ready: true }) + }) } render() { - if (parseInt(this.props.episode_id) === parseInt(this.props.current_episode_id)) { + if (this.state.ready && parseInt(this.props.episode_id) === parseInt(this.props.current_episode_id)) { return this.props.children } return ( @@ -48,7 +55,7 @@ class EditorGate extends Component { const mapStateToProps = state => ({ episode: state.episode.index, project: state.project.index, - current_episode_id: state.site.episode.id, + current_episode_id: state.site.episode ? state.site.episode.id : 0, }) 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 b06a299..d64bd9f 100644 --- a/animism-align/frontend/app/views/editor/overview/overview.container.js +++ b/animism-align/frontend/app/views/editor/overview/overview.container.js @@ -7,11 +7,11 @@ import './overview.css' // import actions from 'app/actions' import { Loader, TableObject } from 'app/common' import { groupResponseBy } from 'app/utils/api.utils' -import { courtesyS, formatDateTime } from 'app/utils' +import { courtesyS, formatDateTime, timestampHMS } from 'app/utils' class OverviewContainer extends Component { state = { - ready: true, + ready: false, } constructor(props) { @@ -29,14 +29,26 @@ class OverviewContainer extends Component { } build() { - // const episodes = groupResponseBy(this.props.episodes, 'project_id') - // const venues = groupResponseBy(this.props.venues, 'project_id') - // this.setState({ ready: true, episodes, venues }) + const { annotation } = this.props + const stats = annotation.order.reduce((stats, annotation_id) => { + const { paragraph_id, type } = annotation.lookup[annotation_id] + if (paragraph_id) { + stats.paragraphs[paragraph_id] = true + } + if (!stats.types[type]) { + stats.types[type] = 0 + } + stats.types[type] += 1 + return stats + }, { types: {}, paragraphs: {} }) + setTimeout(() => { + this.setState({ ready: true, stats }) + }, 20) } render() { - const { project, episode, media, annotation, align } = this.props - const { ready } = this.state + const { project, episode, media, annotation, align, viewer } = this.props + const { ready, stats } = this.state if (!ready) { return ( <div className='overview'> @@ -44,8 +56,7 @@ class OverviewContainer extends Component { </div> ) } - // console.log(this.props) - console.log(annotation.order.length) + return ( <div className='overview'> <div className='project-top'> @@ -53,15 +64,21 @@ class OverviewContainer extends Component { <h1>{`${project.title}: Episode ${episode.episode_number}`}</h1> <h2>{episode.title}</h2> </div> - <h3>Statistics</h3> - <TableObject - className="overview" + tag="Overview" order={"annotations".split(" ")} object={{ annotations: courtesyS(annotation.order.length, 'annotation'), + media: media.order.length + ' media', + sections: courtesyS(viewer.sections.length, 'section'), + paragraphs: courtesyS(Object.keys(stats.paragraphs).length, 'paragraph'), + duration: timestampHMS(align.duration), }} /> + <TableObject + tag="Annotations" + object={stats.types} + /> </div> </div> ) @@ -73,6 +90,7 @@ const mapStateToProps = state => ({ episode: state.site.episode, media: state.media.index, annotation: state.annotation.index, + viewer: state.viewer, align: state.align, }) diff --git a/animism-align/frontend/app/views/editor/overview/overview.css b/animism-align/frontend/app/views/editor/overview/overview.css index 2c8b903..6a6e292 100644 --- a/animism-align/frontend/app/views/editor/overview/overview.css +++ b/animism-align/frontend/app/views/editor/overview/overview.css @@ -5,3 +5,11 @@ .overview h2 { margin: 0.5rem 0 1rem 0; } + +.overview .tableObject th, .overview .tableTuples th { + color: #ddd; +} + +.overview .tableObject td { + color: #eee; +}
\ No newline at end of file diff --git a/animism-align/frontend/app/views/nav/header.component.js b/animism-align/frontend/app/views/nav/header.component.js index 8443278..4e43657 100644 --- a/animism-align/frontend/app/views/nav/header.component.js +++ b/animism-align/frontend/app/views/nav/header.component.js @@ -14,7 +14,7 @@ function Header(props) { return null } if (props.router.location.pathname.match("/editor")) { - const episode_id = props.router.location.pathname.split('/')[1] + const episode_id = props.router.location.pathname.split('/')[2] return ( <header> <div> diff --git a/animism-align/frontend/app/views/site/site.actions.js b/animism-align/frontend/app/views/site/site.actions.js index a9d3deb..ac14096 100644 --- a/animism-align/frontend/app/views/site/site.actions.js +++ b/animism-align/frontend/app/views/site/site.actions.js @@ -20,17 +20,18 @@ export const loadSite = () => dispatch => { export const loadEpisode = (project, episode) => dispatch => { const { id: episode_id } = episode dispatch({ type: types.editor.loading }) - Promise.all([ + return Promise.all([ // actions.site.loadText(episode), actions.site.loadPeaks(episode), actions.audio.load(episode), actions.annotation.index({ episode_id }), actions.paragraph.index({ episode_id }), actions.media.index({ episode_id }), - ]).then(() => { + ]).then((results) => { actions.viewer.loadSections() dispatch({ type: types.editor.loaded, project, episode }) console.log('Episode loaded') + return results }).catch(err => { console.error(err) }) diff --git a/animism-align/frontend/app/views/viewer/viewer.actions.js b/animism-align/frontend/app/views/viewer/viewer.actions.js index ef98533..a2764ed 100644 --- a/animism-align/frontend/app/views/viewer/viewer.actions.js +++ b/animism-align/frontend/app/views/viewer/viewer.actions.js @@ -48,6 +48,11 @@ export const loadSections = () => dispatch => { const { order: annotationOrder, lookup: annotationLookup } = state.annotation.index const { lookup: mediaLookup } = state.media.index + if (annotationOrder.length === 0) { + dispatch({ type: types.viewer.load_sections, sections: [], footnoteList: [] }) + return + } + // console.log(state) // loop over the annotations in time order. |