sync rules
This commit is contained in:
sebseb7
@@ -104,8 +104,8 @@ function AppContent() {
|
||||
{/* Dashboard is always visible to everyone */}
|
||||
<Dashboard />
|
||||
|
||||
{/* Rule Manager only visible to logged-in admins */}
|
||||
{isAdmin && <RuleManager />}
|
||||
{/* Rule Manager visible to everyone (guests read-only, admins can edit) */}
|
||||
<RuleManager />
|
||||
</Container>
|
||||
|
||||
{/* Login dialog - shown on demand */}
|
||||
|
||||
@@ -13,70 +13,97 @@ import {
|
||||
const EditIcon = () => <span style={{ fontSize: '1rem' }}>✏️</span>;
|
||||
const DeleteIcon = () => <span style={{ fontSize: '1rem' }}>🗑️</span>;
|
||||
|
||||
const dayLabels = {
|
||||
mon: 'M', tue: 'T', wed: 'W', thu: 'T', fri: 'F', sat: 'S', sun: 'S'
|
||||
};
|
||||
|
||||
const dayLabels = { mon: 'M', tue: 'T', wed: 'W', thu: 'T', fri: 'F', sat: 'S', sun: 'S' };
|
||||
const dayOrder = ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun'];
|
||||
|
||||
function TriggerSummary({ trigger }) {
|
||||
if (trigger.type === 'time') {
|
||||
const parts = [];
|
||||
|
||||
// Time range
|
||||
if (trigger.timeRange) {
|
||||
const { start, end, days } = trigger.timeRange;
|
||||
const isEveryDay = days?.length === 7;
|
||||
const isWeekdays = days?.length === 5 && ['mon', 'tue', 'wed', 'thu', 'fri'].every(d => days.includes(d));
|
||||
let dayText = isEveryDay ? 'daily' : isWeekdays ? 'weekdays' :
|
||||
dayOrder.filter(d => days?.includes(d)).map(d => dayLabels[d]).join('');
|
||||
|
||||
parts.push(
|
||||
<Box key="time" sx={{ display: 'flex', alignItems: 'center', gap: 0.5, flexWrap: 'wrap' }}>
|
||||
<Chip label="⏰" size="small" sx={{ bgcolor: '#83a598', color: '#282828', fontWeight: 600, minWidth: 32 }} />
|
||||
<Typography variant="body2">
|
||||
{start}–{end} ({dayText})
|
||||
</Typography>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
// Sensor conditions
|
||||
if (trigger.sensors && trigger.sensors.length > 0) {
|
||||
const logic = trigger.sensorLogic || 'and';
|
||||
const sensorText = trigger.sensors.map((s, i) => (
|
||||
<span key={i}>
|
||||
{i > 0 && <Chip label={logic.toUpperCase()} size="small" sx={{ mx: 0.5, bgcolor: logic === 'and' ? '#8ec07c' : '#fabd2f', color: '#282828', fontSize: '0.65rem' }} />}
|
||||
<strong>{s.sensorLabel || s.sensor}</strong> {s.operator} {s.value}
|
||||
</span>
|
||||
));
|
||||
|
||||
parts.push(
|
||||
<Box key="sensor" sx={{ display: 'flex', alignItems: 'center', gap: 0.5, flexWrap: 'wrap' }}>
|
||||
<Chip label="📊" size="small" sx={{ bgcolor: '#fabd2f', color: '#282828', fontWeight: 600, minWidth: 32 }} />
|
||||
<Typography variant="body2" component="span">
|
||||
{sensorText}
|
||||
</Typography>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
// Legacy support for old trigger format
|
||||
if (trigger.type === 'time' && !trigger.timeRange) {
|
||||
const days = trigger.days || [];
|
||||
const isEveryDay = days.length === 7;
|
||||
const isWeekdays = days.length === 5 &&
|
||||
['mon', 'tue', 'wed', 'thu', 'fri'].every(d => days.includes(d));
|
||||
const isWeekdays = days.length === 5 && ['mon', 'tue', 'wed', 'thu', 'fri'].every(d => days.includes(d));
|
||||
let dayText = isEveryDay ? 'daily' : isWeekdays ? 'weekdays' :
|
||||
dayOrder.filter(d => days.includes(d)).map(d => dayLabels[d]).join(' ');
|
||||
|
||||
let dayText = isEveryDay ? 'Every day' :
|
||||
isWeekdays ? 'Weekdays' :
|
||||
dayOrder.filter(d => days.includes(d)).map(d => dayLabels[d]).join(' ');
|
||||
parts.push(
|
||||
<Box key="legacy-time" sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
|
||||
<Chip label="⏰" size="small" sx={{ bgcolor: '#83a598', color: '#282828', fontWeight: 600 }} />
|
||||
<Typography variant="body2">At {trigger.time} ({dayText})</Typography>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
<Chip
|
||||
label="⏰ Time"
|
||||
size="small"
|
||||
sx={{ bgcolor: '#83a598', color: '#282828', fontWeight: 600 }}
|
||||
/>
|
||||
if (trigger.type === 'sensor' && !trigger.sensors) {
|
||||
parts.push(
|
||||
<Box key="legacy-sensor" sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
|
||||
<Chip label="📊" size="small" sx={{ bgcolor: '#fabd2f', color: '#282828', fontWeight: 600 }} />
|
||||
<Typography variant="body2">
|
||||
At <strong>{trigger.time}</strong> • {dayText}
|
||||
{trigger.sensorLabel || trigger.sensor} {trigger.operator} {trigger.value}
|
||||
</Typography>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
if (trigger.type === 'sensor') {
|
||||
return (
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
<Chip
|
||||
label="📊 Sensor"
|
||||
size="small"
|
||||
sx={{ bgcolor: '#fabd2f', color: '#282828', fontWeight: 600 }}
|
||||
/>
|
||||
<Typography variant="body2">
|
||||
When <strong>{trigger.sensor}</strong> {trigger.operator} <strong>{trigger.value}</strong>
|
||||
</Typography>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
if (parts.length === 0) return null;
|
||||
|
||||
return null;
|
||||
return (
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.5 }}>
|
||||
{parts}
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
function ActionSummary({ action }) {
|
||||
if (action.type === 'toggle') {
|
||||
return (
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
|
||||
<Chip
|
||||
label={action.state ? '🔛 ON' : '🔴 OFF'}
|
||||
label={action.state ? '🔛' : '🔴'}
|
||||
size="small"
|
||||
sx={{
|
||||
bgcolor: action.state ? '#b8bb26' : '#fb4934',
|
||||
color: '#282828',
|
||||
fontWeight: 600
|
||||
}}
|
||||
sx={{ bgcolor: action.state ? '#b8bb26' : '#fb4934', color: '#282828', fontWeight: 600, minWidth: 32 }}
|
||||
/>
|
||||
<Typography variant="body2">
|
||||
Turn <strong>{action.target}</strong> {action.state ? 'on' : 'off'}
|
||||
→ <strong>{action.targetLabel || action.target}</strong> {action.state ? 'ON' : 'OFF'}
|
||||
</Typography>
|
||||
</Box>
|
||||
);
|
||||
@@ -84,14 +111,10 @@ function ActionSummary({ action }) {
|
||||
|
||||
if (action.type === 'keepOn') {
|
||||
return (
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
<Chip
|
||||
label="⏱️ Timed"
|
||||
size="small"
|
||||
sx={{ bgcolor: '#d3869b', color: '#282828', fontWeight: 600 }}
|
||||
/>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
|
||||
<Chip label="⏱️" size="small" sx={{ bgcolor: '#d3869b', color: '#282828', fontWeight: 600, minWidth: 32 }} />
|
||||
<Typography variant="body2">
|
||||
Keep <strong>{action.target}</strong> on for <strong>{action.duration} min</strong>
|
||||
→ <strong>{action.targetLabel || action.target}</strong> ON for {action.duration}m
|
||||
</Typography>
|
||||
</Box>
|
||||
);
|
||||
@@ -100,7 +123,7 @@ function ActionSummary({ action }) {
|
||||
return null;
|
||||
}
|
||||
|
||||
export default function RuleCard({ rule, onEdit, onDelete, onToggle }) {
|
||||
export default function RuleCard({ rule, onEdit, onDelete, onToggle, readOnly }) {
|
||||
return (
|
||||
<Paper
|
||||
sx={{
|
||||
@@ -110,7 +133,7 @@ export default function RuleCard({ rule, onEdit, onDelete, onToggle }) {
|
||||
border: '1px solid',
|
||||
borderColor: rule.enabled ? '#504945' : '#3c3836',
|
||||
'&:hover': {
|
||||
transform: 'translateX(4px)',
|
||||
transform: readOnly ? 'none' : 'translateX(4px)',
|
||||
borderColor: rule.enabled ? '#8ec07c' : '#504945'
|
||||
}
|
||||
}}
|
||||
@@ -122,39 +145,31 @@ export default function RuleCard({ rule, onEdit, onDelete, onToggle }) {
|
||||
{rule.name}
|
||||
</Typography>
|
||||
{!rule.enabled && (
|
||||
<Chip
|
||||
label="Disabled"
|
||||
size="small"
|
||||
sx={{ bgcolor: '#504945', fontSize: '0.7rem' }}
|
||||
/>
|
||||
<Chip label="Disabled" size="small" sx={{ bgcolor: '#504945', fontSize: '0.7rem' }} />
|
||||
)}
|
||||
</Box>
|
||||
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.5 }}>
|
||||
<TriggerSummary trigger={rule.trigger} />
|
||||
<ActionSummary action={rule.action} />
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
<Tooltip title={rule.enabled ? 'Disable rule' : 'Enable rule'}>
|
||||
<Switch
|
||||
checked={rule.enabled}
|
||||
onChange={onToggle}
|
||||
color="primary"
|
||||
/>
|
||||
</Tooltip>
|
||||
<Tooltip title="Edit rule">
|
||||
<IconButton onClick={onEdit} size="small">
|
||||
<EditIcon />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Tooltip title="Delete rule">
|
||||
<IconButton onClick={onDelete} size="small" sx={{ '&:hover': { color: '#fb4934' } }}>
|
||||
<DeleteIcon />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</Box>
|
||||
{!readOnly && (
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
<Tooltip title={rule.enabled ? 'Disable' : 'Enable'}>
|
||||
<Switch checked={rule.enabled} onChange={onToggle} color="primary" size="small" />
|
||||
</Tooltip>
|
||||
<Tooltip title="Edit">
|
||||
<IconButton onClick={onEdit} size="small"><EditIcon /></IconButton>
|
||||
</Tooltip>
|
||||
<Tooltip title="Delete">
|
||||
<IconButton onClick={onDelete} size="small" sx={{ '&:hover': { color: '#fb4934' } }}>
|
||||
<DeleteIcon />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
</Paper>
|
||||
);
|
||||
|
||||
@@ -17,7 +17,11 @@ import {
|
||||
Divider,
|
||||
Slider,
|
||||
Switch,
|
||||
FormControlLabel
|
||||
FormControlLabel,
|
||||
CircularProgress,
|
||||
IconButton,
|
||||
Paper,
|
||||
Chip
|
||||
} from '@mui/material';
|
||||
|
||||
const DAYS = [
|
||||
@@ -30,109 +34,189 @@ const DAYS = [
|
||||
{ key: 'sun', label: 'Sun' }
|
||||
];
|
||||
|
||||
const SENSORS = ['Temperature', 'Humidity', 'CO2', 'VPD', 'Light Level'];
|
||||
const OPERATORS = [
|
||||
{ value: '>', label: 'Greater than (>)' },
|
||||
{ value: '<', label: 'Less than (<)' },
|
||||
{ value: '>=', label: 'Greater or equal (≥)' },
|
||||
{ value: '<=', label: 'Less or equal (≤)' },
|
||||
{ value: '==', label: 'Equal to (=)' }
|
||||
{ value: '>', label: '>' },
|
||||
{ value: '<', label: '<' },
|
||||
{ value: '>=', label: '≥' },
|
||||
{ value: '<=', label: '≤' },
|
||||
{ value: '==', label: '=' }
|
||||
];
|
||||
|
||||
const OUTPUTS = [
|
||||
'Workshop Light',
|
||||
'Exhaust Fan',
|
||||
'Heater',
|
||||
'Humidifier',
|
||||
'All Outlets',
|
||||
'Grow Light',
|
||||
'Circulation Fan'
|
||||
];
|
||||
// Single sensor condition component
|
||||
function SensorCondition({ condition, sensors, onChange, onRemove, disabled }) {
|
||||
return (
|
||||
<Paper sx={{ p: 1.5, display: 'flex', alignItems: 'center', gap: 1, bgcolor: 'background.default' }}>
|
||||
<FormControl size="small" sx={{ minWidth: 150 }}>
|
||||
<InputLabel>Sensor</InputLabel>
|
||||
<Select
|
||||
value={condition.sensor || ''}
|
||||
label="Sensor"
|
||||
onChange={(e) => onChange({ ...condition, sensor: e.target.value })}
|
||||
disabled={disabled}
|
||||
>
|
||||
{sensors.map(s => (
|
||||
<MenuItem key={s.id} value={s.id}>{s.label}</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
<FormControl size="small" sx={{ minWidth: 70 }}>
|
||||
<Select
|
||||
value={condition.operator || '>'}
|
||||
onChange={(e) => onChange({ ...condition, operator: e.target.value })}
|
||||
disabled={disabled}
|
||||
>
|
||||
{OPERATORS.map(op => (
|
||||
<MenuItem key={op.value} value={op.value}>{op.label}</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
<TextField
|
||||
size="small"
|
||||
type="number"
|
||||
value={condition.value ?? ''}
|
||||
onChange={(e) => onChange({ ...condition, value: Number(e.target.value) })}
|
||||
sx={{ width: 80 }}
|
||||
disabled={disabled}
|
||||
/>
|
||||
{onRemove && (
|
||||
<IconButton size="small" onClick={onRemove} disabled={disabled}>
|
||||
❌
|
||||
</IconButton>
|
||||
)}
|
||||
</Paper>
|
||||
);
|
||||
}
|
||||
|
||||
export default function RuleEditor({ open, rule, onSave, onClose }) {
|
||||
export default function RuleEditor({ open, rule, onSave, onClose, sensors = [], outputs = [], saving }) {
|
||||
const [name, setName] = useState('');
|
||||
const [triggerType, setTriggerType] = useState('time');
|
||||
|
||||
// Time trigger state
|
||||
const [time, setTime] = useState('08:00');
|
||||
// Time range state
|
||||
const [useTimeRange, setUseTimeRange] = useState(false);
|
||||
const [timeStart, setTimeStart] = useState('08:00');
|
||||
const [timeEnd, setTimeEnd] = useState('18:00');
|
||||
const [days, setDays] = useState(['mon', 'tue', 'wed', 'thu', 'fri']);
|
||||
|
||||
// Sensor trigger state
|
||||
const [sensor, setSensor] = useState('Temperature');
|
||||
const [operator, setOperator] = useState('>');
|
||||
const [sensorValue, setSensorValue] = useState(25);
|
||||
// Sensor conditions state
|
||||
const [useSensors, setUseSensors] = useState(false);
|
||||
const [sensorConditions, setSensorConditions] = useState([{ sensor: '', operator: '>', value: 25 }]);
|
||||
const [sensorLogic, setSensorLogic] = useState('and'); // 'and' or 'or'
|
||||
|
||||
// Action state
|
||||
const [actionType, setActionType] = useState('toggle');
|
||||
const [target, setTarget] = useState('Workshop Light');
|
||||
const [target, setTarget] = useState('');
|
||||
const [toggleState, setToggleState] = useState(true);
|
||||
const [duration, setDuration] = useState(15);
|
||||
|
||||
// Reset form when rule changes
|
||||
// Reset form when rule changes or dialog opens
|
||||
useEffect(() => {
|
||||
if (rule) {
|
||||
setName(rule.name);
|
||||
setTriggerType(rule.trigger.type);
|
||||
|
||||
if (rule.trigger.type === 'time') {
|
||||
setTime(rule.trigger.time);
|
||||
setDays(rule.trigger.days || []);
|
||||
} else {
|
||||
setSensor(rule.trigger.sensor);
|
||||
setOperator(rule.trigger.operator);
|
||||
setSensorValue(rule.trigger.value);
|
||||
// Parse trigger
|
||||
const trigger = rule.trigger || {};
|
||||
setUseTimeRange(!!trigger.timeRange);
|
||||
if (trigger.timeRange) {
|
||||
setTimeStart(trigger.timeRange.start || '08:00');
|
||||
setTimeEnd(trigger.timeRange.end || '18:00');
|
||||
setDays(trigger.timeRange.days || []);
|
||||
}
|
||||
|
||||
setActionType(rule.action.type);
|
||||
setTarget(rule.action.target);
|
||||
if (rule.action.type === 'toggle') {
|
||||
setToggleState(rule.action.state);
|
||||
setUseSensors(!!trigger.sensors && trigger.sensors.length > 0);
|
||||
if (trigger.sensors && trigger.sensors.length > 0) {
|
||||
setSensorConditions(trigger.sensors);
|
||||
setSensorLogic(trigger.sensorLogic || 'and');
|
||||
}
|
||||
|
||||
// Parse action
|
||||
setActionType(rule.action?.type || 'toggle');
|
||||
setTarget(rule.action?.target || '');
|
||||
if (rule.action?.type === 'toggle') {
|
||||
setToggleState(rule.action?.state ?? true);
|
||||
} else {
|
||||
setDuration(rule.action.duration);
|
||||
setDuration(rule.action?.duration || 15);
|
||||
}
|
||||
} else {
|
||||
// Reset to defaults for new rule
|
||||
// Reset to defaults
|
||||
setName('');
|
||||
setTriggerType('time');
|
||||
setTime('08:00');
|
||||
setUseTimeRange(true);
|
||||
setTimeStart('08:00');
|
||||
setTimeEnd('18:00');
|
||||
setDays(['mon', 'tue', 'wed', 'thu', 'fri']);
|
||||
setSensor('Temperature');
|
||||
setOperator('>');
|
||||
setSensorValue(25);
|
||||
setUseSensors(false);
|
||||
setSensorConditions([{ sensor: sensors[0]?.id || '', operator: '>', value: 25 }]);
|
||||
setSensorLogic('and');
|
||||
setActionType('toggle');
|
||||
setTarget('Workshop Light');
|
||||
setTarget(outputs[0]?.id || '');
|
||||
setToggleState(true);
|
||||
setDuration(15);
|
||||
}
|
||||
}, [rule, open]);
|
||||
}, [rule, open, sensors, outputs]);
|
||||
|
||||
// Set default sensor/output when lists load
|
||||
useEffect(() => {
|
||||
if (sensorConditions[0]?.sensor === '' && sensors.length > 0) {
|
||||
setSensorConditions([{ ...sensorConditions[0], sensor: sensors[0].id }]);
|
||||
}
|
||||
if (!target && outputs.length > 0) setTarget(outputs[0].id);
|
||||
}, [sensors, outputs, sensorConditions, target]);
|
||||
|
||||
const handleDaysChange = (event, newDays) => {
|
||||
if (newDays.length > 0) {
|
||||
setDays(newDays);
|
||||
if (newDays.length > 0) setDays(newDays);
|
||||
};
|
||||
|
||||
const addSensorCondition = () => {
|
||||
setSensorConditions([...sensorConditions, { sensor: sensors[0]?.id || '', operator: '>', value: 25 }]);
|
||||
};
|
||||
|
||||
const updateSensorCondition = (index, newCondition) => {
|
||||
const updated = [...sensorConditions];
|
||||
updated[index] = newCondition;
|
||||
setSensorConditions(updated);
|
||||
};
|
||||
|
||||
const removeSensorCondition = (index) => {
|
||||
if (sensorConditions.length > 1) {
|
||||
setSensorConditions(sensorConditions.filter((_, i) => i !== index));
|
||||
}
|
||||
};
|
||||
|
||||
const handleSave = () => {
|
||||
const selectedOutput = outputs.find(o => o.id === target);
|
||||
|
||||
// Build trigger object
|
||||
const trigger = {};
|
||||
if (useTimeRange) {
|
||||
trigger.timeRange = { start: timeStart, end: timeEnd, days };
|
||||
}
|
||||
if (useSensors && sensorConditions.length > 0) {
|
||||
trigger.sensors = sensorConditions.map(c => ({
|
||||
...c,
|
||||
sensorLabel: sensors.find(s => s.id === c.sensor)?.label
|
||||
}));
|
||||
trigger.sensorLogic = sensorLogic;
|
||||
}
|
||||
|
||||
const ruleData = {
|
||||
name,
|
||||
trigger: triggerType === 'time'
|
||||
? { type: 'time', time, days }
|
||||
: { type: 'sensor', sensor, operator, value: sensorValue },
|
||||
trigger,
|
||||
action: actionType === 'toggle'
|
||||
? { type: 'toggle', target, state: toggleState }
|
||||
: { type: 'keepOn', target, duration }
|
||||
? { type: 'toggle', target, targetLabel: selectedOutput?.label, state: toggleState }
|
||||
: { type: 'keepOn', target, targetLabel: selectedOutput?.label, duration }
|
||||
};
|
||||
onSave(ruleData);
|
||||
};
|
||||
|
||||
const isValid = name.trim().length > 0 &&
|
||||
(triggerType !== 'time' || days.length > 0);
|
||||
(useTimeRange || useSensors) &&
|
||||
(!useTimeRange || days.length > 0) &&
|
||||
(!useSensors || sensorConditions.every(c => c.sensor)) &&
|
||||
target;
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
open={open}
|
||||
onClose={onClose}
|
||||
maxWidth="sm"
|
||||
maxWidth="md"
|
||||
fullWidth
|
||||
PaperProps={{
|
||||
sx: {
|
||||
@@ -153,108 +237,161 @@ export default function RuleEditor({ open, rule, onSave, onClose }) {
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
fullWidth
|
||||
placeholder="e.g., Morning Lights"
|
||||
placeholder="e.g., Daytime High Humidity Fan"
|
||||
disabled={saving}
|
||||
/>
|
||||
|
||||
{/* Trigger Section */}
|
||||
{/* TRIGGERS SECTION */}
|
||||
<Box>
|
||||
<Typography variant="subtitle2" color="text.secondary" gutterBottom>
|
||||
TRIGGER (When to activate)
|
||||
TRIGGERS (When to activate - conditions are combined with AND)
|
||||
</Typography>
|
||||
<Divider sx={{ mb: 2 }} />
|
||||
|
||||
<FormControl fullWidth sx={{ mb: 2 }}>
|
||||
<InputLabel>Trigger Type</InputLabel>
|
||||
<Select
|
||||
value={triggerType}
|
||||
label="Trigger Type"
|
||||
onChange={(e) => setTriggerType(e.target.value)}
|
||||
>
|
||||
<MenuItem value="time">⏰ Time-based</MenuItem>
|
||||
<MenuItem value="sensor">📊 Sensor Value</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
|
||||
{triggerType === 'time' && (
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
|
||||
<TextField
|
||||
label="Time"
|
||||
type="time"
|
||||
value={time}
|
||||
onChange={(e) => setTime(e.target.value)}
|
||||
InputLabelProps={{ shrink: true }}
|
||||
fullWidth
|
||||
/>
|
||||
<Box>
|
||||
<Typography variant="body2" color="text.secondary" sx={{ mb: 1 }}>
|
||||
Days of Week
|
||||
</Typography>
|
||||
<ToggleButtonGroup
|
||||
value={days}
|
||||
onChange={handleDaysChange}
|
||||
size="small"
|
||||
sx={{ flexWrap: 'wrap' }}
|
||||
>
|
||||
{DAYS.map(day => (
|
||||
<ToggleButton
|
||||
key={day.key}
|
||||
value={day.key}
|
||||
sx={{
|
||||
'&.Mui-selected': {
|
||||
bgcolor: '#8ec07c',
|
||||
color: '#282828',
|
||||
'&:hover': { bgcolor: '#98c98a' }
|
||||
}
|
||||
}}
|
||||
>
|
||||
{day.label}
|
||||
</ToggleButton>
|
||||
))}
|
||||
</ToggleButtonGroup>
|
||||
</Box>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{triggerType === 'sensor' && (
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
|
||||
<FormControl fullWidth>
|
||||
<InputLabel>Sensor</InputLabel>
|
||||
<Select
|
||||
value={sensor}
|
||||
label="Sensor"
|
||||
onChange={(e) => setSensor(e.target.value)}
|
||||
>
|
||||
{SENSORS.map(s => (
|
||||
<MenuItem key={s} value={s}>{s}</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
<Box sx={{ display: 'flex', gap: 2 }}>
|
||||
<FormControl sx={{ minWidth: 180 }}>
|
||||
<InputLabel>Condition</InputLabel>
|
||||
<Select
|
||||
value={operator}
|
||||
label="Condition"
|
||||
onChange={(e) => setOperator(e.target.value)}
|
||||
>
|
||||
{OPERATORS.map(op => (
|
||||
<MenuItem key={op.value} value={op.value}>{op.label}</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
<TextField
|
||||
label="Value"
|
||||
type="number"
|
||||
value={sensorValue}
|
||||
onChange={(e) => setSensorValue(Number(e.target.value))}
|
||||
fullWidth
|
||||
{/* Time Range Trigger */}
|
||||
<Paper sx={{ p: 2, mb: 2, bgcolor: useTimeRange ? 'action.selected' : 'background.default' }}>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Switch
|
||||
checked={useTimeRange}
|
||||
onChange={(e) => setUseTimeRange(e.target.checked)}
|
||||
disabled={saving}
|
||||
/>
|
||||
}
|
||||
label={<Typography fontWeight={600}>⏰ Time Range</Typography>}
|
||||
/>
|
||||
|
||||
{useTimeRange && (
|
||||
<Box sx={{ mt: 2, display: 'flex', flexDirection: 'column', gap: 2 }}>
|
||||
<Box sx={{ display: 'flex', gap: 2, alignItems: 'center' }}>
|
||||
<TextField
|
||||
label="From"
|
||||
type="time"
|
||||
value={timeStart}
|
||||
onChange={(e) => setTimeStart(e.target.value)}
|
||||
InputLabelProps={{ shrink: true }}
|
||||
size="small"
|
||||
disabled={saving}
|
||||
/>
|
||||
<Typography>to</Typography>
|
||||
<TextField
|
||||
label="Until"
|
||||
type="time"
|
||||
value={timeEnd}
|
||||
onChange={(e) => setTimeEnd(e.target.value)}
|
||||
InputLabelProps={{ shrink: true }}
|
||||
size="small"
|
||||
disabled={saving}
|
||||
/>
|
||||
</Box>
|
||||
<Box>
|
||||
<Typography variant="body2" color="text.secondary" sx={{ mb: 1 }}>
|
||||
Days
|
||||
</Typography>
|
||||
<ToggleButtonGroup
|
||||
value={days}
|
||||
onChange={handleDaysChange}
|
||||
size="small"
|
||||
disabled={saving}
|
||||
>
|
||||
{DAYS.map(day => (
|
||||
<ToggleButton
|
||||
key={day.key}
|
||||
value={day.key}
|
||||
sx={{
|
||||
'&.Mui-selected': {
|
||||
bgcolor: '#8ec07c',
|
||||
color: '#282828',
|
||||
'&:hover': { bgcolor: '#98c98a' }
|
||||
}
|
||||
}}
|
||||
>
|
||||
{day.label}
|
||||
</ToggleButton>
|
||||
))}
|
||||
</ToggleButtonGroup>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
)}
|
||||
)}
|
||||
</Paper>
|
||||
|
||||
{/* Sensor Conditions Trigger */}
|
||||
<Paper sx={{ p: 2, bgcolor: useSensors ? 'action.selected' : 'background.default' }}>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Switch
|
||||
checked={useSensors}
|
||||
onChange={(e) => setUseSensors(e.target.checked)}
|
||||
disabled={saving || sensors.length === 0}
|
||||
/>
|
||||
}
|
||||
label={
|
||||
<Typography fontWeight={600}>
|
||||
📊 Sensor Conditions {sensors.length === 0 && '(no sensors available)'}
|
||||
</Typography>
|
||||
}
|
||||
/>
|
||||
|
||||
{useSensors && (
|
||||
<Box sx={{ mt: 2, display: 'flex', flexDirection: 'column', gap: 2 }}>
|
||||
{sensorConditions.length > 1 && (
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
<Typography variant="body2">Combine conditions with:</Typography>
|
||||
<ToggleButtonGroup
|
||||
value={sensorLogic}
|
||||
exclusive
|
||||
onChange={(e, v) => v && setSensorLogic(v)}
|
||||
size="small"
|
||||
disabled={saving}
|
||||
>
|
||||
<ToggleButton value="and" sx={{ '&.Mui-selected': { bgcolor: '#8ec07c', color: '#282828' } }}>
|
||||
AND
|
||||
</ToggleButton>
|
||||
<ToggleButton value="or" sx={{ '&.Mui-selected': { bgcolor: '#fabd2f', color: '#282828' } }}>
|
||||
OR
|
||||
</ToggleButton>
|
||||
</ToggleButtonGroup>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{sensorConditions.map((cond, i) => (
|
||||
<Box key={i} sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
{i > 0 && (
|
||||
<Chip
|
||||
label={sensorLogic.toUpperCase()}
|
||||
size="small"
|
||||
sx={{
|
||||
bgcolor: sensorLogic === 'and' ? '#8ec07c' : '#fabd2f',
|
||||
color: '#282828',
|
||||
fontWeight: 600,
|
||||
minWidth: 45
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
<SensorCondition
|
||||
condition={cond}
|
||||
sensors={sensors}
|
||||
onChange={(newCond) => updateSensorCondition(i, newCond)}
|
||||
onRemove={sensorConditions.length > 1 ? () => removeSensorCondition(i) : null}
|
||||
disabled={saving}
|
||||
/>
|
||||
</Box>
|
||||
))}
|
||||
|
||||
<Button
|
||||
size="small"
|
||||
onClick={addSensorCondition}
|
||||
disabled={saving}
|
||||
sx={{ alignSelf: 'flex-start' }}
|
||||
>
|
||||
+ Add Condition
|
||||
</Button>
|
||||
</Box>
|
||||
)}
|
||||
</Paper>
|
||||
</Box>
|
||||
|
||||
{/* Action Section */}
|
||||
{/* ACTION SECTION */}
|
||||
<Box>
|
||||
<Typography variant="subtitle2" color="text.secondary" gutterBottom>
|
||||
ACTION (What to do)
|
||||
@@ -267,6 +404,7 @@ export default function RuleEditor({ open, rule, onSave, onClose }) {
|
||||
value={actionType}
|
||||
label="Action Type"
|
||||
onChange={(e) => setActionType(e.target.value)}
|
||||
disabled={saving}
|
||||
>
|
||||
<MenuItem value="toggle">🔛 Toggle On/Off</MenuItem>
|
||||
<MenuItem value="keepOn">⏱️ Keep On for X Minutes</MenuItem>
|
||||
@@ -279,9 +417,10 @@ export default function RuleEditor({ open, rule, onSave, onClose }) {
|
||||
value={target}
|
||||
label="Target Output"
|
||||
onChange={(e) => setTarget(e.target.value)}
|
||||
disabled={saving}
|
||||
>
|
||||
{OUTPUTS.map(o => (
|
||||
<MenuItem key={o} value={o}>{o}</MenuItem>
|
||||
{outputs.map(o => (
|
||||
<MenuItem key={o.id} value={o.id}>{o.label}</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
@@ -293,6 +432,7 @@ export default function RuleEditor({ open, rule, onSave, onClose }) {
|
||||
checked={toggleState}
|
||||
onChange={(e) => setToggleState(e.target.checked)}
|
||||
color="primary"
|
||||
disabled={saving}
|
||||
/>
|
||||
}
|
||||
label={toggleState ? 'Turn ON' : 'Turn OFF'}
|
||||
@@ -316,6 +456,7 @@ export default function RuleEditor({ open, rule, onSave, onClose }) {
|
||||
{ value: 120, label: '2h' }
|
||||
]}
|
||||
valueLabelDisplay="auto"
|
||||
disabled={saving}
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
@@ -324,13 +465,13 @@ export default function RuleEditor({ open, rule, onSave, onClose }) {
|
||||
</DialogContent>
|
||||
|
||||
<DialogActions sx={{ px: 3, py: 2 }}>
|
||||
<Button onClick={onClose} color="inherit">
|
||||
<Button onClick={onClose} color="inherit" disabled={saving}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleSave}
|
||||
variant="contained"
|
||||
disabled={!isValid}
|
||||
disabled={!isValid || saving}
|
||||
sx={{
|
||||
background: 'linear-gradient(45deg, #8ec07c 30%, #b8bb26 90%)',
|
||||
'&:hover': {
|
||||
@@ -338,7 +479,14 @@ export default function RuleEditor({ open, rule, onSave, onClose }) {
|
||||
}
|
||||
}}
|
||||
>
|
||||
{rule ? 'Save Changes' : 'Create Rule'}
|
||||
{saving ? (
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
<CircularProgress size={16} color="inherit" />
|
||||
Saving...
|
||||
</Box>
|
||||
) : (
|
||||
rule ? 'Save Changes' : 'Create Rule'
|
||||
)}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
|
||||
@@ -1,68 +1,123 @@
|
||||
import React, { useState } from 'react';
|
||||
import React, { useState, useEffect, useCallback } from 'react';
|
||||
import {
|
||||
Box,
|
||||
Typography,
|
||||
Button,
|
||||
Paper,
|
||||
Divider
|
||||
Divider,
|
||||
Alert,
|
||||
CircularProgress
|
||||
} from '@mui/material';
|
||||
import RuleCard from './RuleCard';
|
||||
import RuleEditor from './RuleEditor';
|
||||
|
||||
// Initial mock rules for demonstration
|
||||
const initialRules = [
|
||||
{
|
||||
id: 1,
|
||||
name: 'Morning Light',
|
||||
enabled: true,
|
||||
trigger: {
|
||||
type: 'time',
|
||||
time: '06:30',
|
||||
days: ['mon', 'tue', 'wed', 'thu', 'fri']
|
||||
},
|
||||
action: {
|
||||
type: 'toggle',
|
||||
target: 'Workshop Light',
|
||||
state: true
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: 'High Humidity Fan',
|
||||
enabled: true,
|
||||
trigger: {
|
||||
type: 'sensor',
|
||||
sensor: 'Humidity',
|
||||
operator: '>',
|
||||
value: 70
|
||||
},
|
||||
action: {
|
||||
type: 'keepOn',
|
||||
target: 'Exhaust Fan',
|
||||
duration: 15
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: 'Evening Shutdown',
|
||||
enabled: false,
|
||||
trigger: {
|
||||
type: 'time',
|
||||
time: '18:00',
|
||||
days: ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun']
|
||||
},
|
||||
action: {
|
||||
type: 'toggle',
|
||||
target: 'All Outlets',
|
||||
state: false
|
||||
}
|
||||
}
|
||||
];
|
||||
import { useAuth } from './AuthContext';
|
||||
|
||||
export default function RuleManager() {
|
||||
const [rules, setRules] = useState(initialRules);
|
||||
const { isAdmin } = useAuth();
|
||||
const [rules, setRules] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState(null);
|
||||
const [editorOpen, setEditorOpen] = useState(false);
|
||||
const [editingRule, setEditingRule] = useState(null);
|
||||
const [devices, setDevices] = useState([]);
|
||||
const [saving, setSaving] = useState(false);
|
||||
|
||||
// Get auth token from localStorage
|
||||
const getAuthHeaders = useCallback(() => {
|
||||
const token = localStorage.getItem('authToken');
|
||||
return {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${token}`
|
||||
};
|
||||
}, []);
|
||||
|
||||
// Fetch rules from server (public endpoint)
|
||||
const fetchRules = useCallback(async () => {
|
||||
try {
|
||||
const res = await fetch('api/rules');
|
||||
if (!res.ok) {
|
||||
throw new Error('Failed to fetch rules');
|
||||
}
|
||||
const data = await res.json();
|
||||
setRules(data);
|
||||
setError(null);
|
||||
} catch (err) {
|
||||
setError(err.message);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
// Fetch devices for sensor/output selection
|
||||
const fetchDevices = useCallback(async () => {
|
||||
try {
|
||||
const res = await fetch('api/devices');
|
||||
if (res.ok) {
|
||||
const data = await res.json();
|
||||
setDevices(data);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Failed to fetch devices:', err);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
fetchRules();
|
||||
fetchDevices();
|
||||
}, [fetchRules, fetchDevices]);
|
||||
|
||||
// Build available sensors
|
||||
// - Environment sensors (Temp, Humidity) are per DEVICE
|
||||
// - Port values (Fan Speed, Brightness, CO2, etc.) are per PORT
|
||||
const availableSensors = [];
|
||||
const seenDevices = new Set();
|
||||
|
||||
devices.forEach(d => {
|
||||
// Add environment sensors once per device
|
||||
if (!seenDevices.has(d.dev_name)) {
|
||||
seenDevices.add(d.dev_name);
|
||||
availableSensors.push({
|
||||
id: `${d.dev_name}:temp`,
|
||||
label: `${d.dev_name} - Temperature`,
|
||||
type: 'temperature'
|
||||
});
|
||||
availableSensors.push({
|
||||
id: `${d.dev_name}:humidity`,
|
||||
label: `${d.dev_name} - Humidity`,
|
||||
type: 'humidity'
|
||||
});
|
||||
}
|
||||
|
||||
// Add each port as a sensor (Fan Speed, Brightness, CO2, etc.)
|
||||
availableSensors.push({
|
||||
id: `${d.dev_name}:${d.port}:level`,
|
||||
label: `${d.dev_name} - ${d.port_name} Level`,
|
||||
type: d.port_name.toLowerCase()
|
||||
});
|
||||
});
|
||||
|
||||
// Build available outputs: Tapo plugs + device fans/lights
|
||||
const availableOutputs = [
|
||||
{ id: 'tapo-001', label: 'Tapo 001', type: 'plug' },
|
||||
{ id: 'tapo-002', label: 'Tapo 002', type: 'plug' },
|
||||
{ id: 'tapo-003', label: 'Tapo 003', type: 'plug' },
|
||||
{ id: 'tapo-004', label: 'Tapo 004', type: 'plug' },
|
||||
{ id: 'tapo-005', label: 'Tapo 005', type: 'plug' },
|
||||
...devices
|
||||
.filter(d => d.port_name === 'Fan')
|
||||
.map(d => ({
|
||||
id: `${d.dev_name}:fan:${d.port}`,
|
||||
label: `${d.dev_name} - Fan`,
|
||||
type: 'fan'
|
||||
})),
|
||||
...devices
|
||||
.filter(d => d.port_name === 'Light')
|
||||
.map(d => ({
|
||||
id: `${d.dev_name}:light:${d.port}`,
|
||||
label: `${d.dev_name} - Light`,
|
||||
type: 'light'
|
||||
}))
|
||||
];
|
||||
|
||||
const handleAddRule = () => {
|
||||
setEditingRule(null);
|
||||
@@ -74,33 +129,76 @@ export default function RuleManager() {
|
||||
setEditorOpen(true);
|
||||
};
|
||||
|
||||
const handleDeleteRule = (ruleId) => {
|
||||
setRules(rules.filter(r => r.id !== ruleId));
|
||||
};
|
||||
const handleDeleteRule = async (ruleId) => {
|
||||
if (!confirm('Delete this rule?')) return;
|
||||
|
||||
const handleToggleRule = (ruleId) => {
|
||||
setRules(rules.map(r =>
|
||||
r.id === ruleId ? { ...r, enabled: !r.enabled } : r
|
||||
));
|
||||
};
|
||||
|
||||
const handleSaveRule = (ruleData) => {
|
||||
if (editingRule) {
|
||||
// Update existing rule
|
||||
setRules(rules.map(r =>
|
||||
r.id === editingRule.id ? { ...r, ...ruleData } : r
|
||||
));
|
||||
} else {
|
||||
// Add new rule
|
||||
const newRule = {
|
||||
...ruleData,
|
||||
id: Math.max(0, ...rules.map(r => r.id)) + 1,
|
||||
enabled: true
|
||||
};
|
||||
setRules([...rules, newRule]);
|
||||
setSaving(true);
|
||||
try {
|
||||
const res = await fetch(`api/rules/${ruleId}`, {
|
||||
method: 'DELETE',
|
||||
headers: getAuthHeaders()
|
||||
});
|
||||
if (!res.ok) throw new Error('Failed to delete rule');
|
||||
setRules(rules.filter(r => r.id !== ruleId));
|
||||
} catch (err) {
|
||||
setError(err.message);
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleToggleRule = async (ruleId) => {
|
||||
const rule = rules.find(r => r.id === ruleId);
|
||||
if (!rule) return;
|
||||
|
||||
setSaving(true);
|
||||
try {
|
||||
const res = await fetch(`api/rules/${ruleId}`, {
|
||||
method: 'PUT',
|
||||
headers: getAuthHeaders(),
|
||||
body: JSON.stringify({ ...rule, enabled: !rule.enabled })
|
||||
});
|
||||
if (!res.ok) throw new Error('Failed to update rule');
|
||||
const updated = await res.json();
|
||||
setRules(rules.map(r => r.id === ruleId ? updated : r));
|
||||
} catch (err) {
|
||||
setError(err.message);
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSaveRule = async (ruleData) => {
|
||||
setSaving(true);
|
||||
try {
|
||||
if (editingRule) {
|
||||
// Update existing rule
|
||||
const res = await fetch(`api/rules/${editingRule.id}`, {
|
||||
method: 'PUT',
|
||||
headers: getAuthHeaders(),
|
||||
body: JSON.stringify(ruleData)
|
||||
});
|
||||
if (!res.ok) throw new Error('Failed to update rule');
|
||||
const updated = await res.json();
|
||||
setRules(rules.map(r => r.id === editingRule.id ? updated : r));
|
||||
} else {
|
||||
// Create new rule
|
||||
const res = await fetch('api/rules', {
|
||||
method: 'POST',
|
||||
headers: getAuthHeaders(),
|
||||
body: JSON.stringify({ ...ruleData, enabled: true })
|
||||
});
|
||||
if (!res.ok) throw new Error('Failed to create rule');
|
||||
const newRule = await res.json();
|
||||
setRules([...rules, newRule]);
|
||||
}
|
||||
setEditorOpen(false);
|
||||
setEditingRule(null);
|
||||
} catch (err) {
|
||||
setError(err.message);
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
setEditorOpen(false);
|
||||
setEditingRule(null);
|
||||
};
|
||||
|
||||
const handleCloseEditor = () => {
|
||||
@@ -108,6 +206,15 @@ export default function RuleManager() {
|
||||
setEditingRule(null);
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<Paper sx={{ mt: 4, p: 3, textAlign: 'center' }}>
|
||||
<CircularProgress size={24} />
|
||||
<Typography sx={{ mt: 2 }}>Loading rules...</Typography>
|
||||
</Paper>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Paper
|
||||
sx={{
|
||||
@@ -123,29 +230,38 @@ export default function RuleManager() {
|
||||
⚙️ Automation Rules
|
||||
</Typography>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
Configure triggers and actions for home automation
|
||||
{isAdmin ? 'Configure triggers and actions for home automation' : 'View automation rules (read-only)'}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Button
|
||||
variant="contained"
|
||||
onClick={handleAddRule}
|
||||
sx={{
|
||||
background: 'linear-gradient(45deg, #b8bb26 30%, #8ec07c 90%)',
|
||||
'&:hover': {
|
||||
background: 'linear-gradient(45deg, #c5c836 30%, #98c98a 90%)',
|
||||
}
|
||||
}}
|
||||
>
|
||||
+ Add Rule
|
||||
</Button>
|
||||
{isAdmin && (
|
||||
<Button
|
||||
variant="contained"
|
||||
onClick={handleAddRule}
|
||||
disabled={saving}
|
||||
sx={{
|
||||
background: 'linear-gradient(45deg, #b8bb26 30%, #8ec07c 90%)',
|
||||
'&:hover': {
|
||||
background: 'linear-gradient(45deg, #c5c836 30%, #98c98a 90%)',
|
||||
}
|
||||
}}
|
||||
>
|
||||
+ Add Rule
|
||||
</Button>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
<Divider sx={{ mb: 3 }} />
|
||||
|
||||
{error && (
|
||||
<Alert severity="error" sx={{ mb: 2 }} onClose={() => setError(null)}>
|
||||
{error}
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{rules.length === 0 ? (
|
||||
<Box sx={{ textAlign: 'center', py: 4 }}>
|
||||
<Typography color="text.secondary">
|
||||
No rules configured. Click "Add Rule" to create one.
|
||||
No rules configured. {isAdmin && 'Click "Add Rule" to create one.'}
|
||||
</Typography>
|
||||
</Box>
|
||||
) : (
|
||||
@@ -154,20 +270,26 @@ export default function RuleManager() {
|
||||
<RuleCard
|
||||
key={rule.id}
|
||||
rule={rule}
|
||||
onEdit={() => handleEditRule(rule)}
|
||||
onDelete={() => handleDeleteRule(rule.id)}
|
||||
onToggle={() => handleToggleRule(rule.id)}
|
||||
onEdit={isAdmin ? () => handleEditRule(rule) : null}
|
||||
onDelete={isAdmin ? () => handleDeleteRule(rule.id) : null}
|
||||
onToggle={isAdmin ? () => handleToggleRule(rule.id) : null}
|
||||
readOnly={!isAdmin}
|
||||
/>
|
||||
))}
|
||||
</Box>
|
||||
)}
|
||||
|
||||
<RuleEditor
|
||||
open={editorOpen}
|
||||
rule={editingRule}
|
||||
onSave={handleSaveRule}
|
||||
onClose={handleCloseEditor}
|
||||
/>
|
||||
{isAdmin && (
|
||||
<RuleEditor
|
||||
open={editorOpen}
|
||||
rule={editingRule}
|
||||
onSave={handleSaveRule}
|
||||
onClose={handleCloseEditor}
|
||||
sensors={availableSensors}
|
||||
outputs={availableOutputs}
|
||||
saving={saving}
|
||||
/>
|
||||
)}
|
||||
</Paper>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user