106 lines
No EOL
2.7 KiB
JavaScript
106 lines
No EOL
2.7 KiB
JavaScript
let currentActivity = '';
|
|
let socket;
|
|
|
|
function renderActivitiesOld(activities) {
|
|
const list = document.getElementById('activity-list');
|
|
list.innerHTML = '';
|
|
activities.forEach(activity => {
|
|
const div = document.createElement('div');
|
|
div.textContent = activity;
|
|
div.className = 'activity-item' + (activity === currentActivity ? ' selected' : '');
|
|
div.onclick = () => selectActivity(activity);
|
|
list.appendChild(div);
|
|
});
|
|
}
|
|
|
|
function renderActivities(activities) {
|
|
const list = document.getElementById('activity-list');
|
|
list.innerHTML = '';
|
|
|
|
activities.forEach(activity => {
|
|
const id = `activity-${activity.replace(/\s+/g, '-')}`;
|
|
|
|
const label = document.createElement('label');
|
|
label.className = 'activity-option';
|
|
|
|
const radio = document.createElement('input');
|
|
radio.type = 'radio';
|
|
radio.name = 'activity';
|
|
radio.value = activity;
|
|
radio.id = id;
|
|
if (activity === currentActivity) {
|
|
radio.checked = true;
|
|
}
|
|
|
|
radio.addEventListener('change', () => {
|
|
socket.send(JSON.stringify({ action: 'select', activity }));
|
|
});
|
|
|
|
const span = document.createElement('span');
|
|
span.textContent = activity;
|
|
|
|
label.appendChild(radio);
|
|
label.appendChild(span);
|
|
list.appendChild(label);
|
|
});
|
|
}
|
|
|
|
|
|
|
|
function selectActivity(activity) {
|
|
currentActivity = activity;
|
|
document.getElementById('current-activity').textContent = activity;
|
|
renderActivities(activityList);
|
|
socket.send(JSON.stringify({ action: 'select', activity }));
|
|
}
|
|
|
|
function addNewActivity() {
|
|
const input = document.getElementById('new-activity');
|
|
const newAct = input.value.trim();
|
|
if (newAct && !activityList.includes(newAct)) {
|
|
activityList.push(newAct);
|
|
selectActivity(newAct);
|
|
input.value = '';
|
|
}
|
|
}
|
|
|
|
let activityList = [];
|
|
|
|
async function initializePage() {
|
|
// Fetch initial data from server
|
|
const response = await fetch(`/api/init?u=${user}`);
|
|
const data = await response.json();
|
|
currentActivity = data.current;
|
|
activityList = data.activities;
|
|
document.getElementById('current-activity').textContent = currentActivity;
|
|
renderActivities(activityList);
|
|
}
|
|
|
|
function setupWebSocket() {
|
|
socket = new WebSocket(`ws://${window.location.host}/ws/activity?u=${user}`);
|
|
|
|
socket.onopen = () => {
|
|
console.log('WebSocket connected');
|
|
socket.send(JSON.stringify({ action: 'hello' }));
|
|
};
|
|
|
|
socket.onmessage = (event) => {
|
|
const msg = JSON.parse(event.data);
|
|
if (msg.type === 'activity_update') {
|
|
currentActivity = msg.activity;
|
|
document.getElementById('current-activity').textContent = currentActivity;
|
|
renderActivities(activityList);
|
|
}
|
|
};
|
|
|
|
socket.onclose = () => {
|
|
console.log('WebSocket closed, retrying...');
|
|
setTimeout(setupWebSocket, 1000);
|
|
};
|
|
}
|
|
|
|
// Initialize on load
|
|
window.onload = () => {
|
|
initializePage();
|
|
setupWebSocket();
|
|
}; |