path: root/static/structured-editor.js

/* jshint esversion: 2024, module: true */

/**
 * Structured Editor for systemd-networkd configuration
 * @class StructuredEditor
 */
class StructuredEditor {
	constructor(container) {
		this.container = container;
		this.config = null;
		this.currentFile = "";
		this.systemdNetworkModule = null;
	}

	/**
	 * Load configuration from text
	 * @param {string} configText - Configuration text
	 * @param {string} filename - File name
	 */
	async loadConfiguration(configText, filename) {
		// Dynamically import the systemd-network module
		if (!this.systemdNetworkModule) {
			this.systemdNetworkModule = await import("./systemd-network.js");
		}

		const { NetworkConfiguration } = this.systemdNetworkModule;
		this.config = NetworkConfiguration.fromSystemdConfiguration(configText);
		this.currentFile = filename;
		this.render();
	}

	/**
	 * Render the structured editor
	 */
	render() {
		if (!this.config) {
			this.container.innerHTML =
				'<div class="error-message">No configuration loaded</div>';
			return;
		}

		this.container.innerHTML = this._createEditorHTML();
		this._attachEventListeners();
	}

	/**
	 * Create editor HTML structure
	 * @private
	 * @returns {string}
	 */
	_createEditorHTML() {
		return `
            <div class="structured-editor">
                <div class="editor-sections">
                    ${this._createMatchSection()}
                    ${this._createLinkSection()}
                    ${this._createNetworkSection()}
                    ${this._createDHCPSection()}
                    ${this._createAddressSections()}
                    ${this._createRouteSections()}
                </div>
                <div class="editor-actions">
                    <button class="button secondary" id="addAddressSection">Add Address</button>
                    <button class="button secondary" id="addRouteSection">Add Route</button>
                </div>
            </div>
        `;
	}

	_createMatchSection() {
		const match = this.config.Match;
		return `
            <div class="config-section">
                <h4>[Match]</h4>
                <div class="config-table">
                    ${this._createInputRow("MACAddress", match.MACAddress?.join(" ") || "", "Space-separated MAC addresses")}
                    ${this._createInputRow("Name", match.Name?.join(" ") || "", "Interface names")}
                    ${this._createInputRow("Driver", match.Driver?.join(" ") || "", "Driver names")}
                    ${this._createInputRow("Type", match.Type?.join(" ") || "", "Interface types")}
                </div>
            </div>
        `;
	}

	_createLinkSection() {
		const link = this.config.Link;
		return `
            <div class="config-section">
                <h4>[Link]</h4>
                <div class="config-table">
                    ${this._createInputRow("MACAddress", link.MACAddress || "", "Hardware address")}
                    ${this._createInputRow("MTUBytes", link.MTUBytes || "", "Maximum transmission unit")}
                    ${this._createSelectRow("WakeOnLan", link.WakeOnLan || "", ["", "phy", "unicast", "broadcast", "arp", "magic"], "Wake-on-LAN")}
                </div>
            </div>
        `;
	}

	_createNetworkSection() {
		const network = this.config.Network;
		return `
            <div class="config-section">
                <h4>[Network]</h4>
                <div class="config-table">
                    ${this._createInputRow("Description", network.Description || "", "Interface description")}
                    ${this._createSelectRow("DHCP", network.DHCP?.join(" ") || "", ["", "yes", "no", "ipv4", "ipv6"], "DHCP client")}
                    ${this._createInputRow("DNS", network.DNS?.join(" ") || "", "DNS servers")}
                    ${this._createInputRow("NTP", network.NTP?.join(" ") || "", "NTP servers")}
                    ${this._createSelectRow("IPv6PrivacyExtensions", network.IPv6PrivacyExtensions || "", ["", "yes", "no", "prefer-public"], "IPv6 privacy extensions")}
                </div>
            </div>
        `;
	}

	_createDHCPSection() {
		const dhcp = this.config.DHCP;
		return `
            <div class="config-section">
                <h4>[DHCP]</h4>
                <div class="config-table">
                    ${this._createSelectRow("UseDNS", dhcp.UseDNS || "", ["", "yes", "no"], "Use DNS from DHCP")}
                    ${this._createSelectRow("UseNTP", dhcp.UseNTP || "", ["", "yes", "no"], "Use NTP from DHCP")}
                    ${this._createInputRow("RouteMetric", dhcp.RouteMetric || "", "Route metric")}
                </div>
            </div>
        `;
	}

	_createAddressSections() {
		if (!this.config.Address || this.config.Address.length === 0) {
			return '<div class="config-section"><h4>[Address]</h4><p class="no-items">No address sections</p></div>';
		}

		return this.config.Address.map(
			(addr, index) => `
            <div class="config-section">
                <h4>[Address] ${index > 0 ? `#${index + 1}` : ""}</h4>
                <div class="config-table">
                    ${this._createInputRow("Address", addr.Address || "", "IP address with prefix")}
                    ${this._createInputRow("Peer", addr.Peer || "", "Peer address")}
                    <button class="button small warning remove-section" data-type="address" data-index="${index}">Remove</button>
                </div>
            </div>
        `,
		).join("");
	}

	_createRouteSections() {
		if (!this.config.Route || this.config.Route.length === 0) {
			return '<div class="config-section"><h4>[Route]</h4><p class="no-items">No route sections</p></div>';
		}

		return this.config.Route.map(
			(route, index) => `
            <div class="config-section">
                <h4>[Route] ${index > 0 ? `#${index + 1}` : ""}</h4>
                <div class="config-table">
                    ${this._createInputRow("Gateway", route.Gateway || "", "Gateway address")}
                    ${this._createInputRow("Destination", route.Destination || "", "Destination prefix")}
                    ${this._createInputRow("Metric", route.Metric || "", "Route metric")}
                    <button class="button small warning remove-section" data-type="route" data-index="${index}">Remove</button>
                </div>
            </div>
        `,
		).join("");
	}

	_createInputRow(key, value, description) {
		return `
            <div class="config-row">
                <label class="config-label" title="${description}">
                    <abbr title="${description}">${key}</abbr>:
                </label>
                <input type="text"
                       class="config-input"
                       data-section="${this._getCurrentSection()}"
                       data-key="${key}"
                       value="${value}"
                       placeholder="${description}">
            </div>
        `;
	}

	_createSelectRow(key, value, options, description) {
		const optionsHTML = options
			.map(
				(opt) =>
					`<option value="${opt}" ${opt === value ? "selected" : ""}>${opt || "(not set)"}</option>`,
			)
			.join("");

		return `
            <div class="config-row">
                <label class="config-label" title="${description}">
                    <abbr title="${description}">${key}</abbr>:
                </label>
                <select class="config-select" data-section="${this._getCurrentSection()}" data-key="${key}">
                    ${optionsHTML}
                </select>
            </div>
        `;
	}

	/**
	 * Get current section name for event handling
	 * @private
	 * @returns {string}
	 */
	_getCurrentSection() {
		// This is a simplified implementation - you might want to track the current section more precisely
		return "network";
	}

	/**
	 * Attach event listeners to the editor
	 * @private
	 */
	_attachEventListeners() {
		// Input changes
		this.container.querySelectorAll(".config-input").forEach((input) => {
			input.addEventListener("input", (e) => this._onInputChange(e));
		});

		// Select changes
		this.container.querySelectorAll(".config-select").forEach((select) => {
			select.addEventListener("change", (e) => this._onSelectChange(e));
		});

		// Add sections
		this.container
			.querySelector("#addAddressSection")
			?.addEventListener("click", () => {
				this._addAddressSection();
			});

		this.container
			.querySelector("#addRouteSection")
			?.addEventListener("click", () => {
				this._addRouteSection();
			});

		// Remove sections
		this.container.querySelectorAll(".remove-section").forEach((btn) => {
			btn.addEventListener("click", (e) => this._onRemoveSection(e));
		});
	}

	/**
	 * Handle input changes
	 * @private
	 * @param {Event} event
	 */
	_onInputChange(event) {
		const input = event.target;
		const section = input.dataset.section;
		const key = input.dataset.key;
		const value = input.value;

		this._updateConfigValue(section, key, value);
	}

	/**
	 * Handle select changes
	 * @private
	 * @param {Event} event
	 */
	_onSelectChange(event) {
		const select = event.target;
		const section = select.dataset.section;
		const key = select.dataset.key;
		const value = select.value;

		this._updateConfigValue(section, key, value);
	}

	/**
	 * Update configuration value
	 * @private
	 * @param {string} section - Section name
	 * @param {string} key - Key name
	 * @param {string} value - Value
	 */
	_updateConfigValue(section, key, value) {
		if (!this.config) return;

		// Simplified implementation - you'll want to expand this based on your systemd-network.js structure
		console.log(`Update ${section}.${key} = ${value}`);

		// Example update logic - you'll need to implement this based on your actual data structure
		switch (section) {
			case "match":
				if (["MACAddress", "Name", "Driver", "Type"].includes(key)) {
					this.config.Match[key] = value.split(" ").filter((v) => v.trim());
				} else {
					this.config.Match[key] = value;
				}
				break;
			case "link":
				this.config.Link[key] = value;
				break;
			case "network":
				if (["DNS", "NTP", "DHCP", "Domains", "IPForward"].includes(key)) {
					this.config.Network[key] = value.split(" ").filter((v) => v.trim());
				} else {
					this.config.Network[key] = value;
				}
				break;
			case "dhcp":
				this.config.DHCP[key] = value;
				break;
		}
	}

	/**
	 * Add a new address section
	 * @private
	 */
	async _addAddressSection() {
		if (!this.systemdNetworkModule) {
			this.systemdNetworkModule = await import("./systemd-network.js");
		}

		const { AddressSection } = this.systemdNetworkModule;
		this.config.Address.push(new AddressSection());
		this.render();
	}

	/**
	 * Add a new route section
	 * @private
	 */
	async _addRouteSection() {
		if (!this.systemdNetworkModule) {
			this.systemdNetworkModule = await import("./systemd-network.js");
		}

		const { RouteSection } = this.systemdNetworkModule;
		this.config.Route.push(new RouteSection());
		this.render();
	}

	/**
	 * Remove a section
	 * @private
	 * @param {Event} event
	 */
	_onRemoveSection(event) {
		const btn = event.target;
		const type = btn.dataset.type;
		const index = parseInt(btn.dataset.index);

		if (type === "address" && this.config.Address) {
			this.config.Address.splice(index, 1);
		} else if (type === "route" && this.config.Route) {
			this.config.Route.splice(index, 1);
		}

		this.render();
	}

	/**
	 * Get current configuration as text
	 * @returns {string}
	 */
	getConfigurationText() {
		return this.config ? this.config.toSystemdConfiguration() : "";
	}

	/**
	 * Get current configuration object
	 * @returns {Object|null}
	 */
	getConfiguration() {
		return this.config;
	}
}

export { StructuredEditor };