Add empty log message
parent
b89e415690
commit
bce86f4e20
|
@ -6,6 +6,11 @@ class Log {
|
||||||
this.target = target;
|
this.target = target;
|
||||||
this.items = [];
|
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');
|
||||||
|
this.empty = empty;
|
||||||
|
|
||||||
this.localStorageLoad();
|
this.localStorageLoad();
|
||||||
this.render();
|
this.render();
|
||||||
}
|
}
|
||||||
|
@ -28,27 +33,16 @@ class Log {
|
||||||
url.type = 'url';
|
url.type = 'url';
|
||||||
url.value = item.location;
|
url.value = item.location;
|
||||||
url.setAttribute('readonly', '');
|
url.setAttribute('readonly', '');
|
||||||
url.classList.add('w-full');
|
url.classList.add('w-full', 'rounded-l-md', 'border-gray-400');
|
||||||
url.classList.add('rounded-l-md');
|
|
||||||
url.classList.add('border-gray-400');
|
|
||||||
url.addEventListener('click', (e) => {
|
url.addEventListener('click', (e) => {
|
||||||
e.target.setSelectionRange(0, e.target.value.length);
|
//e.target.setSelectionRange(0, e.target.value.length);
|
||||||
|
e.target.select();
|
||||||
});
|
});
|
||||||
base.appendChild(url);
|
base.appendChild(url);
|
||||||
|
|
||||||
const size = document.createElement('span');
|
const size = document.createElement('span');
|
||||||
size.innerText = filesize(item.size);
|
size.innerText = filesize(item.size);
|
||||||
size.classList.add('text-sm');
|
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');
|
||||||
size.classList.add('whitespace-nowrap');
|
|
||||||
size.classList.add('px-2');
|
|
||||||
size.classList.add('bg-gray-50');
|
|
||||||
size.classList.add('text-gray-500');
|
|
||||||
size.classList.add('rounded-r-md');
|
|
||||||
size.classList.add('border');
|
|
||||||
size.classList.add('border-gray-400');
|
|
||||||
size.classList.add('border-l-0');
|
|
||||||
size.classList.add('inline-flex');
|
|
||||||
size.classList.add('items-center');
|
|
||||||
base.appendChild(size);
|
base.appendChild(size);
|
||||||
|
|
||||||
return base;
|
return base;
|
||||||
|
@ -60,12 +54,22 @@ class Log {
|
||||||
elements.forEach(element => {
|
elements.forEach(element => {
|
||||||
this.target.appendChild(element);
|
this.target.appendChild(element);
|
||||||
});
|
});
|
||||||
|
this.renderEmpty();
|
||||||
|
}
|
||||||
|
|
||||||
|
renderEmpty() {
|
||||||
|
if (this.items.length == 0 && !this.target.contains(this.empty)) {
|
||||||
|
this.target.appendChild(this.empty);
|
||||||
|
} else if (this.target.contains(this.empty)) {
|
||||||
|
this.target.removeChild(this.empty);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
add(item) {
|
add(item) {
|
||||||
this.items.push(item);
|
this.items.push(item);
|
||||||
this.localStorageSave();
|
this.localStorageSave();
|
||||||
this.target.appendChild(this.constructor.renderItem(item));
|
this.target.appendChild(this.constructor.renderItem(item));
|
||||||
|
this.renderEmpty();
|
||||||
}
|
}
|
||||||
|
|
||||||
clear() {
|
clear() {
|
||||||
|
|
|
@ -5,10 +5,10 @@
|
||||||
<div class="status-area"></div>
|
<div class="status-area"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex items-center">
|
<div class="flex items-center">
|
||||||
<h4 class="my-2 flex-1 text-lg font-bold">Completed</h4>
|
<h4 class="my-2 flex-1 text-lg font-bold">File upload history</h4>
|
||||||
<span>
|
<span>
|
||||||
<button
|
<button
|
||||||
class="log-clear px-6 py-2 rounded-md bg-red-600 text-white hover:bg-red-700 focus:ring-2 focus:ring-offset-2 focus:ring-red-600">
|
class="log-clear px-6 py-2 rounded-md bg-yellow-600 text-white hover:bg-yellow-700 focus:ring-2 focus:ring-offset-2 focus:ring-yellow-600">
|
||||||
Clear
|
Clear
|
||||||
</button>
|
</button>
|
||||||
</span>
|
</span>
|
||||||
|
|
Loading…
Reference in New Issue