// settings-v2.jsx — Ustawienia / Settings screen
// 6 sections: Ogólne · Urządzenia · Użytkownicy · Taryfy · Cele pracy · System
// De-emoji: LI() icons throughout, no emoji glyphs
// ── Destructive button hook (2-step arm/fire) ─────────────────────────────
function useArm() {
const [armed, setArmed] = React.useState(false);
const arm = () => { setArmed(true); setTimeout(() => setArmed(false), 3000); };
const fire = () => { setArmed(false); };
return { armed, arm, fire };
}
function DestructiveBtn({ label, confirmLabel, onConfirm, style }) {
const { armed, arm, fire } = useArm();
const handleClick = () => {
if (!armed) { arm(); return; }
fire(); onConfirm?.();
};
return (
);
}
// ── Settings row primitives ────────────────────────────────────────────────
function SettingsSection({ title, anchor, children }) {
return (
);
}
function SettingsCard({ children, style }) {
return (
{children}
);
}
function SettingsRow({ label, desc, children, last }) {
return (
);
}
function SettingsToggle({ on, onChange }) {
return (
);
}
function SettingsSelect({ value, options, onChange, style }) {
return (
);
}
function ReadOnlyField({ value, style }) {
return (
{value}
);
}
// ── Modal wrapper ─────────────────────────────────────────────────────────
function Modal({ title, onClose, children, width = 520 }) {
return (
e.stopPropagation()}>
{children}
);
}
// ── Main component ─────────────────────────────────────────────────────────
function V2Settings({ safeMode, setSafeMode }) {
const { t, locale, setLocale } = useLocale();
const [currency, setCurrency] = React.useState('PLN');
const [dso, setDso] = React.useState('stoen');
const [tariff, setTariff] = React.useState('pstryk');
const [telemetry, setTelemetry] = React.useState('anonymous');
const [batteryLive, setBatteryLive] = React.useState(false);
const [deviceModal, setDeviceModal] = React.useState(false);
const [userModal, setUserModal] = React.useState(false);
const [activeDeviceType, setActiveDeviceType] = React.useState(null);
const [users, setUsers] = React.useState([
{ id: 1, name: 'diego', role: 'admin', last: '2 min temu' },
{ id: 2, name: 'anna', role: 'viewer', last: '3 godz. temu' },
]);
const DEVICES = [
{ id: 1, type: 'inverter', name: 'Deye SUN-12K-SG04LP3-EU', ip: '192.168.1.52', status: 'online' },
{ id: 2, type: 'charger', name: 'EO Charging EM301', ip: '192.168.1.61', status: 'online' },
{ id: 3, type: 'meter', name: 'Shelly Pro 3EM', ip: '192.168.1.55', status: 'online' },
{ id: 4, type: 'relay', name: 'Shelly 1PM (SG-Ready)', ip: '192.168.1.56', status: 'online' },
];
const DEVICE_ICON = { inverter: 'sun', charger: 'zap', meter: 'bar-chart-2', relay: 'plug' };
const DSO_OPTIONS = [
{ value: 'stoen', label: 'Stoen Operator (Warszawa) · 16.39 gr/kWh' },
{ value: 'energa', label: 'Energa-Operator (Gdańsk) · 14.82 gr/kWh' },
{ value: 'tauron', label: 'Tauron Dystrybucja (Kraków) · 13.44 gr/kWh' },
{ value: 'enea', label: 'Enea Operator (Poznań) · 12.90 gr/kWh' },
{ value: 'pge', label: 'PGE Dystrybucja (Lublin) · 15.20 gr/kWh' },
];
const revokeUser = (id) => setUsers(u => u.filter(x => x.id !== id));
return (
{/* ── 1. Ogólne ── */}
{['pl','en'].map(l => (
))}
{/* ── 2. Urządzenia ── */}
{DEVICES.map((d, i) => (
{d.status === 'online' ? t('settings.online') : t('settings.offline')}
))}
setDeviceModal(true)} style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
{t('settings.addDevice')}
{/* ── 3. Użytkownicy ── */}
{users.map((u, i) => (
{u.name}
{u.role}
{t('settings.lastSeen')}: {u.last}
{u.role !== 'admin' && (
revokeUser(u.id)}/>
)}
))}
setUserModal(true)} style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
{t('settings.addViewer')}
{/* ── 4. Taryfy ── */}
{/* ── 5. Cele pracy ── */}
{/* Safe mode — big danger card */}
{t('settings.safeMode')}
{t('settings.safeModeDesc')}
{batteryLive ? t('settings.active') : t('settings.locked')}
{/* ── 6. System ── */}
{t('settings.backupBtn')}
{t('settings.restoreBtn')}
{/* Version humor footer */}
{t('settings.versionFooter')}
{/* Add device modal */}
{deviceModal && (
{ setDeviceModal(false); setActiveDeviceType(null); }}
t={t}
/>
)}
{/* Add viewer modal */}
{userModal && (
setUserModal(false)} t={t}/>
)}
{t('settings.pickDeviceType')}
{DEVICE_TYPES.map(dt => (
))}
) : (
setActiveType(null)} onClose={onClose}/>
)}
);
}
function ShellyForm({ t, onBack, onClose }) {
const [ip, setIp] = React.useState('192.168.1.');
const [name, setName] = React.useState('');
return (
<>
setName(e.target.value)} placeholder="Shelly Pro 3EM"
style={{ width: '100%', background: T.raised, border: `1px solid ${T.border}`, borderRadius: 8, padding: '9px 12px', color: T.textPrimary, fontFamily: T.fontMono, fontSize: 13 }}/>
setIp(e.target.value)}
style={{ width: '100%', background: T.raised, border: `1px solid ${T.border}`, borderRadius: 8, padding: '9px 12px', color: T.textPrimary, fontFamily: T.fontMono, fontSize: 13 }}/>
{t('settings.addDeviceConfirm')}
{t('settings.cancel')}
{t('settings.readOnlyNote')}
);
}
function FormField({ label, children }) {
return (
);
}
// ── Add Viewer Modal ────────────────────────────────────────────────────────
function AddViewerModal({ onClose, t }) {
const [uname, setUname] = React.useState('');
return (
);
}
Object.assign(window, {
V2Settings, SettingsSection, SettingsCard, SettingsRow, SettingsToggle,
SettingsSelect, ReadOnlyField, Modal, FormField,
DestructiveBtn, AddDeviceModal, AddViewerModal, ShellyForm,
});