Create Custom Section
+Build a custom dashboard section by defining filter rules or manually selecting books.
+ + +
+
+
+
+
+
+
+
+ `;
+
+ container.appendChild(ruleElement);
+
+ const fieldSelect = ruleElement.querySelector('.field-select') as HTMLSelectElement;
+ const removeBtn = ruleElement.querySelector('.remove-rule-btn') as HTMLButtonElement;
+
+ fieldSelect.addEventListener('change', () => onFieldChange(ruleElement));
+ removeBtn.addEventListener('click', () => removeFilterRule(ruleId));
+}
+
+function onFieldChange(ruleElement: HTMLElement): void {
+ const fieldSelect = ruleElement.querySelector('.field-select') as HTMLSelectElement;
+ const operatorSelect = ruleElement.querySelector('.operator-select') as HTMLSelectElement;
+ const valueInput = ruleElement.querySelector('.value-input') as HTMLInputElement;
+
+ const fieldId = fieldSelect.value;
+ const field = FILTER_FIELDS.find(f => f.id === fieldId);
+
+ operatorSelect.innerHTML = field
+ ? field.operators.map(op => ``).join('')
+ : '';
+
+ operatorSelect.disabled = !field;
+
+ if (field && field.operators.some(op => op.id === operatorSelect.value && op.requiresValue)) {
+ valueInput.classList.remove('hidden');
+
+ if (field.valueType === 'select' && field.options) {
+ valueInput.type = 'select';
+ } else if (field.valueType === 'number') {
+ valueInput.type = 'number';
+ valueInput.step = '0.01';
+ } else if (field.valueType === 'date') {
+ valueInput.type = 'date';
+ } else {
+ valueInput.type = 'text';
+ }
+ } else {
+ valueInput.classList.add('hidden');
+ }
+
+ operatorSelect.addEventListener('change', () => {
+ const selectedOp = field?.operators.find(op => op.id === operatorSelect.value);
+ if (selectedOp?.requiresValue) {
+ valueInput.classList.remove('hidden');
+ } else {
+ valueInput.classList.add('hidden');
+ }
+ });
+}
+
+function removeFilterRule(ruleId: string): void {
+ const ruleElement = document.querySelector(`[data-rule-id="${ruleId}"]`);
+ if (ruleElement) {
+ ruleElement.remove();
+ }
+}
+
+function onBookSearchInput(): void {
+ if (searchTimeout) {
+ clearTimeout(searchTimeout);
+ }
+ searchTimeout = window.setTimeout(() => {
+ searchBooks();
+ }, 300);
+}
+
+async function searchBooks(): PromiseNo books found
'; + } else { + resultsContainer.innerHTML = books.map(book => ` +
+ 
+
+ `).join('');
+ }
+
+ resultsContainer.classList.remove('hidden');
+}
+
+(window as any).addBookToSelection = function(bookId: string, title: string, author: string): void {
+ if (selectedBooks.has(bookId)) {
+ (window as any).showToast?.warning('Book already selected');
+ return;
+ }
+
+ selectedBooks.set(bookId, {
+ media_item_id: bookId,
+ title: title,
+ author: author,
+ cover_image_path: '',
+ });
+
+ updateSelectedBooksDisplay();
+};
+
+(window as any).removeBookFromSelection = function(bookId: string): void {
+ selectedBooks.delete(bookId);
+ updateSelectedBooksDisplay();
+};
+
+function updateSelectedBooksDisplay(): void {
+ const container = document.getElementById('selected-books') as HTMLElement;
+ if (!container) return;
+
+ if (selectedBooks.size === 0) {
+ container.innerHTML = '
+
+
+
+ ${escapeHtml(book.title)}
+${escapeHtml(book.author)}
+No books selected
'; + return; + } + + container.innerHTML = Array.from(selectedBooks.values()).map(book => ` +
+ ${escapeHtml(book.title)}
+
+
+ `).join('');
+}
+
+async function loadPreview(): Promise';
+
+ try {
+ const response = await (window as any).api.post('/collections/preview', {
+ library_id: libraryId,
+ rules: rules,
+ manual_book_ids: manualBookIds,
+ limit: 20,
+ });
+
+ if (response.ok) {
+ const data = await response.json();
+ displayPreview(data.items || []);
+ } else {
+ throw new Error('Failed to load preview');
+ }
+ } catch (error) {
+ console.error('Preview error:', error);
+ previewContainer.innerHTML = '
Failed to load preview
'; + } +} + +function gatherFilterRules(): FilterRule[] { + const container = document.getElementById('rules-container') as HTMLElement; + if (!container) return []; + + const ruleElements = container.querySelectorAll('.rule-item'); + const rules: FilterRule[] = []; + + ruleElements.forEach((element, index) => { + const fieldSelect = element.querySelector('.field-select') as HTMLSelectElement; + const operatorSelect = element.querySelector('.operator-select') as HTMLSelectElement; + const valueInput = element.querySelector('.value-input') as HTMLInputElement; + + if (fieldSelect.value && operatorSelect.value) { + rules.push({ + id: `rule-${index}`, + field: fieldSelect.value, + operator: operatorSelect.value, + value: valueInput.value, + priority: index, + }); + } + }); + + return rules; +} + +function displayPreview(items: BookInfo[]): void { + const previewContainer = document.getElementById('preview-container') as HTMLElement; + if (!previewContainer) return; + + if (items.length === 0) { + previewContainer.innerHTML = 'No items match your criteria
'; + return; + } + + previewContainer.innerHTML = ` +
+ ${items.map(item => `
+
+
+
+ `).join('')}
+
+ 
+
+
+ + ${escapeHtml(item.title)} +
+ ${item.author ? `${escapeHtml(item.author)}
` : ''} ++ ${items.length} item${items.length !== 1 ? 's' : ''} will be shown +
+ `; +} + +async function saveCustomSection(event: Event): Promise