Add offline mode components and enhance synchronization logic
- Introduced `OfflineSyncManager`, `OfflineToggle`, `OfflinePinSetup`, `OfflineIndicator`, and `OfflineSyncDetails` components to support offline mode functionality. - Added PIN verification (`OfflinePinVerify`) for secure offline access. - Implemented sync options for books (current, recent, all) with progress tracking and improved user feedback. - Enhanced offline context integration and error handling in sync processes. - Refined UI elements for better online/offline status visibility and manual sync controls.
This commit is contained in:
natreex
174
components/offline/OfflineIndicator.tsx
Normal file
174
components/offline/OfflineIndicator.tsx
Normal file
@@ -0,0 +1,174 @@
|
||||
'use client';
|
||||
|
||||
import React, { useContext } from 'react';
|
||||
import OfflineContext from '@/context/OfflineContext';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { faWifi, faWifiSlash, faSync, faCircle, faExclamationTriangle, faCheck } from '@fortawesome/free-solid-svg-icons';
|
||||
|
||||
/**
|
||||
* OfflineIndicator - Displays current online/offline status and sync progress
|
||||
* Allows user to toggle manual offline mode
|
||||
*/
|
||||
export default function OfflineIndicator() {
|
||||
const { offlineMode, toggleOfflineMode, syncNow } = useContext(OfflineContext);
|
||||
|
||||
const {
|
||||
isOffline,
|
||||
isManuallyOffline,
|
||||
isNetworkOnline,
|
||||
isDatabaseInitialized,
|
||||
syncProgress,
|
||||
lastSyncAt,
|
||||
error
|
||||
} = offlineMode;
|
||||
|
||||
// Determine status color and text
|
||||
const getStatusInfo = () => {
|
||||
if (!isDatabaseInitialized) {
|
||||
return {
|
||||
color: 'text-gray-400',
|
||||
bgColor: 'bg-gray-100',
|
||||
icon: faCircle,
|
||||
text: 'DB non initialisée'
|
||||
};
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return {
|
||||
color: 'text-red-500',
|
||||
bgColor: 'bg-red-50',
|
||||
icon: faExclamationTriangle,
|
||||
text: 'Erreur de sync'
|
||||
};
|
||||
}
|
||||
|
||||
if (syncProgress.isSyncing) {
|
||||
return {
|
||||
color: 'text-blue-500',
|
||||
bgColor: 'bg-blue-50',
|
||||
icon: faSync,
|
||||
text: 'Synchronisation...',
|
||||
spin: true
|
||||
};
|
||||
}
|
||||
|
||||
if (isOffline) {
|
||||
if (syncProgress.pendingChanges > 0) {
|
||||
return {
|
||||
color: 'text-orange-500',
|
||||
bgColor: 'bg-orange-50',
|
||||
icon: faWifiSlash,
|
||||
text: `Hors ligne (${syncProgress.pendingChanges} en attente)`
|
||||
};
|
||||
}
|
||||
return {
|
||||
color: 'text-orange-500',
|
||||
bgColor: 'bg-orange-50',
|
||||
icon: faWifiSlash,
|
||||
text: isManuallyOffline ? 'Mode hors ligne' : 'Hors ligne'
|
||||
};
|
||||
}
|
||||
|
||||
if (syncProgress.pendingChanges > 0) {
|
||||
return {
|
||||
color: 'text-yellow-500',
|
||||
bgColor: 'bg-yellow-50',
|
||||
icon: faSync,
|
||||
text: `${syncProgress.pendingChanges} changements à sync`
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
color: 'text-green-500',
|
||||
bgColor: 'bg-green-50',
|
||||
icon: faCheck,
|
||||
text: 'Synchronisé'
|
||||
};
|
||||
};
|
||||
|
||||
const statusInfo = getStatusInfo();
|
||||
|
||||
// Format last sync time
|
||||
const formatLastSync = () => {
|
||||
if (!lastSyncAt) return 'Jamais';
|
||||
|
||||
const diff = Date.now() - lastSyncAt;
|
||||
const minutes = Math.floor(diff / 60000);
|
||||
const hours = Math.floor(minutes / 60);
|
||||
|
||||
if (hours > 0) return `Il y a ${hours}h`;
|
||||
if (minutes > 0) return `Il y a ${minutes}min`;
|
||||
return 'À l\'instant';
|
||||
};
|
||||
|
||||
const handleSyncNow = async () => {
|
||||
if (!isOffline && !syncProgress.isSyncing) {
|
||||
await syncNow();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-3 px-4 py-2 bg-white border-b border-gray-200">
|
||||
{/* Status indicator */}
|
||||
<div className={`flex items-center gap-2 px-3 py-1 rounded-full ${statusInfo.bgColor}`}>
|
||||
<FontAwesomeIcon
|
||||
icon={statusInfo.icon}
|
||||
className={`${statusInfo.color} text-sm`}
|
||||
spin={statusInfo.spin}
|
||||
/>
|
||||
<span className={`text-sm font-medium ${statusInfo.color}`}>
|
||||
{statusInfo.text}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Last sync time */}
|
||||
{isDatabaseInitialized && !isOffline && (
|
||||
<span className="text-xs text-gray-500">
|
||||
Dernière sync: {formatLastSync()}
|
||||
</span>
|
||||
)}
|
||||
|
||||
{/* Error message */}
|
||||
{error && (
|
||||
<span className="text-xs text-red-500 max-w-xs truncate" title={error}>
|
||||
{error}
|
||||
</span>
|
||||
)}
|
||||
|
||||
{/* Actions */}
|
||||
<div className="ml-auto flex items-center gap-2">
|
||||
{/* Manual sync button */}
|
||||
{isDatabaseInitialized && !isOffline && !syncProgress.isSyncing && (
|
||||
<button
|
||||
onClick={handleSyncNow}
|
||||
className="px-3 py-1 text-sm text-blue-600 hover:bg-blue-50 rounded transition-colors"
|
||||
title="Synchroniser maintenant"
|
||||
>
|
||||
<FontAwesomeIcon icon={faSync} className="mr-1" />
|
||||
Sync
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* Offline toggle */}
|
||||
{isDatabaseInitialized && (
|
||||
<button
|
||||
onClick={toggleOfflineMode}
|
||||
className={`px-3 py-1 text-sm rounded transition-colors ${
|
||||
isManuallyOffline
|
||||
? 'bg-orange-100 text-orange-700 hover:bg-orange-200'
|
||||
: 'bg-gray-100 text-gray-700 hover:bg-gray-200'
|
||||
}`}
|
||||
title={isManuallyOffline ? 'Passer en ligne' : 'Passer hors ligne'}
|
||||
disabled={!isNetworkOnline && !isManuallyOffline}
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
icon={isOffline ? faWifiSlash : faWifi}
|
||||
className="mr-1"
|
||||
/>
|
||||
{isManuallyOffline ? 'En ligne' : 'Hors ligne'}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
181
components/offline/OfflinePinSetup.tsx
Normal file
181
components/offline/OfflinePinSetup.tsx
Normal file
@@ -0,0 +1,181 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useContext } from 'react';
|
||||
import { SessionContext } from '@/context/SessionContext';
|
||||
import { useTranslations } from 'next-intl';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { faLock, faShieldAlt, faEye, faEyeSlash } from '@fortawesome/free-solid-svg-icons';
|
||||
|
||||
interface OfflinePinSetupProps {
|
||||
onClose?: () => void;
|
||||
onSuccess?: () => void;
|
||||
showOnFirstLogin?: boolean;
|
||||
}
|
||||
|
||||
export default function OfflinePinSetup({ onClose, onSuccess, showOnFirstLogin }: OfflinePinSetupProps) {
|
||||
const t = useTranslations();
|
||||
const { session } = useContext(SessionContext);
|
||||
const [pin, setPin] = useState('');
|
||||
const [confirmPin, setConfirmPin] = useState('');
|
||||
const [showPin, setShowPin] = useState(false);
|
||||
const [error, setError] = useState('');
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
// Only allow PIN setup if authenticated
|
||||
if (!session?.isConnected || !session?.user) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const validatePin = (): boolean => {
|
||||
if (pin.length < 4) {
|
||||
setError(t('offline.pin.errors.tooShort'));
|
||||
return false;
|
||||
}
|
||||
if (pin.length > 8) {
|
||||
setError(t('offline.pin.errors.tooLong'));
|
||||
return false;
|
||||
}
|
||||
if (!/^\d+$/.test(pin)) {
|
||||
setError(t('offline.pin.errors.digitsOnly'));
|
||||
return false;
|
||||
}
|
||||
if (pin !== confirmPin) {
|
||||
setError(t('offline.pin.errors.mismatch'));
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
};
|
||||
|
||||
const handleSetPin = async () => {
|
||||
if (!validatePin()) return;
|
||||
|
||||
setIsLoading(true);
|
||||
setError('');
|
||||
|
||||
try {
|
||||
if (window.electron) {
|
||||
// Set the PIN
|
||||
const result = await window.electron.offlinePinSet(pin);
|
||||
|
||||
if (result.success) {
|
||||
// Enable offline mode
|
||||
await window.electron.offlineModeSet(true, 30); // 30 days sync interval
|
||||
|
||||
console.log('[OfflinePin] PIN configured successfully');
|
||||
onSuccess?.();
|
||||
} else {
|
||||
setError(result.error || t('offline.pin.errors.setupFailed'));
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('[OfflinePin] Error setting PIN:', error);
|
||||
setError(t('offline.pin.errors.setupFailed'));
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
|
||||
<div className="bg-tertiary rounded-2xl p-6 max-w-md w-full mx-4 shadow-2xl">
|
||||
{/* Header */}
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className="p-3 bg-primary/10 rounded-lg">
|
||||
<FontAwesomeIcon icon={faShieldAlt} className="w-6 h-6 text-primary" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h2 className="text-xl font-bold text-textPrimary">
|
||||
{showOnFirstLogin ? t('offline.pin.setup.titleFirstLogin') : t('offline.pin.setup.title')}
|
||||
</h2>
|
||||
<p className="text-sm text-muted">
|
||||
{t('offline.pin.setup.subtitle')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Info box */}
|
||||
<div className="bg-info/10 border border-info/20 rounded-lg p-3 mb-4">
|
||||
<p className="text-sm text-info">
|
||||
<FontAwesomeIcon icon={faLock} className="w-3 h-3 mr-2" />
|
||||
{t('offline.pin.setup.description')}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* PIN Input */}
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-textPrimary mb-2">
|
||||
{t('offline.pin.setup.pinLabel')}
|
||||
</label>
|
||||
<div className="relative">
|
||||
<input
|
||||
type={showPin ? 'text' : 'password'}
|
||||
value={pin}
|
||||
onChange={(e) => setPin(e.target.value.replace(/\D/g, '').slice(0, 8))}
|
||||
placeholder="••••"
|
||||
maxLength={8}
|
||||
className="w-full px-4 py-2 bg-secondary border border-gray-dark rounded-lg focus:outline-none focus:border-primary"
|
||||
disabled={isLoading}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowPin(!showPin)}
|
||||
className="absolute right-3 top-1/2 -translate-y-1/2 text-muted hover:text-textPrimary"
|
||||
>
|
||||
<FontAwesomeIcon icon={showPin ? faEyeSlash : faEye} className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-textPrimary mb-2">
|
||||
{t('offline.pin.setup.confirmPinLabel')}
|
||||
</label>
|
||||
<input
|
||||
type={showPin ? 'text' : 'password'}
|
||||
value={confirmPin}
|
||||
onChange={(e) => setConfirmPin(e.target.value.replace(/\D/g, '').slice(0, 8))}
|
||||
placeholder="••••"
|
||||
maxLength={8}
|
||||
className="w-full px-4 py-2 bg-secondary border border-gray-dark rounded-lg focus:outline-none focus:border-primary"
|
||||
disabled={isLoading}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Error message */}
|
||||
{error && (
|
||||
<div className="mt-3 p-2 bg-danger/10 border border-danger/20 rounded-lg">
|
||||
<p className="text-sm text-danger">{error}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Actions */}
|
||||
<div className="mt-6 flex gap-3 justify-end">
|
||||
{onClose && (
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="px-4 py-2 text-muted hover:text-textPrimary transition-colors"
|
||||
disabled={isLoading}
|
||||
>
|
||||
{t('offline.pin.setup.laterButton')}
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
onClick={handleSetPin}
|
||||
disabled={isLoading || !pin || !confirmPin}
|
||||
className="px-6 py-2 bg-primary hover:bg-primary/90 text-white rounded-lg transition-all disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
|
||||
>
|
||||
<FontAwesomeIcon icon={faLock} className="w-4 h-4" />
|
||||
{isLoading ? t('offline.pin.setup.configuringButton') : t('offline.pin.setup.configureButton')}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Footer note */}
|
||||
<p className="mt-4 text-xs text-muted text-center">
|
||||
{t('offline.pin.setup.footer')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
158
components/offline/OfflinePinVerify.tsx
Normal file
158
components/offline/OfflinePinVerify.tsx
Normal file
@@ -0,0 +1,158 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { useTranslations } from 'next-intl';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { faLock, faWifi, faEye, faEyeSlash } from '@fortawesome/free-solid-svg-icons';
|
||||
|
||||
interface OfflinePinVerifyProps {
|
||||
onSuccess: (userId: string) => void;
|
||||
onCancel?: () => void;
|
||||
}
|
||||
|
||||
export default function OfflinePinVerify({ onSuccess, onCancel }: OfflinePinVerifyProps) {
|
||||
const t = useTranslations();
|
||||
const [pin, setPin] = useState('');
|
||||
const [showPin, setShowPin] = useState(false);
|
||||
const [error, setError] = useState('');
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [attempts, setAttempts] = useState(0);
|
||||
|
||||
const handleVerifyPin = async () => {
|
||||
if (!pin || pin.length < 4) {
|
||||
setError(t('offline.pin.verify.enterPin'));
|
||||
return;
|
||||
}
|
||||
|
||||
setIsLoading(true);
|
||||
setError('');
|
||||
|
||||
try {
|
||||
if (window.electron) {
|
||||
const result = await window.electron.offlinePinVerify(pin);
|
||||
|
||||
if (result.success && result.userId) {
|
||||
console.log('[OfflinePin] PIN verified, accessing offline mode');
|
||||
onSuccess(result.userId);
|
||||
} else {
|
||||
setAttempts(prev => prev + 1);
|
||||
setPin('');
|
||||
|
||||
if (attempts >= 2) {
|
||||
setError(t('offline.pin.verify.tooManyAttempts'));
|
||||
} else {
|
||||
setError(result.error || t('offline.pin.verify.incorrect'));
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('[OfflinePin] Error verifying PIN:', error);
|
||||
setError(t('offline.pin.verify.error'));
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleKeyPress = (e: React.KeyboardEvent) => {
|
||||
if (e.key === 'Enter') {
|
||||
handleVerifyPin();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-background">
|
||||
<div className="bg-tertiary rounded-2xl p-6 max-w-md w-full mx-4 shadow-2xl">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-center mb-6">
|
||||
<div className="relative">
|
||||
<div className="p-4 bg-primary/10 rounded-full">
|
||||
<FontAwesomeIcon icon={faLock} className="w-8 h-8 text-primary" />
|
||||
</div>
|
||||
<div className="absolute -bottom-1 -right-1 p-1 bg-tertiary rounded-full">
|
||||
<div className="p-1 bg-warning/20 rounded-full">
|
||||
<FontAwesomeIcon icon={faWifi} className="w-3 h-3 text-warning" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="text-center mb-6">
|
||||
<h2 className="text-xl font-bold text-textPrimary mb-2">
|
||||
{t('offline.pin.verify.title')}
|
||||
</h2>
|
||||
<p className="text-sm text-muted">
|
||||
{t('offline.pin.verify.subtitle')}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* PIN Input */}
|
||||
<div className="mb-4">
|
||||
<div className="relative">
|
||||
<input
|
||||
type={showPin ? 'text' : 'password'}
|
||||
value={pin}
|
||||
onChange={(e) => setPin(e.target.value.replace(/\D/g, '').slice(0, 8))}
|
||||
onKeyPress={handleKeyPress}
|
||||
placeholder={t('offline.pin.verify.placeholder')}
|
||||
maxLength={8}
|
||||
autoFocus
|
||||
className="w-full px-4 py-3 bg-secondary border border-gray-dark rounded-lg focus:outline-none focus:border-primary text-center text-lg tracking-widest"
|
||||
disabled={isLoading || attempts > 2}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowPin(!showPin)}
|
||||
className="absolute right-3 top-1/2 -translate-y-1/2 text-muted hover:text-textPrimary"
|
||||
>
|
||||
<FontAwesomeIcon icon={showPin ? faEyeSlash : faEye} className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Error message */}
|
||||
{error && (
|
||||
<div className="mb-4 p-3 bg-danger/10 border border-danger/20 rounded-lg">
|
||||
<p className="text-sm text-danger text-center">{error}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex gap-3">
|
||||
{onCancel && (
|
||||
<button
|
||||
onClick={onCancel}
|
||||
className="flex-1 px-4 py-2 border border-gray-dark text-muted hover:text-textPrimary hover:border-gray rounded-lg transition-colors"
|
||||
disabled={isLoading}
|
||||
>
|
||||
{t('offline.pin.verify.cancelButton')}
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
onClick={handleVerifyPin}
|
||||
disabled={isLoading || !pin || attempts > 2}
|
||||
className="flex-1 px-4 py-2 bg-primary hover:bg-primary/90 text-white rounded-lg transition-all disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
|
||||
>
|
||||
{isLoading ? (
|
||||
<>
|
||||
<div className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />
|
||||
{t('offline.pin.verify.verifyingButton')}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<FontAwesomeIcon icon={faLock} className="w-4 h-4" />
|
||||
{t('offline.pin.verify.unlockButton')}
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Help text */}
|
||||
{attempts > 0 && attempts <= 2 && (
|
||||
<p className="mt-4 text-xs text-muted text-center">
|
||||
{t('offline.pin.verify.attemptsRemaining', { count: 3 - attempts })}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
126
components/offline/OfflineSyncDetails.tsx
Normal file
126
components/offline/OfflineSyncDetails.tsx
Normal file
@@ -0,0 +1,126 @@
|
||||
'use client';
|
||||
|
||||
import React, { useContext } from 'react';
|
||||
import OfflineContext from '@/context/OfflineContext';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { faDatabase, faSync, faExclamationCircle } from '@fortawesome/free-solid-svg-icons';
|
||||
|
||||
/**
|
||||
* OfflineSyncDetails - Detailed view of sync status per table
|
||||
* Shows pending changes and last sync time for each data type
|
||||
*/
|
||||
export default function OfflineSyncDetails() {
|
||||
const { offlineMode } = useContext(OfflineContext);
|
||||
const { syncProgress, isDatabaseInitialized } = offlineMode;
|
||||
|
||||
if (!isDatabaseInitialized) {
|
||||
return (
|
||||
<div className="p-4 text-center text-gray-500">
|
||||
<FontAwesomeIcon icon={faDatabase} className="text-3xl mb-2" />
|
||||
<p>Base de données non initialisée</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!syncProgress.tables || syncProgress.tables.length === 0) {
|
||||
return (
|
||||
<div className="p-4 text-center text-gray-500">
|
||||
<FontAwesomeIcon icon={faSync} className="text-3xl mb-2" />
|
||||
<p>Aucune donnée de synchronisation disponible</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Format timestamp
|
||||
const formatTime = (timestamp: number) => {
|
||||
if (!timestamp) return 'Jamais';
|
||||
const date = new Date(timestamp);
|
||||
return date.toLocaleString('fr-FR', {
|
||||
day: '2-digit',
|
||||
month: '2-digit',
|
||||
year: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
});
|
||||
};
|
||||
|
||||
// Get friendly name for table
|
||||
const getTableName = (table: string): string => {
|
||||
const names: { [key: string]: string } = {
|
||||
'erit_books': 'Livres',
|
||||
'book_chapters': 'Chapitres',
|
||||
'book_chapter_content': 'Contenu des chapitres',
|
||||
'book_characters': 'Personnages',
|
||||
'book_world': 'Monde',
|
||||
'book_world_elements': 'Éléments du monde',
|
||||
'ai_conversations': 'Conversations IA',
|
||||
'ai_messages_history': 'Messages IA',
|
||||
'book_guide_line': 'Lignes directrices',
|
||||
'book_plot_points': 'Points de l\'intrigue',
|
||||
'book_incidents': 'Incidents'
|
||||
};
|
||||
return names[table] || table;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="p-4">
|
||||
<h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
|
||||
<FontAwesomeIcon icon={faDatabase} />
|
||||
État de synchronisation
|
||||
</h3>
|
||||
|
||||
<div className="space-y-2">
|
||||
{syncProgress.tables.map((tableStatus) => {
|
||||
const hasPending = tableStatus.pending > 0;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={tableStatus.table}
|
||||
className={`p-3 rounded-lg border ${
|
||||
hasPending
|
||||
? 'border-orange-200 bg-orange-50'
|
||||
: 'border-gray-200 bg-gray-50'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex-1">
|
||||
<div className="font-medium text-sm">
|
||||
{getTableName(tableStatus.table)}
|
||||
</div>
|
||||
<div className="text-xs text-gray-500 mt-1">
|
||||
Dernière sync: {formatTime(tableStatus.lastSync)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{hasPending && (
|
||||
<div className="flex items-center gap-2 text-orange-600">
|
||||
<FontAwesomeIcon
|
||||
icon={faExclamationCircle}
|
||||
className="text-sm"
|
||||
/>
|
||||
<span className="text-sm font-medium">
|
||||
{tableStatus.pending} en attente
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!hasPending && tableStatus.lastSync > 0 && (
|
||||
<div className="text-green-600 text-sm">
|
||||
✓ Synchronisé
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Summary */}
|
||||
<div className="mt-4 p-3 bg-blue-50 rounded-lg border border-blue-200">
|
||||
<div className="text-sm text-blue-800">
|
||||
<strong>Total:</strong> {syncProgress.pendingChanges} changement(s) en attente
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
233
components/offline/OfflineSyncManager.tsx
Normal file
233
components/offline/OfflineSyncManager.tsx
Normal file
@@ -0,0 +1,233 @@
|
||||
'use client';
|
||||
import { useState, useEffect, useContext } from 'react';
|
||||
import { SessionContext } from '@/context/SessionContext';
|
||||
import { OfflineContext } from '@/context/OfflineContext';
|
||||
import { useTranslations } from 'next-intl';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import {
|
||||
faCloudDownloadAlt,
|
||||
faWifi,
|
||||
faCheckCircle,
|
||||
faSpinner,
|
||||
faBook
|
||||
} from '@fortawesome/free-solid-svg-icons';
|
||||
|
||||
interface SyncOption {
|
||||
id: 'current' | 'recent' | 'all' | 'skip';
|
||||
label: string;
|
||||
description: string;
|
||||
estimatedSize?: string;
|
||||
bookCount?: number;
|
||||
}
|
||||
|
||||
export default function OfflineSyncManager() {
|
||||
const t = useTranslations();
|
||||
const { session } = useContext(SessionContext);
|
||||
const { syncBooks, isOnline } = useContext(OfflineContext);
|
||||
const [showDialog, setShowDialog] = useState(false);
|
||||
const [isFirstSync, setIsFirstSync] = useState(false);
|
||||
const [syncProgress, setSyncProgress] = useState(0);
|
||||
const [selectedOption, setSelectedOption] = useState<string>('');
|
||||
|
||||
useEffect(() => {
|
||||
// Check if this is first time user sees sync options
|
||||
const hasSeenSync = localStorage.getItem('hasSeenSyncDialog');
|
||||
if (!hasSeenSync && isOnline && session?.user) {
|
||||
setIsFirstSync(true);
|
||||
setShowDialog(true);
|
||||
}
|
||||
}, [session, isOnline]);
|
||||
|
||||
const syncOptions: SyncOption[] = [
|
||||
{
|
||||
id: 'current',
|
||||
label: t('sync.currentBook'),
|
||||
description: t('sync.currentBookDesc'),
|
||||
estimatedSize: '~5 MB',
|
||||
bookCount: 1
|
||||
},
|
||||
{
|
||||
id: 'recent',
|
||||
label: t('sync.recentBooks'),
|
||||
description: t('sync.recentBooksDesc'),
|
||||
estimatedSize: '~25 MB',
|
||||
bookCount: 3
|
||||
},
|
||||
{
|
||||
id: 'all',
|
||||
label: t('sync.allBooks'),
|
||||
description: t('sync.allBooksDesc'),
|
||||
estimatedSize: '~120 MB',
|
||||
bookCount: 12
|
||||
},
|
||||
{
|
||||
id: 'skip',
|
||||
label: t('sync.skipForNow'),
|
||||
description: t('sync.skipDesc'),
|
||||
}
|
||||
];
|
||||
|
||||
const handleSync = async (option: string) => {
|
||||
if (option === 'skip') {
|
||||
localStorage.setItem('hasSeenSyncDialog', 'true');
|
||||
setShowDialog(false);
|
||||
return;
|
||||
}
|
||||
|
||||
setSyncProgress(0);
|
||||
|
||||
try {
|
||||
// Simulate progressive download
|
||||
const interval = setInterval(() => {
|
||||
setSyncProgress(prev => {
|
||||
if (prev >= 100) {
|
||||
clearInterval(interval);
|
||||
return 100;
|
||||
}
|
||||
return prev + 10;
|
||||
});
|
||||
}, 200);
|
||||
|
||||
// Actual sync logic here
|
||||
// await syncBooks(option);
|
||||
|
||||
localStorage.setItem('hasSeenSyncDialog', 'true');
|
||||
localStorage.setItem('syncPreference', option);
|
||||
|
||||
setTimeout(() => {
|
||||
setShowDialog(false);
|
||||
}, 2000);
|
||||
} catch (error) {
|
||||
console.error('Sync failed:', error);
|
||||
}
|
||||
};
|
||||
|
||||
if (!showDialog) return null;
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
|
||||
<div className="bg-tertiary rounded-2xl p-8 max-w-2xl w-full mx-4 shadow-2xl">
|
||||
{/* Header */}
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="relative">
|
||||
<FontAwesomeIcon
|
||||
icon={faCloudDownloadAlt}
|
||||
className="w-8 h-8 text-primary"
|
||||
/>
|
||||
{isOnline && (
|
||||
<FontAwesomeIcon
|
||||
icon={faWifi}
|
||||
className="w-4 h-4 text-success absolute -bottom-1 -right-1 bg-tertiary rounded-full p-0.5"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold">
|
||||
{isFirstSync ? t('sync.welcomeOffline') : t('sync.syncOptions')}
|
||||
</h2>
|
||||
<p className="text-muted text-sm">
|
||||
{t('sync.workAnywhere')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Sync Options */}
|
||||
{syncProgress === 0 ? (
|
||||
<div className="space-y-3 mb-6">
|
||||
{syncOptions.map((option) => (
|
||||
<button
|
||||
key={option.id}
|
||||
onClick={() => setSelectedOption(option.id)}
|
||||
className={`
|
||||
w-full p-4 rounded-lg border-2 text-left transition-all
|
||||
${selectedOption === option.id
|
||||
? 'border-primary bg-primary/10'
|
||||
: 'border-gray-dark hover:border-gray'
|
||||
}
|
||||
`}
|
||||
>
|
||||
<div className="flex justify-between items-start">
|
||||
<div className="flex-1">
|
||||
<div className="font-semibold flex items-center gap-2">
|
||||
{option.bookCount && (
|
||||
<span className="text-primary">
|
||||
<FontAwesomeIcon icon={faBook} className="w-4 h-4" />
|
||||
{' '}{option.bookCount}
|
||||
</span>
|
||||
)}
|
||||
{option.label}
|
||||
</div>
|
||||
<p className="text-sm text-muted mt-1">
|
||||
{option.description}
|
||||
</p>
|
||||
</div>
|
||||
{option.estimatedSize && (
|
||||
<span className="text-sm text-muted">
|
||||
{option.estimatedSize}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
/* Progress Bar */
|
||||
<div className="mb-6">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<span className="text-sm text-muted">
|
||||
{t('sync.downloading')}...
|
||||
</span>
|
||||
<span className="text-sm font-semibold">
|
||||
{syncProgress}%
|
||||
</span>
|
||||
</div>
|
||||
<div className="h-2 bg-gray-dark rounded-full overflow-hidden">
|
||||
<div
|
||||
className="h-full bg-gradient-to-r from-primary to-info transition-all duration-300"
|
||||
style={{ width: `${syncProgress}%` }}
|
||||
/>
|
||||
</div>
|
||||
{syncProgress === 100 && (
|
||||
<div className="mt-4 text-center">
|
||||
<FontAwesomeIcon
|
||||
icon={faCheckCircle}
|
||||
className="w-12 h-12 text-success mx-auto mb-2"
|
||||
/>
|
||||
<p className="text-success font-semibold">
|
||||
{t('sync.complete')}!
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Actions */}
|
||||
{syncProgress === 0 && (
|
||||
<div className="flex gap-3 justify-end">
|
||||
<button
|
||||
onClick={() => handleSync('skip')}
|
||||
className="px-6 py-2 text-muted hover:text-textPrimary transition-colors"
|
||||
>
|
||||
{t('common.later')}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleSync(selectedOption)}
|
||||
disabled={!selectedOption}
|
||||
className="
|
||||
px-6 py-2 bg-primary hover:bg-primary/90
|
||||
text-white rounded-lg transition-all
|
||||
disabled:opacity-50 disabled:cursor-not-allowed
|
||||
flex items-center gap-2
|
||||
"
|
||||
>
|
||||
{selectedOption === 'skip' ? t('common.continue') : t('sync.startSync')}
|
||||
{selectedOption && selectedOption !== 'skip' && (
|
||||
<FontAwesomeIcon icon={faCloudDownloadAlt} className="w-4 h-4" />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
40
components/offline/OfflineToggle.tsx
Normal file
40
components/offline/OfflineToggle.tsx
Normal file
@@ -0,0 +1,40 @@
|
||||
'use client';
|
||||
|
||||
import { useContext } from 'react';
|
||||
import OfflineContext from '@/context/OfflineContext';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { faWifi, faCircle } from '@fortawesome/free-solid-svg-icons';
|
||||
|
||||
export default function OfflineToggle() {
|
||||
const { offlineMode, toggleOfflineMode } = useContext(OfflineContext);
|
||||
|
||||
if (!window.electron) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const handleToggle = () => {
|
||||
toggleOfflineMode();
|
||||
};
|
||||
|
||||
return (
|
||||
<button
|
||||
onClick={handleToggle}
|
||||
className={`
|
||||
flex items-center gap-2 px-3 py-1.5 rounded-lg border transition-all
|
||||
${offlineMode.isOffline
|
||||
? 'bg-orange-500/20 border-orange-500/40 hover:bg-orange-500/30'
|
||||
: 'bg-green-500/20 border-green-500/40 hover:bg-green-500/30'
|
||||
}
|
||||
`}
|
||||
title={offlineMode.isOffline ? 'Passer en mode en ligne' : 'Passer en mode hors ligne'}
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
icon={offlineMode.isOffline ? faCircle : faWifi}
|
||||
className={`w-3 h-3 ${offlineMode.isOffline ? 'text-orange-300' : 'text-green-300'}`}
|
||||
/>
|
||||
<span className={`text-xs font-medium ${offlineMode.isOffline ? 'text-orange-200' : 'text-green-200'}`}>
|
||||
{offlineMode.isOffline ? 'Hors ligne' : 'En ligne'}
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user