Koha9
28b68fa9eb
feat: Add backup settings functionality Merge commit '0667fac9401254dd9b26043408cb6b204a894184'
919 lines
42 KiB
TypeScript
919 lines
42 KiB
TypeScript
import React, { useState, useRef, useEffect } from 'react';
|
|
import { SyncStrategy, ReplacementRule, PathMappingConfig, PathMappingRules, PathMappingMode, SyncState, ScheduleSettings, ScheduleMode, BackupSettings } from '../types';
|
|
import {
|
|
ArrowRightCircle,
|
|
ArrowLeftCircle,
|
|
GitMerge,
|
|
ChevronDown,
|
|
Check,
|
|
HelpCircle,
|
|
Plus,
|
|
Trash2,
|
|
Save,
|
|
RotateCcw,
|
|
Zap,
|
|
Loader2,
|
|
Calendar,
|
|
Clock,
|
|
Repeat,
|
|
Type,
|
|
Code2,
|
|
Link,
|
|
Archive,
|
|
History,
|
|
Eye
|
|
} from 'lucide-react';
|
|
|
|
interface StrategyOption {
|
|
value: SyncStrategy;
|
|
label: string;
|
|
description: string;
|
|
icon: React.ElementType;
|
|
color: string;
|
|
}
|
|
|
|
const STRATEGIES: StrategyOption[] = [
|
|
{
|
|
value: SyncStrategy.LOCAL_OVERWRITE,
|
|
label: 'Local Overwrite',
|
|
description: 'Local playlist completely overwrites Cloud. (No Diff)',
|
|
icon: ArrowRightCircle,
|
|
color: 'text-blue-400'
|
|
},
|
|
{
|
|
value: SyncStrategy.CLOUD_OVERWRITE,
|
|
label: 'Cloud Overwrite',
|
|
description: 'Cloud playlist completely overwrites Local. (No Diff)',
|
|
icon: ArrowLeftCircle,
|
|
color: 'text-green-400'
|
|
},
|
|
{
|
|
value: SyncStrategy.MERGE_LOCAL,
|
|
label: 'Two-way Merge (Local Priority)',
|
|
description: 'Merge both. Conflicts resolve to Local version.',
|
|
icon: GitMerge,
|
|
color: 'text-blue-300'
|
|
},
|
|
{
|
|
value: SyncStrategy.MERGE_CLOUD,
|
|
label: 'Two-way Merge (Cloud Priority)',
|
|
description: 'Merge both. Conflicts resolve to Cloud version.',
|
|
icon: GitMerge,
|
|
color: 'text-green-300'
|
|
}
|
|
];
|
|
|
|
const WEEK_DAYS = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
|
|
|
|
// Color Theme Variables for Mapping Editors
|
|
const MAPPING_THEME = {
|
|
// Container Themes
|
|
local: {
|
|
borderColor: "border-blue-500/20",
|
|
bgColor: "bg-blue-900/10"
|
|
},
|
|
remote: {
|
|
borderColor: "border-green-500/20",
|
|
bgColor: "bg-green-900/10"
|
|
},
|
|
simple: {
|
|
borderColor: "border-gray-700/50",
|
|
bgColor: "bg-gray-900/40"
|
|
},
|
|
// Input Field Themes
|
|
inputs: {
|
|
default: "bg-gray-800 border-gray-700 text-gray-200 focus:border-plex-orange placeholder-gray-600",
|
|
local: "bg-blue-500/10 border-blue-500/30 text-blue-100 focus:border-blue-400 placeholder-blue-300/30",
|
|
cloud: "bg-green-500/10 border-green-500/30 text-green-100 focus:border-green-400 placeholder-green-300/30"
|
|
}
|
|
};
|
|
|
|
// Helper to determine the actual mode and settings that would be saved based on the current UI state
|
|
const deriveEffectiveSchedule = (schedule: ScheduleSettings, tab: ScheduleMode): ScheduleSettings => {
|
|
const derived = { ...schedule };
|
|
|
|
// Unified logic: If the mode matches the tab, we keep it (Enabled).
|
|
// If the mode doesn't match (e.g. it was DISABLED), then in the context of this tab, it remains Disabled until the user toggles the switch.
|
|
if (derived.mode === tab) {
|
|
derived.mode = tab;
|
|
} else {
|
|
derived.mode = ScheduleMode.DISABLED;
|
|
}
|
|
return derived;
|
|
};
|
|
|
|
// Sub-component for a single Mapping Group Editor
|
|
interface MappingGroupEditorProps {
|
|
title: string;
|
|
subtitle?: string;
|
|
rules: ReplacementRule[];
|
|
onChange: (newRules: ReplacementRule[]) => void;
|
|
isLocked: boolean;
|
|
borderColor?: string;
|
|
bgColor?: string;
|
|
// Input specific props
|
|
leftPlaceholder?: string;
|
|
rightPlaceholder?: string;
|
|
leftInputClass?: string;
|
|
rightInputClass?: string;
|
|
}
|
|
|
|
const MappingGroupEditor: React.FC<MappingGroupEditorProps> = ({
|
|
title,
|
|
subtitle,
|
|
rules,
|
|
onChange,
|
|
isLocked,
|
|
borderColor = "border-gray-700",
|
|
bgColor = "bg-gray-900/50",
|
|
leftPlaceholder = "Pattern",
|
|
rightPlaceholder = "Replace",
|
|
leftInputClass,
|
|
rightInputClass
|
|
}) => {
|
|
|
|
const handleAdd = () => {
|
|
if (isLocked) return;
|
|
const newId = Date.now().toString() + Math.random().toString();
|
|
onChange([...rules, { id: newId, search: '', replace: '' }]);
|
|
};
|
|
|
|
const handleUpdate = (id: string, field: 'search' | 'replace', value: string) => {
|
|
if (isLocked) return;
|
|
onChange(rules.map(r => r.id === id ? { ...r, [field]: value } : r));
|
|
};
|
|
|
|
const handleDelete = (id: string) => {
|
|
if (isLocked) return;
|
|
onChange(rules.filter(r => r.id !== id));
|
|
};
|
|
|
|
// Default input style if not provided
|
|
const defaultInputStyle = MAPPING_THEME.inputs.default;
|
|
|
|
return (
|
|
<div className={`p-3 rounded-lg border ${borderColor} ${bgColor} flex flex-col h-full transition-colors`}>
|
|
<div className="flex items-center justify-between mb-2">
|
|
<div>
|
|
<h4 className="text-[10px] font-bold uppercase tracking-wider text-gray-400">{title}</h4>
|
|
{subtitle && <p className="text-[9px] text-gray-500">{subtitle}</p>}
|
|
</div>
|
|
<button
|
|
onClick={handleAdd}
|
|
disabled={isLocked}
|
|
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={12} />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="flex-1 space-y-2 overflow-y-auto max-h-32 custom-scrollbar pr-1">
|
|
{rules.length === 0 ? (
|
|
<div className="text-xs text-gray-600 italic text-center py-2 border border-dashed border-gray-700/50 rounded-lg">
|
|
No rules defined.
|
|
</div>
|
|
) : (
|
|
rules.map((rule) => (
|
|
<div key={rule.id} className="flex items-center space-x-1 animate-in slide-in-from-left-1 duration-200">
|
|
<input
|
|
type="text"
|
|
placeholder={leftPlaceholder}
|
|
value={rule.search}
|
|
onChange={(e) => handleUpdate(rule.id, 'search', e.target.value)}
|
|
className={`flex-1 min-w-0 border rounded px-1.5 py-1 text-xs focus:outline-none transition-colors ${leftInputClass || defaultInputStyle}`}
|
|
/>
|
|
<Link size={12} className="text-gray-600 flex-none opacity-50" />
|
|
<input
|
|
type="text"
|
|
placeholder={rightPlaceholder}
|
|
value={rule.replace}
|
|
onChange={(e) => handleUpdate(rule.id, 'replace', e.target.value)}
|
|
className={`flex-1 min-w-0 border rounded px-1.5 py-1 text-xs focus:outline-none transition-colors ${rightInputClass || defaultInputStyle}`}
|
|
/>
|
|
<button
|
|
onClick={() => handleDelete(rule.id)}
|
|
className="text-gray-600 hover:text-red-400 p-1 rounded hover:bg-red-500/10 transition-colors flex-none"
|
|
>
|
|
<Trash2 size={12} />
|
|
</button>
|
|
</div>
|
|
))
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
interface StrategySelectorProps {
|
|
currentStrategy: SyncStrategy;
|
|
onSelect: (strategy: SyncStrategy, label: string) => void;
|
|
savedPathMapping: PathMappingConfig;
|
|
onSavePathMapping: (config: PathMappingConfig) => void;
|
|
savedBackup: BackupSettings;
|
|
onSaveBackup: (settings: BackupSettings) => void;
|
|
savedSchedule: ScheduleSettings;
|
|
onSaveSchedule: (settings: ScheduleSettings) => Promise<boolean>;
|
|
syncState: SyncState;
|
|
onSync: () => void;
|
|
}
|
|
|
|
const StrategySelector: React.FC<StrategySelectorProps> = ({
|
|
currentStrategy,
|
|
onSelect,
|
|
savedPathMapping,
|
|
onSavePathMapping,
|
|
savedBackup,
|
|
onSaveBackup,
|
|
savedSchedule,
|
|
onSaveSchedule,
|
|
syncState,
|
|
onSync
|
|
}) => {
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
const dropdownRef = useRef<HTMLDivElement>(null);
|
|
|
|
// Local state for path mapping editing (stores all lists for both modes)
|
|
const [localPathMapping, setLocalPathMapping] = useState<PathMappingConfig>(savedPathMapping);
|
|
const [isMappingDirty, setIsMappingDirty] = useState(false);
|
|
|
|
// Local state for Backup Settings
|
|
const [localBackup, setLocalBackup] = useState<BackupSettings>(savedBackup);
|
|
const [isBackupDirty, setIsBackupDirty] = useState(false);
|
|
|
|
// Local state for Schedule editing
|
|
const [localSchedule, setLocalSchedule] = useState<ScheduleSettings>(savedSchedule);
|
|
const [isScheduleDirty, setIsScheduleDirty] = useState(false);
|
|
|
|
// UI State for Schedule Tabs
|
|
const [activeScheduleTab, setActiveScheduleTab] = 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
|
|
useEffect(() => {
|
|
setLocalPathMapping(JSON.parse(JSON.stringify(savedPathMapping)));
|
|
setIsMappingDirty(false);
|
|
}, [savedPathMapping]);
|
|
|
|
useEffect(() => {
|
|
setLocalBackup(JSON.parse(JSON.stringify(savedBackup)));
|
|
setIsBackupDirty(false);
|
|
}, [savedBackup]);
|
|
|
|
useEffect(() => {
|
|
setLocalSchedule(JSON.parse(JSON.stringify(savedSchedule)));
|
|
if (savedSchedule.mode !== ScheduleMode.DISABLED) {
|
|
setActiveScheduleTab(savedSchedule.mode);
|
|
}
|
|
setIsScheduleDirty(false);
|
|
}, [savedSchedule]);
|
|
|
|
// Check dirty state whenever local mapping changes
|
|
useEffect(() => {
|
|
const isDifferent = JSON.stringify(localPathMapping) !== JSON.stringify(savedPathMapping);
|
|
setIsMappingDirty(isDifferent);
|
|
}, [localPathMapping, savedPathMapping]);
|
|
|
|
// Check dirty state for backup
|
|
useEffect(() => {
|
|
const isDifferent = JSON.stringify(localBackup) !== JSON.stringify(savedBackup);
|
|
setIsBackupDirty(isDifferent);
|
|
}, [localBackup, savedBackup]);
|
|
|
|
// Check dirty state for Schedule (including Active Tab changes)
|
|
useEffect(() => {
|
|
const effectiveLocal = deriveEffectiveSchedule(localSchedule, activeScheduleTab);
|
|
const isDifferent = JSON.stringify(effectiveLocal) !== JSON.stringify(savedSchedule);
|
|
setIsScheduleDirty(isDifferent);
|
|
}, [localSchedule, savedSchedule, activeScheduleTab]);
|
|
|
|
const selectedOption = STRATEGIES.find(s => s.value === currentStrategy) || STRATEGIES[0];
|
|
|
|
useEffect(() => {
|
|
const handleClickOutside = (event: MouseEvent) => {
|
|
if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
|
|
setIsOpen(false);
|
|
}
|
|
};
|
|
document.addEventListener('mousedown', handleClickOutside);
|
|
return () => document.removeEventListener('mousedown', handleClickOutside);
|
|
}, []);
|
|
|
|
const isScheduleActionable = isScheduleDirty || (activeScheduleTab !== (savedSchedule.mode === ScheduleMode.DISABLED ? ScheduleMode.CRON : savedSchedule.mode));
|
|
|
|
const handleSelect = (strategy: StrategyOption) => {
|
|
if (isLocked) return;
|
|
onSelect(strategy.value, strategy.label);
|
|
};
|
|
|
|
// --- Path Mapping Handlers ---
|
|
const currentMappingMode = localPathMapping.mode;
|
|
|
|
const updateRegexGroup = (section: keyof PathMappingRules, newRules: ReplacementRule[]) => {
|
|
if (isLocked) return;
|
|
setLocalPathMapping(prev => ({
|
|
...prev,
|
|
regex: {
|
|
...prev.regex,
|
|
[section]: newRules
|
|
}
|
|
}));
|
|
};
|
|
|
|
const updateSimpleGroup = (newRules: ReplacementRule[]) => {
|
|
if (isLocked) return;
|
|
setLocalPathMapping(prev => ({
|
|
...prev,
|
|
simple: newRules
|
|
}));
|
|
};
|
|
|
|
const setMappingMode = (mode: PathMappingMode) => {
|
|
if (isLocked) return;
|
|
setLocalPathMapping(prev => ({ ...prev, mode }));
|
|
};
|
|
|
|
const handleResetMapping = () => {
|
|
if (isLocked) return;
|
|
setLocalPathMapping(JSON.parse(JSON.stringify(savedPathMapping)));
|
|
};
|
|
|
|
const handleSaveMappingClick = () => {
|
|
if (isLocked) return;
|
|
const clean = (rules: ReplacementRule[]) => rules.filter(r => r.search.trim() !== '');
|
|
|
|
// Clean regex rules
|
|
const cleanRegex = (rules: PathMappingRules): PathMappingRules => ({
|
|
localPre: clean(rules.localPre),
|
|
localPost: clean(rules.localPost),
|
|
remotePre: clean(rules.remotePre),
|
|
remotePost: clean(rules.remotePost),
|
|
});
|
|
|
|
const cleanedConfig: PathMappingConfig = {
|
|
mode: localPathMapping.mode,
|
|
simple: clean(localPathMapping.simple),
|
|
regex: cleanRegex(localPathMapping.regex),
|
|
};
|
|
|
|
setLocalPathMapping(cleanedConfig);
|
|
onSavePathMapping(cleanedConfig);
|
|
};
|
|
|
|
const regexRules = localPathMapping.regex;
|
|
const simpleRules = localPathMapping.simple;
|
|
|
|
// --- Backup Handlers ---
|
|
const handleUpdateBackup = (field: keyof BackupSettings, value: any) => {
|
|
if (isLocked) return;
|
|
setLocalBackup(prev => ({ ...prev, [field]: value }));
|
|
};
|
|
|
|
const handleResetBackup = () => {
|
|
if (isLocked) return;
|
|
setLocalBackup(JSON.parse(JSON.stringify(savedBackup)));
|
|
};
|
|
|
|
const handleSaveBackupClick = () => {
|
|
if (isLocked) return;
|
|
onSaveBackup(localBackup);
|
|
};
|
|
|
|
// --- 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) {
|
|
setActiveScheduleTab(savedSchedule.mode);
|
|
} else {
|
|
setActiveScheduleTab(ScheduleMode.CRON);
|
|
}
|
|
};
|
|
|
|
const handleSaveScheduleClick = async () => {
|
|
if (isLocked) return;
|
|
const settingsToSave = deriveEffectiveSchedule(localSchedule, activeScheduleTab);
|
|
const success = await onSaveSchedule(settingsToSave);
|
|
if (success) {
|
|
setLocalSchedule(settingsToSave);
|
|
}
|
|
};
|
|
|
|
const handleSyncClick = () => {
|
|
if (isLocked) return;
|
|
onSync();
|
|
};
|
|
|
|
const toggleScheduleEnable = (targetMode: ScheduleMode) => {
|
|
if (isLocked) return;
|
|
if (localSchedule.mode === targetMode) {
|
|
handleUpdateSchedule('mode', ScheduleMode.DISABLED);
|
|
} else {
|
|
handleUpdateSchedule('mode', targetMode);
|
|
}
|
|
};
|
|
|
|
const contentClass = isLocked ? "opacity-50 pointer-events-none grayscale transition-all" : "transition-all";
|
|
|
|
return (
|
|
<div className="relative group" ref={dropdownRef}>
|
|
{/* 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"
|
|
title={`Current Strategy: ${selectedOption.label}`}
|
|
>
|
|
<selectedOption.icon size={22} className={selectedOption.color} strokeWidth={2.5} />
|
|
<div className="absolute -bottom-1 -right-1 bg-gray-900 rounded-full border border-gray-600 p-[2px] shadow-sm">
|
|
<ChevronDown size={10} className="text-gray-400" />
|
|
</div>
|
|
</button>
|
|
|
|
{/* Dropdown Menu */}
|
|
<div
|
|
className={`absolute
|
|
top-14
|
|
/* Mobile: Open to left (max width of screen) */
|
|
right-0 w-[90vw] max-w-[90vw] origin-top-right
|
|
|
|
/* Desktop: Center alignment, wider */
|
|
md:left-1/2 md:right-auto md:origin-top md:-translate-x-1/2 md:w-[60rem] md:max-w-[60rem]
|
|
|
|
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={`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 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) => (
|
|
<div
|
|
key={strategy.value}
|
|
onClick={() => handleSelect(strategy)}
|
|
className={`group flex items-center justify-between p-2 rounded-lg cursor-pointer transition-all border ${
|
|
currentStrategy === strategy.value
|
|
? 'bg-white/10 border-white/10 shadow-sm'
|
|
: 'hover:bg-white/5 border-transparent'
|
|
}`}
|
|
>
|
|
<div className="flex items-center space-x-3 overflow-hidden">
|
|
<strategy.icon size={18} className={strategy.color} />
|
|
<span className={`text-sm font-medium truncate ${currentStrategy === strategy.value ? 'text-white' : 'text-gray-300 group-hover:text-white'}`}>
|
|
{strategy.label}
|
|
</span>
|
|
</div>
|
|
|
|
<div className="flex items-center space-x-2">
|
|
<div className="relative group/tooltip">
|
|
<HelpCircle size={14} className="text-gray-600 hover:text-gray-400 transition-colors" />
|
|
<div className="absolute right-0 bottom-full mb-2 w-48 p-2.5 bg-gray-900 text-xs text-gray-300 rounded-lg shadow-xl border border-gray-700 pointer-events-none opacity-0 group-hover/tooltip:opacity-100 transition-opacity z-50">
|
|
{strategy.description}
|
|
</div>
|
|
</div>
|
|
|
|
{currentStrategy === strategy.value && (
|
|
<Check size={14} className="text-plex-orange" strokeWidth={3} />
|
|
)}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Section 1.5: Backup Retention */}
|
|
<div className="px-4 py-3 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">Backup Retention</h3>
|
|
</div>
|
|
|
|
<div className="flex flex-col space-y-3">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center space-x-2">
|
|
<div className="p-1.5 rounded-lg bg-indigo-500/10 border border-indigo-500/20 text-indigo-400">
|
|
<Archive size={16} />
|
|
</div>
|
|
<div className="flex flex-col">
|
|
<span className="text-sm font-medium text-gray-200">Enable Backups</span>
|
|
<span className="text-[10px] text-gray-500">Create a copy before changes</span>
|
|
</div>
|
|
</div>
|
|
|
|
<button
|
|
onClick={() => handleUpdateBackup('enabled', !localBackup.enabled)}
|
|
className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-plex-orange focus:ring-offset-2 focus:ring-offset-gray-900 ${localBackup.enabled ? 'bg-plex-orange' : 'bg-gray-700'}`}
|
|
>
|
|
<span className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${localBackup.enabled ? 'translate-x-6' : 'translate-x-1'}`} />
|
|
</button>
|
|
</div>
|
|
|
|
{/* Expanded Config */}
|
|
<div className={`overflow-hidden transition-all duration-300 ${localBackup.enabled ? 'max-h-20 opacity-100' : 'max-h-0 opacity-50'}`}>
|
|
<div className="flex items-center justify-between p-2.5 rounded-lg bg-black/20 border border-white/5">
|
|
<div className="flex items-center space-x-2">
|
|
<History size={14} className="text-gray-500" />
|
|
<span className="text-xs text-gray-400">Max versions to keep:</span>
|
|
</div>
|
|
<div className="flex items-center space-x-2">
|
|
<input
|
|
type="number"
|
|
min="1"
|
|
max="100"
|
|
value={localBackup.retentionCount}
|
|
onChange={(e) => handleUpdateBackup('retentionCount', parseInt(e.target.value) || 1)}
|
|
className="w-16 bg-gray-800 border border-gray-700 text-center text-sm rounded py-1 text-white focus:border-plex-orange focus:outline-none"
|
|
/>
|
|
<span className="text-[10px] text-gray-600 italic">Oldest deleted automatically</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex justify-end items-center gap-2 pt-1">
|
|
<button
|
|
onClick={handleResetBackup}
|
|
disabled={!isBackupDirty}
|
|
className={`flex items-center justify-center space-x-1.5 px-3 py-1.5 rounded-md text-xs font-medium border transition-all
|
|
${isBackupDirty
|
|
? '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={handleSaveBackupClick}
|
|
disabled={!isBackupDirty}
|
|
className={`flex items-center justify-center space-x-1.5 px-3 py-1.5 rounded-md text-xs font-bold border transition-all
|
|
${isBackupDirty
|
|
? '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 2: Path Mapping (Tabs + Grid) */}
|
|
<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">Path Mapping</h3>
|
|
</div>
|
|
|
|
{/* Tabs for Path Mapping Mode */}
|
|
<div className="flex space-x-1 bg-black/30 p-1 rounded-lg mb-4">
|
|
{[
|
|
{ id: PathMappingMode.SIMPLE, label: 'Simple Mapping', icon: Type },
|
|
{ id: PathMappingMode.REGEX, label: 'Regex Rules', icon: Code2 },
|
|
].map((tab) => (
|
|
<button
|
|
key={tab.id}
|
|
onClick={() => setMappingMode(tab.id)}
|
|
className={`flex-1 flex items-center justify-center space-x-2 py-1.5 rounded-md text-xs font-medium transition-all
|
|
${currentMappingMode === 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>
|
|
|
|
{/* Content Area */}
|
|
<div className="mb-4">
|
|
{currentMappingMode === PathMappingMode.SIMPLE ? (
|
|
// Simple Mode: Single Editor
|
|
<div className="animate-in fade-in duration-200">
|
|
<MappingGroupEditor
|
|
title="Path Mapping"
|
|
subtitle="Map Local paths to Cloud paths using simple string matching"
|
|
rules={simpleRules}
|
|
onChange={updateSimpleGroup}
|
|
isLocked={isLocked}
|
|
borderColor={MAPPING_THEME.simple.borderColor}
|
|
bgColor={MAPPING_THEME.simple.bgColor}
|
|
leftPlaceholder="Local Path"
|
|
rightPlaceholder="Cloud Path"
|
|
leftInputClass={MAPPING_THEME.inputs.local}
|
|
rightInputClass={MAPPING_THEME.inputs.cloud}
|
|
/>
|
|
</div>
|
|
) : (
|
|
// Regex Mode: 2x2 Grid
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 animate-in fade-in duration-200">
|
|
{/* Row 1: Pre-Processing */}
|
|
<MappingGroupEditor
|
|
title="Local Playlist"
|
|
subtitle="Pre-Processing (Before Sync)"
|
|
rules={regexRules.localPre}
|
|
onChange={(rules) => updateRegexGroup('localPre', rules)}
|
|
isLocked={isLocked}
|
|
borderColor={MAPPING_THEME.local.borderColor}
|
|
bgColor={MAPPING_THEME.local.bgColor}
|
|
/>
|
|
|
|
<MappingGroupEditor
|
|
title="Remote Playlist"
|
|
subtitle="Pre-Processing (Before Sync)"
|
|
rules={regexRules.remotePre}
|
|
onChange={(rules) => updateRegexGroup('remotePre', rules)}
|
|
isLocked={isLocked}
|
|
borderColor={MAPPING_THEME.remote.borderColor}
|
|
bgColor={MAPPING_THEME.remote.bgColor}
|
|
/>
|
|
|
|
{/* Row 2: Post-Processing */}
|
|
<MappingGroupEditor
|
|
title="Local Playlist"
|
|
subtitle="Post-Processing (After Sync / Result)"
|
|
rules={regexRules.localPost}
|
|
onChange={(rules) => updateRegexGroup('localPost', rules)}
|
|
isLocked={isLocked}
|
|
borderColor={MAPPING_THEME.local.borderColor}
|
|
bgColor={MAPPING_THEME.local.bgColor}
|
|
/>
|
|
|
|
<MappingGroupEditor
|
|
title="Remote Playlist"
|
|
subtitle="Post-Processing (After Sync / Result)"
|
|
rules={regexRules.remotePost}
|
|
onChange={(rules) => updateRegexGroup('remotePost', rules)}
|
|
isLocked={isLocked}
|
|
borderColor={MAPPING_THEME.remote.borderColor}
|
|
bgColor={MAPPING_THEME.remote.bgColor}
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="flex justify-end items-center gap-2">
|
|
<button
|
|
onClick={handleResetMapping}
|
|
disabled={!isMappingDirty}
|
|
className={`flex items-center justify-center space-x-1.5 px-3 py-1.5 rounded-md text-xs font-medium border transition-all
|
|
${isMappingDirty
|
|
? '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={handleSaveMappingClick}
|
|
disabled={!isMappingDirty}
|
|
className={`flex items-center justify-center space-x-1.5 px-3 py-1.5 rounded-md text-xs font-bold border transition-all
|
|
${isMappingDirty
|
|
? '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 Rules</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 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={() => setActiveScheduleTab(tab.id)}
|
|
className={`flex-1 flex items-center justify-center space-x-2 py-1.5 rounded-md text-xs font-medium transition-all
|
|
${activeScheduleTab === 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]">
|
|
{activeScheduleTab === ScheduleMode.CRON && (
|
|
<div className="flex flex-col animate-in fade-in duration-200">
|
|
{/* Top Row: Label + Switch */}
|
|
<div className="flex items-center justify-between mb-3 px-1">
|
|
<span className="text-xs text-gray-400 font-medium">Enable Cron Schedule</span>
|
|
<button
|
|
onClick={() => toggleScheduleEnable(ScheduleMode.CRON)}
|
|
className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-plex-orange focus:ring-offset-2 focus:ring-offset-gray-900 ${localSchedule.mode === ScheduleMode.CRON ? 'bg-plex-orange' : 'bg-gray-700'}`}
|
|
>
|
|
<span className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${localSchedule.mode === ScheduleMode.CRON ? 'translate-x-6' : 'translate-x-1'}`} />
|
|
</button>
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className={`space-y-2 transition-opacity duration-200 ${localSchedule.mode !== ScheduleMode.CRON ? 'opacity-50 pointer-events-none' : ''}`}>
|
|
<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 * * *"
|
|
disabled={localSchedule.mode !== ScheduleMode.CRON}
|
|
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.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{activeScheduleTab === ScheduleMode.DAILY && (
|
|
<div className="flex flex-col animate-in fade-in duration-200">
|
|
{/* Top Row: Label + Switch */}
|
|
<div className="flex items-center justify-between mb-3 px-1">
|
|
<span className="text-xs text-gray-400 font-medium">Enable Daily Run</span>
|
|
<button
|
|
onClick={() => toggleScheduleEnable(ScheduleMode.DAILY)}
|
|
className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-plex-orange focus:ring-offset-2 focus:ring-offset-gray-900 ${localSchedule.mode === ScheduleMode.DAILY ? 'bg-plex-orange' : 'bg-gray-700'}`}
|
|
>
|
|
<span className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${localSchedule.mode === ScheduleMode.DAILY ? 'translate-x-6' : 'translate-x-1'}`} />
|
|
</button>
|
|
</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>
|
|
)}
|
|
|
|
{activeScheduleTab === ScheduleMode.WEEKLY && (
|
|
<div className="flex flex-col animate-in fade-in duration-200">
|
|
{/* Top Row: Label + Switch */}
|
|
<div className="flex items-center justify-between mb-3 px-1">
|
|
<span className="text-xs text-gray-400 font-medium">Enable Weekly Run</span>
|
|
<button
|
|
onClick={() => toggleScheduleEnable(ScheduleMode.WEEKLY)}
|
|
className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-plex-orange focus:ring-offset-2 focus:ring-offset-gray-900 ${localSchedule.mode === ScheduleMode.WEEKLY ? 'bg-plex-orange' : 'bg-gray-700'}`}
|
|
>
|
|
<span className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${localSchedule.mode === ScheduleMode.WEEKLY ? 'translate-x-6' : 'translate-x-1'}`} />
|
|
</button>
|
|
</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 Switch */}
|
|
<div className="flex items-center justify-between mb-4 mt-2 px-1">
|
|
<div className="flex items-center space-x-2">
|
|
<div className="p-1.5 rounded-lg bg-orange-500/10 border border-orange-500/20 text-orange-400">
|
|
<Eye size={16} />
|
|
</div>
|
|
<div className="flex flex-col">
|
|
<span className="text-sm font-medium text-gray-200">Watch Local Changes</span>
|
|
<span className="text-[10px] text-gray-500">Auto-sync when local playlist updates</span>
|
|
</div>
|
|
</div>
|
|
<button
|
|
onClick={() => handleUpdateSchedule('autoWatch', !localSchedule.autoWatch)}
|
|
className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-plex-orange focus:ring-offset-2 focus:ring-offset-gray-900 ${localSchedule.autoWatch ? 'bg-plex-orange' : 'bg-gray-700'}`}
|
|
>
|
|
<span className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${localSchedule.autoWatch ? 'translate-x-6' : 'translate-x-1'}`} />
|
|
</button>
|
|
</div>
|
|
|
|
{/* Action Buttons */}
|
|
<div className="flex items-center gap-2 justify-end pt-3 border-t border-white/5">
|
|
<button
|
|
onClick={handleResetSchedule}
|
|
disabled={!isScheduleActionable}
|
|
className={`flex items-center justify-center space-x-1.5 px-3 py-1.5 rounded-md text-xs font-medium border transition-all
|
|
${isScheduleActionable
|
|
? '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={!isScheduleActionable}
|
|
className={`flex items-center justify-center space-x-1.5 px-3 py-1.5 rounded-md text-xs font-bold border transition-all
|
|
${isScheduleActionable
|
|
? '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 4: Sync Now Button */}
|
|
<div className="p-4 bg-gray-950/50 border-t border-white/5 flex-none">
|
|
<button
|
|
onClick={handleSyncClick}
|
|
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'
|
|
: isMappingDirty || isBackupDirty
|
|
? '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]'
|
|
}`}
|
|
>
|
|
{isSyncing ? (
|
|
<>
|
|
<Loader2 size={16} className="animate-spin" />
|
|
<span>Sync in Progress...</span>
|
|
</>
|
|
) : (
|
|
<>
|
|
<Zap size={16} fill="currentColor" />
|
|
<span>Sync Now</span>
|
|
</>
|
|
)}
|
|
</button>
|
|
{(isMappingDirty || isBackupDirty) && (
|
|
<p className="text-[10px] text-plex-orange text-center mt-2">
|
|
Please save pending changes (Backups/Path Mapping) before syncing.
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default StrategySelector; |