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; }