@osfarm/itineraire-technique 1.1.12 → 1.1.14

package/css/styles-editor.css

@@ -1 +1 @@
-.main-header{background-color:#6fa76f;color:#fff;height:3rem;display:flex;align-items:center}.main-header .btn.show,.main-header .btn:first-child:active,.main-header :not(.btn-check)+.btn:active{background-color:#026602}.editor-view{overflow-y:auto;height:calc(100vh - 4rem)}.rotation_item .step-edit{color:#878787;cursor:pointer;display:none;margin-left:10px;font-size:70%;vertical-align:super}.rotation_item:hover .step-edit{display:inline !important}.welcome-view{background-color:#6fa76f;color:#fff;padding:1rem;margin-top:1rem;border-radius:1rem}.welcome-view #cropsContainer{color:green}.card-white{background-color:#fff;padding:1rem;border-radius:1rem}.card-holder{background-color:#f5f5f5;padding:1rem;border-radius:1rem;margin:auto}.editable-row{background-color:#f7f7f7;min-height:3rem;display:flex;align-items:center;border-radius:.5rem}.editable-row .edit-buttons{visibility:hidden}.editable-row:hover>.edit-buttons{visibility:visible}.intervention-row{background:#e0e0e0}.primary-button{color:#fff;background-color:green;border:green}.primary-button:hover{background-color:#026602}.close-step-times{background:none;border:none;color:#878787;font-size:120%}.close-step-times:hover{color:#494949}#cropsContainer .drag-handle{color:#ccc;font-weight:normal;font-size:86%;margin-right:10px;vertical-align:middle;cursor:grab}.form-control.text-right{text-align:right}.modal .form-label{font-weight:600}/*# sourceMappingURL=styles-editor.css.map */
+.main-header{background-color:#6fa76f;color:#fff;height:3rem;display:flex;align-items:center}.main-header .btn.show,.main-header .btn:first-child:active,.main-header :not(.btn-check)+.btn:active{background-color:#026602}.editor-view{overflow-y:auto;height:calc(100vh - 4rem)}.rotation_item .step-edit{color:#878787;cursor:pointer;display:none;margin-left:10px;font-size:70%;vertical-align:super}.rotation_item:hover .step-edit{display:inline !important}.welcome-view{background-color:#6fa76f;color:#fff;padding:1rem;margin-top:1rem;border-radius:1rem}.welcome-view #cropsContainer{color:green}.card-white{background-color:#fff;padding:1rem;border-radius:1rem}.card-holder{background-color:#f5f5f5;padding:1rem;border-radius:1rem;margin:auto}.editable-row{background-color:#f7f7f7;min-height:3rem;display:flex;align-items:center;border-radius:.5rem}.editable-row .edit-buttons{visibility:hidden}.editable-row:hover>.edit-buttons{visibility:visible}.intervention-row{background:#e0e0e0}.primary-button{color:#fff;background-color:green;border:green}.primary-button:hover{background-color:#026602}.close-step-times{background:none;border:none;color:#878787;font-size:120%}.close-step-times:hover{color:#494949}#cropsContainer .drag-handle{color:#ccc;font-weight:normal;font-size:86%;margin-right:10px;vertical-align:middle;cursor:grab}.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}/*# sourceMappingURL=styles-editor.css.map */

package/css/styles-editor.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../scss/styles-editor.scss"],"names":[],"mappings":"AAKA,aACI,yBACA,WACA,OALY,KAOZ,aACA,mBAEA,sGACI,yBAIR,aACI,gBAGA,0BAKA,0BACI,cACA,eACA,aACA,iBACA,cACA,qBAGJ,gCACI,0BAIR,cACI,yBACA,WACA,aACA,gBACA,mBAEA,8BACI,YAIR,YACI,sBACA,aACA,mBAGJ,aACI,yBACA,aACA,mBACA,YAGJ,cACI,yBACA,gBAEA,aACA,mBAEA,oBAEA,4BACI,kBAGJ,kCACI,mBAIR,kBACI,mBAGJ,gBACI,MAvFgB,KAwFhB,iBA1FW,MA2FX,OA3FW,MA6FX,sBACI,iBA7Fa,QAiGrB,kBACI,gBACA,YACA,cACA,eAEA,wBACI,cAIR,6BACI,WACA,mBACA,cACA,kBACA,sBACA,YAIA,yBACI,iBAKJ,mBACI","file":"styles-editor.css"}
+{"version":3,"sourceRoot":"","sources":["../scss/styles-editor.scss"],"names":[],"mappings":"AAKA,aACI,yBACA,WACA,OALiB,KAOjB,aACA,mBAEA,sGAGI,yBAIR,aACI,gBAGA,0BAKA,0BACI,cACA,eACA,aACA,iBACA,cACA,qBAGJ,gCACI,0BAIR,cACI,yBACA,WACA,aACA,gBACA,mBAEA,8BACI,YAIR,YACI,sBACA,aACA,mBAGJ,aACI,yBACA,aACA,mBACA,YAGJ,cACI,yBACA,gBAEA,aACA,mBAEA,oBAEA,4BACI,kBAGJ,kCACI,mBAIR,kBACI,mBAGJ,gBACI,MAzFiB,KA0FjB,iBA5FiB,MA6FjB,OA7FiB,MA+FjB,sBACI,iBA/Fa,QAmGrB,kBACI,gBACA,YACA,cACA,eAEA,wBACI,cAIR,6BACI,WACA,mBACA,cACA,kBACA,sBACA,YAIA,yBACI,iBAKJ,mBACI,gBAIR,cACI,sBACA,eACA,gBACA,iBACA","file":"styles-editor.css"}

package/editor.html

@@ -51,6 +51,7 @@
                             <span class="visually-hidden">Autres options de chargement</span>
                         </button>
                         <ul class="dropdown-menu">
+                            <li><a class="dropdown-item" href="#" onclick="showSaveAsModal()"><i class="fa fa-save" aria-hidden="true"></i> Enregistrer sous</a></li>
                             <li><a class="dropdown-item" href="#" onclick="exportToJsonFile()"><i class="fa fa-download" aria-hidden="true"></i> Exporter</a></li>
                         </ul>
                     </div>
@@ -271,6 +272,47 @@
         </div>
     </div>
 
+    <!-- Save As Modal -->
+    <div class="modal fade" id="saveAsModal" tabindex="-1" aria-labelledby="saveAsModalLabel" aria-hidden="true">
+        <div class="modal-dialog">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title" id="saveAsModalLabel">Enregistrer sous</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div class="modal-body">
+                    <form>
+                        <div class="mb-3 form-check">
+                            <input type="checkbox" class="form-check-input" id="saveAsUseExistingPage">
+                            <label class="form-check-label" for="saveAsUseExistingPage">
+                                Enregistrer sous une page existante
+                            </label>
+                        </div>
+                        <div class="mb-3" id="saveAsPageSelectContainer">
+                            <label for="saveAsPageSelect" class="form-label">Page parent</label>
+                            <select class="form-select" id="saveAsPageSelect" disabled>
+                                <option value="">Sélectionner une page...</option>
+                            </select>
+                            <div class="form-text">Si non coché, le fichier sera enregistré sous "Non classified"</div>
+                        </div>
+                        <div class="mb-3">
+                            <label for="saveAsFilename" class="form-label">Nom du fichier</label>
+
+                            <div class="input-group mb-3">
+                                <input type="text" class="form-control" id="saveAsFilename" placeholder="Nom du fichier (sans extension)">
+                                <span class="input-group-text" id="basic-addon2">.json</span>
+                            </div>
+                        </div>
+                    </form>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
+                    <button type="button" class="btn btn-primary" id="saveAsConfirmBtn">Enregistrer</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
     <!-- Modal -->
     <div class="modal fade" id="modalParams" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
     <div class="modal-dialog">
@@ -318,6 +360,10 @@
                                 <label for="stepsTitle" class="form-label">Titre des étapes de la rotation</label>
                                 <input type="text" class="form-control" id="stepsTitle" value="Étapes de la rotation dans la parcelle">
                             </div>
+                            <div class="mb-3 d-none" id="codeSnippetDiv">
+                                <label for="code-snippet" class="form-label">Code à insérer dans la page</label>
+                                <textarea readonly class="form-control-plaintext" id="code-snippet" rows="5"></textarea>
+                            </div>
                         </div>
 
                         <!-- Plot context -->
@@ -645,6 +691,17 @@
 
             we = new WikiEditor();
             we.loadPageFromURL();
+
+            // Set up Save As modal event listeners
+            $('#saveAsUseExistingPage').on('change', function() {
+                $('#saveAsPageSelect').prop('disabled', !this.checked);
+            });
+
+            $('#saveAsConfirmBtn').on('click', function() {
+                if (we) {
+                    we.saveAs();
+                }
+            });
         } else {
             document.getElementById("WikiButtons").classList.add("d-none");
             document.getElementById("NonWikiButtons").classList.remove("d-none");
@@ -670,12 +727,20 @@
         }
     }
 
+    function showSaveAsModal() {
+        if (typeof we !== 'undefined') {
+            we.showSaveAsModal();
+        } else {
+            console.error('WikiEditor instance not available');
+        }
+    }
+
     class StepModel {
         constructor(step) {
             this.step = step; // keep a reference to the original object
 
             this.step.id = step.id ?? crypto.randomUUID();
-            this.step.name = step.name ?? "Nouvelle culture";
+            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();
@@ -1013,7 +1078,9 @@
             if (this.textContent.trim() === "") {
                 this.textContent = DEFAULT_TITLE;
             }
+
             crops.title = this.textContent;
+            crops.defaultTitle = false;
         });
     }
 

package/js/editor-export.js

@@ -100,7 +100,7 @@ function showJsonErrorModal(errorMessage) {
 function showConfirmationModal(onConfirm) {
 
     if (crops?.steps.length === 0)
-        return true;
+        return onConfirm();
 
     const confirmationModal = new bootstrap.Modal(document.getElementById('confirmationModal'));
     const confirmButton = document.getElementById('confirmImport');

package/js/editor-wiki-editor.js

@@ -36,6 +36,14 @@ class WikiEditor {
                         sm.setAsEdited();
                     });
                     reloadCropsFromJson(content);
+
+                    let codeSnippet = `{{Graphique Triple Performance \n| title=${content.title} \n| json=${self.pageTitle} \n| type=Rotation }}`;
+                    $('#code-snippet').val(codeSnippet).on('focus', function() {
+                        $(this).select();
+                    });
+                    $('#codeSnippetDiv').removeClass('d-none');
+                    
+
                 } 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.");
@@ -53,7 +61,6 @@ class WikiEditor {
                     const jsonErrorModal = new bootstrap.Modal(document.getElementById('jsonErrorModal'));
                     jsonErrorModal.show();
                 }
-
             }
         });
     
@@ -66,17 +73,13 @@ class WikiEditor {
         const self = this;
 
         if (!self.pageTitle) {
-            alert("Aucun titre de page spécifié pour l'enregistrement.");
+            self.showSaveAsModal();
             return;
         }
         
         // If a page title is provided, save to that page
         self.savePageToWiki(self.pageTitle, JSON.stringify(crops, null, 2))
-            .then(() => {
-
-                // TODO : Also set a few semantic properties on the page, including the chart type, the geolocation, etc.
-
-
+            .then(async () => {
                 alert("Itinéraire technique enregistré avec succès !");
             })
             .catch(err => {
@@ -151,6 +154,25 @@ class WikiEditor {
         }
     }
 
+
+    async getWikiUserPages(username) {
+        try {
+            // Encode the username for the URL
+            const encodedUsername = 'User:' + username;
+            const query = encodeURIComponent(`[[Page author::${encodedUsername}]][[A un type de page::+]]`);
+            const url = `/api.php?action=ask&query=${query}|sort=Modification date|order=desc&format=json`;
+            
+            const response = await fetch(url, {
+                credentials: 'include'
+            });
+            const data = await response.json();
+            return data;
+        } catch (error) {
+            console.error("Error fetching wiki files:", error);
+            throw error;
+        }
+    }
+
     async loadFromWiki() {
         // Show the modal
         const modal = new bootstrap.Modal(document.getElementById('wikiFilesModal'));
@@ -220,4 +242,121 @@ class WikiEditor {
         }
     }
 
+    /**
+     * Show the Save As modal and handle the save as functionality
+     */
+    async showSaveAsModal() {
+        const self = this;
+        
+        try {
+            // Get user info to check if logged in
+            const userInfo = await this.getWikiUserInfo();
+            
+            if (!userInfo.id || userInfo.id === 0) {
+                alert('Vous devez être connecté au wiki pour utiliser cette fonctionnalité.');
+                return;
+            }
+
+            // Get user's existing pages
+            const pagesData = await this.getWikiUserPages(userInfo.name);
+            
+            // Show the modal
+            const modal = new bootstrap.Modal(document.getElementById('saveAsModal'));
+            modal.show();
+            
+            // Populate the select with user's pages
+            const pageSelect = $('#saveAsPageSelect');
+            pageSelect.empty();
+            pageSelect.append('<option value="">Sélectionner une page...</option>');
+            
+            if (pagesData.query?.results) {
+                for (const [pageTitle, pageData] of Object.entries(pagesData.query.results)) {
+                    const displayTitle = pageData.displaytitle || pageTitle;
+                    pageSelect.append(`<option value="${pageTitle}">${displayTitle}</option>`);
+                }
+            }
+            
+            // Set default filename from title if it's been changed
+            const filenameInput = $('#saveAsFilename');
+            const currentTitle = crops.title || '';
+            if (crops.defaultTitle === false) {
+                filenameInput.val(currentTitle);
+            } else {
+                filenameInput.val('');
+            }
+            
+        } catch (error) {
+            console.error("Error showing save as modal:", error);
+            alert('Erreur lors du chargement des données utilisateur.');
+        }
+    }
+
+    /**
+     * Build the URL for saving based on the save as modal selections
+     */
+    buildSaveAsUrl() {
+        const useExistingPage = $('#saveAsUseExistingPage').prop('checked');
+        const selectedPage = $('#saveAsPageSelect').val();
+        const filename = $('#saveAsFilename').val().trim();
+        
+        if (!filename) {
+            alert('Veuillez saisir un nom de fichier.');
+            return null;
+        }
+        
+        let subpageName;
+        
+        if (useExistingPage && selectedPage) {
+            subpageName = selectedPage;
+        } else {
+            subpageName = 'Non classified';
+        }
+        
+        // Build the final URL: subpagename/filename.json
+        const finalUrl = `${subpageName}/${filename}.json`;
+
+        if (crops.defaultTitle !== false) {
+            crops.title = filename;
+        }
+
+        return finalUrl;
+    }
+
+    /**
+     * Handle the save as operation
+     */
+    async saveAs() {
+        const url = this.buildSaveAsUrl();
+        
+        if (!url) {
+            return; // Error already handled in buildSaveAsUrl
+        }
+        
+        const self = this;
+        const oldPageTitle = self.pageTitle;
+
+        try {
+            // Set the new page title
+            self.pageTitle = url;
+
+            // Save to the wiki first
+            await self.savePageToWiki(self.pageTitle, JSON.stringify(crops, null, 2));
+            
+            // Close the modal
+            const modal = bootstrap.Modal.getInstance(document.getElementById('saveAsModal'));
+            modal.hide();
+            
+            alert(`Itinéraire technique enregistré avec succès sous "${url}"`);
+            
+            // Only navigate after successful save
+            const newEditorUrl = `editor.html?wiki=${encodeURIComponent(self.pageTitle)}`;
+            window.location.href = newEditorUrl;
+            
+        } catch (error) {
+            // Restore the old page title if save failed
+            self.pageTitle = oldPageTitle;
+            console.error("Error saving as new file:", error);
+            alert('Erreur lors de l\'enregistrement du fichier.');
+        }
+    }
 }

package/package.json

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

package/scss/styles-editor.scss

@@ -1,17 +1,19 @@
-$button-color: green;
+$button-color      : green;
 $button-hover-color: rgb(2, 102, 2);
-$button-text-color: white;
-$header-height: 3rem;
+$button-text-color : white;
+$header-height     : 3rem;
 
 .main-header {
     background-color: #6fa76f;
-    color: white;
-    height: $header-height;
+    color           : white;
+    height          : $header-height;
 
-    display: flex;
+    display    : flex;
     align-items: center;
 
-    .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active {
+    .btn.show,
+    .btn:first-child:active,
+    :not(.btn-check)+.btn:active {
         background-color: #026602;
     }
 }
@@ -26,11 +28,11 @@ $header-height: 3rem;
 // 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%;
+        color         : #878787;
+        cursor        : pointer;
+        display       : none;
+        margin-left   : 10px;
+        font-size     : 70%;
         vertical-align: super;
     }
 
@@ -41,10 +43,10 @@ $header-height: 3rem;
 
 .welcome-view {
     background-color: #6fa76f;
-    color: white;
-    padding: 1rem;
-    margin-top: 1rem;
-    border-radius: 1rem;
+    color           : white;
+    padding         : 1rem;
+    margin-top      : 1rem;
+    border-radius   : 1rem;
 
     #cropsContainer {
         color: green;
@@ -53,22 +55,22 @@ $header-height: 3rem;
 
 .card-white {
     background-color: white;
-    padding: 1rem;
-    border-radius: 1rem;
+    padding         : 1rem;
+    border-radius   : 1rem;
 }
 
 .card-holder {
     background-color: whitesmoke;
-    padding: 1rem;
-    border-radius: 1rem;
-    margin: auto
+    padding         : 1rem;
+    border-radius   : 1rem;
+    margin          : auto
 }
 
 .editable-row {
     background-color: #f7f7f7;
-    min-height: 3rem;
+    min-height      : 3rem;
 
-    display: flex;
+    display    : flex;
     align-items: center;
 
     border-radius: 0.5rem;
@@ -77,7 +79,7 @@ $header-height: 3rem;
         visibility: hidden;
     }
 
-    &:hover > .edit-buttons {
+    &:hover>.edit-buttons {
         visibility: visible;
     }
 }
@@ -87,9 +89,9 @@ $header-height: 3rem;
 }
 
 .primary-button {
-    color: $button-text-color;
+    color           : $button-text-color;
     background-color: $button-color;
-    border: $button-color;
+    border          : $button-color;
 
     &:hover {
         background-color: $button-hover-color;
@@ -98,9 +100,9 @@ $header-height: 3rem;
 
 .close-step-times {
     background: none;
-    border: none;
-    color: #878787;
-    font-size: 120%;
+    border    : none;
+    color     : #878787;
+    font-size : 120%;
 
     &:hover {
         color: #494949;
@@ -108,12 +110,12 @@ $header-height: 3rem;
 }
 
 #cropsContainer .drag-handle {
-    color: #CCC;
-    font-weight: normal;
-    font-size: 86%;
-    margin-right: 10px;
+    color         : #CCC;
+    font-weight   : normal;
+    font-size     : 86%;
+    margin-right  : 10px;
     vertical-align: middle;
-    cursor: grab;
+    cursor        : grab;
 }
 
 .form-control {
@@ -126,4 +128,12 @@ $header-height: 3rem;
     .form-label {
         font-weight: 600;
     }
+}
+
+#code-snippet {
+    font-family     : monospace;
+    font-size       : 13px;
+    text-align      : left;
+    border          : 1px inset;
+    background-color: #f1f1f1;
 }