magnus/Notes
1
0
Fork 0
Code Issues 4 Pull Requests Packages Projects Releases 4 Wiki Activity

File uploads

Browse Source
This commit is contained in:
Magnus Åhall 2023-06-22 08:28:51 +02:00
parent 33b10e6527
commit 8a3970645f
5 changed files with 126 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
file.go
View File

@ -12,7 +12,7 @@ import (
type File struct {
ID int
UserID int `db:"user_id"`
NodeID int
NodeID int `db:"node_id"`
Filename string
Size int64
MIME string
@ -49,7 +49,7 @@ func (session Session) AddFile(file *File) (err error) { // {{{
func (session Session) Files(nodeID int) (files []File, err error) { // {{{
var rows *sqlx.Rows
rows, err = db.Queryx(
`SELECT * FROM files WHERE user_id = $1 AND node_id = $2`,
`SELECT * FROM file WHERE user_id = $1 AND node_id = $2`,
session.UserID,
nodeID,
)
@ -58,6 +58,7 @@ func (session Session) Files(nodeID int) (files []File, err error) { // {{{
}
defer rows.Close()
files = []File{}
for rows.Next() {
file := File{}
if err = rows.StructScan(&file); err != nil {

4
node.go
View File

@ -17,6 +17,7 @@ type Node struct {
Updated time.Time
Children []Node
Crumbs []Node
Files []File
Complete bool
Level int
}
@ -108,6 +109,7 @@ func (session Session) RootNode() (node Node, err error) {// {{{
node.Complete = true
node.Children = []Node{}
node.Crumbs = []Node{}
node.Files = []File{}
for rows.Next() {
row := Node{}
if err = rows.StructScan(&row); err != nil {
@ -202,6 +204,7 @@ func (session Session) Node(nodeID int) (node Node, err error) {// {{{
}
node.Crumbs, err = session.NodeCrumbs(node.ID)
node.Files, err = session.Files(node.ID)
return
}// }}}
@ -271,6 +274,7 @@ func (session Session) CreateNode(parentID int, name string) (node Node, err err
return
}
node.Children = []Node{}
node.Files = []File{}
node.Complete = true
}

40
static/css/main.css
View File

@ -193,17 +193,41 @@ header .menu {
font-family: monospace;
font-size: 0.85em;
color: #333;
width: 100ex;
width: 900px;
resize: none;
border: none;
outline: none;
}
.node-content[contenteditable] {
outline: 0px solid transparent;
}
.node-content:invalid {
border-bottom: 1px solid #eee;
border-radius: 8px;
background: #f5f5f5;
}
#file-section {
justify-self: center;
width: 900px;
margin-top: 32px;
padding: 32px;
background: #f5f5f5;
}
#file-section .header {
font-weight: bold;
color: #000;
margin-bottom: 16px;
}
#file-section .files {
display: grid;
grid-template-columns: 1fr min-content;
grid-gap: 8px 16px;
color: #444;
font-size: 0.85em;
}
#file-section .files .filename {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#file-section .files .size {
white-space: nowrap;
text-align: right;
}
.tree {
padding: 16px;
@ -213,4 +237,8 @@ header .menu {
width: 100%;
justify-self: start;
}
#file-section {
width: 100%;
justify-self: start;
}
}

50
static/js/node.mjs
View File

@ -75,6 +75,8 @@ export class NodeUI extends Component {
<div class="node-name">${node.Name}</div>
<${NodeContent} key=${node.ID} content=${node.Content} ref=${this.nodeContent} />
` : html``}
<${NodeFiles} node=${this.node.value} />
`
}//}}}
componentDidMount() {//{{{
@ -212,6 +214,39 @@ class NodeContent extends Component {
}
class NodeFiles extends Component {
render({ node }) {//{{{
if(node.Files === null || node.Files.length == 0)
return
let files = node.Files
.sort((a, b)=>{
if(a.Filename.toUpperCase() < b.Filename.toUpperCase()) return -1
if(a.Filename.toUpperCase() > b.Filename.toUpperCase()) return 1
return 0
})
.map(file=>
html`
<div class="filename">${file.Filename}</div>
<div class="size">${this.formatSize(file.Size)}</div>
`
)
return html`
<div id="file-section">
<div class="header">Files</div>
<div class="files">
${files}
</div>
</div>
`
}//}}}
formatSize(size) {//{{{
if(size < 1048576) {
return `${Math.round(size / 1024)} KiB`
} else {
return `${Math.round(size / 1048576)} MiB`
}
}//}}}
}
class Node {
@ -224,6 +259,7 @@ class Node {
this.Content = ''
this.Children = []
this.Crumbs = []
this.Files = []
}//}}}
retrieve(callback) {//{{{
this.app.request('/node/retrieve', { ID: this.ID })
@ -234,6 +270,7 @@ class Node {
this.Content = res.Node.Content
this.Children = res.Node.Children
this.Crumbs = res.Node.Crumbs
this.Files = res.Node.Files
callback(this)
})
.catch(this.app.responseError)
@ -294,8 +331,8 @@ class Menu extends Component {
}//}}}
}
class UploadUI extends Component {
constructor() {//{{{
super()
constructor(props) {//{{{
super(props)
this.file = createRef()
this.filelist = signal([])
this.fileRefs = []
@ -339,9 +376,14 @@ class UploadUI extends Component {
progress=>{
this.progressRefs[i].current.innerHTML = `${progress}%`
},
()=>{
res=>{
this.props.nodeui.node.value.Files.push(res.File)
this.props.nodeui.forceUpdate()
this.fileRefs[i].current.classList.add("done")
this.progressRefs[i].current.classList.add("done")
this.props.nodeui.upload.value = false
})
}
}//}}}
@ -368,7 +410,7 @@ class UploadUI extends Component {
return
}
doneCallback()
doneCallback(response)
})
request.upload.addEventListener('progress', evt=>{

45
static/less/main.less
View File

@ -227,18 +227,46 @@ header {
font-family: monospace;
font-size: 0.85em;
color: #333;
width: 100ex;
width: 900px;
resize: none;
border: none;
outline: none;
&[contenteditable] {
outline: 0px solid transparent;
&:invalid {
background: #f5f5f5;
}
}
#file-section {
justify-self: center;
width: 900px;
margin-top: 32px;
padding: 32px;
background: #f5f5f5;
.header {
font-weight: bold;
color: #000;
margin-bottom: 16px;
}
&:invalid {
border-bottom: 1px solid #eee;
border-radius: 8px;
.files {
display: grid;
grid-template-columns: 1fr min-content;
grid-gap: 8px 16px;
color: #444;
font-size: 0.85em;
.filename {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.size {
white-space: nowrap;
text-align: right;
}
}
}
@ -251,4 +279,9 @@ header {
width: 100%;
justify-self: start;
}
#file-section {
width: 100%;
justify-self: start;
}
}