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

File uploads

Browse source
This commit is contained in:
Magnus Åhall 2023-06-22 06:52:27 +02:00
parent 5319492760
commit 910a7a15c7
7 changed files with 105 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

4
static/css/main.css
View file

@ -34,7 +34,6 @@ h1 {
background: rgba(0, 0, 0, 0.35);
}
#menu {
display: none;
position: absolute;
top: 24px;
right: 24px;
@ -44,9 +43,6 @@ h1 {
box-shadow: 5px 5px 8px 0px rgba(0, 0, 0, 0.5);
z-index: 1025;
}
#menu.show {
display: initial;
}
#menu .item {
padding: 16px;
border-bottom: 1px solid #aaa;

42
static/js/node.mjs
View file

@ -52,11 +52,11 @@ export class NodeUI extends Component {
let upload = '';
if(this.upload.value)
upload = html`<${UploadUI} app=${this} />`
upload = html`<${UploadUI} nodeui=${this} />`
let menu = '';
if(this.menu.value)
upload = html`<${Menu} app=${this} />`
upload = html`<${Menu} nodeui=${this} />`
return html`
${menu}
@ -234,6 +234,9 @@ class NodeContent extends Component {
}//}}}
}
class NodeFiles extends Component {
}
class Node {
constructor(app, nodeID) {//{{{
this.app = app
@ -261,14 +264,14 @@ class Node {
}
class Menu extends Component {
render({ app }) {//{{{
render({ nodeui }) {//{{{
return html`
<div id="blackout" onclick=${()=>app.menu.value = false}></div>
<div id="menu" class="${app.menu.value ? 'show' : ''}">
<div class="item" onclick=${()=>app.renameNode()}>Rename</div>
<div class="item separator" onclick=${()=>app.deleteNode()}>Delete</div>
<div class="item separator" onclick=${()=>{ app.upload.value = true; app.menu.value = false }}>Upload</div>
<div class="item" onclick=${()=>app.logout()}>Log out</div>
<div id="blackout" onclick=${()=>nodeui.menu.value = false}></div>
<div id="menu">
<div class="item" onclick=${()=>{ nodeui.renameNode(); nodeui.menu.value = false }}>Rename</div>
<div class="item separator" onclick=${()=>{ nodeui.deleteNode(); nodeui.menu.value = false }}>Delete</div>
<div class="item separator" onclick=${()=>{ nodeui.upload.value = true; nodeui.menu.value = false }}>Upload</div>
<div class="item" onclick=${()=>{ nodeui.logout(); nodeui.menu.value = false }}>Log out</div>
</div>
`
}//}}}
@ -303,6 +306,7 @@ class UploadUI extends Component {
}//}}}
upload() {//{{{
let nodeID = this.props.nodeui.node.value.ID
this.fileRefs = []
this.progressRefs = []
@ -311,17 +315,23 @@ class UploadUI extends Component {
for(let i = 0; i < input.files.length; i++) {
this.fileRefs.push(createRef())
this.progressRefs.push(createRef())
this.postFile(input.files[i], progress=>{
this.progressRefs[i].current.innerHTML = `${progress}%`
}, ()=>{
this.fileRefs[i].current.classList.add("done")
this.progressRefs[i].current.classList.add("done")
})
this.postFile(
input.files[i],
nodeID,
progress=>{
this.progressRefs[i].current.innerHTML = `${progress}%`
},
()=>{
this.fileRefs[i].current.classList.add("done")
this.progressRefs[i].current.classList.add("done")
})
}
}//}}}
postFile(file, progressCallback, doneCallback) {//{{{
postFile(file, nodeID, progressCallback, doneCallback) {//{{{
var formdata = new FormData()
formdata.append('file', file)
formdata.append('NodeID', nodeID)
var request = new XMLHttpRequest()

5
static/less/main.less
View file

@ -41,7 +41,6 @@ h1 {
}
#menu {
display: none;
position: absolute;
top: 24px;
right: 24px;
@ -51,10 +50,6 @@ h1 {
box-shadow: 5px 5px 8px 0px rgba(0,0,0,0.5);
z-index: 1025;
&.show {
display: initial;
}
.item {
padding: 16px;
border-bottom: 1px solid #aaa;