tags
This commit is contained in:
sebseb7
@@ -19,7 +19,25 @@ const dayOrder = ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun'];
|
||||
function TriggerSummary({ trigger }) {
|
||||
const parts = [];
|
||||
|
||||
// Time range
|
||||
// Scheduled time (trigger at exact time)
|
||||
if (trigger.scheduledTime) {
|
||||
const { time, days } = trigger.scheduledTime;
|
||||
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="scheduled" sx={{ display: 'flex', alignItems: 'center', gap: 0.5, flexWrap: 'wrap' }}>
|
||||
<Chip label="🕐" size="small" sx={{ bgcolor: '#d3869b', color: '#282828', fontWeight: 600, minWidth: 32 }} />
|
||||
<Typography variant="body2">
|
||||
At <strong>{time}</strong> ({dayText})
|
||||
</Typography>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
// Time range (active during window)
|
||||
if (trigger.timeRange) {
|
||||
const { start, end, days } = trigger.timeRange;
|
||||
const isEveryDay = days?.length === 7;
|
||||
@@ -95,26 +113,29 @@ function TriggerSummary({ trigger }) {
|
||||
|
||||
function ActionSummary({ action }) {
|
||||
if (action.type === 'toggle') {
|
||||
// Check if it's a level or binary action
|
||||
const hasLevel = action.level !== undefined;
|
||||
return (
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
|
||||
<Chip
|
||||
label={action.state ? '🔛' : '🔴'}
|
||||
label={hasLevel ? '🎚️' : (action.state ? '🔛' : '🔴')}
|
||||
size="small"
|
||||
sx={{ bgcolor: action.state ? '#b8bb26' : '#fb4934', color: '#282828', fontWeight: 600, minWidth: 32 }}
|
||||
sx={{ bgcolor: hasLevel ? '#83a598' : (action.state ? '#b8bb26' : '#fb4934'), color: '#282828', fontWeight: 600, minWidth: 32 }}
|
||||
/>
|
||||
<Typography variant="body2">
|
||||
→ <strong>{action.targetLabel || action.target}</strong> {action.state ? 'ON' : 'OFF'}
|
||||
→ <strong>{action.targetLabel || action.target}</strong> {hasLevel ? `Level ${action.level}` : (action.state ? 'ON' : 'OFF')}
|
||||
</Typography>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
if (action.type === 'keepOn') {
|
||||
const hasLevel = action.level !== undefined;
|
||||
return (
|
||||
<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">
|
||||
→ <strong>{action.targetLabel || action.target}</strong> ON for {action.duration}m
|
||||
→ <strong>{action.targetLabel || action.target}</strong> {hasLevel ? `Level ${action.level}` : 'ON'} for {action.duration}m
|
||||
</Typography>
|
||||
</Box>
|
||||
);
|
||||
@@ -123,7 +144,11 @@ function ActionSummary({ action }) {
|
||||
return null;
|
||||
}
|
||||
|
||||
export default function RuleCard({ rule, onEdit, onDelete, onToggle, readOnly }) {
|
||||
export default function RuleCard({ rule, onEdit, onDelete, onToggle, onMoveUp, onMoveDown, colorTags = [], readOnly }) {
|
||||
// Get list of tag colors for this rule (handle array or backwards-compat single value)
|
||||
const ruleTagIds = rule.colorTags || (rule.colorTag ? [rule.colorTag] : []);
|
||||
const ruleTags = ruleTagIds.map(tagId => colorTags.find(t => t.id === tagId)).filter(Boolean);
|
||||
|
||||
return (
|
||||
<Paper
|
||||
sx={{
|
||||
@@ -132,6 +157,7 @@ export default function RuleCard({ rule, onEdit, onDelete, onToggle, readOnly })
|
||||
transition: 'opacity 0.2s, transform 0.2s',
|
||||
border: '1px solid',
|
||||
borderColor: rule.enabled ? '#504945' : '#3c3836',
|
||||
borderLeft: ruleTags.length > 0 ? `4px solid ${ruleTags[0].color}` : '1px solid #504945',
|
||||
'&:hover': {
|
||||
transform: readOnly ? 'none' : 'translateX(4px)',
|
||||
borderColor: rule.enabled ? '#8ec07c' : '#504945'
|
||||
@@ -144,6 +170,19 @@ export default function RuleCard({ rule, onEdit, onDelete, onToggle, readOnly })
|
||||
<Typography variant="h6" sx={{ fontWeight: 600 }}>
|
||||
{rule.name}
|
||||
</Typography>
|
||||
{ruleTags.length > 0 && (
|
||||
<Box sx={{ display: 'flex', gap: 0.25 }}>
|
||||
{ruleTags.map(tag => (
|
||||
<Box key={tag.id} sx={{
|
||||
width: 10,
|
||||
height: 10,
|
||||
borderRadius: '50%',
|
||||
bgcolor: tag.color,
|
||||
flexShrink: 0
|
||||
}} />
|
||||
))}
|
||||
</Box>
|
||||
)}
|
||||
{!rule.enabled && (
|
||||
<Chip label="Disabled" size="small" sx={{ bgcolor: '#504945', fontSize: '0.7rem' }} />
|
||||
)}
|
||||
@@ -156,7 +195,34 @@ export default function RuleCard({ rule, onEdit, onDelete, onToggle, readOnly })
|
||||
</Box>
|
||||
|
||||
{!readOnly && (
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
|
||||
{/* Move buttons */}
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column' }}>
|
||||
<Tooltip title="Move up">
|
||||
<span>
|
||||
<IconButton
|
||||
onClick={onMoveUp}
|
||||
size="small"
|
||||
disabled={!onMoveUp}
|
||||
sx={{ p: 0.25 }}
|
||||
>
|
||||
▲
|
||||
</IconButton>
|
||||
</span>
|
||||
</Tooltip>
|
||||
<Tooltip title="Move down">
|
||||
<span>
|
||||
<IconButton
|
||||
onClick={onMoveDown}
|
||||
size="small"
|
||||
disabled={!onMoveDown}
|
||||
sx={{ p: 0.25 }}
|
||||
>
|
||||
▼
|
||||
</IconButton>
|
||||
</span>
|
||||
</Tooltip>
|
||||
</Box>
|
||||
<Tooltip title={rule.enabled ? 'Disable' : 'Enable'}>
|
||||
<Switch checked={rule.enabled} onChange={onToggle} color="primary" size="small" />
|
||||
</Tooltip>
|
||||
|
||||
@@ -44,14 +44,29 @@ const OPERATORS = [
|
||||
|
||||
// Single sensor condition component
|
||||
function SensorCondition({ condition, sensors, onChange, onRemove, disabled }) {
|
||||
const selectedSensor = sensors.find(s => s.id === condition.sensor);
|
||||
const isStateSensor = selectedSensor?.type === 'output-state';
|
||||
|
||||
// When sensor changes, reset operator to appropriate default
|
||||
const handleSensorChange = (newSensorId) => {
|
||||
const newSensor = sensors.find(s => s.id === newSensorId);
|
||||
const newIsState = newSensor?.type === 'output-state';
|
||||
onChange({
|
||||
...condition,
|
||||
sensor: newSensorId,
|
||||
operator: newIsState ? '==' : '>',
|
||||
value: newIsState ? 1 : (condition.value ?? 25)
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Paper sx={{ p: 1.5, display: 'flex', alignItems: 'center', gap: 1, bgcolor: 'background.default' }}>
|
||||
<FormControl size="small" sx={{ minWidth: 150 }}>
|
||||
<FormControl size="small" sx={{ minWidth: 180 }}>
|
||||
<InputLabel>Sensor</InputLabel>
|
||||
<Select
|
||||
value={condition.sensor || ''}
|
||||
label="Sensor"
|
||||
onChange={(e) => onChange({ ...condition, sensor: e.target.value })}
|
||||
onChange={(e) => handleSensorChange(e.target.value)}
|
||||
disabled={disabled}
|
||||
>
|
||||
{sensors.map(s => (
|
||||
@@ -59,25 +74,44 @@ function SensorCondition({ condition, sensors, onChange, onRemove, disabled }) {
|
||||
))}
|
||||
</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}
|
||||
/>
|
||||
|
||||
{isStateSensor ? (
|
||||
// State sensor: is on / is off
|
||||
<FormControl size="small" sx={{ minWidth: 100 }}>
|
||||
<Select
|
||||
value={condition.value === 1 ? 'on' : 'off'}
|
||||
onChange={(e) => onChange({ ...condition, operator: '==', value: e.target.value === 'on' ? 1 : 0 })}
|
||||
disabled={disabled}
|
||||
>
|
||||
<MenuItem value="on">is ON</MenuItem>
|
||||
<MenuItem value="off">is OFF</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
) : (
|
||||
// Value sensor: numeric comparison
|
||||
<>
|
||||
<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}>
|
||||
❌
|
||||
@@ -87,14 +121,20 @@ function SensorCondition({ condition, sensors, onChange, onRemove, disabled }) {
|
||||
);
|
||||
}
|
||||
|
||||
export default function RuleEditor({ open, rule, onSave, onClose, sensors = [], outputs = [], saving }) {
|
||||
export default function RuleEditor({ open, rule, onSave, onClose, sensors = [], outputs = [], colorTags: availableColorTags = [], saving }) {
|
||||
const [name, setName] = useState('');
|
||||
const [selectedTags, setSelectedTags] = useState([]); // array of tag ids
|
||||
|
||||
// Time range state
|
||||
// Scheduled time state (trigger at specific time)
|
||||
const [useScheduledTime, setUseScheduledTime] = useState(false);
|
||||
const [scheduledTime, setScheduledTime] = useState('08:00');
|
||||
const [scheduledDays, setScheduledDays] = useState(['mon', 'tue', 'wed', 'thu', 'fri']);
|
||||
|
||||
// Time range state (active during window)
|
||||
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']);
|
||||
const [timeRangeDays, setTimeRangeDays] = useState(['mon', 'tue', 'wed', 'thu', 'fri']);
|
||||
|
||||
// Sensor conditions state
|
||||
const [useSensors, setUseSensors] = useState(false);
|
||||
@@ -105,20 +145,37 @@ export default function RuleEditor({ open, rule, onSave, onClose, sensors = [],
|
||||
const [actionType, setActionType] = useState('toggle');
|
||||
const [target, setTarget] = useState('');
|
||||
const [toggleState, setToggleState] = useState(true);
|
||||
const [outputLevel, setOutputLevel] = useState(5); // 1-10 for port outputs
|
||||
const [duration, setDuration] = useState(15);
|
||||
|
||||
// Check if target is a binary (on/off) output or level (1-10) output
|
||||
const selectedOutput = outputs.find(o => o.id === target);
|
||||
const isBinaryOutput = selectedOutput?.type === 'plug' || selectedOutput?.type === 'virtual';
|
||||
|
||||
// Reset form when rule changes or dialog opens
|
||||
useEffect(() => {
|
||||
if (rule) {
|
||||
setName(rule.name);
|
||||
// colorTags can be array or single value for backwards compat
|
||||
const tags = rule.colorTags || (rule.colorTag ? [rule.colorTag] : []);
|
||||
setSelectedTags(Array.isArray(tags) ? tags : []);
|
||||
|
||||
// Parse trigger
|
||||
const trigger = rule.trigger || {};
|
||||
|
||||
// Scheduled time
|
||||
setUseScheduledTime(!!trigger.scheduledTime);
|
||||
if (trigger.scheduledTime) {
|
||||
setScheduledTime(trigger.scheduledTime.time || '08:00');
|
||||
setScheduledDays(trigger.scheduledTime.days || []);
|
||||
}
|
||||
|
||||
// Time range
|
||||
setUseTimeRange(!!trigger.timeRange);
|
||||
if (trigger.timeRange) {
|
||||
setTimeStart(trigger.timeRange.start || '08:00');
|
||||
setTimeEnd(trigger.timeRange.end || '18:00');
|
||||
setDays(trigger.timeRange.days || []);
|
||||
setTimeRangeDays(trigger.timeRange.days || []);
|
||||
}
|
||||
|
||||
setUseSensors(!!trigger.sensors && trigger.sensors.length > 0);
|
||||
@@ -132,22 +189,28 @@ export default function RuleEditor({ open, rule, onSave, onClose, sensors = [],
|
||||
setTarget(rule.action?.target || '');
|
||||
if (rule.action?.type === 'toggle') {
|
||||
setToggleState(rule.action?.state ?? true);
|
||||
setOutputLevel(rule.action?.level ?? 5);
|
||||
} else {
|
||||
setDuration(rule.action?.duration || 15);
|
||||
}
|
||||
} else {
|
||||
// Reset to defaults
|
||||
setName('');
|
||||
setUseTimeRange(true);
|
||||
setSelectedTags([]);
|
||||
setUseScheduledTime(true);
|
||||
setScheduledTime('08:00');
|
||||
setScheduledDays(['mon', 'tue', 'wed', 'thu', 'fri']);
|
||||
setUseTimeRange(false);
|
||||
setTimeStart('08:00');
|
||||
setTimeEnd('18:00');
|
||||
setDays(['mon', 'tue', 'wed', 'thu', 'fri']);
|
||||
setTimeRangeDays(['mon', 'tue', 'wed', 'thu', 'fri']);
|
||||
setUseSensors(false);
|
||||
setSensorConditions([{ sensor: sensors[0]?.id || '', operator: '>', value: 25 }]);
|
||||
setSensorLogic('and');
|
||||
setActionType('toggle');
|
||||
setTarget(outputs[0]?.id || '');
|
||||
setToggleState(true);
|
||||
setOutputLevel(5);
|
||||
setDuration(15);
|
||||
}
|
||||
}, [rule, open, sensors, outputs]);
|
||||
@@ -160,8 +223,12 @@ export default function RuleEditor({ open, rule, onSave, onClose, sensors = [],
|
||||
if (!target && outputs.length > 0) setTarget(outputs[0].id);
|
||||
}, [sensors, outputs, sensorConditions, target]);
|
||||
|
||||
const handleDaysChange = (event, newDays) => {
|
||||
if (newDays.length > 0) setDays(newDays);
|
||||
const handleScheduledDaysChange = (event, newDays) => {
|
||||
if (newDays.length > 0) setScheduledDays(newDays);
|
||||
};
|
||||
|
||||
const handleTimeRangeDaysChange = (event, newDays) => {
|
||||
if (newDays.length > 0) setTimeRangeDays(newDays);
|
||||
};
|
||||
|
||||
const addSensorCondition = () => {
|
||||
@@ -185,8 +252,11 @@ export default function RuleEditor({ open, rule, onSave, onClose, sensors = [],
|
||||
|
||||
// Build trigger object
|
||||
const trigger = {};
|
||||
if (useScheduledTime) {
|
||||
trigger.scheduledTime = { time: scheduledTime, days: scheduledDays };
|
||||
}
|
||||
if (useTimeRange) {
|
||||
trigger.timeRange = { start: timeStart, end: timeEnd, days };
|
||||
trigger.timeRange = { start: timeStart, end: timeEnd, days: timeRangeDays };
|
||||
}
|
||||
if (useSensors && sensorConditions.length > 0) {
|
||||
trigger.sensors = sensorConditions.map(c => ({
|
||||
@@ -196,19 +266,35 @@ export default function RuleEditor({ open, rule, onSave, onClose, sensors = [],
|
||||
trigger.sensorLogic = sensorLogic;
|
||||
}
|
||||
|
||||
const ruleData = {
|
||||
name,
|
||||
trigger,
|
||||
action: actionType === 'toggle'
|
||||
? { type: 'toggle', target, targetLabel: selectedOutput?.label, state: toggleState }
|
||||
: { type: 'keepOn', target, targetLabel: selectedOutput?.label, duration }
|
||||
};
|
||||
const isBinaryTarget = selectedOutput?.type === 'plug' || selectedOutput?.type === 'virtual';
|
||||
|
||||
// Build action object based on output type
|
||||
let action;
|
||||
if (actionType === 'toggle') {
|
||||
action = {
|
||||
type: 'toggle',
|
||||
target,
|
||||
targetLabel: selectedOutput?.label,
|
||||
...(isBinaryTarget ? { state: toggleState } : { level: outputLevel })
|
||||
};
|
||||
} else {
|
||||
action = {
|
||||
type: 'keepOn',
|
||||
target,
|
||||
targetLabel: selectedOutput?.label,
|
||||
duration,
|
||||
...(isBinaryTarget ? {} : { level: outputLevel })
|
||||
};
|
||||
}
|
||||
|
||||
const ruleData = { name, trigger, action, colorTags: selectedTags };
|
||||
onSave(ruleData);
|
||||
};
|
||||
|
||||
const isValid = name.trim().length > 0 &&
|
||||
(useTimeRange || useSensors) &&
|
||||
(!useTimeRange || days.length > 0) &&
|
||||
(useScheduledTime || useTimeRange || useSensors) &&
|
||||
(!useScheduledTime || scheduledDays.length > 0) &&
|
||||
(!useTimeRange || timeRangeDays.length > 0) &&
|
||||
(!useSensors || sensorConditions.every(c => c.sensor)) &&
|
||||
target;
|
||||
|
||||
@@ -241,14 +327,119 @@ export default function RuleEditor({ open, rule, onSave, onClose, sensors = [],
|
||||
disabled={saving}
|
||||
/>
|
||||
|
||||
{/* Color Tag Picker (multi-select) */}
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, flexWrap: 'wrap' }}>
|
||||
<Typography variant="body2" color="text.secondary">Tags:</Typography>
|
||||
<Box
|
||||
onClick={() => setSelectedTags([])}
|
||||
sx={{
|
||||
width: 24,
|
||||
height: 24,
|
||||
borderRadius: '50%',
|
||||
bgcolor: '#504945',
|
||||
cursor: 'pointer',
|
||||
border: selectedTags.length === 0 ? '3px solid #ebdbb2' : '2px solid #504945',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
fontSize: '0.7rem',
|
||||
'&:hover': { opacity: 0.8 }
|
||||
}}
|
||||
>
|
||||
✕
|
||||
</Box>
|
||||
{availableColorTags.map(tag => (
|
||||
<Box
|
||||
key={tag.id}
|
||||
onClick={() => {
|
||||
if (selectedTags.includes(tag.id)) {
|
||||
setSelectedTags(selectedTags.filter(t => t !== tag.id));
|
||||
} else {
|
||||
setSelectedTags([...selectedTags, tag.id]);
|
||||
}
|
||||
}}
|
||||
sx={{
|
||||
width: 24,
|
||||
height: 24,
|
||||
borderRadius: '50%',
|
||||
bgcolor: tag.color,
|
||||
cursor: 'pointer',
|
||||
border: selectedTags.includes(tag.id) ? '3px solid #ebdbb2' : '2px solid transparent',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
'&:hover': { opacity: 0.8 }
|
||||
}}
|
||||
>
|
||||
{selectedTags.includes(tag.id) && <span style={{ fontSize: '0.7rem' }}>✓</span>}
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
|
||||
{/* TRIGGERS SECTION */}
|
||||
<Box>
|
||||
<Typography variant="subtitle2" color="text.secondary" gutterBottom>
|
||||
TRIGGERS (When to activate - conditions are combined with AND)
|
||||
TRIGGERS (When to activate)
|
||||
</Typography>
|
||||
<Divider sx={{ mb: 2 }} />
|
||||
|
||||
{/* Time Range Trigger */}
|
||||
{/* Scheduled Time Trigger (fires at exact time) */}
|
||||
<Paper sx={{ p: 2, mb: 2, bgcolor: useScheduledTime ? 'action.selected' : 'background.default' }}>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Switch
|
||||
checked={useScheduledTime}
|
||||
onChange={(e) => setUseScheduledTime(e.target.checked)}
|
||||
disabled={saving}
|
||||
/>
|
||||
}
|
||||
label={<Typography fontWeight={600}>🕐 Scheduled Time (trigger at exact time)</Typography>}
|
||||
/>
|
||||
|
||||
{useScheduledTime && (
|
||||
<Box sx={{ mt: 2, display: 'flex', flexDirection: 'column', gap: 2 }}>
|
||||
<TextField
|
||||
label="Trigger At"
|
||||
type="time"
|
||||
value={scheduledTime}
|
||||
onChange={(e) => setScheduledTime(e.target.value)}
|
||||
InputLabelProps={{ shrink: true }}
|
||||
size="small"
|
||||
sx={{ width: 150 }}
|
||||
disabled={saving}
|
||||
/>
|
||||
<Box>
|
||||
<Typography variant="body2" color="text.secondary" sx={{ mb: 1 }}>
|
||||
Days
|
||||
</Typography>
|
||||
<ToggleButtonGroup
|
||||
value={scheduledDays}
|
||||
onChange={handleScheduledDaysChange}
|
||||
size="small"
|
||||
disabled={saving}
|
||||
>
|
||||
{DAYS.map(day => (
|
||||
<ToggleButton
|
||||
key={day.key}
|
||||
value={day.key}
|
||||
sx={{
|
||||
'&.Mui-selected': {
|
||||
bgcolor: '#d3869b',
|
||||
color: '#282828',
|
||||
'&:hover': { bgcolor: '#e396a5' }
|
||||
}
|
||||
}}
|
||||
>
|
||||
{day.label}
|
||||
</ToggleButton>
|
||||
))}
|
||||
</ToggleButtonGroup>
|
||||
</Box>
|
||||
</Box>
|
||||
)}
|
||||
</Paper>
|
||||
|
||||
{/* Time Range Trigger (active within window) */}
|
||||
<Paper sx={{ p: 2, mb: 2, bgcolor: useTimeRange ? 'action.selected' : 'background.default' }}>
|
||||
<FormControlLabel
|
||||
control={
|
||||
@@ -258,7 +449,7 @@ export default function RuleEditor({ open, rule, onSave, onClose, sensors = [],
|
||||
disabled={saving}
|
||||
/>
|
||||
}
|
||||
label={<Typography fontWeight={600}>⏰ Time Range</Typography>}
|
||||
label={<Typography fontWeight={600}>⏰ Time Range (active during window)</Typography>}
|
||||
/>
|
||||
|
||||
{useTimeRange && (
|
||||
@@ -289,8 +480,8 @@ export default function RuleEditor({ open, rule, onSave, onClose, sensors = [],
|
||||
Days
|
||||
</Typography>
|
||||
<ToggleButtonGroup
|
||||
value={days}
|
||||
onChange={handleDaysChange}
|
||||
value={timeRangeDays}
|
||||
onChange={handleTimeRangeDaysChange}
|
||||
size="small"
|
||||
disabled={saving}
|
||||
>
|
||||
@@ -425,39 +616,91 @@ export default function RuleEditor({ open, rule, onSave, onClose, sensors = [],
|
||||
</Select>
|
||||
</FormControl>
|
||||
|
||||
{/* Toggle action controls */}
|
||||
{actionType === 'toggle' && (
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Switch
|
||||
checked={toggleState}
|
||||
onChange={(e) => setToggleState(e.target.checked)}
|
||||
color="primary"
|
||||
disabled={saving}
|
||||
<Box>
|
||||
{isBinaryOutput ? (
|
||||
// Binary output: On/Off switch
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Switch
|
||||
checked={toggleState}
|
||||
onChange={(e) => setToggleState(e.target.checked)}
|
||||
color="primary"
|
||||
disabled={saving}
|
||||
/>
|
||||
}
|
||||
label={toggleState ? 'Turn ON' : 'Turn OFF'}
|
||||
/>
|
||||
}
|
||||
label={toggleState ? 'Turn ON' : 'Turn OFF'}
|
||||
/>
|
||||
) : (
|
||||
// Level output: 1-10 slider
|
||||
<Box>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
Set Level: {outputLevel}
|
||||
</Typography>
|
||||
<Slider
|
||||
value={outputLevel}
|
||||
onChange={(e, val) => setOutputLevel(val)}
|
||||
min={1}
|
||||
max={10}
|
||||
step={1}
|
||||
marks={[
|
||||
{ value: 1, label: '1' },
|
||||
{ value: 5, label: '5' },
|
||||
{ value: 10, label: '10' }
|
||||
]}
|
||||
valueLabelDisplay="auto"
|
||||
disabled={saving}
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{/* Keep On action controls */}
|
||||
{actionType === 'keepOn' && (
|
||||
<Box>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
Duration: {duration} minutes
|
||||
</Typography>
|
||||
<Slider
|
||||
value={duration}
|
||||
onChange={(e, val) => setDuration(val)}
|
||||
min={1}
|
||||
max={120}
|
||||
marks={[
|
||||
{ value: 1, label: '1m' },
|
||||
{ value: 30, label: '30m' },
|
||||
{ value: 60, label: '1h' },
|
||||
{ value: 120, label: '2h' }
|
||||
]}
|
||||
valueLabelDisplay="auto"
|
||||
disabled={saving}
|
||||
/>
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
|
||||
{!isBinaryOutput && (
|
||||
// Level for port outputs
|
||||
<Box>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
Set Level: {outputLevel}
|
||||
</Typography>
|
||||
<Slider
|
||||
value={outputLevel}
|
||||
onChange={(e, val) => setOutputLevel(val)}
|
||||
min={1}
|
||||
max={10}
|
||||
step={1}
|
||||
marks={[
|
||||
{ value: 1, label: '1' },
|
||||
{ value: 5, label: '5' },
|
||||
{ value: 10, label: '10' }
|
||||
]}
|
||||
valueLabelDisplay="auto"
|
||||
disabled={saving}
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
<Box>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
Duration: {duration} minutes
|
||||
</Typography>
|
||||
<Slider
|
||||
value={duration}
|
||||
onChange={(e, val) => setDuration(val)}
|
||||
min={1}
|
||||
max={120}
|
||||
marks={[
|
||||
{ value: 1, label: '1m' },
|
||||
{ value: 30, label: '30m' },
|
||||
{ value: 60, label: '1h' },
|
||||
{ value: 120, label: '2h' }
|
||||
]}
|
||||
valueLabelDisplay="auto"
|
||||
disabled={saving}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
@@ -489,6 +732,6 @@ export default function RuleEditor({ open, rule, onSave, onClose, sensors = [],
|
||||
)}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
</Dialog >
|
||||
);
|
||||
}
|
||||
|
||||
@@ -6,12 +6,26 @@ import {
|
||||
Paper,
|
||||
Divider,
|
||||
Alert,
|
||||
CircularProgress
|
||||
CircularProgress,
|
||||
Chip,
|
||||
IconButton
|
||||
} from '@mui/material';
|
||||
import RuleCard from './RuleCard';
|
||||
import RuleEditor from './RuleEditor';
|
||||
import { useAuth } from './AuthContext';
|
||||
|
||||
// 8 color tags
|
||||
const COLOR_TAGS = [
|
||||
{ id: 'red', label: 'Red', color: '#fb4934' },
|
||||
{ id: 'orange', label: 'Orange', color: '#fe8019' },
|
||||
{ id: 'yellow', label: 'Yellow', color: '#fabd2f' },
|
||||
{ id: 'green', label: 'Green', color: '#b8bb26' },
|
||||
{ id: 'teal', label: 'Teal', color: '#8ec07c' },
|
||||
{ id: 'blue', label: 'Blue', color: '#83a598' },
|
||||
{ id: 'purple', label: 'Purple', color: '#d3869b' },
|
||||
{ id: 'gray', label: 'Gray', color: '#928374' }
|
||||
];
|
||||
|
||||
export default function RuleManager() {
|
||||
const { isAdmin } = useAuth();
|
||||
const [rules, setRules] = useState([]);
|
||||
@@ -21,6 +35,7 @@ export default function RuleManager() {
|
||||
const [editingRule, setEditingRule] = useState(null);
|
||||
const [devices, setDevices] = useState([]);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [filterTag, setFilterTag] = useState(null); // null = show all
|
||||
|
||||
// Get auth token from localStorage
|
||||
const getAuthHeaders = useCallback(() => {
|
||||
@@ -73,7 +88,7 @@ export default function RuleManager() {
|
||||
const seenDevices = new Set();
|
||||
|
||||
devices.forEach(d => {
|
||||
// Add environment sensors once per device
|
||||
// Add environment sensors once per device (temp, humidity)
|
||||
if (!seenDevices.has(d.dev_name)) {
|
||||
seenDevices.add(d.dev_name);
|
||||
availableSensors.push({
|
||||
@@ -88,7 +103,7 @@ export default function RuleManager() {
|
||||
});
|
||||
}
|
||||
|
||||
// Add each port as a sensor (Fan Speed, Brightness, CO2, etc.)
|
||||
// Add each port as a sensor (Fan Speed 0-10, Brightness 0-10, CO2, etc.)
|
||||
availableSensors.push({
|
||||
id: `${d.dev_name}:${d.port}:level`,
|
||||
label: `${d.dev_name} - ${d.port_name} Level`,
|
||||
@@ -96,29 +111,36 @@ export default function RuleManager() {
|
||||
});
|
||||
});
|
||||
|
||||
// Build available outputs: Tapo plugs + device fans/lights
|
||||
// Build available outputs: Tapo plugs + ALL device ports + 4 virtual channels
|
||||
const availableOutputs = [
|
||||
// Tapo smart plugs
|
||||
{ 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'
|
||||
}))
|
||||
// All device ports as outputs
|
||||
...devices.map(d => ({
|
||||
id: `${d.dev_name}:${d.port}:out`,
|
||||
label: `${d.dev_name} - ${d.port_name}`,
|
||||
type: d.port_name.toLowerCase()
|
||||
})),
|
||||
// 4 virtual channels
|
||||
{ id: 'virtual-1', label: 'Virtual Channel 1', type: 'virtual' },
|
||||
{ id: 'virtual-2', label: 'Virtual Channel 2', type: 'virtual' },
|
||||
{ id: 'virtual-3', label: 'Virtual Channel 3', type: 'virtual' },
|
||||
{ id: 'virtual-4', label: 'Virtual Channel 4', type: 'virtual' }
|
||||
];
|
||||
|
||||
// Add Tapo and virtual channels as sensors (on/off state)
|
||||
[...availableOutputs.filter(o => o.type === 'plug' || o.type === 'virtual')].forEach(o => {
|
||||
availableSensors.push({
|
||||
id: `${o.id}:state`,
|
||||
label: `${o.label} (State)`,
|
||||
type: 'output-state'
|
||||
});
|
||||
});
|
||||
|
||||
const handleAddRule = () => {
|
||||
setEditingRule(null);
|
||||
setEditorOpen(true);
|
||||
@@ -172,11 +194,11 @@ export default function RuleManager() {
|
||||
setSaving(true);
|
||||
try {
|
||||
if (editingRule) {
|
||||
// Update existing rule
|
||||
// Update existing rule - preserve enabled state
|
||||
const res = await fetch(`api/rules/${editingRule.id}`, {
|
||||
method: 'PUT',
|
||||
headers: getAuthHeaders(),
|
||||
body: JSON.stringify(ruleData)
|
||||
body: JSON.stringify({ ...ruleData, enabled: editingRule.enabled })
|
||||
});
|
||||
if (!res.ok) throw new Error('Failed to update rule');
|
||||
const updated = await res.json();
|
||||
@@ -206,6 +228,36 @@ export default function RuleManager() {
|
||||
setEditingRule(null);
|
||||
};
|
||||
|
||||
// Move rule up or down
|
||||
const handleMoveRule = async (ruleId, direction) => {
|
||||
const idx = rules.findIndex(r => r.id === ruleId);
|
||||
if (idx === -1) return;
|
||||
if (direction === 'up' && idx === 0) return;
|
||||
if (direction === 'down' && idx === rules.length - 1) return;
|
||||
|
||||
const newRules = [...rules];
|
||||
const swapIdx = direction === 'up' ? idx - 1 : idx + 1;
|
||||
[newRules[idx], newRules[swapIdx]] = [newRules[swapIdx], newRules[idx]];
|
||||
setRules(newRules);
|
||||
|
||||
// Save new order to server
|
||||
try {
|
||||
const ruleIds = newRules.map(r => r.id);
|
||||
await fetch('api/rules/reorder', {
|
||||
method: 'PUT',
|
||||
headers: getAuthHeaders(),
|
||||
body: JSON.stringify({ ruleIds })
|
||||
});
|
||||
} catch (err) {
|
||||
setError('Failed to save order');
|
||||
}
|
||||
};
|
||||
|
||||
// Filter rules by color tag
|
||||
const filteredRules = filterTag
|
||||
? rules.filter(r => (r.colorTags || []).includes(filterTag))
|
||||
: rules;
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<Paper sx={{ mt: 4, p: 3, textAlign: 'center' }}>
|
||||
@@ -250,7 +302,34 @@ export default function RuleManager() {
|
||||
)}
|
||||
</Box>
|
||||
|
||||
<Divider sx={{ mb: 3 }} />
|
||||
<Divider sx={{ mb: 2 }} />
|
||||
|
||||
{/* Color tag filter */}
|
||||
<Box sx={{ display: 'flex', gap: 1, mb: 2, flexWrap: 'wrap', alignItems: 'center' }}>
|
||||
<Typography variant="body2" color="text.secondary" sx={{ mr: 1 }}>Filter:</Typography>
|
||||
<Chip
|
||||
label="All"
|
||||
size="small"
|
||||
onClick={() => setFilterTag(null)}
|
||||
sx={{
|
||||
bgcolor: filterTag === null ? '#ebdbb2' : '#504945',
|
||||
color: filterTag === null ? '#282828' : '#ebdbb2'
|
||||
}}
|
||||
/>
|
||||
{COLOR_TAGS.map(tag => (
|
||||
<Chip
|
||||
key={tag.id}
|
||||
size="small"
|
||||
onClick={() => setFilterTag(filterTag === tag.id ? null : tag.id)}
|
||||
sx={{
|
||||
bgcolor: filterTag === tag.id ? tag.color : '#504945',
|
||||
color: filterTag === tag.id ? '#282828' : tag.color,
|
||||
border: `2px solid ${tag.color}`,
|
||||
'&:hover': { bgcolor: tag.color, color: '#282828' }
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</Box>
|
||||
|
||||
{error && (
|
||||
<Alert severity="error" sx={{ mb: 2 }} onClose={() => setError(null)}>
|
||||
@@ -258,21 +337,27 @@ export default function RuleManager() {
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{rules.length === 0 ? (
|
||||
{filteredRules.length === 0 ? (
|
||||
<Box sx={{ textAlign: 'center', py: 4 }}>
|
||||
<Typography color="text.secondary">
|
||||
No rules configured. {isAdmin && 'Click "Add Rule" to create one.'}
|
||||
{rules.length === 0
|
||||
? (isAdmin ? 'No rules configured. Click "Add Rule" to create one.' : 'No rules configured.')
|
||||
: 'No rules match the selected filter.'
|
||||
}
|
||||
</Typography>
|
||||
</Box>
|
||||
) : (
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
|
||||
{rules.map(rule => (
|
||||
{filteredRules.map((rule, idx) => (
|
||||
<RuleCard
|
||||
key={rule.id}
|
||||
rule={rule}
|
||||
onEdit={isAdmin ? () => handleEditRule(rule) : null}
|
||||
onDelete={isAdmin ? () => handleDeleteRule(rule.id) : null}
|
||||
onToggle={isAdmin ? () => handleToggleRule(rule.id) : null}
|
||||
onMoveUp={isAdmin && idx > 0 ? () => handleMoveRule(rule.id, 'up') : null}
|
||||
onMoveDown={isAdmin && idx < filteredRules.length - 1 ? () => handleMoveRule(rule.id, 'down') : null}
|
||||
colorTags={COLOR_TAGS}
|
||||
readOnly={!isAdmin}
|
||||
/>
|
||||
))}
|
||||
@@ -287,6 +372,7 @@ export default function RuleManager() {
|
||||
onClose={handleCloseEditor}
|
||||
sensors={availableSensors}
|
||||
outputs={availableOutputs}
|
||||
colorTags={COLOR_TAGS}
|
||||
saving={saving}
|
||||
/>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user