Koha9/PlexPlaylistSync
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Squashed 'sample-front-end/' changes from 9f02555..0e20813

Browse Source 
0e20813 feat: Add eye icon for visibility toggles

git-subtree-dir: sample-front-end
git-subtree-split: 0e208135b924170bcd757c693265a5cc1b620ac3
This commit is contained in:
Koha9
2025-11-29 12:35:27 +09:00
parent 305743d752
commit d1a4273fb2
1 changed files with 42 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
App.tsx
+41 -9
View File
@@ -17,7 +17,7 @@ import { SYNC_BANNER_PADDING_X, SYNC_BANNER_PADDING_Y, SYNC_BANNER_MIN_WIDTH } f
import ServerPanel from './components/ServerPanel';
import StrategySelector from './components/StrategySelector';
import ConnectionModal from './components/ConnectionModal';
import { ArrowLeftRight, ShieldCheck, X, Server, ServerOff, Clock } from 'lucide-react';
import { ArrowLeftRight, ShieldCheck, X, Server, ServerOff, Clock, Eye, EyeOff } from 'lucide-react';
interface Toast {
id: number;
@@ -383,12 +383,24 @@ const App: React.FC = () => {
// Helper: Calculate Next Run Info
const getScheduleDisplayInfo = (settings: ScheduleSettings) => {
const result = {
label: 'Schedule',
value: 'Not configured',
active: false,
autoWatch: settings.autoWatch
};
if (settings.mode === ScheduleMode.DISABLED) {
return { label: 'Auto-Sync', value: 'Disabled', active: false };
result.label = 'Auto-Sync';
result.value = 'Disabled';
return result;
}
if (settings.mode === ScheduleMode.CRON) {
return { label: 'Cron Schedule', value: settings.cronExpression || 'Pending...', active: true };
result.label = 'Cron Schedule';
result.value = settings.cronExpression || 'Pending...';
result.active = true;
return result;
}
const now = new Date();
@@ -415,7 +427,11 @@ const App: React.FC = () => {
const [h, m] = settings.weeklyTime.split(':').map(Number);
const activeDays = [...settings.weeklyDays].sort();
if (activeDays.length === 0) return { label: 'Weekly Schedule', value: 'No days selected', active: false };
if (activeDays.length === 0) {
result.label = 'Weekly Schedule';
result.value = 'No days selected';
return result;
}
// Check rest of today
if (activeDays.includes(now.getDay())) {
@@ -451,10 +467,13 @@ const App: React.FC = () => {
else if (isTomorrow) dateStr = 'Tomorrow';
else dateStr = days[nextRun.getDay()];
return { label: `${settings.mode === ScheduleMode.DAILY ? 'Daily' : 'Weekly'} Schedule`, value: `${dateStr} at ${timeStr}`, active: true };
result.label = `${settings.mode === ScheduleMode.DAILY ? 'Daily' : 'Weekly'} Schedule`;
result.value = `${dateStr} at ${timeStr}`;
result.active = true;
return result;
}
return { label: 'Schedule', value: 'Not configured', active: false };
return result;
};
const scheduleInfo = getScheduleDisplayInfo(scheduleSettings);
@@ -541,9 +560,22 @@ const App: React.FC = () => {
<span className="text-[10px] uppercase font-bold text-gray-500 tracking-wider">
{scheduleInfo.label}
</span>
<div className={`text-xs font-mono flex items-center gap-1.5 ${scheduleInfo.active ? 'text-plex-orange' : 'text-gray-600'}`}>
{scheduleInfo.active && <Clock size={12} />}
<span>{scheduleInfo.value}</span>
<div className="text-xs font-mono flex items-center gap-1.5">
{/* Schedule Part */}
<div className={`flex items-center gap-1.5 ${scheduleInfo.active ? 'text-plex-orange' : 'text-gray-600'}`}>
{scheduleInfo.active && <Clock size={12} />}
<span>{scheduleInfo.value}</span>
</div>
{/* Watch Part */}
<span className="text-gray-700 mx-0.5">|</span>
<div
className={`flex items-center gap-1 ${scheduleInfo.autoWatch ? 'text-plex-orange' : 'text-gray-600'}`}
title={scheduleInfo.autoWatch ? "Local Playlist Monitoring Enabled" : "Local Playlist Monitoring Disabled"}
>
{scheduleInfo.autoWatch ? <Eye size={12} /> : <EyeOff size={12} />}
<span className="text-[10px] font-sans font-bold">WATCH</span>
</div>
</div>
</div>