-
Notifications
You must be signed in to change notification settings - Fork 0
/
controller.js
192 lines (170 loc) · 6.14 KB
/
controller.js
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
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
/*-----------------------------------------------------------
* Il controller si occupa di gestire le interazioni tra i
* vari grafici.
* Riceve gli eventi dalla pagina principale e aggiorna i
* grafici in base al tipo di evento ricevuto.
*
----------------------------------------------------------*/
function Controller() {
// L'oggetto da esportare
var controller = {};
/* Inizio variabili private */
// I grafici sui quali devo lavorare
var mapChart, forceChart, lineChart, distributionChart;
// Le variabili che rappresentano i dati selezionati dall'utente
var selectedDate, selectedCountry, selectedTrack;
// Ci serve sapere se la pagina è pronta per decidere se eseguire o meno alcune funzioni
var isPageReady = false;
/* Fine variaibli private */
/* Inizio metodi privati */
/* Fine metodi privati */
/* Inizio metodi pubblici */
// Registra il grafico map in modo da poterci lavorare
controller.registerMapChart = function(map) {
mapChart = map;
};
// Registra il grafico force in modo da poterci lavorare
controller.registerForceChart = function(force) {
forceChart = force;
};
// Registra il grafico line in modo da poterci lavorare
controller.registerLineChart = function(line) {
lineChart = line;
};
// Registra il grafico distribution in modo da poterci lavorare
controller.registerDistributionChart = function(distribution) {
distributionChart = distribution;
};
/* FIne metodi pubblici */
/* Inizio gestione eventi */
// E' stata selezionata una nuova traccia, quindi devo aggiornare i grafici
controller.trackChanged = function(newTrack, color) {
notice = new jBox('Notice', {
content : 'Selezionata nuova traccia: ' + newTrack.artist_name + " - " + newTrack.track_name,
autoClose : 1000,
color : color
});
notice.toggle();
selectedTrack = newTrack;
// Aggiorno il grafico map
mapChart.setSelectedTrack(newTrack);
mapChart.changeStatus(2);
// Aggiorno il grafico line
$(".nvtooltip").fadeOut();
lineChart.setSelectedTrack(newTrack);
lineChart.changeStatus(1);
// Aggiorno l'header
$("#track").fadeOut(function() {
$("#trackTitle").html(newTrack.track_name);
$("#trackArtist").html(newTrack.artist_name);
$("#trackPlays").html(newTrack.num_streams);
$("#trackCover").attr("src", newTrack.artwork_url);
$("#track").fadeIn();
});
$("#country").fadeOut();
};
// E' stato selezionato unun nuovo paese
controller.countryChanged = function(newCountry, color) {
notice = new jBox('Notice', {
content : 'Selezionato nuovo paese: ' + (($.isEmptyObject(newCountry)) ? "Global" : newCountry.properties.name),
autoClose : 1000,
color : color
});
notice.toggle();
console.log($.isEmptyObject(selectedTrack));
//controller.selectedTrack = newTrack;
selectedCountry = newCountry;
// Aggiorno il grafico line per rimuovere l'eventuale traccia selezionata in precedenza
lineChart.setSelectedTrack({});
// Aggiorno il grafico line
lineChart.setSelectedCountry(newCountry);
distributionChart.setSelectedCountry(newCountry);
// Aggiorno l'header
if (!$.isEmptyObject(newCountry)) {
lineChart.changeStatus(2);
distributionChart.changeStatus(2);
mapChart.changeStatus(1);
$("#countryFlag").attr("class", "flag-icon flag-icon-" + newCountry.id);
$("#countryName").html(newCountry.properties.name);
} else {
lineChart.changeStatus(1);
distributionChart.changeStatus(1);
mapChart.changeStatus(1);
$("#countryFlag").attr("class", "flag-icon flag-icon-global");
$("#countryName").html("Global");
}
$("#track").fadeOut();
$("#country").fadeIn();
};
// E' stata selezionata una nuova data
controller.dateChanged = function(newDate, color) {
notice = new jBox('Notice', {
content : 'Selezionata nuova data: ' + newDate,
autoClose : 1000,
color : color
});
notice.toggle();
selectedDate = newDate;
mapChart.setSelectedDate(selectedDate);
distributionChart.setSelectedDate(selectedDate);
distributionChart.changeStatus(0);
$("#countryDate").html(newDate);
};
// Aggiorna la tabaella target con i nuovi dati contenuti in data
controller.updateTable = function(target, data) {
var finalData = jQuery.extend(true, {}, data);
// Ne faccio una copia altrimenti rischio di modificare i dati da visualizzare nel grafico
var keys = Object.keys(data[0]);
var result = "<thead>";
for (var i = 0; i < keys.length; i++) {
result += "<th>" + keys[i] + "</th>";
}// Genero i nomi delle colonne a partire dal contenuto del JSON
result += "</thead>";
$("#tabella" + target).empty();
// Svuoto il div dal codice html precedente e poi aggiungo quello aggiornato
$("#tabella" + target).append("<table id=\"contenutoTabella" + target + "\" class=\"table table-bordered\"></table>");
$("#contenutoTabella" + target).html(result);
if (target != 1) {
for (var i = 0; i < data.length; i++) {
// Il plugin non si comporta bene con i JSON che contengono array, quindi li dobbiamo convertire in stringhe per avere una visualizzazione accettabile
finalData[i].values = JSON.stringify(data[i].values);
}
}
$("#contenutoTabella" + target).dynatable({
dataset : {
records : finalData
}
});
};
// Function wrapping code.
// fn - reference to function.
// context - what you want "this" to be.
// params - array of parameters to pass to function.
controller.wrapFunction = function(fn, context, params) {
return function() {
fn.apply(context, params);
};
};
// Coda con le funzioni da eseguire
var funcQueue = [];
// Esegue la funzione passata come parametro se la pagina è pronta, altrimenti la mette in coda
controller.executeFunction = function(fn) {
if (!isPageReady) {// La pagina non è pronta, funzione messa in coda
funcQueue.push(fn);
} else {
fn();
}
};
// Se ho ricevuto il messaggio che indica il completamento della pagina, allora devo eseguire anche le funzioni che erano in coda
controller.notifyPageReady = function() {
isPageReady = true;
while (funcQueue.length > 0) {
(funcQueue.shift())();
}
};
/* Fine gestione eventi */
/* Notice */
// Usiamo questo oggetto per mostrare le notifiche ogni volta che succede qualcosa
var notice = $('.tooltip').jBox('Notice');
return controller;
}