${item.content}

${assigneeHtml} `; // FIX: Correctly handle pluralization for "weakness" const containerId = item.type === 'weakness' ? 'weaknesses-container' : `${item.type}s-container`; const container = document.getElementById(containerId); if (container) { container.appendChild(card); } else { // This provides a clear error in the console if something is wrong, instead of a crash. console.error(`Could not find container with ID: ${containerId}`); } }); // Re-attach all event listeners attachCardListeners(); } function attachCardListeners() { document.querySelectorAll('.strategy-card').forEach(card => { card.addEventListener('dragstart', handleDragStart); card.addEventListener('dragend', handleDragEnd); }); document.querySelectorAll('.edit-btn').forEach(btn => btn.addEventListener('click', handleEdit)); document.querySelectorAll('.delete-btn').forEach(btn => btn.addEventListener('click', handleDelete)); } // --- DRAG & DROP HANDLERS --- function handleDragStart(e) { e.target.classList.add('dragging'); e.dataTransfer.setData('text/plain', e.target.dataset.id); } function handleDragEnd(e) { e.target.classList.remove('dragging'); } columns.forEach(col => { col.addEventListener('dragover', (e) => { e.preventDefault(); col.classList.add('drag-over'); }); col.addEventListener('dragleave', () => col.classList.remove('drag-over')); col.addEventListener('drop', (e) => { e.preventDefault(); col.classList.remove('drag-over'); const id = parseInt(e.dataTransfer.getData('text/plain')); const newType = col.dataset.type; const item = strategyItems.find(i => i.id === id); if (item && item.type !== newType) { item.type = newType; renderBoard(); } }); }); // --- MODAL & FORM HANDLERS --- function toggleModal(show, itemToEdit = null) { if (show) { if (itemToEdit) { modalTitle.innerText = 'Edit Strategy Item'; itemIdInput.value = itemToEdit.id; itemTypeSelect.value = itemToEdit.type; itemContentInput.value = itemToEdit.content; itemAssigneeInput.value = itemToEdit.assignee; } else { modalTitle.innerText = 'Add New Strategy Item'; itemForm.reset(); itemIdInput.value = ''; } modal.classList.add('active'); } else { modal.classList.remove('active'); } } addItemBtn.addEventListener('click', () => toggleModal(true)); cancelItemBtn.addEventListener('click', () => toggleModal(false)); modal.addEventListener('click', (e) => { if (e.target === modal) toggleModal(false); }); itemForm.addEventListener('submit', (e) => { e.preventDefault(); const id = parseInt(itemIdInput.value); const itemData = { type: itemTypeSelect.value, content: itemContentInput.value.trim(), assignee: itemAssigneeInput.value.trim() }; if (id) { // Editing existing item const item = strategyItems.find(i => i.id === id); if (item) Object.assign(item, itemData); } else { // Adding new item itemData.id = strategyItems.length > 0 ? Math.max(...strategyItems.map(i => i.id)) + 1 : 1; strategyItems.push(itemData); } renderBoard(); toggleModal(false); }); function handleEdit(e) { const id = parseInt(e.target.dataset.id); const item = strategyItems.find(i => i.id === id); if (item) toggleModal(true, item); } function handleDelete(e) { const id = parseInt(e.target.dataset.id); strategyItems = strategyItems.filter(i => i.id !== id); renderBoard(); } // --- INITIALIZATION --- renderBoard(); });