112 lines
3.3 KiB
JavaScript
112 lines
3.3 KiB
JavaScript
import { Controller } from '@hotwired/stimulus';
|
|
|
|
export default class extends Controller {
|
|
static values = {
|
|
bucketSize: { type: Number, default: 20 },
|
|
};
|
|
|
|
static targets = [
|
|
'hintType',
|
|
'awardSection',
|
|
'allAwards',
|
|
'awardType',
|
|
'popularityMinInput',
|
|
'popularityMaxInput',
|
|
'popularityValue',
|
|
'popularityFill',
|
|
'popularitySummary',
|
|
];
|
|
|
|
connect() {
|
|
this.toggleAwardSection();
|
|
this.syncPopularityRange();
|
|
}
|
|
|
|
enforceMinOneChecked(event) {
|
|
const checked = this.hintTypeTargets.filter((e) => e.checked);
|
|
if (checked.length === 0) {
|
|
event.target.checked = true;
|
|
}
|
|
this.toggleAwardSection();
|
|
}
|
|
|
|
toggleAwardSection() {
|
|
const awardChecked = this.hintTypeTargets.find(
|
|
(el) => el.name === 'hint_award'
|
|
)?.checked;
|
|
|
|
this.awardSectionTarget.style.display = awardChecked ? '' : 'none';
|
|
}
|
|
|
|
toggleAllAwards() {
|
|
const checked = this.allAwardsTarget.checked;
|
|
this.awardTypeTargets.forEach((el) => {
|
|
el.checked = checked;
|
|
});
|
|
}
|
|
|
|
syncAllAwards() {
|
|
const allChecked = this.awardTypeTargets.every((el) => el.checked);
|
|
this.allAwardsTarget.checked = allChecked;
|
|
}
|
|
|
|
syncPopularityRange(event) {
|
|
if (
|
|
!this.hasPopularityMinInputTarget
|
|
|| !this.hasPopularityMaxInputTarget
|
|
|| !this.hasPopularityValueTarget
|
|
) {
|
|
return;
|
|
}
|
|
|
|
let min = Number(this.popularityMinInputTarget.value);
|
|
let max = Number(this.popularityMaxInputTarget.value);
|
|
|
|
if (event?.target === this.popularityMinInputTarget && min > max) {
|
|
max = min;
|
|
this.popularityMaxInputTarget.value = String(max);
|
|
} else if (event?.target === this.popularityMaxInputTarget && max < min) {
|
|
min = max;
|
|
this.popularityMinInputTarget.value = String(min);
|
|
} else if (min > max) {
|
|
[min, max] = [max, min];
|
|
this.popularityMinInputTarget.value = String(min);
|
|
this.popularityMaxInputTarget.value = String(max);
|
|
}
|
|
|
|
this.popularityValueTarget.textContent = `${min}-${max}`;
|
|
|
|
if (this.hasPopularityFillTarget) {
|
|
const left = ((min - 1) / 9) * 100;
|
|
const right = ((10 - max) / 9) * 100;
|
|
this.popularityFillTarget.style.left = `${left}%`;
|
|
this.popularityFillTarget.style.right = `${right}%`;
|
|
}
|
|
|
|
if (this.hasPopularitySummaryTarget) {
|
|
this.popularitySummaryTarget.textContent =
|
|
this.buildPopularitySummary(min, max);
|
|
}
|
|
}
|
|
|
|
buildPopularitySummary(min, max) {
|
|
const bucketSize = this.bucketSizeValue;
|
|
|
|
if (min === 1 && max === 10) {
|
|
return 'Tous les acteurs.';
|
|
}
|
|
|
|
const startRank = ((10 - max) * bucketSize) + 1;
|
|
const endRank = min === 1 ? null : ((10 - min + 1) * bucketSize);
|
|
|
|
if (max === 10) {
|
|
return `Top ${(11 - min) * bucketSize} des acteurs les plus populaires.`;
|
|
}
|
|
|
|
if (endRank === null) {
|
|
return `A partir du rang ${startRank} en popularite.`;
|
|
}
|
|
|
|
return `Rangs ${startRank} a ${endRank} en popularite.`;
|
|
}
|
|
}
|