feat: complete P2P polling app with vote management and UI improvements
- Add peer-to-peer polling with real-time synchronization via PeerJS - Implement vote changing, unvoting, and proper vote validation - Add modal interface for adding poll options - Fix vote inheritance issues for new users joining rooms - Create sidebar with available polls and connected peers - Add vote count synchronization across all connected peers - Implement proper vote state validation per user - Add localStorage persistence for polls and vote states - Create responsive design with modern UI components - Replace emojis with proper text-based icons - Add comprehensive error handling and user feedback - Support multiple polls with switching capabilities - Implement conflict resolution for concurrent voting
This commit is contained in:
419
js/ui-controller.js
Normal file
419
js/ui-controller.js
Normal file
@@ -0,0 +1,419 @@
|
||||
class UIController {
|
||||
constructor(peerManager, pollManager) {
|
||||
this.peerManager = peerManager;
|
||||
this.pollManager = pollManager;
|
||||
this.initializeEventListeners();
|
||||
}
|
||||
|
||||
initializeEventListeners() {
|
||||
// Connection controls
|
||||
document.getElementById('join-btn').addEventListener('click', () => this.handleJoinRoom());
|
||||
document.getElementById('copy-id-btn').addEventListener('click', () => this.copyPeerId());
|
||||
|
||||
// Poll creation
|
||||
document.getElementById('create-poll-btn').addEventListener('click', () => this.handleCreatePoll());
|
||||
document.getElementById('add-option-btn').addEventListener('click', () => this.addOptionInput());
|
||||
|
||||
// Active poll
|
||||
document.getElementById('add-poll-option-btn').addEventListener('click', () => this.showAddOptionModal());
|
||||
document.getElementById('reset-poll-btn').addEventListener('click', () => this.handleResetPoll());
|
||||
document.getElementById('new-poll-btn').addEventListener('click', () => this.handleNewPoll());
|
||||
|
||||
// Modal controls
|
||||
document.getElementById('close-modal-btn').addEventListener('click', () => this.hideAddOptionModal());
|
||||
document.getElementById('cancel-modal-btn').addEventListener('click', () => this.hideAddOptionModal());
|
||||
document.getElementById('save-option-btn').addEventListener('click', () => this.handleAddOptionFromModal());
|
||||
|
||||
// Enter key handlers
|
||||
document.getElementById('room-id').addEventListener('keypress', (e) => {
|
||||
if (e.key === 'Enter') this.handleJoinRoom();
|
||||
});
|
||||
|
||||
document.getElementById('poll-question').addEventListener('keypress', (e) => {
|
||||
if (e.key === 'Enter') this.handleCreatePoll();
|
||||
});
|
||||
|
||||
document.getElementById('new-option-input').addEventListener('keypress', (e) => {
|
||||
if (e.key === 'Enter') this.handleAddOptionFromModal();
|
||||
});
|
||||
|
||||
// Close modal on background click
|
||||
document.getElementById('add-option-modal').addEventListener('click', (e) => {
|
||||
if (e.target.id === 'add-option-modal') {
|
||||
this.hideAddOptionModal();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
handleJoinRoom() {
|
||||
const roomIdInput = document.getElementById('room-id');
|
||||
const peerId = roomIdInput.value.trim();
|
||||
|
||||
this.showLoading(true);
|
||||
|
||||
if (peerId) {
|
||||
// Connect to existing peer (host)
|
||||
this.peerManager.joinRoom(peerId)
|
||||
.then(() => {
|
||||
this.showNotification('Connected to host successfully!', 'success');
|
||||
this.showPollCreation();
|
||||
})
|
||||
.catch(error => {
|
||||
this.showNotification('Failed to connect: ' + error.message, 'error');
|
||||
console.error('Connect error:', error);
|
||||
})
|
||||
.finally(() => {
|
||||
this.showLoading(false);
|
||||
});
|
||||
} else {
|
||||
// Act as host - just show poll creation
|
||||
this.peerManager.createRoom();
|
||||
this.showNotification('You are the host. Share your Peer ID with others to connect.', 'success');
|
||||
this.showPollCreation();
|
||||
this.showLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
async copyPeerId() {
|
||||
const peerId = this.peerManager.getPeerId();
|
||||
if (peerId) {
|
||||
try {
|
||||
await navigator.clipboard.writeText(peerId);
|
||||
this.showNotification('Peer ID copied to clipboard!', 'success');
|
||||
} catch (error) {
|
||||
// Fallback for older browsers
|
||||
const textArea = document.createElement('textarea');
|
||||
textArea.value = peerId;
|
||||
document.body.appendChild(textArea);
|
||||
textArea.select();
|
||||
document.execCommand('copy');
|
||||
document.body.removeChild(textArea);
|
||||
this.showNotification('Peer ID copied to clipboard!', 'success');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
handleCreatePoll() {
|
||||
const questionInput = document.getElementById('poll-question');
|
||||
const optionInputs = document.querySelectorAll('.option-text');
|
||||
const options = [];
|
||||
|
||||
console.log('Question input:', questionInput);
|
||||
console.log('Found option inputs:', optionInputs.length);
|
||||
|
||||
// Check if question input exists
|
||||
if (!questionInput) {
|
||||
console.error('Question input not found!');
|
||||
this.showNotification('Error: Question input not found', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
const question = questionInput.value ? questionInput.value.trim() : '';
|
||||
console.log('Question:', question);
|
||||
|
||||
optionInputs.forEach((input, index) => {
|
||||
console.log(`Input ${index}:`, input, 'value:', input?.value);
|
||||
if (input && typeof input.value !== 'undefined') {
|
||||
const text = input.value.trim();
|
||||
if (text) {
|
||||
options.push(text);
|
||||
}
|
||||
} else {
|
||||
console.warn(`Input ${index} is invalid or has no value property`);
|
||||
}
|
||||
});
|
||||
|
||||
console.log('Final options:', options);
|
||||
|
||||
if (!question) {
|
||||
this.showNotification('Please enter a poll question', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
if (options.length < 2) {
|
||||
this.showNotification('Please enter at least 2 options', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
this.pollManager.createPoll(question, options);
|
||||
this.showNotification('Poll created successfully!', 'success');
|
||||
} catch (error) {
|
||||
console.error('Create poll error:', error);
|
||||
this.showNotification('Failed to create poll: ' + error.message, 'error');
|
||||
}
|
||||
}
|
||||
|
||||
showAddOptionModal() {
|
||||
const modal = document.getElementById('add-option-modal');
|
||||
const input = document.getElementById('new-option-input');
|
||||
modal.classList.remove('hidden');
|
||||
input.value = '';
|
||||
input.focus();
|
||||
}
|
||||
|
||||
hideAddOptionModal() {
|
||||
const modal = document.getElementById('add-option-modal');
|
||||
const input = document.getElementById('new-option-input');
|
||||
modal.classList.add('hidden');
|
||||
input.value = '';
|
||||
}
|
||||
|
||||
handleAddOptionFromModal() {
|
||||
const input = document.getElementById('new-option-input');
|
||||
const optionText = input.value.trim();
|
||||
|
||||
if (!optionText) {
|
||||
this.showNotification('Please enter an option text', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
this.pollManager.addOption(optionText);
|
||||
this.hideAddOptionModal();
|
||||
this.showNotification('Option added successfully!', 'success');
|
||||
} catch (error) {
|
||||
this.showNotification('Failed to add option: ' + error.message, 'error');
|
||||
}
|
||||
}
|
||||
|
||||
handleAddPollOption() {
|
||||
this.showAddOptionModal();
|
||||
}
|
||||
|
||||
handleResetPoll() {
|
||||
if (confirm('Are you sure you want to reset all votes?')) {
|
||||
try {
|
||||
this.pollManager.resetPoll();
|
||||
this.showNotification('Poll reset successfully!', 'success');
|
||||
} catch (error) {
|
||||
this.showNotification('Failed to reset poll: ' + error.message, 'error');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
handleNewPoll() {
|
||||
this.pollManager.createNewPoll();
|
||||
this.showPollCreation();
|
||||
this.clearPollForm();
|
||||
}
|
||||
|
||||
addOptionInput() {
|
||||
const container = document.getElementById('options-container');
|
||||
const optionCount = container.children.length;
|
||||
|
||||
const optionDiv = document.createElement('div');
|
||||
optionDiv.className = 'option-input';
|
||||
optionDiv.innerHTML = `
|
||||
<input type="text" class="option-text" placeholder="Option ${optionCount + 1}">
|
||||
<button class="remove-option-btn">Remove</button>
|
||||
`;
|
||||
|
||||
container.appendChild(optionDiv);
|
||||
this.updateOptionRemoveButtons();
|
||||
|
||||
// Add event listener to new input
|
||||
const newInput = optionDiv.querySelector('.option-text');
|
||||
newInput.addEventListener('keypress', (e) => {
|
||||
if (e.key === 'Enter') this.handleCreatePoll();
|
||||
});
|
||||
|
||||
// Add event listener to remove button
|
||||
const removeBtn = optionDiv.querySelector('.remove-option-btn');
|
||||
removeBtn.addEventListener('click', () => {
|
||||
optionDiv.remove();
|
||||
this.updateOptionRemoveButtons();
|
||||
this.updateOptionPlaceholders();
|
||||
});
|
||||
|
||||
// Focus on new input
|
||||
newInput.focus();
|
||||
}
|
||||
|
||||
updateOptionRemoveButtons() {
|
||||
const optionInputs = document.querySelectorAll('.option-input');
|
||||
const removeButtons = document.querySelectorAll('.remove-option-btn');
|
||||
|
||||
removeButtons.forEach((btn, index) => {
|
||||
if (optionInputs.length <= 2) {
|
||||
btn.classList.add('hidden');
|
||||
} else {
|
||||
btn.classList.remove('hidden');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
updateOptionPlaceholders() {
|
||||
const optionInputs = document.querySelectorAll('.option-text');
|
||||
optionInputs.forEach((input, index) => {
|
||||
input.placeholder = `Option ${index + 1}`;
|
||||
});
|
||||
}
|
||||
|
||||
clearPollForm() {
|
||||
document.getElementById('poll-question').value = '';
|
||||
const container = document.getElementById('options-container');
|
||||
container.innerHTML = `
|
||||
<div class="option-input">
|
||||
<input type="text" class="option-text" placeholder="Option 1">
|
||||
<button class="remove-option-btn hidden">Remove</button>
|
||||
</div>
|
||||
<div class="option-input">
|
||||
<input type="text" class="option-text" placeholder="Option 2">
|
||||
<button class="remove-option-btn hidden">Remove</button>
|
||||
</div>
|
||||
`;
|
||||
this.updateOptionRemoveButtons();
|
||||
}
|
||||
|
||||
showPollCreation() {
|
||||
document.getElementById('connection-section').classList.add('hidden');
|
||||
document.getElementById('poll-creation').classList.remove('hidden');
|
||||
document.getElementById('active-poll').classList.add('hidden');
|
||||
}
|
||||
|
||||
showActivePoll() {
|
||||
document.getElementById('connection-section').classList.add('hidden');
|
||||
document.getElementById('poll-creation').classList.add('hidden');
|
||||
document.getElementById('active-poll').classList.remove('hidden');
|
||||
}
|
||||
|
||||
updatePeerId(peerId) {
|
||||
const element = document.getElementById('peer-id');
|
||||
if (element) {
|
||||
element.textContent = peerId || 'Loading...';
|
||||
}
|
||||
}
|
||||
|
||||
renderPoll(poll) {
|
||||
if (!poll) return;
|
||||
|
||||
this.showActivePoll();
|
||||
|
||||
// Update poll question
|
||||
document.getElementById('poll-question-display').textContent = poll.question;
|
||||
|
||||
// Render options
|
||||
const optionsContainer = document.getElementById('poll-options');
|
||||
optionsContainer.innerHTML = '';
|
||||
|
||||
const totalVotes = poll.options.reduce((sum, opt) => sum + opt.votes, 0);
|
||||
const myVotedOption = this.pollManager.getMyVotedOption();
|
||||
|
||||
poll.options.forEach(option => {
|
||||
const optionDiv = document.createElement('div');
|
||||
optionDiv.className = 'poll-option';
|
||||
|
||||
const hasVoted = this.pollManager.hasVoted(option.id);
|
||||
const myVotedOption = this.pollManager.getMyVotedOption();
|
||||
|
||||
console.log(`Option ${option.id}: hasVoted=${hasVoted}, myVotedOption=${myVotedOption}`);
|
||||
|
||||
if (hasVoted) {
|
||||
optionDiv.classList.add('voted');
|
||||
} else if (myVotedOption) {
|
||||
// User has voted but not for this option - this is a change vote option
|
||||
optionDiv.classList.add('change-vote');
|
||||
}
|
||||
|
||||
const percentage = totalVotes > 0 ? (option.votes / totalVotes * 100).toFixed(1) : 0;
|
||||
|
||||
optionDiv.innerHTML = `
|
||||
<div class="option-header">
|
||||
<span class="option-text">${option.text}</span>
|
||||
<span class="vote-count">${option.votes} votes</span>
|
||||
</div>
|
||||
<div class="vote-bar">
|
||||
<div class="vote-fill" style="width: ${percentage}%"></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
optionDiv.addEventListener('click', () => {
|
||||
const myVotedOption = this.pollManager.getMyVotedOption();
|
||||
|
||||
if (this.pollManager.hasVoted(option.id)) {
|
||||
// Clicking your current vote - unvote
|
||||
if (confirm('Remove your vote?')) {
|
||||
const success = this.pollManager.unvote();
|
||||
if (success) {
|
||||
this.showNotification('Vote removed!', 'success');
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// Either first vote or changing vote
|
||||
const success = this.pollManager.vote(option.id);
|
||||
if (success) {
|
||||
if (myVotedOption) {
|
||||
this.showNotification('Vote changed successfully!', 'success');
|
||||
} else {
|
||||
this.showNotification('Vote recorded!', 'success');
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
optionsContainer.appendChild(optionDiv);
|
||||
});
|
||||
}
|
||||
|
||||
showNotification(message, type = 'info') {
|
||||
const notification = document.getElementById('notification');
|
||||
notification.textContent = message;
|
||||
notification.className = `notification ${type}`;
|
||||
notification.classList.remove('hidden');
|
||||
|
||||
setTimeout(() => {
|
||||
notification.classList.add('hidden');
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
showLoading(show) {
|
||||
const overlay = document.getElementById('loading-overlay');
|
||||
if (show) {
|
||||
overlay.classList.remove('hidden');
|
||||
} else {
|
||||
overlay.classList.add('hidden');
|
||||
}
|
||||
}
|
||||
|
||||
updatePeersList() {
|
||||
// Use the peer manager's updatePeersList method
|
||||
this.peerManager.updatePeersList();
|
||||
}
|
||||
|
||||
updatePollsList(polls) {
|
||||
const pollsList = document.getElementById('polls-list');
|
||||
|
||||
if (!pollsList) return;
|
||||
|
||||
if (polls.length === 0) {
|
||||
pollsList.innerHTML = '<p class="no-polls">No polls created yet</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
pollsList.innerHTML = '';
|
||||
|
||||
polls.forEach(poll => {
|
||||
const pollDiv = document.createElement('div');
|
||||
pollDiv.className = 'poll-item';
|
||||
|
||||
if (this.pollManager.getCurrentPoll() && this.pollManager.getCurrentPoll().id === poll.id) {
|
||||
pollDiv.classList.add('active');
|
||||
}
|
||||
|
||||
const totalVotes = poll.options.reduce((sum, opt) => sum + opt.votes, 0);
|
||||
const createdDate = new Date(poll.createdAt).toLocaleString();
|
||||
|
||||
pollDiv.innerHTML = `
|
||||
<div class="poll-item-title">${poll.question}</div>
|
||||
<div class="poll-item-meta">${totalVotes} votes • ${createdDate}</div>
|
||||
`;
|
||||
|
||||
pollDiv.addEventListener('click', () => {
|
||||
this.pollManager.selectPoll(poll.id);
|
||||
});
|
||||
|
||||
pollsList.appendChild(pollDiv);
|
||||
});
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user