@osfarm/itineraire-technique 1.0.2 → 1.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/css/styles-rendering.css +1 -1
  2. package/css/styles-rendering.css.map +1 -1
  3. package/js/chart-render.js +25 -17
  4. package/package.json +1 -1
  5. package/scss/styles-rendering.scss +124 -75
  6. package/visualisateur.html +3 -1
package/css/styles-rendering.css CHANGED
@@ -1 +1 @@
1
- div.rotation_item{background-color:#f8fafc;border-left:#fff 14px solid;border-radius:7px;padding:13px;margin:12px 0;overflow-x:hidden}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.rotation_item h4{margin-bottom:0}div.rotation_item div.step_dates{font-size:11px;float:right;background-color:#cdcccc;color:#fff;margin-right:45px;padding:2px 5px;border-radius:5px;margin-top:7px}div.rotation_item div.collapse-button{float:right;border-radius:50%;width:30px;height:30px;text-align:center;padding-top:5px;cursor:pointer;background:#dfe6f7;color:#7a8bad;transition:transform .3s ease-in-out;margin-top:-26px}div.rotation_item.show-all div.collapse-button{transform:rotate(180deg)}div.rotation_item.show-all div.details{max-height:10000px}div.rotation_item div.details{max-height:0px;overflow:hidden;transition:max-height .3s ease-in-out}div.rotation_item div.details div.intervention{background-color:#fff;border-radius:5px;margin-bottom:11px;padding:13px;cursor:pointer}div.rotation_item div.details div.intervention span.intervention_title{font-weight:bold}div.rotation_item div.details div.intervention span.intervention_date{color:#707070;background-color:#f0f3f5;float:right}div.rotation_item div.details div.intervention div.intervention_description{margin-top:5px}div.rotation_item .step-edit{display:none}.charts{width:100%;height:500px;display:inline-block}.transcript{font-size:80%;width:100%;max-height:450px;overflow-y:scroll;scroll-behavior:smooth;padding:3px}/*# sourceMappingURL=styles-rendering.css.map */
1
+ div.mainITKContainer{container-type:inline-size;container-name:myparent}div.mainITKContainer .left-transcript{display:none;width:50%}div.mainITKContainer .chart-div{width:100%}div.mainITKContainer .bottom-transcript{display:block}@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:13px;margin:12px 0;overflow-x:hidden;position:relative}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 h4{margin-bottom:0}div.mainITKContainer div.rotation_item div.step_dates{font-size:11px;background-color:#cdcccc;color:#fff;margin:5px;padding:2px 5px;border-radius:5px;height:20px;right:36px;top:13px;position:absolute}div.mainITKContainer div.rotation_item 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;transition:transform .3s ease-in-out}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 CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../scss/styles-rendering.scss"],"names":[],"mappings":"AAAA,kBACI,yBACA,4BACA,kBACA,aACA,cACA,kBAEA,8BACI,8HAEA,yBAGJ,qBACI,gBAGJ,iCACI,eACA,YACA,yBACA,WACA,kBACA,gBACA,kBACA,eAGJ,sCACI,YACA,kBACA,WACA,YACA,kBACA,gBACA,eACA,mBACA,cACA,qCACA,iBAIA,+CACI,yBAGJ,uCACI,mBAKR,8BACI,eACA,gBACA,sCAEA,+CACI,sBACA,kBACA,mBACA,aACA,eAEA,uEACI,iBAGJ,sEACI,cACA,yBACA,YAGJ,4EACI,eAKZ,6BACI,aAIR,QACI,WACA,aACA,qBAGJ,YACI,cACA,WACA,iBACA,kBACA,uBACA","file":"styles-rendering.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../scss/styles-rendering.scss"],"names":[],"mappings":"AAAA,qBACI,2BACA,wBAEA,sCACI,aACA,UAGJ,gCACI,WAGJ,wCACI,cAGJ,uCACI,sCACI,cAGJ,gCACI,UAGJ,wCACI,cAIR,wCACI,sCACI,cACA,UAGJ,gCACI,UAGJ,wCACI,cAIR,uCACI,yBACA,4BACA,kBACA,aACA,cACA,kBACA,kBAEA,mDACI,8HAEA,yBAGJ,0CACI,gBAGJ,sDACI,eACA,yBACA,WACA,WACA,gBACA,kBACA,YACA,WACA,SACA,kBAGJ,2DACI,kBACA,WACA,YACA,kBACA,gBACA,mBACA,eACA,mBACA,cACA,qCAIA,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/js/chart-render.js CHANGED
@@ -29,10 +29,10 @@ class RotationRenderer {
29
29
 
30
30
  this.itk_container = $("#" + divID).css({ 'width': '100%' });
31
31
 
32
- this.itk_container.append(`<div class="row">
33
- <div class="col d-none d-lg-block col-lg-4"><div class="transcript"></div></div>
34
- <div class="col col-12 col-lg-8"><div class="charts"></div></div>
35
- <div class="col col-12 d-block d-lg-none"><div class="transcript"></div></div>
32
+ this.itk_container.append(`<div class="row mainITKContainer">
33
+ <div class="col-auto left-transcript"><div class="transcript"></div></div>
34
+ <div class="col col-auto chart-div"><div class="charts"></div></div>
35
+ <div class="col col-12 bottom-transcript"><div class="transcript"></div></div>
36
36
  </div>`);
37
37
  }
38
38
 
@@ -62,7 +62,7 @@ class RotationRenderer {
62
62
  let self = this;
63
63
 
64
64
  // Initialize the echarts instance based on the prepared dom
65
- self.chart = echarts.init(this.itk_container.find('.charts')[0]);
65
+ self.chart = echarts.init(self.itk_container.find('.charts')[0]);
66
66
 
67
67
  self.renderChart();
68
68
 
@@ -75,12 +75,12 @@ class RotationRenderer {
75
75
  });
76
76
 
77
77
  this.itk_container.find('.transcript .rotation_item').on("mouseover", function () {
78
- self.highlightItem(this.id);
78
+ self.highlightItem(self.getElementID(this));
79
79
  });
80
80
 
81
81
  // Add a click event on the transcript to scroll to the corresponding item in the chart
82
82
  this.itk_container.find('.transcript .intervention').on('mouseover', function (e) {
83
- self.highlightItem(this.id);
83
+ self.highlightItem(self.getElementID(this));
84
84
  e.stopPropagation();
85
85
  });
86
86
  }
@@ -98,6 +98,10 @@ class RotationRenderer {
98
98
  }
99
99
  }
100
100
 
101
+ getElementID(element) {
102
+ return element.classList.values().find(item => item.match(/Intervention_[0-9]+_[0-9]+|Step_[0-9]+/));
103
+ }
104
+
101
105
  renderChart() {
102
106
  let self = this;
103
107
  let option;
@@ -126,9 +130,9 @@ class RotationRenderer {
126
130
  if (!params.data.divId)
127
131
  return;
128
132
 
129
- let element = $("#" + params.data.divId + " h4");
133
+ let element = self.getVisibleTranscriptDiv().find('.' + params.data.divId + " h4");
130
134
  if (element.length == 0)
131
- element = $("#" + params.data.divId);
135
+ element = self.getVisibleTranscriptDiv().find('.' + params.data.divId);
132
136
 
133
137
  self.noFocusUpdate = true;
134
138
 
@@ -138,12 +142,16 @@ class RotationRenderer {
138
142
 
139
143
  element[0].scrollIntoView({ block: "start" });
140
144
 
141
- $("#" + params.data.divId).toggleClass("show-all");
145
+ self.getVisibleTranscriptDiv().find('.' + params.data.divId).closest('.rotation_item').addClass("show-all");
142
146
 
143
147
  self.highlightItem(params.data.divId);
144
148
  });
145
149
  }
146
150
 
151
+ getVisibleTranscriptDiv() {
152
+ return this.itk_container.find('.transcript:visible');
153
+ }
154
+
147
155
  highlightItem(divID) {
148
156
  let self = this;
149
157
 
@@ -160,7 +168,7 @@ class RotationRenderer {
160
168
 
161
169
  $(".rotation_item").removeClass('highlighted');
162
170
  $(".intervention").removeClass('highlighted');
163
- $('#' + divID).addClass('highlighted');
171
+ self.itk_container.find('.' + divID).addClass('highlighted');
164
172
  }
165
173
 
166
174
  getStepsOption() {
@@ -563,16 +571,16 @@ class RotationRenderer {
563
571
 
564
572
  let collapseButton = '';
565
573
  if (item.interventions?.length > 0 || item.attributes?.length > 0)
566
- collapseButton = '<div class="collapse-button"><i class="fa fa-chevron-down" aria-hidden="true"></i></div>';
574
+ collapseButton = '<div class="collapse-button col-auto"><i class="fa fa-chevron-down" aria-hidden="true"></i></div>';
567
575
 
568
576
  let start = item.startDate.toLocaleDateString('fr-FR', { day: 'numeric', month: 'short', year: '2-digit' });
569
577
  let end = item.endDate.toLocaleDateString('fr-FR', { day: 'numeric', month: 'short', year: '2-digit' });
570
578
 
571
579
  let dates = '<b>' + item.duration + ' mois</b> (' + start + ' ➜ ' + end + ')';
572
580
 
573
- html += '<div id="Step_' + index + '" class="rotation_item" style="border-color: ' + item.color + '">'
574
- + '<div class="step_dates">' + dates + '</div>'
575
- + '<h4>' + item.name + '<i class="fa fa-pencil step-edit" aria-hidden="true"></i></h4>'
581
+ html += '<div class="Step_' + index + ' rotation_item text-start" style="border-color: ' + item.color + '"><div class="row">'
582
+ + '<h4 class="col">' + item.name + '<i class="fa fa-pencil step-edit" aria-hidden="true"></i></h4>'
583
+ + '<div class="step_dates col-auto">' + dates + '</div>'
576
584
  + collapseButton
577
585
  + '<p class="step_description">' + (item.description ?? '') + '</p>'
578
586
  + '<div class="details">'
@@ -593,13 +601,13 @@ class RotationRenderer {
593
601
  if (intervention.important === true)
594
602
  title = title + '⚠️';
595
603
 
596
- html += '<div id="Intervention_' + index + '_' + interventionIndex + '" class="intervention"><span class="intervention_title">' + title + '</span>'
604
+ html += '<div class="Intervention_' + index + '_' + interventionIndex + ' intervention"><span class="intervention_title">' + title + '</span>'
597
605
  + '<span class="intervention_date badge rounded-pill">' + intDate + '</span>'
598
606
  + '<div class="intervention_description">' + intervention.description + '</div></div>';
599
607
  });
600
608
  }
601
609
 
602
- html += '</div></div>';
610
+ html += '</div></div></div>';
603
611
  });
604
612
 
605
613
  return '<div>' + html + '</div>';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@osfarm/itineraire-technique",
3
- "version": "1.0.2",
3
+ "version": "1.0.4",
4
4
  "description": "A visualisation tool to show agricultural technical itineraries based on Echarts",
5
5
  "main": "editor.html",
6
6
  "scripts": {
package/scss/styles-rendering.scss CHANGED
@@ -1,101 +1,150 @@
1
- div.rotation_item {
2
- background-color: #F8FAFC;
3
- border-left : #FFFFFF 14px solid;
4
- border-radius : 7px;
5
- padding : 13px;
6
- margin : 12px 0;
7
- overflow-x : hidden;
8
-
9
- &.highlighted {
10
- box-shadow: 0px 4px 4px 0px var(--UI-Shadow, rgba(17, 36, 69, 0.16)),
11
- 0px 1px 16px 0px var(--UI-Shadow, rgba(17, 36, 69, 0.16));
12
- background-color: #F0F3F5;
1
+ div.mainITKContainer {
2
+ container-type: inline-size;
3
+ container-name: myparent;
4
+
5
+ .left-transcript {
6
+ display: none;
7
+ width : 50%;
13
8
  }
14
9
 
15
- h4 {
16
- margin-bottom: 0;
10
+ .chart-div {
11
+ width: 100%;
17
12
  }
18
13
 
19
- div.step_dates {
20
- font-size : 11px;
21
- float : right;
22
- background-color: #cdcccc;
23
- color : #ffffff;
24
- margin-right : 45px;
25
- padding : 2px 5px;
26
- border-radius : 5px;
27
- margin-top: 7px;
14
+ .bottom-transcript {
15
+ display: block;
28
16
  }
29
17
 
30
- div.collapse-button {
31
- float : right;
32
- border-radius: 50%;
33
- width : 30px;
34
- height : 30px;
35
- text-align : center;
36
- padding-top : 5px;
37
- cursor : pointer;
38
- background : #dfe6f7;
39
- color : #7a8bad;
40
- transition : transform 0.3s ease-in-out;
41
- margin-top : -26px;
18
+ @container myparent (min-width: 800px) {
19
+ .left-transcript {
20
+ display: block;
21
+ }
22
+
23
+ .chart-div {
24
+ width: 50%;
25
+ }
26
+
27
+ .bottom-transcript {
28
+ display: none;
29
+ }
42
30
  }
43
31
 
44
- &.show-all {
45
- div.collapse-button {
46
- transform: rotate(180deg);
32
+ @container myparent (min-width: 1200px) {
33
+ .left-transcript {
34
+ display: block;
35
+ width : 40%;
47
36
  }
48
37
 
49
- div.details {
50
- max-height: 10000px;
51
- /* Adjust this value as needed */
38
+ .chart-div {
39
+ width : 60%;
40
+ }
41
+
42
+ .bottom-transcript {
43
+ display: none;
52
44
  }
53
45
  }
54
46
 
55
- div.details {
56
- max-height: 0px;
57
- overflow : hidden;
58
- transition: max-height 0.3s ease-in-out;
47
+ div.rotation_item {
48
+ background-color: #F8FAFC;
49
+ border-left : #FFFFFF 14px solid;
50
+ border-radius : 7px;
51
+ padding : 13px;
52
+ margin : 12px 0;
53
+ overflow-x : hidden;
54
+ position : relative;
55
+
56
+ &.highlighted {
57
+ box-shadow: 0px 4px 4px 0px var(--UI-Shadow, rgba(17, 36, 69, 0.16)),
58
+ 0px 1px 16px 0px var(--UI-Shadow, rgba(17, 36, 69, 0.16));
59
+ background-color: #F0F3F5;
60
+ }
61
+
62
+ h4 {
63
+ margin-bottom: 0;
64
+ }
59
65
 
60
- div.intervention {
61
- background-color: #FFFFFF;
66
+ div.step_dates {
67
+ font-size : 11px;
68
+ background-color: #cdcccc;
69
+ color : #ffffff;
70
+ margin : 5px;
71
+ padding : 2px 5px;
62
72
  border-radius : 5px;
63
- margin-bottom : 11px;
64
- padding : 13px;
65
- cursor : pointer;
73
+ height : 20px;
74
+ right : 36px;
75
+ top : 13px;
76
+ position : absolute;
77
+ }
78
+
79
+ div.collapse-button {
80
+ border-radius: 50%;
81
+ width : 30px;
82
+ height : 30px;
83
+ text-align : center;
84
+ padding : 5px 0px;
85
+ margin : 0 5px 3px 0;
86
+ cursor : pointer;
87
+ background : #dfe6f7;
88
+ color : #7a8bad;
89
+ transition : transform 0.3s ease-in-out;
90
+ }
66
91
 
67
- span.intervention_title {
68
- font-weight: bold;
92
+ &.show-all {
93
+ div.collapse-button {
94
+ transform: rotate(180deg);
69
95
  }
70
96
 
71
- span.intervention_date {
72
- color : #707070;
73
- background-color: #F0F3F5;
74
- float : right;
97
+ div.details {
98
+ max-height: 10000px;
99
+ /* Adjust this value as needed */
75
100
  }
101
+ }
102
+
103
+ div.details {
104
+ max-height: 0px;
105
+ overflow : hidden;
106
+ transition: max-height 0.3s ease-in-out;
107
+
108
+ div.intervention {
109
+ background-color: #FFFFFF;
110
+ border-radius : 5px;
111
+ margin-bottom : 11px;
112
+ padding : 13px;
113
+ cursor : pointer;
76
114
 
77
- div.intervention_description {
78
- margin-top: 5px;
115
+ span.intervention_title {
116
+ font-weight: bold;
117
+ }
118
+
119
+ span.intervention_date {
120
+ color : #707070;
121
+ background-color: #F0F3F5;
122
+ float : right;
123
+ }
124
+
125
+ div.intervention_description {
126
+ margin-top: 5px;
127
+ }
79
128
  }
80
129
  }
130
+
131
+ .step-edit {
132
+ display: none;
133
+ }
81
134
  }
82
135
 
83
- .step-edit {
84
- display: none;
136
+ .charts {
137
+ width : 100%;
138
+ height : 500px;
139
+ display: inline-block;
140
+ }
141
+
142
+ .transcript {
143
+ font-size : 80%;
144
+ width : 100%;
145
+ max-height : 450px;
146
+ overflow-y : scroll;
147
+ scroll-behavior: smooth;
148
+ padding : 3px;
85
149
  }
86
- }
87
-
88
- .charts {
89
- width : 100%;
90
- height : 500px;
91
- display: inline-block;
92
- }
93
-
94
- .transcript {
95
- font-size : 80%;
96
- width : 100%;
97
- max-height : 450px;
98
- overflow-y : scroll;
99
- scroll-behavior: smooth;
100
- padding : 3px;
101
150
  }
package/visualisateur.html CHANGED
@@ -26,7 +26,9 @@
26
26
  <div class="container_fluid text-center">
27
27
  <h2 class="m-5">Test simple</h2>
28
28
 
29
- <div id="itk"></div>
29
+ <div>
30
+ <div id="itk"></div>
31
+ </div>
30
32
 
31
33
  </div>
32
34