summaryrefslogtreecommitdiff
path: root/client/components
diff options
context:
space:
mode:
Diffstat (limited to 'client/components')
-rw-r--r--client/components/App.jsx42
-rw-r--r--client/components/Browser/Browser.jsx57
-rw-r--r--client/components/Browser/Folder/FileUploadButton.jsx (renamed from client/components/Folder/FileUploadButton.jsx)11
-rw-r--r--client/components/Browser/Folder/Folder.jsx (renamed from client/components/Folder/Folder.jsx)15
-rw-r--r--client/components/Browser/Folders/FolderForm.jsx (renamed from client/components/Folders/FolderForm.jsx)7
-rw-r--r--client/components/Browser/Folders/Folders.jsx (renamed from client/components/Folders/Folders.jsx)10
-rw-r--r--client/components/Tasks/TaskForm.jsx50
-rw-r--r--client/components/Tasks/TaskFormView.jsx72
-rw-r--r--client/components/Tasks/Tasks.jsx38
-rw-r--r--client/components/UI/Header.jsx (renamed from client/components/Header.jsx)0
-rw-r--r--client/components/UI/Modal.jsx (renamed from client/components/Modal.jsx)3
11 files changed, 240 insertions, 65 deletions
diff --git a/client/components/App.jsx b/client/components/App.jsx
index 85766e5..5340ba1 100644
--- a/client/components/App.jsx
+++ b/client/components/App.jsx
@@ -3,54 +3,26 @@ import { isMobile } from '../vendor/util'
// import db from '../db'
import { Link, withRouter } from 'react-router-dom'
-import Header from './Header.jsx'
-import Folders from './Folders/Folders.jsx'
-import Folder from './Folder/Folder.jsx'
+import Header from './UI/Header.jsx'
+import Browser from './Browser/Browser.jsx'
+import Tasks from './Tasks/Tasks.jsx'
import client from '../client'
class App extends Component {
constructor(props) {
super()
- let openFolders = JSON.parse( localStorage['openFolders'] || 'null' )
this.state = {
- folders: [],
- openFolders: openFolders || [],
}
- client.folder.index().then( folders => this.setState({ folders }) )
- }
- openFolder(folder) {
- if (this.state.openFolders.indexOf(folder.id) === -1) {
- const newOpenFolders = this.state.openFolders.concat(folder.id)
- localStorage['openFolders'] = JSON.stringify(newOpenFolders)
- this.setState({ openFolders: newOpenFolders })
- }
- }
- closeFolder(folder) {
- const openFolders = this.state.openFolders.filter( folder_id => folder_id !== folder.id )
- localStorage['openFolders'] = JSON.stringify(openFolders)
- this.setState({ openFolders })
- }
- addFolder(folder) {
- this.setState({ folders: this.state.folders.concat([folder]) })
}
render() {
- const openFolders = this.state.openFolders.map((folder_id) => {
- const folder_list = this.state.folders.filter(folder => folder.id === folder_id)
- if (! folder_list.length) return
- const folder = folder_list[0]
- return (
- <Folder
- folder={folder}
- onClose={() => this.closeFolder(folder)}
- />
- )
- })
return (
<div>
<Header />
- <Folders folders={this.state.folders} openFolder={(folder) => this.openFolder(folder)} addFolder={(folder) => this.addFolder(folder)} />
- {openFolders}
+ <div class='columns'>
+ <Browser />
+ <Tasks />
+ </div>
</div>
)
}
diff --git a/client/components/Browser/Browser.jsx b/client/components/Browser/Browser.jsx
new file mode 100644
index 0000000..10b86c3
--- /dev/null
+++ b/client/components/Browser/Browser.jsx
@@ -0,0 +1,57 @@
+import { h, Component } from 'preact'
+
+import Folders from './Folders/Folders.jsx'
+import Folder from './Folder/Folder.jsx'
+
+import client from '../../client'
+
+class Browser extends Component {
+ constructor(props) {
+ super()
+ let openFolders = JSON.parse( localStorage['openFolders'] || 'null' )
+ this.state = {
+ folders: [],
+ openFolders: openFolders || [],
+ }
+ client.folder.index().then( folders => this.setState({ folders }) )
+ }
+ openFolder(folder) {
+ if (this.state.openFolders.indexOf(folder.id) === -1) {
+ const newOpenFolders = this.state.openFolders.concat(folder.id)
+ localStorage['openFolders'] = JSON.stringify(newOpenFolders)
+ this.setState({ openFolders: newOpenFolders })
+ }
+ }
+ closeFolder(folder) {
+ const openFolders = this.state.openFolders.filter( folder_id => folder_id !== folder.id )
+ localStorage['openFolders'] = JSON.stringify(openFolders)
+ this.setState({ openFolders })
+ }
+ addFolder(folder) {
+ this.setState({ folders: this.state.folders.concat([folder]) })
+ }
+ render() {
+ const openFolders = this.state.openFolders.map((folder_id) => {
+ const folder_list = this.state.folders.filter(folder => folder.id === folder_id)
+ if (! folder_list.length) return
+ const folder = folder_list[0]
+ return (
+ <Folder
+ folder={folder}
+ onClose={() => this.closeFolder(folder)}
+ />
+ )
+ })
+ return (
+ <div class='column'>
+ <Folders folders={this.state.folders}
+ openFolder={(folder) => this.openFolder(folder)}
+ addFolder={(folder) => this.addFolder(folder)}
+ />
+ {openFolders}
+ </div>
+ )
+ }
+}
+
+export default Browser
diff --git a/client/components/Folder/FileUploadButton.jsx b/client/components/Browser/Folder/FileUploadButton.jsx
index 24f4c4f..136cd45 100644
--- a/client/components/Folder/FileUploadButton.jsx
+++ b/client/components/Browser/Folder/FileUploadButton.jsx
@@ -1,11 +1,6 @@
import { h, Component } from 'preact'
-import { Link } from 'react-router-dom'
-import Modal from '../Modal.jsx'
-
-import client from '../../client.js'
-
-import FileUploadButton from './FileUploadButton.jsx'
+import client from '../../../client.js'
export default class Folder extends Component {
constructor(props) {
@@ -17,16 +12,12 @@ export default class Folder extends Component {
updateFiles(event){
const name = event.target.name
const files = event.target.files
- console.log(name, files)
-
client.upload(this.props.folder.id, files).then( got_files => {
- console.log(got_files)
this.props.addFiles(got_files)
})
}
render() {
- console.log(this.props)
const files = (this.props.folder.files || []).map( (file, i) => {
return (
<div key={i}>
diff --git a/client/components/Folder/Folder.jsx b/client/components/Browser/Folder/Folder.jsx
index 4a2e4d2..3ed3ddb 100644
--- a/client/components/Folder/Folder.jsx
+++ b/client/components/Browser/Folder/Folder.jsx
@@ -1,9 +1,6 @@
import { h, Component } from 'preact'
-import { Link } from 'react-router-dom'
-import Modal from '../Modal.jsx'
-
-import client from '../../client.js'
+import client from '../../../client.js'
import FileUploadButton from './FileUploadButton.jsx'
@@ -20,33 +17,33 @@ export default class Folder extends Component {
this.audio = document.createElement('audio')
}
addFiles(newFiles) {
- console.log(newFiles)
if (! newFiles) return
const files = this.state.files.concat(newFiles).sort( (a,b) => { return b.id - a.id } )
this.setState({ files })
}
handleClick(file) {
- console.log(file)
if (file.type === 'audio') {
this.audio.setAttribute('src', mp3path(file))
this.audio.play()
- console.log(pngpath(file))
document.body.style.backgroundImage = 'url(' + pngpath(file) + ')'
}
}
render() {
- console.log(this.props)
const files = (this.state.files).map(toFilenamePair).sort(sortByFilename).map(fromPair).map( (file, i) => {
if (! file) return
return (
<div key={i}>
<span class='name' onClick={() => this.handleClick(file)}>{file.name}</span>
<span class='mime'>{file.mime}</span>
+ <span class='actions'>
+ <span onClick={() => this.props.setContent(file)}>content &gt;</span>
+ <span onClick={() => this.props.setStyle(file)}>style &gt;</span>
+ </span>
</div>
)
})
return (
- <div class='folders'>
+ <div class='window'>
<div class='heading'>
<b>{this.props.folder.name}</b>
<div class='buttons'>
diff --git a/client/components/Folders/FolderForm.jsx b/client/components/Browser/Folders/FolderForm.jsx
index 1ed263e..ad3e321 100644
--- a/client/components/Folders/FolderForm.jsx
+++ b/client/components/Browser/Folders/FolderForm.jsx
@@ -1,7 +1,6 @@
import { h, Component } from 'preact'
-import { Link } from 'react-router-dom'
-import client from '../../client.js'
+import client from '../../../client.js'
export default class FolderForm extends Component {
constructor(props) {
@@ -33,12 +32,10 @@ export default class FolderForm extends Component {
render() {
return (
<div class='form'>
- <h1>Create a new folder</h1>
+ <h1>new folder</h1>
<div>
<label for='folders_folder_name'>Name</label>
<input type='text' id='folders_folder_name' name='name' value={this.state.name} onChange={this.updateState} />
- <label for='folders_folder_description'>Description</label>
- <textarea id='folders_folder_description' name='description' value={this.state.description} onChange={this.updateState} />
</div>
<div>
<label></label>
diff --git a/client/components/Folders/Folders.jsx b/client/components/Browser/Folders/Folders.jsx
index f63dae2..2c85e80 100644
--- a/client/components/Folders/Folders.jsx
+++ b/client/components/Browser/Folders/Folders.jsx
@@ -1,10 +1,9 @@
import { h, Component } from 'preact'
-import { Link } from 'react-router-dom'
-import Modal from '../Modal.jsx'
+import Modal from '../../UI/Modal.jsx'
import FolderForm from './FolderForm.jsx'
-import client from '../../client.js'
+import client from '../../../client.js'
export default class Folders extends Component {
constructor(props) {
@@ -30,7 +29,6 @@ export default class Folders extends Component {
}
}
render() {
- console.log(this.props)
const folders = (this.props.folders || []).map( (folder,i) => {
return (
<div key={i} onClick={() => this.toggle(folder)}>
@@ -39,9 +37,9 @@ export default class Folders extends Component {
)
})
return (
- <div class='folders'>
+ <div class='window'>
<div class='heading'>
- <b>folders</b>
+ <b>browser</b>
<div class='buttons'>
<button onClick={() => this.openModal()}>+ folder</button>
</div>
diff --git a/client/components/Tasks/TaskForm.jsx b/client/components/Tasks/TaskForm.jsx
new file mode 100644
index 0000000..89771ad
--- /dev/null
+++ b/client/components/Tasks/TaskForm.jsx
@@ -0,0 +1,50 @@
+import { h, Component } from 'preact'
+import { Link } from 'react-router-dom'
+
+import client from '../../client.js'
+
+export default class TaskForm extends Component {
+ constructor(props) {
+ super()
+ this.state = {
+ name: '',
+ }
+ this.updateState = this.updateState.bind(this)
+ this.handleSubmit = this.handleSubmit.bind(this)
+ }
+
+ updateState(event){
+ const name = event.target.name
+ let value = event.target.value
+ console.log(name, value)
+ this.setState({
+ [name]: value,
+ error: null,
+ })
+ }
+
+ updateAlpha(event){
+ const name = event.target.name
+ let value = event.target.value
+ console.log(name, value)
+ this.setState({
+ alphaValue: value,
+ alpha: '1e' + value,
+ error: null,
+ })
+ }
+
+ handleSubmit(event) {
+ event.preventDefault()
+ let rec = Object.assign({}, this.state)
+ delete rec.error
+ this.props.onClose()
+ client.folder.create( rec ).then( (data) => {
+ this.props.addFolder( data )
+ })
+ }
+
+ render() {
+ return ( <TaskFormView currentTask={this.state} /> )
+ }
+}
diff --git a/client/components/Tasks/TaskFormView.jsx b/client/components/Tasks/TaskFormView.jsx
new file mode 100644
index 0000000..078f7c7
--- /dev/null
+++ b/client/components/Tasks/TaskFormView.jsx
@@ -0,0 +1,72 @@
+import { h, Component } from 'preact'
+import { Link } from 'react-router-dom'
+
+import client from '../../client.js'
+
+export default class TaskForm extends Component {
+ constructor(props) {
+ super()
+ this.state = {
+ name: '',
+ }
+ this.updateState = this.updateState.bind(this)
+ this.handleSubmit = this.handleSubmit.bind(this)
+ }
+ updateState(event){
+ const name = event.target.name
+ let value = event.target.value
+ console.log(name, value)
+ this.setState({
+ [name]: value,
+ error: null,
+ })
+ }
+ updateAlpha(event){
+ const name = event.target.name
+ let value = event.target.value
+ console.log(name, value)
+ this.setState({
+ alphaValue: value,
+ alpha: '1e' + value,
+ error: null,
+ })
+ }
+ handleSubmit(event) {
+ event.preventDefault()
+ let rec = Object.assign({}, this.state)
+ delete rec.error
+ this.props.onClose()
+ client.folder.create( rec ).then( (data) => {
+ this.props.addFolder( data )
+ })
+ }
+ render() {
+ return (
+ <div class='form'>
+ <div>
+ <div>
+ <img />
+ {this.state.content}
+ </div>
+ <label>content</label>
+ <button onclick={() => this.setState({ content: null })}>x</button>
+ </div>
+ <div>
+ <div>
+ {this.state.style}
+ </div>
+ <label>style</label>
+ <button onclick={() => this.setState({ style: null })}>x</button>
+ </div>
+ <div>
+ <input type='range' min='0' max='100' value={this.state.alphaValue}
+ onChange={(e) => this.updateAlpha(e)}
+ />
+ {this.state.alphaString}
+ <label>alpha</label>
+ <button onClick={this.handleSubmit}>Create</button>
+ </div>
+ </div>
+ )
+ }
+}
diff --git a/client/components/Tasks/Tasks.jsx b/client/components/Tasks/Tasks.jsx
new file mode 100644
index 0000000..b72cd79
--- /dev/null
+++ b/client/components/Tasks/Tasks.jsx
@@ -0,0 +1,38 @@
+import { h, Component } from 'preact'
+import { Link } from 'react-router-dom'
+
+import TaskForm from './TaskForm.jsx'
+
+import client from '../../client.js'
+
+export default class Tasks extends Component {
+ constructor(props) {
+ super()
+ this.state = {
+ adding: false,
+ }
+ client.task.index().then( tasks => this.setState({ tasks }) )
+ }
+ render() {
+ const tasks = (this.props.tasks || []).map( (task, i) => {
+ return (
+ <div key={i} onClick={() => this.toggle(task)}>
+ <span class='name'>{task.name}</span>
+ </div>
+ )
+ })
+ return (
+ <div class='column'>
+ <div class='window'>
+ <div class='heading'>
+ <b>tasks</b>
+ </div>
+ <TaskForm />
+ <div class='list'>
+ {tasks}
+ </div>
+ </div>
+ </div>
+ )
+ }
+}
diff --git a/client/components/Header.jsx b/client/components/UI/Header.jsx
index 31439db..31439db 100644
--- a/client/components/Header.jsx
+++ b/client/components/UI/Header.jsx
diff --git a/client/components/Modal.jsx b/client/components/UI/Modal.jsx
index 3681ce4..2bd6263 100644
--- a/client/components/Modal.jsx
+++ b/client/components/UI/Modal.jsx
@@ -11,6 +11,9 @@ export default class Modal extends Component {
<div class='inner'>
{this.props.children}
</div>
+ <div class='close' onClick={this.props.onClose}>
+ &times;
+ </div>
</div>
)
}
generated by cgit v1.2.3-70-g09d2 (git 2.51.0) at 2025-12-10 13:12:15 +0000