Skip to content

Commit 1acaa06

Browse files
luabidaluabida
committed
PredictionList improv
1 parent b9d9e14 commit 1acaa06

File tree

1 file changed

+63
-112
lines changed

1 file changed

+63
-112
lines changed

‎src/static/js/vis/dashboard/predictions.js

Lines changed: 63 additions & 112 deletions
Original file line numberDiff line numberDiff line change
@@ -445,20 +445,29 @@ class PredictionList {
445445
const self = this;
446446
const isAdm2 = predictions.some(prediction => prediction.adm_2 !== null);
447447

448+
storage.get("prediction_ids").forEach(id => {
449+
if (!predictions.some(prediction => prediction.id === id)) {
450+
self.unselect(id)
451+
}
452+
})
453+
448454
let distinctAdm;
455+
let admLevel;
449456
let adm;
450457
if (!isAdm2) {
451458
distinctAdm = [...new Set(predictions.map(prediction => parseInt(prediction.adm_1, 10)))];
452459
if (!storage.get("adm_1") || !distinctAdm.includes(storage.get("adm_1"))) {
453460
storage.set("adm_1", distinctAdm[0]);
454461
}
455462
adm = storage.get("adm_1")
463+
admLevel = 1;
456464
} else {
457465
distinctAdm = [...new Set(predictions.map(prediction => parseInt(prediction.adm_2, 10)))];
458466
if (!storage.get("adm_2") || !distinctAdm.includes(storage.get("adm_2"))) {
459467
storage.set("adm_2", distinctAdm[0]);
460468
}
461469
adm = storage.get("adm_2")
470+
admLevel = 2;
462471
}
463472

464473
const adm_select = `
@@ -471,31 +480,39 @@ class PredictionList {
471480

472481
$("#predictions-card .card-header .card-tools").html(adm_select);
473482

474-
const filterPredictions = (selectedAdm) => {
475-
if (!isAdm2) {
476-
storage.set("adm_1", parseInt(selectedAdm, 10));
477-
} else {
478-
storage.set("adm_2", parseInt(selectedAdm, 10));
479-
}
480-
update_casos(this.dashboard);
483+
self.paginate(self.filter(predictions, admLevel, adm))
481484

482-
let filter = selectedAdm
483-
? predictions.filter(
484-
prediction => prediction.adm_1 == selectedAdm || prediction.adm_2 == selectedAdm
485-
)
486-
: predictions;
485+
$("#adm-filter").on("change", function() {
486+
storage.set("prediction_ids", []);
487+
chart.clearPredictions();
488+
self.paginate(self.filter(predictions, admLevel, $(this).val()));
489+
});
490+
}
487491

488-
self.predictions_map = filter.reduce((acc, prediction) => {
489-
const { description, ..._ } = prediction;
490-
acc[prediction.id] = _;
491-
return acc;
492-
}, {});
492+
filter(predictions, adm_level, adm) {
493+
let res;
494+
if (adm_level === 1) {
495+
storage.set("adm_1", parseInt(adm, 10));
496+
res = predictions.filter(prediction => prediction.adm_1 == adm);
497+
} else {
498+
storage.set("adm_2", parseInt(adm, 10));
499+
res = predictions.filter(prediction => prediction.adm_2 == adm);
500+
}
501+
update_casos(this.dashboard);
493502

494-
return filter;
495-
};
503+
this.predictions_map = res.reduce((acc, prediction) => {
504+
const { description, ..._ } = prediction;
505+
acc[prediction.id] = _;
506+
return acc;
507+
}, {});
508+
509+
return res;
510+
};
496511

512+
paginate(predictions) {
513+
const self = this;
497514
$('#predictions-pagination').pagination({
498-
dataSource: filterPredictions(adm),
515+
dataSource: predictions,
499516
pageSize: 5,
500517
callback: function(data, pagination) {
501518
const body = data.map((item) => self.li(item)).join("");
@@ -519,21 +536,13 @@ class PredictionList {
519536
});
520537

521538
$("#select-all-checkbox").on("click", function() {
522-
const isChecked = $(this).prop("checked");
523-
$(".checkbox-prediction").prop("checked", isChecked).each(function() {
539+
const checked = $(this).prop("checked");
540+
$(".checkbox-prediction").prop("checked", checked).each(function() {
524541
const prediction_id = parseInt($(this).val(), 10);
525-
const prediction = self.predictions_map[prediction_id];
526-
if (isChecked) {
527-
chart.addPrediction({
528-
id: prediction_id,
529-
labels: prediction.chart.labels,
530-
data: prediction.chart.data,
531-
upper: prediction.chart.upper,
532-
lower: prediction.chart.lower,
533-
color: prediction.color
534-
})
542+
if (checked) {
543+
self.select(self.predictions_map[prediction_id])
535544
} else {
536-
chart.removePrediction(prediction_id)
545+
self.unselect(prediction_id)
537546
}
538547
});
539548
});
@@ -543,92 +552,34 @@ class PredictionList {
543552
const prediction_id = parseInt(event.target.value, 10);
544553

545554
if ($(event.target).prop("checked")) {
546-
const prediction = self.predictions_map[prediction_id];
547-
chart.addPrediction({
548-
id: prediction_id,
549-
labels: prediction.chart.labels,
550-
data: prediction.chart.data,
551-
upper: prediction.chart.upper,
552-
lower: prediction.chart.lower,
553-
color: prediction.color
554-
})
555+
self.select(self.predictions_map[prediction_id])
555556
} else {
556-
chart.removePrediction(prediction_id)
557+
self.unselect(prediction_id)
557558
}
558559
});
559560
},
560561
});
562+
}
561563

562-
$("#adm-filter").on("change", function() {
563-
const selectedAdm = $(this).val();
564-
const filteredPredictions = filterPredictions(selectedAdm);
565-
chart.clearPredictions();
566-
567-
$('#predictions-pagination').pagination({
568-
dataSource: filteredPredictions,
569-
pageSize: 5,
570-
callback: function(data, pagination) {
571-
const body = data.map((item) => self.li(item)).join("");
572-
$(`#predictions-list`).html(`
573-
<thead>
574-
<tr>
575-
<th style="width: 40px;">
576-
<input type="checkbox" id="select-all-checkbox">
577-
</th>
578-
<th>id</th>
579-
</tr>
580-
</thead>
581-
<tbody>${body}</tbody>
582-
`);
583-
584-
$(".checkbox-prediction").each(function() {
585-
const prediction_id = parseInt($(this).val(), 10);
586-
if (storage.get("prediction_ids").includes(prediction_id)) {
587-
$(`.checkbox-prediction[value="${prediction_id}"]`).prop("checked", true);
588-
}
589-
});
590-
591-
$("#select-all-checkbox").on("click", function() {
592-
const isChecked = $(this).prop("checked");
593-
$(".checkbox-prediction").prop("checked", isChecked).each(function() {
594-
const prediction_id = parseInt($(this).val(), 10);
595-
const prediction = self.predictions_map[prediction_id];
596-
if (isChecked) {
597-
chart.addPrediction({
598-
id: prediction_id,
599-
labels: prediction.chart.labels,
600-
data: prediction.chart.data,
601-
upper: prediction.chart.upper,
602-
lower: prediction.chart.lower,
603-
color: prediction.color
604-
})
605-
} else {
606-
chart.removePrediction(prediction_id)
607-
}
608-
});
609-
610-
});
564+
select(prediction) {
565+
let prediction_ids = new Set(storage.get("prediction_ids"));
566+
prediction_ids.add(prediction.id);
567+
chart.addPrediction({
568+
id: prediction.id,
569+
labels: prediction.chart.labels,
570+
data: prediction.chart.data,
571+
upper: prediction.chart.upper,
572+
lower: prediction.chart.lower,
573+
color: prediction.color
574+
})
575+
storage.set("prediction_ids", Array.from(prediction_ids));
576+
}
611577

612-
$(".checkbox-prediction").on("click", function(event) {
613-
event.stopPropagation();
614-
const prediction_id = parseInt(event.target.value, 10);
615-
const prediction = self.predictions_map[prediction_id];
616-
if ($(event.target).prop("checked")) {
617-
chart.addPrediction({
618-
id: prediction_id,
619-
labels: prediction.chart.labels,
620-
data: prediction.chart.data,
621-
upper: prediction.chart.upper,
622-
lower: prediction.chart.lower,
623-
color: prediction.color
624-
})
625-
} else {
626-
chart.removePrediction(prediction_id)
627-
}
628-
});
629-
},
630-
});
631-
});
578+
unselect(prediction_id) {
579+
let prediction_ids = new Set(storage.get("prediction_ids"));
580+
prediction_ids.delete(prediction_id);
581+
chart.removePrediction(prediction_id)
582+
storage.set("prediction_ids", Array.from(prediction_ids));
632583
}
633584
}
634585

0 commit comments

Comments
 (0)