diff --git a/public/js/app.js b/public/js/app.js index a916029..67e5947 100644 --- a/public/js/app.js +++ b/public/js/app.js @@ -367,7 +367,7 @@ function styleLinePolygon(feature) { // Block 9: Feature Popups for Read, Edit, Delete and Vote // ===================================================================== -function bindFeaturePopup(feature, layer) { +function buildPopupHtml(feature) { const props = feature.properties; const cat = CATEGORIES[props.category] || CATEGORIES.other; @@ -377,8 +377,7 @@ function bindFeaturePopup(feature, layer) { day: '2-digit', month: '2-digit', year: 'numeric' }); - // Builds Popup on Click - const html = '' + + return '' + '' : '') + ''; +} - layer.bindPopup(html, { maxWidth: 320, minWidth: 240 }); +// Binds Popup and Tooltip to Feature Layer +function bindFeaturePopup(feature, layer) { + const cat = CATEGORIES[feature.properties.category] || CATEGORIES.other; - // Builds Tooltip on Hover - layer.bindTooltip(categoryIcon(cat) + ' ' + escapeHtml(props.title), { + // Rebuilts if Popup opens + layer.bindPopup(function () { return buildPopupHtml(feature); }, { maxWidth: 320, minWidth: 240 }); + + // Tooltip on Hover + layer.bindTooltip(categoryIcon(cat) + ' ' + escapeHtml(feature.properties.title), { direction: 'top', offset: [0, -10] }); @@ -575,39 +580,53 @@ function voteContribution(contributionId, voteType) { const likesSpan = document.getElementById('likes-' + contributionId); const dislikesSpan = document.getElementById('dislikes-' + contributionId); + // Finds Feature in Contributions to update Properties + const feature = contributionsData.find(function (f) { + return f.properties.contribution_id === contributionId; + }); + if (response.action === 'created') { - // New Vote — Highlights Button and updates Count userVotes[contributionId] = voteType; if (voteType === 'like') { likeBtn.classList.add('liked'); likesSpan.textContent = parseInt(likesSpan.textContent) + 1; + if (feature) feature.properties.likes_count++; } else { dislikeBtn.classList.add('disliked'); dislikesSpan.textContent = parseInt(dislikesSpan.textContent) + 1; + if (feature) feature.properties.dislikes_count++; } } else if (response.action === 'removed') { - // Vote removed — Removes Button Highlight and updates Count delete userVotes[contributionId]; if (voteType === 'like') { likeBtn.classList.remove('liked'); likesSpan.textContent = Math.max(0, parseInt(likesSpan.textContent) - 1); + if (feature) feature.properties.likes_count = Math.max(0, feature.properties.likes_count - 1); } else { dislikeBtn.classList.remove('disliked'); dislikesSpan.textContent = Math.max(0, parseInt(dislikesSpan.textContent) - 1); + if (feature) feature.properties.dislikes_count = Math.max(0, feature.properties.dislikes_count - 1); } } else if (response.action === 'changed') { - // Vote changed — Switches Highlights and updates both Counts userVotes[contributionId] = voteType; if (voteType === 'like') { likeBtn.classList.add('liked'); dislikeBtn.classList.remove('disliked'); likesSpan.textContent = parseInt(likesSpan.textContent) + 1; dislikesSpan.textContent = Math.max(0, parseInt(dislikesSpan.textContent) - 1); + if (feature) { + feature.properties.likes_count++; + feature.properties.dislikes_count = Math.max(0, feature.properties.dislikes_count - 1); + } } else { dislikeBtn.classList.add('disliked'); likeBtn.classList.remove('liked'); dislikesSpan.textContent = parseInt(dislikesSpan.textContent) + 1; likesSpan.textContent = Math.max(0, parseInt(likesSpan.textContent) - 1); + if (feature) { + feature.properties.dislikes_count++; + feature.properties.likes_count = Math.max(0, feature.properties.likes_count - 1); + } } } });