Initial commit
This commit is contained in:
s4luorth
257
assets/js/frontend.js
Normal file
257
assets/js/frontend.js
Normal file
@@ -0,0 +1,257 @@
|
||||
/**
|
||||
* Door Status Voting - Frontend JavaScript
|
||||
*/
|
||||
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
initDoorVoting();
|
||||
});
|
||||
|
||||
function initDoorVoting() {
|
||||
const widgets = document.querySelectorAll('.dsv-widget');
|
||||
|
||||
widgets.forEach(function(widget) {
|
||||
// Vote Buttons
|
||||
const buttons = widget.querySelectorAll('.dsv-btn');
|
||||
buttons.forEach(function(btn) {
|
||||
btn.addEventListener('click', function() {
|
||||
handleVote(widget, btn.dataset.vote);
|
||||
});
|
||||
});
|
||||
|
||||
// Remove Vote Button
|
||||
const removeBtn = widget.querySelector('.dsv-remove-vote');
|
||||
if (removeBtn) {
|
||||
removeBtn.addEventListener('click', function() {
|
||||
handleRemoveVote(widget);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function handleVote(widget, vote) {
|
||||
const postId = widget.dataset.postId;
|
||||
const hasVoted = widget.dataset.hasVoted === 'true';
|
||||
|
||||
if (hasVoted) return;
|
||||
|
||||
// Buttons deaktivieren
|
||||
const buttons = widget.querySelectorAll('.dsv-btn');
|
||||
buttons.forEach(function(btn) {
|
||||
btn.disabled = true;
|
||||
});
|
||||
|
||||
// Animation starten
|
||||
widget.classList.add('dsv-animating');
|
||||
|
||||
// AJAX Request
|
||||
const formData = new FormData();
|
||||
formData.append('action', 'dsv_vote');
|
||||
formData.append('post_id', postId);
|
||||
formData.append('vote', vote);
|
||||
formData.append('nonce', dsvConfig.nonce);
|
||||
|
||||
fetch(dsvConfig.ajaxUrl, {
|
||||
method: 'POST',
|
||||
body: formData,
|
||||
credentials: 'same-origin'
|
||||
})
|
||||
.then(function(response) {
|
||||
return response.json();
|
||||
})
|
||||
.then(function(data) {
|
||||
if (data.success) {
|
||||
updateWidget(widget, data.data, vote);
|
||||
} else {
|
||||
console.error('Vote error:', data.data?.message);
|
||||
buttons.forEach(function(btn) {
|
||||
btn.disabled = false;
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch(function(error) {
|
||||
console.error('Network error:', error);
|
||||
buttons.forEach(function(btn) {
|
||||
btn.disabled = false;
|
||||
});
|
||||
})
|
||||
.finally(function() {
|
||||
widget.classList.remove('dsv-animating');
|
||||
});
|
||||
}
|
||||
|
||||
function handleRemoveVote(widget) {
|
||||
const postId = widget.dataset.postId;
|
||||
|
||||
// Button deaktivieren
|
||||
const removeBtn = widget.querySelector('.dsv-remove-vote');
|
||||
if (removeBtn) {
|
||||
removeBtn.disabled = true;
|
||||
removeBtn.textContent = '...';
|
||||
}
|
||||
|
||||
widget.classList.add('dsv-animating');
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append('action', 'dsv_remove_vote');
|
||||
formData.append('post_id', postId);
|
||||
formData.append('nonce', dsvConfig.nonce);
|
||||
|
||||
fetch(dsvConfig.ajaxUrl, {
|
||||
method: 'POST',
|
||||
body: formData,
|
||||
credentials: 'same-origin'
|
||||
})
|
||||
.then(function(response) {
|
||||
return response.json();
|
||||
})
|
||||
.then(function(data) {
|
||||
if (data.success) {
|
||||
resetWidgetToVoting(widget, data.data);
|
||||
} else {
|
||||
console.error('Remove vote error:', data.data?.message);
|
||||
if (removeBtn) {
|
||||
removeBtn.disabled = false;
|
||||
removeBtn.textContent = '✕';
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch(function(error) {
|
||||
console.error('Network error:', error);
|
||||
if (removeBtn) {
|
||||
removeBtn.disabled = false;
|
||||
removeBtn.textContent = '✕';
|
||||
}
|
||||
})
|
||||
.finally(function() {
|
||||
widget.classList.remove('dsv-animating');
|
||||
});
|
||||
}
|
||||
|
||||
function updateWidget(widget, data, userVote) {
|
||||
// Status aktualisieren
|
||||
widget.dataset.status = data.status;
|
||||
widget.dataset.hasVoted = 'true';
|
||||
widget.dataset.userVote = userVote;
|
||||
|
||||
// Badge aktualisieren
|
||||
const badge = widget.querySelector('.dsv-status-badge');
|
||||
badge.className = 'dsv-status-badge dsv-status-' + data.status;
|
||||
|
||||
if (data.status === 'open') {
|
||||
badge.innerHTML = '🟢 GEÖFFNET';
|
||||
} else if (data.status === 'closed') {
|
||||
badge.innerHTML = '🔴 GESCHLOSSEN';
|
||||
} else {
|
||||
badge.innerHTML = '🟡 UNKLAR';
|
||||
}
|
||||
|
||||
// Fortschrittsbalken aktualisieren
|
||||
updateProgressBar(widget, data);
|
||||
|
||||
// Buttons durch Bestätigung ersetzen
|
||||
const buttonsContainer = widget.querySelector('.dsv-buttons');
|
||||
buttonsContainer.classList.add('dsv-voted');
|
||||
|
||||
const voteClass = userVote === 'open' ? 'dsv-voted-open' : 'dsv-voted-closed';
|
||||
const voteIcon = userVote === 'open' ? '✓' : '✗';
|
||||
const voteText = userVote === 'open' ? 'Geöffnet' : 'Geschlossen';
|
||||
|
||||
buttonsContainer.innerHTML =
|
||||
'<div class="dsv-voted-message ' + voteClass + '">' +
|
||||
'<span class="dsv-voted-icon">' + voteIcon + '</span>' +
|
||||
'<span class="dsv-voted-text">Du hast für "' + voteText + '" gestimmt</span>' +
|
||||
'<button type="button" class="dsv-remove-vote" title="Stimme zurücknehmen">✕</button>' +
|
||||
'</div>';
|
||||
|
||||
// Event Listener für neuen Remove Button
|
||||
const newRemoveBtn = buttonsContainer.querySelector('.dsv-remove-vote');
|
||||
newRemoveBtn.addEventListener('click', function() {
|
||||
handleRemoveVote(widget);
|
||||
});
|
||||
|
||||
// Total aktualisieren
|
||||
widget.querySelector('.dsv-total').textContent = data.total;
|
||||
|
||||
// Pulse Animation
|
||||
widget.classList.add('dsv-just-voted');
|
||||
setTimeout(function() {
|
||||
widget.classList.remove('dsv-just-voted');
|
||||
}, 500);
|
||||
}
|
||||
|
||||
function resetWidgetToVoting(widget, data) {
|
||||
// Status aktualisieren
|
||||
widget.dataset.status = data.status;
|
||||
widget.dataset.hasVoted = 'false';
|
||||
widget.dataset.userVote = '';
|
||||
|
||||
// Badge aktualisieren
|
||||
const badge = widget.querySelector('.dsv-status-badge');
|
||||
badge.className = 'dsv-status-badge dsv-status-' + data.status;
|
||||
|
||||
if (data.status === 'open') {
|
||||
badge.innerHTML = '🟢 GEÖFFNET';
|
||||
} else if (data.status === 'closed') {
|
||||
badge.innerHTML = '🔴 GESCHLOSSEN';
|
||||
} else {
|
||||
badge.innerHTML = '🟡 UNKLAR';
|
||||
}
|
||||
|
||||
// Fortschrittsbalken aktualisieren
|
||||
updateProgressBar(widget, data);
|
||||
|
||||
// Voting Buttons wieder anzeigen
|
||||
const buttonsContainer = widget.querySelector('.dsv-buttons');
|
||||
buttonsContainer.classList.remove('dsv-voted');
|
||||
|
||||
buttonsContainer.innerHTML =
|
||||
'<button type="button" class="dsv-btn dsv-btn-open" data-vote="open">' +
|
||||
'<span class="dsv-btn-icon">✓</span>' +
|
||||
'<span class="dsv-btn-text">Geöffnet</span>' +
|
||||
'</button>' +
|
||||
'<button type="button" class="dsv-btn dsv-btn-closed" data-vote="closed">' +
|
||||
'<span class="dsv-btn-icon">✗</span>' +
|
||||
'<span class="dsv-btn-text">Geschlossen</span>' +
|
||||
'</button>';
|
||||
|
||||
// Event Listener für neue Buttons
|
||||
const newButtons = buttonsContainer.querySelectorAll('.dsv-btn');
|
||||
newButtons.forEach(function(btn) {
|
||||
btn.addEventListener('click', function() {
|
||||
handleVote(widget, btn.dataset.vote);
|
||||
});
|
||||
});
|
||||
|
||||
// Total aktualisieren
|
||||
widget.querySelector('.dsv-total').textContent = data.total;
|
||||
}
|
||||
|
||||
function updateProgressBar(widget, data) {
|
||||
const progressOpen = widget.querySelector('.dsv-progress-open');
|
||||
const progressClosed = widget.querySelector('.dsv-progress-closed');
|
||||
|
||||
progressOpen.style.width = data.openPercent + '%';
|
||||
progressClosed.style.width = (100 - data.openPercent) + '%';
|
||||
|
||||
// Zähler
|
||||
if (data.openPercent > 15) {
|
||||
progressOpen.innerHTML = '<span class="dsv-progress-count">' + data.votes.open + '</span>';
|
||||
} else {
|
||||
progressOpen.innerHTML = '';
|
||||
}
|
||||
|
||||
if ((100 - data.openPercent) > 15) {
|
||||
progressClosed.innerHTML = '<span class="dsv-progress-count">' + data.votes.closed + '</span>';
|
||||
} else {
|
||||
progressClosed.innerHTML = '';
|
||||
}
|
||||
|
||||
// Labels
|
||||
widget.querySelector('.dsv-label-open').textContent = 'Geöffnet (' + data.openPercent + '%)';
|
||||
widget.querySelector('.dsv-label-closed').textContent = 'Geschlossen (' + (100 - data.openPercent) + '%)';
|
||||
}
|
||||
|
||||
})();
|
||||
Reference in New Issue
Block a user