setSearch(e.target.value)}
autoFocus
style={{ flex: 1, background: 'transparent', border: 'none', outline: 'none', color: 'var(--text)', fontSize: 14, fontFamily: 'inherit' }}
/>
{search && (
)}
{filtered.length} time zone{filtered.length !== 1 ? 's' : ''}
{ onChange('auto'); onClose(); }}
style={{ ...rowStyle(value === 'auto'), borderBottom: '1px solid var(--border)' }}>
Auto-detect
{detectedTz.replace(/_/g, ' ')}
{value === 'auto' &&
}
{filtered.map(z => (
{ onChange(z); onClose(); }} style={rowStyle(value === z)}>
{z.replace(/_/g, ' ')}
{value === z && }
))}
{filtered.length === 0 && (
No time zones match "{search}"
)}
);
};
const Divider = () =>
{/* Header */}
Display
Theme, colours & layout
{/* ── Mode ── */}
Mode
set('theme',v)}/>
}/>
{/* ── Accent Colour ── */}
Accent Colour
{ACCENT_THEMES.map(t => {
const active = !prefs.customAccent && (prefs.themeAccent||'aqua')===t.id;
return (
);
})}
{/* Custom accent tile */}
{(() => {
const active = !!prefs.customAccent;
const cc = prefs.customAccent || '#00d4ff';
return (
{set('customAccent',e.target.value);}}
style={{position:'absolute',inset:0,width:'100%',height:'100%',opacity:0,cursor:'pointer',border:'none',padding:0}}/>
Custom
{active &&
}
);
})()}
{/* ── Background ── */}
Background
{bgList.map(b => {
const active = bgKey===b.id;
return (
);
};
window.DisplayPreferences = DisplayPreferences;
/* ============================================================
MANAGE GROUPS SUB-SCREEN
============================================================ */
const ManageGroups = ({ onBack }) => {
const [groups, setGroups] = useState(() => {
try { return JSON.parse(localStorage.getItem(GROUPS_KEY_S) || '[]'); } catch { return []; }
});
const [newGroupName, setNewGroupName] = useState('');
const addGroup = useCallback(() => {
const name = newGroupName.trim();
if (!name) return;
setGroups(prev => {
const next = [...prev, { id: 'g_' + Date.now(), name }];
try { localStorage.setItem(GROUPS_KEY_S, JSON.stringify(next)); } catch {}
window.GROUPS = next;
if (window.API) API.patch('/api/user/preferences', { groups: next }).catch(() => {});
return next;
});
setNewGroupName('');
}, [newGroupName]);
const deleteGroup = useCallback((id) => {
setGroups(prev => {
const next = prev.filter(g => g.id !== id);
try { localStorage.setItem(GROUPS_KEY_S, JSON.stringify(next)); } catch {}
window.GROUPS = next;
if (window.API) API.patch('/api/user/preferences', { groups: next }).catch(() => {});
return next;
});
try {
const dg = JSON.parse(localStorage.getItem('velonics_device_groups') || '{}');
Object.keys(dg).forEach(k => { dg[k] = dg[k].filter(gid => gid !== id); });
localStorage.setItem('velonics_device_groups', JSON.stringify(dg));
if (window.API) API.patch('/api/user/preferences', { deviceGroups: dg }).catch(() => {});
} catch {}
}, []);
return (
Manage Groups
Create groups to organise your devices
{groups.length === 0 && (
No groups yet. Create one to organise your devices on the dashboard.
)}
{groups.map((g, i) => (
{g.name}
))}
0 ? 8 : 0}}>
setNewGroupName(e.target.value)}
onKeyDown={e => e.key === 'Enter' && addGroup()}
placeholder="Group name (e.g. Home, Farm…)"
style={{
flex: 1, background: 'rgba(255,255,255,0.05)',
border: '1px solid var(--border)', borderRadius: 10,
padding: '8px 12px', color: 'var(--text)', fontSize: 13, outline: 'none',
}}
/>
);
};
window.ManageGroups = ManageGroups;
/* ============================================================
MANAGE SHARING SUB-SCREEN
============================================================ */
const ROLE_COLORS = { viewer: 'var(--text-3)', operator: 'var(--amber)', admin: 'var(--cyan)' };
const ROLE_DESC = {
viewer: 'View live data and history only',
operator: 'Also control motor, valves, flush',
admin: 'Also change setpoints and rename',
};
const ManageSharing = ({ tanks, onBack }) => {
const owned = (tanks || []).filter(t => !t.sharedBy);
const sharedWithMe = (tanks || []).filter(t => t.sharedBy);
const [expanded, setExpanded] = useState(null); // tank.id currently expanded
const [shares, setShares] = useState({}); // { [tankId]: share[] }
const [loadingId, setLoadingId] = useState(null);
const [showSheet, setShowSheet] = useState(null); // tank.id for the share bottom sheet
const [email, setEmail] = useState('');
const [role, setRole] = useState('viewer');
const [sharing, setSharing] = useState(false);
const [shareErr, setShareErr] = useState('');
const toggle = useCallback(async (tank) => {
if (expanded === tank.id) { setExpanded(null); return; }
setExpanded(tank.id);
if (shares[tank.id] !== undefined) return;
setLoadingId(tank.id);
try {
const data = await API.get(`/api/tanks/${tank.id}/shares`);
setShares(prev => ({ ...prev, [tank.id]: data }));
} catch {}
setLoadingId(null);
}, [expanded, shares]);
const doRoleChange = async (tankId, shareId, newRole) => {
try {
await API.put(`/api/tanks/${tankId}/shares/${shareId}`, { role: newRole });
setShares(prev => ({
...prev,
[tankId]: prev[tankId].map(s => s.id === shareId ? { ...s, role: newRole } : s),
}));
} catch { window.__toast?.('Failed to update role', { kind: 'error' }); }
};
const doRevoke = async (tankId, shareId) => {
try {
await API.del(`/api/tanks/${tankId}/shares/${shareId}`);
setShares(prev => ({ ...prev, [tankId]: prev[tankId].filter(s => s.id !== shareId) }));
window.__toast?.('Access revoked', { kind: 'info' });
} catch { window.__toast?.('Failed to revoke — please try again', { kind: 'error' }); }
};
const openSheet = (tankId) => {
setShowSheet(tankId); setEmail(''); setRole('viewer'); setShareErr('');
};
const doShare = async () => {
if (!email.trim() || !showSheet) return;
setSharing(true); setShareErr('');
try {
const r = await API.post(`/api/tanks/${showSheet}/shares`, { email: email.trim(), role });
const newShare = { id: r.shareId, email: email.trim(), name: null, role, pending: r.pending };
setShares(prev => ({ ...prev, [showSheet]: [...(prev[showSheet] || []), newShare] }));
setShowSheet(null);
window.__toast?.(r.pending
? `Invite sent — ${email.trim()} will get access when they register`
: 'Device shared successfully',
{ kind: r.pending ? 'info' : 'success' });
} catch (e) {
const msg = e.message || '';
setShareErr(msg.includes('409') ? 'Already shared with this user'
: msg.includes('yourself') ? 'Cannot share with yourself'
: 'Something went wrong — please try again');
}
setSharing(false);
};
const shareCount = (tankId) => {
const list = shares[tankId];
if (!list) return 'Tap to manage';
return list.length === 0 ? 'Not shared' : `${list.length} ${list.length === 1 ? 'person' : 'people'}`;
};
return (
{/* Sticky header */}
Device Sharing
Manage who can access your devices
{/* Devices you own */}
{owned.length > 0 && (
<>
Your Devices
{owned.map((tank, i) => {
const isExpanded = expanded === tank.id;
const shareList = shares[tank.id] || [];
const isLoading = loadingId === tank.id;
return (
0 ? '1px solid var(--border)' : 'none'}}>
{/* Device row */}
toggle(tank)} style={{display: 'flex', alignItems: 'center', gap: 12, padding: '14px 16px', cursor: 'pointer'}}>
{tank.name}
{isLoading ? 'Loading…' : shareCount(tank.id)}
{/* Expanded share list */}
{isExpanded && (
{shareList.length === 0 && (
Not shared with anyone yet.
)}
{shareList.map((s, idx) => (
0 ? '1px solid rgba(255,255,255,0.04)' : 'none',
}}>
{(s.name || s.email || '?')[0].toUpperCase()}
{s.name || s.email}
{s.name &&
{s.email}
}
{s.pending &&
Invite pending
}
))}
0 ? '1px solid rgba(255,255,255,0.04)' : 'none'}}>
)}
)}
{/* Shared with you */}
{sharedWithMe.length > 0 && (
<>
Shared With You
{sharedWithMe.map((tank, i) => (
0 ? '1px solid var(--border)' : 'none'}}>
{tank.name}
Shared by {tank.sharedBy?.name || tank.sharedBy?.email}
{tank.myRole}
)}
{owned.length === 0 && sharedWithMe.length === 0 && (
No devices found. Add a device first to start sharing.
)}
{/* Share bottom sheet */}
{showSheet && ReactDOM.createPortal(
{ if (e.target === e.currentTarget) setShowSheet(null); }}>
Share Device
{ setEmail(e.target.value); setShareErr(''); }}
placeholder="user@example.com"
style={{
width: '100%', boxSizing: 'border-box', padding: '11px 14px', borderRadius: 12,
background: 'rgba(255,255,255,0.06)',
border: `1px solid ${shareErr ? 'var(--red)' : 'var(--border)'}`,
color: 'var(--text)', fontSize: 14, outline: 'none', marginBottom: 4,
}}/>
{shareErr &&
{shareErr}
}
Role
{['viewer', 'operator', 'admin'].map(r => (
))}
,
document.getElementById('modal-root')
)}
);
};
window.ManageSharing = ManageSharing;