@osfarm/itineraire-technique 1.2.0 → 1.2.1

package/examples/nextjs-api-route.ts

@@ -1,122 +0,0 @@
-/**
- * Exemple d'API route pour sauvegarder/charger des itinéraires
- * Fichier: app/api/itineraire/route.ts (Next.js App Router)
- * ou pages/api/itineraire.ts (Next.js Pages Router)
- */
-
-import { NextRequest, NextResponse } from 'next/server';
-import { promises as fs } from 'fs';
-import path from 'path';
-
-// Dossier de stockage des itinéraires
-const ITINERAIRES_DIR = path.join(process.cwd(), 'data', 'itineraires');
-
-// Créer le dossier s'il n'existe pas
-async function ensureDir() {
-  try {
-    await fs.access(ITINERAIRES_DIR);
-  } catch {
-    await fs.mkdir(ITINERAIRES_DIR, { recursive: true });
-  }
-}
-
-// GET - Récupérer un itinéraire
-export async function GET(request: NextRequest) {
-  const { searchParams } = new URL(request.url);
-  const id = searchParams.get('id');
-
-  if (!id) {
-    return NextResponse.json({ error: 'ID manquant' }, { status: 400 });
-  }
-
-  try {
-    await ensureDir();
-    const filePath = path.join(ITINERAIRES_DIR, `${id}.json`);
-    const data = await fs.readFile(filePath, 'utf-8');
-    return NextResponse.json(JSON.parse(data));
-  } catch (error) {
-    return NextResponse.json(
-      { error: 'Itinéraire non trouvé' },
-      { status: 404 }
-    );
-  }
-}
-
-// POST - Sauvegarder un itinéraire
-export async function POST(request: NextRequest) {
-  try {
-    const data = await request.json();
-    
-    // Validation basique
-    if (!data.title || !data.options || !data.steps) {
-      return NextResponse.json(
-        { error: 'Données invalides' },
-        { status: 400 }
-      );
-    }
-
-    await ensureDir();
-
-    // Générer un ID si nécessaire
-    const id = data.id || `itk-${Date.now()}`;
-    const filePath = path.join(ITINERAIRES_DIR, `${id}.json`);
-
-    // Sauvegarder
-    await fs.writeFile(filePath, JSON.stringify(data, null, 2), 'utf-8');
-
-    return NextResponse.json({ success: true, id });
-  } catch (error) {
-    console.error('Erreur de sauvegarde:', error);
-    return NextResponse.json(
-      { error: 'Erreur de sauvegarde' },
-      { status: 500 }
-    );
-  }
-}
-
-// DELETE - Supprimer un itinéraire
-export async function DELETE(request: NextRequest) {
-  const { searchParams } = new URL(request.url);
-  const id = searchParams.get('id');
-
-  if (!id) {
-    return NextResponse.json({ error: 'ID manquant' }, { status: 400 });
-  }
-
-  try {
-    const filePath = path.join(ITINERAIRES_DIR, `${id}.json`);
-    await fs.unlink(filePath);
-    return NextResponse.json({ success: true });
-  } catch (error) {
-    return NextResponse.json(
-      { error: 'Erreur de suppression' },
-      { status: 500 }
-    );
-  }
-}
-
-// Liste de tous les itinéraires (pour Pages Router)
-// Fichier: pages/api/itineraires/list.ts
-export async function listItineraires() {
-  await ensureDir();
-  const files = await fs.readdir(ITINERAIRES_DIR);
-  const jsonFiles = files.filter(f => f.endsWith('.json'));
-  
-  const itineraires = await Promise.all(
-    jsonFiles.map(async (file) => {
-      const content = await fs.readFile(
-        path.join(ITINERAIRES_DIR, file),
-        'utf-8'
-      );
-      const data = JSON.parse(content);
-      return {
-        id: file.replace('.json', ''),
-        title: data.title,
-        stepsCount: data.steps?.length || 0,
-        updatedAt: (await fs.stat(path.join(ITINERAIRES_DIR, file))).mtime
-      };
-    })
-  );
-
-  return itineraires;
-}

package/examples/nextjs-app-router-editor.tsx

@@ -1,304 +0,0 @@
-/**
- * Exemple d'utilisation de l'éditeur avec Next.js App Router
- * Fichier: app/editor/page.tsx
- */
-
-'use client';
-
-import { useItineraire, useItineraireDependencies } from '@osfarm/itineraire-technique/react';
-import { TikaRenderer } from '@osfarm/itineraire-technique/react';
-import { useState } from 'react';
-import type { ItineraireData, Step, Intervention } from '@osfarm/itineraire-technique/react';
-
-export default function EditorPage() {
-  const [isSaving, setIsSaving] = useState(false);
-  const [saveMessage, setSaveMessage] = useState<string | null>(null);
-  
-  // Vérifier que les dépendances sont chargées
-  const { loaded: depsLoaded, error: depsError } = useItineraireDependencies();
-
-  // Données initiales
-  const initialData: ItineraireData = {
-    title: "Nouvelle rotation",
-    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: []
-  };
-
-  const {
-    data,
-    loading,
-    error,
-    addStep,
-    updateStep,
-    deleteStep,
-    addIntervention,
-    deleteIntervention,
-    exportToJson,
-    importFromJson
-  } = useItineraire(initialData);
-
-  // Sauvegarder vers une API
-  const handleSave = async () => {
-    if (!data) return;
-
-    setIsSaving(true);
-    setSaveMessage(null);
-
-    try {
-      const response = await fetch('/api/itineraire', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify(data),
-      });
-
-      if (!response.ok) throw new Error('Erreur de sauvegarde');
-
-      setSaveMessage('Sauvegarde réussie !');
-      setTimeout(() => setSaveMessage(null), 3000);
-    } catch (err) {
-      setSaveMessage(`Erreur: ${err instanceof Error ? err.message : 'Erreur inconnue'}`);
-    } finally {
-      setIsSaving(false);
-    }
-  };
-
-  // Exporter en JSON
-  const handleExport = () => {
-    const json = exportToJson();
-    const blob = new Blob([json], { type: 'application/json' });
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement('a');
-    a.href = url;
-    a.download = `itineraire-${Date.now()}.json`;
-    document.body.appendChild(a);
-    a.click();
-    document.body.removeChild(a);
-    URL.revokeObjectURL(url);
-  };
-
-  // Importer depuis JSON
-  const handleImport = () => {
-    const input = document.createElement('input');
-    input.type = 'file';
-    input.accept = 'application/json';
-    input.onchange = (e) => {
-      const file = (e.target as HTMLInputElement).files?.[0];
-      if (file) {
-        const reader = new FileReader();
-        reader.onload = (e) => {
-          const content = e.target?.result as string;
-          try {
-            importFromJson(content);
-            setSaveMessage('Import réussi !');
-            setTimeout(() => setSaveMessage(null), 3000);
-          } catch (err) {
-            setSaveMessage(`Erreur d'import: ${err instanceof Error ? err.message : 'Fichier invalide'}`);
-          }
-        };
-        reader.readAsText(file);
-      }
-    };
-    input.click();
-  };
-
-  // Ajouter une nouvelle étape
-  const handleAddStep = () => {
-    const now = new Date();
-    const endDate = new Date(now);
-    endDate.setMonth(endDate.getMonth() + 3);
-
-    const newStep: Step = {
-      id: crypto.randomUUID(),
-      name: `Nouvelle culture ${data?.steps.length ? data.steps.length + 1 : 1}`,
-      startDate: now.toISOString(),
-      endDate: endDate.toISOString(),
-      color: `#${Math.floor(Math.random()*16777215).toString(16)}`,
-      description: '',
-      interventions: []
-    };
-
-    addStep(newStep);
-  };
-
-  // Ajouter une intervention à une étape
-  const handleAddIntervention = (stepId: string) => {
-    const newIntervention: Intervention = {
-      id: crypto.randomUUID(),
-      day: '0',
-      name: 'Nouvelle intervention',
-      type: 'intervention_top',
-      description: ''
-    };
-
-    addIntervention(stepId, newIntervention);
-  };
-
-  if (!depsLoaded) {
-    return (
-      <div className="container py-5 text-center">
-        <div className="spinner-border" role="status">
-          <span className="visually-hidden">Chargement des dépendances...</span>
-        </div>
-      </div>
-    );
-  }
-
-  if (depsError) {
-    return (
-      <div className="container py-5">
-        <div className="alert alert-danger">
-          Erreur de chargement: {depsError.message}
-          <br />
-          <small>Assurez-vous que les scripts sont bien chargés dans _document.tsx</small>
-        </div>
-      </div>
-    );
-  }
-
-  if (loading) {
-    return (
-      <div className="container py-5 text-center">
-        <div className="spinner-border" role="status">
-          <span className="visually-hidden">Chargement...</span>
-        </div>
-      </div>
-    );
-  }
-
-  if (error) {
-    return (
-      <div className="container py-5">
-        <div className="alert alert-danger">
-          Erreur: {error.message}
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="container-fluid py-4">
-      {/* En-tête avec boutons d'action */}
-      <div className="row mb-4">
-        <div className="col-12">
-          <div className="d-flex justify-content-between align-items-center">
-            <h1>Éditeur d'Itinéraire Technique</h1>
-            
-            <div className="btn-group" role="group">
-              <button 
-                className="btn btn-primary" 
-                onClick={handleSave}
-                disabled={isSaving}
-              >
-                <i className="fa fa-save"></i> 
-                {isSaving ? ' Sauvegarde...' : ' Sauvegarder'}
-              </button>
-              <button 
-                className="btn btn-outline-secondary" 
-                onClick={handleExport}
-              >
-                <i className="fa fa-download"></i> Exporter JSON
-              </button>
-              <button 
-                className="btn btn-outline-secondary" 
-                onClick={handleImport}
-              >
-                <i className="fa fa-upload"></i> Importer JSON
-              </button>
-            </div>
-          </div>
-
-          {saveMessage && (
-            <div className={`alert mt-3 ${saveMessage.includes('Erreur') ? 'alert-danger' : 'alert-success'}`}>
-              {saveMessage}
-            </div>
-          )}
-        </div>
-      </div>
-
-      {/* Zone d'édition */}
-      <div className="row">
-        <div className="col-lg-3">
-          <div className="card">
-            <div className="card-header d-flex justify-content-between align-items-center">
-              <h5 className="mb-0">Étapes</h5>
-              <button 
-                className="btn btn-sm btn-success" 
-                onClick={handleAddStep}
-              >
-                <i className="fa fa-plus"></i>
-              </button>
-            </div>
-            <div className="card-body">
-              {data?.steps.length === 0 ? (
-                <p className="text-muted text-center">Aucune étape</p>
-              ) : (
-                <div className="list-group">
-                  {data?.steps.map((step) => (
-                    <div key={step.id} className="list-group-item">
-                      <div className="d-flex justify-content-between align-items-center mb-2">
-                        <strong>{step.name}</strong>
-                        <div className="btn-group btn-group-sm">
-                          <button
-                            className="btn btn-outline-primary"
-                            onClick={() => handleAddIntervention(step.id)}
-                            title="Ajouter intervention"
-                          >
-                            <i className="fa fa-plus"></i>
-                          </button>
-                          <button
-                            className="btn btn-outline-danger"
-                            onClick={() => deleteStep(step.id)}
-                            title="Supprimer"
-                          >
-                            <i className="fa fa-trash"></i>
-                          </button>
-                        </div>
-                      </div>
-                      <small className="text-muted">
-                        {new Date(step.startDate).toLocaleDateString()} - 
-                        {new Date(step.endDate).toLocaleDateString()}
-                      </small>
-                      {step.interventions && step.interventions.length > 0 && (
-                        <div className="mt-2">
-                          <small>{step.interventions.length} intervention(s)</small>
-                        </div>
-                      )}
-                    </div>
-                  ))}
-                </div>
-              )}
-            </div>
-          </div>
-        </div>
-
-        <div className="col-lg-9">
-          <div className="card">
-            <div className="card-header">
-              <h5 className="mb-0">Aperçu</h5>
-            </div>
-            <div className="card-body">
-              {data && data.steps.length > 0 ? (
-                <TikaRenderer data={data} width="100%" height="auto" />
-              ) : (
-                <div className="text-center text-muted py-5">
-                  <i className="fa fa-info-circle fa-3x mb-3"></i>
-                  <p>Ajoutez des étapes pour voir l'aperçu</p>
-                </div>
-              )}
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}

package/examples/nextjs-app-router-viewer.tsx

@@ -1,90 +0,0 @@
-/**
- * Exemple d'utilisation avec Next.js App Router
- * Fichier: app/itineraire/page.tsx
- */
-
-'use client';
-
-import { TikaRenderer } from '@osfarm/itineraire-technique/react';
-import { useEffect, useState } from 'react';
-import type { ItineraireData } from '@osfarm/itineraire-technique/react';
-
-export default function ItinerairePage() {
-  const [data, setData] = useState<ItineraireData | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-
-  useEffect(() => {
-    // Charger les données depuis votre API ou fichier JSON
-    fetch('/test/test.json')
-      .then(response => {
-        if (!response.ok) throw new Error('Erreur de chargement');
-        return response.json();
-      })
-      .then(data => {
-        setData(data);
-        setLoading(false);
-      })
-      .catch(err => {
-        setError(err.message);
-        setLoading(false);
-      });
-  }, []);
-
-  const handleItemClick = (itemId: string, event: Event) => {
-    console.log('Élément cliqué:', itemId);
-    // Vous pouvez ajouter votre logique ici (modal, navigation, etc.)
-  };
-
-  const handleItemHover = (itemId: string, event: Event) => {
-    console.log('Survol:', itemId);
-  };
-
-  if (loading) {
-    return (
-      <div className="container py-5 text-center">
-        <div className="spinner-border" role="status">
-          <span className="visually-hidden">Chargement...</span>
-        </div>
-      </div>
-    );
-  }
-
-  if (error) {
-    return (
-      <div className="container py-5">
-        <div className="alert alert-danger" role="alert">
-          Erreur: {error}
-        </div>
-      </div>
-    );
-  }
-
-  if (!data) {
-    return (
-      <div className="container py-5">
-        <div className="alert alert-info" role="alert">
-          Aucune donnée à afficher
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="container-fluid py-5">
-      <div className="row">
-        <div className="col-12">
-          <h1 className="mb-4">{data.title}</h1>
-          <TikaRenderer
-            data={data}
-            width="100%"
-            height="auto"
-            onItemClick={handleItemClick}
-            onItemHover={handleItemHover}
-            className="shadow-sm"
-          />
-        </div>
-      </div>
-    </div>
-  );
-}

package/js/editor-attributes.js

@@ -1,99 +0,0 @@
-function addOrUpdateAttributeClickEvent() {
-    let id = getInputValue("attributeId");
-    let key = getInputValue("attributeName");
-    let value = getInputValue("attributeValue");
-
-    if (id != "") {
-        selectedStep.updateAttribute(id, key, value);
-    } else {
-        selectedStep.addAttribute(key, value);
-
-        document.getElementById("newAttributeButton").classList.remove("d-none");
-        getAndCleanElement("newAttributeContainer");
-    }
-
-    refreshAllTables();
-}
-
-function refreshAttributesTable() {
-    let attributesContainer = document.getElementById("attributesContainer");
-    attributesContainer.innerHTML = "";
-
-    if (selectedStep && selectedStep.getStep().attributes) {
-        selectedStep.getStep().attributes.forEach((attribute) => {
-            const rowDiv = createAttributeRow(attribute);
-            attributesContainer.appendChild(rowDiv);
-        });
-    }
-}
-
-function createAttributeRow(attribute) {
-    let rowDiv = document.createElement("div");
-    rowDiv.className = "row mb-2 attribute-row editable-row position-relative";
-
-    let nameValueDiv = createAttributeNameAndValueColumn(attribute);
-    rowDiv.appendChild(nameValueDiv);
-
-    addEditAndRemoveButtons(
-        rowDiv, 
-        attribute.id, 
-        function() {
-            createAttributForm(attribute.id, attribute.name, attribute.value, rowDiv);
-        },
-        function(id) {
-            selectedStep.removeAttribute(id);
-            refreshAllTables();
-        },
-        null,        
-        'btn-group-vertical'
-    );
-
-    return rowDiv;
-}
-
-function createAttributeNameAndValueColumn(attribute) {
-    let nameValueDiv = document.createElement("div");
-    nameValueDiv.className = "col";
-    nameValueDiv.innerHTML = `<strong>${attribute.name}</strong></br> ${attribute.value}`;
-
-    return nameValueDiv;
-}
-
-function createAttributForm(id, name, value, row) {
-    id = id || "";
-    name = name || "";
-    value = value || "";
-
-    const formContainer = document.createElement("div");
-    formContainer.innerHTML = `
-        <form>
-            <div class="row card-white edit-attribute-view mb-2">
-                <input type="hidden" id="attributeId" value="${id}">
-                <div class="col-12 mb-2">
-                    <label for="attributeName" class="form-label">Nom</label>
-                    <input type="text" id="attributeName" class="form-control" placeholder="Nom" value="${name}">
-                </div>
-                <div class="col-12 mb-2">
-                    <input type="text" id="attributeValue" class="form-control" placeholder="Description" value="${value}">
-                </div>
-                <div class="col-12 mb-2">
-                    <button type="button" onclick="addOrUpdateAttributeClickEvent()"
-                        class="w-100 btn btn-outline-primary primary-button">Valider</button>
-                </div>
-            </div>
-        </form>
-    `;
-
-    if (row) { //we are editing an attribute
-        row.replaceWith(formContainer);
-    } else { //we are adding an attribute
-        document.getElementById("newAttributeContainer").appendChild(formContainer);
-        document.getElementById("newAttributeButton").classList.add("d-none");
-    }
-
-    if (name === "") {
-        document.getElementById("attributeName").focus();
-    } else {
-        document.getElementById("attributeValue").focus();
-    }
-}