1611 lines
54 KiB
TypeScript
1611 lines
54 KiB
TypeScript
import {
|
|
Button,
|
|
Checkbox,
|
|
DialogActions,
|
|
DialogContent,
|
|
DialogTitle,
|
|
Divider,
|
|
FormControl,
|
|
FormControlLabel,
|
|
FormHelperText,
|
|
FormLabel,
|
|
Grid2 as Grid,
|
|
IconButton,
|
|
InputAdornment,
|
|
MenuItem,
|
|
Switch,
|
|
TextField,
|
|
Theme,
|
|
Tooltip,
|
|
Typography,
|
|
useTheme
|
|
} from "@mui/material";
|
|
import AddIcon from "@mui/icons-material/AddCircle";
|
|
import RemoveIcon from "@mui/icons-material/RemoveCircle";
|
|
import classNames from "classnames";
|
|
import DeleteButton from "common/DeleteButton";
|
|
import ResponsiveDialog from "common/ResponsiveDialog";
|
|
import { coalesce, or, capitalize } from "utils";
|
|
import { useInteractionsAPI, usePrevious, useSnackbar } from "hooks";
|
|
import { Component, Device, Interaction } from "models";
|
|
import moment from "moment-timezone";
|
|
import {
|
|
componentIDToString,
|
|
emptyComponentId,
|
|
getComponentIDString,
|
|
sameComponentID,
|
|
stringToComponentId
|
|
} from "pbHelpers/Component";
|
|
import {
|
|
extension,
|
|
getMeasurements,
|
|
GetNumNodes,
|
|
hasInteractionResultType,
|
|
isSource
|
|
} from "pbHelpers/ComponentType";
|
|
import { ComponentType, Measurement, Operator, Result } from "pbHelpers/Enums";
|
|
import {
|
|
getDefaultInteraction,
|
|
isInteractionValid,
|
|
isMeasurementTypeValid,
|
|
isSourceValid,
|
|
timeOfDayDescriptor
|
|
} from "pbHelpers/Interaction";
|
|
import { describeMeasurement, MeasurementDescriber } from "pbHelpers/MeasurementDescriber";
|
|
import { pond } from "protobuf-ts/pond";
|
|
import { quack } from "protobuf-ts/quack";
|
|
import { useGlobalState } from "providers";
|
|
import React, { useCallback, useEffect, useState } from "react";
|
|
import { hasDeviceFeature } from "services/feature/service";
|
|
import RemoveInteraction from "./RemoveInteraction";
|
|
import { makeStyles } from "@mui/styles";
|
|
import { green, red } from "@mui/material/colors";
|
|
import { LocalizationProvider, TimePicker } from "@mui/x-date-pickers";
|
|
import { AdapterMoment } from "@mui/x-date-pickers/AdapterMoment";
|
|
// import dayjs from "dayjs";
|
|
import CancelSubmit from "common/CancelSubmit";
|
|
import { Sensor } from "ventilation/drawable/Sensor";
|
|
|
|
// import { Sensor } from "ventilation/drawable/Sensor";
|
|
|
|
const useStyles = makeStyles((theme: Theme) => {
|
|
return ({
|
|
dialogContent: {
|
|
marginTop: theme.spacing(1)
|
|
},
|
|
borderedContainer: {
|
|
padding: theme.spacing(1),
|
|
marginBottom: theme.spacing(2),
|
|
border: "1px solid rgba(255, 255, 255, 0.12)",
|
|
borderRadius: "4px"
|
|
},
|
|
greenButton: {
|
|
color: green["600"]
|
|
},
|
|
redButton: {
|
|
color: red["600"]
|
|
},
|
|
noPadding: {
|
|
padding: 0
|
|
},
|
|
forPrompt: {
|
|
fontSize: "0.875em",
|
|
marginTop: "10px"
|
|
},
|
|
timeRange: {
|
|
fontSize: "0.875em",
|
|
marginTop: "20px"
|
|
},
|
|
singleInput: {
|
|
minHeight: "48px"
|
|
}
|
|
})
|
|
});
|
|
|
|
interface Props {
|
|
device: Device;
|
|
initialComponent?: Component;
|
|
initialInteraction?: Interaction;
|
|
components: Component[];
|
|
mode?: string;
|
|
isDialogOpen: boolean;
|
|
closeDialogCallback: Function;
|
|
refreshCallback: Function;
|
|
canEdit?: boolean;
|
|
sensor?: Sensor;
|
|
}
|
|
|
|
export default function InteractionSettings(props: Props) {
|
|
const {
|
|
device,
|
|
initialComponent,
|
|
initialInteraction,
|
|
components,
|
|
mode,
|
|
isDialogOpen,
|
|
closeDialogCallback,
|
|
refreshCallback,
|
|
canEdit,
|
|
sensor
|
|
} = props;
|
|
const theme = useTheme();
|
|
const { success, error } = useSnackbar();
|
|
const prevInitialInteraction = usePrevious(initialInteraction);
|
|
const prevComponents = usePrevious(components);
|
|
const prevInitialComponent = usePrevious(initialComponent);
|
|
const prevIsDialogOpen = usePrevious(isDialogOpen);
|
|
const classes = useStyles();
|
|
const [{ user, as }] = useGlobalState();
|
|
const interactionsAPI = useInteractionsAPI();
|
|
const [interaction, setInteraction] = useState<Interaction>(
|
|
Interaction.clone(initialInteraction)
|
|
);
|
|
const [isRemoveInteractionOpen, setIsRemoveInteractionOpen] = useState<boolean>(false);
|
|
const [mappedComponents, setMappedComponents] = useState<Map<string, Component>>(new Map());
|
|
const [numConditions, setNumConditions] = useState<number>(0);
|
|
const [rawConditionValues, setRawConditionValues] = useState<string[]>([]);
|
|
const [rawResultValue, setRawResultValue] = useState<string>("");
|
|
const [dutyCycleEnabled, setDutyCycleEnabled] = useState<boolean>(false);
|
|
const [dutyCycle, setDutyCycle] = useState<string>("");
|
|
const [timezone, setTimezone] = useState<string | undefined>(undefined);
|
|
//whether is any node(0), average of all nodes(1), single node(2), or node diff(3)
|
|
const [subtypeDropdown, setSubtypeDropdown] = useState<number>(0);
|
|
|
|
const initialConditions = useCallback(
|
|
(type: quack.ComponentType): pond.InteractionCondition[] => {
|
|
let measurementType = availableMeasurementTypes(type)[0];
|
|
let condition = pond.InteractionCondition.create({
|
|
measurementType: measurementType,
|
|
comparison: measurementType === Measurement.boolean ? Operator.equals : Operator.less,
|
|
value: 0
|
|
});
|
|
return [condition];
|
|
},
|
|
[]
|
|
);
|
|
|
|
const setDefaultState = useCallback(() => {
|
|
let interaction = getDefaultInteraction();
|
|
if (initialInteraction && mode === "update") {
|
|
interaction = initialInteraction;
|
|
if (interaction.settings.subtype === 0 || interaction.settings.subtype === 1) {
|
|
setSubtypeDropdown(interaction.settings.subtype);
|
|
} else {
|
|
if (interaction.settings.subtype >= 138) {
|
|
setSubtypeDropdown(4);
|
|
} else if (interaction.settings.subtype > 17) {
|
|
setSubtypeDropdown(3);
|
|
} else if (interaction.settings.subtype > 1) {
|
|
setSubtypeDropdown(2);
|
|
}
|
|
}
|
|
}
|
|
if (initialComponent && mode === "add") {
|
|
interaction.settings.result = pond.InteractionResult.create({
|
|
type: Result.report,
|
|
value: 0,
|
|
mode: 0
|
|
});
|
|
if (isSource(initialComponent.settings.type)) {
|
|
interaction.settings.source = initialComponent.location();
|
|
interaction.settings.conditions = initialConditions(initialComponent.settings.type);
|
|
}
|
|
}
|
|
let rawConditionValues = [] as Array<string>;
|
|
interaction.settings.conditions.forEach((condition: pond.InteractionCondition) => {
|
|
let value = describeMeasurement(
|
|
condition.measurementType,
|
|
or(initialComponent, Component.create()).settings.type,
|
|
or(initialComponent, Component.create()).settings.subtype,
|
|
undefined,
|
|
user
|
|
).toDisplay(condition.value);
|
|
rawConditionValues.push(value.toString());
|
|
});
|
|
let numConditions = interaction.settings.conditions.length;
|
|
let mappedComponents: Map<string, Component> = new Map();
|
|
components.forEach(component => mappedComponents.set(component.locationString(), component));
|
|
let interactionResult = pond.InteractionResult.create(
|
|
or(interaction.settings.result, undefined)
|
|
);
|
|
|
|
if (sensor) {
|
|
interaction.settings.subtype = 2;
|
|
interaction.settings.nodeOne = sensor.index;
|
|
interaction.settings.nodeTwo = sensor.index;
|
|
}
|
|
|
|
setIsRemoveInteractionOpen(false);
|
|
setNumConditions(numConditions);
|
|
setRawConditionValues(rawConditionValues);
|
|
setRawResultValue(interactionResult.value.toString());
|
|
setDutyCycleEnabled(interactionResult.dutyCycle > 0);
|
|
setDutyCycle(interactionResult.dutyCycle.toString());
|
|
setMappedComponents(mappedComponents);
|
|
setInteraction(interaction);
|
|
}, [components, initialComponent, initialConditions, initialInteraction, mode, /*sensor*/]);
|
|
|
|
const availableSources = () => {
|
|
return components.filter(component => isSource(component.settings.type));
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (user && user.settings.timezone) {
|
|
setTimezone(user.settings.timezone);
|
|
}
|
|
if (isDialogOpen && prevIsDialogOpen) return;
|
|
if (
|
|
prevInitialInteraction !== initialInteraction ||
|
|
(prevComponents && prevComponents.length !== components.length) ||
|
|
getComponentIDString(prevInitialComponent) !== getComponentIDString(initialComponent) ||
|
|
isDialogOpen !== prevIsDialogOpen
|
|
) {
|
|
setDefaultState();
|
|
}
|
|
}, [
|
|
components.length,
|
|
initialComponent,
|
|
initialInteraction,
|
|
prevComponents,
|
|
prevInitialComponent,
|
|
prevInitialInteraction,
|
|
setDefaultState,
|
|
user,
|
|
isDialogOpen,
|
|
prevIsDialogOpen
|
|
]);
|
|
|
|
const getAvailableSinks = () => {
|
|
let type = or(interaction.settings.result, pond.InteractionResult.create()).type;
|
|
return components.filter(component => hasInteractionResultType(component.settings.type, type));
|
|
};
|
|
|
|
const close = () => {
|
|
closeDialogCallback();
|
|
if (mode === "add") {
|
|
setDefaultState();
|
|
}
|
|
};
|
|
|
|
const submit = () => {
|
|
let settings = interaction.settings;
|
|
if (multiNodeSource() && (settings.nodeOne > 0 || settings.nodeTwo > 0)) {
|
|
if (subtypeDropdown === 3 || subtypeDropdown === 2) {
|
|
settings.subtype = interaction.subtypeFromNodes(settings.nodeOne, settings.nodeTwo);
|
|
if (
|
|
interaction.settings.nodeOne > interaction.settings.nodeTwo &&
|
|
interaction.settings.nodeTwo !== 0
|
|
) {
|
|
//flip operator and send negative comparitor to save
|
|
settings.conditions.forEach(condition => {
|
|
if (
|
|
condition.comparison === quack.RelationalOperator.RELATIONAL_OPERATOR_GREATER_THAN
|
|
) {
|
|
condition.comparison = quack.RelationalOperator.RELATIONAL_OPERATOR_LESS_THAN;
|
|
} else if (
|
|
condition.comparison === quack.RelationalOperator.RELATIONAL_OPERATOR_LESS_THAN
|
|
) {
|
|
condition.comparison = quack.RelationalOperator.RELATIONAL_OPERATOR_GREATER_THAN;
|
|
}
|
|
condition.value = condition.value * -1;
|
|
});
|
|
}
|
|
} else if (subtypeDropdown === 4) {
|
|
settings.subtype = Interaction.upToSubtype(settings.nodeOne);
|
|
}
|
|
} else {
|
|
settings.subtype = subtypeDropdown;
|
|
}
|
|
|
|
let sync = true;
|
|
if (interaction)
|
|
Object.keys(interaction?.settings).forEach(key => {
|
|
// Check if the key value has changed
|
|
let k = key as keyof pond.InteractionSettings;
|
|
let initial = JSON.stringify(initialInteraction?.settings[k]);
|
|
let after = JSON.stringify(interaction.settings[k]);
|
|
if (initial !== after) {
|
|
if (key !== "sortPriority") {
|
|
sync = false;
|
|
}
|
|
}
|
|
});
|
|
|
|
switch (mode) {
|
|
case "add":
|
|
interactionsAPI
|
|
.addInteraction(Number(device.settings.deviceId), settings, as)
|
|
.then(() => {
|
|
success("Interaction was successfully created");
|
|
refreshCallback();
|
|
})
|
|
.catch(() => error("Error occured when creating an interaction"))
|
|
.finally(() => close());
|
|
break;
|
|
default:
|
|
if (sync) {
|
|
let s = pond.InteractionPondSettings.create();
|
|
s.sortPriority = interaction.settings.sortPriority;
|
|
interactionsAPI
|
|
.updateInteractionPondSettings(Number(device.settings.deviceId), interaction.key(), s, as)
|
|
.then(() => {
|
|
success("Interaction pond settings were successfully updated");
|
|
refreshCallback();
|
|
})
|
|
.catch(() => error("Error when updating interaction pond settings"))
|
|
.finally(() => close());
|
|
} else {
|
|
interactionsAPI
|
|
.updateInteraction(Number(device.settings.deviceId), settings, as)
|
|
.then(() => {
|
|
success("Interaction was successfully updated");
|
|
refreshCallback();
|
|
})
|
|
.catch(() => error("Error occured when updating an interaction"))
|
|
.finally(() => close());
|
|
}
|
|
break;
|
|
}
|
|
};
|
|
|
|
const openRemoveInteraction = () => {
|
|
setIsRemoveInteractionOpen(true);
|
|
};
|
|
|
|
const closeRemoveInteraction = () => {
|
|
setIsRemoveInteractionOpen(false);
|
|
close();
|
|
};
|
|
|
|
const interactionRemoved = () => {
|
|
refreshCallback();
|
|
};
|
|
|
|
const addCondition = () => {
|
|
let updatedInteraction = Interaction.clone(interaction);
|
|
let updatedRawConditionValues = rawConditionValues;
|
|
if (numConditions < device.maxConditions() && interaction.settings.source) {
|
|
let condition = pond.InteractionCondition.create();
|
|
condition.measurementType = getMeasurements(
|
|
interaction.settings.source.type
|
|
)[0].measurementType;
|
|
condition.comparison =
|
|
condition.measurementType === Measurement.boolean ? Operator.equals : Operator.less;
|
|
updatedRawConditionValues.push("");
|
|
updatedInteraction.settings.conditions.push(condition);
|
|
|
|
setInteraction(updatedInteraction);
|
|
setNumConditions(numConditions + 1);
|
|
setRawConditionValues(updatedRawConditionValues);
|
|
}
|
|
};
|
|
|
|
const removeCondition = (index: number) => {
|
|
let updatedInteraction = Interaction.clone(interaction);
|
|
let updatedRawConditionValues = rawConditionValues;
|
|
if (numConditions > 1 && index < numConditions) {
|
|
updatedInteraction.settings.conditions.splice(index, 1);
|
|
updatedRawConditionValues.splice(index, 1);
|
|
setInteraction(updatedInteraction);
|
|
setNumConditions(numConditions - 1);
|
|
setRawConditionValues(updatedRawConditionValues);
|
|
}
|
|
};
|
|
|
|
const availableMeasurementTypes = (type: quack.ComponentType): quack.MeasurementType[] => {
|
|
return getMeasurements(type).map(m => m.measurementType);
|
|
};
|
|
|
|
//changing the source also resets the conditions
|
|
const changeSource = (event: any) => {
|
|
let updatedInteraction = Interaction.clone(interaction);
|
|
let changed = event.target.value !== componentIDToString(interaction.settings.source);
|
|
if (!changed) return;
|
|
updatedInteraction.settings.source = stringToComponentId(event.target.value.toString());
|
|
updatedInteraction.settings.conditions = initialConditions(
|
|
or(interaction.settings.source, quack.ComponentID.create()).type
|
|
);
|
|
let result = pond.InteractionResult.create(or(interaction.settings.result, undefined));
|
|
if (result.type === Result.report) {
|
|
updatedInteraction.settings.sink = emptyComponentId();
|
|
}
|
|
updatedInteraction.settings.result = result;
|
|
setInteraction(updatedInteraction);
|
|
setNumConditions(1);
|
|
setRawConditionValues([""]);
|
|
};
|
|
|
|
const changePriority = (event: any) => {
|
|
let updatedInteraction = Interaction.clone(interaction);
|
|
updatedInteraction.settings.priority = Number(event.target.value);
|
|
setInteraction(updatedInteraction);
|
|
};
|
|
|
|
const changeSortPriority = (event: any) => {
|
|
let updatedInteraction = Interaction.clone(interaction);
|
|
updatedInteraction.settings.sortPriority = Number(event.target.value);
|
|
setInteraction(updatedInteraction);
|
|
};
|
|
|
|
const describeSource = (measurementType: quack.MeasurementType): MeasurementDescriber => {
|
|
const source: Component = or(
|
|
mappedComponents.get(componentIDToString(interaction.settings.source)),
|
|
Component.create()
|
|
);
|
|
return describeMeasurement(measurementType, source.settings.type, source.settings.subtype, undefined, user);
|
|
};
|
|
|
|
const describeSink = (): MeasurementDescriber => {
|
|
const sink = mappedComponents.get(componentIDToString(interaction.settings.sink));
|
|
return describeMeasurement(
|
|
Measurement.boolean,
|
|
or(sink, Component.create()).settings.type,
|
|
or(sink, Component.create()).settings.subtype,
|
|
undefined,
|
|
user
|
|
);
|
|
};
|
|
|
|
const changeMeasurementType = (conditionIndex: number, event: any) => {
|
|
let updatedInteraction = Interaction.clone(interaction);
|
|
let measurementType = interaction.settings.conditions[conditionIndex].measurementType;
|
|
let rawValue = rawConditionValues[conditionIndex] as any;
|
|
updatedInteraction.settings.conditions[conditionIndex].value = describeSource(
|
|
measurementType
|
|
).toStored(rawValue);
|
|
updatedInteraction.settings.conditions[conditionIndex].measurementType = event.target.value;
|
|
if (event.target.value === Measurement.boolean) {
|
|
updatedInteraction.settings.conditions[conditionIndex].comparison = Operator.equals;
|
|
}
|
|
setInteraction(updatedInteraction);
|
|
};
|
|
|
|
const changeComparison = (conditionIndex: number, event: any) => {
|
|
let updatedInteraction = Interaction.clone(interaction);
|
|
updatedInteraction.settings.conditions[conditionIndex].comparison = event.target.value;
|
|
setInteraction(updatedInteraction);
|
|
};
|
|
|
|
const changeValue = (conditionIndex: number, event: any) => {
|
|
let updatedInteraction = Interaction.clone(interaction);
|
|
let updatedRawConditionValues = rawConditionValues;
|
|
let measurementType = interaction.settings.conditions[conditionIndex].measurementType;
|
|
updatedRawConditionValues[conditionIndex] = event.target.value;
|
|
updatedInteraction.settings.conditions[conditionIndex].value = describeSource(
|
|
measurementType
|
|
).toStored(event.target.value);
|
|
setInteraction(updatedInteraction);
|
|
setRawConditionValues(updatedRawConditionValues);
|
|
};
|
|
|
|
const changeResultValue = (event: any) => {
|
|
let updatedInteraction = Interaction.clone(interaction);
|
|
let value = event.target.value;
|
|
if (event.target.type === "checkbox") {
|
|
value = event.target.checked ? 1 : 0;
|
|
}
|
|
(updatedInteraction.settings.result as pond.InteractionResult).value = isNaN(value)
|
|
? 0
|
|
: Number(value);
|
|
setInteraction(updatedInteraction);
|
|
setRawResultValue(value);
|
|
};
|
|
|
|
const changeSubtype = (event: any) => {
|
|
let updatedInteraction = Interaction.clone(interaction);
|
|
let value = event.target.value;
|
|
if (!isNaN(value)) {
|
|
if (value < 2) {
|
|
updatedInteraction.settings.subtype = value;
|
|
}
|
|
setSubtypeDropdown(value);
|
|
updatedInteraction.settings.nodeOne = 0;
|
|
updatedInteraction.settings.nodeTwo = 0;
|
|
}
|
|
setInteraction(updatedInteraction);
|
|
};
|
|
|
|
const changeNode = (event: any, node: number) => {
|
|
let updatedInteraction = Interaction.clone(interaction);
|
|
let value = event.target.value;
|
|
if (!isNaN(value)) {
|
|
if (node === 1) {
|
|
updatedInteraction.settings.nodeOne = value;
|
|
} else if (node === 2) {
|
|
updatedInteraction.settings.nodeTwo = value;
|
|
}
|
|
}
|
|
setInteraction(updatedInteraction);
|
|
};
|
|
|
|
const changeResultType = (event: any) => {
|
|
let updatedInteraction = Interaction.clone(interaction);
|
|
let result = interaction.settings.result as pond.InteractionResult;
|
|
result.type = event.target.value;
|
|
if (result.type === Result.report) {
|
|
updatedInteraction.settings.sink = null;
|
|
} else if (result.type === Result.toggle) {
|
|
let availableSinks = getAvailableSinks();
|
|
if (availableSinks.length > 0) {
|
|
let firstSink = availableSinks[0];
|
|
updatedInteraction.settings.sink = quack.ComponentID.fromObject({
|
|
type: firstSink.settings.type,
|
|
addressType: firstSink.settings.addressType,
|
|
address: firstSink.settings.address
|
|
});
|
|
}
|
|
}
|
|
updatedInteraction.settings.result = result;
|
|
setInteraction(updatedInteraction);
|
|
};
|
|
|
|
const changeResultMode = (event: any) => {
|
|
let updatedInteraction = Interaction.clone(interaction);
|
|
let result = interaction.settings.result as pond.InteractionResult;
|
|
result.mode = event.target.value;
|
|
updatedInteraction.settings.result = result;
|
|
setInteraction(updatedInteraction);
|
|
};
|
|
|
|
const changeSink = (event: any) => {
|
|
let updatedInteraction = Interaction.clone(interaction);
|
|
updatedInteraction.settings.sink = stringToComponentId(event.target.value.toString());
|
|
if (
|
|
updatedInteraction.settings.sink.type === quack.ComponentType.COMPONENT_TYPE_INTERNAL_FUNCTION
|
|
) {
|
|
if (
|
|
updatedInteraction.settings.sink.addressType ===
|
|
quack.AddressType.ADDRESS_TYPE_INTERNAL_SLEEP
|
|
) {
|
|
if (updatedInteraction.settings.result) {
|
|
updatedInteraction.settings.result.value = 1;
|
|
}
|
|
}
|
|
}
|
|
setInteraction(updatedInteraction);
|
|
};
|
|
|
|
const toggleReport = (_event: any) => {
|
|
let updatedInteraction = Interaction.clone(interaction);
|
|
let notifications = or(
|
|
interaction.settings.notifications,
|
|
pond.InteractionNotifications.create()
|
|
);
|
|
notifications.reports = !notifications.reports;
|
|
updatedInteraction.settings.notifications = notifications;
|
|
setInteraction(updatedInteraction);
|
|
};
|
|
|
|
const toggleNotify = (_event: any) => {
|
|
let updatedInteraction = Interaction.clone(interaction);
|
|
let notifications = or(
|
|
updatedInteraction.settings.notifications,
|
|
pond.InteractionNotifications.create()
|
|
);
|
|
notifications.notify = !notifications.notify;
|
|
updatedInteraction.settings.notifications = notifications;
|
|
setInteraction(updatedInteraction);
|
|
};
|
|
|
|
const toggleDaySelected = (day: string, event: any) => {
|
|
let updatedInteraction = Interaction.clone(interaction);
|
|
let schedule = or(updatedInteraction.settings.schedule, pond.InteractionSchedule.create());
|
|
if (event.target.checked) {
|
|
if (!schedule.weekdays.includes(day)) {
|
|
schedule.weekdays.push(day);
|
|
}
|
|
} else {
|
|
schedule.weekdays.splice(schedule.weekdays.indexOf(day), 1);
|
|
}
|
|
updatedInteraction.settings.schedule = schedule;
|
|
setInteraction(updatedInteraction);
|
|
};
|
|
|
|
const setScheduleTime = (id: string, event: any) => {
|
|
let updatedInteraction = Interaction.clone(interaction);
|
|
let schedule = or(updatedInteraction.settings.schedule, pond.InteractionSchedule.create());
|
|
if (id === "shortcut") {
|
|
let value = event.target.value;
|
|
if (value === "allDay") {
|
|
schedule.timeOfDayStart = "00:00";
|
|
schedule.timeOfDayEnd = "24:00";
|
|
} else if (value === "before") {
|
|
schedule.timeOfDayStart = "00:00";
|
|
if (!schedule.timeOfDayEnd || schedule.timeOfDayEnd === "24:00") {
|
|
schedule.timeOfDayEnd = "23:59";
|
|
}
|
|
} else if (value === "after") {
|
|
schedule.timeOfDayEnd = "24:00";
|
|
if (schedule.timeOfDayStart === "00:00") {
|
|
schedule.timeOfDayStart = "00:01";
|
|
}
|
|
} else {
|
|
if (schedule.timeOfDayStart === "00:00") {
|
|
schedule.timeOfDayStart = "00:01";
|
|
}
|
|
if (schedule.timeOfDayEnd === "24:00") {
|
|
schedule.timeOfDayEnd = "23:59";
|
|
}
|
|
}
|
|
} else {
|
|
let timeOfDay =
|
|
event
|
|
.hour()
|
|
.toString()
|
|
.padStart(2, "0") +
|
|
":" +
|
|
event
|
|
.minute()
|
|
.toString()
|
|
.padStart(2, "0");
|
|
if (id === "start") {
|
|
schedule.timeOfDayStart = timeOfDay;
|
|
} else if (id === "end") {
|
|
if (timeOfDay === "00:00") {
|
|
timeOfDay = "24:00";
|
|
}
|
|
schedule.timeOfDayEnd = timeOfDay;
|
|
}
|
|
}
|
|
schedule.timezone = or(timezone, moment.tz.guess());
|
|
updatedInteraction.settings.schedule = schedule;
|
|
setInteraction(updatedInteraction);
|
|
};
|
|
|
|
const isInitialComponentTheSource = () => {
|
|
if (!interaction || !initialComponent) return false;
|
|
return sameComponentID(interaction.settings.source, initialComponent.location());
|
|
};
|
|
|
|
const isInitialComponentTheSink = () => {
|
|
if (!interaction || !initialComponent) return false;
|
|
let sinkID = JSON.stringify(quack.ComponentID.create(or(interaction.settings.sink, undefined)));
|
|
let component = initialComponent;
|
|
let componentID = JSON.stringify(
|
|
quack.ComponentID.create({
|
|
type: component.settings.type,
|
|
addressType: component.settings.addressType,
|
|
address: component.settings.address
|
|
})
|
|
);
|
|
return sinkID === componentID;
|
|
};
|
|
|
|
const invalidConditionValue = (index: number) => {
|
|
const conditions = interaction.settings.conditions;
|
|
if (conditions.length <= index) return false;
|
|
if (conditions[index].measurementType === Measurement.boolean) {
|
|
return false;
|
|
}
|
|
let value = rawConditionValues[index];
|
|
return value === "" || isNaN(Number(value));
|
|
};
|
|
|
|
const invalidConditionValues = () => {
|
|
let invalid = false;
|
|
interaction.settings.conditions.forEach((_, i) => {
|
|
if (invalidConditionValue(i)) {
|
|
invalid = true;
|
|
}
|
|
});
|
|
return invalid;
|
|
};
|
|
|
|
const invalidResultValue = () => {
|
|
return isNaN(Number(rawResultValue));
|
|
};
|
|
|
|
const getNodeOptions = (describer?: MeasurementDescriber) => {
|
|
let options = [];
|
|
let numNodes = 0;
|
|
if (initialComponent) {
|
|
if (initialComponent.lastMeasurement[0] && initialComponent.lastMeasurement[0].values[0]) {
|
|
numNodes = initialComponent.lastMeasurement[0].values[0].values.length; //use the new structure last measurement to determine the number of nodes
|
|
} else {
|
|
numNodes = GetNumNodes(
|
|
initialComponent.type(),
|
|
initialComponent.status.lastMeasurement?.measurement
|
|
);
|
|
}
|
|
}
|
|
|
|
for (let i = 0; i <= numNodes; i++) {
|
|
let label = i === 0 ? "None" : "Node " + i;
|
|
if (describer && i > 0) {
|
|
let details = describer.nodeDetails();
|
|
if (details && details.labels[i - 1]) {
|
|
label = details.labels[i - 1];
|
|
}
|
|
}
|
|
options.push(
|
|
<MenuItem key={i} value={i}>
|
|
{label}
|
|
</MenuItem>
|
|
);
|
|
}
|
|
return options;
|
|
};
|
|
|
|
//determine if the source component has nodes
|
|
const multiNodeSource = () => {
|
|
return getNodeOptions().length > 1;
|
|
};
|
|
|
|
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ UI BEGINS ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
|
|
|
|
const title = () => {
|
|
return (
|
|
<React.Fragment>
|
|
<Grid container justifyContent="space-between">
|
|
<Grid >
|
|
{mode && mode === "add" ? "Add Interaction" : "Interaction Settings"}
|
|
{/* <Typography variant="body2" color="textSecondary">
|
|
{sensor ? "Subnode: " + sensor.name() : device.name()}
|
|
</Typography> */}
|
|
</Grid>
|
|
</Grid>
|
|
</React.Fragment>
|
|
);
|
|
};
|
|
|
|
const sourceInput = () => {
|
|
return (
|
|
<TextField
|
|
select
|
|
id="source"
|
|
label="Source"
|
|
value={componentIDToString(interaction.settings.source)}
|
|
onChange={changeSource}
|
|
fullWidth
|
|
autoFocus={false}
|
|
margin="normal"
|
|
variant="outlined"
|
|
InputLabelProps={{ shrink: true }}
|
|
disabled={isInitialComponentTheSource() || !canEdit || mode === "update"}
|
|
SelectProps={{ className: classes.singleInput }}>
|
|
{sourceMenuItems()}
|
|
</TextField>
|
|
);
|
|
};
|
|
|
|
const priorityInput = () => {
|
|
return (
|
|
<TextField
|
|
select
|
|
id="priority"
|
|
label="Priority"
|
|
value={interaction.settings.priority}
|
|
onChange={changePriority}
|
|
fullWidth
|
|
autoFocus={false}
|
|
margin="normal"
|
|
variant="outlined"
|
|
InputLabelProps={{ shrink: true }}
|
|
disabled={!canEdit}
|
|
SelectProps={{ className: classes.singleInput }}>
|
|
{priorityMenuItems()}
|
|
</TextField>
|
|
);
|
|
};
|
|
|
|
const sortingInput = () => {
|
|
return (
|
|
<TextField
|
|
select
|
|
id="sorting"
|
|
label="Sorting Priority"
|
|
value={interaction.settings.sortPriority}
|
|
onChange={changeSortPriority}
|
|
fullWidth
|
|
autoFocus={false}
|
|
margin="normal"
|
|
variant="outlined"
|
|
InputLabelProps={{ shrink: true }}
|
|
disabled={!canEdit}
|
|
SelectProps={{ className: classes.singleInput }}>
|
|
{sortingMenuItems()}
|
|
</TextField>
|
|
);
|
|
};
|
|
|
|
const measurementTypeMenuItems = () => {
|
|
const type = or(interaction.settings.source, quack.ComponentID.create()).type;
|
|
return availableMeasurementTypes(type).map(measurementType => (
|
|
<MenuItem key={measurementType} value={measurementType}>
|
|
{describeSource(measurementType).label()}
|
|
</MenuItem>
|
|
));
|
|
};
|
|
|
|
const sourceMenuItems = () => {
|
|
return availableSources().map(source => (
|
|
<MenuItem key={source.locationString()} value={source.locationString()}>
|
|
{source.name()}
|
|
</MenuItem>
|
|
));
|
|
};
|
|
|
|
const sinkMenuItems = () => {
|
|
let sinks = getAvailableSinks().map(sink => (
|
|
<MenuItem key={sink.locationString()} value={sink.locationString()}>
|
|
{sink.name()}
|
|
</MenuItem>
|
|
));
|
|
if (isResultType(Result.set)) {
|
|
sinks.push(
|
|
<MenuItem key="30-16-1" value="30-16-1">
|
|
Stay Awake
|
|
</MenuItem>
|
|
);
|
|
}
|
|
return sinks;
|
|
};
|
|
|
|
const priorityMenuItems = () => {
|
|
return ["Low", "Medium", "High"].map((name: string, i: number) => (
|
|
<MenuItem key={i} value={i}>
|
|
{name}
|
|
</MenuItem>
|
|
));
|
|
};
|
|
|
|
const sortingMenuItems = () => {
|
|
return ["None", "1", "2", "3", "4", "5"].map((name: string, i: number) => (
|
|
<MenuItem key={i} value={i}>
|
|
{name}
|
|
</MenuItem>
|
|
));
|
|
};
|
|
|
|
const isBooleanValue = (index: number) => {
|
|
if (interaction.settings.conditions.length <= index) return false;
|
|
return interaction.settings.conditions[index].measurementType === Measurement.boolean;
|
|
};
|
|
|
|
const conditionValue = (index: number, interaction: Interaction, values: string[]) => {
|
|
let condition = interaction.settings.conditions[index];
|
|
return isBooleanValue(index) ? condition.value.toString() : values[index];
|
|
};
|
|
|
|
const conditionGroup = (index: number) => {
|
|
if (index >= numConditions) return;
|
|
let measurementType = interaction.settings.conditions[index].measurementType;
|
|
let source = describeSource(measurementType, );
|
|
let isBoolean = isBooleanValue(index);
|
|
return (
|
|
<React.Fragment key={index}>
|
|
<Grid
|
|
key={"interaction"}
|
|
container
|
|
direction="row"
|
|
justifyContent="center"
|
|
alignItems="center"
|
|
spacing={2}>
|
|
{index > 0 && (
|
|
<Grid size={{ xs: 12 }}>
|
|
<Typography align="center">AND</Typography>
|
|
</Grid>
|
|
)}
|
|
<Grid size={{ xs: 10, sm: 4 }}>
|
|
<TextField
|
|
select
|
|
id="measurementType"
|
|
required={true}
|
|
label=""
|
|
helperText="Measurement"
|
|
error={
|
|
!isMeasurementTypeValid(interaction.settings.conditions[index].measurementType)
|
|
}
|
|
disabled={!isSourceValid(interaction.settings.source) || !canEdit}
|
|
value={interaction.settings.conditions[index].measurementType}
|
|
onChange={event => changeMeasurementType(index, event)}
|
|
autoFocus={false}
|
|
margin="dense"
|
|
variant="standard"
|
|
fullWidth
|
|
InputLabelProps={{ shrink: true }}>
|
|
{measurementTypeMenuItems()}
|
|
</TextField>
|
|
</Grid>
|
|
<Grid size={{ xs: 10, sm: 3 }}>
|
|
<TextField
|
|
select
|
|
id="comparison"
|
|
required={true}
|
|
label=""
|
|
helperText="Comparator"
|
|
disabled={!isSourceValid(interaction.settings.source) || isBoolean || !canEdit}
|
|
value={interaction.settings.conditions[index].comparison}
|
|
onChange={event => changeComparison(index, event)}
|
|
autoFocus={false}
|
|
margin="dense"
|
|
variant="standard"
|
|
fullWidth
|
|
InputLabelProps={{ shrink: true }}>
|
|
{!isBoolean && [
|
|
<MenuItem key={2} value={Operator.less}>
|
|
{"is below"}
|
|
</MenuItem>,
|
|
<MenuItem key={3} value={Operator.greater}>
|
|
{"is above"}
|
|
</MenuItem>
|
|
]}
|
|
<MenuItem key={1} value={Operator.equals}>
|
|
{"is exactly"}
|
|
</MenuItem>
|
|
</TextField>
|
|
</Grid>
|
|
<Grid size={{ xs: 8, sm: 4 }}>
|
|
<TextField
|
|
select={isBoolean}
|
|
id="value"
|
|
required={true}
|
|
type={"text"}
|
|
label=""
|
|
helperText="Value"
|
|
error={invalidConditionValue(index)}
|
|
disabled={!isSourceValid(interaction.settings.source) || !canEdit}
|
|
value={conditionValue(index, interaction, rawConditionValues)}
|
|
onChange={event => changeValue(index, event)}
|
|
autoFocus={false}
|
|
margin="dense"
|
|
variant="standard"
|
|
fullWidth
|
|
InputProps={{
|
|
endAdornment: <InputAdornment position="end">{source.unit()}</InputAdornment>
|
|
}}
|
|
InputLabelProps={{ shrink: true }}>
|
|
{isBoolean && [
|
|
<MenuItem key={0} value={0}>
|
|
{source.enumerations()[0]}
|
|
</MenuItem>,
|
|
<MenuItem key={1} value={1}>
|
|
{source.enumerations()[1]}
|
|
</MenuItem>
|
|
]}
|
|
</TextField>
|
|
</Grid>
|
|
<Grid size={{ xs: 2, sm: 1 }}>
|
|
<Tooltip title="Remove this condition">
|
|
<IconButton
|
|
color="default"
|
|
disabled={numConditions === 1 ||!canEdit}
|
|
aria-label="Remove condition"
|
|
onClick={() => removeCondition(index)}
|
|
className={classNames(classes.redButton, classes.noPadding)}>
|
|
<RemoveIcon />
|
|
</IconButton>
|
|
</Tooltip>
|
|
</Grid>
|
|
</Grid>
|
|
{multiNodeSource() && !sensor && (
|
|
<Grid
|
|
key={"nodes"}
|
|
container
|
|
direction="row"
|
|
justifyContent="center"
|
|
alignItems="center"
|
|
spacing={2}>
|
|
<Grid size={{ xs: 10, sm: 4 }}>
|
|
<TextField
|
|
select
|
|
id="subtype"
|
|
label="Subtype"
|
|
disabled={!isSourceValid(interaction.settings.source) || !canEdit}
|
|
value={subtypeDropdown}
|
|
onChange={event => changeSubtype(event)}
|
|
margin="dense"
|
|
variant="standard"
|
|
fullWidth
|
|
InputLabelProps={{ shrink: true }}>
|
|
<MenuItem key={0} value={0}>
|
|
Any
|
|
</MenuItem>
|
|
<MenuItem key={1} value={1}>
|
|
Average
|
|
</MenuItem>
|
|
<MenuItem key={2} value={2}>
|
|
Single Node
|
|
</MenuItem>
|
|
<MenuItem key={3} value={3}>
|
|
Node Diff
|
|
</MenuItem>
|
|
<MenuItem key={4} value={4}>
|
|
Up To
|
|
</MenuItem>
|
|
</TextField>
|
|
</Grid>
|
|
<Grid size={{ xs: 10, sm: 4 }}>
|
|
{(subtypeDropdown === 2 || subtypeDropdown === 3 || subtypeDropdown === 4) && (
|
|
<TextField
|
|
select
|
|
id="interactionType"
|
|
label="Node 1"
|
|
disabled={!isSourceValid(interaction.settings.source) || !canEdit}
|
|
value={interaction.settings.nodeOne}
|
|
onChange={event => changeNode(event, 1)}
|
|
margin="dense"
|
|
variant="standard"
|
|
fullWidth
|
|
InputLabelProps={{ shrink: true }}>
|
|
{getNodeOptions(source)}
|
|
</TextField>
|
|
)}
|
|
</Grid>
|
|
<Grid size={{ xs: 10, sm: 4 }}>
|
|
{subtypeDropdown === 3 && (
|
|
<TextField
|
|
select
|
|
id="interactionType"
|
|
label="Node 2"
|
|
disabled={!isSourceValid(interaction.settings.source) || !canEdit}
|
|
value={interaction.settings.nodeTwo}
|
|
onChange={event => changeNode(event, 2)}
|
|
margin="dense"
|
|
variant="standard"
|
|
fullWidth
|
|
InputLabelProps={{ shrink: true }}>
|
|
{getNodeOptions(source)}
|
|
</TextField>
|
|
)}
|
|
</Grid>
|
|
</Grid>
|
|
)}
|
|
</React.Fragment>
|
|
);
|
|
};
|
|
|
|
const conditionInput = () => {
|
|
const conditionGroups = [];
|
|
for (let i = 0; i < numConditions; i++) {
|
|
conditionGroups[i] = conditionGroup(i);
|
|
}
|
|
return (
|
|
<FormControl
|
|
component={"fieldset" as "div"}
|
|
className={classes.borderedContainer}
|
|
fullWidth
|
|
disabled={!isSourceValid(interaction.settings.source) || !canEdit}>
|
|
<FormLabel component={"legend" as "caption"}>Conditions</FormLabel>
|
|
{isSourceValid(interaction.settings.source) ? (
|
|
<React.Fragment>{conditionGroups}</React.Fragment>
|
|
) : (
|
|
<FormHelperText>You must select a source before adding conditions</FormHelperText>
|
|
)}
|
|
<Tooltip title="Add another condition">
|
|
<IconButton
|
|
color="primary"
|
|
disabled={numConditions >= device.maxConditions() || !canEdit}
|
|
aria-label="Add another condition"
|
|
onClick={addCondition}
|
|
className={classNames(classes.greenButton, classes.noPadding)}>
|
|
<AddIcon />
|
|
</IconButton>
|
|
</Tooltip>
|
|
</FormControl>
|
|
);
|
|
};
|
|
|
|
const isResultType = (type: quack.InteractionResultType): boolean => {
|
|
return or(interaction.settings.result, pond.InteractionResult.create()).type === type;
|
|
};
|
|
|
|
const reportingEnabled = () => {
|
|
return (
|
|
or(interaction.settings.notifications, pond.InteractionNotifications.create()).reports ||
|
|
or(interaction.settings.result, pond.InteractionResult.create()).type === Result.report
|
|
);
|
|
};
|
|
|
|
const toggleDutyCycle = (event: any) => {
|
|
let updatedInteraction = interaction;
|
|
if (!interaction.settings.result) {
|
|
updatedInteraction.settings.result = pond.InteractionResult.create();
|
|
}
|
|
if (!event.target.checked) {
|
|
if (!updatedInteraction.settings.result) {
|
|
updatedInteraction.settings.result = pond.InteractionResult.create({
|
|
dutyCycle: 0
|
|
});
|
|
} else {
|
|
updatedInteraction.settings.result.dutyCycle = 0;
|
|
}
|
|
}
|
|
setDutyCycleEnabled(event.target.checked);
|
|
setInteraction(updatedInteraction);
|
|
};
|
|
|
|
const changeDutyCycle = (event: any) => {
|
|
let dutyCycle = Number(event.target.value);
|
|
let updatedInteraction = interaction;
|
|
if (!isNaN(dutyCycle)) {
|
|
if (!updatedInteraction.settings.result) {
|
|
updatedInteraction.settings.result = pond.InteractionResult.create();
|
|
} else {
|
|
updatedInteraction.settings.result.dutyCycle = dutyCycle;
|
|
}
|
|
}
|
|
setDutyCycle(event.target.value);
|
|
setInteraction(updatedInteraction);
|
|
};
|
|
|
|
const dutyCycleInput = () => {
|
|
return (
|
|
<React.Fragment>
|
|
<Grid size={{ xs: 4, sm: 4 }}>
|
|
<FormControlLabel
|
|
control={
|
|
<Checkbox
|
|
id="enableDutyCycle"
|
|
checked={dutyCycleEnabled}
|
|
onChange={toggleDutyCycle}
|
|
value="enableDutyCycle"
|
|
color="secondary"
|
|
/>
|
|
}
|
|
label="Once every"
|
|
disabled={!canEdit}
|
|
/>
|
|
</Grid>
|
|
<Grid size={{ xs: 8, sm: 8 }}>
|
|
<TextField
|
|
id="dutyCycle"
|
|
value={dutyCycle}
|
|
onChange={changeDutyCycle}
|
|
fullWidth
|
|
autoFocus={false}
|
|
margin="dense"
|
|
variant="standard"
|
|
disabled={!canEdit || !dutyCycleEnabled}
|
|
error={isNaN(Number(dutyCycle)) || Number(dutyCycle) < 0}
|
|
InputLabelProps={{
|
|
shrink: true
|
|
}}
|
|
InputProps={{
|
|
endAdornment: <InputAdornment position="end">seconds</InputAdornment>
|
|
}}></TextField>
|
|
</Grid>
|
|
</React.Fragment>
|
|
);
|
|
};
|
|
|
|
const notificationInput = () => {
|
|
const report = reportingEnabled();
|
|
const notify = or(interaction.settings.notifications, pond.InteractionNotifications.create())
|
|
.notify;
|
|
return (
|
|
<React.Fragment>
|
|
{!isResultType(Result.report) && (
|
|
<Grid size={{xs:6, sm:3}}>
|
|
<FormControlLabel
|
|
control={
|
|
<Checkbox
|
|
id="notificationReports"
|
|
checked={reportingEnabled()}
|
|
onChange={toggleReport}
|
|
value="notificationReports"
|
|
color="secondary"
|
|
/>
|
|
}
|
|
label="Report"
|
|
disabled={!canEdit}
|
|
/>
|
|
</Grid>
|
|
)}
|
|
<Grid size={{xs: isResultType(Result.toggle) ? 6 : 12, sm: 3}} >
|
|
<FormControlLabel
|
|
control={
|
|
<Checkbox
|
|
id="interactionNotification"
|
|
checked={notify}
|
|
onChange={toggleNotify}
|
|
value="interactionNotification"
|
|
color="secondary"
|
|
/>
|
|
}
|
|
label="Notify"
|
|
disabled={!canEdit || !report}
|
|
/>
|
|
</Grid>
|
|
{notify && (
|
|
<Grid size={{ xs: 12, sm: 12 }}>
|
|
<Typography color="textSecondary" variant="subtitle1">
|
|
Everyone with notifications enabled for this device will receive an email and/or SMS
|
|
each time this result occurs
|
|
</Typography>
|
|
</Grid>
|
|
)}
|
|
</React.Fragment>
|
|
);
|
|
};
|
|
|
|
const sinkSelector = () => {
|
|
return (
|
|
<TextField
|
|
select
|
|
id="sink"
|
|
label=""
|
|
value={componentIDToString(interaction.settings.sink)}
|
|
onChange={changeSink}
|
|
fullWidth
|
|
autoFocus={false}
|
|
margin="dense"
|
|
variant="standard"
|
|
InputLabelProps={{ shrink: true }}
|
|
disabled={isInitialComponentTheSink() || !canEdit || mode === "update"}>
|
|
{sinkMenuItems()}
|
|
</TextField>
|
|
);
|
|
};
|
|
|
|
const setMenuItems = () => {
|
|
let type = or(interaction.settings.sink, quack.ComponentID.create()).type;
|
|
let states = extension(type).states.map((state, i) => (
|
|
<MenuItem key={state} value={i}>
|
|
{state}
|
|
</MenuItem>
|
|
));
|
|
return states;
|
|
};
|
|
|
|
const resultInput = () => {
|
|
const sink = or(interaction.settings.sink, quack.ComponentID.create());
|
|
const result = or(
|
|
interaction.settings.result,
|
|
pond.InteractionResult.create({
|
|
type: Result.report
|
|
})
|
|
);
|
|
const isRun = result.type === Result.run;
|
|
const isMotor = sink.type === ComponentType.stepperMotor;
|
|
return (
|
|
<FormControl component={"fieldset" as "div"} className={classes.borderedContainer} fullWidth>
|
|
<FormLabel component={"legend" as "caption"}>Result</FormLabel>
|
|
<Grid container direction="row" spacing={2}>
|
|
<Grid size={{ xs: 12, sm: 3 }}>
|
|
<TextField
|
|
select
|
|
id="resultType"
|
|
required={true}
|
|
label=""
|
|
value={result.type}
|
|
onChange={changeResultType}
|
|
autoFocus={false}
|
|
margin="dense"
|
|
variant="standard"
|
|
fullWidth
|
|
InputLabelProps={{ shrink: true }}
|
|
disabled={!canEdit}>
|
|
<MenuItem value={Result.report}>Report</MenuItem>
|
|
<MenuItem value={Result.set}>Set</MenuItem>
|
|
<MenuItem value={Result.toggle}>Toggle</MenuItem>
|
|
<MenuItem value={Result.run}>Run</MenuItem>
|
|
</TextField>
|
|
</Grid>
|
|
{isRun && (
|
|
<React.Fragment>
|
|
<Grid size={{ xs: 12, sm: isMotor ? 8 : 4 }}>
|
|
{sinkSelector()}
|
|
</Grid>
|
|
{isMotor && (
|
|
<Grid size={{ xs: 12, sm: 5 }} container justifyContent="center">
|
|
<TextField
|
|
select
|
|
id="mode"
|
|
label=""
|
|
value={result.mode}
|
|
onChange={changeResultMode}
|
|
fullWidth
|
|
autoFocus={false}
|
|
margin="dense"
|
|
variant="standard"
|
|
InputLabelProps={{ shrink: true }}
|
|
disabled={!canEdit}>
|
|
<MenuItem key={"Clockwise"} value={0}>
|
|
Clockwise
|
|
</MenuItem>
|
|
<MenuItem key={"Counter Clockwise"} value={1}>
|
|
Counter Clockwise
|
|
</MenuItem>
|
|
</TextField>
|
|
</Grid>
|
|
)}
|
|
<Grid size={{ xs: 2, sm: 1 }}>
|
|
<Typography variant="subtitle1" color="textSecondary" className={classes.forPrompt}>
|
|
for
|
|
</Typography>
|
|
</Grid>
|
|
<Grid size={{ xs: 10, sm: isMotor ? 6 : 4 }} container justifyContent="center">
|
|
<TextField
|
|
id="runDuration"
|
|
required={true}
|
|
label=""
|
|
helperText=""
|
|
error={invalidResultValue()}
|
|
value={rawResultValue}
|
|
onChange={changeResultValue}
|
|
autoFocus={false}
|
|
margin="dense"
|
|
variant="standard"
|
|
fullWidth
|
|
InputProps={{
|
|
endAdornment: <InputAdornment position="end">sec</InputAdornment>
|
|
}}
|
|
InputLabelProps={{ shrink: true }}
|
|
disabled={!canEdit}
|
|
/>
|
|
</Grid>
|
|
</React.Fragment>
|
|
)}
|
|
{isResultType(Result.set) && (
|
|
<React.Fragment>
|
|
<Grid size={{ xs: 12, sm: 4 }}>
|
|
{sinkSelector()}
|
|
</Grid>
|
|
{interaction.settings.sink?.type !==
|
|
quack.ComponentType.COMPONENT_TYPE_INTERNAL_FUNCTION && (
|
|
<Grid size={{ xs: 2, sm: 1 }}>
|
|
<Typography
|
|
variant="subtitle1"
|
|
color="textSecondary"
|
|
className={classes.forPrompt}>
|
|
to
|
|
</Typography>
|
|
</Grid>
|
|
)}
|
|
{interaction.settings.sink?.type !==
|
|
quack.ComponentType.COMPONENT_TYPE_INTERNAL_FUNCTION && (
|
|
<Grid size={{ xs: 10, sm: 3 }} container justifyContent="center">
|
|
<TextField
|
|
select
|
|
id="resultValue"
|
|
label=""
|
|
value={result.value}
|
|
onChange={changeResultValue}
|
|
fullWidth
|
|
autoFocus={false}
|
|
margin="dense"
|
|
variant="standard"
|
|
InputLabelProps={{ shrink: true }}
|
|
disabled={!canEdit}>
|
|
{setMenuItems()}
|
|
</TextField>
|
|
</Grid>
|
|
)}
|
|
</React.Fragment>
|
|
)}
|
|
{isResultType(Result.toggle) && (
|
|
<React.Fragment>
|
|
<Grid size={{ xs: 12, sm: 5 }}>
|
|
{sinkSelector()}
|
|
</Grid>
|
|
<Grid size={{ xs: 12, sm: 3 }} container justifyContent="center">
|
|
<FormControlLabel
|
|
control={
|
|
<Switch
|
|
id="resultValue"
|
|
checked={result.value === 1}
|
|
onChange={changeResultValue}
|
|
value="toggleResultValue"
|
|
color="secondary"
|
|
/>
|
|
}
|
|
label={describeSink().enumerations()[result.value]}
|
|
disabled={!canEdit}
|
|
/>
|
|
</Grid>
|
|
</React.Fragment>
|
|
)}
|
|
{hasDeviceFeature(device.settings.upgradeChannel, "better-controls") &&
|
|
isRun &&
|
|
dutyCycleInput()}
|
|
{notificationInput()}
|
|
</Grid>
|
|
</FormControl>
|
|
);
|
|
};
|
|
|
|
const daySelector = (day: string, size: any) => {
|
|
const schedule = or(interaction.settings.schedule, pond.InteractionSchedule.create());
|
|
return (
|
|
<Grid container size={{ xs: size, sm: 1 }} justifyContent="center" alignItems="center">
|
|
<FormControlLabel
|
|
control={
|
|
<Checkbox
|
|
id={day}
|
|
checked={schedule.weekdays.includes(day)}
|
|
onChange={event => toggleDaySelected(day, event)}
|
|
value={day}
|
|
color="secondary"
|
|
/>
|
|
}
|
|
label={capitalize(day.substr(0, 2))}
|
|
labelPlacement="bottom"
|
|
disabled={!canEdit}
|
|
/>
|
|
</Grid>
|
|
);
|
|
};
|
|
|
|
const scheduleInput = () => {
|
|
let schedule = or(interaction.settings.schedule, pond.InteractionSchedule.create());
|
|
let timezone = coalesce(schedule.timezone, moment.tz.guess());
|
|
let todStart = coalesce(schedule.timeOfDayStart, "00:00").split(":");
|
|
let todEnd = coalesce(schedule.timeOfDayEnd, "23:59").split(":");
|
|
let start = moment
|
|
.tz(timezone)
|
|
.startOf("day")
|
|
.add(todStart[0], "hours")
|
|
.add(todStart[1], "minutes")
|
|
.local();
|
|
let end = moment
|
|
.tz(timezone)
|
|
.startOf("day")
|
|
.add(todEnd[0], "hours")
|
|
.add(todEnd[1], "minutes")
|
|
.local();
|
|
let descriptor = timeOfDayDescriptor(schedule);
|
|
let showStart = descriptor === "after" || descriptor === "from";
|
|
let showEnd = descriptor === "before" || descriptor === "from";
|
|
let showBoth = showStart && showEnd;
|
|
return (
|
|
<FormControl
|
|
component={"fieldset" as "div"}
|
|
className={classes.borderedContainer}
|
|
fullWidth
|
|
disabled={!canEdit}>
|
|
<FormLabel component={"legend" as "caption"}>Schedule</FormLabel>
|
|
<Grid container direction="row" spacing={0} justifyContent="flex-start">
|
|
{daySelector("sunday", 3)}
|
|
{daySelector("monday", 3)}
|
|
{daySelector("tuesday", 3)}
|
|
{daySelector("wednesday", 3)}
|
|
{daySelector("thursday", 4)}
|
|
{daySelector("friday", 4)}
|
|
{daySelector("saturday", 4)}
|
|
</Grid>
|
|
<Grid container direction="row" spacing={2} alignItems="center">
|
|
<Grid size={{ xs: 12, sm: 3 }}>
|
|
<TextField
|
|
select
|
|
id="timeOfDayShortcut"
|
|
value={descriptor}
|
|
onChange={(event: any) => setScheduleTime("shortcut", event)}
|
|
fullWidth
|
|
autoFocus={false}
|
|
margin="normal"
|
|
variant="standard"
|
|
InputLabelProps={{ shrink: true }}>
|
|
<MenuItem key="allDay" value="allDay">
|
|
All Day
|
|
</MenuItem>
|
|
<MenuItem key="before" value="before">
|
|
Before
|
|
</MenuItem>
|
|
<MenuItem key="after" value="after">
|
|
After
|
|
</MenuItem>
|
|
<MenuItem key="from" value="from">
|
|
From
|
|
</MenuItem>
|
|
</TextField>
|
|
</Grid>
|
|
{showStart && (
|
|
<Grid size={{ xs: 5, sm: 3 }}>
|
|
<LocalizationProvider dateAdapter={AdapterMoment}>
|
|
<TimePicker
|
|
value={start}
|
|
onChange={(event) => setScheduleTime("start", event)}
|
|
slotProps={{
|
|
textField: (props) => <TextField {...props} helperText="" />,
|
|
}}
|
|
/>
|
|
</LocalizationProvider>
|
|
</Grid>
|
|
)}
|
|
{showBoth && (
|
|
<Grid size={{ xs: 2, sm: 1 }}>
|
|
<Typography
|
|
variant="subtitle1"
|
|
color="textSecondary"
|
|
className={classes.timeRange}
|
|
align="right">
|
|
to
|
|
</Typography>
|
|
</Grid>
|
|
)}
|
|
{showEnd && (
|
|
<Grid size={{ xs: 5, sm: 3 }}>
|
|
<LocalizationProvider dateAdapter={AdapterMoment}>
|
|
<TimePicker
|
|
value={end}
|
|
onChange={(event: any) => setScheduleTime("end", event)}
|
|
slotProps={{
|
|
textField: (props) => <TextField {...props} helperText="" />,
|
|
}}
|
|
/>
|
|
</LocalizationProvider>
|
|
</Grid>
|
|
)}
|
|
</Grid>
|
|
</FormControl>
|
|
);
|
|
};
|
|
|
|
const content = () => {
|
|
return (
|
|
<Grid container direction="row" spacing={2}>
|
|
<Grid size={{ xs: 12 }}>
|
|
{sourceInput()}
|
|
</Grid>
|
|
{hasDeviceFeature(device.settings.upgradeChannel, "better-controls") && (
|
|
<Grid size={{ xs: 12 }}>
|
|
<div style={{ display: "flex", flexDirection: "row" }}>
|
|
{priorityInput()}
|
|
<div style={{ marginLeft: theme.spacing(2) }}></div>
|
|
{sortingInput()}
|
|
</div>
|
|
</Grid>
|
|
)}
|
|
<Grid size={{ xs: 12 }}>
|
|
{conditionInput()}
|
|
</Grid>
|
|
<Grid size={{ xs: 12 }}>
|
|
{resultInput()}
|
|
</Grid>
|
|
<Grid size={{ xs: 12 }} >
|
|
{scheduleInput()}
|
|
</Grid>
|
|
</Grid>
|
|
);
|
|
};
|
|
|
|
const actions = () => {
|
|
return (
|
|
<Grid container justifyContent="space-between" direction="row" width={"100%"}>
|
|
<Grid size={{ xs: 5 }}>
|
|
{mode === "update" && canEdit && (
|
|
<DeleteButton onClick={openRemoveInteraction}>Delete</DeleteButton>
|
|
)}
|
|
</Grid>
|
|
<Grid size={{ xs: 7 }} container justifyContent="flex-end">
|
|
<CancelSubmit onSubmit={submit} onCancel={close} submitDisabled={!canEdit || !isInteractionValid(interaction) || invalidConditionValues()}/>
|
|
{/* <Button onClick={close} color="primary">
|
|
Cancel
|
|
</Button>
|
|
{canEdit && (
|
|
<Button
|
|
onClick={submit}
|
|
color="primary"
|
|
disabled={!isInteractionValid(interaction) || invalidConditionValues()}>
|
|
Submit
|
|
</Button>
|
|
)} */}
|
|
</Grid>
|
|
</Grid>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<ResponsiveDialog
|
|
fullWidth
|
|
open={isDialogOpen}
|
|
onClose={close}
|
|
aria-labelledby="interaction-settings-dialog">
|
|
<DialogTitle id="interaction-settings-title">{title()}</DialogTitle>
|
|
<Divider />
|
|
<DialogContent className={classes.dialogContent}>{content()}</DialogContent>
|
|
<Divider />
|
|
<DialogActions>{actions()}</DialogActions>
|
|
{mode === "update" && (
|
|
<RemoveInteraction
|
|
device={device}
|
|
interaction={interaction}
|
|
isDialogOpen={isRemoveInteractionOpen}
|
|
closeDialogCallback={closeRemoveInteraction}
|
|
refreshCallback={interactionRemoved}
|
|
/>
|
|
)}
|
|
</ResponsiveDialog>
|
|
);
|
|
}
|