@osfarm/itineraire-technique 1.0.4 → 1.0.6
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.
- package/css/styles-rendering.css +1 -1
- package/css/styles-rendering.css.map +1 -1
- package/editor.html +2 -1
- package/js/chart-render.js +16 -12
- package/package.json +1 -1
- package/scss/styles-rendering.scss +39 -31
package/css/styles-rendering.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
div.mainITKContainer{container-type:inline-size;container-name:myparent}div.mainITKContainer .left-transcript{display:none;width:50
|
|
1
|
+
div.mainITKContainer{container-type:inline-size;container-name:myparent;line-height:1rem}div.mainITKContainer .left-transcript{display:none;width:50%;font-family:Segoe UI}div.mainITKContainer .chart-div{width:100%}div.mainITKContainer .bottom-transcript{display:block;font-family:Segoe UI}@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:8px 3px 5px 9px;margin:12px 0;overflow-x:hidden}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 div.step-header h4{margin-bottom:0}div.mainITKContainer div.rotation_item div.step-header div.step_dates{font-size:11px;background-color:#cdcccc;color:#fff;margin:5px;padding:2px 5px;border-radius:5px;height:20px;float:right}div.mainITKContainer div.rotation_item div.step-header 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;float:right;transition:transform .3s ease-in-out}div.mainITKContainer div.rotation_item .step_description{clear:both}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 */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["../scss/styles-rendering.scss"],"names":[],"mappings":"AAAA,qBACI,2BACA,
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../scss/styles-rendering.scss"],"names":[],"mappings":"AAAA,qBACI,2BACA,wBACA,iBAEA,sCACI,aACA,UACA,qBAGJ,gCACI,WAGJ,wCACI,cACA,qBAGJ,uCACI,sCACI,cAGJ,gCACI,UAGJ,wCACI,cAIR,wCACI,sCACI,cACA,UAGJ,gCACI,UAGJ,wCACI,cAIR,uCACI,yBACA,4BACA,kBACA,wBACA,cACA,kBAEA,mDACI,8HAEA,yBAKA,0DACI,gBAGJ,sEACI,eACA,yBACA,WACA,WACA,gBACA,kBACA,YACA,YAGJ,2EACI,kBACA,WACA,YACA,kBACA,gBACA,mBACA,eACA,mBACA,cACA,YACA,qCAIR,yDACI,WAIA,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')
|
|
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.
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
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) {
|
|
@@ -569,20 +571,22 @@ class RotationRenderer {
|
|
|
569
571
|
|
|
570
572
|
self.data.steps.forEach((item, index) => {
|
|
571
573
|
|
|
572
|
-
let
|
|
574
|
+
let visibility = 'invisible';
|
|
573
575
|
if (item.interventions?.length > 0 || item.attributes?.length > 0)
|
|
574
|
-
|
|
576
|
+
visibility = "visible";
|
|
577
|
+
|
|
578
|
+
let collapseButton = '<div class="collapse-button '+visibility+ '"><i class="fa fa-chevron-down" aria-hidden="true"></i></div>';
|
|
575
579
|
|
|
576
580
|
let start = item.startDate.toLocaleDateString('fr-FR', { day: 'numeric', month: 'short', year: '2-digit' });
|
|
577
581
|
let end = item.endDate.toLocaleDateString('fr-FR', { day: 'numeric', month: 'short', year: '2-digit' });
|
|
578
582
|
|
|
579
583
|
let dates = '<b>' + item.duration + ' mois</b> (' + start + ' ➜ ' + end + ')';
|
|
580
584
|
|
|
581
|
-
html += '<div class="Step_' + index + ' rotation_item text-start" style="border-color: ' + item.color + '"><div class="
|
|
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>'
|
|
585
|
+
html += '<div class="Step_' + index + ' rotation_item text-start" style="border-color: ' + item.color + '"><div class="step-header">'
|
|
584
586
|
+ collapseButton
|
|
585
|
-
+ '<
|
|
587
|
+
+ '<div class="step_dates">' + dates + '</div>'
|
|
588
|
+
+ '<h4 class="">' + item.name + '<i class="fa fa-pencil step-edit" aria-hidden="true"></i></h4>'
|
|
589
|
+
+ '</div><p class="step_description clearfix">' + (item.description ?? '') + '</p>'
|
|
586
590
|
+ '<div class="details">'
|
|
587
591
|
+ (item.attributes?.length > 0 ? item.attributes.map((attribute) => { return '<p><dt>' + attribute.name + '</dt><dd>' + attribute.value + '</dd></p>' }).join('') : '');
|
|
588
592
|
|
|
@@ -607,7 +611,7 @@ class RotationRenderer {
|
|
|
607
611
|
});
|
|
608
612
|
}
|
|
609
613
|
|
|
610
|
-
html += '</div></div
|
|
614
|
+
html += '</div></div>';
|
|
611
615
|
});
|
|
612
616
|
|
|
613
617
|
return '<div>' + html + '</div>';
|
package/package.json
CHANGED
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
div.mainITKContainer {
|
|
2
2
|
container-type: inline-size;
|
|
3
3
|
container-name: myparent;
|
|
4
|
+
line-height : 1rem;
|
|
4
5
|
|
|
5
6
|
.left-transcript {
|
|
6
|
-
display: none;
|
|
7
|
-
width
|
|
7
|
+
display : none;
|
|
8
|
+
width : 50%;
|
|
9
|
+
font-family: Segoe UI;
|
|
8
10
|
}
|
|
9
11
|
|
|
10
12
|
.chart-div {
|
|
@@ -12,7 +14,8 @@ div.mainITKContainer {
|
|
|
12
14
|
}
|
|
13
15
|
|
|
14
16
|
.bottom-transcript {
|
|
15
|
-
display: block;
|
|
17
|
+
display : block;
|
|
18
|
+
font-family: Segoe UI;
|
|
16
19
|
}
|
|
17
20
|
|
|
18
21
|
@container myparent (min-width: 800px) {
|
|
@@ -36,7 +39,7 @@ div.mainITKContainer {
|
|
|
36
39
|
}
|
|
37
40
|
|
|
38
41
|
.chart-div {
|
|
39
|
-
width
|
|
42
|
+
width: 60%;
|
|
40
43
|
}
|
|
41
44
|
|
|
42
45
|
.bottom-transcript {
|
|
@@ -48,10 +51,9 @@ div.mainITKContainer {
|
|
|
48
51
|
background-color: #F8FAFC;
|
|
49
52
|
border-left : #FFFFFF 14px solid;
|
|
50
53
|
border-radius : 7px;
|
|
51
|
-
padding :
|
|
54
|
+
padding : 8px 3px 5px 9px;
|
|
52
55
|
margin : 12px 0;
|
|
53
56
|
overflow-x : hidden;
|
|
54
|
-
position : relative;
|
|
55
57
|
|
|
56
58
|
&.highlighted {
|
|
57
59
|
box-shadow: 0px 4px 4px 0px var(--UI-Shadow, rgba(17, 36, 69, 0.16)),
|
|
@@ -59,34 +61,40 @@ div.mainITKContainer {
|
|
|
59
61
|
background-color: #F0F3F5;
|
|
60
62
|
}
|
|
61
63
|
|
|
62
|
-
h4 {
|
|
63
|
-
margin-bottom: 0;
|
|
64
|
-
}
|
|
65
64
|
|
|
66
|
-
div.
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
65
|
+
div.step-header {
|
|
66
|
+
h4 {
|
|
67
|
+
margin-bottom: 0;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
div.step_dates {
|
|
71
|
+
font-size : 11px;
|
|
72
|
+
background-color: #cdcccc;
|
|
73
|
+
color : #ffffff;
|
|
74
|
+
margin : 5px;
|
|
75
|
+
padding : 2px 5px;
|
|
76
|
+
border-radius : 5px;
|
|
77
|
+
height : 20px;
|
|
78
|
+
float : right;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
div.collapse-button {
|
|
82
|
+
border-radius: 50%;
|
|
83
|
+
width : 30px;
|
|
84
|
+
height : 30px;
|
|
85
|
+
text-align : center;
|
|
86
|
+
padding : 5px 0px;
|
|
87
|
+
margin : 0 5px 3px 0;
|
|
88
|
+
cursor : pointer;
|
|
89
|
+
background : #dfe6f7;
|
|
90
|
+
color : #7a8bad;
|
|
91
|
+
float : right;
|
|
92
|
+
transition : transform 0.3s ease-in-out;
|
|
93
|
+
}
|
|
77
94
|
}
|
|
78
95
|
|
|
79
|
-
|
|
80
|
-
|
|
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;
|
|
96
|
+
.step_description {
|
|
97
|
+
clear: both;
|
|
90
98
|
}
|
|
91
99
|
|
|
92
100
|
&.show-all {
|