diff --git a/packages/plugin-index/src/IndexPage.svelte b/packages/plugin-index/src/IndexPage.svelte index 4077105..701f7c4 100644 --- a/packages/plugin-index/src/IndexPage.svelte +++ b/packages/plugin-index/src/IndexPage.svelte @@ -13,70 +13,72 @@ */ handleMkdirs: { const mkdirContainer = document.getElementById('mkdirContainer'); - mkdirContainer.style.display = ''; - const mkdirForm = document.getElementById('mkdir'); - - mkdirForm.addEventListener('submit', (event) => { - event.preventDefault(); - requests = requests.concat([ - { - type: 'mkdir', - done: null, - name: mkdirForm.name.value, - }, - ]); - mkdirForm.reset(); - - doMkdir(); - }); - - function doMkdir() { - for (let i = 0; i < requests.length; i++) { - const dir = requests[i]; - - if (dir.type === 'mkdir' && dir.done === null) { - dir.done = false; - tasksContainer.style.display = ''; - refreshContainer.style.display = ''; - refresh.disabled = true; - - const element = document.createElement('div'); - element.style.marginBottom = '0.5em'; - - const progress = document.createElement('div'); - progress.style.display = 'inline-block'; - progress.innerText = 'Working...'; - progress.style.border = '1px solid #000'; - progress.style.width = '100px'; - progress.style.marginRight = '0.5em'; - progress.style.textAlign = 'center'; - element.appendChild(progress); - - const name = document.createElement('span'); - name.innerText = `Make directory ${dir.name}`; - element.appendChild(name); - - tasks.appendChild(element); - - const xhr = new XMLHttpRequest(); - xhr.addEventListener('loadend', () => { - if ( - xhr.readyState === 4 && - xhr.status >= 200 && - xhr.status < 300 - ) { - progress.innerText = 'Success.'; - } else { - progress.innerText = `Error: ${xhr.status} ${xhr.statusText}`; - } - dir.done = true; - - if (requests.find((request) => !request.done) == null) { - refresh.disabled = false; - } - }); - xhr.open('MKCOL', dir.name, true); - xhr.send(); + if (mkdirContainer != null) { + mkdirContainer.style.display = ''; + const mkdirForm = document.getElementById('mkdir'); + + mkdirForm.addEventListener('submit', (event) => { + event.preventDefault(); + requests = requests.concat([ + { + type: 'mkdir', + done: null, + name: mkdirForm.name.value, + }, + ]); + mkdirForm.reset(); + + doMkdir(); + }); + + function doMkdir() { + for (let i = 0; i < requests.length; i++) { + const dir = requests[i]; + + if (dir.type === 'mkdir' && dir.done === null) { + dir.done = false; + tasksContainer.style.display = ''; + refreshContainer.style.display = ''; + refresh.disabled = true; + + const element = document.createElement('div'); + element.style.marginBottom = '0.5em'; + + const progress = document.createElement('div'); + progress.style.display = 'inline-block'; + progress.innerText = 'Working...'; + progress.style.border = '1px solid #000'; + progress.style.width = '100px'; + progress.style.marginRight = '0.5em'; + progress.style.textAlign = 'center'; + element.appendChild(progress); + + const name = document.createElement('span'); + name.innerText = `Make directory ${dir.name}`; + element.appendChild(name); + + tasks.appendChild(element); + + const xhr = new XMLHttpRequest(); + xhr.addEventListener('loadend', () => { + if ( + xhr.readyState === 4 && + xhr.status >= 200 && + xhr.status < 300 + ) { + progress.innerText = 'Success.'; + } else { + progress.innerText = `Error: ${xhr.status} ${xhr.statusText}`; + } + dir.done = true; + + if (requests.find((request) => !request.done) == null) { + refresh.disabled = false; + } + }); + xhr.open('MKCOL', dir.name, true); + xhr.send(); + } } } } @@ -87,87 +89,89 @@ */ handleUploads: { const uploadContainer = document.getElementById('uploadContainer'); - uploadContainer.style.display = ''; - const uploadForm = document.getElementById('upload'); - - uploadForm.addEventListener('submit', (event) => { - event.preventDefault(); - requests = requests.concat( - Array.prototype.slice.call(uploadForm.file.files).map((file) => ({ - type: 'upload', - done: null, - file, - })) - ); - uploadForm.reset(); - - doUpload(); - }); - - function doUpload() { - for (let i = 0; i < requests.length; i++) { - const file = requests[i]; - - if (file.type === 'upload' && file.done === null) { - file.done = false; - tasksContainer.style.display = ''; - refreshContainer.style.display = ''; - refresh.disabled = true; - - const element = document.createElement('label'); - element.style.display = 'block'; - element.style.marginBottom = '0.5em'; - - const progress = document.createElement('progress'); - progress.value = 0; - progress.max = 100; - progress.style.width = '100px'; - progress.style.marginRight = '0.5em'; - element.appendChild(progress); - - const name = document.createElement('span'); - name.innerText = `Upload ${file.file.name}`; - element.appendChild(name); - - tasks.appendChild(element); - - const xhr = new XMLHttpRequest(); - xhr.upload.addEventListener('progress', (event) => { - if (event.lengthComputable) { - progress.value = (event.loaded / event.total) * 100; - progress.title = (event.loaded / event.total) * 100 + '%'; - } - }); - xhr.addEventListener('progress', (event) => { - if (event.lengthComputable) { - progress.value = (event.loaded / event.total) * 100; - progress.title = (event.loaded / event.total) * 100 + '%'; - } - }); - xhr.addEventListener('loadend', () => { - if ( - xhr.readyState === 4 && - xhr.status >= 200 && - xhr.status < 300 - ) { - progress.value = 100; - progress.title = 'Done'; - } else { - progress.value = 0; - progress.title = 'Error'; - const error = document.createElement('span'); - error.innerText = ` (Error: ${xhr.status} ${xhr.statusText})`; - element.appendChild(error); - } - file.done = true; - - if (requests.find((request) => !request.done) == null) { - refresh.disabled = false; - } - }); - xhr.open('PUT', file.file.name, true); - xhr.setRequestHeader('Content-Type', file.file.type); - xhr.send(file.file); + if (uploadContainer != null) { + uploadContainer.style.display = ''; + const uploadForm = document.getElementById('upload'); + + uploadForm.addEventListener('submit', (event) => { + event.preventDefault(); + requests = requests.concat( + Array.prototype.slice.call(uploadForm.file.files).map((file) => ({ + type: 'upload', + done: null, + file, + })) + ); + uploadForm.reset(); + + doUpload(); + }); + + function doUpload() { + for (let i = 0; i < requests.length; i++) { + const file = requests[i]; + + if (file.type === 'upload' && file.done === null) { + file.done = false; + tasksContainer.style.display = ''; + refreshContainer.style.display = ''; + refresh.disabled = true; + + const element = document.createElement('label'); + element.style.display = 'block'; + element.style.marginBottom = '0.5em'; + + const progress = document.createElement('progress'); + progress.value = 0; + progress.max = 100; + progress.style.width = '100px'; + progress.style.marginRight = '0.5em'; + element.appendChild(progress); + + const name = document.createElement('span'); + name.innerText = `Upload ${file.file.name}`; + element.appendChild(name); + + tasks.appendChild(element); + + const xhr = new XMLHttpRequest(); + xhr.upload.addEventListener('progress', (event) => { + if (event.lengthComputable) { + progress.value = (event.loaded / event.total) * 100; + progress.title = (event.loaded / event.total) * 100 + '%'; + } + }); + xhr.addEventListener('progress', (event) => { + if (event.lengthComputable) { + progress.value = (event.loaded / event.total) * 100; + progress.title = (event.loaded / event.total) * 100 + '%'; + } + }); + xhr.addEventListener('loadend', () => { + if ( + xhr.readyState === 4 && + xhr.status >= 200 && + xhr.status < 300 + ) { + progress.value = 100; + progress.title = 'Done'; + } else { + progress.value = 0; + progress.title = 'Error'; + const error = document.createElement('span'); + error.innerText = ` (Error: ${xhr.status} ${xhr.statusText})`; + element.appendChild(error); + } + file.done = true; + + if (requests.find((request) => !request.done) == null) { + refresh.disabled = false; + } + }); + xhr.open('PUT', file.file.name, true); + xhr.setRequestHeader('Content-Type', file.file.type); + xhr.send(file.file); + } } } } @@ -737,10 +741,9 @@ {#if self.url.pathname != '/'} - .. + + .. + Parent Directory @@ -753,11 +756,11 @@ ? 'background-color: #ddd;' : ''} > - + {entry.name}{entry.directory ? '/' : ''} + > + {entry.directory ? 'Directory' : entry.type} {new Date(entry.lastModified).toLocaleString()} - - - + {#if entry.canRead && entry.canMove} + + {:else if entry.canRead} + + {:else if entry.canMove} + + {/if} + {#if entry.canMove} + + {/if} + {#if entry.canDelete} + + {/if} {/each} @@ -787,19 +800,23 @@ - - - +{#if canMkdir} + +{/if} + +{#if canUpload} + +{/if}