@osfarm/itineraire-technique 1.0.1 → 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/README.md +1 -1
- package/css/styles-rendering.css +1 -1
- package/css/styles-rendering.css.map +1 -1
- package/editor.html +4 -8
- package/js/chart-render.js +39 -26
- package/package.json +1 -1
- package/rendu_statique_1.html +25 -632
- package/scss/styles-rendering.scss +8 -6
- package/test/test.after.json +291 -0
- package/visualisateur.html +57 -0
- package/visualisateur_avant-apres.html +66 -0
package/README.md
CHANGED
|
@@ -15,7 +15,7 @@ Le rendu peut se faire au format frise, avec un zoom temporel, et la possibilit
|
|
|
15
15
|
L'utilisateur peut passer au format rotation pour voir l'ensemble de la rotation sur un cercle
|
|
16
16
|
|
|
17
17
|
### Rendu démo
|
|
18
|
-
[Cliquez ici](https://osfarm.github.io/itineraire-technique/
|
|
18
|
+
[Cliquez ici](https://osfarm.github.io/itineraire-technique/visualisateur.html) pour accéder à la démo !
|
|
19
19
|
|
|
20
20
|
### Editeur
|
|
21
21
|
Le visualisateur est fourni avec un éditeur qui permet de créer son propre itinéraire technique et l'intégrer facilement dans n'importe quel contexte. [Cliquez ici](https://www.osfarm.org/itineraire-technique/editor.html) pour accéder à l'éditeur.
|
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/editor.html
CHANGED
|
@@ -166,15 +166,11 @@
|
|
|
166
166
|
</div>
|
|
167
167
|
</div>
|
|
168
168
|
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
</div>
|
|
169
|
+
<!-- Rendering zone -->
|
|
170
|
+
<div class="col col-12 col-lg-9">
|
|
171
|
+
<div id="itk"></div>
|
|
173
172
|
</div>
|
|
174
173
|
|
|
175
|
-
<div class="col col-12 col-lg-6">
|
|
176
|
-
<div id="itk_chart" class="charts"></div>
|
|
177
|
-
</div>
|
|
178
174
|
</div>
|
|
179
175
|
</div>
|
|
180
176
|
|
|
@@ -552,7 +548,7 @@
|
|
|
552
548
|
}
|
|
553
549
|
|
|
554
550
|
function renderChart() {
|
|
555
|
-
let renderer = new RotationRenderer('
|
|
551
|
+
let renderer = new RotationRenderer('itk', crops);
|
|
556
552
|
renderer.render();
|
|
557
553
|
|
|
558
554
|
$('.step-edit').click(function (event) {
|
package/js/chart-render.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
|
|
2
2
|
class RotationRenderer {
|
|
3
|
-
constructor(divID,
|
|
3
|
+
constructor(divID, rotationData) {
|
|
4
4
|
this.barHeight = 100;
|
|
5
5
|
|
|
6
6
|
this.currentFocusIndex = null;
|
|
@@ -27,8 +27,13 @@ class RotationRenderer {
|
|
|
27
27
|
|
|
28
28
|
this.data = rotationData;
|
|
29
29
|
|
|
30
|
-
this.
|
|
31
|
-
|
|
30
|
+
this.itk_container = $("#" + divID).css({ 'width': '100%' });
|
|
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
37
|
}
|
|
33
38
|
|
|
34
39
|
fixRotationData(rotationData) {
|
|
@@ -57,30 +62,30 @@ class RotationRenderer {
|
|
|
57
62
|
let self = this;
|
|
58
63
|
|
|
59
64
|
// Initialize the echarts instance based on the prepared dom
|
|
60
|
-
self.chart = echarts.init(
|
|
65
|
+
self.chart = echarts.init(self.itk_container.find('.charts')[0]);
|
|
61
66
|
|
|
62
67
|
self.renderChart();
|
|
63
68
|
|
|
64
69
|
if (self.data.options.show_transcript) {
|
|
65
70
|
var html = this.buildHTML();
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
71
|
+
this.itk_container.find('.transcript').html(html);
|
|
72
|
+
this.itk_container.find('.transcript').show();
|
|
73
|
+
this.itk_container.find('.transcript .rotation_item').on("click", function () {
|
|
69
74
|
$(this).toggleClass('show-all');
|
|
70
75
|
});
|
|
71
76
|
|
|
72
|
-
|
|
73
|
-
self.highlightItem(this
|
|
77
|
+
this.itk_container.find('.transcript .rotation_item').on("mouseover", function () {
|
|
78
|
+
self.highlightItem(self.getElementID(this));
|
|
74
79
|
});
|
|
75
80
|
|
|
76
81
|
// Add a click event on the transcript to scroll to the corresponding item in the chart
|
|
77
|
-
|
|
78
|
-
self.highlightItem(this
|
|
82
|
+
this.itk_container.find('.transcript .intervention').on('mouseover', function (e) {
|
|
83
|
+
self.highlightItem(self.getElementID(this));
|
|
79
84
|
e.stopPropagation();
|
|
80
85
|
});
|
|
81
86
|
}
|
|
82
87
|
else
|
|
83
|
-
|
|
88
|
+
this.itk_container.find('.transcript').hide();
|
|
84
89
|
|
|
85
90
|
// resize all charts when the windows is resized
|
|
86
91
|
if (typeof _ !== 'undefined' && typeof _.debounce === 'function') {
|
|
@@ -93,6 +98,10 @@ class RotationRenderer {
|
|
|
93
98
|
}
|
|
94
99
|
}
|
|
95
100
|
|
|
101
|
+
getElementID(element) {
|
|
102
|
+
return element.classList.values().find(item => item.match(/Intervention_[0-9]+_[0-9]+|Step_[0-9]+/));
|
|
103
|
+
}
|
|
104
|
+
|
|
96
105
|
renderChart() {
|
|
97
106
|
let self = this;
|
|
98
107
|
let option;
|
|
@@ -121,9 +130,9 @@ class RotationRenderer {
|
|
|
121
130
|
if (!params.data.divId)
|
|
122
131
|
return;
|
|
123
132
|
|
|
124
|
-
let element =
|
|
133
|
+
let element = self.getVisibleTranscriptDiv().find('.' + params.data.divId + " h4");
|
|
125
134
|
if (element.length == 0)
|
|
126
|
-
element =
|
|
135
|
+
element = self.getVisibleTranscriptDiv().find('.' + params.data.divId);
|
|
127
136
|
|
|
128
137
|
self.noFocusUpdate = true;
|
|
129
138
|
|
|
@@ -133,12 +142,16 @@ class RotationRenderer {
|
|
|
133
142
|
|
|
134
143
|
element[0].scrollIntoView({ block: "start" });
|
|
135
144
|
|
|
136
|
-
|
|
145
|
+
self.getVisibleTranscriptDiv().find('.' + params.data.divId).closest('.rotation_item').addClass("show-all");
|
|
137
146
|
|
|
138
147
|
self.highlightItem(params.data.divId);
|
|
139
148
|
});
|
|
140
149
|
}
|
|
141
150
|
|
|
151
|
+
getVisibleTranscriptDiv() {
|
|
152
|
+
return this.itk_container.find('.transcript:visible');
|
|
153
|
+
}
|
|
154
|
+
|
|
142
155
|
highlightItem(divID) {
|
|
143
156
|
let self = this;
|
|
144
157
|
|
|
@@ -155,7 +168,7 @@ class RotationRenderer {
|
|
|
155
168
|
|
|
156
169
|
$(".rotation_item").removeClass('highlighted');
|
|
157
170
|
$(".intervention").removeClass('highlighted');
|
|
158
|
-
|
|
171
|
+
self.itk_container.find('.' + divID).addClass('highlighted');
|
|
159
172
|
}
|
|
160
173
|
|
|
161
174
|
getStepsOption() {
|
|
@@ -289,7 +302,7 @@ class RotationRenderer {
|
|
|
289
302
|
intervention.type == 'intervention_top' ? 2 : 0, // Interventions en haut ou en bas (index de la série)
|
|
290
303
|
item.startDate.valueOf() + Number(intervention.day) * 86400000, // Date de début (ms)
|
|
291
304
|
item.startDate.valueOf() + (Number(intervention.day) + 1) * 86400000, // Date de début (ms)
|
|
292
|
-
intervention.important === true ? intervention.name + '
|
|
305
|
+
intervention.important === true ? intervention.name + ' ⚠️' : intervention.name, // Nom
|
|
293
306
|
intervention.type == 'intervention_top' ? 'intervention_top' : 'intervention_bottom' // Type
|
|
294
307
|
],
|
|
295
308
|
divId: 'Intervention_' + index + '_' + interventionIndex,
|
|
@@ -558,16 +571,16 @@ class RotationRenderer {
|
|
|
558
571
|
|
|
559
572
|
let collapseButton = '';
|
|
560
573
|
if (item.interventions?.length > 0 || item.attributes?.length > 0)
|
|
561
|
-
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>';
|
|
562
575
|
|
|
563
576
|
let start = item.startDate.toLocaleDateString('fr-FR', { day: 'numeric', month: 'short', year: '2-digit' });
|
|
564
577
|
let end = item.endDate.toLocaleDateString('fr-FR', { day: 'numeric', month: 'short', year: '2-digit' });
|
|
565
578
|
|
|
566
579
|
let dates = '<b>' + item.duration + ' mois</b> (' + start + ' ➜ ' + end + ')';
|
|
567
580
|
|
|
568
|
-
html += '<div
|
|
569
|
-
+ '<
|
|
570
|
-
+ '<
|
|
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>'
|
|
571
584
|
+ collapseButton
|
|
572
585
|
+ '<p class="step_description">' + (item.description ?? '') + '</p>'
|
|
573
586
|
+ '<div class="details">'
|
|
@@ -586,15 +599,15 @@ class RotationRenderer {
|
|
|
586
599
|
let title = intervention.name;
|
|
587
600
|
|
|
588
601
|
if (intervention.important === true)
|
|
589
|
-
title =
|
|
602
|
+
title = title + '⚠️';
|
|
590
603
|
|
|
591
|
-
html += '<div
|
|
592
|
-
|
|
593
|
-
|
|
604
|
+
html += '<div class="Intervention_' + index + '_' + interventionIndex + ' intervention"><span class="intervention_title">' + title + '</span>'
|
|
605
|
+
+ '<span class="intervention_date badge rounded-pill">' + intDate + '</span>'
|
|
606
|
+
+ '<div class="intervention_description">' + intervention.description + '</div></div>';
|
|
594
607
|
});
|
|
595
608
|
}
|
|
596
609
|
|
|
597
|
-
html += '</div></div>';
|
|
610
|
+
html += '</div></div></div>';
|
|
598
611
|
});
|
|
599
612
|
|
|
600
613
|
return '<div>' + html + '</div>';
|