sync rules
This commit is contained in:
sebseb7
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user