@osfarm/itineraire-technique 1.1.4 → 1.1.6

package/js/chart-render.js

@@ -35,14 +35,14 @@ class RotationRenderer {
                     <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>`);        
+                </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>`);        
-            }            
+                </div>`);
+            }
         }
     }
 
@@ -278,6 +278,8 @@ class RotationRenderer {
         let self = this;
         let data = [];
 
+        let bHasSecondaryCrops = steps.some(item => item.secondary_crop);
+
         steps.forEach((item, index) => {
             if (item.name == Number(item.name))
                 item.name = "Etape " + item.name; // Force the item name to be a string
@@ -295,7 +297,9 @@ class RotationRenderer {
                     item.startDate.valueOf(), // Date de début
                     item.endDate.valueOf(), // Date de fin
                     item.name, // Nom
-                    'rotation_item' // Type
+                    'rotation_item', // Type
+                    item.secondary_crop ? true : false,
+                    bHasSecondaryCrops ? true : false
                 ],
                 itemStyle: {
                     color: item.color
@@ -316,7 +320,7 @@ class RotationRenderer {
                             intervention.type == 'intervention_top' ? 'intervention_top' : 'intervention_bottom' // Type
                         ],
                         divId: 'Intervention_' + index + '_' + interventionIndex,
-                        interventionDate: new Date(item.startDate.valueOf()),
+                        interventionDate: new Date(item.startDate.valueOf() + intervention.day * 86400000),
                         interventionDays: intervention.day,
                         itemStyle: {
                             color: item.color
@@ -327,6 +331,55 @@ class RotationRenderer {
             }
         });
 
+        function wrapText(echarts, text, maxWidth, maxHeight) {
+            const words = text.split(' ');
+            let line = '';
+            let lines = [];
+
+            for (let word of words) {
+                const testLine = line + word + ' ';
+                let testWidth = echarts.format.getTextRect(testLine).width;
+                if (testWidth > maxWidth && line !== '') {
+                    lines.push(line);
+                    line = word + ' ';
+                } else {
+                    line = testLine;
+                }
+
+                // Avoid words that are too long
+                testWidth = echarts.format.getTextRect(line).width;
+                while (testWidth > maxWidth) {
+                    line = line.slice(0, -1);
+                    testWidth = echarts.format.getTextRect(line).width;
+                }
+            }
+
+            if (line.length > 0) {
+                lines.push(line);
+            }
+
+            let wrapped = '';
+            let wrappedText = false;
+            lines.forEach(l => {
+                if (wrappedText)
+                    return;
+
+                let test = wrapped + l;
+                if (echarts.format.getTextRect(test).height > maxHeight)
+                {
+                    wrappedText = true;
+                    return;
+                }
+
+                wrapped += l + "\n";
+            });
+            
+            if (wrappedText) {
+                return wrapped.trim() + '...';
+            }
+            
+            return lines.join("\n");
+        }
 
         let maxXPositions = new Map();
 
@@ -337,6 +390,8 @@ class RotationRenderer {
             var end = api.coord([api.value(2), categoryIndex]);
             var name = api.value(3);
             var type = api.value(4);
+            let secondary_crop = api.value(5);
+            let bHasSecondaryCrops = api.value(6);
 
             const x = start[0];
             let y = start[1];
@@ -373,25 +428,45 @@ class RotationRenderer {
                 // params.coordSys.width, // largeur du canva
                 // params.coordSys.height // hauteur du canva
 
-                const height = self.barHeight - 40; // 20 px margin top and bottom
+                let height = self.barHeight - 20; // 20 px margin top and bottom
+                let top = y - height / 2;
+                let textXMargin = 2;
+                let textYMargin = 10;
+
+                if (bHasSecondaryCrops) {
+                    height = self.barHeight - 40; // 20 px margin top and bottom
+                    top = y - height / 2 - 15;
+                    textXMargin = 2;
+                    textYMargin = 10;
+                }
+
+                if (secondary_crop) {
+                    // Move secondary crops a bit down and reduce their size
+                    top = top + height + 5;
+                    height = height / 3;
+                    textXMargin = 5;
+                    textYMargin = 5;
+                }
+
                 const arrowWidth = height / 3;
                 const border = 3;
-                const textMargin = 10;
 
                 var points = [
-                    [x, y - height / 2],
-                    [end[0] - border, y - height / 2],
-                    [end[0] + arrowWidth - border, y],
-                    [end[0] - border, y + height / 2],
-                    [x, y + height / 2],
-                    [x + arrowWidth, y],
+                    [x, top],
+                    [end[0] - border, top],
+                    [end[0] + arrowWidth - border, top + height / 2],
+                    [end[0] - border, top + height],
+                    [x, top + height],
+                    [x + arrowWidth, top + height / 2],
                 ];
 
-                const itemLabelWidth = echarts.format.getTextRect(name).width + textMargin * 2;
+                //const itemLabelWidth = echarts.format.getTextRect(name).width + textMargin * 2;
                 const itemWidth = end[0] - x;
 
-                if (itemLabelWidth > itemWidth)
-                    name = ''; // Hide the label as we won't have the room to show it
+                // if (itemLabelWidth > itemWidth)
+                //     name = ''; // Hide the label as we won't have the room to show it
+
+                name = wrapText(echarts, name, itemWidth - arrowWidth, height);
 
                 // See this for clip regions : https://stackoverflow.com/questions/71735038/setting-border-and-label-in-custom-apache-echarts
                 // https://stackoverflow.com/questions/73653691/how-to-draw-a-custom-triangle-in-renderitem-in-apache-echarts
@@ -413,7 +488,7 @@ class RotationRenderer {
                             },
                         },
                         textConfig: {
-                            position: [arrowWidth + textMargin, height / 2 - 5]
+                            position: [arrowWidth + textXMargin, textYMargin]
                         },
                         textContent: {
                             style: {
@@ -430,7 +505,6 @@ class RotationRenderer {
             if (type == 'intervention_bottom' || type == 'intervention_top') {
 
                 const height = 20;
-                const border = 3;
                 const margin = 10;
                 const textMargin = 5;
 
@@ -478,8 +552,8 @@ class RotationRenderer {
 
                 const arrowWidth = 3;
 
-                let arrowTop = y + 60;
-                let arrowBottom = y - 60;
+                let arrowTop = y + 55;
+                let arrowBottom = y - 55;
 
                 y = margin + y + trackToUse * (height + margin) - (self.barHeight / 2);
 
@@ -542,28 +616,28 @@ class RotationRenderer {
         }
 
         return [
-                {
-                    type: 'custom',
-                    renderItem: renderItem,
-                    clip: true,
-                    itemStyle: {
-                        opacity: 0.8
-                    },
-                    encode: {
-                        x: [1, 2],
-                        y: 0
-                    },
-                    data: data
-                }
-            ];
+            {
+                type: 'custom',
+                renderItem: renderItem,
+                clip: true,
+                itemStyle: {
+                    opacity: 0.8
+                },
+                encode: {
+                    x: [1, 2],
+                    y: 0
+                },
+                data: data
+            }
+        ];
     }
 
     getCategoriesLabels() {
         let self = this;
 
         let categories = [self.chartOptions.title_bottom_interventions ?? '',
-                          self.chartOptions.title_steps ?? '',
-                          self.chartOptions.title_top_interventions ?? ''];
+        self.chartOptions.title_steps ?? '',
+        self.chartOptions.title_top_interventions ?? ''];
 
         // simulate some wrapping of the category labels
         categories = categories.map((item) => {
@@ -584,7 +658,7 @@ class RotationRenderer {
             if (item.interventions?.length > 0 || item.attributes?.length > 0)
                 visibility = "visible";
 
-            let collapseButton = '<div class="collapse-button '+visibility+ '"><i class="fa fa-chevron-down" aria-hidden="true"></i></div>';
+            let collapseButton = '<div class="collapse-button ' + visibility + '"><i class="fa fa-chevron-down" aria-hidden="true"></i></div>';
 
             let start = item.startDate.toLocaleDateString('fr-FR', { day: 'numeric', month: 'short', year: '2-digit' });
             let end = item.endDate.toLocaleDateString('fr-FR', { day: 'numeric', month: 'short', year: '2-digit' });
@@ -595,7 +669,7 @@ class RotationRenderer {
                 + collapseButton
                 + '<div class="step_dates">' + dates + '</div>'
                 + '<h4 class="">' + item.name + '<i class="fa fa-pencil step-edit" aria-hidden="true"></i></h4>'
-                + '</div><p class="step_description clearfix">' + (item.description ?? '') + '</p>'
+                + '</div><p class="step_description clearfix">' + self.getHTMLFormatedDescription(item.description) + '</p>'
                 + '<div class="details">'
                 + (item.attributes?.length > 0 ? item.attributes.map((attribute) => { return '<p><dt>' + attribute.name + '</dt><dd>' + attribute.value + '</dd></p>' }).join('') : '');
 
@@ -605,9 +679,9 @@ class RotationRenderer {
                     let intDate = new Date(item.startDate.valueOf() + intervention.day * 86400000).toLocaleDateString('fr-FR', { day: 'numeric', month: 'short', year: 'numeric' });
                     let days = intervention.day;
                     if (days >= 0)
-                        intDate += ' (J+' + days + ')';
+                        intDate += ' (J+' + (days == 0 ? '0' : days) + ')';
                     else
-                        intDate += ' (J' + days + ')';
+                        intDate += ' (J-' + days + ')';
 
                     let title = intervention.name;
 
@@ -615,8 +689,8 @@ class RotationRenderer {
                         title = title + '⚠️';
 
                     html += '<div class="Intervention_' + index + '_' + interventionIndex + ' intervention"><span class="intervention_title">' + title + '</span>'
-                          + '<span class="intervention_date badge rounded-pill">' + intDate + '</span>'
-                          + '<div class="intervention_description">' + intervention.description + '</div></div>';
+                        + '<span class="intervention_date badge rounded-pill">' + intDate + '</span>'
+                        + '<div class="intervention_description">' + intervention.description + '</div></div>';
                 });
             }
 
@@ -665,16 +739,16 @@ class RotationRenderer {
             },
             data: []
         };
-        
+
         let lastDayOfPreviousStep = null;
 
         steps.forEach((item, index) => {
-            
+
             if (lastDayOfPreviousStep) {
                 // If there's a gap between the end of the previous step and the start of the new step, we add an dummy pie item:
                 let days = Math.round((item.startDate - lastDayOfPreviousStep) / (1000 * 60 * 60 * 24));
                 if (days > 0) {
-                    
+
                     let pieItem = {
                         'name': '',
                         'value': days,
@@ -684,18 +758,18 @@ class RotationRenderer {
                         'endDate': new Date(item.startDate.valueOf()), // Date de fin
                         'duration': Math.round(days / 30),
                         'description': '',
-                        'emphasis': {'disabled': true},
-                        'select': {'disabled': true},
-                        'tooltip': {'show': false},
+                        'emphasis': { 'disabled': true },
+                        'select': { 'disabled': true },
+                        'tooltip': { 'show': false },
                         'itemStyle': {
                             'color': '#FFFFFF'
-                        }                        
+                        }
                     };
 
                     crops.data.push(pieItem);
                 }
             }
-                
+
 
             let days = Math.round((item.endDate - item.startDate) / (1000 * 60 * 60 * 24));
             lastDayOfPreviousStep = new Date(item.endDate.valueOf());
@@ -762,18 +836,18 @@ class RotationRenderer {
             const monthName = startMonth.toLocaleDateString(undefined, { month: 'short' });
             const year = startMonth.getFullYear();
 
-            months.data.push({ 
-                'name': monthName, 
+            months.data.push({
+                'name': monthName,
                 'value': 1,
                 'itemStyle': {
                     'color': monthsColorScale[startMonth.getMonth()]
-                } 
+                }
             });
 
             let currentMonthsPerYear = monthsPerYear.get(year);
             if (currentMonthsPerYear == undefined)
                 currentMonthsPerYear = 0;
-                monthsPerYear.set(year, ++currentMonthsPerYear);
+            monthsPerYear.set(year, ++currentMonthsPerYear);
 
             // increment the current month
             startMonth.setMonth(startMonth.getMonth() + 1);
@@ -802,9 +876,9 @@ class RotationRenderer {
         };
 
         monthsPerYear.forEach((nbMonths, year) => {
-            years.data.push({ 
-                'name': year, 
-                'value': nbMonths 
+            years.data.push({
+                'name': year,
+                'value': nbMonths
             });
         });
 
@@ -845,60 +919,60 @@ 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' });
-                        let end = params.data.endDate.toLocaleDateString('fr-FR', { day: 'numeric', month: 'short', year: '2-digit' });
-
-                        return params.marker + params.name + ' : ' + params.data.duration + ' mois (' + start + ' ➜ ' + end + ')<br>' + params.data.description;
-                    }
-                    else {
-                        let interventionDate = params.data.interventionDate;
-                        const days = params.data.interventionDays;
-                        let dateString = interventionDate.toLocaleDateString('fr-FR', { day: 'numeric', month: 'short' });
+            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' });
+                    let end = params.data.endDate.toLocaleDateString('fr-FR', { day: 'numeric', month: 'short', year: '2-digit' });
+
+                    return params.marker + params.name + ' : ' + params.data.duration + ' mois (' + start + ' ➜ ' + end + ')<br>' + params.data.description;
+                }
+                else {
+                    let interventionDate = params.data.interventionDate;
+                    const days = params.data.interventionDays;
+                    let dateString = interventionDate.toLocaleDateString('fr-FR', { day: 'numeric', month: 'short' });
 
-                        if (days >= 0)
-                            dateString += ' (J+' + days + ')';
-                        else
-                            dateString += ' (J' + days + ')';
+                    if (days >= 0)
+                        dateString += ' (J+' + (days == 0 ? '0' : days) + ')';
+                    else
+                        dateString += ' (J-' + days + ')';
 
-                        return params.marker + params.name + ' - ' + dateString + '<br>' + params.data.description;
-                    }
+                    return params.marker + params.name + ' - ' + dateString + '<br>' + params.data.description;
                 }
-            };
+            }
+        };
 
         option.toolbox = {
-                "itemSize": 25,
-                "iconStyle": {
-                    "borderColor": "#AAA",
-                    "borderWidth": 1
+            "itemSize": 25,
+            "iconStyle": {
+                "borderColor": "#AAA",
+                "borderWidth": 1
+            },
+            "feature": {
+                "myTool1": {
+                    "show": true,
+                    "title": 'Rotation',
+                    "icon": 'path://M18.15,12.99c-.06-.07-.14-.13-.23-.17l-.38-.15c.33-.93.51-1.92.51-2.96,0-3-1.49-5.65-3.77-7.26l-3.03,2.72c1.72.79,2.91,2.53,2.91,4.54,0,.54-.09,1.07-.25,1.56l-.44-.17c-.3-.12-.64.03-.76.33-.04.1-.05.21-.03.31l.79,4.82c.06.32.36.53.68.47.1-.02.19-.06.27-.13l3.66-3.1c.25-.21.28-.58.07-.82ZM6.94,5.24c.46-.23.97-.39,1.5-.47l.13.59c.07.32.38.52.69.45.1-.02.2-.07.28-.14l3.59-3.31c.23-.22.24-.59.02-.83-.07-.07-.16-.13-.26-.16L8.3.02c-.31-.09-.63.09-.73.39-.03.09-.03.19-.01.29l.06.27c-1.12.2-2.16.6-3.1,1.17l2.41,3.09ZM5.88,5.96l-2.39-3.06c-.98.82-1.79,1.84-2.34,3.01l3.62,1.44c.29-.53.66-1,1.11-1.39ZM4.17,9.72c0-.41.05-.81.14-1.19l-3.63-1.44c-.18.57-.3,1.16-.35,1.77l3.84,1.1c0-.08,0-.16,0-.24ZM9.17,14.72c-1.59,0-3-.74-3.92-1.9l.42-.38c.24-.22.26-.59.04-.83-.07-.08-.16-.14-.26-.17l-4.66-1.47c-.31-.09-.64.08-.73.39-.03.1-.03.2,0,.3l1.12,4.66c.07.31.39.51.7.43.09-.02.18-.07.25-.13l.23-.21c1.63,1.94,4.07,3.18,6.8,3.18,1.3,0,2.54-.28,3.66-.79l-.8-3.99c-.81.56-1.79.9-2.86.9Z',
+                    onclick: function () {
+                        self.initialLayout = 'donut';
+                        self.renderChart();
+                    }
                 },
-                "feature": {
-                    "myTool1": {
-                        "show": true,
-                        "title": 'Rotation',
-                        "icon": 'path://M18.15,12.99c-.06-.07-.14-.13-.23-.17l-.38-.15c.33-.93.51-1.92.51-2.96,0-3-1.49-5.65-3.77-7.26l-3.03,2.72c1.72.79,2.91,2.53,2.91,4.54,0,.54-.09,1.07-.25,1.56l-.44-.17c-.3-.12-.64.03-.76.33-.04.1-.05.21-.03.31l.79,4.82c.06.32.36.53.68.47.1-.02.19-.06.27-.13l3.66-3.1c.25-.21.28-.58.07-.82ZM6.94,5.24c.46-.23.97-.39,1.5-.47l.13.59c.07.32.38.52.69.45.1-.02.2-.07.28-.14l3.59-3.31c.23-.22.24-.59.02-.83-.07-.07-.16-.13-.26-.16L8.3.02c-.31-.09-.63.09-.73.39-.03.09-.03.19-.01.29l.06.27c-1.12.2-2.16.6-3.1,1.17l2.41,3.09ZM5.88,5.96l-2.39-3.06c-.98.82-1.79,1.84-2.34,3.01l3.62,1.44c.29-.53.66-1,1.11-1.39ZM4.17,9.72c0-.41.05-.81.14-1.19l-3.63-1.44c-.18.57-.3,1.16-.35,1.77l3.84,1.1c0-.08,0-.16,0-.24ZM9.17,14.72c-1.59,0-3-.74-3.92-1.9l.42-.38c.24-.22.26-.59.04-.83-.07-.08-.16-.14-.26-.17l-4.66-1.47c-.31-.09-.64.08-.73.39-.03.1-.03.2,0,.3l1.12,4.66c.07.31.39.51.7.43.09-.02.18-.07.25-.13l.23-.21c1.63,1.94,4.07,3.18,6.8,3.18,1.3,0,2.54-.28,3.66-.79l-.8-3.99c-.81.56-1.79.9-2.86.9Z',
-                        onclick: function (){
-                            self.initialLayout = 'donut';
-                            self.renderChart();
-                        }
-                    },
-                    "myTool2": {
-                        "show": true,
-                        "title": 'Frise',
-                        "icon": 'path://M4.63,0H0v10.01h4.97c.07,0,.13-.05.19-.14l2.61-4.14c.17-.28.23-.89.12-1.35-.03-.15-.08-.27-.13-.35L5.16.12c-.05-.08-.11-.12-.17-.12h-.37ZM11.9,4.38c-.03-.15-.08-.27-.13-.35L9.17.12c-.05-.08-.11-.12-.17-.12h-.37s-2.26,0-2.26,0v.03s.06.05.08.09l2.6,3.9c.06.08.1.21.13.35.1.47.05,1.07-.12,1.35l-2.61,4.14s-.05.07-.08.09v.04h2.6c.07,0,.13-.05.19-.14l2.61-4.14c.17-.28.23-.89.12-1.35ZM18.28,4.38c-.03-.15-.08-.27-.13-.35L15.55.12c-.05-.08-.11-.12-.17-.12h-.37s-4.63,0-4.63,0v.03s.06.05.08.09l2.6,3.9c.06.08.1.21.13.35.1.47.05,1.07-.12,1.35l-2.61,4.14s-.05.07-.08.09v.04h4.97c.07,0,.13-.05.19-.14l2.61-4.14c.17-.28.23-.89.12-1.35Z',
-                        onclick: function (){
-                            self.initialLayout = 'horizontal';
-                            self.renderChart();
-                        }
-                    },
-                    "saveAsImage": {
-                        'excludeComponents': ["dataZoom", "toolbox"]
+                "myTool2": {
+                    "show": true,
+                    "title": 'Frise',
+                    "icon": 'path://M4.63,0H0v10.01h4.97c.07,0,.13-.05.19-.14l2.61-4.14c.17-.28.23-.89.12-1.35-.03-.15-.08-.27-.13-.35L5.16.12c-.05-.08-.11-.12-.17-.12h-.37ZM11.9,4.38c-.03-.15-.08-.27-.13-.35L9.17.12c-.05-.08-.11-.12-.17-.12h-.37s-2.26,0-2.26,0v.03s.06.05.08.09l2.6,3.9c.06.08.1.21.13.35.1.47.05,1.07-.12,1.35l-2.61,4.14s-.05.07-.08.09v.04h2.6c.07,0,.13-.05.19-.14l2.61-4.14c.17-.28.23-.89.12-1.35ZM18.28,4.38c-.03-.15-.08-.27-.13-.35L15.55.12c-.05-.08-.11-.12-.17-.12h-.37s-4.63,0-4.63,0v.03s.06.05.08.09l2.6,3.9c.06.08.1.21.13.35.1.47.05,1.07-.12,1.35l-2.61,4.14s-.05.07-.08.09v.04h4.97c.07,0,.13-.05.19-.14l2.61-4.14c.17-.28.23-.89.12-1.35Z',
+                    onclick: function () {
+                        self.initialLayout = 'horizontal';
+                        self.renderChart();
                     }
+                },
+                "saveAsImage": {
+                    'excludeComponents': ["dataZoom", "toolbox"]
                 }
-            };
+            }
+        };
 
         return option;
     }

package/js/editor-crops.js

@@ -28,6 +28,7 @@ function loadSelectedStepToEditor(aStep) {
     setInputValue("cropStartDate", aStep.getStep().startDate.toISOString().split('T')[0]);
     setInputValue("cropEndDate", aStep.getStep().endDate.toISOString().split('T')[0]);
     setInputValue("cropDescription", aStep.getStep().description);
+    document.getElementById("cropSecondary").checked = aStep.getStep().secondary_crop || false;
 }
 
 function refreshStepsButtonList() {

package/js/editor-interventions.js

@@ -71,6 +71,18 @@ function createInterventionForm(id, day, name, type, description, row) {
     type = type || "";
     description = description || "";
 
+    // Calculate absolute date from relative day
+    let absoluteDate = "";
+    if (day == "")
+        day = 0;
+    
+    if (selectedStep && selectedStep.getStep().startDate) {
+        const stepStartDate = new Date(selectedStep.getStep().startDate);
+        const interventionDate = new Date(stepStartDate);
+        interventionDate.setDate(stepStartDate.getDate() + parseInt(day));
+        absoluteDate = interventionDate.toISOString().split('T')[0];
+    }
+
     const formContainer = document.createElement("div");
     formContainer.innerHTML =
         `<form id="interventionForm">
@@ -84,11 +96,15 @@ function createInterventionForm(id, day, name, type, description, row) {
                     <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"
+                <div class="col-4 mb-2">
+                    <label for="interventionDay" class="form-label">Jour relatif</label>
+                    <input type="number" id="interventionDay" class="form-control text-right" placeholder="Jour"
                         value="${day}">
                 </div>
+                <div class="col-8 mb-2">
+                    <label for="interventionDate" class="form-label">Date absolue</label>
+                    <input type="date" id="interventionDate" class="form-control" value="${absoluteDate}">
+                </div>
                 <div class="col-12 mb-2">
                     <select id="interventionType" class="form-select" aria-label="Type">
                         <option value="intervention_top" 
@@ -113,5 +129,49 @@ function createInterventionForm(id, day, name, type, description, row) {
         document.getElementById("newInterventionButton").classList.add("d-none");
     }
 
+    // Add event listeners for date synchronization
+    setupInterventionDateListeners();
+
     $("#interventionName").focus();
+}
+
+function setupInterventionDateListeners() {
+    // When relative day changes, update absolute date
+    $("#interventionDay").on("input change", function() {
+        updateAbsoluteDateFromRelative();
+    });
+
+    // When absolute date changes, update relative day
+    $("#interventionDate").on("change", function() {
+        updateRelativeDayFromAbsolute();
+    });
+}
+
+function updateAbsoluteDateFromRelative() {
+    const relativeDay = $("#interventionDay").val();
+    if (relativeDay == "")
+        relativeDay = 0;
+
+    if (selectedStep && selectedStep.getStep().startDate) {
+        const stepStartDate = new Date(selectedStep.getStep().startDate);
+        const interventionDate = new Date(stepStartDate);
+        interventionDate.setDate(stepStartDate.getDate() + parseInt(relativeDay));
+        
+        const absoluteDateStr = interventionDate.toISOString().split('T')[0];
+        $("#interventionDate").val(absoluteDateStr);
+    }
+}
+
+function updateRelativeDayFromAbsolute() {
+    const absoluteDate = $("#interventionDate").val();
+    if (absoluteDate !== "" && selectedStep && selectedStep.getStep().startDate) {
+        const stepStartDate = new Date(selectedStep.getStep().startDate);
+        const interventionDate = new Date(absoluteDate);
+        
+        // Calculate difference in days
+        const timeDiff = interventionDate.getTime() - stepStartDate.getTime();
+        const dayDiff = Math.round(timeDiff / (1000 * 60 * 60 * 24));
+        
+        $("#interventionDay").val(dayDiff);
+    }
 }

package/package.json

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

package/scss/styles-editor.scss

@@ -74,6 +74,10 @@ $header-height: 3rem;
     }
 }
 
+.intervention-row {
+    background: #e0e0e0;
+}
+
 .primary-button {
     color: $button-text-color;
     background-color: $button-color;
@@ -103,4 +107,10 @@ $header-height: 3rem;
     margin-right: 10px;
     vertical-align: middle;
     cursor: grab;
+}
+
+.form-control {
+    &.text-right {
+        text-align: right;
+    }
 }