118 lines
4.3 KiB
JavaScript
118 lines
4.3 KiB
JavaScript
document.addEventListener('DOMContentLoaded', function() {
|
||
|
||
function fmt(v) {
|
||
if (v === undefined || v === null || isNaN(v)) return '–';
|
||
return Number(v).toFixed(0);
|
||
}
|
||
|
||
function updatePosition() {
|
||
fetch('/api/position')
|
||
.then(res => res.json())
|
||
.then(data => {
|
||
const p = data.position || {};
|
||
const m = data.motorCounts || {};
|
||
|
||
document.getElementById('state-x').textContent = fmt(p.x);
|
||
document.getElementById('state-y').textContent = fmt(p.y);
|
||
document.getElementById('state-z').textContent = fmt(p.z);
|
||
|
||
document.getElementById('state-phi').textContent = fmt(p.a*180/Math.PI);
|
||
document.getElementById('state-theta').textContent = fmt(p.b*180/Math.PI);
|
||
document.getElementById('state-psi').textContent = fmt(p.c*180/Math.PI);
|
||
|
||
document.getElementById('state-e').textContent = fmt(m.e*180/Math.PI);
|
||
|
||
|
||
|
||
/* Motor-Zustand */
|
||
document.getElementById('motor-x').textContent = fmt(m.x);
|
||
document.getElementById('motor-y').textContent = fmt(m.y*180/Math.PI);
|
||
document.getElementById('motor-z').textContent = fmt(m.z*180/Math.PI);
|
||
|
||
document.getElementById('motor-a').textContent = fmt(m.a*180/Math.PI);
|
||
document.getElementById('motor-b').textContent = fmt(m.b*180/Math.PI);
|
||
document.getElementById('motor-c').textContent = fmt(m.c*180/Math.PI);
|
||
|
||
document.getElementById('motor-e').textContent = fmt(m.e);
|
||
|
||
})
|
||
.catch(err => console.error('Error fetching position:', err));
|
||
}
|
||
|
||
function updateStatus() {
|
||
fetch('/api/status')
|
||
.then(response => response.json())
|
||
.then(data => {
|
||
// WebClients
|
||
const clientsUl = document.getElementById('clients');
|
||
clientsUl.innerHTML = '';
|
||
data.clients.forEach(client => {
|
||
const li = document.createElement('li');
|
||
li.textContent = client;
|
||
clientsUl.appendChild(li);
|
||
});
|
||
|
||
// Sender
|
||
const sendersUl = document.getElementById('senderList');
|
||
sendersUl.innerHTML = '';
|
||
data.senders.forEach(sender => {
|
||
const li = document.createElement('li');
|
||
const state = sender.state || 'disconnected';
|
||
const label = sender.url ? `${sender.name} (${sender.url}): ${state}` : `${sender.name}: ${state}`;
|
||
li.textContent = label;
|
||
li.classList.add(state.toLowerCase());
|
||
sendersUl.appendChild(li);
|
||
});
|
||
|
||
// Letzte Commands
|
||
const commandsUl = document.getElementById('commandList');
|
||
commandsUl.innerHTML = '';
|
||
data.lastCommands.forEach(cmd => {
|
||
const li = document.createElement('li');
|
||
li.textContent = cmd;
|
||
commandsUl.appendChild(li);
|
||
});
|
||
|
||
// Letzte Pings
|
||
const pingsUl = document.getElementById('pingList');
|
||
pingsUl.innerHTML = '';
|
||
data.lastPings.forEach(ping => {
|
||
const li = document.createElement('li');
|
||
li.textContent = ping;
|
||
pingsUl.appendChild(li);
|
||
});
|
||
})
|
||
.catch(error => console.error('Error fetching status:', error));
|
||
}
|
||
|
||
|
||
updateStatus();
|
||
updatePosition();
|
||
|
||
setInterval(() => {
|
||
updateStatus();
|
||
updatePosition();
|
||
}, 1000);
|
||
|
||
});
|
||
|
||
document.querySelectorAll('.section').forEach(sec => {
|
||
const id = sec.dataset.id;
|
||
const saved = localStorage.getItem('section_' + id);
|
||
if (saved === 'collapsed') sec.classList.add('collapsed');
|
||
|
||
sec.querySelector('h2').addEventListener('click', () => {
|
||
sec.classList.toggle('collapsed');
|
||
localStorage.setItem(
|
||
'section_' + id,
|
||
sec.classList.contains('collapsed') ? 'collapsed' : 'open'
|
||
);
|
||
});
|
||
});
|
||
|
||
/* Initial-Zustand
|
||
['clients','pings'].forEach(id => {
|
||
if (!localStorage.getItem('section_' + id))
|
||
localStorage.setItem('section_' + id, 'collapsed');
|
||
});
|
||
*/ |