From 24135cf037085f2ae7d70e48f023614435e29b3f Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Tue, 29 May 2018 19:27:20 +0200
Subject: le file list

---
 app/client/api/crud.types.js                       |  1 +
 app/client/api/crud.upload.js                      | 19 ++++++--
 app/client/api/util.js                             |  4 ++
 app/client/common/fileList.component.js            | 14 ++++--
 app/client/modules/samplernn/datasets.component.js |  1 +
 app/client/modules/samplernn/samplernn.reducer.js  | 56 ++++++++++++++++++++--
 6 files changed, 82 insertions(+), 13 deletions(-)

(limited to 'app')

diff --git a/app/client/api/crud.types.js b/app/client/api/crud.types.js
index b7efdb8..630bf83 100644
--- a/app/client/api/crud.types.js
+++ b/app/client/api/crud.types.js
@@ -20,6 +20,7 @@ export const crud_type = (type, actions=[]) =>
     'destroy_error',
     'upload_loading',
     'upload_progress',
+    'upload_waiting',
     'upload_complete',
     'upload_error',
     'sort',
diff --git a/app/client/api/crud.upload.js b/app/client/api/crud.upload.js
index 2e0269a..65ae4e0 100644
--- a/app/client/api/crud.upload.js
+++ b/app/client/api/crud.upload.js
@@ -24,11 +24,20 @@ export function crud_upload(type, fd, data, dispatch) {
 
     function uploadProgress (e) {
       if (e.lengthComputable) {
-        dispatch && dispatch({
-          type: as_type(type, 'upload_progress'),
-          percent: Math.round(e.loaded * 100 / e.total) || 0,
-          [type]: id,
-        })
+        const percent = Math.round(e.loaded * 100 / e.total) || 0
+        if (percent > 99) {
+          dispatch && dispatch({
+            type: as_type(type, 'upload_waiting'),
+            percent,
+            [type]: id,
+          })
+        } else {
+          dispatch && dispatch({
+            type: as_type(type, 'upload_progress'),
+            percent,
+            [type]: id,
+          })
+        }
       }
       else {
         dispatch && dispatch({
diff --git a/app/client/api/util.js b/app/client/api/util.js
index 99d63b4..e561ca4 100644
--- a/app/client/api/util.js
+++ b/app/client/api/util.js
@@ -9,3 +9,7 @@ htmlClassList.add(is_desktop ? 'desktop' : 'mobile')
 htmlClassList.remove('loading')
 
 // window.debug = false
+
+function randint(n) { return Math.floor(Math.random()*n) }
+
+document.body.style.background = 'linear-gradient(' + (randint(40)+40) + 'deg, #fde, #ffe)'
diff --git a/app/client/common/fileList.component.js b/app/client/common/fileList.component.js
index 7f4e5fe..757955d 100644
--- a/app/client/common/fileList.component.js
+++ b/app/client/common/fileList.component.js
@@ -1,6 +1,7 @@
 import { h, Component } from 'preact'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
+import { Link } from 'react-router-dom';
 import moment from 'moment'
 import * as util from '../util'
 
@@ -9,14 +10,19 @@ class FileList extends Component {
     super()
   }
   render(){
-    const { files } = this.props
+    const { files, linkFiles } = this.props
 	  const fileList = files.map(file => {
 	   	return (
 		   	<div class='row file' key={file.name}>
-          <div className="filename">{file.name || file.url}</div>
+          <div className="filename" title={file.name || file.url}>
+            {(linkFiles && file.url)
+              ? <a target='_blank' href={file.url}>{file.name || file.url}</a>
+              : (file.name || file.url)
+            }
+          </div>
           <div className="size">{file.size ? ((file.size) / 1024 / 1024).toFixed(1) + ' mb.' : ''}</div>
-          <div className="date">{moment(file.created_at).format("YYYY-MM-DD H:mm")}</div>
-          <div className="epoch">{file.epoch > 0 ? 'epoch ' + file.epoch : ''}</div>
+          <div className="date">{moment(file.created_at).format("YYYY-MM-DD h:mm a")}</div>
+          <div className="epoch">{file.epoch > 0 ? 'epoch ' + file.epoch : ' '}</div>
 	        <div className='activity'>{file.activity || ''} {file.module || ''}</div>
           {this.props.options && this.props.options(file)}
 		   	</div>
diff --git a/app/client/modules/samplernn/datasets.component.js b/app/client/modules/samplernn/datasets.component.js
index 533b108..8f0d59a 100644
--- a/app/client/modules/samplernn/datasets.component.js
+++ b/app/client/modules/samplernn/datasets.component.js
@@ -155,6 +155,7 @@ class SampleRNNDatasets extends Component {
           <FileList
             files={samplernn.files}
             options={this.fileOptions}
+            linkFiles
           />
         </div>
       </div>
diff --git a/app/client/modules/samplernn/samplernn.reducer.js b/app/client/modules/samplernn/samplernn.reducer.js
index 6a461a4..ba429ee 100644
--- a/app/client/modules/samplernn/samplernn.reducer.js
+++ b/app/client/modules/samplernn/samplernn.reducer.js
@@ -7,6 +7,10 @@ const samplernnInitialState = {
   folders: [],
   files: [],
   results: [],
+  upload: {
+    loading: true,
+    status: 'Loading...',
+  },
 }
 
 const samplernnReducer = (state = samplernnInitialState, action) => {
@@ -47,15 +51,59 @@ const samplernnReducer = (state = samplernnInitialState, action) => {
         files: [action.data].concat(this.files)
       }
       return
+    case types.folder.upload_loading:
+      return {
+        ...state,
+        upload: {
+          loading: true,
+          status: 'Loading...',
+        },
+      }
     case types.folder.upload_error:
-      console.log(action)
-      return state
+      return {
+        ...state,
+        upload: {
+          loading: false,
+          status: 'Error uploading :(',
+        },
+      }
     case types.folder.upload_progress:
       console.log(action)
-      return state
+      return {
+        ...state,
+        upload: {
+          loading: true,
+          status: 'Upload progress ' + action.percent + '%',
+        },
+      }
+    case types.folder.upload_waiting:
+      console.log(action)
+      return {
+        ...state,
+        upload: {
+          loading: true,
+          status: 'Waiting for server to finish processing...',
+        },
+      }
     case types.folder.upload_complete:
       console.log(action)
-      return state
+      if (state.folder.id === action.folder) {
+        return {
+          ...state,
+          files: state.files.concat(state.file), // sort here also
+          upload: {
+            loading: false,
+          },
+        }
+      } else {
+        return {
+          ...state,
+          upload: {
+            loading: false,
+            status: 'Upload complete',
+          },
+        }
+      }
     case types.socket.status:
       return samplernnSocket(state, action.data)
     default:
-- 
cgit v1.2.3-70-g09d2