Add redirects, and a dynamic "Add an instance please!" button.

This commit is contained in:
Kio 2025-01-20 10:55:45 -05:00
parent beab5a52a5
commit 97fc0eb60a
3 changed files with 22 additions and 0 deletions

View file

@ -58,6 +58,10 @@ abbr[title] {
text-align: start; text-align: start;
} }
pre#path {
display: inline-block;
}
.flex-vcenter { .flex-vcenter {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -76,6 +80,8 @@ abbr[title] {
.flex-row { .flex-row {
display: flex; display: flex;
justify-content: center;
align-items: center;;
flex-direction: row; flex-direction: row;
} }
@ -162,3 +168,7 @@ abbr[title] {
.buttonPanel>* { .buttonPanel>* {
margin-top: min(var(--xl), 6vh); margin-top: min(var(--xl), 6vh);
} }
.hidden {
display: none;
}

View file

@ -24,6 +24,10 @@
</header> </header>
<div class="flex-row"> <div class="flex-row">
<center class="half-width"> <center class="half-width">
You're about to go to <pre id="path"></pre>.<br />
<svg height="20px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. --><path d="M256 464a208 208 0 1 1 0-416 208 208 0 1 1 0 416zM256 0a256 256 0 1 0 0 512A256 256 0 1 0 256 0zM376.9 294.6c4.5-4.2 7.1-10.1 7.1-16.3c0-12.3-10-22.3-22.3-22.3L304 256l0-96c0-17.7-14.3-32-32-32l-32 0c-17.7 0-32 14.3-32 32l0 96-57.7 0C138 256 128 266 128 278.3c0 6.2 2.6 12.1 7.1 16.3l107.1 99.9c3.8 3.5 8.7 5.5 13.8 5.5s10.1-2 13.8-5.5l107.1-99.9z"/></svg>
<p id="no-instance" class="hidden">You currently don't have any instances. You should add one!</p>
<form></form>
<form id="instanceSelectForm" class="align-start wfit-content"></form> <form id="instanceSelectForm" class="align-start wfit-content"></form>
<br> <br>
<button onclick="showAddInstanceDialog()">Add an instance</button> <button onclick="showAddInstanceDialog()">Add an instance</button>

View file

@ -43,6 +43,9 @@ export const {
})(); })();
function createInstanceSelectOptions() { function createInstanceSelectOptions() {
if (storageManager.storage.instances.length > 0) {
document.querySelector("#no-instance")?.classList.add("hidden")
}
instanceSelectForm.replaceChildren(); // Erase all child nodes instanceSelectForm.replaceChildren(); // Erase all child nodes
for (const instance of storageManager.storage.instances) { for (const instance of storageManager.storage.instances) {
const div = document.createElement("div"); const div = document.createElement("div");
@ -128,3 +131,8 @@ function redirect(to: string) {
url.pathname = getTargetPath(); url.pathname = getTargetPath();
location.href = url.toString(); location.href = url.toString();
} }
document.querySelector("#path")!.innerHTML = getTargetPath()
if (storageManager.storage.instances.length === 0) {
document.querySelector("#no-instance")?.classList.remove("hidden")
}