diff options
Diffstat (limited to 'client')
| -rw-r--r-- | client/applet.js | 3 | ||||
| -rw-r--r-- | client/datasetList/datasetList.container.js | 91 | ||||
| -rw-r--r-- | client/datasetList/index.js | 5 | ||||
| -rw-r--r-- | client/index.js | 2 |
4 files changed, 100 insertions, 1 deletions
diff --git a/client/applet.js b/client/applet.js index 25291401..27191693 100644 --- a/client/applet.js +++ b/client/applet.js @@ -3,6 +3,7 @@ import React, { Component } from 'react' import { Container as FaceSearchContainer } from './faceSearch' import { Container as FaceAnalysisContainer } from './faceAnalysis' import { Container as NameSearchContainer } from './nameSearch' +import { Container as DatasetListContainer } from './datasetList' export default class Applet extends Component { render() { @@ -14,6 +15,8 @@ export default class Applet extends Component { return <FaceSearchContainer {...this.props} /> case 'name_search': return <NameSearchContainer {...this.props} /> + case 'dataset_list': + return <DatasetListContainer {...this.props} /> default: return <pre style={{ color: '#0f0' }}>{'Megapixels'}</pre> } diff --git a/client/datasetList/datasetList.container.js b/client/datasetList/datasetList.container.js new file mode 100644 index 00000000..11fb4a5b --- /dev/null +++ b/client/datasetList/datasetList.container.js @@ -0,0 +1,91 @@ +import React, { Component } from 'react' +import { bindActionCreators } from 'redux' +import { connect } from 'react-redux' +import { toArray } from '../util' + +// import DatasetListQuery from './datasetList.query' + +const parseTypes = { + string: s => s.toLowerCase(), + number: s => parseInt((s || '0').replace(',', '').trim()), +} + +const sortTypes = { + string: (a,b) => a[0].localeCompare(b[0]), + number: (a,b) => a[0] - b[0], +} + +const sortOptions = [ + { field: 'title', title: 'Name', type: 'string' }, + { field: 'year', title: 'Year', type: 'number' }, + { field: 'purpose', title: 'Purpose', type: 'string' }, + { field: 'images', title: 'Images', type: 'number', reversed: true }, +] + +class DatasetListContainer extends Component { + state = { + sort: sortOptions[0], + reversed: false, + displayField: 'year', + } + + constructor(){ + super() + const parent = document.querySelector('.dataset-intro .dataset-list') + this.parent = parent + this.els = toArray(parent.children) + } + + sortBy(order){ + let { sort, reversed, displayField } = this.state + if (sort === order) reversed = !reversed + else reversed = !!order.reversed + const parseFn = parseTypes[order.type] + const sortFn = sortTypes[order.type] + let els = this.els + .map(el => [ + parseFn(el.querySelector('.' + order.field).innerText), + el, + ]) + .sort(sortFn) + .map(pair => pair[1]) + if (reversed) els.reverse() + if (order.field === 'title') { + // displayField = 'year' + } else { + displayField = order.field + } + els.forEach(el => { + this.parent.removeChild(el) + this.parent.appendChild(el) + const viz = el.querySelector('.visible') + if (viz) { + viz.classList.remove('visible') + } + el.querySelector('.' + displayField).classList.add('visible') + }) + this.setState({ sort: order, reversed, displayField }) + } + + render() { + const { payload } = this.props + // console.log(payload) + return ( + <div className='dataset-list'> + <ul className='sort-options'> + {sortOptions.map(order => + <li + key={order.field} + className={order.field === this.state.sort.field ? 'active' : ''} + onClick={() => this.sortBy(order)}> + {order.title} + </li> + )} + </ul> + </div> + ) + } +} + + +export default DatasetListContainer diff --git a/client/datasetList/index.js b/client/datasetList/index.js new file mode 100644 index 00000000..5c32b960 --- /dev/null +++ b/client/datasetList/index.js @@ -0,0 +1,5 @@ +import Container from './datasetList.container' + +export { + Container, +} diff --git a/client/index.js b/client/index.js index 9db88f14..1e4e2eb8 100644 --- a/client/index.js +++ b/client/index.js @@ -80,7 +80,7 @@ function runApplets() { url = null } } - if (!dataset && !url) { + if (('datasets' in payload) && !dataset && !url) { const path = window.location.pathname.split('/').filter(s => !!s) if (path.length) { dataset = path.pop() |