@osfarm/itineraire-technique 1.2.0 → 1.2.1

package/js/editor-loader-default.js

@@ -0,0 +1,238 @@
+/**
+ * DefaultLoader - Parent class for WikiLoader and ItineraLoader
+ * Provides common functionality for import/export and button setup
+ */
+class DefaultLoader {
+    constructor(tikaeditorInstance = null) {
+        this.tikaeditorInstance = tikaeditorInstance;
+    }
+
+    /**
+     * Setup buttons dynamically in the toolbar
+     * Default implementation for standalone mode (NonWikiButtons)
+     * Can be overridden by child classes for Wiki/Itinera specific buttons
+     */
+    setupButtons() {
+        const self = this;
+        const container = '#toolbar-buttons-container';
+        
+        // Create the NonWikiButtons div structure for standalone mode
+        const nonWikiButtonsDiv = $(`
+            <div id="NonWikiButtons" class="">
+                <div class="btn-group me-2" role="group">
+                    <button type="button" class="btn btn-outline-primary primary-button btn-import-json">
+                        <i class="fa fa-upload" aria-hidden="true"></i> Charger une rotation
+                    </button>
+                    <button type="button" class="btn btn-outline-primary primary-button dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
+                        <span class="visually-hidden">Autres options de chargement</span>
+                    </button>
+                    <ul class="dropdown-menu">
+                        <li><a class="dropdown-item btn-import-test" href="#"><i class="fa fa-lightbulb-o" aria-hidden="true"></i> Charger un exemple</a></li>
+                    </ul>
+                </div>
+                <button type="button" class="btn btn-outline-primary primary-button me-2 btn-export-json">
+                    <i class="fa fa-download" aria-hidden="true"></i> Exporter (JSON)
+                </button>
+            </div>
+        `);
+        
+        // Clear container and append the new buttons
+        $(container).empty().append(nonWikiButtonsDiv);
+        
+        // Attach event handlers
+        nonWikiButtonsDiv.find('.btn-import-json').on('click', function(e) {
+            e.preventDefault();
+            self.importFromJsonFile();
+        });
+        
+        nonWikiButtonsDiv.find('.btn-import-test').on('click', function(e) {
+            e.preventDefault();
+            self.importFromTestJson();
+        });
+        
+        nonWikiButtonsDiv.find('.btn-export-json').on('click', function(e) {
+            e.preventDefault();
+            self.doExportToJsonFile();
+        });
+        
+        // Add wipe button
+        this.addWipeButton();
+    }
+
+    /**
+     * Add the wipe button dynamically to the toolbar
+     */
+    addWipeButton() {
+        const self = this;
+        const container = '#toolbar-buttons-container';
+        
+        const wipeButton = $(`
+            <button type="button" id="wipe-button" class="btn btn-outline-primary primary-button">
+                <i class="fa fa-trash" aria-hidden="true"></i> Tout effacer
+            </button>
+        `);
+        
+        $(container).append(wipeButton);
+        
+        wipeButton.on('click', function(e) {
+            e.preventDefault();
+            self.wipe();
+        });
+    }
+
+    /**
+     * Export crops to JSON file
+     */
+    doExportToJsonFile() {
+        let jsonName = this.tikaeditorInstance.system.title.replace(/\s+/g, '-').toLowerCase() + ".json";
+        this.exportToJsonFile(this.tikaeditorInstance.system, jsonName);
+    }
+
+    /**
+     * Export data to JSON file
+     */
+    exportToJsonFile(data, fileName = 'export-itk.json') {
+        const jsonData = JSON.stringify(data, null, 2);
+        const blob = new Blob([jsonData], { type: 'application/json' });
+        const url = URL.createObjectURL(blob);
+
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = fileName;
+        a.click();
+
+        URL.revokeObjectURL(url);
+    }
+
+    /**
+     * Import from JSON file with confirmation
+     */
+    importFromJsonFile() {
+        this.showConfirmationModal(() => {
+            this.openFileInput();
+        });
+    }
+
+    /**
+     * Import from test JSON with confirmation
+     */
+    importFromTestJson() {
+        this.showConfirmationModal(() => {
+            this.importTestJSON();
+        });
+    }
+
+    /**
+     * Load and import test JSON file
+     */
+    importTestJSON() {
+        const self = this;
+
+        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();
+                });
+                self.tikaeditorInstance.reloadCropsFromJson(data);
+            })
+            .catch(error => {
+                console.error("Impossible de charger le JSON :", error);
+            });
+    }
+
+    /**
+     * Wipe/reset all crops data
+     */
+    wipe() {
+        const self = this;
+
+        const DEFAULT_TITLE = "Nouvel itinéraire technique";
+        this.showConfirmationModal(() => {
+            let crops = {
+                "title": DEFAULT_TITLE,
+                "options": {
+                    "view": "horizontal",
+                    "show_transcript": true,
+                    "title_top_interventions": "Contrôle adventices",
+                    "title_bottom_interventions": "Autres interventions",
+                    "title_steps": "Étapes de la rotation dans la parcelle",
+                },
+                "steps": []
+            };
+
+            self.tikaeditorInstance.reloadCropsFromJson(crops);
+        });
+    }
+
+    /**
+     * Open file input dialog for JSON import
+     */
+    openFileInput() {
+        const self = this;
+        const input = document.createElement('input');
+        input.type = 'file';
+        input.accept = '.json';
+
+        input.addEventListener('change', (event) => {
+            const file = event.target.files[0];
+            if (file) {
+                const reader = new FileReader();
+                reader.onload = () => {
+                    try {
+                        const jsonData = JSON.parse(reader.result);
+                        jsonData.steps.forEach(step => {
+                            let sm = new StepModel(step);
+                            sm.setAsEdited();
+                        });
+                        self.tikaeditorInstance.reloadCropsFromJson(jsonData);
+                    } catch (error) {
+                        console.error("Error parsing JSON file:", error);
+                        this.showJsonErrorModal(error.message);
+                    }
+                };
+                reader.readAsText(file);
+            }
+        });
+
+        input.click();
+    }
+
+    /**
+     * Show JSON error modal
+     */
+    showJsonErrorModal(errorMessage) {
+        const errorModal = new bootstrap.Modal(document.getElementById('jsonErrorModal'));
+        document.getElementById('jsonErrorMessage').textContent = errorMessage;
+        errorModal.show();
+    }
+
+    /**
+     * Show confirmation modal before potentially destructive operations
+     */
+    showConfirmationModal(onConfirm) {
+        if (this.tikaeditorInstance.system?.steps.length === 0)
+            return onConfirm();
+
+        const confirmationModal = new bootstrap.Modal(document.getElementById('confirmationModal'));
+        const confirmButton = document.getElementById('confirmImport');
+
+        // Avoid multiple event listeners
+        const newConfirmButton = confirmButton.cloneNode(true);
+        confirmButton.replaceWith(newConfirmButton);
+
+        newConfirmButton.addEventListener('click', () => {
+            confirmationModal.hide();
+            onConfirm();
+        });
+
+        confirmationModal.show();
+    }
+}

package/js/editor-loader-itinera.js

@@ -0,0 +1,135 @@
+// Encapsulate the wiki editor functionality
+class ItineraLoader extends DefaultLoader {
+    constructor(tikaeditorInstance = null) {
+        super(tikaeditorInstance);
+
+        // Initialize any properties if needed
+        this.systemID = null;
+    }
+
+    /**
+     * Setup the Itinera buttons dynamically in the toolbar
+     */
+    setupButtons() {
+        const self = this;
+        const container = '#toolbar-buttons-container';
+        
+        // Create the ItineraButtons div structure
+        const itineraButtonsDiv = $(`
+            <div id="ItineraButtons" class="">
+                <button type="button" class="btn btn-outline-primary primary-button btn-save-itinera">
+                    <i class="fa fa-download" aria-hidden="true"></i> Enregistrer dans Itinera
+                </button>
+            </div>
+        `);
+        
+        // Clear container and append the new buttons
+        $(container).empty().append(itineraButtonsDiv);
+        
+        // Attach event handler
+        itineraButtonsDiv.find('.btn-save-itinera').on('click', function(e) {
+            e.preventDefault();
+            self.saveToItinera();
+        });
+        
+        // Don't add wipe button in Itinera mode
+    }
+
+    /**
+     * When the page loads, get the URL paremeter with the target page title we want to edit:
+     * @returns 
+     */
+    loadPageFromURL() {
+        
+        const self = this;
+
+        const urlParams = new URLSearchParams(window.location.search);
+        self.systemID = urlParams.get('itinera');
+
+        if (!self.systemID)
+            return; // No page title provided, we are not in wiki edit mode
+
+        // If a page title is provided, load its content from /api/systems/1
+        fetch(`/api/systems/${encodeURIComponent(self.systemID)}`, {
+            credentials: 'same-origin'
+        })
+        .then(response => {
+            let res = response.json();
+            return res;
+        })
+        .then(data => {
+            if (data.json) {
+                try {
+                    const content = data.json;
+                    content.steps.forEach(step => {
+                        let sm = new StepModel(step)
+                        sm.setAsEdited();
+                    });
+                    
+                    self.tikaeditorInstance.reloadCropsFromJson(content);
+
+                    let codeSnippet = `{{Graphique Triple Performance \n| title=${content.title} \n| json=${self.systemID} \n| type=Rotation }}`;
+                    $('#code-snippet').val(codeSnippet).on('focus', function() {
+                        $(this).select();
+                    });
+                    $('#codeSnippetDiv').show();
+                    
+
+                } 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 {
+                wipe();
+            }
+        });
+    
+    }
+
+    /**
+     * Save a page back to the wiki. The page title must have been set previously.
+     */
+    async saveToItinera() {
+        const self = this;
+
+        if (!self.systemID) {
+            // Error ?
+            return;
+        }
+        
+        // Proceed to save
+        const response = await fetch(`/api/systems/${encodeURIComponent(self.systemID)}`, {
+            method: 'PATCH',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            credentials: 'same-origin',
+            body: JSON.stringify({
+                json: self.tikaeditorInstance.system
+            })
+        });
+
+        if (response.ok) {
+            // Successfully saved - show a toast
+            const toast = $('#liveToast');
+
+            // Update the time and message
+            const now = new Date();
+            const hours = now.getHours().toString().padStart(2, '0');
+            const minutes = now.getMinutes().toString().padStart(2, '0');
+            toast.find('small').text(`${hours}:${minutes}`);
+            toast.find('.toast-body').text('Sauvegardé dans Itinéra !');
+
+            const toastBootstrap = bootstrap.Toast.getOrCreateInstance(toast);
+            toastBootstrap.show();
+            
+        } else {
+            // Error saving
+            const errorModal = new bootstrap.Modal(document.getElementById('saveErrorModal'));
+            errorModal.show();
+        }
+    }
+
+}

package/js/{editor-wiki-editor.js → editor-loader-wiki.js}

@@ -1,10 +1,98 @@
 // Encapsulate the wiki editor functionality
-class WikiEditor {
-    constructor() {
+class WikiLoader extends DefaultLoader {
+    constructor(tikaeditorInstance = null) {
+        super(tikaeditorInstance);
+
         // Initialize any properties if needed
         this.pageTitle = null;
     }
 
+    /**
+     * Setup the Wiki buttons dynamically in the toolbar
+     */
+    setupButtons() {
+        const self = this;
+        const container = '#toolbar-buttons-container';
+        
+        // Create the WikiButtons div structure
+        const wikiButtonsDiv = $(`
+            <div id="WikiButtons" class="">
+                <div class="btn-group me-2" role="group">
+                    <button type="button" class="btn btn-outline-primary primary-button btn-load-wiki">
+                        <i class="fa fa-upload" aria-hidden="true"></i> Charger une rotation
+                    </button>
+                    <button type="button" class="btn btn-outline-primary primary-button dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
+                        <span class="visually-hidden">Autres options de chargement</span>
+                    </button>
+                    <ul class="dropdown-menu">
+                        <li><a class="dropdown-item btn-import-test" href="#"><i class="fa fa-lightbulb-o" aria-hidden="true"></i> Charger un exemple</a></li>
+                        <li><a class="dropdown-item btn-import-json" href="#"><i class="fa fa-upload" aria-hidden="true"></i> Importer (JSON)</a></li>
+                    </ul>
+                </div>
+                <div class="btn-group me-2" role="group">
+                    <button type="button" class="btn btn-outline-primary primary-button btn-save-wiki">
+                        <i class="fa fa-download" aria-hidden="true"></i> Enregistrer dans le wiki
+                    </button>
+                    <button type="button" class="btn btn-outline-primary primary-button dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
+                        <span class="visually-hidden">Autres options d'enregistrement</span>
+                    </button>
+                    <ul class="dropdown-menu">
+                        <li><a class="dropdown-item btn-save-as" href="#"><i class="fa fa-save" aria-hidden="true"></i> Enregistrer sous</a></li>
+                        <li><a class="dropdown-item btn-export-json" href="#"><i class="fa fa-download" aria-hidden="true"></i> Exporter</a></li>
+                    </ul>
+                </div>
+            </div>
+        `);
+        
+        // Clear container and append the new buttons
+        $(container).empty().append(wikiButtonsDiv);
+        
+        // Attach event handlers
+        wikiButtonsDiv.find('.btn-load-wiki').on('click', function(e) {
+            e.preventDefault();
+            self.showConfirmationModal(() => {
+                self.loadFromWiki();
+            });
+        });
+        
+        wikiButtonsDiv.find('.btn-save-wiki').on('click', function(e) {
+            e.preventDefault();
+            self.saveToWiki();
+        });
+        
+        wikiButtonsDiv.find('.btn-save-as').on('click', function(e) {
+            e.preventDefault();
+            self.showSaveAsModal();
+        });
+        
+        wikiButtonsDiv.find('.btn-import-test').on('click', function(e) {
+            e.preventDefault();
+            self.importFromTestJson();
+        });
+        
+        wikiButtonsDiv.find('.btn-import-json').on('click', function(e) {
+            e.preventDefault();
+            self.importFromJsonFile();
+        });
+        
+        wikiButtonsDiv.find('.btn-export-json').on('click', function(e) {
+            e.preventDefault();
+            self.doExportToJsonFile();
+        });
+        
+        // Add wipe button
+        this.addWipeButton();
+
+        // Setup Save As modal event listeners
+        $('#saveAsUseExistingPage').on('change', function() {
+            $('#saveAsPageSelect').prop('disabled', !this.checked);
+        });
+
+        $('#saveAsConfirmBtn').off('click').on('click', function() {
+            self.saveAs();
+        });
+    }
+
     /**
      * When the page loads, get the URL paremeter with the target page title we want to edit:
      * @returns 
@@ -35,14 +123,14 @@ class WikiEditor {
                         let sm = new StepModel(step)
                         sm.setAsEdited();
                     });
-                    reloadCropsFromJson(content);
+                    self.tikaeditorInstance.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');
-                    
+
+                    $('#codeSnippetDiv').show();
 
                 } catch (e) {
                     console.error("Erreur lors de l'analyse du JSON de la page :", e);
@@ -78,7 +166,7 @@ class WikiEditor {
         }
         
         // If a page title is provided, save to that page
-        self.savePageToWiki(self.pageTitle, JSON.stringify(crops, null, 2))
+        self.savePageToWiki(self.pageTitle, JSON.stringify(self.tikaeditorInstance.system, null, 2))
             .then(async () => {
                 alert("Itinéraire technique enregistré avec succès !");
             })
@@ -278,8 +366,8 @@ class WikiEditor {
             
             // Set default filename from title if it's been changed
             const filenameInput = $('#saveAsFilename');
-            const currentTitle = crops.title || '';
-            if (crops.defaultTitle === false) {
+            const currentTitle = self.tikaeditorInstance.system.title || '';
+            if (self.tikaeditorInstance.system.defaultTitle === false) {
                 filenameInput.val(currentTitle);
             } else {
                 filenameInput.val('');
@@ -315,8 +403,8 @@ class WikiEditor {
         // Build the final URL: subpagename/filename.json
         const finalUrl = `${subpageName}/${filename}.json`;
 
-        if (crops.defaultTitle !== false) {
-            crops.title = filename;
+        if (self.tikaeditorInstance.system.defaultTitle !== false) {
+            self.tikaeditorInstance.system.title = filename;
         }
 
         return finalUrl;
@@ -340,7 +428,7 @@ class WikiEditor {
             self.pageTitle = url;
 
             // Save to the wiki first
-            await self.savePageToWiki(self.pageTitle, JSON.stringify(crops, null, 2));
+            await self.savePageToWiki(self.pageTitle, JSON.stringify(self.tikaeditorInstance.system, null, 2));
             
             // Close the modal
             const modal = bootstrap.Modal.getInstance(document.getElementById('saveAsModal'));