1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
|
$(document).ready(function() {
//recup du json et placement des divs
generateDiagram(75674); //On passe en dur ce Flight Number pour le test actuel
var instance = jsPlumb.getInstance();
var defaultOptions = {
Connector: [ "Bezier", { curviness:100 }],
PaintStyle: { strokeStyle: "#5b9ada", lineWidth: 2 },
ConnectorStyle: [{
lineWidth: 3,
strokeStyle: "#5b9ada"
}],
ConnectionsDetachable:false
};
instance.importDefaults(defaultOptions);
//On connecte les différents blocs que l'on vient de créer
connectDiagram(instance);
$("#chart").on("click", ".afterSide", function(){
var FlId = $(this).attr("id");
instance.reset(); //suppression de toutes les connexions
resetDiagram();
//on redessine
generateDiagram(FlId);
instance = jsPlumb.getInstance();
instance.importDefaults(defaultOptions);
connectDiagram(instance);
}).on("click", ".beforeSide", function(){
var FlId = $(this).attr("id");
instance.reset(); //suppression de toutes les connexions
resetDiagram();
//on redessine
generateDiagram(FlId);
instance = jsPlumb.getInstance();
instance.importDefaults(defaultOptions);
connectDiagram(instance);
});
});
function generateDiagram(flightId){
$.ajax({
url:"**********************",
datatype: "json",
async: false,
success: function(data){
var topBefore = 0; //placement vertical du côté gauche
var before = 101, after=700;
var topAfter = 0; //placement vertical du côté droit
var afterCount = 0, beforeCount = 0;
var gapBetweenAirports = 12.5;
var airportStartCenter, airportEndCenter;
airportStartCenter = data.flight.org;
airportEndCenter = data.flight.dst;
var centraleDiv="<div id='centraleDiv' class='rectangle centerDiv'><span class='airport'>"+data.flight.org+"</span> "+data.flight.fn+" <span class='airport'>"+data.flight.dst+"</span></div>";
$.each( data.after, function( key, fl ) {
//Placement de Airport3 à droite de l'O&D
$("#chart").append("<div id="+fl.id+" class='rectangle afterSide'><span class='airport'>"+fl.dst+"</span> <span class='FlNumber'>"+fl.fn+"</span></div>");
$("#"+fl.id).css({"top":topAfter, "left":after});
topAfter+=gapBetweenAirports;
if(after==801){
after=700;
} else {
after=801;
}
afterCount++;
});
$.each(data.before, function(key, fl){
//Placement de Airport1 à gauche de l'O&D
$("#chart").append("<div id="+fl.id+" class='rectangle beforeSide'><span class='airport'>"+fl.org+"</span> <span class='FlNumber'>"+fl.fn+"</span></div>");
$("#"+fl.id).css({"top":topBefore, "left":before});
topBefore+=gapBetweenAirports;
if(before==101){
before=0;
} else {
before=101;
}
beforeCount++;
});
//Alignement du côté droit ou gauche puis creation de la div centrale
var beforeCenter = (beforeCount-1)*gapBetweenAirports/2; //calcul du centre gauche
var afterCenter = (afterCount-1)*gapBetweenAirports/2; //calcul du centre droit
var center;
if(beforeCenter > afterCenter){
//déplacement du côté droit
center = beforeCenter-afterCenter;
$(".afterSide").each(function(
index, element ) {
$(element).css("top", "+="+center);
});
$("#chart").append(centraleDiv); //O&D précédemment sélectionnée
$(".centerDiv").css("top",beforeCenter);
} else {
//déplacement du côté gauche
center = afterCenter-beforeCenter;
$(".beforeSide").each(function( index, element ) {
$(element).css("top", "+="+center);
});
$("#chart").append(centraleDiv); //O&D précédemment sélectionnée
$(".centerDiv").css("top",afterCenter);
}
}
});
};
function connectDiagram(instance) {
if ($(".beforeSide").length > 0) {
$(".beforeSide").each(function(index, element){
if($(element).css("left")=="101px" ){
instance.connect({
source:$(element),
target:$("#centraleDiv"),
anchors:["RightMiddle", "LeftMiddle"],
endpointStyle:{fillStyle:"#2e6f9a", radius: 3},
editable:false
});
}
});
}
if ($(".afterSide").length > 0) {
$(".afterSide").each(function(index, element){
if($(element).css("left")=="700px" ){
instance.connect({
source:$("#centraleDiv"),
target:$(element),
anchors:["RightMiddle", "LeftMiddle"],
endpointStyle:{fillStyle:"#2e6f9a", radius: 3},
editable:false
});
}
});
}
};
function resetDiagram(){
//Actualiser le diagramme
$(".beforeSide").each(function(index, element){
$(element).remove(); //suppression cote gauche
});
$(".afterSide").each(function(index, element){
$(element).remove(); //suppression cote gauche
});
$(".centerDiv").remove();
} |
