@osfarm/itineraire-technique 1.0.0

package/js/editor-attributes.js

@@ -0,0 +1,96 @@
+function addOrUpdateAttributeClickEvent() {
+    let id = getInputValue("attributeId");
+    let key = getInputValue("attributeName");
+    let value = getInputValue("attributeValue");
+
+    if (id != "") {
+        selectedStep.updateAttribute(id, key, value);
+    } else {
+        selectedStep.addAttribute(key, value);
+
+        document.getElementById("newAttributeButton").classList.remove("d-none");
+        getAndCleanElement("newAttributeContainer");
+    }
+
+    refreshAllTables();
+}
+
+function refreshAttributesTable() {
+    let attributesContainer = document.getElementById("attributesContainer");
+    attributesContainer.innerHTML = "";
+
+    if (selectedStep && selectedStep.getStep().attributes) {
+        selectedStep.getStep().attributes.forEach((attribute) => {
+            const rowDiv = createAttributeRow(attribute);
+            attributesContainer.appendChild(rowDiv);
+        });
+    }
+}
+
+function createAttributeRow(attribute) {
+    let rowDiv = document.createElement("div");
+    rowDiv.className = "row mb-2 attribute-row editable-row position-relative";
+
+    let nameValueDiv = createAttributeNameAndValueColumn(attribute);
+    rowDiv.appendChild(nameValueDiv);
+
+    addEditAndRemoveButtons(
+        rowDiv, 
+        attribute.id, 
+        function() {
+            createAttributForm(attribute.id, attribute.name, attribute.value, rowDiv);
+        },
+        function(id) {
+            selectedStep.removeAttribute(id);
+            refreshAllTables();
+        });
+
+    return rowDiv;
+}
+
+function createAttributeNameAndValueColumn(attribute) {
+    let nameValueDiv = document.createElement("div");
+    nameValueDiv.className = "col";
+    nameValueDiv.innerHTML = `<strong>${attribute.name}</strong></br> ${attribute.value}`;
+
+    return nameValueDiv;
+}
+
+function createAttributForm(id, name, value, row) {
+    id = id || "";
+    name = name || "";
+    value = value || "";
+
+    const formContainer = document.createElement("div");
+    formContainer.innerHTML = `
+        <form>
+            <div class="row card-white edit-attribute-view mb-2">
+                <input type="hidden" id="attributeId" value="${id}">
+                <div class="col-12 mb-2">
+                    <label for="attributeName" class="form-label">Nom</label>
+                    <input type="text" id="attributeName" class="form-control" placeholder="Nom" value="${name}">
+                </div>
+                <div class="col-12 mb-2">
+                    <input type="text" id="attributeValue" class="form-control" placeholder="Description" value="${value}">
+                </div>
+                <div class="col-12 mb-2">
+                    <button type="button" onclick="addOrUpdateAttributeClickEvent()"
+                        class="w-100 btn btn-outline-primary primary-button">Valider</button>
+                </div>
+            </div>
+        </form>
+    `;
+
+    if (row) { //we are editing an attribute
+        row.replaceWith(formContainer);
+    } else { //we are adding an attribute
+        document.getElementById("newAttributeContainer").appendChild(formContainer);
+        document.getElementById("newAttributeButton").classList.add("d-none");
+    }
+
+    if (name === "") {
+        document.getElementById("attributeName").focus();
+    } else {
+        document.getElementById("attributeValue").focus();
+    }
+}

package/js/editor-crops.js

@@ -0,0 +1,78 @@
+function addNewStepClickEvent() {
+    createAndSelectEmptyCrop();
+    loadSelectedStepToEditor(selectedStep);
+    displayCropDetailView();
+    refreshAllTables();
+}
+
+function createAndSelectEmptyCrop() {
+    let crop = new StepModel({
+        startDate: getRotationEndDate(),
+    });
+
+    crop.setDurationInMonths(2)
+    crops.steps.push(crop.getStep());
+
+    crop.addAttribute("Pré-semis", "");
+    crop.addAttribute("Travail du sol", "");
+    crop.addAttribute("Type de semoir", " ");
+    crop.addAttribute("Date des semis", "");
+
+    //select last created crop to be editable
+    selectedStep = crop;
+}
+
+function loadSelectedStepToEditor(aStep) {
+    setInputValue("cropName", aStep.getStep().name);
+    setInputValue("cropColor", aStep.getStep().color);
+    setInputValue("cropStartDate", aStep.getStep().startDate.toISOString().split('T')[0]);
+    setInputValue("cropEndDate", aStep.getStep().endDate.toISOString().split('T')[0]);
+    setInputValue("cropDescription", aStep.getStep().description);
+}
+
+function refreshStepsButtonList() {
+    let cropsContainer = $("#cropsContainer");
+    cropsContainer.html('');
+
+    crops.steps.forEach((crop) => {
+        const rowDiv = createCropRow(crop);
+        cropsContainer.append(rowDiv);
+    });
+    
+    cropsContainer.sortable("refresh");
+}
+
+function createCropRow(crop) {
+    let step = new StepModel(crop); // in case crop is a plain object, convert to Crop instance
+
+    let rowDiv = $('<div class="row mb-2 step-row editable-row position-relative" data-id="'+step.getStep().id +'"></div>');
+
+    rowDiv.append($('<div class="col"></div>')
+        .append($('<i class="fa fa-bars drag-handle" aria-hidden="true"></i>'))
+        .append($('<strong>' + step.getStep().name + '</strong>')));
+
+    addEditAndRemoveButtons(rowDiv, 
+        step.getStep().id, 
+        function () {
+            console.log("Selected step:", step.getStep().name);
+            SelectStep(step);
+        },
+        function(id) {
+            crops.steps = crops.steps.filter(function (crop) { return crop.id != id })
+
+            refreshAllTables();
+            displayCropListView();
+        });
+
+    rowDiv.click();
+
+    return rowDiv;
+}
+
+
+function SelectStep(crop) {
+    selectedStep = crop;
+    loadSelectedStepToEditor(selectedStep);
+    displayCropDetailView();
+    refreshAllTables();
+}

package/js/editor-export.js

@@ -0,0 +1,118 @@
+function 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);
+}
+
+function importFromJsonFile() {
+    if (crops.steps && crops.steps.length > 0) {
+        showConfirmationModal(() => {
+            openFileInput();
+        });
+    } else {
+        openFileInput();
+    }
+}
+
+function importFromTestJson() {
+    if (crops.steps && crops.steps.length > 0) {
+        showConfirmationModal(() => {
+            importTestJSON();
+        });
+    } 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);
+    });
+}
+
+function wipe() {
+    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": []
+    };
+
+    if (crops.steps && crops.steps.length > 0) {
+        showConfirmationModal(() => {
+            reloadCropsFromJson(crops);
+        });
+    } else {
+        reloadCropsFromJson(crops);
+    } 
+}
+
+function openFileInput() {
+    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);
+                    reloadCropsFromJson(jsonData);
+                } catch (error) {
+                    console.error("Error parsing JSON file:", error);
+                    showJsonErrorModal(error.message);
+                }
+            };
+            reader.readAsText(file);
+        }
+    });
+
+    input.click();
+}
+
+function showJsonErrorModal(errorMessage) {
+    const errorModal = new bootstrap.Modal(document.getElementById('jsonErrorModal'));
+    document.getElementById('jsonErrorMessage').textContent = errorMessage;
+    errorModal.show();
+}
+
+function showConfirmationModal(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-interventions.js

@@ -0,0 +1,117 @@
+function addInterventionClickEvent() {
+    let id = getInputValue("interventionId");
+    let name = getInputValue("interventionName");
+    let day = getInputValue("interventionDay");
+    let type = getInputValue("interventionType");
+    let description = getInputValue("interventionDescription");
+
+    if (id != "") {
+        selectedStep.updateIntervention(id, day, name, type, description);
+    } else {
+        selectedStep.addIntervention(day, name, type, description);
+
+        document.getElementById("newInterventionButton").classList.remove("d-none");
+        getAndCleanElement("newInterventionContainer");
+    }
+    refreshAllTables();
+}
+
+function refreshInterventionsTable() {
+    let interventionsTopContainer = getAndCleanElement("interventionsTopContainer");
+    let interventionsBottomContainer = getAndCleanElement("interventionsBottomContainer");
+
+    if (selectedStep && selectedStep.getStep().interventions) {
+        selectedStep.getStep().interventions.forEach((intervention) => {
+            const rowDiv = createInterventionRow(intervention);
+
+            if (intervention.type === crops.options.title_top_interventions) {
+                interventionsTopContainer.appendChild(rowDiv);
+            } else {
+                interventionsBottomContainer.appendChild(rowDiv);
+            }
+
+        });
+    }
+}
+
+function createInterventionRow(intervention) {
+    let rowDiv = document.createElement("div");
+    rowDiv.className = "row mb-2 intervention-row editable-row position-relative";
+
+    let nameValueDiv = createInterventionNameAndValueColumn(intervention);
+    rowDiv.appendChild(nameValueDiv);
+
+    addEditAndRemoveButtons(
+        rowDiv,
+        intervention.id,
+        function () {
+            createInterventionForm(intervention.id, intervention.day, intervention.name, intervention.type, intervention.description, rowDiv);
+        },
+        function(id) {
+            selectedStep.removeIntervention(id);
+            refreshAllTables();
+        }
+    );
+
+    return rowDiv;
+}
+
+function createInterventionNameAndValueColumn(intervention) {
+    let nameValueDiv = document.createElement("div");
+    nameValueDiv.className = "col";
+    nameValueDiv.innerHTML = `<strong>${intervention.name}</strong></br> ${intervention.description}`;
+
+    return nameValueDiv;
+}
+
+function createInterventionForm(id, day, name, type, description, row) {
+    id = id || "";
+    day = day || "";
+    name = name || "";
+    type = type || "";
+    description = description || "";
+
+    const formContainer = document.createElement("div");
+    formContainer.innerHTML =
+        `<form id="interventionForm">
+            <div class="row card-white mb-2">
+                <input type="hidden" id="interventionId" value="${id}">
+                <div class="col-12 mb-2">
+                    <label for="interventionName" class="form-label">Nom</label>
+                    <input type="text" id="interventionName" class="form-control" placeholder="Nom" value="${name}">
+                </div>
+                <div class="col-12 mb-2">
+                    <textarea id="interventionDescription" class="form-control"
+                        placeholder="Ajouter une description">${description}</textarea>
+                </div>
+                <div class="col-12 mb-2">
+                    <label for="interventionDay" class="form-label">Quel jour après la plantation ?</label>
+                    <input type="number" id="interventionDay" class="form-control" placeholder="Jour"
+                        value="${day}">
+                </div>
+                <div class="col-12 mb-2">
+                    <select id="interventionType" class="form-select" aria-label="Type">
+                        <option value="intervention_top" 
+                        ${type === "intervention_top" ? "selected" : ""}>${crops.options.title_top_interventions}</option>
+                        <option value="intervention_bottom" 
+                        ${type === "intervention_bottom" ? "selected" : ""}>${crops.options.title_bottom_interventions}</option>
+                    </select>
+                </div>
+
+                <div class="col">
+                    <button type="button" onclick="addInterventionClickEvent()"
+                        class="w-100 btn btn-outline-primary primary-button">Valider</button>
+                </div>
+            </div>
+        </form>
+    `;
+
+    if (row) { //we are editing an intervention
+        row.replaceWith(formContainer);
+    } else { //we are adding an intervention
+        document.getElementById("newInterventionContainer").appendChild(formContainer);
+        document.getElementById("newInterventionButton").classList.add("d-none");
+    }
+
+    $("#interventionName").focus();
+}

package/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "@osfarm/itineraire-technique",
+  "version": "1.0.0",
+  "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"
+  },
+  "devDependencies": {
+    "sass": "^1.85.1"
+  }
+}