1 files changed, 125 insertions, 0 deletions
diff --git a/frontend/app/views/graph/components/cursor.list.js b/frontend/app/views/graph/components/cursor.list.js
new file mode 100644
index 0000000..8c4bbed
--- /dev/null
+++ b/frontend/app/views/graph/components/cursor.list.js
@@ -0,0 +1,125 @@
+import React, { Component } from 'react'
+import { Link } from 'react-router-dom'
+import { connect } from 'react-redux'
+
+import { history } from 'app/store'
+import { unslugify } from 'app/utils'
+import actions from 'app/actions'
+
+class CursorList extends Component {
+  state = {
+    playing: false,
+    play_id: -1,
+  }
+
+  constructor(props) {
+    super(props)
+    this.upload = this.upload.bind(this)
+  }
+
+  upload(e) {
+    e.preventDefault()
+    document.body.className = ''
+    const files = e.dataTransfer ? e.dataTransfer.files : e.target.files
+    let i
+    if (!files.length) return
+    const promises = Array.from(files).map(file => this.uploadTaggedImage(file, 'cursor', file.filename))
+    Promise.all(promises)
+    .then(() => {
+      this.setState({ status: "" })
+    })
+  }
+
+  uploadTaggedImage(file, tag, fn) {
+    return new Promise((resolve, reject) => {
+      this.setState({ status: "Uploading " + tag + "..." })
+      const reader = new FileReader()
+      reader.onload = fileReaderEvent => {
+        reader.onload = null
+        const img = new Image()
+        img.onload = () => {
+          img.onload = null
+          upload(img)          
+        }
+        img.src = fileReaderEvent.target.result
+      }
+      reader.readAsDataURL(file)
+
+      const upload = img => {
+        const uploadData = {
+          tag,
+          file,
+          __file_filename: fn,
+          graph_id: this.props.graph.id,
+          username: 'swimmer',
+          settings: JSON.stringify({
+            width: img.naturalWidth,
+            height: img.naturalHeight,
+          }),
+        }
+        // console.log(uploadData)
+        return actions.upload.upload(uploadData).then(data => {
+          // console.log(data)
+          resolve({
+            ...data.res,
+          })
+        })
+      }
+    })
+  }
+
+  destroyFile(upload) {
+    return new Promise((resolve, reject) => {
+      actions.upload.destroy(upload)
+      .then(() => {
+        console.log('Destroy successful')
+        resolve()
+      })
+      .catch(() => {
+        console.log('Error deleting the file')
+        reject()
+      })
+    })
+  }
+
+  render() {
+    const { playing, play_id } = this.state
+    const { graph, onClick } = this.props
+    // console.log(graph.uploads)
+    return (
+      <div className='box cursorList'>
+        <div className="uploadButton">
+          <button>
+            <span>
+              {"Upload a cursor"}
+            </span>
+          </button>
+          <input
+            type="file"
+            accept="image/*"
+            onChange={this.upload}
+            multiple
+          />
+        </div>
+        <div className='cursors'>
+          {graph.uploads.map(upload => (
+            upload.tag === 'cursor' && (
+              <div className='cursorItem' key={upload.id} onClick={() => onClick && onClick(upload)}>
+                <img src={upload.url} alt={upload.fn} />
+              </div>
+            )
+          ))}
+        </div>
+      </div>
+    )
+  }
+}
+
+const mapStateToProps = state => ({
+  graph: state.graph.show.res,
+})
+
+const mapDispatchToProps = dispatch => ({
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(CursorList)