FeDirect/static/confirm_instance_details.mts

// This file handles the "Confirm instance details" dialog

import { findButtonOrFail, findFormOrFail, findImageOrFail, findInputOrFail, findSelectOrFail } from "./dom.mjs";
import { resize } from "./image.mjs";
import knownSoftware from "./known_software.mjs";

const blankImage = "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==";

export function initializeInstanceDetailsDialog(
    dialog: HTMLDialogElement,
    callback: (
        instanceName: string,
        instanceHost: string,
        instanceHostSecure: boolean,
        instanceSoftware: string,
        instanceIcon: string | null
    ) => void
): {
    showInstanceDetailsDialog: () => void,
    hideInstanceDetailsDialog: () => void,
    populateInstanceDetailsDialog: (
        instanceNameValue: string,
        instanceHostValue: string,
        instanceHostSecureValue: boolean,
        instanceSoftwareValue: string,
        instanceIconValue: string | null
    ) => void
} {
    const showInstanceDetailsDialog = () => dialog.showModal();
    const hideInstanceDetailsDialog = () => dialog.close();

    const form = findFormOrFail(dialog, ".instanceDetailsForm");
    const instanceName = findInputOrFail(form, "#instanceName");
    const instanceHost = findInputOrFail(form, "#instanceHost");
    const instanceHostSecure = findInputOrFail(form, "#instanceHostSecure");
    const instanceSoftware = findSelectOrFail(form, "#instanceSoftware");
    const instanceIcon = findImageOrFail(form, "#instanceIcon");
    const closeButton = findButtonOrFail(form, ".close");

    for (const [name, software] of Object.entries(knownSoftware.software)) {
        const option = new Option(software.name, name);
        instanceSoftware.appendChild(option);
    }

    instanceIcon.src = blankImage;

    const populateInstanceDetailsDialog = (
        instanceNameValue: string,
        instanceHostValue: string,
        instanceHostSecureValue: boolean,
        instanceSoftwareValue: string,
        instanceIconValue: string | null
    ) => {
        instanceName.value = instanceNameValue;
        instanceHost.value = instanceHostValue;
        instanceHostSecure.checked = instanceHostSecureValue;
        instanceSoftware.value = instanceSoftwareValue;
        instanceIcon.src = instanceIconValue === null ? blankImage : `/api/proxy/${encodeURIComponent(instanceIconValue)}`;
    };

    form.addEventListener("submit", e => {
        let image: string | null = null;
        if (instanceIcon.src !== blankImage) {
            try {
                image = resize(instanceIcon);
            } catch { }
        }
        callback(
            instanceName.value,
            instanceHost.value,
            instanceHostSecure.checked,
            instanceSoftware.value,
            image
        );
        form.reset();
    });

    closeButton.addEventListener("click", e => {
        instanceIcon.src = blankImage;
        hideInstanceDetailsDialog();
    });

    return {
        showInstanceDetailsDialog,
        hideInstanceDetailsDialog,
        populateInstanceDetailsDialog
    };
}