374 lines
12 KiB
TypeScript
374 lines
12 KiB
TypeScript
import React, { useState, useEffect } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import {
|
|
MenuItem,
|
|
TextField,
|
|
Typography,
|
|
Box,
|
|
Button,
|
|
} from "@mui/material";
|
|
import { Schedule } from "@mui/icons-material";
|
|
import { Dropdown } from "../../ui/DropdownMui";
|
|
import { validMomentTimezones } from "../../../constants/const";
|
|
import { useGlobalInfoStore } from "../../../context/globalInfo";
|
|
import { getSchedule, deleteSchedule } from "../../../api/storage";
|
|
import { RobotConfigPage } from "./RobotConfigPage";
|
|
import { useNavigate, useLocation } from "react-router-dom";
|
|
|
|
interface ScheduleSettingsProps {
|
|
handleStart: (settings: ScheduleSettings) => void;
|
|
}
|
|
|
|
export interface ScheduleSettings {
|
|
runEvery: number;
|
|
runEveryUnit: string;
|
|
startFrom: string;
|
|
dayOfMonth?: string;
|
|
atTimeStart?: string;
|
|
atTimeEnd?: string;
|
|
timezone: string;
|
|
}
|
|
|
|
export const ScheduleSettingsPage = ({
|
|
handleStart,
|
|
}: ScheduleSettingsProps) => {
|
|
const { t } = useTranslation();
|
|
const navigate = useNavigate();
|
|
const location = useLocation();
|
|
const [schedule, setSchedule] = useState<ScheduleSettings | null>(null);
|
|
const [settings, setSettings] = useState<ScheduleSettings>({
|
|
runEvery: 1,
|
|
runEveryUnit: "HOURS",
|
|
startFrom: "MONDAY",
|
|
dayOfMonth: "1",
|
|
atTimeStart: "00:00",
|
|
atTimeEnd: "01:00",
|
|
timezone: "UTC",
|
|
});
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
|
|
const handleChange = (
|
|
field: keyof ScheduleSettings,
|
|
value: string | number | boolean
|
|
) => {
|
|
setSettings((prev) => ({ ...prev, [field]: value }));
|
|
};
|
|
|
|
const units = ["MINUTES", "HOURS", "DAYS", "WEEKS", "MONTHS"];
|
|
|
|
const days = [
|
|
"MONDAY",
|
|
"TUESDAY",
|
|
"WEDNESDAY",
|
|
"THURSDAY",
|
|
"FRIDAY",
|
|
"SATURDAY",
|
|
"SUNDAY",
|
|
];
|
|
|
|
const { recordingId, notify } = useGlobalInfoStore();
|
|
|
|
const deleteRobotSchedule = async () => {
|
|
if (recordingId) {
|
|
setIsLoading(true);
|
|
try {
|
|
await deleteSchedule(recordingId);
|
|
setSchedule(null);
|
|
notify("success", t("Schedule deleted successfully"));
|
|
|
|
setSettings({
|
|
runEvery: 1,
|
|
runEveryUnit: "HOURS",
|
|
startFrom: "MONDAY",
|
|
dayOfMonth: "",
|
|
atTimeStart: "00:00",
|
|
atTimeEnd: "01:00",
|
|
timezone: "UTC",
|
|
});
|
|
} catch (error) {
|
|
notify("error", "Failed to delete schedule");
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
} else {
|
|
console.error("No recording id provided");
|
|
}
|
|
};
|
|
|
|
const getRobotSchedule = async () => {
|
|
if (recordingId) {
|
|
try {
|
|
const scheduleData = await getSchedule(recordingId);
|
|
setSchedule(scheduleData);
|
|
} catch (error) {
|
|
console.error("Failed to fetch robot schedule:", error);
|
|
}
|
|
} else {
|
|
console.error("No recording id provided");
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
const fetchSchedule = async () => {
|
|
await getRobotSchedule();
|
|
};
|
|
fetchSchedule();
|
|
}, []);
|
|
|
|
const handleSave = async () => {
|
|
setIsLoading(true);
|
|
try {
|
|
await handleStart(settings);
|
|
const basePath = location.pathname.includes("/prebuilt-robots")
|
|
? "/prebuilt-robots"
|
|
: "/robots";
|
|
navigate(basePath);
|
|
} catch (error) {
|
|
notify("error", "Failed to save schedule");
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleCancel = () => {
|
|
const basePath = location.pathname.includes("/prebuilt-robots")
|
|
? "/prebuilt-robots"
|
|
: "/robots";
|
|
navigate(basePath);
|
|
};
|
|
|
|
const getDayOrdinal = (day: string | undefined) => {
|
|
if (!day) return "";
|
|
const lastDigit = day.slice(-1);
|
|
const lastTwoDigits = day.slice(-2);
|
|
|
|
// Special cases for 11, 12, 13
|
|
if (["11", "12", "13"].includes(lastTwoDigits)) {
|
|
return t("schedule_settings.labels.on_day.th");
|
|
}
|
|
|
|
// Other cases
|
|
switch (lastDigit) {
|
|
case "1":
|
|
return t("schedule_settings.labels.on_day.st");
|
|
case "2":
|
|
return t("schedule_settings.labels.on_day.nd");
|
|
case "3":
|
|
return t("schedule_settings.labels.on_day.rd");
|
|
default:
|
|
return t("schedule_settings.labels.on_day.th");
|
|
}
|
|
};
|
|
|
|
const textStyle = {
|
|
width: "150px",
|
|
height: "52px",
|
|
marginRight: "10px",
|
|
};
|
|
|
|
const dropDownStyle = {
|
|
marginTop: "2px",
|
|
width: "150px",
|
|
height: "59px",
|
|
marginRight: "10px",
|
|
};
|
|
|
|
return (
|
|
<RobotConfigPage
|
|
title={t("schedule_settings.title")}
|
|
onSave={schedule === null ? handleSave : undefined}
|
|
onCancel={handleCancel}
|
|
saveButtonText={t("schedule_settings.buttons.save_schedule")}
|
|
cancelButtonText={t("schedule_settings.buttons.cancel")}
|
|
showSaveButton={schedule === null}
|
|
isLoading={isLoading}
|
|
>
|
|
<Box
|
|
sx={{
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
alignItems: "flex-start",
|
|
"& > *": { marginBottom: "20px" },
|
|
marginTop: "-20px",
|
|
}}
|
|
>
|
|
<>
|
|
{schedule !== null ? (
|
|
<>
|
|
<Typography>
|
|
{t("schedule_settings.run_every")}: {schedule.runEvery}{" "}
|
|
{schedule.runEveryUnit.toLowerCase()}
|
|
</Typography>
|
|
<Typography>
|
|
{["MONTHS", "WEEKS"].includes(settings.runEveryUnit)
|
|
? t("schedule_settings.start_from")
|
|
: t("schedule_settings.start_from")}
|
|
: {schedule.startFrom.charAt(0).toUpperCase() + schedule.startFrom.slice(1).toLowerCase()}
|
|
</Typography>
|
|
{schedule.runEveryUnit === "MONTHS" && (
|
|
<Typography>
|
|
{t("schedule_settings.on_day")}: {schedule.dayOfMonth}
|
|
{getDayOrdinal(schedule.dayOfMonth)} of the month
|
|
</Typography>
|
|
)}
|
|
<Typography>
|
|
{t("schedule_settings.at_around")}: {schedule.atTimeStart},{" "}
|
|
{schedule.timezone} {t("schedule_settings.timezone")}
|
|
</Typography>
|
|
<Box mt={2} display="flex" justifyContent="space-between">
|
|
<Button
|
|
onClick={deleteRobotSchedule}
|
|
variant="outlined"
|
|
color="error"
|
|
disabled={isLoading}
|
|
>
|
|
{isLoading
|
|
? "Deleting..."
|
|
: t("schedule_settings.buttons.delete_schedule")}
|
|
</Button>
|
|
</Box>
|
|
</>
|
|
) : (
|
|
<>
|
|
<Box sx={{ display: "flex", alignItems: "center", width: "100%" }}>
|
|
<Typography sx={{ marginRight: "10px" }}>
|
|
{t("schedule_settings.labels.run_once_every")}
|
|
</Typography>
|
|
<TextField
|
|
type="number"
|
|
value={settings.runEvery}
|
|
onChange={(e) =>
|
|
handleChange("runEvery", parseInt(e.target.value))
|
|
}
|
|
sx={textStyle}
|
|
inputProps={{ min: 1 }}
|
|
/>
|
|
<Dropdown
|
|
label=""
|
|
id="runEveryUnit"
|
|
value={settings.runEveryUnit}
|
|
handleSelect={(e) =>
|
|
handleChange("runEveryUnit", e.target.value)
|
|
}
|
|
sx={dropDownStyle}
|
|
>
|
|
{units.map((unit) => (
|
|
<MenuItem key={unit} value={unit}>
|
|
{" "}
|
|
{unit.charAt(0).toUpperCase() +
|
|
unit.slice(1).toLowerCase()}
|
|
</MenuItem>
|
|
))}
|
|
</Dropdown>
|
|
</Box>
|
|
|
|
<Box sx={{ display: "flex", alignItems: "center", width: "100%" }}>
|
|
<Typography sx={{ marginBottom: "5px", marginRight: "25px" }}>
|
|
{["MONTHS", "WEEKS"].includes(settings.runEveryUnit)
|
|
? t("schedule_settings.labels.start_from_label")
|
|
: t("schedule_settings.labels.start_from_label")}
|
|
</Typography>
|
|
<Dropdown
|
|
label=""
|
|
id="startFrom"
|
|
value={settings.startFrom}
|
|
handleSelect={(e) =>
|
|
handleChange("startFrom", e.target.value)
|
|
}
|
|
sx={dropDownStyle}
|
|
>
|
|
{days.map((day) => (
|
|
<MenuItem key={day} value={day}>
|
|
{day.charAt(0).toUpperCase() +
|
|
day.slice(1).toLowerCase()}
|
|
</MenuItem>
|
|
))}
|
|
</Dropdown>
|
|
</Box>
|
|
|
|
{settings.runEveryUnit === "MONTHS" && (
|
|
<Box sx={{ display: "flex", alignItems: "center", width: "100%" }}>
|
|
<Typography sx={{ marginBottom: "5px", marginRight: "25px" }}>
|
|
{t("schedule_settings.labels.on_day_of_month")}
|
|
</Typography>
|
|
<TextField
|
|
type="number"
|
|
value={settings.dayOfMonth}
|
|
onChange={(e) =>
|
|
handleChange("dayOfMonth", e.target.value)
|
|
}
|
|
sx={textStyle}
|
|
inputProps={{ min: 1, max: 31 }}
|
|
/>
|
|
</Box>
|
|
)}
|
|
|
|
{["MINUTES", "HOURS"].includes(settings.runEveryUnit) ? (
|
|
<Box sx={{ display: "flex", alignItems: "center", width: "100%" }}>
|
|
<Box sx={{ marginRight: "20px" }}>
|
|
<Typography sx={{ marginBottom: "5px" }}>
|
|
{t("schedule_settings.labels.in_between")}
|
|
</Typography>
|
|
<TextField
|
|
type="time"
|
|
value={settings.atTimeStart}
|
|
onChange={(e) =>
|
|
handleChange("atTimeStart", e.target.value)
|
|
}
|
|
sx={textStyle}
|
|
/>
|
|
<TextField
|
|
type="time"
|
|
value={settings.atTimeEnd}
|
|
onChange={(e) =>
|
|
handleChange("atTimeEnd", e.target.value)
|
|
}
|
|
sx={textStyle}
|
|
/>
|
|
</Box>
|
|
</Box>
|
|
) : (
|
|
<Box sx={{ display: "flex", alignItems: "center", width: "100%" }}>
|
|
<Typography sx={{ marginBottom: "5px", marginRight: "10px" }}>
|
|
{t("schedule_settings.at_around")}
|
|
</Typography>
|
|
<TextField
|
|
type="time"
|
|
value={settings.atTimeStart}
|
|
onChange={(e) =>
|
|
handleChange("atTimeStart", e.target.value)
|
|
}
|
|
sx={textStyle}
|
|
/>
|
|
</Box>
|
|
)}
|
|
|
|
<Box sx={{ display: "flex", alignItems: "center", width: "100%" }}>
|
|
<Typography sx={{ marginRight: "10px" }}>
|
|
{t("schedule_settings.timezone")}
|
|
</Typography>
|
|
<Dropdown
|
|
label=""
|
|
id="timezone"
|
|
value={settings.timezone}
|
|
handleSelect={(e) =>
|
|
handleChange("timezone", e.target.value)
|
|
}
|
|
sx={dropDownStyle}
|
|
>
|
|
{validMomentTimezones.map((tz) => (
|
|
<MenuItem key={tz} value={tz}>
|
|
{tz.charAt(0).toUpperCase() +
|
|
tz.slice(1).toLowerCase()}
|
|
</MenuItem>
|
|
))}
|
|
</Dropdown>
|
|
</Box>
|
|
</>
|
|
)}
|
|
</>
|
|
</Box>
|
|
</RobotConfigPage>
|
|
);
|
|
};
|