Implement deletion of saved backups. Also add jsx-dom.

This commit is contained in:
projectmoon 2023-01-04 20:49:42 +01:00
parent af51b6ab66
commit d3ded054ce
8 changed files with 150 additions and 87 deletions

View File

@ -3,7 +3,4 @@
"transformers": { "transformers": {
"*.{ts,tsx}": ["@parcel/transformer-typescript-tsc"] "*.{ts,tsx}": ["@parcel/transformer-typescript-tsc"]
}, },
"validators": {
"*.{ts,tsx}": ["@parcel/validator-typescript"]
}
} }

View File

@ -19,6 +19,7 @@
"@types/bootstrap": "^5.2.3", "@types/bootstrap": "^5.2.3",
"bootstrap": "^5.2", "bootstrap": "^5.2",
"bootstrap-icons": "^1.10.3", "bootstrap-icons": "^1.10.3",
"dexie": "^3.2.2" "dexie": "^3.2.2",
"jsx-dom": "^8.0.3"
} }
} }

View File

@ -64,7 +64,7 @@
</button> </button>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
<li> <li>
<a id="loaded-load-previous-button" class="dropdown-item" href="#"> <a id="loaded-load-previous-button" class="dropdown-item disabled" href="#">
<i class="text-start bi bi-files"></i> Load Previous <i class="text-start bi bi-files"></i> Load Previous
</a> </a>
</li> </li>
@ -85,7 +85,7 @@
<span class="d-none d-lg-inline fs-4">or...</span> <span class="d-none d-lg-inline fs-4">or...</span>
<button id="unloaded-load-previous-button" type="button" <button id="unloaded-load-previous-button" type="button"
class="btn btn-primary btn-lg"> class="btn btn-primary btn-lg disabled">
<span class="float-start"> <span class="float-start">
<i class="text-start bi bi-files"></i> <i class="text-start bi bi-files"></i>
</span> </span>
@ -211,6 +211,6 @@
</div> </div>
</div> </div>
</div> </div>
<script type="module" src="ts/index.ts"></script> <script type="module" src="ts/index.tsx"></script>
</body> </body>
</html> </html>

View File

@ -39,6 +39,18 @@ th, td {
font-weight: inherit; font-weight: inherit;
} }
#previous-backups-list .backup-name {
float: left;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 90%;
}
#previous-backups-list .backup-delete {
float: right;
}
@include media-breakpoint-up(lg) { @include media-breakpoint-up(lg) {
#no-file-loaded-controls button { #no-file-loaded-controls button {
min-width: 200px; min-width: 200px;

View File

@ -1,4 +1,5 @@
import * as bootstrap from 'bootstrap'; import * as bootstrap from 'bootstrap';
import xslContent from 'bundle-text:../xsl/MessageLog.xsl'; import xslContent from 'bundle-text:../xsl/MessageLog.xsl';
import * as ui from './ui'; import * as ui from './ui';
import { db } from './db'; import { db } from './db';
@ -23,7 +24,7 @@ function showLoadingIndicator(toggle: boolean) {
function showLoadedControls() { function showLoadedControls() {
ui.noFileLoadedControls.classList.add('d-none'); ui.noFileLoadedControls.classList.add('d-none');
ui.noFileLoadedControls.classList.remove('d-md-block'); ui.noFileLoadedControls.classList.remove('d-lg-block');
ui.fileLoadedControls.classList.remove('d-none'); ui.fileLoadedControls.classList.remove('d-none');
} }
@ -36,9 +37,7 @@ function displayError(errorDiv: HTMLElement, category: string, ex: Error) {
errorMessages.forEach(message => errorDiv.removeChild(message)); errorMessages.forEach(message => errorDiv.removeChild(message));
//add new message and show the error alert //add new message and show the error alert
const errorSpan = document.createElement('span'); errorDiv.appendChild(<span>ex.message</span>);
errorSpan.innerText = ex.message;
errorDiv.appendChild(errorSpan);
if (errorHeading) { if (errorHeading) {
errorHeading.innerText = category; errorHeading.innerText = category;
@ -143,6 +142,7 @@ function toggleLoadPrevious(toggle: boolean) {
btn.classList.remove('disabled'); btn.classList.remove('disabled');
} else { } else {
btn.classList.add('disabled'); btn.classList.add('disabled');
bootstrap.Modal.getOrCreateInstance(ui.previousBackupsModal)?.hide();
} }
}); });
} }
@ -150,8 +150,8 @@ function toggleLoadPrevious(toggle: boolean) {
async function initEvents() { async function initEvents() {
db.entries.count() db.entries.count()
.then(count => { .then(count => {
if (count < 1) { if (count > 0) {
toggleLoadPrevious(false); toggleLoadPrevious(true);
} }
}) })
.catch(err => { .catch(err => {
@ -182,31 +182,69 @@ async function initEvents() {
displayNonFatalError('Could not load file', new Error('No file found.')); displayNonFatalError('Could not load file', new Error('No file found.'));
} }
}); });
// ui.previousBackupsList.addEventListener('click', , true);
}
async function deleteBackup(e: MouseEvent) {
const el = e.currentTarget as HTMLElement;
const anchor = el.closest('a.backup-entry') as HTMLAnchorElement | null;
const filename = anchor?.dataset['filename'];
if (filename) {
if (window.confirm('Do you want to remove ' + filename + ' from the backup list?')) {
try {
await db.entries.delete(filename);
const count = await db.entries.count();
if (count > 0) {
populateSavedBackups();
} else {
toggleLoadPrevious(false);
}
} catch (e) {
displayNonFatalError('Could not remove backup', e as Error);
}
}
}
}
async function loadBackup(e: MouseEvent) {
const listItem = e.target as HTMLElement | null;
const filename = listItem?.dataset['filename'];
if (filename) {
const entry = await db.entries.get(filename);
if (entry) {
displayBackup(xsltProcessor, entry.filename, entry.backupData);
} else {
displayNonFatalError('Internal Error', new Error('Backup data disappeared?!'));
}
bootstrap.Modal.getInstance(ui.previousBackupsModal)?.hide();
}
}
function BackupListItem(props: { filename: string }) {
return (
<a href="#" class="backup-entry list-group-item list-group-item-action"
onClick={loadBackup} dataset={{ filename: props.filename }}>
<div class="backup-name pe-none">
{props.filename}
</div>
<div class="backup-delete" onClick={deleteBackup}>
<i class="bi bi-x-circle pe-none"></i>
</div>
</a>
);
} }
async function populateSavedBackups() { async function populateSavedBackups() {
removeChildren(ui.previousBackupsList); removeChildren(ui.previousBackupsList);
const modal = new bootstrap.Modal('#previous-backups-modal'); const modal = bootstrap.Modal.getOrCreateInstance(ui.previousBackupsModal);
const entries = await db.entries.orderBy('filename').toArray(); const entries = await db.entries.orderBy('filename').toArray();
entries.forEach(entry => { entries.forEach(entry => {
const listItem = document.createElement('a'); ui.previousBackupsList.appendChild(<BackupListItem filename={entry.filename} />);
listItem.href = '#';
listItem.dataset['filename'] = entry.filename;
listItem.innerText = entry.filename;
listItem.classList.add('list-group-item', 'list-group-item-action');
listItem.addEventListener('click', async () => {
const reloaded = await db.entries.get(entry.filename);
if (reloaded) {
displayBackup(xsltProcessor, reloaded.filename, reloaded.backupData);
} else {
displayNonFatalError('Internal Error', new Error('Backup data disappeared?!'));
}
modal.hide();
});
ui.previousBackupsList.appendChild(listItem);
}); });
modal.show(); modal.show();

View File

@ -12,6 +12,7 @@ export const viewNewButtons =
export const loadPreviousButtons = export const loadPreviousButtons =
<NodeListOf<HTMLElement>>document.querySelectorAll('#unloaded-load-previous-button, #loaded-load-previous-button'); <NodeListOf<HTMLElement>>document.querySelectorAll('#unloaded-load-previous-button, #loaded-load-previous-button');
export const previousBackupsList: HTMLDivElement = document.getElementById('previous-backups-list')! as HTMLDivElement; export const previousBackupsList: HTMLDivElement = document.getElementById('previous-backups-list')! as HTMLDivElement;
export const previousBackupsModal: HTMLElement = document.getElementById('previous-backups-modal')! as HTMLElement;
export const noFileLoadedControls: HTMLDivElement = document.getElementById('no-file-loaded-controls')! as HTMLDivElement; export const noFileLoadedControls: HTMLDivElement = document.getElementById('no-file-loaded-controls')! as HTMLDivElement;
export const fileLoadedControls: HTMLDivElement = document.getElementById('file-loaded-controls')! as HTMLDivElement; export const fileLoadedControls: HTMLDivElement = document.getElementById('file-loaded-controls')! as HTMLDivElement;
export const currentlyViewing: HTMLInputElement = document.getElementById('currently-viewing')! as HTMLInputElement; export const currentlyViewing: HTMLInputElement = document.getElementById('currently-viewing')! as HTMLInputElement;

View File

@ -5,7 +5,9 @@
"target": "es6", "target": "es6",
"module": "es6", "module": "es6",
"lib": [ "dom", "es6" ], "lib": [ "dom", "es6" ],
"jsxImportSource": "preact", "jsx": "react-jsx",
"esModuleInterop": true,
"jsxImportSource": "jsx-dom",
"isolatedModules": true, "isolatedModules": true,
"moduleResolution": "node", "moduleResolution": "node",
"baseUrl": ".", "baseUrl": ".",

View File

@ -984,6 +984,11 @@ csso@^4.2.0:
dependencies: dependencies:
css-tree "^1.1.2" css-tree "^1.1.2"
csstype@^3.1.0:
version "3.1.1"
resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.1.tgz#841b532c45c758ee546a11d5bd7b7b473c8c30b9"
integrity sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==
detect-libc@^1.0.3: detect-libc@^1.0.3:
version "1.0.3" version "1.0.3"
resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-1.0.3.tgz#fa137c4bd698edf55cd5cd02ac559f91a4c4ba9b" resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-1.0.3.tgz#fa137c4bd698edf55cd5cd02ac559f91a4c4ba9b"
@ -1188,61 +1193,68 @@ json5@^2.2.0, json5@^2.2.1:
resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.3.tgz#78cd6f1a19bdc12b73db5ad0c61efd66c1e29283" resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.3.tgz#78cd6f1a19bdc12b73db5ad0c61efd66c1e29283"
integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg== integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==
lightningcss-darwin-arm64@1.17.1: jsx-dom@^8.0.3:
version "1.17.1" version "8.0.3"
resolved "https://registry.yarnpkg.com/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.17.1.tgz#d0384a47f19f1a02c29074930a23e5888e76b11a" resolved "https://registry.yarnpkg.com/jsx-dom/-/jsx-dom-8.0.3.tgz#7e87698b89b578afb7ff9f84ba960d721b4dfccf"
integrity sha512-YTAHEy4XlzI3sMbUVjbPi9P7+N7lGcgl2JhCZhiQdRAEKnZLQch8kb5601sgESxdGXjgei7JZFqi/vVEk81wYg== integrity sha512-S0YuwdklVMmBYU483cjUG+FmAVGsZb3dCa0SwoZkAX3ax/9VEPuCCx97G/0KAQIzerw/kB19g6rh+5GjYsOZfQ==
dependencies:
csstype "^3.1.0"
lightningcss-darwin-x64@1.17.1: lightningcss-darwin-arm64@1.18.0:
version "1.17.1" version "1.18.0"
resolved "https://registry.yarnpkg.com/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.17.1.tgz#7fa5853f71eb8698b511dbad43305666e0e0d871" resolved "https://registry.yarnpkg.com/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.18.0.tgz#bcd7d494d99c69947abd71136a42e80dfa80c682"
integrity sha512-UhXPUS2+yTTf5sXwUV0+8QY2x0bPGLgC/uhcknWSQMqWn1zGty4fFvH04D7f7ij0ujwSuN+Q0HtU7lgmMrPz0A== integrity sha512-OqjydwtiNPgdH1ByIjA1YzqvDG/OMR6L3LPN6wRl1729LB0y4Mik7L06kmZaTb+pvUHr+NmDd2KCwnlrQ4zO3w==
lightningcss-linux-arm-gnueabihf@1.17.1: lightningcss-darwin-x64@1.18.0:
version "1.17.1" version "1.18.0"
resolved "https://registry.yarnpkg.com/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.17.1.tgz#9ba7ffd5be686210b88ec28bb495bf9593698678" resolved "https://registry.yarnpkg.com/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.18.0.tgz#952abea2405fe2bb8dd0bb57a9d5590f8d1d6414"
integrity sha512-alUZumuznB6K/9yZ0zuZkODXUm8uRnvs9t0CL46CXN16Y2h4gOx5ahUCMlelUb7inZEsgJIoepgLsJzBUrSsBw== integrity sha512-mNiuPHj89/JHZmJMp+5H8EZSt6EL5DZRWJ31O6k3DrLLnRIQjXuXdDdN8kP7LoIkeWI5xvyD60CsReJm+YWYAw==
lightningcss-linux-arm64-gnu@1.17.1: lightningcss-linux-arm-gnueabihf@1.18.0:
version "1.17.1" version "1.18.0"
resolved "https://registry.yarnpkg.com/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.17.1.tgz#aeee6b5ed613198aab978c878f26110d6e8e70d2" resolved "https://registry.yarnpkg.com/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.18.0.tgz#23ca85e05dc4def9b4975aef307554ef292b56cd"
integrity sha512-/1XaH2cOjDt+ivmgfmVFUYCA0MtfNWwtC4P8qVi53zEQ7P8euyyZ1ynykZOyKXW9Q0DzrwcLTh6+hxVLcbtGBg== integrity sha512-S+25JjI6601HiAVoTDXW6SqH+E94a+FHA7WQqseyNHunOgVWKcAkNEc2LJvVxgwTq6z41sDIb9/M3Z9wa9lk4A==
lightningcss-linux-arm64-musl@1.17.1: lightningcss-linux-arm64-gnu@1.18.0:
version "1.17.1" version "1.18.0"
resolved "https://registry.yarnpkg.com/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.17.1.tgz#14e46b8d2f50e83a710c62432e447bd9f0c328a5" resolved "https://registry.yarnpkg.com/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.18.0.tgz#6c8e0a6e2c8b44cf180f3a0f0740402e8f656155"
integrity sha512-/IgE7lYWFHCCQFTMIwtt+fXLcVOha8rcrNze1JYGPWNorO6NBc6MJo5u5cwn5qMMSz9fZCCDIlBBU4mGwjQszQ== integrity sha512-JSqh4+21dCgBecIQUet35dtE4PhhSEMyqe3y0ZNQrAJQ5kyUPSQHiw81WXnPJcOSTTpG0TyMLiC8K//+BsFGQA==
lightningcss-linux-x64-gnu@1.17.1: lightningcss-linux-arm64-musl@1.18.0:
version "1.17.1" version "1.18.0"
resolved "https://registry.yarnpkg.com/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.17.1.tgz#17b8abb73d7b32338d5b248ac12325f506964e69" resolved "https://registry.yarnpkg.com/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.18.0.tgz#88393c101cf236ea0cdc97fddd66b82db964d835"
integrity sha512-OyE802IAp4DB9vZrHlOyWunbHLM9dN08tJIKN/HhzzLKIHizubOWX6NMzUXMZLsaUrYwVAHHdyEA+712p8mMzA== integrity sha512-2FWHa8iUhShnZnqhn2wfIcK5adJat9hAAaX7etNsoXJymlliDIOFuBQEsba2KBAZSM4QqfQtvRdR7m8i0I7ybQ==
lightningcss-linux-x64-musl@1.17.1: lightningcss-linux-x64-gnu@1.18.0:
version "1.17.1" version "1.18.0"
resolved "https://registry.yarnpkg.com/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.17.1.tgz#78765c58c111af43e7d311afa4713348ce9b2766" resolved "https://registry.yarnpkg.com/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.18.0.tgz#ad068d24836568337bfe545650565e13f813c8ee"
integrity sha512-ydwGgV3Usba5P53RAOqCA9MsRsbb8jFIEVhf7/BXFjpKNoIQyijVTXhwIgQr/oGwUNOHfgQ3F8ruiUjX/p2YKw== integrity sha512-plCPGQJtDZHcLVKVRLnQVF2XRsIC32WvuJhQ7fJ7F6BV98b/VZX0OlX05qUaOESD9dCDHjYSfxsgcvOKgCWh7A==
lightningcss-win32-x64-msvc@1.17.1: lightningcss-linux-x64-musl@1.18.0:
version "1.17.1" version "1.18.0"
resolved "https://registry.yarnpkg.com/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.17.1.tgz#be3c5e1f026c4fc6b58f969917970450634285a1" resolved "https://registry.yarnpkg.com/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.18.0.tgz#4d84de26b8185aa42450e0f4c83bbfb5a36ae750"
integrity sha512-Ngqtx9NazaiAOk71XWwSsqgAuwYF+8PO6UYsoU7hAukdrSS98kwaBMEDw1igeIiZy1XD/4kh5KVnkjNf7ZOxVQ== integrity sha512-na+BGtVU6fpZvOHKhnlA0XHeibkT3/46nj6vLluG3kzdJYoBKU6dIl7DSOk++8jv4ybZyFJ0aOFMMSc8g2h58A==
lightningcss-win32-x64-msvc@1.18.0:
version "1.18.0"
resolved "https://registry.yarnpkg.com/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.18.0.tgz#f83952d16b83dfce65f4615f87c867769220d117"
integrity sha512-5qeAH4RMNy2yMNEl7e5TI6upt/7xD2ZpHWH4RkT8iJ7/6POS5mjHbXWUO9Q1hhDhqkdzGa76uAdMzEouIeCyNw==
lightningcss@^1.16.1: lightningcss@^1.16.1:
version "1.17.1" version "1.18.0"
resolved "https://registry.yarnpkg.com/lightningcss/-/lightningcss-1.17.1.tgz#cce53acf117a6f9494bc77e8ac6550286d621243" resolved "https://registry.yarnpkg.com/lightningcss/-/lightningcss-1.18.0.tgz#ca3327a1a7571a83bbb9733ed4e4cded775bdadf"
integrity sha512-DwwM/YYqGwLLP3he41wzDXT/m+8jdEZ80i9ViQNLRgyhey3Vm6N7XHn+4o3PY6wSnVT23WLuaROIpbpIVTNOjg== integrity sha512-uk10tNxi5fhZqU93vtYiQgx/8a9f0Kvtj5AXIm+VlOXY+t/DWDmCZWJEkZJmmALgvbS6aAW8or+Kq85eJ6TDTw==
dependencies: dependencies:
detect-libc "^1.0.3" detect-libc "^1.0.3"
optionalDependencies: optionalDependencies:
lightningcss-darwin-arm64 "1.17.1" lightningcss-darwin-arm64 "1.18.0"
lightningcss-darwin-x64 "1.17.1" lightningcss-darwin-x64 "1.18.0"
lightningcss-linux-arm-gnueabihf "1.17.1" lightningcss-linux-arm-gnueabihf "1.18.0"
lightningcss-linux-arm64-gnu "1.17.1" lightningcss-linux-arm64-gnu "1.18.0"
lightningcss-linux-arm64-musl "1.17.1" lightningcss-linux-arm64-musl "1.18.0"
lightningcss-linux-x64-gnu "1.17.1" lightningcss-linux-x64-gnu "1.18.0"
lightningcss-linux-x64-musl "1.17.1" lightningcss-linux-x64-musl "1.18.0"
lightningcss-win32-x64-msvc "1.17.1" lightningcss-win32-x64-msvc "1.18.0"
lines-and-columns@^1.1.6: lines-and-columns@^1.1.6:
version "1.2.4" version "1.2.4"