@osfarm/itineraire-technique 1.2.0 → 1.2.1

package/js/intervention.js

@@ -0,0 +1,12 @@
+/**
+ * Intervention class - Represents an intervention on a crop
+ */
+class Intervention {
+    constructor(day, name, type, description) {
+        this.id = crypto.randomUUID();
+        this.day = day;
+        this.name = name || "";
+        this.type = type;
+        this.description = description || "";
+    }
+}

package/js/step-model.js

@@ -0,0 +1,69 @@
+/**
+ * StepModel class - Represents a step/crop in the technical itinerary
+ * Manages step data, interventions, and form interactions
+ */
+class StepModel {
+    constructor(step) {
+        this.step = step;
+
+        this.step.id = step.id ?? crypto.randomUUID();
+        this.step.name = step.name ?? "";
+        this.step.color = step.color ?? "#0db3bf";
+        this.step.startDate = step.startDate ? new Date(step.startDate) : new Date();
+        this.step.endDate = step.endDate ? new Date(step.endDate) : new Date();
+        this.step.description = step.description ?? "";
+        this.step.interventions = step.interventions || [];
+        this.step.secondary_crop = step.secondary_crop ?? false;
+
+        this.step.useDefaultColor = step.useDefaultColor ?? true;
+        this.step.useDefaultStartDate = step.useDefaultStartDate ?? true;
+        this.step.useDefaultEndDate = step.useDefaultEndDate ?? true;
+    }
+
+    setAsEdited() {
+        this.step.useDefaultColor = false;
+        this.step.useDefaultStartDate = false;
+        this.step.useDefaultEndDate = false;
+    }
+
+    getStep() {
+        return this.step;
+    }
+
+    setStartDate(date) {
+        this.step.startDate = new Date(date);
+    }
+
+    setDurationInMonths(durationInMonths) {
+        this.step.endDate = new Date(this.step.startDate);
+        this.step.endDate.setMonth(this.step.startDate.getMonth() + durationInMonths);
+    }
+
+    setDurationInDays(durationInDays) {
+        this.step.endDate = new Date(this.step.startDate);
+        this.step.endDate.setDate(this.step.startDate.getDate() + durationInDays);
+    }
+
+    getDurationInDays() {
+        const diffTime = Math.abs(this.step.endDate - this.step.startDate);
+        return Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+    }
+
+    addIntervention(day, name, type, description) {
+        let intervention = { "id": crypto.randomUUID(), "day": day, "name": name, "type": type, "description": description };
+        this.step.interventions.push(intervention);
+    }
+
+    removeIntervention(interventionId) {
+        this.step.interventions = this.step.interventions.filter(function (intervention) { return intervention.id != interventionId });
+    }
+
+    updateFromForm() {
+        this.step.name = $("#cropName").val();
+        this.step.description = $("#cropDescription").val();
+        this.step.startDate = new Date($("#cropStartDate").val());
+        this.step.endDate = new Date($("#cropEndDate").val());
+        this.step.color = $("#cropColor").val();
+        this.step.secondary_crop = $("#cropSecondary").prop("checked")  || false;
+    }
+}

package/package.json

@@ -1,66 +1,17 @@
 {
   "name": "@osfarm/itineraire-technique",
-  "version": "1.2.0",
-  "description": "A visualisation tool to show agricultural technical itineraries based on Echarts - with React/Next.js components",
-  "main": "js/chart-render.js",
-  "types": "react/types.ts",
-  "exports": {
-    ".": {
-      "import": "./js/chart-render.js",
-      "require": "./js/chart-render.js"
-    },
-    "./react": {
-      "import": "./react/index.ts",
-      "require": "./react/index.ts",
-      "types": "./react/types.ts"
-    },
-    "./react/TikaRenderer": {
-      "import": "./react/TikaRenderer.jsx",
-      "require": "./react/TikaRenderer.jsx"
-    },
-    "./react/TikaEditor": {
-      "import": "./react/TikaEditor.jsx",
-      "require": "./react/TikaEditor.jsx"
-    },
-    "./css/*": "./css/*",
-    "./js/*": "./js/*"
-  },
-  "files": [
-    "js",
-    "css",
-    "react",
-    "examples",
-    "test",
-    "images",
-    "*.html",
-    "LICENSE",
-    "README.md"
-  ],
+  "version": "1.2.1",
+  "description": "A visualisation tool to show agricultural technical itineraries based on Echarts",
+  "main": "editor.html",
   "scripts": {
     "build:scss": "sass --style=compressed scss/styles-editor.scss css/styles-editor.css && sass --style=compressed scss/styles-rendering.scss css/styles-rendering.css",
     "dev:scss": "sass scss/styles-editor.scss css/styles-editor.css && sass scss/styles-rendering.scss css/styles-rendering.css",
     "watch:scss": "sass --watch scss/styles-editor.scss:css/styles-editor.css scss/styles-rendering.scss:css/styles-rendering.css",
     "build": "npm run build:scss",
-    "start": "npm run watch:scss",
-    "setup:react": "bash scripts/setup-react.sh || powershell -ExecutionPolicy Bypass -File scripts/setup-react.ps1",
-    "postinstall": "echo '\n✨ Pour utiliser avec React/Next.js, exécutez: npm run setup:react\n'"
-  },
-  "peerDependencies": {
-    "react": ">=16.8.0",
-    "react-dom": ">=16.8.0"
-  },
-  "peerDependenciesMeta": {
-    "react": {
-      "optional": true
-    },
-    "react-dom": {
-      "optional": true
-    }
+    "start": "npm run watch:scss"
   },
   "devDependencies": {
-    "sass": "^1.85.1",
-    "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.0.0"
+    "sass": "^1.85.1"
   },
   "publishConfig": {
     "access": "public"
@@ -80,10 +31,6 @@
     "visualization",
     "farming",
     "itineraire-technique",
-    "TIKA",
-    "react",
-    "nextjs",
-    "technical-itinerary",
-    "crop-rotation"
+    "TIKA"
   ]
 }

package/scss/styles-editor.scss

@@ -0,0 +1,145 @@
+$button-color      : green;
+$button-hover-color: rgb(2, 102, 2);
+$button-text-color : white;
+$header-height     : 3rem;
+
+.main-header {
+    background-color: #6fa76f;
+    color           : white;
+    height          : $header-height;
+
+    display    : flex;
+    align-items: center;
+
+    .btn.show,
+    .btn:first-child:active,
+    :not(.btn-check)+.btn:active {
+        background-color: #026602;
+    }
+}
+
+.editor-view {
+    overflow-y: auto;
+
+    //scrollbar only for the editor
+    height: calc(100vh - #{$header-height + 1rem});
+}
+
+// Add a button in the rotation to edit right from the transcript
+.rotation_item {
+    .step-edit {
+        color         : #878787;
+        cursor        : pointer;
+        display       : none;
+        margin-left   : 10px;
+        font-size     : 70%;
+        vertical-align: super;
+    }
+
+    &:hover .step-edit {
+        display: inline !important;
+    }
+}
+
+.welcome-view {
+    background-color: #6fa76f;
+    color           : white;
+    padding         : 1rem;
+    margin-top      : 1rem;
+    border-radius   : 1rem;
+
+    #cropsContainer {
+        color: green;
+    }
+}
+
+.card-white {
+    background-color: white;
+    padding         : 1rem;
+    border-radius   : 1rem;
+}
+
+.card-holder {
+    background-color: whitesmoke;
+    padding         : 1rem;
+    border-radius   : 1rem;
+    margin          : auto
+}
+
+.editable-row {
+    background-color: #f7f7f7;
+    min-height      : 3rem;
+
+    display    : flex;
+    align-items: center;
+
+    border-radius: 0.5rem;
+
+    .edit-buttons {
+        visibility: hidden;
+    }
+
+    &:hover>.edit-buttons {
+        visibility: visible;
+    }
+}
+
+.intervention-row {
+    background: #e0e0e0;
+}
+
+.primary-button {
+    color           : $button-text-color;
+    background-color: $button-color;
+    border          : $button-color;
+
+    &:hover {
+        background-color: $button-hover-color;
+    }
+}
+
+.close-step-times {
+    background: none;
+    border    : none;
+    color     : #878787;
+    font-size : 120%;
+
+    &:hover {
+        color: #494949;
+    }
+}
+
+#cropsContainer{
+    .drag-handle {
+        color         : #CCC;
+        font-weight   : normal;
+        font-size     : 86%;
+        margin-right  : 10px;
+        vertical-align: middle;
+        cursor        : grab;
+    }
+
+    div.col {
+        cursor: pointer;
+    }
+}
+
+.form-control {
+    &.text-right {
+        text-align: right;
+    }
+}
+
+.modal {
+    .form-label {
+        font-weight: 600;
+    }
+}
+
+#code-snippet {
+    font-family     : monospace;
+    font-size       : 13px;
+    text-align      : left;
+    border          : 1px inset;
+    background-color: #f1f1f1;
+}

package/scss/styles-rendering.scss

@@ -0,0 +1,184 @@
+div.mainITKContainer {
+    container-type: inline-size;
+    container-name: myparent;
+    line-height   : 1rem;
+
+    .left-transcript {
+        display    : none;
+        width      : 50%;
+        font-family: Segoe UI;
+    }
+
+    .chart-div {
+        width: 100%;
+    }
+
+    .bottom-transcript {
+        display: none;
+    }
+
+    &.withTranscript {
+        .bottom-transcript {
+            display    : block;
+            font-family: Segoe UI;
+        }
+    }
+
+    @container myparent (min-width: 800px) {
+        &.withTranscript {
+            .left-transcript {
+                display: block;
+            }
+
+            .chart-div {
+                width: 50%;
+            }
+
+            .bottom-transcript {
+                display: none;
+            }
+        }
+    }
+
+    @container myparent (min-width: 1000px) {
+        &.withTranscript {
+            .left-transcript {
+                display: block;
+                width  : 40%;
+            }
+
+            .chart-div {
+                width: 60%;
+            }
+
+            .bottom-transcript {
+                display: none;
+            }
+        }
+    }
+
+    div.rotation_item {
+        background-color: #F8FAFC;
+        border-left     : #FFFFFF 14px solid;
+        border-radius   : 7px;
+        padding         : 8px 3px 5px 9px;
+        margin          : 12px 0;
+        overflow-x      : hidden;
+
+        &.highlighted {
+            box-shadow: 0px 4px 4px 0px var(--UI-Shadow, rgba(17, 36, 69, 0.16)),
+                0px 1px 16px 0px var(--UI-Shadow, rgba(17, 36, 69, 0.16));
+            background-color: #F0F3F5;
+        }
+
+        div.step-header {
+            h4 {
+                font-size    : 20px;
+                margin-bottom: 0;
+                margin-top   : 0;
+            }
+
+            div.step_dates {
+                font-size       : 11px;
+                background-color: #cdcccc;
+                color           : #000000;
+                margin          : 5px;
+                padding         : 2px 5px;
+                border-radius   : 5px;
+                height          : 20px;
+                float           : right;
+            }
+
+            div.collapse-button {
+                border-radius: 50%;
+                width        : 30px;
+                height       : 30px;
+                text-align   : center;
+                padding      : 5px 0px;
+                margin       : 0 5px 3px 0;
+                cursor       : pointer;
+                background   : #dfe6f7;
+                color        : #7a8bad;
+                float        : right;
+                transition   : transform 0.3s ease-in-out;
+            }
+        }
+
+        .step_description {
+            clear: both;
+        }
+
+        &.show-all {
+            div.collapse-button {
+                transform: rotate(180deg);
+            }
+
+            div.details {
+                max-height: 10000px;
+                /* Adjust this value as needed */
+            }
+        }
+
+        div.details {
+            max-height: 0px;
+            overflow  : hidden;
+            transition: max-height 0.3s ease-in-out;
+
+            div.intervention {
+                background-color: #FFFFFF;
+                border-radius   : 5px;
+                margin-bottom   : 11px;
+                padding         : 13px;
+                cursor          : pointer;
+
+                span.intervention_title {
+                    font-weight: bold;
+                }
+
+                span.intervention_date {
+                    color           : #707070;
+                    background-color: #F0F3F5;
+                    float           : right;
+                }
+
+                div.intervention_description {
+                    margin-top: 5px;
+                }
+            }
+        }
+
+        .step-edit {
+            display: none;
+        }
+    }
+
+    .charts {
+        width  : 100%;
+        height : 500px;
+        display: inline-block;
+    }
+
+    .transcript {
+        font-size      : 80%;
+        width          : 100%;
+        max-height     : 450px;
+        overflow-y     : scroll;
+        scroll-behavior: smooth;
+        padding        : 3px;
+    }
+}
+
+.rotation-tooltip {
+    max-width : 400px;
+    text-align: left;
+
+    div.step_dates {
+        font-size       : 9px;
+        background-color: #cdcccc;
+        color           : #000000;
+        margin          : 5px;
+        padding         : 0px 5px;
+        border-radius   : 5px;
+        float: right;
+    }
+}

package/examples/README.md

@@ -1,137 +0,0 @@
-# Exemples d'utilisation
-
-Ce dossier contient des exemples d'intégration du visualisateur d'itinéraires techniques TIKA dans différents contextes.
-
-## Fichiers disponibles
-
-### Next.js
-
-- **`nextjs-app-router-viewer.tsx`** - Exemple de page de visualisation avec Next.js App Router (13+)
-  - Affichage d'un itinéraire technique
-  - Gestion du chargement des données
-  - Événements de clic et survol
-
-- **`nextjs-app-router-editor.tsx`** - Exemple d'éditeur complet avec Next.js App Router
-  - Interface complète d'édition
-  - Ajout/modification/suppression d'étapes
-  - Gestion des interventions
-  - Sauvegarde et export
-
-- **`nextjs-_document.tsx`** - Configuration du document Next.js
-  - Chargement des dépendances CDN
-  - Configuration des scripts et styles
-  - Compatible Pages Router
-
-- **`nextjs-api-route.ts`** - Exemple d'API Routes
-  - Sauvegarde et chargement d'itinéraires
-  - CRUD complet
-  - Gestion des fichiers JSON
-
-## Utilisation
-
-### 1. Copier les exemples
-
-Copiez les fichiers dans votre projet Next.js :
-
-```bash
-# Pour le visualiseur
-cp examples/nextjs-app-router-viewer.tsx app/itineraire/page.tsx
-
-# Pour l'éditeur
-cp examples/nextjs-app-router-editor.tsx app/editor/page.tsx
-
-# Pour la configuration
-cp examples/nextjs-_document.tsx pages/_document.tsx  # Pages Router
-# ou adaptez pour app/layout.tsx (App Router)
-
-# Pour l'API
-cp examples/nextjs-api-route.ts app/api/itineraire/route.ts  # App Router
-# ou pages/api/itineraire.ts (Pages Router)
-```
-
-### 2. Installer les dépendances
-
-```bash
-npm install @osfarm/itineraire-technique
-npm run setup:react
-```
-
-### 3. Adapter à votre projet
-
-Les exemples sont commentés et peuvent être adaptés à vos besoins spécifiques :
-
-- Personnalisez les styles
-- Ajoutez votre logique métier
-- Intégrez avec votre base de données
-- Ajoutez l'authentification
-
-## Structure d'un projet Next.js complet
-
-```
-my-app/
-├── app/                          # App Router (Next.js 13+)
-│   ├── layout.tsx                # Layout principal avec scripts CDN
-│   ├── itineraire/
-│   │   └── page.tsx              # Page de visualisation
-│   ├── editor/
-│   │   └── page.tsx              # Page d'édition
-│   └── api/
-│       └── itineraire/
-│           └── route.ts          # API Routes
-├── public/                       # Fichiers statiques
-│   ├── js/
-│   │   ├── chart-render.js
-│   │   └── editor-*.js
-│   ├── css/
-│   │   ├── styles-rendering.css
-│   │   └── styles-editor.css
-│   └── test/
-│       └── test.json
-├── package.json
-└── tsconfig.json
-```
-
-## Frameworks alternatifs
-
-Bien que ces exemples soient pour Next.js, les composants React sont compatibles avec :
-
-- **Create React App** - Ajoutez les scripts CDN dans `public/index.html`
-- **Vite** - Ajoutez les scripts CDN dans `index.html`
-- **Remix** - Ajoutez les scripts dans `root.tsx`
-- **Gatsby** - Utilisez `gatsby-ssr.js` pour ajouter les scripts
-
-## Support TypeScript
-
-Tous les exemples sont fournis en TypeScript avec les types complets. Si vous utilisez JavaScript, supprimez simplement les annotations de type.
-
-## Personnalisation
-
-### Thème et styles
-
-Vous pouvez personnaliser les styles en :
-
-1. Surchargeant les classes CSS existantes
-2. Modifiant les fichiers SCSS sources
-3. Utilisant la prop `className` des composants
-
-### Événements
-
-Les composants exposent des callbacks pour interagir avec eux :
-
-```tsx
-<TikaRenderer
-  data={data}
-  onItemClick={(id, event) => {
-    // Votre logique
-  }}
-  onItemHover={(id, event) => {
-    // Votre logique
-  }}
-/>
-```
-
-## Besoin d'aide ?
-
-- Consultez la [documentation React](../react/README.md)
-- Consultez le [Quick Start](../react/QUICKSTART.md)
-- Ouvrez une [issue sur GitHub](https://github.com/osfarm/itineraire-technique/issues)

package/examples/nextjs-_document.tsx

@@ -1,66 +0,0 @@
-/**
- * Exemple de _document.tsx pour Next.js Pages Router
- * Fichier: pages/_document.tsx
- */
-
-import { Html, Head, Main, NextScript } from 'next/document';
-
-export default function Document() {
-  return (
-    <Html lang="fr">
-      <Head>
-        {/* ECharts - Bibliothèque de graphiques */}
-        <script src="https://cdn.jsdelivr.net/npm/echarts@6.0.0/dist/echarts.js"></script>
-        
-        {/* jQuery et jQuery UI */}
-        <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
-        <script src="https://cdn.jsdelivr.net/npm/jquery-ui@1.14.1/dist/jquery-ui.min.js"></script>
-        <link 
-          rel="stylesheet" 
-          href="https://cdn.jsdelivr.net/npm/jquery-ui@1.14.1/themes/base/jquery-ui.css" 
-        />
-        
-        {/* Underscore.js */}
-        <script src="https://cdn.jsdelivr.net/npm/underscore@1.13.7/underscore-umd-min.js"></script>
-        
-        {/* Bootstrap */}
-        <script 
-          src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"
-          integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI"
-          crossOrigin="anonymous"
-        ></script>
-        <link 
-          href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" 
-          rel="stylesheet"
-          integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB"
-          crossOrigin="anonymous"
-        />
-        
-        {/* Font Awesome */}
-        <link 
-          href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" 
-          rel="stylesheet" 
-        />
-        
-        {/* 
-          Scripts TIKA - À copier dans le dossier public/
-          Voir instructions dans react/README.md 
-        */}
-        <script src="/chart-render.js"></script>
-        <script src="/editor-attributes.js"></script>
-        <script src="/editor-interventions.js"></script>
-        <script src="/editor-crops.js"></script>
-        <script src="/editor-export.js"></script>
-        <script src="/editor-wiki-editor.js"></script>
-        
-        {/* Styles TIKA - À copier dans le dossier public/ */}
-        <link href="/styles-rendering.css" rel="stylesheet" />
-        <link href="/styles-editor.css" rel="stylesheet" />
-      </Head>
-      <body>
-        <Main />
-        <NextScript />
-      </body>
-    </Html>
-  );
-}