@osfarm/itineraire-technique 1.0.7 → 1.1.1

package/css/styles-rendering.css

@@ -1 +1 @@
-div.mainITKContainer{container-type:inline-size;container-name:myparent;line-height:1rem}div.mainITKContainer .left-transcript{display:none;width:50%;font-family:Segoe UI}div.mainITKContainer .chart-div{width:100%}div.mainITKContainer .bottom-transcript{display:block;font-family:Segoe UI}@container myparent (min-width: 800px){div.mainITKContainer .left-transcript{display:block}div.mainITKContainer .chart-div{width:50%}div.mainITKContainer .bottom-transcript{display:none}}@container myparent (min-width: 1200px){div.mainITKContainer .left-transcript{display:block;width:40%}div.mainITKContainer .chart-div{width:60%}div.mainITKContainer .bottom-transcript{display:none}}div.mainITKContainer div.rotation_item{background-color:#f8fafc;border-left:#fff 14px solid;border-radius:7px;padding:8px 3px 5px 9px;margin:12px 0;overflow-x:hidden}div.mainITKContainer div.rotation_item.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.mainITKContainer div.rotation_item div.step-header h4{margin-bottom:0;margin-top:0}div.mainITKContainer div.rotation_item div.step-header div.step_dates{font-size:11px;background-color:#cdcccc;color:#fff;margin:5px;padding:2px 5px;border-radius:5px;height:20px;float:right}div.mainITKContainer div.rotation_item div.step-header 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 .3s ease-in-out}div.mainITKContainer div.rotation_item .step_description{clear:both}div.mainITKContainer div.rotation_item.show-all div.collapse-button{transform:rotate(180deg)}div.mainITKContainer div.rotation_item.show-all div.details{max-height:10000px}div.mainITKContainer div.rotation_item div.details{max-height:0px;overflow:hidden;transition:max-height .3s ease-in-out}div.mainITKContainer div.rotation_item div.details div.intervention{background-color:#fff;border-radius:5px;margin-bottom:11px;padding:13px;cursor:pointer}div.mainITKContainer div.rotation_item div.details div.intervention span.intervention_title{font-weight:bold}div.mainITKContainer div.rotation_item div.details div.intervention span.intervention_date{color:#707070;background-color:#f0f3f5;float:right}div.mainITKContainer div.rotation_item div.details div.intervention div.intervention_description{margin-top:5px}div.mainITKContainer div.rotation_item .step-edit{display:none}div.mainITKContainer .charts{width:100%;height:500px;display:inline-block}div.mainITKContainer .transcript{font-size:80%;width:100%;max-height:450px;overflow-y:scroll;scroll-behavior:smooth;padding:3px}/*# sourceMappingURL=styles-rendering.css.map */
+div.mainITKContainer{container-type:inline-size;container-name:myparent;line-height:1rem}div.mainITKContainer .left-transcript{display:none;width:50%;font-family:Segoe UI}div.mainITKContainer .chart-div{width:100%}div.mainITKContainer .bottom-transcript{display:block;font-family:Segoe UI}@container myparent (min-width: 800px){div.mainITKContainer .left-transcript{display:block}div.mainITKContainer .chart-div{width:50%}div.mainITKContainer .bottom-transcript{display:none}}@container myparent (min-width: 1200px){div.mainITKContainer .left-transcript{display:block;width:40%}div.mainITKContainer .chart-div{width:60%}div.mainITKContainer .bottom-transcript{display:none}}div.mainITKContainer div.rotation_item{background-color:#f8fafc;border-left:#fff 14px solid;border-radius:7px;padding:8px 3px 5px 9px;margin:12px 0;overflow-x:hidden}div.mainITKContainer div.rotation_item.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.mainITKContainer div.rotation_item div.step-header h4{margin-bottom:0;margin-top:0}div.mainITKContainer div.rotation_item div.step-header div.step_dates{font-size:11px;background-color:#cdcccc;color:#fff;margin:5px;padding:2px 5px;border-radius:5px;height:20px;float:right}div.mainITKContainer div.rotation_item div.step-header 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 .3s ease-in-out}div.mainITKContainer div.rotation_item .step_description{clear:both}div.mainITKContainer div.rotation_item.show-all div.collapse-button{transform:rotate(180deg)}div.mainITKContainer div.rotation_item.show-all div.details{max-height:10000px}div.mainITKContainer div.rotation_item div.details{max-height:0px;overflow:hidden;transition:max-height .3s ease-in-out}div.mainITKContainer div.rotation_item div.details div.intervention{background-color:#fff;border-radius:5px;margin-bottom:11px;padding:13px;cursor:pointer}div.mainITKContainer div.rotation_item div.details div.intervention span.intervention_title{font-weight:bold}div.mainITKContainer div.rotation_item div.details div.intervention span.intervention_date{color:#707070;background-color:#f0f3f5;float:right}div.mainITKContainer div.rotation_item div.details div.intervention div.intervention_description{margin-top:5px}div.mainITKContainer div.rotation_item .step-edit{display:none}div.mainITKContainer .charts{width:100%;height:500px;display:inline-block}div.mainITKContainer .transcript{font-size:80%;width:100%;max-height:450px;overflow-y:scroll;scroll-behavior:smooth;padding:3px}.rotation-tooltip{width:400px}/*# sourceMappingURL=styles-rendering.css.map */

package/css/styles-rendering.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../scss/styles-rendering.scss"],"names":[],"mappings":"AAAA,qBACI,2BACA,wBACA,iBAEA,sCACI,aACA,UACA,qBAGJ,gCACI,WAGJ,wCACI,cACA,qBAGJ,uCACI,sCACI,cAGJ,gCACI,UAGJ,wCACI,cAIR,wCACI,sCACI,cACA,UAGJ,gCACI,UAGJ,wCACI,cAIR,uCACI,yBACA,4BACA,kBACA,wBACA,cACA,kBAEA,mDACI,8HAEA,yBAIA,0DACI,gBACA,aAGJ,sEACI,eACA,yBACA,WACA,WACA,gBACA,kBACA,YACA,YAGJ,2EACI,kBACA,WACA,YACA,kBACA,gBACA,mBACA,eACA,mBACA,cACA,YACA,qCAIR,yDACI,WAIA,oEACI,yBAGJ,4DACI,mBAKR,mDACI,eACA,gBACA,sCAEA,oEACI,sBACA,kBACA,mBACA,aACA,eAEA,4FACI,iBAGJ,2FACI,cACA,yBACA,YAGJ,iGACI,eAKZ,kDACI,aAIR,6BACI,WACA,aACA,qBAGJ,iCACI,cACA,WACA,iBACA,kBACA,uBACA","file":"styles-rendering.css"}
+{"version":3,"sourceRoot":"","sources":["../scss/styles-rendering.scss"],"names":[],"mappings":"AAAA,qBACI,2BACA,wBACA,iBAEA,sCACI,aACA,UACA,qBAGJ,gCACI,WAGJ,wCACI,cACA,qBAGJ,uCACI,sCACI,cAGJ,gCACI,UAGJ,wCACI,cAIR,wCACI,sCACI,cACA,UAGJ,gCACI,UAGJ,wCACI,cAIR,uCACI,yBACA,4BACA,kBACA,wBACA,cACA,kBAEA,mDACI,8HAEA,yBAIA,0DACI,gBACA,aAGJ,sEACI,eACA,yBACA,WACA,WACA,gBACA,kBACA,YACA,YAGJ,2EACI,kBACA,WACA,YACA,kBACA,gBACA,mBACA,eACA,mBACA,cACA,YACA,qCAIR,yDACI,WAIA,oEACI,yBAGJ,4DACI,mBAKR,mDACI,eACA,gBACA,sCAEA,oEACI,sBACA,kBACA,mBACA,aACA,eAEA,4FACI,iBAGJ,2FACI,cACA,yBACA,YAGJ,iGACI,eAKZ,kDACI,aAIR,6BACI,WACA,aACA,qBAGJ,iCACI,cACA,WACA,iBACA,kBACA,uBACA,YAIR,kBACI","file":"styles-rendering.css"}

package/editor.html

@@ -20,12 +20,13 @@
     <script src="./js/editor-interventions.js"></script>
     <script src="./js/editor-crops.js"></script>
     <script src="./js/editor-export.js"></script>
+    <script src="./js/editor-wiki-editor.js"></script>
 
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
         integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
     <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
     <link href="./css/styles-editor.css" rel="stylesheet">
-    <link href="./css/styles-rendering.css" rel="stylesheet">
+    <link href="./css/styles-rendering.css" rel="stylesheet">    
 </head>
 
 <body>
@@ -35,7 +36,7 @@
                 <button type="button" onclick="importFromJsonFile()" class="btn btn-outline-primary primary-button"
                     id="importFromJsonButton"><i class="fa fa-upload" aria-hidden="true"></i> Charger (JSON)</button>
                 <button type="button" onclick="importFromTestJson()" class="btn btn-outline-primary primary-button"
-                    id="importFromJsonButton"><i class="fa fa-upload" aria-hidden="true"></i> Charger un
+                    id="importFromExampleJsonButton"><i class="fa fa-upload" aria-hidden="true"></i> Charger un
                     exemple</button>
                 <button type="button" onclick="exportToJsonFile(crops)"
                     class="btn btn-outline-primary primary-button" id="exportToJsonButton"><i
@@ -292,6 +293,9 @@
         enableTitleEditing();
 
         $('.close-step-button').click(function() {
+            // Set the current step to be fully edited now:
+            selectedStep.setAsEdited();
+
             displayCropListView();
         });
        
@@ -379,6 +383,8 @@
 
             refreshAllTables();
         });
+
+        let we = new WikiEditor();
     }
 
     class StepModel {
@@ -399,6 +405,12 @@
             this.step.useDefaultEndDate = step.useDefaultEndDate ?? true;
         }
 
+        setAsEdited() {
+            this.step.useDefaultColor = false;
+            this.step.useDefaultStartDate = false;
+            this.step.useDefaultEndDate = false;
+        }
+
         getStep() {
             return this.step;
         }

package/js/chart-render.js

@@ -29,12 +29,20 @@ class RotationRenderer {
 
         this.itk_container = $("#" + divID).css({ 'width': '100%' });
 
-        if (this.itk_container.find('.mainITKContainer').length == 0) {
-            this.itk_container.append(`<div class="row mainITKContainer">
-                <div class="col-auto left-transcript"><div class="transcript"></div></div>
-                <div class="col col-auto chart-div"><div class="charts"></div></div>
-                <div class="col col-12 bottom-transcript"><div class="transcript"></div></div>
-            </div>`);        
+        if (this.data.options.show_transcript) {
+            if (this.itk_container.find('.mainITKContainer').length == 0) {
+                this.itk_container.append(`<div class="row mainITKContainer">
+                    <div class="col-auto left-transcript"><div class="transcript"></div></div>
+                    <div class="col col-auto chart-div"><div class="charts"></div></div>
+                    <div class="col col-12 bottom-transcript"><div class="transcript"></div></div>
+                </div>`);        
+            }
+        } else {
+            if (this.itk_container.find('.mainITKContainer').length == 0) {
+                this.itk_container.append(`<div class="row mainITKContainer">
+                    <div class="col col-12 chart-div"><div class="charts"></div></div>
+                </div>`);        
+            }            
         }
     }
 
@@ -281,7 +289,7 @@ class RotationRenderer {
                 startDate: new Date(item.startDate.valueOf()), // Date de début
                 endDate: new Date(item.endDate.valueOf()), // Date de fin
                 duration: item.duration,
-                description: (item.description ?? ''),
+                description: self.getHTMLFormatedDescription(item.description),
                 value: [
                     1, // Parcelle (index de la série)
                     item.startDate.valueOf(), // Date de début
@@ -682,7 +690,7 @@ class RotationRenderer {
                 'startDate': new Date(item.startDate.valueOf()), // Date de début
                 'endDate': new Date(item.endDate.valueOf()), // Date de fin
                 'duration': item.duration,
-                'description': (item.description ?? '')// + (item.attributes ? item.attributes.map((attribute) => { return '<p><dt>' + attribute.name + '</dt><dd>' + attribute.value + '</dd></p>' }).join('') : '')
+                'description': self.getHTMLFormatedDescription(item.description)
             };
 
             if (pieItem.color != '#ffffff')
@@ -814,6 +822,8 @@ class RotationRenderer {
         }
 
         option.tooltip = {
+                extraCssText: "text-wrap: wrap;",
+                className: "rotation-tooltip",
                 formatter: function (params) {
                     if (params.data.type == 'rotation_item') {
                         let start = params.data.startDate.toLocaleDateString('fr-FR', { day: 'numeric', month: 'short', year: '2-digit' });
@@ -869,4 +879,18 @@ class RotationRenderer {
 
         return option;
     }
+
+    getHTMLFormatedDescription(description) {
+
+        if (description == undefined)
+            return '';
+
+        // If a line has a column in it, split the line in two and add bold to the first part:
+        description = description.replace(/^([^:\n]+):/gm, "<b>$1:</b>");
+        description = description.replace(/\n([^:\n]+):/gm, "\n<b>$1:</b>");
+
+        description = description.replace(/\n/g, '<br/>');
+
+        return description;
+    }
 }

package/js/editor-export.js

@@ -28,24 +28,28 @@ function importFromTestJson() {
         });
     } else {
         importTestJSON();
-    }    
+    }
 }
 
 function importTestJSON() {
-  fetch('test/test.json')
-    .then(response => {
-      if (!response.ok) {
-        throw new Error("Erreur HTTP " + response.status);
-      }
-      return response.json();
-    })
-    .then(data => {
-      console.log("Données JSON :", data);
-      reloadCropsFromJson(data);
-    })
-    .catch(error => {
-      console.error("Impossible de charger le JSON :", error);
-    });
+    fetch('test/test.json')
+        .then(response => {
+            if (!response.ok) {
+                throw new Error("Erreur HTTP " + response.status);
+            }
+            return response.json();
+        })
+        .then(data => {
+            console.log("Données JSON :", data);
+            data.steps.forEach(step => {
+                let sm = new StepModel(step)
+                sm.setAsEdited();
+            });
+            reloadCropsFromJson(data);
+        })
+        .catch(error => {
+            console.error("Impossible de charger le JSON :", error);
+        });
 }
 
 function wipe() {
@@ -67,7 +71,7 @@ function wipe() {
         });
     } else {
         reloadCropsFromJson(crops);
-    } 
+    }
 }
 
 function openFileInput() {
@@ -82,6 +86,10 @@ function openFileInput() {
             reader.onload = () => {
                 try {
                     const jsonData = JSON.parse(reader.result);
+                    jsonData.steps.forEach(step => {
+                        let sm = new StepModel(step)
+                        sm.setAsEdited();
+                    });
                     reloadCropsFromJson(jsonData);
                 } catch (error) {
                     console.error("Error parsing JSON file:", error);

package/js/editor-wiki-editor.js

@@ -0,0 +1,107 @@
+// Encapsulate the wiki editor functionality
+class WikiEditor {
+    constructor() {
+        // Initialize any properties if needed
+
+        const self = this;
+
+        // When the page loads, get the URL paremeter with the target page title we want to edit:
+        window.onload = function () {
+            const urlParams = new URLSearchParams(window.location.search);
+            const pageTitle = urlParams.get('wiki');
+
+            if (!pageTitle)
+                return; // No page title provided, we are not in wiki edit mode
+
+            // If a page title is provided, load its content
+            fetch(`/api.php?action=parse&page=${encodeURIComponent(pageTitle)}&format=json&prop=wikitext`, {
+                credentials: 'same-origin'
+            })
+                .then(response => {
+                    let res = response.json();
+                    return res;
+                })
+                .then(data => {
+                    if (data.parse && data.parse.wikitext) {
+                        try {
+                            const content = JSON.parse(data.parse.wikitext['*']);
+                            content.steps.forEach(step => {
+                                let sm = new StepModel(step)
+                                sm.setAsEdited();
+                            });
+                            reloadCropsFromJson(content);
+                        } catch (e) {
+                            console.error("Erreur lors de l'analyse du JSON de la page :", e);
+                            $('#jsonErrorMessage').text("Le contenu de la page n'est pas un JSON valide.");
+                            const jsonErrorModal = new bootstrap.Modal(document.getElementById('jsonErrorModal'));
+                            jsonErrorModal.show();
+                        }
+                    } else {
+
+                        if (data.error.code == "missingtitle") {
+                            // The page doesn't exist yet, we can start with a blank rotation
+                            wipe();
+                        } else {
+                            console.error("Erreur lors du chargement de la page :", data);
+                            $('#jsonErrorMessage').text("Impossible de charger le contenu de la page.");
+                            const jsonErrorModal = new bootstrap.Modal(document.getElementById('jsonErrorModal'));
+                            jsonErrorModal.show();
+                        }
+
+                    }
+                });
+
+            // Add a button to save the page back the wiki
+            const saveButton = $(`<button type="button" class="btn btn-outline-primary primary-button" id="exportToJsonButton">
+                                    <i class="fa fa-download" aria-hidden="true"></i> Enregistrer dans le wiki
+                                  </button>`).on('click', function () {
+                if (pageTitle) {
+                    // If a page title is provided, save to that page
+                    self.savePageToWiki(pageTitle, JSON.stringify(crops, null, 2))
+                        .then(() => {
+                            alert("Itinéraire technique enregistré avec succès !");
+                        })
+                        .catch(err => {
+                            console.error("Erreur lors de l'enregistrement de la page :", err);
+                            alert("Une erreur s'est produite lors de l'enregistrement.");
+                        });
+                } else {
+                    // Otherwise, export to JSON file
+                    exportToJsonFile(crops);
+                }
+            });
+
+            $(".file-icons").first().prepend(saveButton);
+
+            $('#importFromExampleJsonButton').remove();
+            $('#importFromJsonButton').remove();
+        };
+    }
+
+    async savePageToWiki(pageTitle, newContent) {
+        // 1. Obtenir un token
+        const tokenResp = await fetch('/api.php?action=query&meta=tokens&type=csrf&format=json', {
+            credentials: 'same-origin' // important pour envoyer les cookies de session
+        });
+        const tokenData = await tokenResp.json();
+        const token = tokenData.query.tokens.csrftoken;
+
+        // 2. Faire l’édition
+        const params = new URLSearchParams();
+        params.append('action', 'edit');
+        params.append('format', 'json');
+        params.append('title', pageTitle);
+        params.append('text', newContent);
+        params.append('token', token);
+        params.append('contentmodel', 'json');
+
+        const editResp = await fetch('/api.php', {
+            method: 'POST',
+            body: params,
+            credentials: 'same-origin'
+        });
+
+        const editData = await editResp.json();
+        console.log(editData);
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@osfarm/itineraire-technique",
-  "version": "1.0.7",
+  "version": "1.1.1",
   "description": "A visualisation tool to show agricultural technical itineraries based on Echarts",
   "main": "editor.html",
   "scripts": {

package/scss/styles-rendering.scss

@@ -155,4 +155,8 @@ div.mainITKContainer {
         scroll-behavior: smooth;
         padding        : 3px;
     }
+}
+
+.rotation-tooltip {
+    width: 400px;
 }