@osfarm/itineraire-technique 1.1.20 → 1.2.0

package/react/TikaEditor.jsx

@@ -0,0 +1,212 @@
+/**
+ * TikaEditor - Composant React pour éditer un itinéraire technique
+ * 
+ * @example
+ * import TikaEditor from '@osfarm/itineraire-technique/react/TikaEditor';
+ * 
+ * function MyComponent() {
+ *   const [data, setData] = useState(initialData);
+ *   
+ *   const handleSave = (newData) => {
+ *     console.log('Data saved:', newData);
+ *     setData(newData);
+ *   };
+ *   
+ *   return <TikaEditor initialData={data} onSave={handleSave} />;
+ * }
+ */
+
+import React, { useEffect, useRef, useState } from 'react';
+
+const TikaEditor = ({ 
+  initialData = null,
+  onSave = null,
+  onExport = null,
+  className = '',
+  showWikiButtons = false,
+  enableAutoSave = false,
+  autoSaveInterval = 5000
+}) => {
+  const containerRef = useRef(null);
+  const editorInitialized = useRef(false);
+  const autoSaveTimer = useRef(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [currentData, setCurrentData] = useState(initialData);
+
+  // Fonction pour récupérer les données actuelles de l'éditeur
+  const getCurrentData = () => {
+    if (typeof window === 'undefined' || !window.rotation_data) return null;
+    return JSON.parse(JSON.stringify(window.rotation_data));
+  };
+
+  // Fonction pour sauvegarder
+  const handleSave = () => {
+    const data = getCurrentData();
+    if (data && onSave) {
+      onSave(data);
+      setCurrentData(data);
+    }
+  };
+
+  // Fonction pour exporter
+  const handleExport = () => {
+    const data = getCurrentData();
+    if (data && onExport) {
+      onExport(data);
+    } else if (data && window.exportToJsonFile) {
+      // Utiliser la fonction d'export native si pas de callback personnalisé
+      window.exportToJsonFile(data);
+    }
+  };
+
+  // Auto-save
+  useEffect(() => {
+    if (enableAutoSave && onSave) {
+      autoSaveTimer.current = setInterval(() => {
+        handleSave();
+      }, autoSaveInterval);
+
+      return () => {
+        if (autoSaveTimer.current) {
+          clearInterval(autoSaveTimer.current);
+        }
+      };
+    }
+  }, [enableAutoSave, autoSaveInterval, onSave]);
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+
+    // Vérifier les dépendances
+    const checkDependencies = () => {
+      const missing = [];
+      if (!window.$) missing.push('jQuery');
+      if (!window.echarts) missing.push('ECharts');
+      if (!window._) missing.push('Underscore');
+      if (!window.RotationRenderer) missing.push('chart-render.js');
+      
+      // Vérifier les fonctions de l'éditeur
+      if (!window.refreshAttributesTable) missing.push('editor-attributes.js');
+      if (!window.refreshStepsButtonList) missing.push('editor-crops.js');
+      if (!window.exportToJsonFile) missing.push('editor-export.js');
+      if (!window.refreshInterventionsList) missing.push('editor-interventions.js');
+      
+      return missing;
+    };
+
+    const missingDeps = checkDependencies();
+    if (missingDeps.length > 0) {
+      console.error('Missing dependencies for TikaEditor:', missingDeps.join(', '));
+      setIsLoading(false);
+      return;
+    }
+
+    // Initialiser l'éditeur seulement une fois
+    if (!editorInitialized.current && containerRef.current) {
+      editorInitialized.current = true;
+
+      // Initialiser la structure globale de données si nécessaire
+      if (!window.rotation_data) {
+        window.rotation_data = initialData || {
+          title: "Nouvel itinéraire",
+          options: {
+            view: "horizontal",
+            show_transcript: true,
+            title_top_interventions: "Cultures principales",
+            title_bottom_interventions: "Couverts et CIVE",
+            title_steps: "Rotation",
+            region: "France",
+            show_climate_diagram: false
+          },
+          steps: []
+        };
+      } else if (initialData) {
+        window.rotation_data = initialData;
+      }
+
+      // Appeler les fonctions d'initialisation de l'éditeur
+      try {
+        if (window.refreshAttributesTable) window.refreshAttributesTable();
+        if (window.refreshStepsButtonList) window.refreshStepsButtonList();
+        if (window.refreshInterventionsList) window.refreshInterventionsList();
+        
+        // Rendre le graphique initial
+        if (window.renderChart) {
+          window.renderChart();
+        }
+
+        setIsLoading(false);
+      } catch (error) {
+        console.error('Error initializing editor:', error);
+        setIsLoading(false);
+      }
+    }
+
+    // Exposer les fonctions de save/export via window pour que le HTML interne puisse les appeler
+    window.reactEditorSave = handleSave;
+    window.reactEditorExport = handleExport;
+
+  }, [initialData]);
+
+  // Mettre à jour les données si initialData change
+  useEffect(() => {
+    if (initialData && window.rotation_data) {
+      window.rotation_data = initialData;
+      if (window.refreshAttributesTable) window.refreshAttributesTable();
+      if (window.refreshStepsButtonList) window.refreshStepsButtonList();
+      if (window.refreshInterventionsList) window.refreshInterventionsList();
+      if (window.renderChart) window.renderChart();
+    }
+  }, [initialData]);
+
+  if (isLoading) {
+    return (
+      <div className={`itineraire-editor-loading ${className}`}>
+        <div className="spinner-border" role="status">
+          <span className="visually-hidden">Chargement...</span>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div ref={containerRef} className={`itineraire-editor ${className}`}>
+      {/* Boutons de contrôle React */}
+      <div className="react-editor-controls mb-3">
+        <div className="btn-group" role="group">
+          {onSave && (
+            <button 
+              type="button" 
+              className="btn btn-primary"
+              onClick={handleSave}
+            >
+              <i className="fa fa-save"></i> Enregistrer
+            </button>
+          )}
+          {onExport && (
+            <button 
+              type="button" 
+              className="btn btn-outline-primary"
+              onClick={handleExport}
+            >
+              <i className="fa fa-download"></i> Exporter JSON
+            </button>
+          )}
+        </div>
+      </div>
+
+      {/* Le contenu HTML de l'éditeur sera injecté ici via un portail ou iframe */}
+      {/* Pour l'instant, on délègue au HTML existant */}
+      <div id="editor-content-container">
+        {/* L'éditeur HTML existant sera chargé ici */}
+        <iframe
+          src="/editor.html"
+          style={{ width: '100%', height: '800px', border: 'none' }}
+          title="Éditeur d'itinéraire technique"
+        />
+      </div>
+    </div>
+  );
+};
+
+export default TikaEditor;

package/react/TikaRenderer.jsx

@@ -0,0 +1,116 @@
+/**
+ * TikaRenderer - Composant React pour visualiser un itinéraire technique
+ * 
+ * @example
+ * import TikaRenderer from '@osfarm/itineraire-technique/react/TikaRenderer';
+ * 
+ * function MyComponent() {
+ *   const data = { ... }; // Données JSON de l'itinéraire
+ *   return <TikaRenderer data={data} />;
+ * }
+ */
+
+import React, { useEffect, useRef } from 'react';
+
+const TikaRenderer = ({ 
+  data, 
+  width = '100%', 
+  height = 'auto',
+  className = '',
+  onItemClick = null,
+  onItemHover = null 
+}) => {
+  const containerRef = useRef(null);
+  const rendererRef = useRef(null);
+  const divId = useRef(`itk-${Math.random().toString(36).substr(2, 9)}`);
+
+  useEffect(() => {
+    // Vérifier que les dépendances sont chargées
+    if (typeof window === 'undefined') return;
+    
+    if (!window.RotationRenderer) {
+      console.error('RotationRenderer not loaded. Make sure chart-render.js is included.');
+      return;
+    }
+
+    if (!window.echarts) {
+      console.error('ECharts not loaded. Make sure ECharts is included.');
+      return;
+    }
+
+    if (!window.$) {
+      console.error('jQuery not loaded. Make sure jQuery is included.');
+      return;
+    }
+
+    // Créer le conteneur si nécessaire
+    if (containerRef.current && !containerRef.current.querySelector('.mainITKContainer')) {
+      // Initialiser le renderer
+      try {
+        rendererRef.current = new window.RotationRenderer(divId.current, data);
+        rendererRef.current.render();
+
+        // Attacher les événements personnalisés si fournis
+        if (onItemClick) {
+          containerRef.current.addEventListener('click', (e) => {
+            const item = e.target.closest('.rotation_item');
+            if (item) {
+              const itemId = item.dataset.id || item.id;
+              onItemClick(itemId, e);
+            }
+          });
+        }
+
+        if (onItemHover) {
+          containerRef.current.addEventListener('mouseover', (e) => {
+            const item = e.target.closest('.rotation_item');
+            if (item) {
+              const itemId = item.dataset.id || item.id;
+              onItemHover(itemId, e);
+            }
+          });
+        }
+      } catch (error) {
+        console.error('Error initializing RotationRenderer:', error);
+      }
+    }
+
+    // Cleanup
+    return () => {
+      if (rendererRef.current && rendererRef.current.chart) {
+        try {
+          rendererRef.current.chart.dispose();
+        } catch (error) {
+          console.error('Error disposing chart:', error);
+        }
+      }
+    };
+  }, [data, onItemClick, onItemHover]);
+
+  // Réagir aux changements de données
+  useEffect(() => {
+    if (rendererRef.current && data) {
+      try {
+        // Recréer le renderer avec les nouvelles données
+        if (rendererRef.current.chart) {
+          rendererRef.current.chart.dispose();
+        }
+        rendererRef.current = new window.RotationRenderer(divId.current, data);
+        rendererRef.current.render();
+      } catch (error) {
+        console.error('Error updating chart data:', error);
+      }
+    }
+  }, [data]);
+
+  return (
+    <div 
+      ref={containerRef}
+      id={divId.current}
+      className={`itineraire-renderer ${className}`}
+      style={{ width, height }}
+    />
+  );
+};
+
+export default TikaRenderer;

package/react/hooks.ts

@@ -0,0 +1,217 @@
+/**
+ * Hook React personnalisé pour gérer les données d'itinéraire technique
+ */
+
+import { useState, useCallback, useEffect } from 'react';
+import type { ItineraireData, Step, Intervention } from './types';
+
+export interface UseItineraireResult {
+  data: ItineraireData | null;
+  loading: boolean;
+  error: Error | null;
+  updateData: (newData: ItineraireData) => void;
+  addStep: (step: Step) => void;
+  updateStep: (stepId: string, updates: Partial<Step>) => void;
+  deleteStep: (stepId: string) => void;
+  addIntervention: (stepId: string, intervention: Intervention) => void;
+  updateIntervention: (stepId: string, interventionId: string, updates: Partial<Intervention>) => void;
+  deleteIntervention: (stepId: string, interventionId: string) => void;
+  exportToJson: () => string;
+  importFromJson: (jsonString: string) => void;
+  reset: () => void;
+}
+
+/**
+ * Hook pour gérer les données d'itinéraire technique
+ * @param initialData Données initiales
+ * @param onUpdate Callback appelé à chaque modification
+ */
+export const useItineraire = (
+  initialData: ItineraireData | null = null,
+  onUpdate?: (data: ItineraireData) => void
+): UseItineraireResult => {
+  const [data, setData] = useState<ItineraireData | null>(initialData);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+
+  // Appeler onUpdate quand les données changent
+  useEffect(() => {
+    if (data && onUpdate) {
+      onUpdate(data);
+    }
+  }, [data, onUpdate]);
+
+  const updateData = useCallback((newData: ItineraireData) => {
+    setData(newData);
+    setError(null);
+  }, []);
+
+  const addStep = useCallback((step: Step) => {
+    setData((prevData) => {
+      if (!prevData) return prevData;
+      return {
+        ...prevData,
+        steps: [...prevData.steps, step]
+      };
+    });
+  }, []);
+
+  const updateStep = useCallback((stepId: string, updates: Partial<Step>) => {
+    setData((prevData) => {
+      if (!prevData) return prevData;
+      return {
+        ...prevData,
+        steps: prevData.steps.map((step) =>
+          step.id === stepId ? { ...step, ...updates } : step
+        )
+      };
+    });
+  }, []);
+
+  const deleteStep = useCallback((stepId: string) => {
+    setData((prevData) => {
+      if (!prevData) return prevData;
+      return {
+        ...prevData,
+        steps: prevData.steps.filter((step) => step.id !== stepId)
+      };
+    });
+  }, []);
+
+  const addIntervention = useCallback((stepId: string, intervention: Intervention) => {
+    setData((prevData) => {
+      if (!prevData) return prevData;
+      return {
+        ...prevData,
+        steps: prevData.steps.map((step) =>
+          step.id === stepId
+            ? {
+                ...step,
+                interventions: [...(step.interventions || []), intervention]
+              }
+            : step
+        )
+      };
+    });
+  }, []);
+
+  const updateIntervention = useCallback(
+    (stepId: string, interventionId: string, updates: Partial<Intervention>) => {
+      setData((prevData) => {
+        if (!prevData) return prevData;
+        return {
+          ...prevData,
+          steps: prevData.steps.map((step) =>
+            step.id === stepId
+              ? {
+                  ...step,
+                  interventions: (step.interventions || []).map((intervention) =>
+                    intervention.id === interventionId
+                      ? { ...intervention, ...updates }
+                      : intervention
+                  )
+                }
+              : step
+          )
+        };
+      });
+    },
+    []
+  );
+
+  const deleteIntervention = useCallback((stepId: string, interventionId: string) => {
+    setData((prevData) => {
+      if (!prevData) return prevData;
+      return {
+        ...prevData,
+        steps: prevData.steps.map((step) =>
+          step.id === stepId
+            ? {
+                ...step,
+                interventions: (step.interventions || []).filter(
+                  (intervention) => intervention.id !== interventionId
+                )
+              }
+            : step
+        )
+      };
+    });
+  }, []);
+
+  const exportToJson = useCallback(() => {
+    if (!data) return '{}';
+    return JSON.stringify(data, null, 2);
+  }, [data]);
+
+  const importFromJson = useCallback((jsonString: string) => {
+    try {
+      setLoading(true);
+      const parsed = JSON.parse(jsonString);
+      setData(parsed);
+      setError(null);
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error('Invalid JSON'));
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  const reset = useCallback(() => {
+    setData(initialData);
+    setError(null);
+  }, [initialData]);
+
+  return {
+    data,
+    loading,
+    error,
+    updateData,
+    addStep,
+    updateStep,
+    deleteStep,
+    addIntervention,
+    updateIntervention,
+    deleteIntervention,
+    exportToJson,
+    importFromJson,
+    reset
+  };
+};
+
+/**
+ * Hook pour charger les dépendances nécessaires (ECharts, jQuery, etc.)
+ */
+export const useItineraireDependencies = () => {
+  const [loaded, setLoaded] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+
+    const checkDependencies = () => {
+      const hasEcharts = !!window.echarts;
+      const hasJQuery = !!window.$;
+      const hasUnderscore = !!window._;
+      const hasRotationRenderer = !!window.RotationRenderer;
+
+      return hasEcharts && hasJQuery && hasUnderscore && hasRotationRenderer;
+    };
+
+    if (checkDependencies()) {
+      setLoaded(true);
+    } else {
+      // Attendre un peu que les scripts se chargent
+      const timeout = setTimeout(() => {
+        if (checkDependencies()) {
+          setLoaded(true);
+        } else {
+          setError(new Error('Required dependencies not loaded'));
+        }
+      }, 1000);
+
+      return () => clearTimeout(timeout);
+    }
+  }, []);
+
+  return { loaded, error };
+};

package/react/index.ts

@@ -0,0 +1,19 @@
+/**
+ * Point d'entrée principal pour les composants React
+ */
+
+export { default as TikaRenderer } from './TikaRenderer';
+export { default as TikaEditor } from './TikaEditor';
+export { useItineraire, useItineraireDependencies } from './hooks';
+export type {
+  ItineraireData,
+  ItineraireOptions,
+  Step,
+  Intervention,
+  ClimateData,
+  RotationData,
+  TimelineData,
+  TikaRendererProps,
+  TikaEditorProps,
+  IRotationRenderer
+} from './types';