FeDirect/static/crossroad.mts

import { initializeAddInstanceFlow } from "./add_instance_flow.mjs";
import { findButtonOrFail, findDialogOrFail, findFormOrFail, findInputOrFail } from "./dom.mjs";
import knownSoftware from "./known_software.mjs";
import storageManager from "./storage_manager.mjs";

const radioButtonName = "instanceSelect";

export function getMainDialog(): HTMLDialogElement {
    return document.getElementById('mainDialog') as HTMLDialogElement;
}

const detailsDialog = findDialogOrFail(document.body, "#instanceDetails");
const addDialog = findDialogOrFail(document.body, "#addInstance");
const instanceSelectForm = findFormOrFail(document.body, "#instanceSelectForm");
const redirectButton = findButtonOrFail(document.body, "#redirect");

export const {
    showAddInstanceDialog,
    hideAddInstanceDialog
} = initializeAddInstanceFlow(detailsDialog, addDialog);

function createInstanceSelectOptions() {
    instanceSelectForm.replaceChildren(); // Erase all child nodes
    for (const instance of storageManager.storage.instances) {
        const div = document.createElement("div");
        div.setAttribute("x-option", instance.origin);
        const radio = document.createElement("input");
        radio.id = instance.origin;
        radio.value = instance.origin;
        radio.type = "radio";
        radio.name = radioButtonName;
        const label = document.createElement("label");
        label.htmlFor = instance.origin;
        label.innerText = instance.name + " ";
        if (instance.iconURL) {
            const img = new Image();
            img.src = instance.iconURL;
            img.alt = `${instance.name} icon`;
            img.className = "inlineIcon";
            label.append(img, " ");
        }
        const small = document.createElement("small");
        const softwareName = knownSoftware.software[instance.software].name;
        small.innerText = `(${softwareName})`;
        label.appendChild(small);
        div.appendChild(radio);
        div.appendChild(label);
        instanceSelectForm.appendChild(div);
    }
    const firstInput = instanceSelectForm.querySelector("input");
    if (firstInput) {
        firstInput.checked = true;
        redirectButton.disabled = false;
    } else {
        redirectButton.disabled = true;
    }
}

createInstanceSelectOptions();
storageManager.addSaveCallback(createInstanceSelectOptions);

function redirect() {
    // Can be assumed to not fail because the button is disabled if there are no options and the first one is selected by default
    const option = findInputOrFail(instanceSelectForm, `input[name="${radioButtonName}"]:checked`).value;
    const url = URL.parse(option)!;
    const currentURL = URL.parse(location.href)!;
    url.pathname = currentURL.pathname.replace(/\/.*?\//, "/");
    location.href = url.toString();
}

redirectButton.addEventListener("click", e => redirect());