add ability to delete record, add emojis for action buttons

This commit is contained in:
Ondrej Synacek 2019-11-10 16:35:54 +01:00
parent 09887ba47b
commit 4139481c91
3 changed files with 53 additions and 14 deletions

View File

@ -53,25 +53,49 @@
updateStorage([ ...storageContents, record ]) updateStorage([ ...storageContents, record ])
} }
const deleteRecord = (order) => {
if (!useStorage) {
return
}
const storage = getStorage()
const storageContents = getStorageContents(storage)
const index = storageContents.findIndex((record) => {
return record.order === order
})
if (!Number.isFinite(index)) {
return
}
const nextStorage = [ ...storageContents ]
nextStorage.splice(index, 1)
updateStorage(nextStorage)
}
const showTable = () => { const showTable = () => {
list.classList.remove('hidden') list.classList.remove('hidden')
} }
const deleteTableRow = (order, row) => {
deleteRecord(order)
if (!useStorage) {
return
}
row.remove()
}
const insertTableRow = ({ order, link, createdAt, title }) => { const insertTableRow = ({ order, link, createdAt, title }) => {
showTable() showTable()
const row = document.createElement('tr') const newRow = document.createElement('tr')
const orderCol = document.createElement('td') const orderCol = document.createElement('td')
orderCol.innerText = order orderCol.innerText = order
const linkElement = document.createElement('a')
linkElement.setAttribute('href', link)
linkElement.innerText = 'Download'
const linkCol = document.createElement('td')
linkCol.appendChild(linkElement)
const createdAtCol = document.createElement('td') const createdAtCol = document.createElement('td')
const parsedCreatedAt = new Date(createdAt) const parsedCreatedAt = new Date(createdAt)
createdAtCol.innerText = (parsedCreatedAt || new Date()).toLocaleString() createdAtCol.innerText = (parsedCreatedAt || new Date()).toLocaleString()
@ -79,12 +103,26 @@
const titleCol = document.createElement('td') const titleCol = document.createElement('td')
titleCol.innerText = title titleCol.innerText = title
const newRow = document.createElement('tr') const downloadEl = document.createElement('a')
downloadEl.setAttribute('href', link)
downloadEl.innerText = '⬇︎'
const deleteEl = document.createElement('a')
deleteEl.setAttribute('href', 'javascript:void(0)')
deleteEl.innerText = '✖︎'
deleteEl.addEventListener('click', (event) => {
event.preventDefault()
deleteTableRow(order, newRow)
})
const actionCol = document.createElement('td')
actionCol.appendChild(downloadEl)
actionCol.appendChild(deleteEl)
newRow.appendChild(orderCol) newRow.appendChild(orderCol)
newRow.appendChild(linkCol)
newRow.appendChild(createdAtCol) newRow.appendChild(createdAtCol)
newRow.appendChild(titleCol) newRow.appendChild(titleCol)
newRow.appendChild(actionCol)
tableBody.prepend(newRow) tableBody.prepend(newRow)
} }

View File

@ -1,4 +1,4 @@
// Worker v8 // Worker v9
self.addEventListener('install', (event) => { self.addEventListener('install', (event) => {
event.waitUntil( event.waitUntil(
@ -6,7 +6,7 @@ self.addEventListener('install', (event) => {
return cache.addAll([ return cache.addAll([
'/', '/',
'/favicon.ico', '/favicon.ico',
'/scripts.js?4', '/scripts.js?5',
'/style.css?5', '/style.css?5',
'/about?2', '/about?2',
'/icon-512.png', '/icon-512.png',

View File

@ -63,8 +63,9 @@
<thead> <thead>
<tr> <tr>
<td>#</td> <td>#</td>
<td>Link</td>
<td>Created at</td> <td>Created at</td>
<td>Title</td>
<td></td>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@ -79,6 +80,6 @@
<a href="/about" target="_blank" title="About the project">About</about> <a href="/about" target="_blank" title="About the project">About</about>
</footer> </footer>
<script src="/scripts.js?4"></script> <script src="/scripts.js?5"></script>
</body> </body>
</html> </html>