file list

7 files changed, 125 insertions, 76 deletions

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 (
+		   	<div class='row' key={file.name}>
+          <div className="filename">{file.name || file.url}</div>
+          <div className="size">{file.size || ''}</div>
+          <div className="date">{moment(file.created_at).format("YYYY-MM-DD H:mm")}</div>
+          {file.epoch && <div className="epoch">epoch {file.epoch}</div>}
+	        <div className='activity'>{file.activity || ''} {file.module || ''}</div>
+          {this.props.options && this.props.options(file)}
+	        {file.epochs && <div className='epochs'>{file.epochs} ep.</div>}
+	        {file.eta && <div className='eta'>{file.eta}</div>}
+		   	</div>
+	   	)
+	  })
+	  return (
+	  	<div className='filelist rows'>
+	  		{fileList}
+	  	</div>
+  	)
+  }
+}
+
+
+
+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/common/gallery.component.js
index 8db7032..8db7032 100644
--- a/app/client/dashboard/gallery.component.js
+++ b/app/client/common/gallery.component.js
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}
           />
         </label>
       </div>
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 (
-		   	<div class='row'>
-	        <div class='activity'>{file.activity} {file.library} {dataset_type}</div>
-	        <div class='dataset'>{dataset_name}</div>
-	        <div class='epochs'>{file.epochs} ep.</div>
-	        <div class='eta'>{eta}</div>
-		   	</div>
-	   	)
-	  })
-	  return (
-	  	<div class='filelist rows'>
-	  		{fileList}
-	  	</div>
-  	)
-  }
-}
-
-const mapStateToProps = state => ({
-})
-
-const mapDispatchToProps = (dispatch, ownProps) => ({
-  // actions: bindActionCreators(liveActions, dispatch)
-})
-
-export default connect(mapStateToProps, mapDispatchToProps)(FileList)
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 (
+        <div className='gray'>fetching...</div>
+      )
+    }
+    return (
+      <div>
+        <div className='link' onClick={() => this.train(file)}>train</div>
+        {file.epoch == 0 && <div className='epochs'>{file.epochs} ep.</div>}
+      </div>
+    )
   }
   render(){
     const { samplernn } = this.props
-    console.log(samplernn)
     return (
       <div className='app'>
         <div className='heading'>
@@ -65,30 +107,30 @@ class SampleRNNDatasets extends Component {
                 value={samplernn.folder.name}
                 onSave={this.handleName}
               />
-              <FileUpload
-                title='Upload a file'
-                onChange={this.handleUpload}
-              />
-              <TextInput
-                title='Fetch a URL'
-                onSave={this.handleURL}
-              />
+              {samplernn.folder.id &&
+                <FileUpload
+                  title='Upload a file'
+                  onChange={this.handleUpload}
+                />
+              }
+              {samplernn.folder.id &&
+                <TextInput
+                  title='Fetch a URL'
+                  placeholder='http://'
+                  onSave={this.handleURL}
+                />
+              }
             </Group>
           </div>
         </div>
-        <div className='params row'>
-          <h3>Files</h3>
-          <div className="media">
-            <div className="row">
-              <div className="filename">foo.mp3</div>
-              <div className="size">1.2 mb</div>
-              <div className="date">30 May 2018</div>
-              <div className="epoch">epoch 30</div>
-              <div className="options">
-                delete
-              </div>
-            </div>
-          </div>
+        <div className='params col'>
+          {samplernn.files.length ? 
+            <h3>Files</h3> :
+            <h4>No files</h4>}
+          <FileList
+            files={samplernn.files}
+            options={this.fileOptions}
+          />
         </div>
       </div>
     )
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