{
+
+ /* Elements */
+
+ const logArea = createArea.querySelector('.log-area');
+ const logClearBtn = createArea.querySelector('.log-clear');
+ const noticeArea = createArea.querySelector('.notice-area');
+
+ /* Components */
+
+ const log = new Log(logArea, window.location.pathname, {
+ empty: 'Your locally-stored dropbox creation history is empty',
+ });
+
+ logClearBtn.addEventListener('click', () => {
+ log.clear();
+ });
+
+ /* Form */
+
+ function showError(error='') {
+ let message = error.message || error.toString();
+ if (message !== '') {
+ noticeArea.classList.remove('hidden');
+ noticeArea.innerText = message;
+ } else {
+ noticeArea.classList.add('hidden');
+ noticeArea.innerText = message;
+ }
+ }
+
+ createArea.addEventListener('submit', e => {
+ e.preventDefault();
+
+ // Clear previous errors
+ showError();
+
+ const data = new FormData(e.target);
+ fetch(e.target.action, {
+ method: e.target.method,
+ body: data,
+ })
+ .then(throwForStatus)
+ .then(res => res.text())
+ .then(id => {
+ log.add({
+ location: window.location.origin + '/' + id,
+ title: `
+Endpoint: ${data.get('Endpoint')}
+Region: ${data.get('Region')}
+Prefix: ${data.get('Prefix')}
+Expires: ${data.get('ExpiresNumber')}${data.get('ExpiresUnits')}
+ `.trim(),
+ });
+ })
+ .catch(showError);
+ });
+
+});
diff --git a/web/src/derive.js b/web/src/derive.js
index 99afabe..20a0116 100644
--- a/web/src/derive.js
+++ b/web/src/derive.js
@@ -41,7 +41,7 @@ class Deriver {
if (!this.notice) {
return;
}
- let message = error.toString();
+ let message = error.message || error.toString();
if (Array.isArray(error.problems)) {
message = 'Invalid input: ' + error.problems.join(', ');
}
diff --git a/web/src/limiter.js b/web/src/limiter.js
new file mode 100644
index 0000000..2deaa11
--- /dev/null
+++ b/web/src/limiter.js
@@ -0,0 +1,40 @@
+class Limiter {
+ constructor(delay=500) {
+ this.delay = delay;
+
+ this.interval = null;
+ this.next = null;
+ }
+
+ call(fn) {
+ if (this.interval == null) {
+ fn();
+ this.enableClock();
+ } else {
+ this.next = fn;
+ }
+ }
+
+ checkCall() {
+ if (this.next == null) {
+ return this.disableClock();
+ }
+
+ // Function wanted to be called
+ this.next();
+ this.next = null;
+ }
+
+ enableClock() {
+ this.interval = setInterval(() => {
+ this.checkCall();
+ }, this.delay);
+ }
+
+ disableClock() {
+ clearInterval(this.interval);
+ this.interval = null;
+ }
+}
+
+export default Limiter;
diff --git a/web/src/log.js b/web/src/log.js
index 40d0f53..15364aa 100644
--- a/web/src/log.js
+++ b/web/src/log.js
@@ -1,14 +1,14 @@
import filesize from 'filesize';
class Log {
- constructor(target, key) {
+ constructor(target, key, messages) {
this.key = key;
this.target = target;
this.items = [];
const empty = document.createElement('div');
- empty.innerText = 'Your locally-stored file upload history is empty';
- empty.classList.add('mt-1', 'p-2', 'bg-gray-50', 'text-gray-500', 'rounded-md', 'border', 'border-gray-400', 'flex', 'justify-center');
+ empty.innerText = messages.empty || 'Empty';
+ empty.classList.add('mt-2', 'p-2', 'bg-gray-50', 'text-gray-500', 'rounded-md', 'border', 'border-gray-400', 'flex', 'justify-center');
this.empty = empty;
this.localStorageLoad();
@@ -26,24 +26,36 @@ class Log {
static renderItem(item) {
const base = document.createElement('div');
- base.classList.add('mt-1');
+ base.classList.add('mt-2');
base.classList.add('flex');
+ base.title = item.title;
const url = document.createElement('input');
url.type = 'url';
url.value = item.location;
url.setAttribute('readonly', '');
- url.classList.add('w-full', 'rounded-l-md', 'border-gray-400');
+ url.classList.add('w-full', 'rounded-l-md', 'border-r-0', 'border-gray-400');
url.addEventListener('click', (e) => {
//e.target.setSelectionRange(0, e.target.value.length);
e.target.select();
});
base.appendChild(url);
- const size = document.createElement('span');
- size.innerText = filesize(item.size);
- size.classList.add('text-sm', 'whitespace-nowrap', 'px-2', 'bg-gray-50', 'text-gray-500', 'rounded-r-md', 'border', 'border-gray-400', 'border-l-0', 'inline-flex', 'items-center', 'justify-center', 'w-24');
- base.appendChild(size);
+ const urlOpen = document.createElement('a');
+ urlOpen.target = '_blank';
+ urlOpen.href = item.location;
+ urlOpen.classList.add('rounded-r-md', 'px-2', 'text-blue-700', 'border', 'border-l-0', 'border-gray-400', 'inline-flex', 'items-center');
+ urlOpen.innerText = 'Open';
+ base.appendChild(urlOpen);
+
+ if (item.size) {
+ urlOpen.classList.remove('rounded-r-md');
+
+ const size = document.createElement('span');
+ size.innerText = filesize(item.size);
+ size.classList.add('text-sm', 'whitespace-nowrap', 'px-2', 'bg-gray-50', 'text-gray-500', 'rounded-r-md', 'border', 'border-gray-400', 'border-l-0', 'inline-flex', 'items-center', 'justify-center', 'w-24');
+ base.appendChild(size);
+ }
return base;
}
diff --git a/web/src/main.js b/web/src/main.js
index 86df742..b0034d4 100644
--- a/web/src/main.js
+++ b/web/src/main.js
@@ -11,3 +11,4 @@ import '@uppy/status-bar/dist/style.css';
import './save';
import './derive';
import './upload';
+import './create';
diff --git a/web/src/save.js b/web/src/save.js
index e69de29..c1fc3bd 100644
--- a/web/src/save.js
+++ b/web/src/save.js
@@ -0,0 +1,64 @@
+import Limiter from './limiter';
+
+class Saver {
+ constructor(target, inputs, key='') {
+ this.target = target;
+ this.inputs = inputs;
+ this.key = '';
+
+ this.limiter = new Limiter();
+
+ this.updateState = this.updateState.bind(this);
+ this.input = this.input.bind(this);
+ this.save = this.save.bind(this);
+
+ this.target.addEventListener('input', this.updateState);
+ this.updateState();
+ }
+
+ updateState() {
+ if (this.target.checked) {
+ this.inputs.forEach(input => input.addEventListener('input', this.input));
+ this.save();
+ } else {
+ this.inputs.forEach(input => input.removeEventListener('input', this.input));
+ this.clear();
+ }
+ }
+
+ input() {
+ this.limiter.call(this.save);
+ }
+
+ load() {
+ const values = JSON.parse(window.localStorage.getItem('save' + this.key) || '{}');
+ for (const input of this.inputs) {
+ if (input.name in values) {
+ input.value = values[input.name];
+ }
+ }
+ }
+
+ save() {
+ const values = {};
+ for (const input of this.inputs) {
+ values[input.name] = input.value;
+ }
+ window.localStorage.setItem('save' + this.key, JSON.stringify(values));
+ }
+
+ clear() {
+ window.localStorage.removeItem('save' + this.key);
+ }
+}
+
+const saveInputs = document.querySelectorAll('[data-save]');
+saveInputs.forEach(saveInput => {
+
+ const inputNames = saveInput.dataset.save.split(',');
+
+ const inputs = inputNames.map(inputName => document.querySelector(`[name="${inputName}"]`));
+ const saver = new Saver(saveInput, inputs);
+ saver.load();
+
+});
diff --git a/web/src/upload.js b/web/src/upload.js
index a654058..e021951 100644
--- a/web/src/upload.js
+++ b/web/src/upload.js
@@ -17,7 +17,9 @@ uploadAreas.forEach(uploadArea => {
/* Components */
- const log = new Log(logArea, window.location.pathname);
+ const log = new Log(logArea, window.location.pathname, {
+ empty: 'Your locally-stored file upload history is empty',
+ });
logClearBtn.addEventListener('click', () => {
log.clear();
diff --git a/web/upload.tmpl b/web/upload.tmpl
index 4490e6b..6b37c46 100644
--- a/web/upload.tmpl
+++ b/web/upload.tmpl
@@ -1,18 +1,25 @@
{{template "head.tmpl" "Dropbox"}}
-
-
-
File upload history
-
-
-
-
-
+
+
+
+
+
File upload history
+
+
+
+
+
+
+
{{template "foot.tmpl"}}