@pmouli/isy-matter-server/bin/web/src/App.js

Service to expose an ISY device as a Matter Border router

import axios from 'axios';
import React, { useEffect, useState } from 'react';
function App() {
    const [config, setConfig] = useState({ isyConfig: {}, matterConfig: {} });
    useEffect(() => {
        // Fetch the current configuration
        axios.get('/api/config').then((response) => setConfig(response.data));
    }, []);
    const handleChange = (e, section) => {
        const { name, value } = e.target;
        setConfig((prev) => ({
            ...prev,
            [section]: { ...prev[section], [name]: section === 'matterConfig' ? Number(value) : value }
        }));
    };
    const handleSubmit = (e) => {
        e.preventDefault();
        axios.post('/api/config', config).then(() => alert('Configuration updated!'));
    };
    return (React.createElement("div", null,
        React.createElement("h1", null, "Configuration Editor"),
        React.createElement("form", { onSubmit: handleSubmit },
            React.createElement("h2", null, "ISY Configuration"),
            React.createElement("label", null,
                "Host URL:",
                React.createElement("input", { type: "text", name: "host", value: config.isyConfig.host || '', onChange: (e) => handleChange(e, 'isyConfig') })),
            React.createElement("br", null),
            React.createElement("label", null,
                "Username:",
                React.createElement("input", { type: "text", name: "username", value: config.isyConfig.username || '', onChange: (e) => handleChange(e, 'isyConfig') })),
            React.createElement("br", null),
            React.createElement("label", null,
                "Password:",
                React.createElement("input", { type: "password", name: "password", value: config.isyConfig.password || '', onChange: (e) => handleChange(e, 'isyConfig') })),
            React.createElement("br", null),
            React.createElement("h2", null, "Matter Configuration"),
            React.createElement("label", null,
                "Passcode:",
                React.createElement("input", { type: "number", name: "passcode", value: config.matterConfig.passcode || '', onChange: (e) => handleChange(e, 'matterConfig') })),
            React.createElement("br", null),
            React.createElement("label", null,
                "Discriminator:",
                React.createElement("input", { type: "number", name: "discriminator", value: config.matterConfig.discriminator || '', onChange: (e) => handleChange(e, 'matterConfig') })),
            React.createElement("br", null),
            React.createElement("label", null,
                "Port:",
                React.createElement("input", { type: "number", name: "port", value: config.matterConfig.port || '', onChange: (e) => handleChange(e, 'matterConfig') })),
            React.createElement("br", null),
            React.createElement("button", { type: "submit" }, "Update Configuration"))));
}
App();
export default App;
//# sourceMappingURL=App.js.map