@osfarm/itineraire-technique 1.0.3 → 1.0.5

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 (7) hide show
  1. package/css/styles-rendering.css +1 -1
  2. package/css/styles-rendering.css.map +1 -1
  3. package/editor.html +2 -1
  4. package/js/chart-render.js +7 -5
  5. package/package.json +1 -1
  6. package/scss/styles-rendering.scss +124 -77
  7. 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;position:relative}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;background-color:#cdcccc;color:#fff;margin:5px;padding:2px 5px;border-radius:5px;height:20px;right:33px;top:12px;position:absolute}div.rotation_item div.collapse-button{border-radius:50%;width:30px;height:30px;text-align:center;padding:5px 0px;margin-right:0 5px 3px 0;cursor:pointer;background:#dfe6f7;color:#7a8bad;transition:transform .3s ease-in-out}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,kBACA,kBAEA,8BACI,8HAEA,yBAGJ,qBACI,gBAGJ,iCACI,eACA,yBACA,WACA,WACA,gBACA,kBACA,YACA,WACA,SACA,kBAGJ,sCACI,kBACA,WACA,YACA,kBACA,gBACA,yBACA,eACA,mBACA,cACA,qCAIA,+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/editor.html CHANGED
@@ -553,7 +553,8 @@
553
553
 
554
554
  $('.step-edit').click(function (event) {
555
555
  event.stopPropagation();
556
- let stepId = event.target.closest('.rotation_item').id;
556
+ let stepId = renderer.getElementID(event.target.closest('.rotation_item'));;
557
+
557
558
  let index = stepId.split('_')[1];
558
559
  selectedStep = new StepModel(crops.steps[index]);
559
560
  // populateCropDetailView(selectedStep);
package/js/chart-render.js CHANGED
@@ -29,11 +29,13 @@ 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-auto 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>
36
- </div>`);
32
+ if (this.itk_container.find('.mainITKContainer').length == 0) {
33
+ this.itk_container.append(`<div class="row mainITKContainer">
34
+ <div class="col-auto left-transcript"><div class="transcript"></div></div>
35
+ <div class="col col-auto chart-div"><div class="charts"></div></div>
36
+ <div class="col col-12 bottom-transcript"><div class="transcript"></div></div>
37
+ </div>`);
38
+ }
37
39
  }
38
40
 
39
41
  fixRotationData(rotationData) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@osfarm/itineraire-technique",
3
- "version": "1.0.3",
3
+ "version": "1.0.5",
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,103 +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
- position : relative;
9
-
10
- &.highlighted {
11
- box-shadow: 0px 4px 4px 0px var(--UI-Shadow, rgba(17, 36, 69, 0.16)),
12
- 0px 1px 16px 0px var(--UI-Shadow, rgba(17, 36, 69, 0.16));
13
- 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%;
14
8
  }
15
9
 
16
- h4 {
17
- margin-bottom: 0;
10
+ .chart-div {
11
+ width: 100%;
18
12
  }
19
13
 
20
- div.step_dates {
21
- font-size : 11px;
22
- background-color: #cdcccc;
23
- color : #ffffff;
24
- margin : 5px;
25
- padding : 2px 5px;
26
- border-radius : 5px;
27
- height : 20px;
28
- right : 33px;
29
- top : 12px;
30
- position : absolute;
14
+ .bottom-transcript {
15
+ display: block;
31
16
  }
32
17
 
33
- div.collapse-button {
34
- border-radius: 50%;
35
- width : 30px;
36
- height : 30px;
37
- text-align : center;
38
- padding : 5px 0px;
39
- margin-right : 0 5px 3px 0;
40
- cursor : pointer;
41
- background : #dfe6f7;
42
- color : #7a8bad;
43
- transition : transform 0.3s ease-in-out;
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
+ }
44
30
  }
45
31
 
46
- &.show-all {
47
- div.collapse-button {
48
- transform: rotate(180deg);
32
+ @container myparent (min-width: 1200px) {
33
+ .left-transcript {
34
+ display: block;
35
+ width : 40%;
49
36
  }
50
37
 
51
- div.details {
52
- max-height: 10000px;
53
- /* Adjust this value as needed */
38
+ .chart-div {
39
+ width : 60%;
40
+ }
41
+
42
+ .bottom-transcript {
43
+ display: none;
54
44
  }
55
45
  }
56
46
 
57
- div.details {
58
- max-height: 0px;
59
- overflow : hidden;
60
- 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
+ }
61
65
 
62
- div.intervention {
63
- 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;
64
72
  border-radius : 5px;
65
- margin-bottom : 11px;
66
- padding : 13px;
67
- 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
+ }
68
91
 
69
- span.intervention_title {
70
- font-weight: bold;
92
+ &.show-all {
93
+ div.collapse-button {
94
+ transform: rotate(180deg);
71
95
  }
72
96
 
73
- span.intervention_date {
74
- color : #707070;
75
- background-color: #F0F3F5;
76
- float : right;
97
+ div.details {
98
+ max-height: 10000px;
99
+ /* Adjust this value as needed */
77
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;
78
114
 
79
- div.intervention_description {
80
- 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
+ }
81
128
  }
82
129
  }
130
+
131
+ .step-edit {
132
+ display: none;
133
+ }
83
134
  }
84
135
 
85
- .step-edit {
86
- 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;
87
149
  }
88
- }
89
-
90
- .charts {
91
- width : 100%;
92
- height : 500px;
93
- display: inline-block;
94
- }
95
-
96
- .transcript {
97
- font-size : 80%;
98
- width : 100%;
99
- max-height : 450px;
100
- overflow-y : scroll;
101
- scroll-behavior: smooth;
102
- padding : 3px;
103
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