@osfarm/itineraire-technique 1.0.6 → 1.1.0

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}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}/*# 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,yBAKA,0DACI,gBAGJ,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","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
@@ -379,6 +380,8 @@
 
             refreshAllTables();
         });
+
+        let we = new WikiEditor();
     }
 
     class StepModel {

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>`);        
+            }            
         }
     }
 

package/js/editor-wiki-editor.js

@@ -0,0 +1,103 @@
+// 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['*']);
+                            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.6",
+  "version": "1.1.0",
   "description": "A visualisation tool to show agricultural technical itineraries based on Echarts",
   "main": "editor.html",
   "scripts": {

package/scss/styles-rendering.scss

@@ -61,10 +61,10 @@ div.mainITKContainer {
             background-color: #F0F3F5;
         }
 
-
         div.step-header {
             h4 {
                 margin-bottom: 0;
+                margin-top   : 0;
             }
 
             div.step_dates {