Squashed 'sample-front-end/' changes from 552f9c4..99ea3a6
99ea3a6 feat: Display next sync schedule information fb8d17a feat: Implement schedule settings and basic UI git-subtree-dir: sample-front-end git-subtree-split: 99ea3a68de98503b706d3ee5782baf4a66dc7134
This commit is contained in:
+335
-72
@@ -1,6 +1,5 @@
|
||||
|
||||
import React, { useState, useRef, useEffect } from 'react';
|
||||
import { SyncStrategy, RegexReplacement, SyncState } from '../types';
|
||||
import { SyncStrategy, RegexReplacement, SyncState, ScheduleSettings, ScheduleMode } from '../types';
|
||||
import {
|
||||
ArrowRightCircle,
|
||||
ArrowLeftCircle,
|
||||
@@ -13,7 +12,12 @@ import {
|
||||
Save,
|
||||
RotateCcw,
|
||||
Zap,
|
||||
Loader2
|
||||
Loader2,
|
||||
Calendar,
|
||||
Clock,
|
||||
Repeat,
|
||||
CheckSquare,
|
||||
Square
|
||||
} from 'lucide-react';
|
||||
|
||||
interface StrategyOption {
|
||||
@@ -55,11 +59,15 @@ const STRATEGIES: StrategyOption[] = [
|
||||
}
|
||||
];
|
||||
|
||||
const WEEK_DAYS = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
|
||||
|
||||
interface StrategySelectorProps {
|
||||
currentStrategy: SyncStrategy;
|
||||
onSelect: (strategy: SyncStrategy, label: string) => void;
|
||||
savedRegexReplacements: RegexReplacement[];
|
||||
onSaveRegex: (replacements: RegexReplacement[]) => void;
|
||||
savedSchedule: ScheduleSettings;
|
||||
onSaveSchedule: (settings: ScheduleSettings) => Promise<boolean>;
|
||||
syncState: SyncState;
|
||||
onSync: () => void;
|
||||
}
|
||||
@@ -69,6 +77,8 @@ const StrategySelector: React.FC<StrategySelectorProps> = ({
|
||||
onSelect,
|
||||
savedRegexReplacements,
|
||||
onSaveRegex,
|
||||
savedSchedule,
|
||||
onSaveSchedule,
|
||||
syncState,
|
||||
onSync
|
||||
}) => {
|
||||
@@ -77,23 +87,47 @@ const StrategySelector: React.FC<StrategySelectorProps> = ({
|
||||
|
||||
// Local state for regex editing
|
||||
const [localReplacements, setLocalReplacements] = useState<RegexReplacement[]>([]);
|
||||
const [isDirty, setIsDirty] = useState(false);
|
||||
const [isRegexDirty, setIsRegexDirty] = useState(false);
|
||||
|
||||
// Local state for Schedule editing
|
||||
const [localSchedule, setLocalSchedule] = useState<ScheduleSettings>(savedSchedule);
|
||||
const [isScheduleDirty, setIsScheduleDirty] = useState(false);
|
||||
|
||||
// UI State for Schedule Tabs
|
||||
// We initialize active tab based on the saved mode. If DISABLED, default to CRON.
|
||||
const [activeTab, setActiveTab] = useState<ScheduleMode>(
|
||||
savedSchedule.mode === ScheduleMode.DISABLED ? ScheduleMode.CRON : savedSchedule.mode
|
||||
);
|
||||
|
||||
const isSyncing = syncState === SyncState.SYNCING;
|
||||
const isLocked = isSyncing || syncState === SyncState.SUCCESS;
|
||||
|
||||
// Initialize local state when prop updates (only if not dirty, or initially)
|
||||
// Initialize local state when prop updates
|
||||
useEffect(() => {
|
||||
setLocalReplacements(JSON.parse(JSON.stringify(savedRegexReplacements)));
|
||||
setIsDirty(false);
|
||||
setIsRegexDirty(false);
|
||||
}, [savedRegexReplacements]);
|
||||
|
||||
useEffect(() => {
|
||||
setLocalSchedule(JSON.parse(JSON.stringify(savedSchedule)));
|
||||
// If the saved mode is not disabled, ensure we show that tab.
|
||||
if (savedSchedule.mode !== ScheduleMode.DISABLED) {
|
||||
setActiveTab(savedSchedule.mode);
|
||||
}
|
||||
setIsScheduleDirty(false);
|
||||
}, [savedSchedule]);
|
||||
|
||||
// Check dirty state whenever local changes
|
||||
useEffect(() => {
|
||||
const isDifferent = JSON.stringify(localReplacements) !== JSON.stringify(savedRegexReplacements);
|
||||
setIsDirty(isDifferent);
|
||||
setIsRegexDirty(isDifferent);
|
||||
}, [localReplacements, savedRegexReplacements]);
|
||||
|
||||
useEffect(() => {
|
||||
const isDifferent = JSON.stringify(localSchedule) !== JSON.stringify(savedSchedule);
|
||||
setIsScheduleDirty(isDifferent);
|
||||
}, [localSchedule, savedSchedule]);
|
||||
|
||||
const selectedOption = STRATEGIES.find(s => s.value === currentStrategy) || STRATEGIES[0];
|
||||
|
||||
useEffect(() => {
|
||||
@@ -111,7 +145,7 @@ const StrategySelector: React.FC<StrategySelectorProps> = ({
|
||||
onSelect(strategy.value, strategy.label);
|
||||
};
|
||||
|
||||
// Regex Handlers
|
||||
// --- Regex Handlers ---
|
||||
const handleAddRegex = () => {
|
||||
if (isLocked) return;
|
||||
const newId = Date.now().toString();
|
||||
@@ -130,29 +164,93 @@ const StrategySelector: React.FC<StrategySelectorProps> = ({
|
||||
));
|
||||
};
|
||||
|
||||
const handleReset = () => {
|
||||
const handleResetRegex = () => {
|
||||
if (isLocked) return;
|
||||
setLocalReplacements(JSON.parse(JSON.stringify(savedRegexReplacements)));
|
||||
};
|
||||
|
||||
const handleSave = () => {
|
||||
const handleSaveRegex = () => {
|
||||
if (isLocked) return;
|
||||
const validReplacements = localReplacements.filter(r => r.pattern.trim() !== '');
|
||||
setLocalReplacements(validReplacements);
|
||||
onSaveRegex(validReplacements);
|
||||
};
|
||||
|
||||
// --- Schedule Handlers ---
|
||||
const handleUpdateSchedule = (field: keyof ScheduleSettings, value: any) => {
|
||||
if (isLocked) return;
|
||||
setLocalSchedule(prev => ({ ...prev, [field]: value }));
|
||||
};
|
||||
|
||||
const toggleWeekDay = (dayIndex: number) => {
|
||||
if (isLocked) return;
|
||||
const currentDays = localSchedule.weeklyDays;
|
||||
const newDays = currentDays.includes(dayIndex)
|
||||
? currentDays.filter(d => d !== dayIndex)
|
||||
: [...currentDays, dayIndex].sort();
|
||||
handleUpdateSchedule('weeklyDays', newDays);
|
||||
};
|
||||
|
||||
const handleResetSchedule = () => {
|
||||
if (isLocked) return;
|
||||
setLocalSchedule(JSON.parse(JSON.stringify(savedSchedule)));
|
||||
if (savedSchedule.mode !== ScheduleMode.DISABLED) {
|
||||
setActiveTab(savedSchedule.mode);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSaveScheduleClick = async () => {
|
||||
if (isLocked) return;
|
||||
|
||||
let settingsToSave = { ...localSchedule };
|
||||
|
||||
// Logic to determine mode based on active Tab and checkbox state
|
||||
if (activeTab === ScheduleMode.CRON) {
|
||||
if (settingsToSave.cronExpression.trim() !== '') {
|
||||
settingsToSave.mode = ScheduleMode.CRON;
|
||||
} else {
|
||||
// Empty cron -> disabled
|
||||
settingsToSave.mode = ScheduleMode.DISABLED;
|
||||
}
|
||||
}
|
||||
|
||||
// For Daily/Weekly, enforce: Save commits what is seen in the active tab.
|
||||
if (activeTab !== ScheduleMode.CRON) {
|
||||
// If the mode matches the active tab, it's enabled. Otherwise disabled.
|
||||
if (localSchedule.mode !== activeTab) {
|
||||
settingsToSave.mode = ScheduleMode.DISABLED;
|
||||
}
|
||||
}
|
||||
|
||||
// Call API
|
||||
const success = await onSaveSchedule(settingsToSave);
|
||||
if (success) {
|
||||
setLocalSchedule(settingsToSave);
|
||||
setIsScheduleDirty(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSyncClick = () => {
|
||||
if (isLocked) return;
|
||||
onSync();
|
||||
};
|
||||
|
||||
// Helper to toggle enable/disable for current active tab (Daily/Weekly)
|
||||
const toggleScheduleEnable = (targetMode: ScheduleMode) => {
|
||||
if (isLocked) return;
|
||||
if (localSchedule.mode === targetMode) {
|
||||
handleUpdateSchedule('mode', ScheduleMode.DISABLED);
|
||||
} else {
|
||||
handleUpdateSchedule('mode', targetMode);
|
||||
}
|
||||
};
|
||||
|
||||
// If syncing or locked, apply grayscale filter to content sections
|
||||
const contentClass = isLocked ? "opacity-50 pointer-events-none grayscale transition-all" : "transition-all";
|
||||
|
||||
return (
|
||||
<div className="relative group" ref={dropdownRef}>
|
||||
{/* Trigger Button - Added Ring to create visual 'cutout' over panels */}
|
||||
{/* Trigger Button */}
|
||||
<button
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
className="flex items-center justify-center w-12 h-12 rounded-full bg-gray-800/90 border border-gray-600 hover:border-plex-orange text-gray-300 hover:text-white hover:bg-gray-700/80 transition-all shadow-2xl hover:shadow-plex-orange/30 ring-[6px] md:ring-8 ring-gray-900 backdrop-blur-sm active:scale-95"
|
||||
@@ -164,7 +262,7 @@ const StrategySelector: React.FC<StrategySelectorProps> = ({
|
||||
</div>
|
||||
</button>
|
||||
|
||||
{/* Dropdown Menu - Persistent Mount for State Preservation */}
|
||||
{/* Dropdown Menu */}
|
||||
<div
|
||||
className={`absolute
|
||||
top-14
|
||||
@@ -173,13 +271,14 @@ const StrategySelector: React.FC<StrategySelectorProps> = ({
|
||||
/* Desktop: Center alignment */
|
||||
md:left-1/2 md:right-auto md:origin-top md:-translate-x-1/2
|
||||
|
||||
w-80 md:w-[30rem] bg-gray-800/95 border border-white/10 rounded-xl shadow-2xl z-50 overflow-hidden backdrop-blur-xl
|
||||
w-80 md:w-[32rem] bg-gray-800/95 border border-white/10 rounded-xl shadow-2xl z-50 overflow-hidden backdrop-blur-xl
|
||||
transition-all duration-200 ease-out
|
||||
${isOpen ? 'opacity-100 scale-100 visible translate-y-0' : 'opacity-0 scale-95 invisible pointer-events-none -translate-y-2'}`}
|
||||
>
|
||||
<div className={contentClass}>
|
||||
<div className={`flex flex-col max-h-[75vh] md:max-h-[85vh] overflow-y-auto custom-scrollbar ${contentClass}`}>
|
||||
|
||||
{/* Section 1: Sync Strategy */}
|
||||
<div className="px-4 py-3 bg-black/20 border-b border-white/5">
|
||||
<div className="px-4 py-3 bg-black/20 border-b border-white/5 flex-none">
|
||||
<h3 className="text-[10px] font-bold text-gray-500 uppercase tracking-widest mb-2">Sync Strategy</h3>
|
||||
<div className="space-y-1">
|
||||
{STRATEGIES.map((strategy) => (
|
||||
@@ -217,23 +316,23 @@ const StrategySelector: React.FC<StrategySelectorProps> = ({
|
||||
</div>
|
||||
|
||||
{/* Section 2: Regex Preprocessing */}
|
||||
<div className="p-4 bg-gray-900/40">
|
||||
<div className="p-4 bg-gray-900/40 border-b border-white/5 flex-none">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<h3 className="text-[10px] font-bold text-gray-500 uppercase tracking-widest">Regex Rules</h3>
|
||||
{localReplacements.length === 0 && (
|
||||
<button
|
||||
onClick={handleAddRegex}
|
||||
className="p-1 rounded bg-gray-700/50 hover:bg-gray-600 text-gray-400 hover:text-white transition-colors"
|
||||
title="Add Rule"
|
||||
>
|
||||
<Plus size={14} />
|
||||
</button>
|
||||
)}
|
||||
<h3 className="text-[10px] font-bold text-gray-500 uppercase tracking-widest">Regex Rules</h3>
|
||||
{localReplacements.length === 0 && (
|
||||
<button
|
||||
onClick={handleAddRegex}
|
||||
className="p-1 rounded bg-gray-700/50 hover:bg-gray-600 text-gray-400 hover:text-white transition-colors"
|
||||
title="Add Rule"
|
||||
>
|
||||
<Plus size={14} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="space-y-2 mb-4 max-h-52 overflow-y-auto pr-1 custom-scrollbar">
|
||||
<div className="space-y-2 mb-4 max-h-40 overflow-y-auto pr-1 custom-scrollbar">
|
||||
{localReplacements.length === 0 ? (
|
||||
<div className="text-xs text-gray-600 italic text-center py-4 border border-dashed border-gray-700/50 rounded-lg">
|
||||
<div className="text-xs text-gray-600 italic text-center py-2 border border-dashed border-gray-700/50 rounded-lg">
|
||||
No regex replacements configured.
|
||||
</div>
|
||||
) : (
|
||||
@@ -242,11 +341,11 @@ const StrategySelector: React.FC<StrategySelectorProps> = ({
|
||||
<div className="flex-1 min-w-0">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Regex Pattern"
|
||||
placeholder="Pattern"
|
||||
value={regex.pattern}
|
||||
onChange={(e) => handleUpdateRegex(regex.id, 'pattern', e.target.value)}
|
||||
className={`w-full bg-gray-900/80 border rounded-md px-2.5 py-1.5 text-xs text-gray-200 focus:outline-none focus:ring-1 transition-all placeholder-gray-600
|
||||
${!regex.pattern && isDirty ? 'border-red-500/30 focus:border-red-500' : 'border-gray-700 focus:border-plex-orange'}`}
|
||||
className={`w-full bg-gray-900/80 border rounded-md px-2 py-1.5 text-xs text-gray-200 focus:outline-none focus:ring-1 transition-all placeholder-gray-600
|
||||
${!regex.pattern && isRegexDirty ? 'border-red-500/30 focus:border-red-500' : 'border-gray-700 focus:border-plex-orange'}`}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex-none text-gray-600">
|
||||
@@ -258,7 +357,7 @@ const StrategySelector: React.FC<StrategySelectorProps> = ({
|
||||
placeholder="Replacement"
|
||||
value={regex.replacement}
|
||||
onChange={(e) => handleUpdateRegex(regex.id, 'replacement', e.target.value)}
|
||||
className="w-full bg-gray-900/80 border border-gray-700 rounded-md px-2.5 py-1.5 text-xs text-gray-200 focus:outline-none focus:border-plex-orange focus:ring-1 focus:ring-plex-orange transition-all placeholder-gray-600"
|
||||
className="w-full bg-gray-900/80 border border-gray-700 rounded-md px-2 py-1.5 text-xs text-gray-200 focus:outline-none focus:border-plex-orange focus:ring-1 focus:ring-plex-orange transition-all placeholder-gray-600"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
@@ -273,58 +372,222 @@ const StrategySelector: React.FC<StrategySelectorProps> = ({
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="space-y-3 pt-3 border-t border-white/5">
|
||||
{localReplacements.length > 0 && (
|
||||
<div className="flex justify-center">
|
||||
<button
|
||||
<div className="flex justify-between items-center gap-2">
|
||||
<button
|
||||
onClick={handleAddRegex}
|
||||
className="flex items-center space-x-1.5 text-xs text-plex-orange hover:text-yellow-400 transition-colors opacity-80 hover:opacity-100"
|
||||
className={`flex items-center space-x-1 px-2 py-1 rounded text-[10px] font-bold uppercase tracking-wide transition-colors ${localReplacements.length > 0 ? 'text-plex-orange hover:bg-plex-orange/10' : 'hidden'}`}
|
||||
>
|
||||
<Plus size={12} />
|
||||
<span className="font-medium">Add Rule</span>
|
||||
<Plus size={10} />
|
||||
<span>Add</span>
|
||||
</button>
|
||||
|
||||
<div className="flex items-center gap-2 ml-auto">
|
||||
<button
|
||||
onClick={handleResetRegex}
|
||||
disabled={!isRegexDirty}
|
||||
className={`flex items-center justify-center space-x-1.5 px-3 py-1.5 rounded-md text-xs font-medium border transition-all
|
||||
${isRegexDirty
|
||||
? 'bg-gray-800 border-gray-600 text-gray-300 hover:bg-gray-700 hover:text-white'
|
||||
: 'bg-transparent border-transparent text-gray-700 cursor-not-allowed'}`}
|
||||
>
|
||||
<RotateCcw size={12} />
|
||||
<span>Revert</span>
|
||||
</button>
|
||||
<button
|
||||
onClick={handleSaveRegex}
|
||||
disabled={!isRegexDirty}
|
||||
className={`flex items-center justify-center space-x-1.5 px-3 py-1.5 rounded-md text-xs font-bold border transition-all
|
||||
${isRegexDirty
|
||||
? 'bg-plex-orange border-plex-orange text-gray-900 hover:bg-yellow-500 shadow-lg shadow-plex-orange/10'
|
||||
: 'bg-gray-800/30 border-gray-800/50 text-gray-600 cursor-not-allowed'}`}
|
||||
>
|
||||
<Save size={12} />
|
||||
<span>Save</span>
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<button
|
||||
onClick={handleReset}
|
||||
disabled={!isDirty}
|
||||
className={`flex items-center justify-center space-x-2 py-1.5 rounded-lg text-xs font-medium border transition-all
|
||||
${isDirty
|
||||
? 'bg-gray-800 border-gray-600 text-gray-300 hover:bg-gray-700 hover:text-white'
|
||||
: 'bg-transparent border-gray-800 text-gray-600 cursor-not-allowed'}`}
|
||||
{/* Section 3: Scheduled Tasks */}
|
||||
<div className="p-4 bg-gray-900/40 border-b border-white/5 flex-none">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<h3 className="text-[10px] font-bold text-gray-500 uppercase tracking-widest">Scheduled Tasks</h3>
|
||||
</div>
|
||||
|
||||
{/* Tabs */}
|
||||
<div className="flex space-x-1 bg-black/30 p-1 rounded-lg mb-4">
|
||||
{[
|
||||
{ id: ScheduleMode.CRON, label: 'Cron', icon: Repeat },
|
||||
{ id: ScheduleMode.DAILY, label: 'Daily', icon: Clock },
|
||||
{ id: ScheduleMode.WEEKLY, label: 'Weekly', icon: Calendar },
|
||||
].map((tab) => (
|
||||
<button
|
||||
key={tab.id}
|
||||
onClick={() => setActiveTab(tab.id)}
|
||||
className={`flex-1 flex items-center justify-center space-x-2 py-1.5 rounded-md text-xs font-medium transition-all
|
||||
${activeTab === tab.id
|
||||
? 'bg-gray-700 text-plex-orange shadow-sm'
|
||||
: 'text-gray-400 hover:text-gray-200 hover:bg-white/5'
|
||||
}`}
|
||||
>
|
||||
<tab.icon size={12} />
|
||||
<span>{tab.label}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Tab Content */}
|
||||
<div className="mb-4 min-h-[50px]">
|
||||
{activeTab === ScheduleMode.CRON && (
|
||||
<div className="space-y-2 animate-in fade-in duration-200">
|
||||
<div className="flex items-center space-x-2">
|
||||
<span className="text-gray-500 font-mono text-xs">Cron:</span>
|
||||
<input
|
||||
type="text"
|
||||
value={localSchedule.cronExpression}
|
||||
onChange={(e) => handleUpdateSchedule('cronExpression', e.target.value)}
|
||||
placeholder="0 0 * * *"
|
||||
className="flex-1 bg-gray-800 border border-gray-700 rounded-md px-2.5 py-1.5 text-xs text-gray-200 font-mono focus:border-plex-orange focus:outline-none focus:ring-1 focus:ring-plex-orange placeholder-gray-600"
|
||||
/>
|
||||
</div>
|
||||
<p className="text-[10px] text-gray-500">
|
||||
Unix-cron format. Leave empty to disable schedule.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeTab === ScheduleMode.DAILY && (
|
||||
<div className="flex flex-col animate-in fade-in duration-200">
|
||||
{/* Top Row: Checkbox + Label */}
|
||||
<div className="flex items-center justify-start space-x-2 mb-2">
|
||||
<button
|
||||
onClick={() => toggleScheduleEnable(ScheduleMode.DAILY)}
|
||||
className={`transition-colors flex-none ${localSchedule.mode === ScheduleMode.DAILY ? 'text-plex-orange' : 'text-gray-500 hover:text-gray-400'}`}
|
||||
title={localSchedule.mode === ScheduleMode.DAILY ? "Schedule Enabled" : "Schedule Disabled"}
|
||||
>
|
||||
{localSchedule.mode === ScheduleMode.DAILY ? <CheckSquare size={16} /> : <Square size={16} />}
|
||||
</button>
|
||||
<label className="text-xs text-gray-400 font-medium">Run daily at:</label>
|
||||
</div>
|
||||
|
||||
{/* Bottom Row: Centered Native Time Input */}
|
||||
<div className="flex justify-center mt-2">
|
||||
<input
|
||||
type="time"
|
||||
value={localSchedule.dailyTime}
|
||||
onChange={(e) => handleUpdateSchedule('dailyTime', e.target.value)}
|
||||
disabled={localSchedule.mode !== ScheduleMode.DAILY}
|
||||
className={`bg-gray-800 border border-gray-700 text-white rounded-md px-4 py-2 text-xl font-mono focus:border-plex-orange focus:ring-1 focus:ring-plex-orange focus:outline-none transition-all ${localSchedule.mode !== ScheduleMode.DAILY ? 'opacity-50 cursor-not-allowed' : ''}`}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeTab === ScheduleMode.WEEKLY && (
|
||||
<div className="flex flex-col animate-in fade-in duration-200">
|
||||
{/* Top Row: Checkbox + Label */}
|
||||
<div className="flex items-center justify-start space-x-2 mb-2">
|
||||
<button
|
||||
onClick={() => toggleScheduleEnable(ScheduleMode.WEEKLY)}
|
||||
className={`transition-colors flex-none ${localSchedule.mode === ScheduleMode.WEEKLY ? 'text-plex-orange' : 'text-gray-500 hover:text-gray-400'}`}
|
||||
title={localSchedule.mode === ScheduleMode.WEEKLY ? "Schedule Enabled" : "Schedule Disabled"}
|
||||
>
|
||||
{localSchedule.mode === ScheduleMode.WEEKLY ? <CheckSquare size={16} /> : <Square size={16} />}
|
||||
</button>
|
||||
<label className="text-xs text-gray-400 font-medium">Run on days:</label>
|
||||
</div>
|
||||
|
||||
{/* Middle Row: Full Width Capsules */}
|
||||
<div className={`grid grid-cols-7 w-full transition-opacity duration-200 mb-3 ${localSchedule.mode !== ScheduleMode.WEEKLY ? 'opacity-50 pointer-events-none' : ''}`}>
|
||||
{WEEK_DAYS.map((day, index) => {
|
||||
const isSelected = localSchedule.weeklyDays.includes(index);
|
||||
return (
|
||||
<button
|
||||
key={index}
|
||||
onClick={() => toggleWeekDay(index)}
|
||||
className={`h-9 text-xs font-bold border-y border-l last:border-r border-gray-600/50 transition-colors
|
||||
first:rounded-l-lg last:rounded-r-lg
|
||||
${isSelected
|
||||
? 'bg-plex-orange text-gray-900 border-plex-orange z-10'
|
||||
: 'bg-gray-800 text-gray-400 hover:bg-gray-700 hover:text-gray-200'
|
||||
}
|
||||
`}
|
||||
>
|
||||
{day}
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Bottom Row: Centered Native Time Input */}
|
||||
<div className="flex justify-center mt-1">
|
||||
<input
|
||||
type="time"
|
||||
value={localSchedule.weeklyTime}
|
||||
onChange={(e) => handleUpdateSchedule('weeklyTime', e.target.value)}
|
||||
disabled={localSchedule.mode !== ScheduleMode.WEEKLY}
|
||||
className={`bg-gray-800 border border-gray-700 text-white rounded-md px-4 py-2 text-xl font-mono focus:border-plex-orange focus:ring-1 focus:ring-plex-orange focus:outline-none transition-all ${localSchedule.mode !== ScheduleMode.WEEKLY ? 'opacity-50 cursor-not-allowed' : ''}`}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Auto Watch Checkbox */}
|
||||
<div className="flex items-center mb-4 px-1">
|
||||
<button
|
||||
onClick={() => handleUpdateSchedule('autoWatch', !localSchedule.autoWatch)}
|
||||
className="flex items-center space-x-2 group"
|
||||
>
|
||||
<RotateCcw size={14} />
|
||||
<span>Revert</span>
|
||||
{localSchedule.autoWatch ? (
|
||||
<CheckSquare size={16} className="text-plex-orange" />
|
||||
) : (
|
||||
<Square size={16} className="text-gray-600 group-hover:text-gray-400" />
|
||||
)}
|
||||
<span className={`text-xs ${localSchedule.autoWatch ? 'text-gray-200' : 'text-gray-500 group-hover:text-gray-400'}`}>
|
||||
Watch for local playlist changes
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
onClick={handleSave}
|
||||
disabled={!isDirty}
|
||||
className={`flex items-center justify-center space-x-2 py-1.5 rounded-lg text-xs font-bold border transition-all
|
||||
${isDirty
|
||||
? 'bg-plex-orange border-plex-orange text-gray-900 hover:bg-yellow-500 shadow-lg shadow-plex-orange/10'
|
||||
: 'bg-gray-800/50 border-gray-800 text-gray-600 cursor-not-allowed'}`}
|
||||
>
|
||||
<Save size={14} />
|
||||
<span>Save Changes</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Action Buttons (Mirrored from Regex) */}
|
||||
<div className="flex items-center gap-2 justify-end pt-3 border-t border-white/5">
|
||||
<button
|
||||
onClick={handleResetSchedule}
|
||||
disabled={!isScheduleDirty}
|
||||
className={`flex items-center justify-center space-x-1.5 px-3 py-1.5 rounded-md text-xs font-medium border transition-all
|
||||
${isScheduleDirty
|
||||
? 'bg-gray-800 border-gray-600 text-gray-300 hover:bg-gray-700 hover:text-white'
|
||||
: 'bg-transparent border-transparent text-gray-700 cursor-not-allowed'}`}
|
||||
>
|
||||
<RotateCcw size={12} />
|
||||
<span>Revert</span>
|
||||
</button>
|
||||
<button
|
||||
onClick={handleSaveScheduleClick}
|
||||
disabled={!isScheduleDirty}
|
||||
className={`flex items-center justify-center space-x-1.5 px-3 py-1.5 rounded-md text-xs font-bold border transition-all
|
||||
${isScheduleDirty
|
||||
? 'bg-plex-orange border-plex-orange text-gray-900 hover:bg-yellow-500 shadow-lg shadow-plex-orange/10'
|
||||
: 'bg-gray-800/30 border-gray-800/50 text-gray-600 cursor-not-allowed'}`}
|
||||
>
|
||||
<Save size={12} />
|
||||
<span>Save</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Section 3: Sync Now Button */}
|
||||
<div className="p-4 bg-gray-950/50 border-t border-white/5">
|
||||
{/* Section 4: Sync Now Button */}
|
||||
<div className="p-4 bg-gray-950/50 border-t border-white/5 flex-none">
|
||||
<button
|
||||
onClick={handleSyncClick}
|
||||
disabled={isLocked || isDirty} // Disable if syncing OR if there are unsaved regex changes
|
||||
disabled={isLocked}
|
||||
className={`w-full py-3 rounded-lg text-sm font-bold flex items-center justify-center gap-2 transition-all shadow-lg
|
||||
${isLocked
|
||||
? 'bg-gray-700/30 text-gray-500 cursor-not-allowed border border-gray-700/50'
|
||||
: isDirty
|
||||
? 'bg-gray-800 text-gray-500 cursor-not-allowed border border-gray-700' // Must save rules first
|
||||
: isRegexDirty
|
||||
? 'bg-gray-800 text-gray-500 cursor-not-allowed border border-gray-700'
|
||||
: 'bg-green-600 hover:bg-green-500 text-white border border-green-500 shadow-green-900/20 active:scale-[0.98]'
|
||||
}`}
|
||||
>
|
||||
@@ -340,9 +603,9 @@ const StrategySelector: React.FC<StrategySelectorProps> = ({
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
{isDirty && (
|
||||
{(isRegexDirty) && (
|
||||
<p className="text-[10px] text-plex-orange text-center mt-2">
|
||||
Please save or revert regex rules changes before syncing.
|
||||
Please save regex changes before syncing.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
@@ -351,4 +614,4 @@ const StrategySelector: React.FC<StrategySelectorProps> = ({
|
||||
);
|
||||
};
|
||||
|
||||
export default StrategySelector;
|
||||
export default StrategySelector;
|
||||
Reference in New Issue
Block a user