filter by age without researching again
This commit is contained in:
parent
635d21524d
commit
916fd6a3f6
@ -123,13 +123,23 @@
|
|||||||
badge.textContent = val + '+';
|
badge.textContent = val + '+';
|
||||||
badge.style.background = getAgeColor(val);
|
badge.style.background = getAgeColor(val);
|
||||||
}
|
}
|
||||||
async function search() {
|
let lastQuery = '';
|
||||||
|
let lastResults = [];
|
||||||
|
|
||||||
|
async function search(force = false) {
|
||||||
const query = document.getElementById('q').value.trim();
|
const query = document.getElementById('q').value.trim();
|
||||||
if (!query) return;
|
if (!query) return;
|
||||||
const maxAge = parseInt(document.getElementById('maxAge').value, 10);
|
const maxAge = parseInt(document.getElementById('maxAge').value, 10);
|
||||||
window.history.replaceState({}, '', '?q=' + encodeURIComponent(query) + (maxAge < 21 ? `&maxAge=${maxAge}` : ''));
|
window.history.replaceState({}, '', '?q=' + encodeURIComponent(query) + (maxAge < 21 ? `&maxAge=${maxAge}` : ''));
|
||||||
const filmsDiv = document.getElementById('films');
|
const filmsDiv = document.getElementById('films');
|
||||||
filmsDiv.innerHTML = '<p class="loader">Searching...</p>';
|
filmsDiv.innerHTML = '<p class="loader">Searching...</p>';
|
||||||
|
|
||||||
|
// Si on a déjà cherché ce terme, et pas force, on ne refait pas le fetch
|
||||||
|
if (!force && lastQuery === query && lastResults.length) {
|
||||||
|
renderFilms(filterFilmsByMaxAge(lastResults, maxAge));
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const base = window.location.origin;
|
const base = window.location.origin;
|
||||||
const response = await fetch(`${base}/search?q=${encodeURIComponent(query)}`);
|
const response = await fetch(`${base}/search?q=${encodeURIComponent(query)}`);
|
||||||
@ -138,16 +148,8 @@
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
let films = await response.json();
|
let films = await response.json();
|
||||||
if (!Array.isArray(films) || !films.length) {
|
|
||||||
filmsDiv.innerHTML = '<p class="no-results">No results. Try another query.</p>';
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
// Filtres sources inutiles (pas de description et/ou pas d'âge)
|
|
||||||
films = films.map(film => {
|
films = films.map(film => {
|
||||||
film.results = film.results.filter(r => {
|
film.results = film.results.filter(r => {
|
||||||
// On considère valide si :
|
|
||||||
// - summary ou parentsNeedToKnow ou details.summary >= 8 chars
|
|
||||||
// - ET un âge existe (age, normalizedMarks, marks, details.ageLegal, etc)
|
|
||||||
let hasDescription =
|
let hasDescription =
|
||||||
(r.summary && r.summary.length >= 8) ||
|
(r.summary && r.summary.length >= 8) ||
|
||||||
(r.parentsNeedToKnow && r.parentsNeedToKnow.length >= 8) ||
|
(r.parentsNeedToKnow && r.parentsNeedToKnow.length >= 8) ||
|
||||||
@ -159,118 +161,133 @@
|
|||||||
return film;
|
return film;
|
||||||
}).filter(film => film.results.length > 0);
|
}).filter(film => film.results.length > 0);
|
||||||
|
|
||||||
if (isFinite(maxAge)) {
|
lastQuery = query;
|
||||||
films = films.filter(film => {
|
lastResults = films;
|
||||||
const uniqueResults = [];
|
renderFilms(filterFilmsByMaxAge(films, maxAge));
|
||||||
const seenSources = new Set();
|
|
||||||
film.results.forEach(r => {
|
|
||||||
if (!seenSources.has(r.source)) {
|
|
||||||
uniqueResults.push(r);
|
|
||||||
seenSources.add(r.source);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
const ages = getAllAges(uniqueResults);
|
|
||||||
if (ages.length === 0) return true;
|
|
||||||
return Math.max(...ages) <= maxAge;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
if (!films.length) {
|
|
||||||
filmsDiv.innerHTML = '<p class="no-results">No results for this max age.</p>';
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
let html = `<table class="results-table">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>Title</th>
|
|
||||||
<th>Year</th>
|
|
||||||
<th>Information sources</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>`;
|
|
||||||
films.forEach(film => {
|
|
||||||
const allImgs = film.results.map(r => r.img).filter(Boolean);
|
|
||||||
const mainImg = allImgs.length ? allImgs[0] : null;
|
|
||||||
html += `<tr>
|
|
||||||
<td style="vertical-align:top;">
|
|
||||||
<div style="text-align:center;">
|
|
||||||
<div style="font-weight:bold;margin-bottom:0.7em;">${film.title || 'Unknown title'}</div>
|
|
||||||
${mainImg ? `<img src="${mainImg}" alt="Poster for ${film.title}" style="display:block;margin:auto;max-width:100px;max-height:150px;border-radius:5px;box-shadow:0 2px 8px #0003;margin-bottom:10px;">` : ''}
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
<td class="year" style="vertical-align:top;">${film.year || 'N/A'}</td>
|
|
||||||
<td>`;
|
|
||||||
const uniqueResults = [];
|
|
||||||
const seenSources = new Set();
|
|
||||||
film.results.forEach(r => {
|
|
||||||
if (!seenSources.has(r.source)) {
|
|
||||||
uniqueResults.push(r);
|
|
||||||
seenSources.add(r.source);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
uniqueResults.forEach(r => {
|
|
||||||
html += `<div class="source-block">`;
|
|
||||||
html += `<p class="source-name">${r.source.charAt(0).toUpperCase() + r.source.slice(1)}</p>`;
|
|
||||||
if (r.link) {
|
|
||||||
html += `<p><a href="${r.link}" target="_blank">View details</a></p>`;
|
|
||||||
}
|
|
||||||
if (r.source === 'commonsense') {
|
|
||||||
html += `<p><b>Recommended age:</b> ${ageBadge(r.age)}</p>`;
|
|
||||||
html += `<p><b>Summary (CSM):</b> ${shortSummary(r.summary || r.parentsNeedToKnow)}</p>`;
|
|
||||||
if (r.details && r.details.length) {
|
|
||||||
html += `<p><b>Details (CSM):</b></p><ul>`;
|
|
||||||
r.details.forEach(d => {
|
|
||||||
html += `<li>${d.type}: ${d.score}/5 - ${shortSummary(d.description, 80)}</li>`;
|
|
||||||
});
|
|
||||||
html += `</ul>`;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
else if (r.source === 'cinecheck') {
|
|
||||||
let numericAges = Array.isArray(r.normalizedMarks) && r.normalizedMarks.length
|
|
||||||
? r.normalizedMarks
|
|
||||||
: (r.marks || []).map(x => {
|
|
||||||
let n = parseInt((x + '').replace(/\d+/, ''), 10);
|
|
||||||
return isNaN(n) ? null : n;
|
|
||||||
}).filter(n => n !== null && !isNaN(n));
|
|
||||||
let minAge = numericAges.length ? Math.min(...numericAges) : '';
|
|
||||||
html += `<p><b>Age(s) (Cinecheck):</b> ${minAge ? ageBadge(minAge) : ''}${r.marks && r.marks.length ? r.marks.join(', ') : '-'}</p>`;
|
|
||||||
html += `<p><b>Summary (Cinecheck):</b> ${shortSummary(r.summary)}</p>`;
|
|
||||||
if (r.details && r.details.length) {
|
|
||||||
html += `<p><b>Pictograms (Cinecheck):</b> ${r.details.map(d => d.type).join(', ') || '-'}</p>`;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
else if (r.source === 'filmages') {
|
|
||||||
html += `<p><b>Original title (Filmages):</b> ${r.details.titleOriginalPage || r.details.titleOriginal || '-'}</p>`;
|
|
||||||
html += `<p><b>Legal age (Filmages):</b> ${ageBadge(r.details.ageLegal)}</p>`;
|
|
||||||
html += `<p><b>Suggested age (Filmages):</b> ${ageBadge(r.details.ageSuggested)}</p>`;
|
|
||||||
html += `<p><b>Summary (Filmages):</b> ${shortSummary(r.details.summary)}</p>`;
|
|
||||||
html += `<p><b>Synthesis (Filmages):</b> ${shortSummary(r.details.synthesis, 100)}</p>`;
|
|
||||||
if (r.details.indications && r.details.indications.length) {
|
|
||||||
html += `<p><b>Indications:</b> ${shortSummary(r.details.indications.join(', '), 100)}</p>`;
|
|
||||||
}
|
|
||||||
if (r.details.counterIndications && r.details.counterIndications.length) {
|
|
||||||
html += `<p><b>Contra-indications:</b> ${shortSummary(r.details.counterIndications.join(', '), 100)}</p>`;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
html += `<p><b>Summary:</b> ${shortSummary(r.summary)}</p>`;
|
|
||||||
html += `<p><b>Age:</b> ${ageBadge(r.age)}</p>`;
|
|
||||||
}
|
|
||||||
html += `</div>`;
|
|
||||||
});
|
|
||||||
html += `</td></tr>`;
|
|
||||||
});
|
|
||||||
html += '</tbody></table>';
|
|
||||||
filmsDiv.innerHTML = html;
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Search function error:', error);
|
console.error('Search function error:', error);
|
||||||
filmsDiv.innerHTML = `<p class="no-results">Search failed. Check the console.</p>`;
|
filmsDiv.innerHTML = `<p class="no-results">Search failed. Check the console.</p>`;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function filterFilmsByMaxAge(films, maxAge) {
|
||||||
|
if (!isFinite(maxAge)) return films;
|
||||||
|
return films.filter(film => {
|
||||||
|
const uniqueResults = [];
|
||||||
|
const seenSources = new Set();
|
||||||
|
film.results.forEach(r => {
|
||||||
|
if (!seenSources.has(r.source)) {
|
||||||
|
uniqueResults.push(r);
|
||||||
|
seenSources.add(r.source);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
const ages = getAllAges(uniqueResults);
|
||||||
|
if (ages.length === 0) return true;
|
||||||
|
return Math.max(...ages) <= maxAge;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Extraction de la partie rendering pour pouvoir la réutiliser
|
||||||
|
function renderFilms(films) {
|
||||||
|
const filmsDiv = document.getElementById('films');
|
||||||
|
if (!films.length) {
|
||||||
|
filmsDiv.innerHTML = '<p class="no-results">No results for this max age.</p>';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
let html = `<table class="results-table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Title</th>
|
||||||
|
<th>Year</th>
|
||||||
|
<th>Information sources</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>`;
|
||||||
|
films.forEach(film => {
|
||||||
|
const allImgs = film.results.map(r => r.img).filter(Boolean);
|
||||||
|
const mainImg = allImgs.length ? allImgs[0] : null;
|
||||||
|
html += `<tr>
|
||||||
|
<td style="vertical-align:top;">
|
||||||
|
<div style="text-align:center;">
|
||||||
|
<div style="font-weight:bold;margin-bottom:0.7em;">${film.title || 'Unknown title'}</div>
|
||||||
|
${mainImg ? `<img src="${mainImg}" alt="Poster for ${film.title}" style="display:block;margin:auto;max-width:100px;max-height:150px;border-radius:5px;box-shadow:0 2px 8px #0003;margin-bottom:10px;">` : ''}
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="year" style="vertical-align:top;">${film.year || 'N/A'}</td>
|
||||||
|
<td>`;
|
||||||
|
const uniqueResults = [];
|
||||||
|
const seenSources = new Set();
|
||||||
|
film.results.forEach(r => {
|
||||||
|
if (!seenSources.has(r.source)) {
|
||||||
|
uniqueResults.push(r);
|
||||||
|
seenSources.add(r.source);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
uniqueResults.forEach(r => {
|
||||||
|
html += `<div class="source-block">`;
|
||||||
|
html += `<p class="source-name">${r.source.charAt(0).toUpperCase() + r.source.slice(1)}</p>`;
|
||||||
|
if (r.link) {
|
||||||
|
html += `<p><a href="${r.link}" target="_blank">View details</a></p>`;
|
||||||
|
}
|
||||||
|
if (r.source === 'commonsense') {
|
||||||
|
html += `<p><b>Recommended age:</b> ${ageBadge(r.age)}</p>`;
|
||||||
|
html += `<p><b>Summary (CSM):</b> ${shortSummary(r.summary || r.parentsNeedToKnow)}</p>`;
|
||||||
|
if (r.details && r.details.length) {
|
||||||
|
html += `<p><b>Details (CSM):</b></p><ul>`;
|
||||||
|
r.details.forEach(d => {
|
||||||
|
html += `<li>${d.type}: ${d.score}/5 - ${shortSummary(d.description, 80)}</li>`;
|
||||||
|
});
|
||||||
|
html += `</ul>`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else if (r.source === 'cinecheck') {
|
||||||
|
let numericAges = Array.isArray(r.normalizedMarks) && r.normalizedMarks.length
|
||||||
|
? r.normalizedMarks
|
||||||
|
: (r.marks || []).map(x => {
|
||||||
|
let n = parseInt((x + '').replace(/\d+/, ''), 10);
|
||||||
|
return isNaN(n) ? null : n;
|
||||||
|
}).filter(n => n !== null && !isNaN(n));
|
||||||
|
let minAge = numericAges.length ? Math.min(...numericAges) : '';
|
||||||
|
html += `<p><b>Age(s) (Cinecheck):</b> ${minAge ? ageBadge(minAge) : ''}${r.marks && r.marks.length ? r.marks.join(', ') : '-'}</p>`;
|
||||||
|
html += `<p><b>Summary (Cinecheck):</b> ${shortSummary(r.summary)}</p>`;
|
||||||
|
if (r.details && r.details.length) {
|
||||||
|
html += `<p><b>Pictograms (Cinecheck):</b> ${r.details.map(d => d.type).join(', ') || '-'}</p>`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else if (r.source === 'filmages') {
|
||||||
|
html += `<p><b>Original title (Filmages):</b> ${r.details.titleOriginalPage || r.details.titleOriginal || '-'}</p>`;
|
||||||
|
html += `<p><b>Legal age (Filmages):</b> ${ageBadge(r.details.ageLegal)}</p>`;
|
||||||
|
html += `<p><b>Suggested age (Filmages):</b> ${ageBadge(r.details.ageSuggested)}</p>`;
|
||||||
|
html += `<p><b>Summary (Filmages):</b> ${shortSummary(r.details.summary)}</p>`;
|
||||||
|
html += `<p><b>Synthesis (Filmages):</b> ${shortSummary(r.details.synthesis, 100)}</p>`;
|
||||||
|
if (r.details.indications && r.details.indications.length) {
|
||||||
|
html += `<p><b>Indications:</b> ${shortSummary(r.details.indications.join(', '), 100)}</p>`;
|
||||||
|
}
|
||||||
|
if (r.details.counterIndications && r.details.counterIndications.length) {
|
||||||
|
html += `<p><b>Contra-indications:</b> ${shortSummary(r.details.counterIndications.join(', '), 100)}</p>`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
html += `<p><b>Summary:</b> ${shortSummary(r.summary)}</p>`;
|
||||||
|
html += `<p><b>Age:</b> ${ageBadge(r.age)}</p>`;
|
||||||
|
}
|
||||||
|
html += `</div>`;
|
||||||
|
});
|
||||||
|
html += `</td></tr>`;
|
||||||
|
});
|
||||||
|
html += '</tbody></table>';
|
||||||
|
filmsDiv.innerHTML = html;
|
||||||
|
}
|
||||||
|
|
||||||
document.getElementById('maxAge').addEventListener('input', function() {
|
document.getElementById('maxAge').addEventListener('input', function() {
|
||||||
updateMaxAgeDisplay();
|
updateMaxAgeDisplay();
|
||||||
search();
|
// Pas de fetch, juste filtre en front
|
||||||
|
const query = document.getElementById('q').value.trim();
|
||||||
|
if (!query || !lastResults.length) return;
|
||||||
|
const maxAge = parseInt(document.getElementById('maxAge').value, 10);
|
||||||
|
renderFilms(filterFilmsByMaxAge(lastResults, maxAge));
|
||||||
});
|
});
|
||||||
|
|
||||||
window.addEventListener('DOMContentLoaded', () => {
|
window.addEventListener('DOMContentLoaded', () => {
|
||||||
const params = new URLSearchParams(window.location.search);
|
const params = new URLSearchParams(window.location.search);
|
||||||
const q = params.get('q');
|
const q = params.get('q');
|
||||||
@ -281,10 +298,11 @@
|
|||||||
}
|
}
|
||||||
if (q) {
|
if (q) {
|
||||||
document.getElementById('q').value = q;
|
document.getElementById('q').value = q;
|
||||||
search();
|
search(true); // force fetch initiale
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
document.getElementById('q').addEventListener('keydown', e => { if (e.key === 'Enter') search(); });
|
document.getElementById('q').addEventListener('keydown', e => { if (e.key === 'Enter') search(true); });
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user