canvasframework 0.3.6

package/utils/IndexedDBManager.js

@@ -0,0 +1,273 @@
+/**
+ * Gestionnaire IndexedDB pour stockage de grandes quantités de données
+ * @class
+ * @property {string} dbName - Nom de la base
+ * @property {number} version - Version
+ * @property {IDBDatabase} db - Instance DB
+ */
+class IndexedDBManager {
+  /**
+   * Crée une instance de IndexedDBManager
+   * @param {string} dbName - Nom de la base
+   * @param {number} [version=1] - Version
+   */
+  constructor(dbName, version = 1) {
+    this.dbName = dbName;
+    this.version = version;
+    this.db = null;
+    this.stores = new Map();
+  }
+
+  /**
+   * Initialise la base de données
+   * @param {Object} schema - Schéma {storeName: {keyPath, indexes}}
+   * @returns {Promise<IndexedDBManager>} Instance
+   */
+  async init(schema) {
+    return new Promise((resolve, reject) => {
+      const request = indexedDB.open(this.dbName, this.version);
+
+      request.onerror = () => reject(request.error);
+      request.onsuccess = () => {
+        this.db = request.result;
+        resolve(this);
+      };
+
+      request.onupgradeneeded = (event) => {
+        const db = event.target.result;
+
+        for (let storeName in schema) {
+          const config = schema[storeName];
+          
+          // Créer l'object store s'il n'existe pas
+          if (!db.objectStoreNames.contains(storeName)) {
+            const store = db.createObjectStore(storeName, {
+              keyPath: config.keyPath || 'id',
+              autoIncrement: config.autoIncrement || false
+            });
+
+            // Créer les indexes
+            if (config.indexes) {
+              for (let indexName in config.indexes) {
+                const indexConfig = config.indexes[indexName];
+                store.createIndex(
+                  indexName,
+                  indexConfig.keyPath || indexName,
+                  { unique: indexConfig.unique || false }
+                );
+              }
+            }
+          }
+        }
+      };
+    });
+  }
+
+  /**
+   * Ajoute un élément
+   * @param {string} storeName - Nom du store
+   * @param {*} item - Élément à ajouter
+   * @returns {Promise<*>} Clé générée
+   */
+  async add(storeName, item) {
+    return new Promise((resolve, reject) => {
+      const transaction = this.db.transaction([storeName], 'readwrite');
+      const store = transaction.objectStore(storeName);
+      const request = store.add(item);
+
+      request.onsuccess = () => resolve(request.result);
+      request.onerror = () => reject(request.error);
+    });
+  }
+
+  /**
+   * Met à jour un élément
+   * @param {string} storeName - Nom du store
+   * @param {*} item - Élément à mettre à jour
+   * @returns {Promise<*>} Clé
+   */
+  async put(storeName, item) {
+    return new Promise((resolve, reject) => {
+      const transaction = this.db.transaction([storeName], 'readwrite');
+      const store = transaction.objectStore(storeName);
+      const request = store.put(item);
+
+      request.onsuccess = () => resolve(request.result);
+      request.onerror = () => reject(request.error);
+    });
+  }
+
+  /**
+   * Récupère un élément par sa clé
+   * @param {string} storeName - Nom du store
+   * @param {*} key - Clé
+   * @returns {Promise<*>} Élément
+   */
+  async get(storeName, key) {
+    return new Promise((resolve, reject) => {
+      const transaction = this.db.transaction([storeName], 'readonly');
+      const store = transaction.objectStore(storeName);
+      const request = store.get(key);
+
+      request.onsuccess = () => resolve(request.result);
+      request.onerror = () => reject(request.error);
+    });
+  }
+
+  /**
+   * Récupère tous les éléments
+   * @param {string} storeName - Nom du store
+   * @returns {Promise<Array>} Liste des éléments
+   */
+  async getAll(storeName) {
+    return new Promise((resolve, reject) => {
+      const transaction = this.db.transaction([storeName], 'readonly');
+      const store = transaction.objectStore(storeName);
+      const request = store.getAll();
+
+      request.onsuccess = () => resolve(request.result);
+      request.onerror = () => reject(request.error);
+    });
+  }
+
+  /**
+   * Cherche par index
+   * @param {string} storeName - Nom du store
+   * @param {string} indexName - Nom de l'index
+   * @param {*} value - Valeur à chercher
+   * @returns {Promise<Array>} Résultats
+   */
+  async getByIndex(storeName, indexName, value) {
+    return new Promise((resolve, reject) => {
+      const transaction = this.db.transaction([storeName], 'readonly');
+      const store = transaction.objectStore(storeName);
+      const index = store.index(indexName);
+      const request = index.getAll(value);
+
+      request.onsuccess = () => resolve(request.result);
+      request.onerror = () => reject(request.error);
+    });
+  }
+
+  /**
+   * Query avec filtre
+   * @param {string} storeName - Nom du store
+   * @param {Function} predicate - Fonction de filtre
+   * @returns {Promise<Array>} Résultats
+   */
+  async query(storeName, predicate) {
+    const all = await this.getAll(storeName);
+    return all.filter(predicate);
+  }
+
+  /**
+   * Supprime un élément
+   * @param {string} storeName - Nom du store
+   * @param {*} key - Clé
+   * @returns {Promise<void>}
+   */
+  async delete(storeName, key) {
+    return new Promise((resolve, reject) => {
+      const transaction = this.db.transaction([storeName], 'readwrite');
+      const store = transaction.objectStore(storeName);
+      const request = store.delete(key);
+
+      request.onsuccess = () => resolve();
+      request.onerror = () => reject(request.error);
+    });
+  }
+
+  /**
+   * Vide un store
+   * @param {string} storeName - Nom du store
+   * @returns {Promise<void>}
+   */
+  async clear(storeName) {
+    return new Promise((resolve, reject) => {
+      const transaction = this.db.transaction([storeName], 'readwrite');
+      const store = transaction.objectStore(storeName);
+      const request = store.clear();
+
+      request.onsuccess = () => resolve();
+      request.onerror = () => reject(request.error);
+    });
+  }
+
+  /**
+   * Compte les éléments
+   * @param {string} storeName - Nom du store
+   * @returns {Promise<number>} Nombre d'éléments
+   */
+  async count(storeName) {
+    return new Promise((resolve, reject) => {
+      const transaction = this.db.transaction([storeName], 'readonly');
+      const store = transaction.objectStore(storeName);
+      const request = store.count();
+
+      request.onsuccess = () => resolve(request.result);
+      request.onerror = () => reject(request.error);
+    });
+  }
+
+  /**
+   * Ajoute plusieurs éléments (batch)
+   * @param {string} storeName - Nom du store
+   * @param {Array} items - Éléments
+   * @returns {Promise<void>}
+   */
+  async bulkAdd(storeName, items) {
+    return new Promise((resolve, reject) => {
+      const transaction = this.db.transaction([storeName], 'readwrite');
+      const store = transaction.objectStore(storeName);
+
+      items.forEach(item => store.add(item));
+
+      transaction.oncomplete = () => resolve();
+      transaction.onerror = () => reject(transaction.error);
+    });
+  }
+
+  /**
+   * Supprime plusieurs éléments
+   * @param {string} storeName - Nom du store
+   * @param {Array} keys - Clés
+   * @returns {Promise<void>}
+   */
+  async bulkDelete(storeName, keys) {
+    return new Promise((resolve, reject) => {
+      const transaction = this.db.transaction([storeName], 'readwrite');
+      const store = transaction.objectStore(storeName);
+
+      keys.forEach(key => store.delete(key));
+
+      transaction.oncomplete = () => resolve();
+      transaction.onerror = () => reject(transaction.error);
+    });
+  }
+
+  /**
+   * Ferme la connexion
+   */
+  close() {
+    if (this.db) {
+      this.db.close();
+      this.db = null;
+    }
+  }
+
+  /**
+   * Supprime la base de données
+   * @returns {Promise<void>}
+   */
+  async destroy() {
+    this.close();
+    
+    return new Promise((resolve, reject) => {
+      const request = indexedDB.deleteDatabase(this.dbName);
+      request.onsuccess = () => resolve();
+      request.onerror = () => reject(request.error);
+    });
+  }
+}
+
+export default IndexedDBManager;

package/utils/OfflineSyncManager.js

@@ -0,0 +1,342 @@
+/**
+ * Gestionnaire de synchronisation hors ligne
+ * Queue les opérations offline et les sync quand online
+ * @class
+ * @property {Array} queue - File d'attente des opérations
+ * @property {boolean} isOnline - État de connexion
+ * @property {Map} syncHandlers - Handlers de sync par type
+ */
+class OfflineSyncManager {
+  /**
+   * Crée une instance de OfflineSyncManager
+   * @param {Object} [options={}] - Options
+   * @param {string} [options.storageKey='offline_queue'] - Clé de stockage
+   * @param {number} [options.retryDelay=5000] - Délai entre tentatives (ms)
+   * @param {number} [options.maxRetries=3] - Tentatives max
+   */
+  constructor(options = {}) {
+    this.storageKey = options.storageKey || 'offline_queue';
+    this.retryDelay = options.retryDelay || 5000;
+    this.maxRetries = options.maxRetries || 3;
+    
+    this.queue = [];
+    this.isOnline = navigator.onLine;
+    this.syncHandlers = new Map();
+    this.isSyncing = false;
+    
+    // Charger la queue sauvegardée
+    this.loadQueue();
+    
+    // Écouter les changements de connexion
+    this.setupConnectionListeners();
+  }
+
+  /**
+   * Configure les listeners de connexion
+   * @private
+   */
+  setupConnectionListeners() {
+    window.addEventListener('online', () => {
+      console.log('🟢 Connection restored');
+      this.isOnline = true;
+      this.syncAll();
+    });
+
+    window.addEventListener('offline', () => {
+      console.log('🔴 Connection lost');
+      this.isOnline = false;
+    });
+  }
+
+  /**
+   * Enregistre un handler de sync
+   * @param {string} type - Type d'opération
+   * @param {Function} handler - Handler async (operation) => Promise
+   */
+  registerSyncHandler(type, handler) {
+    this.syncHandlers.set(type, handler);
+  }
+
+  /**
+   * Ajoute une opération à la queue
+   * @param {string} type - Type d'opération
+   * @param {Object} data - Données
+   * @param {Object} [options={}] - Options
+   * @returns {Promise<*>} Résultat
+   */
+  async queue(type, data, options = {}) {
+    const operation = {
+      id: this.generateId(),
+      type,
+      data,
+      timestamp: Date.now(),
+      retries: 0,
+      status: 'pending',
+      ...options
+    };
+
+    // Si online, essayer d'exécuter directement
+    if (this.isOnline && !options.forceQueue) {
+      try {
+        const result = await this.executeOperation(operation);
+        return result;
+      } catch (error) {
+        console.warn('Failed to execute immediately, queuing...', error);
+        // Continuer pour ajouter à la queue
+      }
+    }
+
+    // Ajouter à la queue
+    this.queue.push(operation);
+    this.saveQueue();
+
+    console.log(`📋 Operation queued: ${type}`, operation.id);
+
+    // Essayer de sync immédiatement si online
+    if (this.isOnline) {
+      this.syncAll();
+    }
+
+    return operation;
+  }
+
+  /**
+   * Exécute une opération
+   * @param {Object} operation - Opération
+   * @returns {Promise<*>} Résultat
+   * @private
+   */
+  async executeOperation(operation) {
+    const handler = this.syncHandlers.get(operation.type);
+
+    if (!handler) {
+      throw new Error(`No sync handler for type: ${operation.type}`);
+    }
+
+    return await handler(operation.data);
+  }
+
+  /**
+   * Synchronise toutes les opérations en attente
+   * @returns {Promise<Object>} Résultats
+   */
+  async syncAll() {
+    if (this.isSyncing || !this.isOnline) return;
+
+    this.isSyncing = true;
+    console.log('🔄 Starting sync...', this.queue.length, 'operations');
+
+    const results = {
+      success: [],
+      failed: [],
+      skipped: []
+    };
+
+    // Trier par timestamp (FIFO)
+    this.queue.sort((a, b) => a.timestamp - b.timestamp);
+
+    for (let i = 0; i < this.queue.length; i++) {
+      const operation = this.queue[i];
+
+      if (operation.status === 'success') {
+        results.skipped.push(operation);
+        continue;
+      }
+
+      try {
+        console.log(`⏳ Syncing: ${operation.type}`, operation.id);
+        
+        const result = await this.executeOperation(operation);
+        
+        operation.status = 'success';
+        operation.result = result;
+        operation.syncedAt = Date.now();
+        
+        results.success.push(operation);
+        console.log(`✅ Synced: ${operation.type}`, operation.id);
+
+      } catch (error) {
+        operation.retries++;
+        operation.lastError = error.message;
+
+        if (operation.retries >= this.maxRetries) {
+          operation.status = 'failed';
+          results.failed.push(operation);
+          console.error(`❌ Failed permanently: ${operation.type}`, operation.id);
+        } else {
+          operation.status = 'pending';
+          console.warn(`⚠️ Retry ${operation.retries}/${this.maxRetries}:`, operation.type);
+        }
+      }
+    }
+
+    // Supprimer les opérations réussies de la queue
+    this.queue = this.queue.filter(op => op.status !== 'success');
+    this.saveQueue();
+
+    this.isSyncing = false;
+    
+    console.log('✅ Sync complete:', results);
+    
+    // Réessayer les échecs après un délai
+    if (results.failed.length > 0 || this.queue.length > 0) {
+      setTimeout(() => this.syncAll(), this.retryDelay);
+    }
+
+    return results;
+  }
+
+  /**
+   * Synchronise un type spécifique
+   * @param {string} type - Type d'opération
+   * @returns {Promise<Object>} Résultats
+   */
+  async syncType(type) {
+    const operations = this.queue.filter(op => op.type === type && op.status !== 'success');
+    
+    const results = {
+      success: [],
+      failed: []
+    };
+
+    for (let operation of operations) {
+      try {
+        const result = await this.executeOperation(operation);
+        operation.status = 'success';
+        operation.result = result;
+        results.success.push(operation);
+      } catch (error) {
+        operation.retries++;
+        operation.lastError = error.message;
+        
+        if (operation.retries >= this.maxRetries) {
+          operation.status = 'failed';
+          results.failed.push(operation);
+        }
+      }
+    }
+
+    this.queue = this.queue.filter(op => op.status !== 'success');
+    this.saveQueue();
+
+    return results;
+  }
+
+  /**
+   * Obtient les opérations en attente
+   * @param {string} [type] - Filtrer par type
+   * @returns {Array} Opérations
+   */
+  getPending(type) {
+    if (type) {
+      return this.queue.filter(op => op.type === type && op.status === 'pending');
+    }
+    return this.queue.filter(op => op.status === 'pending');
+  }
+
+  /**
+   * Obtient les opérations échouées
+   * @returns {Array} Opérations
+   */
+  getFailed() {
+    return this.queue.filter(op => op.status === 'failed');
+  }
+
+  /**
+   * Supprime une opération
+   * @param {string} id - ID de l'opération
+   * @returns {boolean} True si supprimé
+   */
+  remove(id) {
+    const index = this.queue.findIndex(op => op.id === id);
+    
+    if (index > -1) {
+      this.queue.splice(index, 1);
+      this.saveQueue();
+      return true;
+    }
+    
+    return false;
+  }
+
+  /**
+   * Réinitialise une opération échouée
+   * @param {string} id - ID de l'opération
+   */
+  retry(id) {
+    const operation = this.queue.find(op => op.id === id);
+    
+    if (operation) {
+      operation.status = 'pending';
+      operation.retries = 0;
+      operation.lastError = null;
+      this.saveQueue();
+      
+      if (this.isOnline) {
+        this.syncAll();
+      }
+    }
+  }
+
+  /**
+   * Vide la queue
+   */
+  clear() {
+    this.queue = [];
+    this.saveQueue();
+  }
+
+  /**
+   * Sauvegarde la queue
+   * @private
+   */
+  saveQueue() {
+    try {
+      localStorage.setItem(this.storageKey, JSON.stringify(this.queue));
+    } catch (error) {
+      console.error('Failed to save queue:', error);
+    }
+  }
+
+  /**
+   * Charge la queue
+   * @private
+   */
+  loadQueue() {
+    try {
+      const saved = localStorage.getItem(this.storageKey);
+      if (saved) {
+        this.queue = JSON.parse(saved);
+        console.log('📋 Loaded queue:', this.queue.length, 'operations');
+      }
+    } catch (error) {
+      console.error('Failed to load queue:', error);
+      this.queue = [];
+    }
+  }
+
+  /**
+   * Génère un ID unique
+   * @returns {string} ID
+   * @private
+   */
+  generateId() {
+    return `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+  }
+
+  /**
+   * Obtient les statistiques
+   * @returns {Object} Stats
+   */
+  getStats() {
+    return {
+      total: this.queue.length,
+      pending: this.queue.filter(op => op.status === 'pending').length,
+      failed: this.queue.filter(op => op.status === 'failed').length,
+      isOnline: this.isOnline,
+      isSyncing: this.isSyncing
+    };
+  }
+}
+
+export default OfflineSyncManager;