summaryrefslogtreecommitdiff
path: root/app/client/dashboard
diff options
context:
space:
mode:
Diffstat (limited to 'app/client/dashboard')
-rw-r--r--app/client/dashboard/actions.js1
-rw-r--r--app/client/dashboard/dashboard.component.js71
-rw-r--r--app/client/dashboard/dashboard.reducer.js16
-rw-r--r--app/client/dashboard/dashboardHeader.component.js39
-rw-r--r--app/client/dashboard/filelist.component.js46
-rw-r--r--app/client/dashboard/gallery.component.js33
-rw-r--r--app/client/dashboard/index.js2
-rw-r--r--app/client/dashboard/tasklist.component.js45
8 files changed, 253 insertions, 0 deletions
diff --git a/app/client/dashboard/actions.js b/app/client/dashboard/actions.js
new file mode 100644
index 0000000..01c0a96
--- /dev/null
+++ b/app/client/dashboard/actions.js
@@ -0,0 +1 @@
+import types from '../types'
diff --git a/app/client/dashboard/dashboard.component.js b/app/client/dashboard/dashboard.component.js
new file mode 100644
index 0000000..6db42ae
--- /dev/null
+++ b/app/client/dashboard/dashboard.component.js
@@ -0,0 +1,71 @@
+import { h, Component } from 'preact'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+
+import Player from '../common/player.component'
+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 DashboardHeader from './dashboardheader.component'
+import TaskList from './tasklist.component'
+import FileList from './filelist.component'
+import Gallery from './gallery.component'
+
+import * as liveActions from './actions'
+
+class Dashboard extends Component {
+ constructor(props){
+ super()
+ }
+ componentWillUpdate(nextProps) {
+ // if (nextProps.opt.checkpoint_name && nextProps.opt.checkpoint_name !== this.props.opt.checkpoint_name) {
+ // this.props.actions.list_epochs(nextProps.opt.checkpoint_name)
+ // }
+ }
+ render(){
+ const { tasks, files, images, site } = this.props
+ return (
+ <div className='dashboard'>
+ <DashboardHeader />
+ <div className='params'>
+ <div className='column'>
+ <Group title='Completed Tasks'>
+ <TaskList tasks={tasks} />
+ </Group>
+ <Group title='Upcoming Tasks'>
+ <TaskList tasks={tasks} />
+ </Group>
+ </div>
+ <div className='column'>
+ <Group title='Your Datasets'>
+ <FileList files={files} />
+ </Group>
+ <Group title='Results'>
+ <FileList files={files} />
+ </Group>
+ <Group title='Audio Player'>
+ <FileList files={files} />
+ </Group>
+ </div>
+ </div>
+ <div>
+ <Gallery images={images} />
+ </div>
+ </div>
+ )
+ }
+}
+const mapStateToProps = state => ({
+ site: state.system.site,
+ images: state.system.images,
+ tasks: state.system.tasks,
+ files: state.system.files
+})
+
+const mapDispatchToProps = (dispatch, ownProps) => ({
+ actions: bindActionCreators(liveActions, dispatch)
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(Dashboard)
diff --git a/app/client/dashboard/dashboard.reducer.js b/app/client/dashboard/dashboard.reducer.js
new file mode 100644
index 0000000..c5b3d4a
--- /dev/null
+++ b/app/client/dashboard/dashboard.reducer.js
@@ -0,0 +1,16 @@
+import moment from 'moment'
+let FileSaver = require('file-saver')
+
+const dashboardInitialState = {
+ loading: false,
+ error: null,
+}
+
+const dashboardReducer = (state = dashboardInitialState, action) => {
+ switch(action.type) {
+ default:
+ return state
+ }
+}
+
+export default dashboardReducer
diff --git a/app/client/dashboard/dashboardHeader.component.js b/app/client/dashboard/dashboardHeader.component.js
new file mode 100644
index 0000000..492dfd8
--- /dev/null
+++ b/app/client/dashboard/dashboardHeader.component.js
@@ -0,0 +1,39 @@
+import { h, Component } from 'preact'
+import { connect } from 'react-redux'
+import { bindActionCreators } from 'redux'
+import * as liveActions from '../live/actions'
+
+import * as util from '../util'
+
+class DashboardHeader extends Component {
+ constructor(props){
+ super(props)
+ this.handleClick = this.handleClick.bind(this)
+ }
+ handleClick(e){
+ this.props.onClick && this.props.onClick()
+ }
+ render() {
+ const { currentTask, site } = this.props
+ const eta = ((currentTask.epochs - currentTask.epoch) * 180 / 60) + " minutes"
+ return (
+ <div class='dashboardHeader heading'>
+ <h3>{site.name}</h3>
+ Currently {util.gerund(currentTask.activity)} {currentTask.library} on {currentTask.dataset}<br/>
+ Epoch: {currentTask.epoch} / {currentTask.epochs}, ETA {eta}<br/>
+ <br/>
+ Want to play live? <button>Pause at the end of this epoch</button>
+ </div>
+ )
+ }
+}
+
+const mapStateToProps = state => ({
+ currentTask: state.system.currentTask,
+ site: state.system.site,
+})
+
+const mapDispatchToProps = (dispatch, ownProps) => ({
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(DashboardHeader)
diff --git a/app/client/dashboard/filelist.component.js b/app/client/dashboard/filelist.component.js
new file mode 100644
index 0000000..2833ec8
--- /dev/null
+++ b/app/client/dashboard/filelist.component.js
@@ -0,0 +1,46 @@
+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/dashboard/gallery.component.js b/app/client/dashboard/gallery.component.js
new file mode 100644
index 0000000..0e1f44d
--- /dev/null
+++ b/app/client/dashboard/gallery.component.js
@@ -0,0 +1,33 @@
+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
+ images.push(images[0])
+ const imageList = images.map(image => {
+ return (
+ <div>
+ <img src={image.url} />
+ </div>
+ )
+ })
+ return (
+ <div class='gallery'>
+ {imageList}
+ </div>
+ )
+ }
+}
+const mapStateToProps = state => ({
+})
+
+const mapDispatchToProps = (dispatch, ownProps) => ({
+ // actions: bindActionCreators(liveActions, dispatch)
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(Gallery)
diff --git a/app/client/dashboard/index.js b/app/client/dashboard/index.js
new file mode 100644
index 0000000..29b1ecf
--- /dev/null
+++ b/app/client/dashboard/index.js
@@ -0,0 +1,2 @@
+export default {
+} \ No newline at end of file
diff --git a/app/client/dashboard/tasklist.component.js b/app/client/dashboard/tasklist.component.js
new file mode 100644
index 0000000..fa002de
--- /dev/null
+++ b/app/client/dashboard/tasklist.component.js
@@ -0,0 +1,45 @@
+import { h, Component } from 'preact'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+
+class TaskList extends Component {
+ constructor(props){
+ super()
+ }
+ render(){
+ const { title, tasks } = this.props
+ let time = 0
+ const taskList = tasks.map(task => {
+ const eta = (time + (task.epochs) * 180 / 60) + " min."
+ time += (task.epochs) * 180 / 60
+ let dataset_type, dataset_name
+ if (task.dataset.indexOf('/') !== -1) {
+ [dataset_type, dataset_name] = task.dataset.split('/')
+ } else {
+ dataset_name = task.dataset
+ }
+ return (
+ <div class='row'>
+ <div class='activity'>{task.activity} {task.library} {dataset_type}</div>
+ <div class='dataset'>{dataset_name}</div>
+ <div class='epochs'>{task.epochs} ep.</div>
+ <div class='eta'>{eta}</div>
+ </div>
+ )
+ })
+ return (
+ <div class='taskList rows'>
+ {taskList}
+ </div>
+ )
+ }
+}
+
+const mapStateToProps = state => ({
+})
+
+const mapDispatchToProps = (dispatch, ownProps) => ({
+ // actions: bindActionCreators(liveActions, dispatch)
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(TaskList)
generated by cgit v1.2.3-70-g09d2 (git 2.51.0) at 2025-12-10 21:45:20 +0000