diff --git a/static/confirm_instance_details.mts b/static/confirm_instance_details.mts
index f6619ab..115bde3 100644
--- a/static/confirm_instance_details.mts
+++ b/static/confirm_instance_details.mts
@@ -3,7 +3,7 @@
import { parseHost } from "./add_an_instance.mjs";
import { FormDialog, ONCE } from "./dialog.mjs";
import { findButtonOrFail, findFormOrFail, findImageOrFail, findInputOrFail, findOptionOrFail, findSelectOrFail } from "./dom.mjs";
-import knownSoftware from "./known_software.mjs";
+import knownSoftware, { getName } from "./known_software.mjs";
import { Instance } from "./storage_manager.mjs";
export function mergeHost(host: string, secure: boolean): string {
@@ -126,7 +126,7 @@ export class InstanceDetailsDialog extends FormDialog {
for (const item of items) {
const option = document.createElement("option");
option.value = item;
- option.innerText = knownSoftware.software[item]?.name ?? knownSoftware.groups[item]?.name ?? item;
+ option.innerText = getName(knownSoftware, item) ?? item;
this.defaultsList.list.appendChild(option);
}
diff --git a/static/crossroad.html b/static/crossroad.html
index db1fcee..d303d16 100644
--- a/static/crossroad.html
+++ b/static/crossroad.html
@@ -24,9 +24,12 @@
You're about to go to
- .
+
+ on
+
+ instance.
- You currently don't have any instances. You should add one!
+ You currently don't have any instances. You should add one!
diff --git a/static/crossroad.mts b/static/crossroad.mts
index 299cc27..94ab9eb 100644
--- a/static/crossroad.mts
+++ b/static/crossroad.mts
@@ -1,6 +1,6 @@
import { AddInstanceFlow } from "./add_instance_flow.mjs";
-import { findButtonOrFail, findDialogOrFail, findFormOrFail, findInputOrFail, findParagraphOrFail, findPreOrFail } from "./dom.mjs";
-import knownSoftware from "./known_software.mjs";
+import { findButtonOrFail, findDialogOrFail, findFormOrFail, findInputOrFail, findParagraphOrFail, findPreOrFail, findSpanOrFail } from "./dom.mjs";
+import knownSoftware, { getName } from "./known_software.mjs";
import storageManager from "./storage_manager.mjs";
const RADIO_BUTTON_NAME = "instanceSelect";
@@ -15,7 +15,10 @@ const detailsDialog = findDialogOrFail(document.body, "#instanceDetails");
const instanceSelectForm = findFormOrFail(document.body, "#instanceSelectForm");
const redirectButton = findButtonOrFail(document.body, "#redirect");
const redirectAlwaysButton = findButtonOrFail(document.body, "#redirectAlways");
+const noInstanceParagraph = findParagraphOrFail(document.body, "#noInstance");
const pathText = findPreOrFail(document.body, "#path");
+const aOrAnText = findSpanOrFail(document.body, "#aOrAn");
+const destinationText = findSpanOrFail(document.body, "#destination");
// Don't bother initializing if we're performing autoredirect
if (!autoRedirect()) {
@@ -25,6 +28,11 @@ if (!autoRedirect()) {
storageManager.addSaveCallback(updateNoInstanceHint);
pathText.innerText = getTargetPath();
+ const targetID = getTargetSoftwareOrGroup();
+ const targetName = getName(knownSoftware, targetID) ?? targetID;
+ aOrAnText.innerText = "aeiou".includes(targetName[0].toLowerCase()) ? "an" : "a";
+ destinationText.innerText = targetName;
+
addInstanceFlow = new AddInstanceFlow(addDialog, spinnerDialog, detailsDialog);
@@ -46,7 +54,7 @@ redirectAlwaysButton.addEventListener("click", e => {
});
function updateNoInstanceHint() {
- findParagraphOrFail(document.body, "#no-instance").hidden =
+ noInstanceParagraph.hidden =
storageManager.storage.instances.length > 0;
}
diff --git a/static/dom.mts b/static/dom.mts
index b0ec231..aec7536 100644
--- a/static/dom.mts
+++ b/static/dom.mts
@@ -1,6 +1,13 @@
// I would've LOVED to use generics for this but unfortunately that's not possible.
// Type safety, but at what cost... >~< thanks TypeScript
+export function findSpanOrFail(on: Element, selector: string): HTMLSpanElement {
+ const element = on.querySelector(selector);
+ if (!(element instanceof HTMLSpanElement))
+ throw new Error(`${selector} isn't a span`);
+ return element;
+}
+
export function findOptionOrFail(on: Element, selector: string): HTMLOptionElement {
const element = on.querySelector(selector);
if (!(element instanceof HTMLOptionElement))
diff --git a/static/known_software.mts b/static/known_software.mts
index ab7ae27..97d6e19 100644
--- a/static/known_software.mts
+++ b/static/known_software.mts
@@ -16,4 +16,8 @@ type KnownSoftware = {
groups: Record,
}
+export function getName(knownSoftware: KnownSoftware, id: string): string | undefined {
+ return knownSoftware.software[id]?.name ?? knownSoftware.groups[id].name;
+}
+
export default await fetch("/known-software.json").then(r => r.json()) as KnownSoftware;
diff --git a/static/main.css b/static/main.css
index a1b0706..517e16f 100644
--- a/static/main.css
+++ b/static/main.css
@@ -145,6 +145,10 @@ abbr[title] {
border-bottom: solid 1px var(--transparent-black);
}
+.margin-none {
+ margin: 0;
+}
+
.margin-auto-top {
margin-top: auto;
}