From 953027ccdfb34c83a6d301401ccb47ec43b86825 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 29 May 2018 04:05:11 +0200 Subject: file list --- app/client/common/fileList.component.js | 44 +++++++++++ app/client/common/gallery.component.js | 32 ++++++++ app/client/common/textInput.component.js | 1 + app/client/dashboard/dashboard.component.js | 4 +- app/client/dashboard/filelist.component.js | 46 ----------- app/client/dashboard/gallery.component.js | 32 -------- app/client/modules/samplernn/datasets.component.js | 92 ++++++++++++++++------ app/client/modules/samplernn/samplernn.reducer.js | 14 +++- 8 files changed, 157 insertions(+), 108 deletions(-) create mode 100644 app/client/common/fileList.component.js create mode 100644 app/client/common/gallery.component.js delete mode 100644 app/client/dashboard/filelist.component.js delete mode 100644 app/client/dashboard/gallery.component.js (limited to 'app') diff --git a/app/client/common/fileList.component.js b/app/client/common/fileList.component.js new file mode 100644 index 0000000..8ee61f7 --- /dev/null +++ b/app/client/common/fileList.component.js @@ -0,0 +1,44 @@ +import { h, Component } from 'preact' +import { bindActionCreators } from 'redux' +import { connect } from 'react-redux' +import moment from 'moment' +import * as util from '../util' + +class FileList extends Component { + constructor(props){ + super() + } + render(){ + const { files } = this.props + const fileList = files.map(file => { + return ( +
+
{file.name || file.url}
+
{file.size || ''}
+
{moment(file.created_at).format("YYYY-MM-DD H:mm")}
+ {file.epoch &&
epoch {file.epoch}
} +
{file.activity || ''} {file.module || ''}
+ {this.props.options && this.props.options(file)} + {file.epochs &&
{file.epochs} ep.
} + {file.eta &&
{file.eta}
} +
+ ) + }) + return ( +
+ {fileList} +
+ ) + } +} + + + +const mapStateToProps = state => ({ +}) + +const mapDispatchToProps = (dispatch, ownProps) => ({ + // actions: bindActionCreators(liveActions, dispatch) +}) + +export default connect(mapStateToProps, mapDispatchToProps)(FileList) diff --git a/app/client/common/gallery.component.js b/app/client/common/gallery.component.js new file mode 100644 index 0000000..8db7032 --- /dev/null +++ b/app/client/common/gallery.component.js @@ -0,0 +1,32 @@ +import { h, Component } from 'preact' +import { bindActionCreators } from 'redux' +import { connect } from 'react-redux' + +class Gallery extends Component { + constructor(props){ + super() + } + render(){ + const { title, images } = this.props + const imageList = images.map(image => { + return ( +
+ +
+ ) + }) + return ( +
+ {imageList} +
+ ) + } +} +const mapStateToProps = state => ({ +}) + +const mapDispatchToProps = (dispatch, ownProps) => ({ + // actions: bindActionCreators(liveActions, dispatch) +}) + +export default connect(mapStateToProps, mapDispatchToProps)(Gallery) diff --git a/app/client/common/textInput.component.js b/app/client/common/textInput.component.js index b3c4866..c514b78 100644 --- a/app/client/common/textInput.component.js +++ b/app/client/common/textInput.component.js @@ -24,6 +24,7 @@ class TextInput extends Component { value={this.props.value} onInput={this.handleInput} onKeydown={this.handleKeydown} + placeholder={this.props.placeholder} /> diff --git a/app/client/dashboard/dashboard.component.js b/app/client/dashboard/dashboard.component.js index 3d3d168..2feba32 100644 --- a/app/client/dashboard/dashboard.component.js +++ b/app/client/dashboard/dashboard.component.js @@ -10,8 +10,8 @@ import Button from '../common/button.component' import DashboardHeader from './dashboardheader.component' import TaskList from './tasklist.component' -import FileList from './filelist.component' -import Gallery from './gallery.component' +import FileList from '../common/fileList.component' +import Gallery from '../common/gallery.component' import * as dashboardActions from './dashboard.actions' diff --git a/app/client/dashboard/filelist.component.js b/app/client/dashboard/filelist.component.js deleted file mode 100644 index 2833ec8..0000000 --- a/app/client/dashboard/filelist.component.js +++ /dev/null @@ -1,46 +0,0 @@ -import { h, Component } from 'preact' -import { bindActionCreators } from 'redux' -import { connect } from 'react-redux' -import * as util from '../util' - -class FileList extends Component { - constructor(props){ - super() - } - render(){ - const { files } = this.props - let time = 0 - const fileList = files.map(file => { - const eta = (time + (file.epochs) * 180 / 60) + " min." - time += (file.epochs) * 180 / 60 - let dataset_type, dataset_name - if (file.dataset.indexOf('/') !== -1) { - [dataset_type, dataset_name] = file.dataset.split('/') - } else { - dataset_name = file.dataset - } - return ( -
-
{file.activity} {file.library} {dataset_type}
-
{dataset_name}
-
{file.epochs} ep.
-
{eta}
-
- ) - }) - return ( -
- {fileList} -
- ) - } -} - -const mapStateToProps = state => ({ -}) - -const mapDispatchToProps = (dispatch, ownProps) => ({ - // actions: bindActionCreators(liveActions, dispatch) -}) - -export default connect(mapStateToProps, mapDispatchToProps)(FileList) diff --git a/app/client/dashboard/gallery.component.js b/app/client/dashboard/gallery.component.js deleted file mode 100644 index 8db7032..0000000 --- a/app/client/dashboard/gallery.component.js +++ /dev/null @@ -1,32 +0,0 @@ -import { h, Component } from 'preact' -import { bindActionCreators } from 'redux' -import { connect } from 'react-redux' - -class Gallery extends Component { - constructor(props){ - super() - } - render(){ - const { title, images } = this.props - const imageList = images.map(image => { - return ( -
- -
- ) - }) - return ( -
- {imageList} -
- ) - } -} -const mapStateToProps = state => ({ -}) - -const mapDispatchToProps = (dispatch, ownProps) => ({ - // actions: bindActionCreators(liveActions, dispatch) -}) - -export default connect(mapStateToProps, mapDispatchToProps)(Gallery) diff --git a/app/client/modules/samplernn/datasets.component.js b/app/client/modules/samplernn/datasets.component.js index 5f45cf2..86ecc21 100644 --- a/app/client/modules/samplernn/datasets.component.js +++ b/app/client/modules/samplernn/datasets.component.js @@ -14,6 +14,7 @@ import Group from '../../common/group.component' import Slider from '../../common/slider.component' import Select from '../../common/select.component' import Button from '../../common/button.component' +import FileList from '../../common/fileList.component' import FileUpload from '../../common/fileUpload.component' import TextInput from '../../common/textInput.component' @@ -24,34 +25,75 @@ class SampleRNNDatasets extends Component { this.handleName = this.handleName.bind(this) this.handleUpload = this.handleUpload.bind(this) this.handleURL = this.handleURL.bind(this) + this.fileOptions = this.fileOptions.bind(this) props.actions.folder.index({ module: 'samplernn' }) props.actions.file.index({ module: 'samplernn' }) } handleName(name) { const folder = this.props.samplernn.folder - console.log(name) if (! folder.id) { this.props.actions.folder.create({ + // username... should get added inside the API module: 'samplernn', + activity: 'dataset', + datatype: 'audio', name }) } else { this.props.actions.folder.update({ id: folder.id, module: 'samplernn', + activity: 'dataset', + datatype: 'audio', name }) } } handleUpload(file) { - + const folder = this.props.samplernn.folder + this.props.actions.file.create({ + folder_id: folder.id, + module: 'samplernn', + activity: 'url', + epoch: 0, + processed: false, + generated: false, + url + }) } handleURL(url) { - + // name url + // mime datatype + // duration analysis + // size activity + // opt created_at updated_at + const folder = this.props.samplernn.folder + this.props.actions.file.create({ + folder_id: folder.id, + module: 'samplernn', + activity: 'url', + epoch: 0, + processed: false, + generated: false, + url + }) + } + fileOptions(file){ + console.log(file) + if (file.activity === 'url' && !file.dataset) { + return ( +
fetching...
+ ) + } + return ( +
+
this.train(file)}>train
+ {file.epoch == 0 &&
{file.epochs} ep.
} +
+ ) } render(){ const { samplernn } = this.props - console.log(samplernn) return (
@@ -65,30 +107,30 @@ class SampleRNNDatasets extends Component { value={samplernn.folder.name} onSave={this.handleName} /> - - + {samplernn.folder.id && + + } + {samplernn.folder.id && + + }
-
-

Files

-
-
-
foo.mp3
-
1.2 mb
-
30 May 2018
-
epoch 30
-
- delete -
-
-
+
+ {samplernn.files.length ? +

Files

: +

No files

} +
) diff --git a/app/client/modules/samplernn/samplernn.reducer.js b/app/client/modules/samplernn/samplernn.reducer.js index 5a49aba..1027411 100644 --- a/app/client/modules/samplernn/samplernn.reducer.js +++ b/app/client/modules/samplernn/samplernn.reducer.js @@ -5,6 +5,7 @@ const samplernnInitialState = { error: null, folder: {}, folders: [], + files: [], results: [], } @@ -28,18 +29,25 @@ const samplernnReducer = (state = samplernnInitialState, action) => { case types.folder.index: console.log(action) return { + ...state, folders: action.data, folder: action.data[0], } - return case types.folder.update: console.log(action) - return + return state case types.file.index: console.log(action) - return + return { + ...state, + files: action.data + } case types.file.create: console.log(action) + return { + ...state, + files: [action.data].concat(this.files) + } return default: return state -- cgit v1.2.3-70-g09d2