```dataviewjs
// Create filter elements
const container = this.container;
const filterDiv = container.createEl('div', {cls: 'filters'});
filterDiv.createEl('select', {attr: {id: 'typeFilter'}, cls: 'dropdown'}, (el) => {
['All Types', 'Movie', 'Book', 'Restaurant', 'Concert', 'Theater', 'Sports'].forEach(type => {
el.createEl('option', {text: type, value: type.toLowerCase()});
});
});
filterDiv.createEl('select', {attr: {id: 'monthFilter'}, cls: 'dropdown'}, (el) => {
const months = ['All Months', 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
months.forEach((month, index) => {
el.createEl('option', {text: month, value: index === 0 ? 'all' : (index).toString().padStart(2, '0')});
});
});
const yearFilter = filterDiv.createEl('select', {attr: {id: 'yearFilter'}, cls: 'dropdown'});
yearFilter.createEl('option', {text: 'All Years', value: 'all'});
const currentYear = new Date().getFullYear();
for (let year = currentYear; year >= currentYear - 5; year--) {
yearFilter.createEl('option', {text: year.toString(), value: year.toString()});
}
filterDiv.createEl('button', {text: 'Apply Filters', attr: {onclick: 'applyFilters()'}});
// Add line breaks after filters
container.createEl('br');
container.createEl('br');
// Create a div to hold the entries
const entriesDiv = container.createEl('div', {attr: {id: 'entries'}});
// Fetch pages and group by date
const pages = dv.pages('"Just For Fun/Feed the Feed"').sort(p => p.date, 'desc');
const groupedPages = {};
pages.forEach(page => {
const dateStr = page.date.toFormat("MMMM d, yyyy");
if (!groupedPages[dateStr]) {
groupedPages[dateStr] = [];
}
groupedPages[dateStr].push(page);
});
// Display entries
let isFirstGroup = true;
for (const [dateStr, entries] of Object.entries(groupedPages)) {
if (!isFirstGroup) {
entriesDiv.createEl('br');
entriesDiv.createEl('br');
}
isFirstGroup = false;
const dateDiv = entriesDiv.createEl('div', {cls: 'date-group', attr: {'data-date': dateStr}});
dateDiv.createEl('strong', {text: dateStr, cls: 'date-header'});
entries.forEach(page => {
const entryDiv = dateDiv.createEl('div', {
cls: 'entry',
attr: {'data-type': page.type.toLowerCase()}
});
const emoji = {book: 'š', movie: 'š¬', restaurant: 'š½ļø', concert: 'šµ', theater: 'š', sports: 'ā¾'}[page.type.toLowerCase()] || 'š';
entryDiv.innerHTML = `${emoji} `;
entryDiv.createEl('a', {text: page.file.name, href: page.file.path, cls: 'title-link'});
entryDiv.innerHTML += ` by ${page.author || 'Unknown'} (${page.rating || 'Unrated'})`;
});
}
// Add the filter function
container.createEl('script', {
text: `
function applyFilters() {
const typeFilter = document.getElementById('typeFilter').value.toLowerCase();
const monthFilter = document.getElementById('monthFilter').value;
const yearFilter = document.getElementById('yearFilter').value;
const dateGroups = document.querySelectorAll('.date-group');
let visibleGroupCount = 0;
dateGroups.forEach((dateGroup, index) => {
const date = new Date(dateGroup.getAttribute('data-date'));
const month = (date.getMonth() + 1).toString().padStart(2, '0');
const year = date.getFullYear().toString();
const entries = dateGroup.querySelectorAll('.entry');
let visibleEntries = 0;
entries.forEach(entry => {
const entryType = entry.getAttribute('data-type');
const typeMatch = typeFilter === 'all types' || entryType === typeFilter;
const monthMatch = monthFilter === 'all' || month === monthFilter;
const yearMatch = yearFilter === 'all' || year === yearFilter;
if (typeMatch && monthMatch && yearMatch) {
entry.style.display = 'block';
visibleEntries++;
} else {
entry.style.display = 'none';
}
});
if (visibleEntries > 0) {
dateGroup.style.display = 'block';
if (index > 0) {
const spacer = dateGroup.previousElementSibling;
if (spacer && spacer.tagName === 'BR') {
spacer.style.display = 'block';
spacer.previousElementSibling.style.display = 'block';
}
}
visibleGroupCount++;
} else {
dateGroup.style.display = 'none';
if (index > 0) {
const spacer = dateGroup.previousElementSibling;
if (spacer && spacer.tagName === 'BR') {
spacer.style.display = 'none';
spacer.previousElementSibling.style.display = 'none';
}
}
}
});
}
`
});
```
<style>
.dropdown, button {
margin-right: 10px;
}
.title-link {
color: var(--link-color);
font-weight: bold;
}
</style>