Started work on TUI with ink via Cline
This commit is contained in:
505
src/tui/components/screens/SchedulingScreen.jsx
Normal file
505
src/tui/components/screens/SchedulingScreen.jsx
Normal file
@@ -0,0 +1,505 @@
|
||||
const React = require("react");
|
||||
const { Box, Text, useInput, useApp } = require("ink");
|
||||
const { useAppState } = require("../../providers/AppProvider.jsx");
|
||||
const TextInput = require("ink-text-input").default;
|
||||
|
||||
/**
|
||||
* Scheduling Screen Component
|
||||
* Interface for configuring scheduled price update operations
|
||||
* Requirements: 7.3, 7.4
|
||||
*/
|
||||
const SchedulingScreen = () => {
|
||||
const { appState, navigateBack, updateConfiguration } = useAppState();
|
||||
const { exit } = useApp();
|
||||
|
||||
// Form fields configuration
|
||||
const formFields = [
|
||||
{
|
||||
id: "scheduledTime",
|
||||
label: "Scheduled Execution Time",
|
||||
placeholder: "2023-12-25T15:30:00",
|
||||
description: "When to run the operation (ISO 8601 format)",
|
||||
validator: (value) => {
|
||||
if (!value || value.trim() === "") return "Scheduled time is required";
|
||||
try {
|
||||
const date = new Date(value);
|
||||
if (isNaN(date.getTime())) return "Invalid date format";
|
||||
if (date <= new Date()) return "Scheduled time must be in the future";
|
||||
return null;
|
||||
} catch (error) {
|
||||
return "Invalid date format";
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "scheduleType",
|
||||
label: "Schedule Type",
|
||||
placeholder: "one-time",
|
||||
description: "Type of schedule",
|
||||
type: "select",
|
||||
options: [
|
||||
{ value: "one-time", label: "One-time" },
|
||||
{ value: "daily", label: "Daily" },
|
||||
{ value: "weekly", label: "Weekly" },
|
||||
{ value: "monthly", label: "Monthly" },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "scheduleTime",
|
||||
label: "Schedule Time",
|
||||
placeholder: "15:30",
|
||||
description: "Time of day for recurring schedules",
|
||||
validator: (value) => {
|
||||
if (!value || value.trim() === "") return "Time is required";
|
||||
const timeRegex = /^([01]?[0-9]|2[0-3]):[0-5][0-9]$/;
|
||||
if (!timeRegex.test(value)) return "Invalid time format (HH:MM)";
|
||||
return null;
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
// State for form inputs
|
||||
const [formValues, setFormValues] = React.useState(
|
||||
formFields.reduce((acc, field) => {
|
||||
acc[field.id] = appState.configuration[field.id] || "";
|
||||
return acc;
|
||||
}, {})
|
||||
);
|
||||
|
||||
const [errors, setErrors] = React.useState({});
|
||||
const [focusedField, setFocusedField] = React.useState(0);
|
||||
const [showValidation, setShowValidation] = React.useState(false);
|
||||
const [nextRunTime, setNextRunTime] = React.useState(null);
|
||||
|
||||
// Validate all fields
|
||||
const validateForm = () => {
|
||||
const newErrors = {};
|
||||
let isValid = true;
|
||||
|
||||
formFields.forEach((field) => {
|
||||
const error = field.validator(formValues[field.id]);
|
||||
if (error) {
|
||||
newErrors[field.id] = error;
|
||||
isValid = false;
|
||||
}
|
||||
});
|
||||
|
||||
setErrors(newErrors);
|
||||
return isValid;
|
||||
};
|
||||
|
||||
// Calculate next run time
|
||||
const calculateNextRunTime = () => {
|
||||
if (!formValues.scheduledTime) return null;
|
||||
|
||||
try {
|
||||
const scheduledDate = new Date(formValues.scheduledTime);
|
||||
const now = new Date();
|
||||
|
||||
// Format for display
|
||||
const options = {
|
||||
year: "numeric",
|
||||
month: "long",
|
||||
day: "numeric",
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
second: "2-digit",
|
||||
};
|
||||
|
||||
return scheduledDate.toLocaleString(undefined, options);
|
||||
} catch (error) {
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
// Handle keyboard input
|
||||
useInput((input, key) => {
|
||||
if (key.escape) {
|
||||
// Go back to main menu
|
||||
navigateBack();
|
||||
} else if (key.tab || (key.tab && key.shift)) {
|
||||
// Navigate between fields
|
||||
if (key.shift) {
|
||||
// Shift+Tab - previous field
|
||||
setFocusedField((prev) =>
|
||||
prev > 0 ? prev - 1 : formFields.length - 1
|
||||
);
|
||||
} else {
|
||||
// Tab - next field
|
||||
setFocusedField((prev) =>
|
||||
prev < formFields.length - 1 ? prev + 1 : 0
|
||||
);
|
||||
}
|
||||
} else if (key.return || key.enter) {
|
||||
// Handle Enter key
|
||||
if (focusedField === formFields.length - 1) {
|
||||
// Last field (Save button) - save configuration
|
||||
handleSave();
|
||||
} else {
|
||||
// Move to next field
|
||||
setFocusedField((prev) =>
|
||||
prev < formFields.length - 1 ? prev + 1 : 0
|
||||
);
|
||||
}
|
||||
} else if (key.upArrow) {
|
||||
// Navigate up
|
||||
setFocusedField((prev) => (prev > 0 ? prev - 1 : formFields.length - 1));
|
||||
} else if (key.downArrow) {
|
||||
// Navigate down
|
||||
setFocusedField((prev) => (prev < formFields.length - 1 ? prev + 1 : 0));
|
||||
}
|
||||
});
|
||||
|
||||
// Handle input changes
|
||||
const handleInputChange = (fieldId, value) => {
|
||||
setFormValues((prev) => ({
|
||||
...prev,
|
||||
[fieldId]: value,
|
||||
}));
|
||||
|
||||
// Clear error when user starts typing
|
||||
if (errors[fieldId]) {
|
||||
setErrors((prev) => {
|
||||
const newErrors = { ...prev };
|
||||
delete newErrors[fieldId];
|
||||
return newErrors;
|
||||
});
|
||||
}
|
||||
|
||||
// Update next run time when scheduled time changes
|
||||
if (fieldId === "scheduledTime") {
|
||||
setNextRunTime(calculateNextRunTime());
|
||||
}
|
||||
};
|
||||
|
||||
// Handle save configuration
|
||||
const handleSave = () => {
|
||||
if (validateForm()) {
|
||||
// Update configuration
|
||||
const config = {
|
||||
...formValues,
|
||||
isScheduled: true,
|
||||
};
|
||||
|
||||
updateConfiguration(config);
|
||||
navigateBack();
|
||||
} else {
|
||||
// Show validation errors
|
||||
setShowValidation(true);
|
||||
}
|
||||
};
|
||||
|
||||
// Handle test schedule
|
||||
const handleTestSchedule = () => {
|
||||
// Validate required fields
|
||||
const requiredFields = ["scheduledTime"];
|
||||
const tempErrors = {};
|
||||
let hasError = false;
|
||||
|
||||
requiredFields.forEach((fieldId) => {
|
||||
const field = formFields.find((f) => f.id === fieldId);
|
||||
const error = field.validator(formValues[fieldId]);
|
||||
if (error) {
|
||||
tempErrors[fieldId] = error;
|
||||
hasError = true;
|
||||
}
|
||||
});
|
||||
|
||||
if (hasError) {
|
||||
setErrors(tempErrors);
|
||||
setShowValidation(true);
|
||||
return;
|
||||
}
|
||||
|
||||
// Calculate and display next run time
|
||||
setNextRunTime(calculateNextRunTime());
|
||||
};
|
||||
|
||||
return React.createElement(
|
||||
Box,
|
||||
{ flexDirection: "column", padding: 2, flexGrow: 1 },
|
||||
// Header
|
||||
React.createElement(
|
||||
Box,
|
||||
{ flexDirection: "column", marginBottom: 2 },
|
||||
React.createElement(Text, { bold: true, color: "cyan" }, "⏰ Scheduling"),
|
||||
React.createElement(
|
||||
Text,
|
||||
{ color: "gray" },
|
||||
"Configure when to run price update operations"
|
||||
)
|
||||
),
|
||||
|
||||
// Schedule information
|
||||
React.createElement(
|
||||
Box,
|
||||
{
|
||||
borderStyle: "single",
|
||||
borderColor: "blue",
|
||||
paddingX: 1,
|
||||
paddingY: 1,
|
||||
marginBottom: 2,
|
||||
},
|
||||
React.createElement(
|
||||
Box,
|
||||
{ flexDirection: "column" },
|
||||
React.createElement(
|
||||
Text,
|
||||
{ bold: true, color: "blue" },
|
||||
"Schedule Information:"
|
||||
),
|
||||
React.createElement(
|
||||
Text,
|
||||
null,
|
||||
` Current Mode: ${appState.configuration.operationMode.toUpperCase()}`
|
||||
),
|
||||
React.createElement(
|
||||
Text,
|
||||
null,
|
||||
` Target Tag: ${appState.configuration.targetTag || "Not set"}`
|
||||
),
|
||||
React.createElement(
|
||||
Text,
|
||||
null,
|
||||
` Store: ${appState.configuration.shopDomain || "Not set"}`
|
||||
)
|
||||
)
|
||||
),
|
||||
|
||||
// Form fields
|
||||
React.createElement(
|
||||
Box,
|
||||
{ flexDirection: "column", marginBottom: 2 },
|
||||
formFields.map((field, index) => {
|
||||
const isFocused = focusedField === index;
|
||||
const hasError = errors[field.id];
|
||||
const currentValue = formValues[field.id];
|
||||
|
||||
return React.createElement(
|
||||
Box,
|
||||
{
|
||||
key: field.id,
|
||||
borderStyle: "single",
|
||||
borderColor: hasError ? "red" : isFocused ? "blue" : "gray",
|
||||
paddingX: 1,
|
||||
paddingY: 1,
|
||||
marginBottom: 1,
|
||||
flexDirection: "column",
|
||||
},
|
||||
React.createElement(
|
||||
Box,
|
||||
{ flexDirection: "row", alignItems: "center", marginBottom: 1 },
|
||||
React.createElement(
|
||||
Text,
|
||||
{
|
||||
bold: true,
|
||||
color: isFocused ? "blue" : "white",
|
||||
},
|
||||
`${field.label}:`
|
||||
),
|
||||
React.createElement(
|
||||
Box,
|
||||
{ flexGrow: 1 },
|
||||
React.createElement(
|
||||
Text,
|
||||
{ color: "gray" },
|
||||
` ${field.description}`
|
||||
)
|
||||
)
|
||||
),
|
||||
React.createElement(
|
||||
Box,
|
||||
{ flexDirection: "row" },
|
||||
field.type === "select"
|
||||
? React.createElement(
|
||||
Box,
|
||||
{ flexDirection: "column" },
|
||||
field.options.map((option, optIndex) =>
|
||||
React.createElement(
|
||||
Box,
|
||||
{
|
||||
key: optIndex,
|
||||
borderStyle:
|
||||
formValues[field.id] === option.value
|
||||
? "single"
|
||||
: "none",
|
||||
borderColor: "blue",
|
||||
paddingX: 2,
|
||||
paddingY: 0.5,
|
||||
marginBottom: 0.5,
|
||||
backgroundColor:
|
||||
formValues[field.id] === option.value
|
||||
? "blue"
|
||||
: undefined,
|
||||
},
|
||||
React.createElement(
|
||||
Text,
|
||||
{
|
||||
color:
|
||||
formValues[field.id] === option.value
|
||||
? "white"
|
||||
: "gray",
|
||||
},
|
||||
option.label
|
||||
)
|
||||
)
|
||||
)
|
||||
)
|
||||
: React.createElement(TextInput, {
|
||||
value: currentValue,
|
||||
placeholder: field.placeholder,
|
||||
mask: null,
|
||||
showCursor: isFocused,
|
||||
focus: isFocused,
|
||||
onChange: (value) => handleInputChange(field.id, value),
|
||||
style: {
|
||||
color: hasError ? "red" : isFocused ? "blue" : "white",
|
||||
bold: isFocused,
|
||||
},
|
||||
})
|
||||
),
|
||||
hasError &&
|
||||
React.createElement(
|
||||
Text,
|
||||
{ color: "red", italic: true },
|
||||
` Error: ${errors[field.id]}`
|
||||
)
|
||||
);
|
||||
})
|
||||
),
|
||||
|
||||
// Next run time display
|
||||
nextRunTime &&
|
||||
React.createElement(
|
||||
Box,
|
||||
{
|
||||
borderStyle: "single",
|
||||
borderColor: "green",
|
||||
paddingX: 1,
|
||||
paddingY: 1,
|
||||
marginBottom: 2,
|
||||
},
|
||||
React.createElement(
|
||||
Box,
|
||||
{ flexDirection: "column" },
|
||||
React.createElement(
|
||||
Text,
|
||||
{ bold: true, color: "green" },
|
||||
"Next Scheduled Run:"
|
||||
),
|
||||
React.createElement(Text, { color: "green" }, ` ${nextRunTime}`)
|
||||
)
|
||||
),
|
||||
|
||||
// Action buttons
|
||||
React.createElement(
|
||||
Box,
|
||||
{ flexDirection: "row", justifyContent: "space-between" },
|
||||
React.createElement(
|
||||
Box,
|
||||
{ flexDirection: "column", width: "48%" },
|
||||
React.createElement(
|
||||
Box,
|
||||
{
|
||||
borderStyle: "single",
|
||||
borderColor: "gray",
|
||||
paddingX: 2,
|
||||
paddingY: 1,
|
||||
alignItems: "center",
|
||||
backgroundColor:
|
||||
focusedField === formFields.length ? "yellow" : undefined,
|
||||
},
|
||||
React.createElement(
|
||||
Text,
|
||||
{
|
||||
color: focusedField === formFields.length ? "black" : "white",
|
||||
bold: true,
|
||||
},
|
||||
focusedField === formFields.length ? "Testing..." : "Test Schedule"
|
||||
)
|
||||
),
|
||||
React.createElement(
|
||||
Text,
|
||||
{ color: "gray", italic: true, marginTop: 0.5 },
|
||||
"Calculate next run time"
|
||||
)
|
||||
),
|
||||
React.createElement(
|
||||
Box,
|
||||
{ flexDirection: "column", width: "48%" },
|
||||
React.createElement(
|
||||
Box,
|
||||
{
|
||||
borderStyle: "single",
|
||||
borderColor: "green",
|
||||
paddingX: 2,
|
||||
paddingY: 1,
|
||||
alignItems: "center",
|
||||
backgroundColor:
|
||||
focusedField === formFields.length - 1 ? "green" : undefined,
|
||||
},
|
||||
React.createElement(
|
||||
Text,
|
||||
{
|
||||
color: "white",
|
||||
bold: true,
|
||||
},
|
||||
"Save & Exit"
|
||||
)
|
||||
),
|
||||
React.createElement(
|
||||
Text,
|
||||
{ color: "gray", italic: true, marginTop: 0.5 },
|
||||
"Save schedule and return to menu"
|
||||
)
|
||||
)
|
||||
),
|
||||
|
||||
// Instructions
|
||||
React.createElement(
|
||||
Box,
|
||||
{
|
||||
flexDirection: "column",
|
||||
marginTop: 2,
|
||||
borderTopStyle: "single",
|
||||
borderColor: "gray",
|
||||
paddingTop: 2,
|
||||
},
|
||||
React.createElement(Text, { color: "gray" }, "Navigation:"),
|
||||
React.createElement(Text, { color: "gray" }, " ↑/↓ - Navigate fields"),
|
||||
React.createElement(
|
||||
Text,
|
||||
{ color: "gray" },
|
||||
" Tab/Shift+Tab - Next/Previous field"
|
||||
),
|
||||
React.createElement(Text, { color: "gray" }, " Enter - Save/Next field"),
|
||||
React.createElement(Text, { color: "gray" }, " Esc - Back to menu")
|
||||
),
|
||||
|
||||
// Validation message
|
||||
showValidation &&
|
||||
Object.keys(errors).length > 0 &&
|
||||
React.createElement(
|
||||
Box,
|
||||
{
|
||||
flexDirection: "column",
|
||||
marginTop: 2,
|
||||
padding: 1,
|
||||
borderStyle: "single",
|
||||
borderColor: "red",
|
||||
},
|
||||
React.createElement(
|
||||
Text,
|
||||
{ color: "red", bold: true },
|
||||
"Validation Errors:"
|
||||
),
|
||||
React.createElement(
|
||||
Text,
|
||||
{ color: "red" },
|
||||
"Please fix the errors before saving."
|
||||
)
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
module.exports = SchedulingScreen;
|
||||
Reference in New Issue
Block a user