@osfarm/itineraire-technique 1.0.2 → 1.0.3
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
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;
|
|
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 +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,
|
|
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"}
|
package/js/chart-render.js
CHANGED
|
@@ -30,7 +30,7 @@ class RotationRenderer {
|
|
|
30
30
|
this.itk_container = $("#" + divID).css({ 'width': '100%' });
|
|
31
31
|
|
|
32
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>
|
|
33
|
+
<div class="col-auto d-none d-lg-block col-lg-4"><div class="transcript"></div></div>
|
|
34
34
|
<div class="col col-12 col-lg-8"><div class="charts"></div></div>
|
|
35
35
|
<div class="col col-12 d-block d-lg-none"><div class="transcript"></div></div>
|
|
36
36
|
</div>`);
|
|
@@ -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(
|
|
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
|
|
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
|
|
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 =
|
|
133
|
+
let element = self.getVisibleTranscriptDiv().find('.' + params.data.divId + " h4");
|
|
130
134
|
if (element.length == 0)
|
|
131
|
-
element =
|
|
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
|
-
|
|
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
|
-
|
|
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
|
|
574
|
-
+ '<
|
|
575
|
-
+ '<
|
|
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
|
|
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
|
@@ -5,6 +5,7 @@ div.rotation_item {
|
|
|
5
5
|
padding : 13px;
|
|
6
6
|
margin : 12px 0;
|
|
7
7
|
overflow-x : hidden;
|
|
8
|
+
position : relative;
|
|
8
9
|
|
|
9
10
|
&.highlighted {
|
|
10
11
|
box-shadow: 0px 4px 4px 0px var(--UI-Shadow, rgba(17, 36, 69, 0.16)),
|
|
@@ -18,27 +19,28 @@ div.rotation_item {
|
|
|
18
19
|
|
|
19
20
|
div.step_dates {
|
|
20
21
|
font-size : 11px;
|
|
21
|
-
float : right;
|
|
22
22
|
background-color: #cdcccc;
|
|
23
23
|
color : #ffffff;
|
|
24
|
-
margin
|
|
24
|
+
margin : 5px;
|
|
25
25
|
padding : 2px 5px;
|
|
26
26
|
border-radius : 5px;
|
|
27
|
-
|
|
27
|
+
height : 20px;
|
|
28
|
+
right : 33px;
|
|
29
|
+
top : 12px;
|
|
30
|
+
position : absolute;
|
|
28
31
|
}
|
|
29
32
|
|
|
30
33
|
div.collapse-button {
|
|
31
|
-
float : right;
|
|
32
34
|
border-radius: 50%;
|
|
33
35
|
width : 30px;
|
|
34
36
|
height : 30px;
|
|
35
37
|
text-align : center;
|
|
36
|
-
padding
|
|
38
|
+
padding : 5px 0px;
|
|
39
|
+
margin-right : 0 5px 3px 0;
|
|
37
40
|
cursor : pointer;
|
|
38
41
|
background : #dfe6f7;
|
|
39
42
|
color : #7a8bad;
|
|
40
43
|
transition : transform 0.3s ease-in-out;
|
|
41
|
-
margin-top : -26px;
|
|
42
44
|
}
|
|
43
45
|
|
|
44
46
|
&.show-all {
|